create-outsystems-astro 0.6.0 → 0.7.0

package/template/src/framework/angular/{Counter.component.ts → Demo.component.ts}

@@ -10,19 +10,18 @@ import { Operation, setCounterCount } from "../../lib/setCounterCount";
   selector: "app-counter",
   standalone: true,
   template: `
-    <div class="counter-title" slot="header">Counter</div>
+    <div class="counter-title" slot="header">Angular Demo Component</div>
     <div class="card-grid">
       <div class="card">
-        Internal counter controls. It keeps state within the component.
+        <strong>Angular counter component</strong>
         <div class="card-content">
+          Internal counter controls. It keeps state within the component.
           <div class="counter-controls">
             <button (click)="subtract()">-</button>
             <pre>{{ count() }}</pre>
             <button (click)="add()">+</button>
           </div>
         </div>
-      </div>
-      <div class="card">
         The button sends the current count value to a function in the parent
         component.
         <div class="card-content">
@@ -33,6 +32,14 @@ import { Operation, setCounterCount } from "../../lib/setCounterCount";
           </div>
         </div>
       </div>
+      <div class="card unused">
+        <strong>Nano Stores (not supported)</strong>
+        <div class="card-content"></div>
+      </div>
+      <div class="card unused">
+        <strong>Slot content (not supported)</strong>
+        <div class="card-content"></div>
+      </div>
     </div>
     <div class="counter-logos">
       <img [src]="outSystemsLogo" alt="OutSystems logo" />
@@ -40,7 +47,7 @@ import { Operation, setCounterCount } from "../../lib/setCounterCount";
     </div>
   `,
 })
