Add debug logging

Author: gordonbrander

typescript/packages/common-html/example/main.ts

@@ -1,33 +1,33 @@
-import render from "../src/render.js";
+import render, { setNodeSanitizer, setEventSanitizer } from "../src/render.js";
 import html from "../src/html.js";
 import { state, stream } from "../src/state.js";
 import { setDebug } from "../src/logger.js";
 
 setDebug(true);
 
-const text = state("text", "Hello, world!");
-
-setInterval(() => {
-  text.send(`Hello, world! ${new Date().toLocaleTimeString()}`);
-}, 1000);
+// setNodeSanitizer(...);
+// setEventSanitizer(...);
 
+const text = state("text", "Hello, world!");
 const clicks = stream("clicks");
 
-clicks.sink((value) => {
-  console.log("clicks", value);
-});
-
+// Build template
 const renderable = html`
   <div class="container">
     <h1 class="title">${text}</h1>
     <button onclick=${clicks}>Click me</button>
   </div>
 `;
 
-console.log("renderable", renderable);
-
+// Render
 const dom = render(renderable);
 
-console.log("dom", dom);
+clicks.sink((value) => {
+  console.log("clicks", value);
+});
+
+setInterval(() => {
+  text.send(`Hello, world! ${new Date().toLocaleTimeString()}`);
+}, 1000);
 
 document.body.appendChild(dom);

typescript/packages/common-html/src/html.ts

@@ -2,6 +2,7 @@ import parse from "./parser.js";
 import { Node, isNode } from "./node.js";
 import * as hole from "./hole.js";
 import { NamedReactive } from "./reactive.js";
+import * as logger from "./logger.js";
 
 export const html = (
   strings: TemplateStringsArray,
@@ -21,13 +22,17 @@ export const html = (
     throw TypeError("Template root must be an element");
   }
 
-  const context = Object.freeze(indexContext(values));
+  const context = indexContext(values);
 
-  return Object.freeze({
+  const renderable: Renderable = {
     type: "renderable",
     template,
     context,
-  })
+  };
+
+  logger.debug("Renderable", renderable);
+
+  return renderable;
 };
 
 export default html;
@@ -46,14 +51,16 @@ export type Context = { [key: string]: NamedReactive<unknown> };
 
 const indexContext = (items: Array<NamedReactive<unknown>>): Context => {
   return Object.fromEntries(items.map((item) => [item.name, item]));
-}
+};
 
 const flattenTemplateStrings = (
   strings: TemplateStringsArray,
-  values: Array<NamedReactive<unknown>>
+  values: Array<NamedReactive<unknown>>,
 ): string => {
-  return strings.reduce((result, string, i) => {
+  const templateString = strings.reduce((result, string, i) => {
     const value = values[i];
     return result + string + (value ? hole.markup(value.name) : "");
   }, "");
-}
+  logger.debug("Flattened", templateString);
+  return templateString;
+};

typescript/packages/common-html/src/logger.ts

@@ -12,7 +12,6 @@ export const setDebug = (value: boolean) => {
   isDebug = value;
 };
 
-
 /** Log warning */
 export const warn = (...args: unknown[]) => {
   console.warn(...args);
@@ -23,4 +22,4 @@ export const debug = (...args: unknown[]) => {
   if (isDebug) {
     console.debug(...args);
   }
-};
+};

typescript/packages/common-html/src/parser.ts

@@ -2,6 +2,7 @@ import sax from "sax";
 import parseMustaches from "./stache.js";
 import { isHole } from "./hole.js";
 import { create as createNode, Node, Attrs } from "./node.js";
+import * as logger from "./logger.js";
 
 /** Parse a template into a simple JSON markup representation */
 export const parse = (markup: string): Node => {
@@ -51,6 +52,8 @@ export const parse = (markup: string): Node => {
     throw new ParseError(`Unexpected root node ${root.tag}`);
   }
 
+  logger.debug("Parsed", root);
+
   return root;
 };
 

typescript/packages/common-html/src/render.ts

@@ -1,9 +1,10 @@
 import { isNode, Node } from "./node.js";
 import { Renderable, Context, isRenderable } from "./html.js";
-import { Hole, isHole } from "./hole.js";
+import { isHole } from "./hole.js";
 import { effect } from "./reactive.js";
 import { isSendable } from "./sendable.js";
 import { useCancelGroup, Cancel } from "./cancel.js";
+import * as logger from "./logger.js";
 
 export type CancellableHTMLElement = HTMLElement & { cancel?: Cancel };
 
@@ -16,6 +17,7 @@ export const render = (renderable: Renderable): HTMLElement => {
     addCancel,
   ) as CancellableHTMLElement;
   root.cancel = cancel;
+  logger.debug("Rendered", root);
   return root;
 };