create-outsystems-astro 0.9.0 → 0.11.0

package/template/pnpm-workspace.yaml

@@ -4,3 +4,8 @@ allowBuilds:
   lmdb: true
   msgpackr-extract: true
   sharp: true
+minimumReleaseAge: 10080
+minimumReleaseAgeExclude:
+  - tmp@0.2.6
+overrides:
+  tmp: ^0.2.6

package/template/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="astro/client" />
+
+declare module "*.twig" {
+  const content: string;
+  export default content;
+}

package/template/src/framework/html/Demo.ts

@@ -0,0 +1,105 @@
+import AstroLogo from "../../images/astro.png?url";
+import OutSystemsLogo from "../../images/outsystems.png?url";
+
+interface DemoProps {
+  children?: string;
+  header?: string;
+  initialCount?: number;
+  showMessage?: string;
+}
+
+export default function Demo({
+  initialCount = 0,
+  showMessage = "",
+}: DemoProps): string {
+  return `
+    <div class="counter-title" slot="header">HTML Demo Component</div>
+    <div class="html-demo">
+      <div class="card-grid">
+        <div class="card">
+          <strong>HTML counter component</strong>
+          <div class="card-content">
+            Internal counter controls. It keeps state within the component.
+            <div class="counter-controls">
+              <button class="subtract">-</button>
+              <pre class="count">${initialCount}</pre>
+              <button class="add">+</button>
+            </div>
+          </div>
+          The button sends the current count value to a function in the parent
+          component.
+          <div class="card-content">
+            <div>
+              <button class="card-btn send">Send value</button>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <strong>Nano Stores</strong>
+          <div class="card-content">
+            <div>
+              <strong>Value:</strong>
+              <div class="nanostore-value"></div>
+            </div>
+          </div>
+        </div>
+      <div class="card unused">
+        <strong>Slot content (not supported)</strong>
+        <div class="card-content"></div>
+      </div>
+      </div>
+      <div class="counter-logos">
+        <img alt="OutSystems logo" src="${OutSystemsLogo}" />
+        <img alt="Astro logo" src="${AstroLogo}" />
+      </div>
+      <script>
+        (function () {
+          const container = (document.currentScript && document.currentScript.parentElement) || document.querySelector('.html-demo');
+          let count = ${initialCount};
+          const countEl = container.querySelector('.count');
+          const addBtn = container.querySelector('.add');
+          const subtractBtn = container.querySelector('.subtract');
+          const sendBtn = container.querySelector('.send');
+          const nanostoreEl = container.querySelector('.nanostore-value');
+
+          addBtn.addEventListener('click', function () {
+            count += 1;
+            countEl.textContent = count;
+          });
+
+          subtractBtn.addEventListener('click', function () {
+            count -= 1;
+            countEl.textContent = count;
+          });
+
+          sendBtn.addEventListener('click', function () {
+            if ('${showMessage}' && window['${showMessage}']) {
+              window['${showMessage}'](count);
+            }
+          });
+
+          if (!window.Stores) window.Stores = {};
+          if (!window.Stores['htmlStore']) {
+            let _value = 'Test Value';
+            const _subs = [];
+            window.Stores['htmlStore'] = {
+              get: function () { return _value; },
+              set: function (v) { _value = v; _subs.forEach(function (fn) { fn(v); }); },
+              subscribe: function (fn) {
+                fn(_value);
+                _subs.push(fn);
+                return function () { _subs.splice(_subs.indexOf(fn), 1); };
+              },
+            };
+          }
+
+          const store = window.Stores['htmlStore'];
+          nanostoreEl.textContent = store.get();
+          store.subscribe(function (value) {
+            nanostoreEl.textContent = value;
+          });
+        })();
+      </script>
+    </div>
+  `;
+}

package/template/src/framework/html/Store.ts

