create-outsystems-astro 0.8.2 → 0.10.0

package/template/pnpm-workspace.yaml

@@ -1,6 +1,11 @@
-onlyBuiltDependencies:
-  - '@parcel/watcher'
-  - esbuild
-  - lmdb
-  - msgpackr-extract
-  - sharp
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  lmdb: true
+  msgpackr-extract: true
+  sharp: true
+minimumReleaseAge: 10080
+minimumReleaseAgeExclude:
+  - tmp@0.2.6
+overrides:
+  tmp: ^0.2.6

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/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,5 +1,6 @@
 ---
-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";
@@ -14,6 +15,7 @@ import styles from "../../styles/index.css?url";
     <body>
         <div class="card-grid">
             <AngularStore client:load />
+            <HTMLStore client:load />
             <PreactStore client:only="preact" />
             <ReactStore client:only="react" />
             <SolidStore client:only="solid-js" />

package/template/src/stores/framework.ts

@@ -2,6 +2,7 @@ import { atom } from "nanostores";
 
 export type CurrentSelectedFramework =
   | ""
+  | "HTML"
   | "Preact"
   | "React"
   | "Solid"

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

package/template/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"],
+  "exclude": [".integrations", "dist", "output"],
   "compilerOptions": {
     "jsx": "preserve",
     "types": ["node", "vitest/globals"]

package/template/vitest.config.ts

@@ -22,6 +22,15 @@ export default defineConfig(({ mode }) => ({
           setupFiles: ["test/setup-test-env-angular.ts"],
         },
       },
+      {
+        test: {
+          environment: "happy-dom",
+          globals: true,
+          include: ["test/integration/html/**/*.test.ts"],
+          name: "html",
+          setupFiles: ["test/setup-test-env.ts"],
+        },
+      },
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         plugins: [preact() as any],