create-outsystems-astro 0.7.2 → 0.8.0

package/template/src/framework/solid/Demo.tsx

@@ -0,0 +1,85 @@
+/** @jsxImportSource solid-js */
+import { useStore } from "@nanostores/solid";
+import { createSignal, type JSX } from "solid-js";
+
+import AstroLogo from "../../images/astro.png?url";
+import OutSystemsLogo from "../../images/outsystems.png?url";
+import { Operation, setCounterCount } from "../../lib/setCounterCount";
+import { setupStore } from "../../stores/demo";
+
+interface DemoProps {
+  children?: JSX.Element;
+  header?: JSX.Element;
+  initialCount: number;
+  showMessage: string;
+}
+
+export default function Demo(props: DemoProps) {
+  const [count, setCount] = createSignal(props.initialCount);
+
+  const store = setupStore("solidStore");
+  const nanoStoreValue = useStore(store);
+
+  const add = () => setCount((i) => setCounterCount(i, Operation.Add));
+  const subtract = () =>
+    setCount((i) => setCounterCount(i, Operation.Subtract));
+
+  const showParentMessage = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const messageFunc = (window as any)[props.showMessage];
+    if (typeof messageFunc === "function") {
+      messageFunc(count());
+    }
+  };
+
+  return (
+    <>
+      {props.header}
+
+      <div class="card-grid">
+        <div class="card">
+          <strong>Solid counter component</strong>
+          <div class="card-content">
+            Internal counter controls. It keeps state within the component.
+            <div class="counter-controls">
+              <button onClick={subtract}>-</button>
+              <pre>{count()}</pre>
+              <button onClick={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" onClick={showParentMessage}>
+                Send value
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <strong>Nano Stores</strong>
+          <div class="card-content">
+            <div>
+              <strong>Value:</strong>
+              <div id="nanostore">{nanoStoreValue()}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <strong>Slot content</strong>
+          <div class="card-content">
+            <div>{props.children}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="counter-logos">
+        <img alt="OutSystems logo" src={OutSystemsLogo} />
+        <img alt="Astro logo" src={AstroLogo} />
+      </div>
+    </>
+  );
+}

package/template/src/framework/solid/Store.tsx

@@ -0,0 +1,31 @@
+/** @jsxImportSource solid-js */
+import { useStore } from "@nanostores/solid";
+
+import SolidLogo from "../../images/solid.png?url";
+import { framework } from "../../stores/framework";
+
+export default function Store() {
+  const selectedFramework = useStore(framework);
+
+  const setFramework = () => {
+    framework.set("Solid");
+  };
+
+  return (
+    <div class="card">
+      <strong>Solid Store</strong>
+      <div class="card-content">
+        <img alt="Solid logo" height={150} src={SolidLogo} />
+        <div>
+          <strong>Value:</strong>
+          <div id="nanostore">{selectedFramework()}</div>
+        </div>
+        <div>
+          <button class="card-btn" onClick={setFramework}>
+            Select React
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@
 import AngularStore from "../../framework/angular/Store.component"
 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 VueStore from "../../framework/vue/Store.vue";
 import styles from "../../styles/index.css?url";
@@ -12,9 +13,10 @@ import styles from "../../styles/index.css?url";
     </head>
     <body>
         <div class="card-grid">
-            <AngularStore client:visible />
+            <AngularStore client:load />
             <PreactStore client:only="preact" />
             <ReactStore client:only="react" />
+            <SolidStore client:only="solid-js" />
             <SvelteStore client:only="svelte" />
             <VueStore client:only="vue" />
         </div>

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

@@ -0,0 +1,65 @@
+---
+import DemoComponent from "../../framework/solid/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("solidStore");
+            window["showMessage"] = (count) => {
+                document.getElementById("counter").textContent = count;
+            };
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["solidStore"].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['solidStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <DemoComponent
+            client:only="solid-js"
+            initialCount={initialCount}
+            showMessage={showMessage}
+        >
+            <div class="counter-title" slot="header">Solid Demo Component</div>
+            <div style="text-align: center;">
+                <p><em>This is content passed into the component.</em></p>
+            </div>
+        </DemoComponent>
+    </body>
+</html>

package/template/src/stores/framework.ts

@@ -4,6 +4,7 @@ export type CurrentSelectedFramework =
   | ""
   | "Preact"
   | "React"
+  | "Solid"
   | "Svelte"
   | "Vue";
 

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

@@ -0,0 +1,42 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/solid/solid-demo");
+});
+
+test.describe("Has values", () => {
+  test("Should have header", async ({ page }) => {
+    await expect(page.getByText("Solid Demo Component")).toBeVisible();
+  });
+
+  test("Should have slot content", async ({ page }) => {
+    await expect(
+      page.getByText("This is content passed into the 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")).toHaveText("Updated Value");
+  });
+});

package/template/test/integration/solid/Demo.test.tsx

@@ -0,0 +1,90 @@
+/** @jsxImportSource solid-js */
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import Demo from "../../../src/framework/solid/Demo";
+
+describe("Demo", () => {
+  const defaultProps = {
+    children: <div>Test Children</div>,
+    header: <h1>Test Header</h1>,
+    initialCount: 5,
+    showMessage: "mockFunction",
+  };
+
+  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 = {
+      solidStore: {
+        get: vi.fn(() => storeValue),
+        listen: vi.fn((callback) => {
+          capturedListener = callback;
+          callback(storeValue);
+          return () => {};
+        }),
+        subscribe: vi.fn((callback) => {
+          capturedListener = callback;
+          callback(storeValue);
+          return () => {};
+        }),
+      },
+    };
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    capturedListener = undefined;
+    storeValue = "Mocked Nano Value";
+  });
+
+  it("renders the initial count", () => {
+    render(() => <Demo {...defaultProps} />);
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("renders header", () => {
+    render(() => <Demo {...defaultProps} />);
+    expect(screen.getByText("Test Header")).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(() => <Demo {...defaultProps} />);
+    expect(screen.getByText("Test Children")).toBeInTheDocument();
+  });
+
+  it("increments count when add button is clicked", () => {
+    render(() => <Demo {...defaultProps} />);
+    fireEvent.click(screen.getByRole("button", { name: "+" }));
+    expect(screen.getByText("6")).toBeInTheDocument();
+  });
+
+  it("decrements count when subtract button is clicked", () => {
+    render(() => <Demo {...defaultProps} />);
+    fireEvent.click(screen.getByRole("button", { name: "-" }));
+    expect(screen.getByText("4")).toBeInTheDocument();
+  });
+
+  it("calls the show message function", () => {
+    render(() => <Demo {...defaultProps} />);
+    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("updates the component when the nanostore value changes", async () => {
+    render(() => <Demo {...defaultProps} />);
+    expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
+
+    storeValue = "Updated Nano Value";
+    capturedListener?.("Updated Nano Value");
+
+    expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
+  });
+});

package/template/vitest.config.ts

@@ -4,6 +4,7 @@ import preact from "@preact/preset-vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import react from "@vitejs/plugin-react";
 import vue from "@vitejs/plugin-vue";
+import solid from "vite-plugin-solid";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig(({ mode }) => ({
@@ -43,6 +44,17 @@ export default defineConfig(({ mode }) => ({
           setupFiles: ["test/setup-test-env.ts"],
         },
       },
+      {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        plugins: [solid() as any],
+        test: {
+          environment: "happy-dom",
+          globals: true,
+          include: ["test/integration/solid/**/*.test.tsx"],
+          name: "solid",
+          setupFiles: ["test/setup-test-env.ts"],
+        },
+      },
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         plugins: [svelte() as any],