lowlighter · lowlighter · Oct 8, 2024 · Oct 8, 2024 · Oct 8, 2024
diff --git a/@mizu/text/deno.jsonc b/@mizu/text/deno.jsonc
@@ -0,0 +1,7 @@
+{
+  "name": "@mizu/text",
+  "version": "0.1.0",
+  "exports": {
+    ".": "./mod.ts"
+  }
+}
diff --git a/@mizu/text/mod.html b/@mizu/text/mod.html
@@ -0,0 +1,18 @@
+<mizu-directive id="text" directory="text">
+  <code #name><span class="hljs-keyword">*text</span><wbr /><span class="muted">="content"</span></code>
+  <p #description>
+    Set element's <var><a href="https://developer.mozilla.org/docs/Web/API/Node/textContent">textContent</a></var>.
+  </p>
+  <code #example *skip>
+    <p *text="'...'">
+      <!--...-->
+    </p>
+  </code>
+  <mizu-note #note>
+    HTML content is escaped.
+  </mizu-note>
+  <mizu-note #note>
+    Using this directive without any attribute value escapes the element's <var><a href="https://developer.mozilla.org/docs/Web/API/Element/innerHTML">innerHTML</a></var>
+    <i class="muted">(e.g. <code>&lt;a *text&gt;&lt;b&gt;&lt;/b&gt;&lt;/a&gt;</code> will result into <code>&lt;a *text&gt;&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;&lt;/a&gt;</code>)</i>.
+  </mizu-note>
+</mizu-directive>
diff --git a/@mizu/text/mod.ts b/@mizu/text/mod.ts
@@ -0,0 +1,23 @@
+// Imports
+import { type Directive, Phase } from "@mizu/mizu/core/engine"
+export type * from "@mizu/mizu/core/engine"
+
+/** `*text` directive. */
+export const _text = {
+  name: "*text",
+  phase: Phase.CONTENT,
+  default: "this.innerHTML",
+  async execute(renderer, element, { attributes: [attribute], ...options }) {
+    if (renderer.isComment(element)) {
+      return
+    }
+    element.textContent = `${await renderer.evaluate(
+      element,
+      attribute.value || this.default,
+      options,
+    )}`
+  },
+} as Directive & { default: NonNullable<Directive["default"]> }
+
+/** Default exports. */
+export default _text
diff --git a/@mizu/text/mod_test.html b/@mizu/text/mod_test.html
@@ -0,0 +1,40 @@
+<load directives="@mizu/text,@mizu/test"></load>
+
+<test name="[*text] sets text content">
+  <render>
+    <p *text="'f'+'o'.repeat(2)"></p>
+  </render>
+  <expect>
+    <p>foo</p>
+  </expect>
+</test>
+
+<test name="[*text] escapes html content">
+  <script>
+    context.value = `<b>foo</b>`
+  </script>
+  <render>
+    <p *text="value"></p>
+  </render>
+  <expect>
+    <p>&lt;b&gt;foo&lt;/b&gt;</p>
+  </expect>
+</test>
+
+<test name="[*text] defaults to `innerHTML` and escapes it">
+  <render>
+    <div *text><p>foo</p></div>
+  </render>
+  <expect>
+    <div>&lt;p&gt;foo&lt;/p&gt;</div>
+  </expect>
+</test>
+
+<test name="[*text] skips commented elements">
+  <render>
+    <p ~test.comment *text="'foo'"></p>
+  </render>
+  <expect>
+    <!--[~test.comment=""]-->
+  </expect>
+</test>
diff --git a/@mizu/text/mod_test.ts b/@mizu/text/mod_test.ts
@@ -0,0 +1 @@
+await import("@mizu/mizu/core/testing").then(({ test }) => test(import.meta))
diff --git a/deno.jsonc b/deno.jsonc
@@ -101,8 +101,8 @@
     // "@mizu/set",
     // "@mizu/show",
     // "@mizu/skip",
-    "@mizu/test"
-    // "@mizu/text",
+    "@mizu/test",
+    "@mizu/text"
     // "@mizu/toc"
   ],
   "fmt": {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		await import("@mizu/mizu/core/testing").then(({ test }) => test(import.meta))