@@ -0,0 +1,47 @@
+import HTMLLogo from "../../images/html.png?url";
+import { framework } from "../../stores/framework";
+
+if (typeof window !== "undefined") {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!(window as any).Stores) (window as any).Stores = {};
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).Stores["framework"] = framework;
+}
+
+export default function Store(): string {
+  return `
+    <div class="card">
+      <strong>HTML Store</strong>
+      <div class="card-content">
+        <img alt="HTML logo" height="150" src="${HTMLLogo}" />
+        <div>
+          <strong>Value:</strong>
+          <div class="framework-value"></div>
+        </div>
+        <div>
+          <button class="card-btn select-btn">Select HTML</button>
+        </div>
+      </div>
+      <script>
+        (function () {
+          const container = (document.currentScript && document.currentScript.parentElement)
+            || document.querySelector('.html-store');
+          const valueEl = container.querySelector('.framework-value');
+          const btn = container.querySelector('.select-btn');
+
+          const store = window.Stores && window.Stores['framework'];
+
+          if (store) {
+            store.subscribe(function (value) {
+              valueEl.textContent = value;
+            });
+          }
+
+          btn.addEventListener('click', function () {
+            if (store) store.set('HTML');
+          });
+        })();
+      </script>
+    </div>
+  `;
+}

package/template/src/framework/twig/Demo.twig

