create-outsystems-astro 0.7.2 → 0.8.0

package/README.md

@@ -15,6 +15,7 @@ Generates [Astro Islands](https://docs.astro.build/en/concepts/islands/) for use
 - [Angular](https://analogjs.org/docs/packages/astro-angular/overview)
 - [Preact](https://docs.astro.build/en/guides/integrations-guide/preact/)
 - [React](https://docs.astro.build/en/guides/integrations-guide/react/)
+- [SolidJS](https://docs.astro.build/en/guides/integrations-guide/solid-js/)
 - [Svelte](https://docs.astro.build/en/guides/integrations-guide/svelte/)
 - [Vue](https://docs.astro.build/en/guides/integrations-guide/vue/)
 

package/bin/cli.js

@@ -18,6 +18,7 @@ const FRAMEWORKS = [
   { title: "Angular", value: "angular" },
   { title: "Preact", value: "preact" },
   { title: "React", value: "react" },
+  { title: "SolidJS", value: "solid" },
   { title: "Svelte", value: "svelte" },
   { title: "Vue", value: "vue" }
 ];
@@ -167,6 +168,10 @@ function updateAstroConfig(projectDir, selectedFrameworks) {
       import: /import\s+react\s+from\s+['"]@astrojs\/react['"];\s*\n?/,
       integration: /react\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
     },
+    solid: {
+      import: /import\s+solid\s+from\s+['"]@astrojs\/solid-js['"];\s*\n?/,
+      integration: /solid\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
+    },
     svelte: {
       import: /import\s+svelte\s+from\s+['"]@astrojs\/svelte['"];\s*\n?/,
       integration: /svelte\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
@@ -212,7 +217,7 @@ function updateMultiAstroPage(projectDir, selectedFrameworks) {
   const frameworkMap = {
     angular: {
       import: /import\s+AngularStore\s+from\s+['"].*?angular\/Store\.component['"];?\s*\n?/g,
-      component: /<AngularStore\s+client:visible\s*\/>\s*\n?/g
+      component: /<AngularStore\s+client:load\s*\/>\s*\n?/g
     },
     preact: {
       import: /import\s+PreactStore\s+from\s+['"].*?preact\/Store['"];?\s*\n?/g,
@@ -222,6 +227,10 @@ function updateMultiAstroPage(projectDir, selectedFrameworks) {
       import: /import\s+ReactStore\s+from\s+['"].*?react\/Store['"];?\s*\n?/g,
       component: /<ReactStore\s+client:only="react"\s*\/>\s*\n?/g
     },
+    solid: {
+      import: /import\s+SolidStore\s+from\s+['"].*?solid\/Store['"];?\s*\n?/g,
+      component: /<SolidStore\s+client:only="solid-js"\s*\/>\s*\n?/g
+    },
     svelte: {
       import: /import\s+SvelteStore\s+from\s+['"].*?svelte\/Store\.svelte['"];?\s*\n?/g,
       component: /<SvelteStore\s+client:only="svelte"\s*\/>\s*\n?/g

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-outsystems-astro",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Create an OutSystems Astro Island project to import as a component into your OutSystems application",
   "repository": {
     "type": "git",

package/template/.github/workflows/test.yml

@@ -8,7 +8,7 @@ on:
     - cron: '0 12 * * *'
 
 env:
-  NODE_VERSION: '24.13.0'
+  NODE_VERSION: '24.14.1'
 
 jobs:
 
@@ -17,10 +17,10 @@ jobs:
 
     steps:  
       - name: Checkout code
-        uses: actions/checkout@v6.0.1
+        uses: actions/checkout@v6.0.2
 
       - name: Use Node.js
-        uses: actions/setup-node@v6.2.0
+        uses: actions/setup-node@v6.3.0
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -36,10 +36,10 @@ jobs:
 
     steps:  
       - name: Checkout code
-        uses: actions/checkout@v6.0.1
+        uses: actions/checkout@v6.0.2
 
       - name: Use Node.js
-        uses: actions/setup-node@v6.2.0
+        uses: actions/setup-node@v6.3.0
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -55,10 +55,10 @@ jobs:
 
     steps:  
       - name: Checkout code
-        uses: actions/checkout@v6.0.1
+        uses: actions/checkout@v6.0.2
 
       - name: Use Node.js
-        uses: actions/setup-node@v6.2.0
+        uses: actions/setup-node@v6.3.0
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -74,10 +74,10 @@ jobs:
 
     steps:  
       - name: Checkout code
-        uses: actions/checkout@v6.0.1
+        uses: actions/checkout@v6.0.2
 
       - name: Use Node.js
-        uses: actions/setup-node@v6.2.0
+        uses: actions/setup-node@v6.3.0
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -92,10 +92,10 @@ jobs:
 
     steps:  
       - name: Checkout code
-        uses: actions/checkout@v6.0.1
+        uses: actions/checkout@v6.0.2
 
       - name: Use Node.js
-        uses: actions/setup-node@v6.2.0
+        uses: actions/setup-node@v6.3.0
         with:
           node-version: ${{ env.NODE_VERSION }}
 
@@ -113,10 +113,10 @@ jobs:
 
     steps:  
       - name: Checkout code
-        uses: actions/checkout@v6.0.1
+        uses: actions/checkout@v6.0.2
 
       - name: Use Node.js
-        uses: actions/setup-node@v6.2.0
+        uses: actions/setup-node@v6.3.0
         with:
           node-version: ${{ env.NODE_VERSION }}
 

package/template/.prettierrc

@@ -1,4 +1,4 @@
 {
-    "plugins": ["prettier-plugin-svelte"],
+    "plugins": ["prettier-plugin-solidity", "prettier-plugin-svelte"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package/template/AGENTS.md

@@ -8,6 +8,7 @@
   - Angular - Documentation available at https://analogjs.org/docs/packages/astro-angular/overview
   - Preact - Documentation available at https://docs.astro.build/en/guides/integrations-guide/preact/
   - React - Documentation available at https://docs.astro.build/en/guides/integrations-guide/react/
+  - SolidJS - Documentation available at https://docs.astro.build/en/guides/integrations-guide/solid-js/
   - Svelte - Documentation availabe at https://docs.astro.build/en/guides/integrations-guide/svelte/
   - Vue - Documentation available at https://docs.astro.build/en/guides/integrations-guide/vue/
 - Prefer to use TypeScript when possible.
@@ -36,9 +37,10 @@ In OutSystems Developer Cloud, the Islands library is available at https://www.o
 
 - The files in src/pages/\*.astro are used as a starting point and holds the components for generation. They can be tested by running `npm run dev`. That will show what the component looks like as rendered. The sample example pages are broken out by framework name (src/pages/react, src/pages/vue, etc). This page will house the component(s) entry points.
 - When importing a component, the component must have the attribute of the client:only= + the framework name.\
-  - Angular: `client:visible`
+  - Angular: `client:load`
   - Preact: `client:only="preact"`
   - React: `client:only="react"`
+  - SolidJS: `client:only="solid-js"`
   - Svelte: `client:only="svelte"`
   - Vue: `client:only="vue"`
 
@@ -48,6 +50,7 @@ In OutSystems Developer Cloud, the Islands library is available at https://www.o
   - Angular: src/framework/angular
   - Preact: src/framework/react
   - React: src/framework/react
+  - SolidJS: src/framework/solid
   - Svelte: src/framework/svelte
   - Vue: src/framework/vue
 
@@ -66,6 +69,12 @@ The framework folder should stay in place as the components will be rendered fro
 /** @jsxImportSource react */
 ```
 
+- SolidJS:
+
+```js
+/** @jsxImportSource solid-js */
+```
+
 ### Parameters
 
 - Parameters are assigned as attributes on the component. Each framework will then handle them as incoming parameters.
@@ -175,6 +184,54 @@ export default function Counter({
 }
 ```
 
+##### SolidJS
+
+- In SolidJS, slots are handled as props. The default slot is the `children` prop. A named slot will have the name of its slot as the parameter. For example, a slot with the following:
+
+```js
+<div slot="header">Header content</div>
+```
+
+will have the parameter named header.
+
+- The slots are then rendered using the regular React rendering parameter method. With the following Astro component:
+
+```js
+---
+import CounterComponent from '../../framework/solid/Counter';
+---
+<CounterComponent client:only="solid-js">
+    <div slot="header">
+        Counter Component
+    </div>
+    <div style="text-align: center;">
+        <p>This is content passed into the component.</p>
+    </div>
+</CounterComponent>
+```
+
+the slots can be used as:
+
+```js
+export default function Counter({
+	children,
+	header,
+}: {
+	children: JSX.Element;
+	header: JSX.Element;
+}) {
+
+	return (
+		<>
+      {header}
+			<div>
+				{children}
+			</div>
+		</>
+	);
+}
+```
+
 ##### Svelte
 
 - In Svelte, slots are handled as by using the <slot /> tag. The default slot is the is just <slot />. A named slot will have the name of its slot as an attribute such as <slot name="header" />. Placement of the slot will determine where the slot will render.
@@ -266,7 +323,22 @@ export default function Counter({}) {
 
 ```jsx
 import { useStore } from "@nanostores/react";
-import { useState } from "react";
+
+export default function Counter({}) {
+  const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);
+
+  return (
+    <>
+      <div>{nanoStoreValue}</div>
+    </>
+  );
+}
+```
+
+#### SolidJS
+
+```jsx
+import { useStore } from "@nanostores/solid";
 
 export default function Counter({}) {
   const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);

package/template/astro.config.mjs

@@ -2,6 +2,7 @@
 import angular from "@analogjs/astro-angular";
 import preact from "@astrojs/preact";
 import react from "@astrojs/react";
+import solid from "@astrojs/solid-js";
 import svelte from "@astrojs/svelte";
 import vue from "@astrojs/vue";
 import { defineConfig } from "astro/config";
@@ -26,6 +27,10 @@ export default defineConfig({
     react({
       include: ["src/framework/react/*"],
     }),
+    solid({
+      devtools: true,
+      include: ["src/framework/solid/*"],
+    }),
     svelte({
       include: ["src/framework/svelte/*"],
     }),