From 20f28e86d751878c51ac1118c6eca94b487b85c8 Mon Sep 17 00:00:00 2001 From: Fabrice Marlboro Date: Mon, 20 Nov 2023 21:45:53 +0000 Subject: [PATCH] feat: `` expression tag --- tags/switch/.marko-prettyprint | 3 ++ tags/switch/README.md | 45 +++++++++++++++++++++++++ tags/switch/index.marko | 21 ++++++++++++ tags/switch/marko-tag.json | 8 +++++ tags/switch/marko.json | 8 +++++ tags/switch/package.json | 25 ++++++++++++++ tags/switch/test/fixtures/example.marko | 13 +++++++ tags/switch/test/test.browser.js | 35 +++++++++++++++++++ tags/switch/test/test.server.js | 33 ++++++++++++++++++ 9 files changed, 191 insertions(+) create mode 100644 tags/switch/.marko-prettyprint create mode 100644 tags/switch/README.md create mode 100644 tags/switch/index.marko create mode 100644 tags/switch/marko-tag.json create mode 100644 tags/switch/marko.json create mode 100644 tags/switch/package.json create mode 100644 tags/switch/test/fixtures/example.marko create mode 100644 tags/switch/test/test.browser.js create mode 100644 tags/switch/test/test.server.js 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 +
+ + + + API Stability + + + + NPM Version + + + + Downloads + +

+ +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"); + }); + }); +});