@@ -0,0 +1,100 @@
+{#
+  Twig counter demo component, authored as a native .twig file.
+
+  Available props (passed as island attributes and used as the Twig context):
+  - initialCount: starting counter value (default 0)
+  - showMessage: name of a window handler to call with the current count
+  - outSystemsLogo / astroLogo: image URLs, passed in from the .astro page
+#}
+
+{% set count = initialCount|default(0) %}
+{% set handler = showMessage|default('') %}
+
+<div class="counter-title">Twig Demo Component</div>
+<div class="twig-demo">
+  <div class="card-grid">
+    <div class="card">
+      <strong>Twig counter component</strong>
+      <div class="card-content">
+        Internal counter controls. It keeps state within the component.
+        <div class="counter-controls">
+          <button class="subtract">-</button>
+          <pre class="count">{{ count }}</pre>
+          <button class="add">+</button>
+        </div>
+      </div>
+      The button sends the current count value to a function in the parent
+      component.
+      <div class="card-content">
+        <div>
+          <button class="card-btn send">Send value</button>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <strong>Nano Stores</strong>
+      <div class="card-content">
+        <div>
+          <strong>Value:</strong>
+          <div class="nanostore-value"></div>
+        </div>
+      </div>
+    </div>
+    <div class="card unused">
+      <strong>Slot content (not supported)</strong>
+      <div class="card-content"></div>
+    </div>
+  </div>
+  <div class="counter-logos">
+    {% if outSystemsLogo %}<img alt="OutSystems logo" src="{{ outSystemsLogo }}" />{% endif %}
+    {% if astroLogo %}<img alt="Astro logo" src="{{ astroLogo }}" />{% endif %}
+  </div>
+  <script>
+    (function () {
+      const container = (document.currentScript && document.currentScript.parentElement) || document.querySelector('.twig-demo');
+      let count = {{ count }};
+      const countEl = container.querySelector('.count');
+      const addBtn = container.querySelector('.add');
+      const subtractBtn = container.querySelector('.subtract');
+      const sendBtn = container.querySelector('.send');
+      const nanostoreEl = container.querySelector('.nanostore-value');
+
+      addBtn.addEventListener('click', function () {
+        count += 1;
+        countEl.textContent = count;
+      });
+
+      subtractBtn.addEventListener('click', function () {
+        count -= 1;
+        countEl.textContent = count;
+      });
+
+      sendBtn.addEventListener('click', function () {
+        if ('{{ handler }}' && window['{{ handler }}']) {
+          window['{{ handler }}'](count);
+        }
+      });
+
+      if (!window.Stores) window.Stores = {};
+      if (!window.Stores['twigStore']) {
+        let _value = 'Test Value';
+        const _subs = [];
+        window.Stores['twigStore'] = {
+          get: function () { return _value; },
+          set: function (v) { _value = v; _subs.forEach(function (fn) { fn(v); }); },
+          subscribe: function (fn) {
+            fn(_value);
+            _subs.push(fn);
+            return function () { _subs.splice(_subs.indexOf(fn), 1); };
+          },
+        };
+      }
+
+      const store = window.Stores['twigStore'];
+      nanostoreEl.textContent = store.get();
+      store.subscribe(function (value) {
+        nanostoreEl.textContent = value;
+      });
+    })();
+  </script>
+</div>

package/template/src/framework/twig/Store.twig

@@ -0,0 +1,45 @@
+{#
+  Twig store demo component, authored as a native .twig file.
+
+  Shares the `framework` Nano Store with the other framework islands through
+  `window.Stores['framework']`, which the page registers before the islands
+  hydrate. This lets a string-rendered Twig island stay in sync with the
+  binding-based islands (React, Vue, ...).
+
+  Props:
+  - logo: the Twig logo URL, passed in from the .astro page
+#}
+
+<div class="card twig-store">
+  <strong>Twig Store</strong>
+  <div class="card-content">
+    {% if logo %}<img alt="Twig logo" height="150" src="{{ logo }}" />{% endif %}
+    <div>
+      <strong>Value:</strong>
+      <div class="framework-value"></div>
+    </div>
+    <div>
+      <button class="card-btn select-btn">Select Twig</button>
+    </div>
+  </div>
+  <script>
+    (function () {
+      const container = (document.currentScript && document.currentScript.parentElement)
+        || document.querySelector('.twig-store');
+      const valueEl = container.querySelector('.framework-value');
+      const btn = container.querySelector('.select-btn');
+
+      const store = window.Stores && window.Stores['framework'];
+
+      if (store) {
+        store.subscribe(function (value) {
+          valueEl.textContent = value;
+        });
+      }
+
+      btn.addEventListener('click', function () {
+        if (store) store.set('Twig');
+      });
+    })();
+  </script>
+</div>

package/template/src/pages/html/html-demo.astro

@@ -0,0 +1,61 @@
+---
+import DemoComponent from "../../framework/html/Demo";
+import styles from "../../styles/index.css?url";
+const initialCount = 5;
+const showMessage = "showMessage";
+---
+<html lang="en">
+    <head>
+        <link href={styles} rel="stylesheet" />
+        <script>
+            import { setupStore } from "../../stores/demo";
+            setupStore("htmlStore");
+            window["showMessage"] = (count) => {
+                document.getElementById("counter").textContent = count;
+            };
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["htmlStore"].get();
+            });
+        </script>
+    </head>
+    <body>
+        <div class="counter-title">Astro Page</div>
+        <div class="card-grid">
+            <div class="card">
+                <strong>Counter component</strong>
+                <div class="card-content">
+                    <div style="text-align: center; margin-top: 30px;">
+                        Counter value:
+                        <div>
+                            <span id="counter"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <strong>Nano Stores</strong>
+                <div class="card-content">
+                    <div style="text-align: center; margin-top: 30px;">
+                        <input
+                            id="store"
+                            placeholder="Type something..."
+                            type="text"
+                        /><button
+                            class="card-btn"
+                            onclick="window.Stores['htmlStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <DemoComponent
+            client:load
+            initialCount={initialCount}
+            showMessage={showMessage}
+        >
+        </DemoComponent>
+    </body>
+</html>

package/template/src/pages/multi/store.astro

@@ -1,23 +1,35 @@
 ---
-import AngularStore from "../../framework/angular/Store.component"
+import AngularStore from "../../framework/angular/Store.component";
+import HTMLStore from "../../framework/html/Store";
 import PreactStore from "../../framework/preact/Store";
 import ReactStore from "../../framework/react/Store";
 import SolidStore from "../../framework/solid/Store";
 import SvelteStore from "../../framework/svelte/Store.svelte";
