feat: add directives

packages/html/_src/data/Interpolation/operations.ts

@@ -4,8 +4,8 @@ export * from "@effect/html/data/Interpolation/operations/isInterpolation"
 export * from "@effect/html/data/Interpolation/operations/isSVG"
 export * from "@effect/html/data/Interpolation/operations/make"
 export * from "@effect/html/data/Interpolation/operations/templateStringsArray"
-export * from "@effect/html/data/Interpolation/operations/toDocumentFragment"
 export * from "@effect/html/data/Interpolation/operations/toEntry"
+export * from "@effect/html/data/Interpolation/operations/toString"
 export * from "@effect/html/data/Interpolation/operations/toTemplate"
 export * from "@effect/html/data/Interpolation/operations/toValues"
 export * from "@effect/html/data/Interpolation/operations/type"

packages/html/_src/data/Interpolation/operations/instrument.ts

@@ -6,6 +6,8 @@ const elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g
 const attributes = /([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g
 // eslint-disable-next-line no-control-regex
 const interpolations = /[\x01\x02]/g
+// eslint-disable-next-line no-control-regex
+const directives = /(<\w+[^>]*)(\x01)/g
 
 // \x01 Node.ELEMENT_NODE
 // \x02 Node.ATTRIBUTE_NODE
@@ -21,6 +23,7 @@ export function instrument(
 ): string {
   concreteInterpolation(self)
   let i = 0
+
   return self.template
     .join("\x01")
     .trim()
@@ -34,11 +37,15 @@ export function instrument(
         return "<" + ml + ">"
       }
     )
+    .replace(
+      directives,
+      (_, element, node) => `${element}${Interpolation.PREFIX}${i++}`
+    )
     .replace(
       interpolations,
       interpolation =>
         interpolation === "\x01" ?
-          ("<!--" + Interpolation.PREFIX + i++ + "-->") :
-          (Interpolation.PREFIX + i++)
+          `<!--${Interpolation.PREFIX}${i++}-->` :
+          `${Interpolation.PREFIX}${i++}`
     )
 }

packages/html/_src/data/Interpolation/operations/toTemplate.ts

@@ -16,6 +16,22 @@ function createPath(node0: Node): Array<number> {
 
 const textOnly = /^(?:textarea|script|style|title|plaintext|xmp)$/
 
+function toHTML(html: string): DocumentFragment {
+  const template = document.createElement("template")
+  template.innerHTML = html
+  return template.content
+}
+
+function toSVG(svg: string): DocumentFragment {
+  const xml = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  xml.innerHTML = svg
+
+  const content = document.createDocumentFragment()
+  content.append(...xml.childNodes)
+
+  return content
+}
+
 /**
  * a template is instrumented to be able to retrieve where updates are needed.
  * Each unique template becomes a portal, cloned once per each other
@@ -28,7 +44,7 @@ export function toTemplate(
 ): Template {
   concreteInterpolation(self)
   const text = self.instrument
-  const content = self.toDocumentFragment
+  const content = self.isSVG ? toSVG(text) : toHTML(text)
   // once instrumented and reproduced as portal, it's crawled
   // to find out where each update is in the portal tree
   const tw = document.createTreeWalker(content, 1 | 128)
@@ -61,11 +77,21 @@ export function toTemplate(
       // the isµX attribute will be removed as irrelevant for the layout
       // let svg = -1;
       while (node.hasAttribute(search)) {
-        nodes.push({
-          type: "attr",
-          path: createPath(node),
-          name: node.getAttribute(search)
-        })
+        const name = node.getAttribute(search)
+        if (name === "") {
+          nodes.push({
+            type: "dir",
+            path: createPath(node),
+            name: undefined
+          })
+        } else {
+          nodes.push({
+            type: "attr",
+            path: createPath(node),
+            name
+          })
+        }
+
         node.removeAttribute(search)
         search = `${Interpolation.PREFIX}${++i}`
       }

packages/html/_src/data/Template/definition.ts

@@ -28,7 +28,7 @@ export declare namespace Template {
     | ((newValue: boolean) => void)
     | ((newValue: Portal.Values) => void)
   export interface Node {
-    type: "node" | "text" | "attr"
+    type: "node" | "text" | "attr" | "dir"
     path: Array<number>
     name: string | null | undefined
   }

packages/html/_src/data/Template/operations/updates.ts

@@ -425,7 +425,13 @@ function handlers(
     return handleAttribute(node, name)
   }
 
-  return text(node)
+  if (type === "text") {
+    return text(node)
+  }
+
+  return () => {
+    //
+  }
 }
 
 /**

packages/html/_test/directive.test.ts

@@ -0,0 +1,30 @@
+import { DOMParser } from "linkedom"
+
+const document = (new DOMParser()).parseFromString("<html />", "text/html")
+
+// patch global this with mocked dom entities
+// @ts-expect-error
+globalThis.document = document
+globalThis.CharacterData = document.defaultView.CharacterData
+globalThis.Node = document.defaultView.Node
+globalThis.Element = document.defaultView.Element
+globalThis.HTMLElement = document.defaultView.HTMLElement
+globalThis.DocumentFragment = document.defaultView.DocumentFragment
+
+describe("render", () => {
+  it("should render a simple template", async () => {
+    const program = Do(($) => {
+      const directive = Handler(() => {
+        //
+      })
+      const result = $(render(
+        document.body,
+        html`<div ${directive} attr=${"test"}></div>`
+      ))
+
+      assert.equal(result.innerHTML, "<div attr=\"test\"></div>")
+    })
+
+    console.log(await program.unsafeRunPromiseExit())
+  })
+})