-export default class CounterComponent implements OnInit {
+export default class DemoComponent implements OnInit {
   astroLogo = AstroLogo;
   count = signal(0);
 

package/template/src/framework/angular/Store.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import AngularLogo from "../../images/angular.png?url";
+
+@Component({
+  imports: [CommonModule],
+  selector: "app-counter",
+  standalone: true,
+  template: `
+    <div class="card unused">
+      <strong>Angular Store</strong>
+      <div class="card-content">
+        <img [src]="angularLogo" alt="Angular logo" height="150" />
+        <div>
+          <strong>Angular 21 does not currently support Nano Stores.</strong>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export default class StoreComponent {
+  angularLogo = AngularLogo;
+}

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

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

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

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

package/template/src/framework/react/{Counter.tsx → Demo.tsx}

@@ -1,3 +1,4 @@
+/** @jsxImportSource react */
 import { useStore } from "@nanostores/react";
 import { useState } from "react";
 
@@ -5,23 +6,29 @@ import AstroLogo from "../../images/astro.png?url";
 import OutSystemsLogo from "../../images/outsystems.png?url";
 import { Operation, setCounterCount } from "../../lib/setCounterCount";
 
-export default function Counter({
-  children,
-  header,
-  initialCount,
-  showMessage,
-}: {
+interface DemoProps {
   children: React.ReactNode;
   header: React.ReactNode;
   initialCount: number;
   showMessage: string;
-}) {
+}
+
+export default function Demo({
+  children,
+  header,
+  initialCount,
+  showMessage,
+}: DemoProps) {
   const [count, setCount] = useState(initialCount);
+
   const add = () => setCount((i) => setCounterCount(i, Operation.Add));
+
   const subtract = () =>
     setCount((i) => setCounterCount(i, Operation.Subtract));
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const showParentMessage = () => (window as any)[showMessage](count);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const nanoStoreValue = useStore((window as any).Stores["reactStore"]);
 
@@ -30,16 +37,15 @@ export default function Counter({
       {header}
       <div className="card-grid">
         <div className="card">
-          Internal counter controls. It keeps state within the component.
+          <strong>React counter component</strong>
           <div className="card-content">
+            Internal counter controls. It keeps state within the component.
             <div className="counter-controls">
               <button onClick={subtract}>-</button>
               <pre>{count}</pre>
               <button onClick={add}>+</button>
             </div>
           </div>
-        </div>
-        <div className="card">
           The button sends the current count value to a function in the parent
           component.
           <div className="card-content">
@@ -51,18 +57,18 @@ export default function Counter({
           </div>
         </div>
         <div className="card">
-          Slot content coming in to the component
+          <strong>Nano Stores</strong>
           <div className="card-content">
-            <div>{children}</div>
+            <div>
+              <strong>Value:</strong>
+              <div id="nanostore">{nanoStoreValue}</div>
+            </div>
           </div>
         </div>
         <div className="card">
-          Nano Store content
+          <strong>Slot content</strong>
           <div className="card-content">
-            <div>
-              <strong>Nano Store value:</strong>
-              <div id="nanostore">{nanoStoreValue}</div>
-            </div>
+            <div>{children}</div>
           </div>
         </div>
       </div>

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

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

package/template/src/framework/svelte/{Counter.svelte → Demo.svelte}

@@ -29,19 +29,16 @@
 
 <div class="card-grid">
   <div class="card">
-    Internal counter controls. It keeps state within the component.
+    <strong>Svelte counter component</strong>
     <div class="card-content">
+      Internal counter controls. It keeps state within the component.
       <div class="counter-controls">
         <button on:click={subtract}>-</button>
         <pre>{count}</pre>
         <button on:click={add}>+</button>
       </div>
     </div>
-  </div>
-
-  <div class="card">
-    The button sends the current count value to a function in the parent
-    component.
+    The button sends the current count value to a function in the parent component.
     <div class="card-content">
       <div>
         <button class="card-btn" on:click={showParentMessage}>
@@ -52,20 +49,20 @@
   </div>
 
   <div class="card">
-    Slot content coming in to the component
+    <strong>Nano Stores</strong>
     <div class="card-content">
       <div>
-        <slot />
+        <strong>Value:</strong>
+        <div id="nanostore">{$nanoStoreValue}</div>
       </div>
     </div>
   </div>
 
   <div class="card">
-    Nano Store content
+    <strong>Slot content</strong>
     <div class="card-content">
       <div>
-        <strong>Nano Store value:</strong>
-        <div id="nanostore">{$nanoStoreValue}</div>
+        <slot />
       </div>
     </div>
   </div>

package/template/src/framework/svelte/Store.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import SvelteLogo from "../../images/svelte.png?url";
+  import { framework } from "../../stores/framework";
+
+  const setFramework = () => {
+    framework.set("Svelte");
+  };
+</script>
+
+<div class="card">
+  <strong>Svelte Store</strong>
+  <div class="card-content">
+    <img alt="Svelte logo" src={SvelteLogo} height="150" />
+    <div>
+      <strong>Value:</strong>
+      <div id="nanostore">{$framework}</div>
+    </div>
+    <div>
+      <button class="card-btn" on:click={setFramework}>Select Svelte</button>
+    </div>
+  </div>
+</div>

package/template/src/framework/vue/{Counter.vue → Demo.vue}

@@ -35,17 +35,15 @@ const nanoStoreValue = useStore((window as any).Stores["vueStore"]);
 
   <div class="card-grid">
     <div class="card">
-      Internal counter controls. It keeps state within the component.
+      <strong>Vue counter component</strong>
       <div class="card-content">
+        Internal counter controls. It keeps state within the component.
         <div class="counter-controls">
           <button @click="subtract">-</button>
           <pre>{{ count }}</pre>
           <button @click="add">+</button>
         </div>
       </div>
-    </div>
-
-    <div class="card">
       The button sends the current count value to a function in the parent
       component.
       <div class="card-content">
@@ -58,20 +56,20 @@ const nanoStoreValue = useStore((window as any).Stores["vueStore"]);
     </div>
 
     <div class="card">
-      Slot content coming in to the component
+      <strong>Nano Stores</strong>
       <div class="card-content">
         <div>
-          <slot />
+          <strong>Value:</strong>
+          <div id="nanostore">{{ nanoStoreValue }}</div>
         </div>
       </div>
     </div>
 
     <div class="card">
-      Nano Store content
+      <strong>Slot content</strong>
       <div class="card-content">
         <div>
-          <strong>Nano Store value:</strong>
-          <div id="nanostore">{{ nanoStoreValue }}</div>
+          <slot />
         </div>
       </div>
     </div>

package/template/src/framework/vue/Store.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useStore } from "@nanostores/vue";
+
+import VueLogo from "../../images/vue.png?url";
+import { framework } from "../../stores/framework";
+
+const selectedFramework = useStore(framework);
+
+const setFramework = () => {
+  framework.set("Vue");
+};
+</script>
+
+<template>
+  <div class="card">
+    <strong>Vue Store</strong>
+    <div class="card-content">
+      <img alt="Vue logo" :src="VueLogo" height="150" />
+      <div>
+        <strong>Value:</strong>
+        <div id="nanostore">{{ selectedFramework }}</div>
+      </div>
+      <div>
+        <button class="card-btn" @click="setFramework">Select Vue</button>
+      </div>
+    </div>
+  </div>
+</template>

package/template/src/pages/angular/{angular-counter.astro → angular-demo.astro}

@@ -1,5 +1,5 @@
 ---
-import CounterComponent from "../../framework/angular/Counter.component";
+import DemoComponent from "../../framework/angular/Demo.component";
 import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
@@ -14,19 +14,26 @@ const showMessage = "showMessage";
         </script>
     </head>
     <body>
-        <div class="counter-title">HTML Content</div>
+        <div class="counter-title">Astro Page</div>
         <div class="card-grid">
             <div class="card">
-                Value sent back from component.
+                <strong>Counter component</strong>
+                <div class="card-content">
+                    <div style="text-align: center; margin-top: 30px;">
+                        Counter value: <br /><span id="counter"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="card unused">
+                <strong>Nano Stores (not supported)</strong>
                 <div class="card-content">
                     <div style="text-align: center; margin-top: 30px;">
-                        Counter value sent back: <br /><span id="counter"></span>
                     </div>
                 </div>
             </div>
         </div>
         <hr />
-        <CounterComponent
+        <DemoComponent
             client:visible
             initialCount={initialCount}
             showMessage={showMessage}

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

@@ -0,0 +1,22 @@
+---
+import AngularStore from "../../framework/angular/Store.component"
+import PreactStore from "../../framework/preact/Store";
+import ReactStore from "../../framework/react/Store";
+import SvelteStore from "../../framework/svelte/Store.svelte";
+import VueStore from "../../framework/vue/Store.vue";
+import styles from "../../styles/index.css?url";
+---
+<html lang="en">
+    <head>
+        <link href={styles} rel="stylesheet" />
+    </head>
+    <body>
+        <div class="card-grid">
+            <AngularStore client:visible />
+            <PreactStore client:only="preact" />
+            <ReactStore client:only="react" />
+            <SvelteStore client:only="svelte" />
+            <VueStore client:only="vue" />
+        </div>
+    </body>
+</html>

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

@@ -0,0 +1,66 @@
+---
+import DemoComponent from "../../framework/preact/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 { atom } from "nanostores";
+            window["showMessage"] = (count) => {
+                document.getElementById("counter").textContent = count;
+            };
+            window.Stores = [];
+            window.Stores["preactStore"] = atom("Test Value");
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["preactStore"].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['preactStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <DemoComponent
+            client:only="preact"
+            initialCount={initialCount}
+            showMessage={showMessage}
+        >
+            <div class="counter-title" slot="header">Preact 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/pages/react/{react-counter.astro → react-demo.astro}

@@ -1,5 +1,5 @@
 ---
-import CounterComponent from "../../framework/react/Counter";
+import DemoComponent from "../../framework/react/Demo";
 import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
@@ -21,18 +21,21 @@ const showMessage = "showMessage";
         </script>
     </head>
     <body>
-        <div class="counter-title">HTML Content</div>
+        <div class="counter-title">Astro Page</div>
         <div class="card-grid">
             <div class="card">
-                Value sent back from component.
+                <strong>Counter component</strong>
                 <div class="card-content">
                     <div style="text-align: center; margin-top: 30px;">
-                        Counter value sent back: <br /><span id="counter"></span>
+                        Counter value:
+                        <div>
+                            <span id="counter"></span>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="card">
-                Update Nano Store value
+                <strong>Nano Stores</strong>
                 <div class="card-content">
                     <div style="text-align: center; margin-top: 30px;">
                         <input
@@ -49,15 +52,15 @@ const showMessage = "showMessage";
             </div>
         </div>
         <hr />
-        <CounterComponent
+        <DemoComponent
             client:only="react"
             initialCount={initialCount}
             showMessage={showMessage}
         >
-            <div class="counter-title" slot="header">Counter Component</div>
+            <div class="counter-title" slot="header">React Demo Component</div>
             <div style="text-align: center;">
-                <p><strong>This is content passed into the component.</strong></p>
+                <p><em>This is content passed into the component.</em></p>
             </div>
-        </CounterComponent>
+        </DemoComponent>
     </body>
 </html>