+import TwigStore from "../../framework/twig/Store.twig";
 import VueStore from "../../framework/vue/Store.vue";
+import TwigLogo from "../../images/twig.png?url";
 import styles from "../../styles/index.css?url";
 ---
 <html lang="en">
     <head>
         <link href={styles} rel="stylesheet" />
+        <script>
+            // Expose the shared framework Nano Store so string-rendered islands
+            // (such as the Twig store) can subscribe to it before they hydrate.
+            import { framework } from "../../stores/framework";
+            window.Stores = window.Stores || {};
+            window.Stores["framework"] = framework;
+        </script>
     </head>
     <body>
         <div class="card-grid">
             <AngularStore client:load />
+            <HTMLStore client:load />
             <PreactStore client:only="preact" />
             <ReactStore client:only="react" />
             <SolidStore client:only="solid-js" />
             <SvelteStore client:only="svelte" />
+            <TwigStore client:load logo={TwigLogo} />
             <VueStore client:only="vue" />
         </div>
     </body>

package/template/src/pages/twig/twig-demo.astro

@@ -0,0 +1,65 @@
+---
+import AstroLogo from "../../images/astro.png?url";
+import OutSystemsLogo from "../../images/outsystems.png?url";
+import styles from "../../styles/index.css?url";
+import DemoComponent from "../../framework/twig/Demo.twig";
+const initialCount = 5;
+const showMessage = "showMessage";
+---
+<html lang="en">
+    <head>
+        <link href={styles} rel="stylesheet" />
+        <script>
+            import { setupStore } from "../../stores/demo";
+            setupStore("twigStore");
+            window["showMessage"] = (count) => {
+                document.getElementById("counter").textContent = count;
+            };
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["twigStore"].get();
+            });
+        </script>
+    </head>
+    <body>
+        <div class="counter-title">Astro Page</div>
+        <div class="card-grid">
+            <div class="card">
+                <strong>Counter component</strong>
+                <div class="card-content">
+                    <div style="text-align: center; margin-top: 30px;">
+                        Counter value:
+                        <div>
+                            <span id="counter"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <strong>Nano Stores</strong>
+                <div class="card-content">
+                    <div style="text-align: center; margin-top: 30px;">
+                        <input
+                            id="store"
+                            placeholder="Type something..."
+                            type="text"
+                        /><button
+                            class="card-btn"
+                            onclick="window.Stores['twigStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <DemoComponent
+            astroLogo={AstroLogo}
+            client:load
+            initialCount={initialCount}
+            outSystemsLogo={OutSystemsLogo}
+            showMessage={showMessage}
+        >
+        </DemoComponent>
+    </body>
+</html>

package/template/src/stores/framework.ts

@@ -2,10 +2,12 @@ import { atom } from "nanostores";
 
 export type CurrentSelectedFramework =
   | ""
+  | "HTML"
   | "Preact"
   | "React"
   | "Solid"
   | "Svelte"
+  | "Twig"
   | "Vue";
 
 export const framework = atom<CurrentSelectedFramework>("");

package/template/test/e2e/html/html-demo.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/html/html-demo");
+});
+
+test.describe("Has values", () => {
+  test("Should have header", async ({ page }) => {
+    await expect(page.getByText("HTML Demo Component")).toBeVisible();
+  });
+});
+
+test.describe("Change counter", () => {
+  test("Should increment counter when clicking + button", async ({ page }) => {
+    await page.getByRole("button", { name: "+" }).click();
+    await expect(page.locator("pre")).toContainText("6");
+  });
+
+  test("Should decrement counter when clicking - button", async ({ page }) => {
+    await page.getByRole("button", { name: "-" }).click();
+    await expect(page.locator("pre")).toContainText("4");
+  });
+
+  test("Should show message on Send value", async ({ page }) => {
+    await page.getByRole("button", { name: "Send value" }).click();
+    await expect(page.locator("span#counter")).toContainText("5");
+  });
+});
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator(".nanostore-value")).toHaveText("Updated Value");
+  });
+});

