feat: <switch> expression tag

tags/switch/.marko-prettyprint

@@ -0,0 +1,3 @@
+{
+  "indent": "  "
+}

tags/switch/README.md

@@ -0,0 +1,45 @@
+<h1 align="center">
+  <!-- Logo -->
+  <br/>
+  @marko-tags/switch
+	<br/>
+
+  <!-- Stability -->
+  <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
+    <img src="https://img.shields.io/badge/stability-stable-green.svg" alt="API Stability"/>
+  </a>
+  <!-- NPM Version -->
+  <a href="https://npmjs.org/package/@marko-tags/switch">
+    <img src="https://img.shields.io/npm/v/@marko-tags/switch.svg" alt="NPM Version"/>
+  </a>
+  <!-- Downloads -->
+  <a href="https://npmjs.org/package/@marko-tags/switch">
+    <img src="https://img.shields.io/npm/dm/@marko-tags/switch.svg" alt="Downloads"/>
+  </a>
+</h1>
+
+Use <switch> expression instead of long cascade <if-else> within your template.
+
+# Installation
+
+```console
+npm install @marko-tags/switch
+```
+
+# Example
+
+```marko
+<switch by=input.entity>
+  <@case is="Andromeda">
+    <span>Galaxy</span>
+  </@case>
+
+  <@case is=['Earth', 'Mars']>
+    <span>Planet</span>
+  </@case>
+
+  <@default>
+    <span>Star: ${input.entity}</span>
+  </@default>
+</switch>
+```

tags/switch/index.marko

@@ -0,0 +1,21 @@
+$ let validCases = [];
+<for|_case, index| of=input.case>
+  <!-- Validate string or array case value -->
+  <if(
+    _case.is == input.by ||
+    (Array.isArray(_case.is) && _case.is.includes(input.by))
+  )>
+    $ {
+      Array.isArray(_case.is)
+            ? // Array case value: Merge with valid cases
+              (validCases = [...new Set([...validCases, ..._case.is])])
+            : // String case value
+              validCases.push(_case.is);
+    }
+    <${_case.renderBody} key=`switch-${index}`/>
+  </if>
+</for>
+<!-- Default case -->
+<if(input.default && !validCases.includes(input.by))>
+  <${input.default.renderBody} key="switch-default"/>
+</if>

tags/switch/marko-tag.json

@@ -0,0 +1,8 @@
+{
+  "<case>": {
+    "is-repeated": true,
+    "attributes": {
+      "is": "expression"
+    }
+  }
+}

tags/switch/marko.json

@@ -0,0 +1,8 @@
+{
+  "<switch>": {
+    "template": "./index.marko",
+    "attributes": {
+      "by": "expression"
+    }
+  }
+}

tags/switch/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@marko-tags/switch",
+  "description": "Use <switch> expression tag instead of long cascade <if-else> tags within your template.",
+  "version": "0.4.4",
+  "author": "Fabrice K.M.E <[email protected]>",
+  "bugs": "https://github.com/marko-js/tags/issues/new?template=Bug_report.md",
+  "files": [
+    "index.marko",
+    "marko-tag.json",
+    "marko.json"
+  ],
+  "homepage": "https://github.com/marko-js/tags/tree/master/tags/switch",
+  "keywords": [
+    "marko",
+    "switch"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "marko": "^4.12.4 || ^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marko-js/tags"
+  }
+}

tags/switch/test/fixtures/example.marko

@@ -0,0 +1,13 @@
+<if(input.entity)>
+  <switch by=input.entity>
+    <@case is="Andromeda">
+      <span>Galaxy</span>
+    </@case>
+    <@case is=["Earth", "Mars"]>
+      <span>Planet</span>
+    </@case>
+    <@default>
+      <span>Star: ${input.entity}</span>
+    </@default>
+  </switch>
+</if>

tags/switch/test/test.browser.js

@@ -0,0 +1,35 @@
+const { render, cleanup } = require("@marko/testing-library");
+const { expect, use } = require("chai");
+use(require("chai-dom"));
+
+const example = require("./fixtures/example").default;
+
+describe("browser", () => {
+  afterEach(cleanup);
+
+  describe("switch by=*", () => {
+    it("entity input equal 'Andromeda' and renders 'Galaxy'", async () => {
+      const { container, rerender } = await render(example, {
+        entity: "Andromeda",
+      });
+      expect(container).has.text("Galaxy");
+    });
+
+    it("entity input equal 'Earth' matches array options case and renders 'Planet'", async () => {
+      const { container, rerender } = await render(example, {
+        entity: "Earth",
+      });
+      expect(container).has.text("Planet");
+    });
+
+    it("entity input equal 'Mars' matches array options case and renders 'Planet'", async () => {
+      const { container } = await render(example, { entity: "Mars" });
+      expect(container).has.text("Planet");
+    });
+
+    it("entity input equal 'Sun' catches default case and renders 'Star: Sun'", async () => {
+      const { container, rerender } = await render(example, { entity: "Sun" });
+      expect(container).has.text("Star: Sun");
+    });
+  });
+});

tags/switch/test/test.server.js

@@ -0,0 +1,33 @@
+const { render } = require("@marko/testing-library");
+const { expect, use } = require("chai");
+use(require("chai-dom"));
+
+const example = require("./fixtures/example").default;
+
+describe("browser", () => {
+  describe("switch by=*", () => {
+    it("entity input equal 'Andromeda' and renders 'Galaxy'", async () => {
+      const { container, rerender } = await render(example, {
+        entity: "Andromeda",
+      });
+      expect(container).has.text("Galaxy");
+    });
+
+    it("entity input equal 'Earth' matches array options case and renders 'Planet'", async () => {
+      const { container, rerender } = await render(example, {
+        entity: "Earth",
+      });
+      expect(container).has.text("Planet");
+    });
+
+    it("entity input equal 'Mars' matches array options case and renders 'Planet'", async () => {
+      const { container } = await render(example, { entity: "Mars" });
+      expect(container).has.text("Planet");
+    });
+
+    it("entity input equal 'Sun' catches default case and renders 'Star: Sun'", async () => {
+      const { container, rerender } = await render(example, { entity: "Sun" });
+      expect(container).has.text("Star: Sun");
+    });
+  });
+});