lowlighter · lowlighter · Oct 8, 2024 · Oct 8, 2024 · Oct 8, 2024
diff --git a/@mizu/if/deno.jsonc b/@mizu/if/deno.jsonc
@@ -0,0 +1,8 @@
+{
+  "name": "@mizu/if",
+  "version": "0.1.0",
+  "exports": {
+    ".": "./mod.ts",
+    //"./else": "./else/mod.ts"
+  }
+}
diff --git a/@mizu/if/mod.html b/@mizu/if/mod.html
@@ -0,0 +1,11 @@
+<mizu-directive id="if" directory="if">
+  <code #name><span class="hljs-keyword">*if</span><wbr /><span class="muted">="expression"</span></code>
+  <p #description>
+    Conditionally render an element.
+  </p>
+  <code #example *skip>
+    <div *if="true">
+      <!--...-->
+    </div>
+  </code>
+</mizu-directive>
diff --git a/@mizu/if/mod.ts b/@mizu/if/mod.ts
@@ -0,0 +1,33 @@
+// Imports
+import { type Directive, Phase } from "@mizu/mizu/core/engine"
+export type * from "@mizu/mizu/core/engine"
+
+/**
+ * `*if` directive.
+ *
+ * @internal `_directive.value` Force the directive to use specified value rather than the attribute value.
+ * @internal `_directive.expression` Set the original expression for the directive if element is commented out.
+ * @internal `_directive.directive` Set the original directive name for the directive if element is commented out.
+ */
+export const _if = {
+  name: "*if",
+  phase: Phase.TOGGLE,
+  async execute(renderer, element, { attributes: [attribute], ...options }) {
+    const result = Boolean(await renderer.evaluate(element, arguments[2]._directive?.value ?? attribute.value, options))
+    switch (true) {
+      // Switch comment to element if truthy
+      case result && (renderer.isComment(element)) && (renderer.cache("*").has(element)): {
+        const original = renderer.uncomment(element)
+        return { element: original }
+      }
+      // Switch element to comment if falsy
+      case (!result) && (renderer.isHtmlElement(element)): {
+        const comment = renderer.comment(element, { expression: attribute.value, directive: _if.name, ...arguments[2]._directive })
+        return { element: comment, final: true }
+      }
+    }
+  },
+} as Directive & { execute: NonNullable<Directive["execute"]> }
+
+/** Default exports. */
+export default _if
diff --git a/@mizu/if/mod_test.html b/@mizu/if/mod_test.html
@@ -0,0 +1,45 @@
+<load directives="@mizu/if"></load>
+
+<test name="[*if] renders elements on truthy expressions">
+  <render>
+    <p *if="true">foo</p>
+  </render>
+  <expect>
+    <p>foo</p>
+  </expect>
+</test>
+
+<test name="[*if] comments out elements on falsy expressions">
+  <render>
+    <p *if="false">foo</p>
+  </render>
+  <expect>
+    <!--[*if="false"]-->
+  </expect>
+</test>
+
+<test name="[*if] is reactive">
+  <script>
+    context.value = false
+  </script>
+  <render>
+    <p *if="value">foo</p>
+  </render>
+  <expect>
+    <!--[*if="value"]-->
+  </expect>
+  <script>
+    context.value = true
+  </script>
+  <render></render>
+  <expect>
+    <p>foo</p>
+  </expect>
+  <script>
+    context.value = false
+  </script>
+  <render></render>
+  <expect>
+    <!--[*if="value"]-->
+  </expect>
+</test>
diff --git a/@mizu/if/mod_test.ts b/@mizu/if/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
@@ -90,7 +90,7 @@
     // "@mizu/for",
     // "@mizu/html",
     // "@mizu/http",
-    // "@mizu/if",
+    "@mizu/if",
     // "@mizu/is",
     // "@mizu/markdown",
     "@mizu/mizu",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		await import("@mizu/mizu/core/testing").then(({ test }) => test(import.meta))