package/template/test/e2e/twig/twig-demo.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/twig/twig-demo");
+});
+
+test.describe("Has values", () => {
+  test("Should have header", async ({ page }) => {
+    await expect(page.getByText("Twig Demo Component")).toBeVisible();
+  });
+});
+
+test.describe("Change counter", () => {
+  test("Should increment counter when clicking + button", async ({ page }) => {
+    await page.getByRole("button", { name: "+" }).click();
+    await expect(page.locator("pre")).toContainText("6");
+  });
+
+  test("Should decrement counter when clicking - button", async ({ page }) => {
+    await page.getByRole("button", { name: "-" }).click();
+    await expect(page.locator("pre")).toContainText("4");
+  });
+
+  test("Should show message on Send value", async ({ page }) => {
+    await page.getByRole("button", { name: "Send value" }).click();
+    await expect(page.locator("span#counter")).toContainText("5");
+  });
+});
+
+test.describe("Update Nano Store", () => {
+  test("Should update Nano Store", async ({ page }) => {
+    await page.locator("#store").fill("Updated Value");
+    await page.getByRole("button", { name: "Update Store" }).click();
+    await expect(page.locator(".nanostore-value")).toHaveText("Updated Value");
+  });
+});

package/template/test/integration/html/Demo.test.ts

@@ -0,0 +1,83 @@
+import { fireEvent, screen } from "@testing-library/dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import Demo from "../../../src/framework/html/Demo";
+
+function renderDemo(props: Parameters<typeof Demo>[0] = {}) {
+  document.body.innerHTML = Demo(props);
+  document.body.querySelectorAll("script").forEach((script) => {
+    new Function(script.textContent ?? "")();
+  });
+}
+
+describe("Demo", () => {
+  let capturedListener: ((val: string) => void) | undefined;
+  let storeValue = "Mocked Nano Value";
+
+  beforeEach(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).mockFunction = vi.fn();
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (window as any).Stores = {
+      htmlStore: {
+        get: vi.fn(() => storeValue),
+        set: vi.fn((v: string) => {
+          storeValue = v;
+          capturedListener?.(v);
+        }),
+        subscribe: vi.fn((fn: (val: string) => void) => {
+          capturedListener = fn;
+          fn(storeValue);
+          return () => {};
+        }),
+      },
+    };
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any).mockFunction;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (window as any).Stores;
+    capturedListener = undefined;
+    storeValue = "Mocked Nano Value";
+  });
+
+  it("renders the initial count", () => {
+    renderDemo({ initialCount: 5 });
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("increments count when add button is clicked", () => {
+    renderDemo({ initialCount: 5 });
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
+    expect(screen.getByText("6")).toBeInTheDocument();
+  });
+
+  it("decrements count when subtract button is clicked", () => {
+    renderDemo({ initialCount: 5 });
+    fireEvent.click(screen.getByRole("button", { name: "-" }));
+    expect(screen.getByText("4")).toBeInTheDocument();
+  });
+
+  it("calls the show message function with the current count", () => {
+    renderDemo({ initialCount: 5, showMessage: "mockFunction" });
+    fireEvent.click(screen.getByRole("button", { name: "Send value" }));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    expect((window as any).mockFunction).toHaveBeenCalledWith(5);
+  });
+
+  it("displays the initial nanostore value", () => {
+    renderDemo({});
+    expect(screen.getByText("Mocked Nano Value")).toBeInTheDocument();
+  });
+
+  it("updates the display when the nanostore value changes", () => {
+    renderDemo({});
+    expect(screen.getByText("Mocked Nano Value")).toBeInTheDocument();
+    capturedListener?.("Updated Value");
+    expect(screen.getByText("Updated Value")).toBeInTheDocument();
+  });
+});