create-outsystems-astro 0.4.2 → 0.6.0

package/template/pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - lmdb
+  - msgpackr-extract
+  - sharp

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

@@ -11,17 +11,29 @@ import { Operation, setCounterCount } from "../../lib/setCounterCount";
   standalone: true,
   template: `
     <div class="counter-title" slot="header">Counter</div>
-
-    <div class="counter-controls">
-      <button (click)="subtract()">-</button>
-      <pre>{{ count() }}</pre>
-      <button (click)="add()">+</button>
-    </div>
-
-    <div class="counter-message">
-      <button (click)="showParentMessage()">Send value</button>
+    <div class="card-grid">
+      <div class="card">
+        Internal counter controls. It keeps state within the component.
+        <div class="card-content">
+          <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">
+          <div>
+            <button class="card-btn" (click)="showParentMessage()">
+              Send value
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
-
     <div class="counter-logos">
       <img [src]="outSystemsLogo" alt="OutSystems logo" />
       <img [src]="astroLogo" alt="Astro logo" />
@@ -48,11 +60,11 @@ export default class CounterComponent implements OnInit {
   showParentMessage() {
     const fnName = this.messageFunctionName();
 
-    // Safety check to ensure the function exists on window/document
+    // Safety check to ensure the function exists on window.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (typeof (document as any)[fnName] === "function") {
+    if (typeof (window as any)[fnName] === "function") {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (document as any)[fnName](this.count());
+      (window as any)[fnName](this.count());
     }
   }
 

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

@@ -1,3 +1,4 @@
+import { useStore } from "@nanostores/react";
 import { useState } from "react";
 
 import AstroLogo from "../../images/astro.png?url";
@@ -20,19 +21,50 @@ export default function Counter({
   const subtract = () =>
     setCount((i) => setCounterCount(i, Operation.Subtract));
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const showParentMessage = () => (document as any)[showMessage](count);
+  const showParentMessage = () => (window as any)[showMessage](count);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const nanoStoreValue = useStore((window as any).Stores["reactStore"]);
 
   return (
     <>
       {header}
-      <div className="counter-controls">
-        <button onClick={subtract}>-</button>
-        <pre>{count}</pre>
-        <button onClick={add}>+</button>
-      </div>
-      <div>{children}</div>
-      <div className="counter-message">
-        <button onClick={showParentMessage}>Send value</button>
+      <div className="card-grid">
+        <div className="card">
+          Internal counter controls. It keeps state within the component.
+          <div className="card-content">
+            <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">
+            <div>
+              <button className="card-btn" onClick={showParentMessage}>
+                Send value
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="card">
+          Slot content coming in to the component
+          <div className="card-content">
+            <div>{children}</div>
+          </div>
+        </div>
+        <div className="card">
+          Nano Store content
+          <div className="card-content">
+            <div>
+              <strong>Nano Store value:</strong>
+              <div id="nanostore">{nanoStoreValue}</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div className="counter-logos">
         <img alt="OutSystems logo" src={OutSystemsLogo} />

package/template/src/framework/svelte/Counter.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import AstroLogo from "../../images/astro.png?url";
+  import OutSystemsLogo from "../../images/outsystems.png?url";
+  import { Operation, setCounterCount } from "../../lib/setCounterCount";
+
+  export let initialCount: number;
+  export let showMessage: string;
+
+  let count = initialCount;
+
+  const add = () => {
+    count = setCounterCount(count, Operation.Add);
+  };
+
+  const subtract = () => {
+    count = setCounterCount(count, Operation.Subtract);
+  };
+
+  const showParentMessage = () => {
+    // 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 = (window as any).Stores["svelteStore"];
+</script>
+
+<slot name="header" />
+
+<div class="card-grid">
+  <div class="card">
+    Internal counter controls. It keeps state within the component.
+    <div class="card-content">
+      <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.
+    <div class="card-content">
+      <div>
+        <button class="card-btn" on:click={showParentMessage}>
+          Send value
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    Slot content coming in to the component
+    <div class="card-content">
+      <div>
+        <slot />
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    Nano Store content
+    <div class="card-content">
+      <div>
+        <strong>Nano Store value:</strong>
+        <div id="nanostore">{$nanoStoreValue}</div>
+      </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/vue/Counter.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useStore } from "@nanostores/vue";
 
-import OutSystemsLogo from "../../images/outsystems.png?url";
 import AstroLogo from "../../images/astro.png?url";
+import OutSystemsLogo from "../../images/outsystems.png?url";
 import { Operation, setCounterCount } from "../../lib/setCounterCount";
 
 const props = defineProps<{
@@ -21,29 +22,63 @@ const subtract = () => {
 };
 
 const showParentMessage = () => {
-  (document as Document)[props.showMessage]?.(count.value);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any)[props.showMessage](count.value);
 };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const nanoStoreValue = useStore((window as any).Stores["vueStore"]);
 </script>
 
 <template>
-  <div>
-    <slot name="header" />
+  <slot name="header" />
 
-    <div class="counter-controls">
-      <button @click="subtract">-</button>
-      <pre>{{ count }}</pre>
-      <button @click="add">+</button>
+  <div class="card-grid">
+    <div class="card">
+      Internal counter controls. It keeps state within the component.
+      <div class="card-content">
+        <div class="counter-controls">
+          <button @click="subtract">-</button>
+          <pre>{{ count }}</pre>
+          <button @click="add">+</button>
+        </div>
+      </div>
     </div>
 
-    <slot />
+    <div class="card">
+      The button sends the current count value to a function in the parent
+      component.
+      <div class="card-content">
+        <div>
+          <button class="card-btn" @click="showParentMessage">
+            Send value
+          </button>
+        </div>
+      </div>
+    </div>
 
-    <div class="counter-message">
-      <button @click="showParentMessage">Send value</button>
+    <div class="card">
+      Slot content coming in to the component
+      <div class="card-content">
+        <div>
+          <slot />
+        </div>
+      </div>
     </div>
 
-    <div class="counter-logos">
-      <img :src="OutSystemsLogo" alt="OutSystems logo" />
-      <img :src="AstroLogo" alt="Astro logo" />
+    <div class="card">
+      Nano Store content
+      <div class="card-content">
+        <div>
+          <strong>Nano Store value:</strong>
+          <div id="nanostore">{{ nanoStoreValue }}</div>
+        </div>
+      </div>
     </div>
   </div>
+
+  <div class="counter-logos">
+    <img alt="OutSystems logo" :src="OutSystemsLogo" />
+    <img alt="Astro logo" :src="AstroLogo" />
+  </div>
 </template>

package/template/src/pages/angular/angular-counter.astro

@@ -1,15 +1,35 @@
 ---
-import CounterComponent from '../../framework/angular/Counter.component';
+import CounterComponent from "../../framework/angular/Counter.component";
 import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
 ---
-<link href={styles} rel="stylesheet" />
-<script is:inline>
-    document.showMessage = (count) => {
-        document.getElementById("counter").textContent = count;
-    };
-</script>
-<CounterComponent client:visible initialCount={initialCount} showMessage={showMessage}>
-</CounterComponent>
-<div style="text-align: center; margin-top: 20px;">Counter value: <span id="counter"></span></div>
+<html lang="en">
+    <head>
+        <link href={styles} rel="stylesheet" />
+        <script>
+            window.showMessage = (count) => {
+                document.getElementById("counter").textContent = count;
+            };
+        </script>
+    </head>
+    <body>
+        <div class="counter-title">HTML Content</div>
+        <div class="card-grid">
+            <div class="card">
+                Value sent back from component.
+                <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
+            client:visible
+            initialCount={initialCount}
+            showMessage={showMessage}
+        />
+    </body>
+</html>

package/template/src/pages/react/react-counter.astro

@@ -1,21 +1,63 @@
 ---
-import CounterComponent from '../../framework/react/Counter';
+import CounterComponent from "../../framework/react/Counter";
 import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
 ---
-<link href={styles} rel="stylesheet" />
-<script is:inline>
-    document.showMessage = (count) => {
-        document.getElementById("counter").textContent = count;
-    };
-</script>
-<CounterComponent client:only="react" initialCount={initialCount} showMessage={showMessage}>
-    <div class="counter-title" slot="header">
-        Counter
-    </div>
-    <div style="text-align: center;">
-        <p>Slot content!</p>
-    </div>
-</CounterComponent>
-<div style="text-align: center; margin-top: 20px;">Counter value: <span id="counter"></span></div>
+<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["reactStore"] = atom("Test Value");
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["reactStore"].get();
+            });
+        </script>
+    </head>
+    <body>
+        <div class="counter-title">HTML Content</div>
+        <div class="card-grid">
+            <div class="card">
+                Value sent back from component.
+                <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 class="card">
+                Update Nano Store value
+                <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['reactStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <CounterComponent
+            client:only="react"
+            initialCount={initialCount}
+            showMessage={showMessage}
+        >
+            <div class="counter-title" slot="header">Counter Component</div>
+            <div style="text-align: center;">
+                <p><strong>This is content passed into the component.</strong></p>
+            </div>
+        </CounterComponent>
+    </body>
+</html>

package/template/src/pages/svelte/svelte-counter.astro

@@ -0,0 +1,63 @@
+---
+import CounterComponent from "../../framework/svelte/Counter.svelte";
+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["svelteStore"] = atom("Test Value");
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["svelteStore"].get();
+            });
+        </script>
+    </head>
+    <body>
+        <div class="counter-title">HTML Content</div>
+        <div class="card-grid">
+            <div class="card">
+                Value sent back from component.
+                <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 class="card">
+                Update Nano Store value
+                <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['svelteStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <CounterComponent
+            client:only="svelte"
+            initialCount={initialCount}
+            showMessage={showMessage}
+        >
+            <div class="counter-title" slot="header">Counter Component</div>
+            <div style="text-align: center;">
+                <p><strong>This is content passed into the component.</strong></p>
+            </div>
+        </CounterComponent>
+    </body>
+</html>

package/template/src/pages/vue/vue-counter.astro

@@ -4,18 +4,64 @@ import styles from "../../styles/index.css?url";
 const initialCount = 5;
 const showMessage = "showMessage";
 ---
-<link href={styles} rel="stylesheet" />
-<script is:inline>
-    document.showMessage = (count) => {
-        document.getElementById("counter").textContent = count;
-    };
-</script>
-<CounterComponent client:only="vue" initialCount={initialCount} showMessage={showMessage}>
-    <div class="counter-title" slot="header">
-        Counter
-    </div>
-    <div style="text-align: center;">
-        <p>Slot content!</p>
-    </div>
-</CounterComponent>
-<div style="text-align: center; margin-top: 20px;">Counter value: <span id="counter"></span></div>
+<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["vueStore"] = atom("Test Value");
+            document.addEventListener("DOMContentLoaded", function () {
+                const input = document.getElementById("store");
+                input.value = window.Stores["vueStore"].get();
+            });
+        </script>
+    </head>
+    <body>
+        <div class="counter-title">HTML Content</div>
+        <div class="card-grid">
+            <div class="card">
+                Value sent back from component.
+                <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 class="card">
+                Update Nano Store value
+                <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['vueStore'].set(document.getElementById('store').value)"
+                            >Update Store</button
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr />
+        <link href={styles} rel="stylesheet" />
+        <script is:inline>
+            window.showMessage = (count) => {
+                document.getElementById("counter").textContent = count;
+            };
+        </script>
+        <CounterComponent client:only="vue" initialCount={initialCount} showMessage={showMessage}>
+            <div class="counter-title" slot="header">
+                Counter Component
+            </div>
+            <div style="text-align: center;">
+                <p>This is content passed into the component.</p>
+            </div>
+        </CounterComponent>
+    </body>
+</html>

package/template/src/styles/index.css

@@ -11,10 +11,12 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin-top: 0.5em;
   place-items: center;
+  border: 1;
 }
 
 .counter-message,
 .logos {
+  font-size: 1.2em;
   text-align: center;
 }
 
@@ -28,3 +30,66 @@
 .counter-logos img {
   width: 150px;
 }
+
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Add shadows to create the "card" effect */
+  transition: 0.3s; /* Smooth transition for hover effects */
+  border-radius: 5px; /* Rounded corners */
+  overflow: hidden; /* Ensures content stays within the rounded corners */
+  background-color: #fff;
+  padding: 10px;
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.card-image {
+  width: 100%; /* Image takes full width of the card */
+  height: 200px; /* Fixed height for consistency */
+  object-fit: cover; /* Ensures image covers the area without distortion */
+}
+
+.card-content {
+  padding: 16px; /* Add some padding inside the card container */
+}
+
+.card-title {
+  margin-top: 0;
+  font-size: 1.25rem;
+}
+
+.card-description {
+  color: #555;
+}
+
+.card-link {
+  display: inline-block;
+  margin-top: 10px;
+  color: dodgerblue;
+  text-decoration: none;
+}
+
+.card-grid {
+  display: grid;
+  /* Automatically fill columns with a minimum width of 250px and maximum of 1fr */
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 24px; /* Space between cards */
+  padding: 24px;
+}
+
+.card-btn {
+  margin-top: 20px;
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  align-self: flex-start; /* Button size */
+}
+
+.card-btn:hover {
+  background-color: #0056b3;
+}

package/template/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@astrojs/svelte";
+
+export default {
+  preprocess: vitePreprocess(),
+};