diff --git a/tags/switch/.marko-prettyprint b/tags/switch/.marko-prettyprint
new file mode 100644
index 0000000..52ea9c0
--- /dev/null
+++ b/tags/switch/.marko-prettyprint
@@ -0,0 +1,3 @@
+{
+ "indent": " "
+}
\ No newline at end of file
diff --git a/tags/switch/README.md b/tags/switch/README.md
new file mode 100644
index 0000000..1640e94
--- /dev/null
+++ b/tags/switch/README.md
@@ -0,0 +1,45 @@
+
+
+
+ @marko-tags/switch
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+Use expression instead of long cascade within your template.
+
+# Installation
+
+```console
+npm install @marko-tags/switch
+```
+
+# Example
+
+```marko
+
+ <@case is="Andromeda">
+ Galaxy
+
+
+ <@case is=['Earth', 'Mars']>
+ Planet
+
+
+ <@default>
+ Star: ${input.entity}
+
+
+```
diff --git a/tags/switch/index.marko b/tags/switch/index.marko
new file mode 100644
index 0000000..d001be4
--- /dev/null
+++ b/tags/switch/index.marko
@@ -0,0 +1,21 @@
+$ let validCases = [];
+
+
+
+ $ {
+ 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}`/>
+
+
+
+
+ <${input.default.renderBody} key="switch-default"/>
+
diff --git a/tags/switch/marko-tag.json b/tags/switch/marko-tag.json
new file mode 100644
index 0000000..4152a5e
--- /dev/null
+++ b/tags/switch/marko-tag.json
@@ -0,0 +1,8 @@
+{
+ "": {
+ "is-repeated": true,
+ "attributes": {
+ "is": "expression"
+ }
+ }
+}
diff --git a/tags/switch/marko.json b/tags/switch/marko.json
new file mode 100644
index 0000000..aa008c7
--- /dev/null
+++ b/tags/switch/marko.json
@@ -0,0 +1,8 @@
+{
+ "": {
+ "template": "./index.marko",
+ "attributes": {
+ "by": "expression"
+ }
+ }
+}
diff --git a/tags/switch/package.json b/tags/switch/package.json
new file mode 100644
index 0000000..e9621d5
--- /dev/null
+++ b/tags/switch/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "@marko-tags/switch",
+ "description": "Use expression tag instead of long cascade tags within your template.",
+ "version": "0.4.4",
+ "author": "Fabrice K.M.E ",
+ "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"
+ }
+}
diff --git a/tags/switch/test/fixtures/example.marko b/tags/switch/test/fixtures/example.marko
new file mode 100644
index 0000000..ba19d11
--- /dev/null
+++ b/tags/switch/test/fixtures/example.marko
@@ -0,0 +1,13 @@
+
+
+ <@case is="Andromeda">
+ Galaxy
+
+ <@case is=["Earth", "Mars"]>
+ Planet
+
+ <@default>
+ Star: ${input.entity}
+
+
+
diff --git a/tags/switch/test/test.browser.js b/tags/switch/test/test.browser.js
new file mode 100644
index 0000000..c5af385
--- /dev/null
+++ b/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");
+ });
+ });
+});
diff --git a/tags/switch/test/test.server.js b/tags/switch/test/test.server.js
new file mode 100644
index 0000000..71b115e
--- /dev/null
+++ b/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");
+ });
+ });
+});