create-outsystems-astro 0.6.0 → 0.7.1

package/README.md

@@ -13,7 +13,9 @@ Generates [Astro Islands](https://docs.astro.build/en/concepts/islands/) for use
 
 ## Current supported frameworks
 - [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/)
+- [Svelte](https://docs.astro.build/en/guides/integrations-guide/svelte/)
 - [Vue](https://docs.astro.build/en/guides/integrations-guide/vue/)
 
 ## Getting started
@@ -55,29 +57,66 @@ This will create the generated files as well as an example component.
 /
 ├── public/
 ├── src/
-│   └── components/
-│       └── Counter.tsx
+│   └── framework/
+│       └── [NAME]/
+│           └── components/
+│               └── Counter.tsx
+│   └── lib/
+│       └── library.ts
 │   └── images/
 │       └── image.png
 │   └── pages/
-│       └── counter.astro
+│       └── [NAME]/
+│           └── page.astro
 │   └── styles/
 │       └── index.css
+│   └── stores/
+│       └── store.ts
+├── test/
+│   └── e2e
+│       └── [NAME]/
+│           └── counter.spec.ts
+│   └── integration
+│       └── [NAME]/
+│           └── counter.test.tsx
+│           └── conter.test.ts
+│   └── unit
+        └── counter.test.ts
 └── package.json
 ```
 
-### Pages
-Each page inside of the pages file should represent an Island that will be imported into OutSystems.
+### Src
 
-### Components
-The location of the component code.
+#### Framework Components
+The location of the component code. Each framework has its own separate folder.
 
-### Images
+#### Lib
+Cane be use for shared/library logic that is not part of the visual presentation of the component.
+
+#### Images
 Any image assets.
 
-### Styles
+#### Pages
+Each page inside of the pages file should represent an Island that will be imported into OutSystems. This is for setup/development and the actual page will not be used for the final output. Pages may be split by framework if using multiple frameworks.
+
+#### Styles
 Stylesheets that may apply to the component.
 
+#### Stores
+Nano Stores for use in components.
+
+### Test
+
+#### E2E
+End-to-end tests using Playwright.
+
+#### Integration
+Integration tests that test the whole component structure. Written using Testing Library specific providers.
+
+#### Unit
+Unit tests for functions or shared code/libraries.
+
+
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:
@@ -138,7 +177,7 @@ All commands are run from the root of the project, from a terminal:
 
 | Command                   | Action                                            |
 | :------------------------ | :-----------------------------------------------  |
-| `deno install && deno run postinstall`             | Installs dependencies                            |
+| `deno install && deno run postinstall:deno`             | Installs dependencies                            |
 | `deno run dev`             | Starts local dev server at `localhost:4321`      |
 | `deno run build`           | Build distribution to `./dist/`                  |
 | `deno run output:deno`     | Build OutSystems production site to `./output/`  |
@@ -148,7 +187,7 @@ All commands are run from the root of the project, from a terminal:
 | `deno run audit:deno`      | Run audit of modules                             |
 
 ## Getting Started
-Delete the demo application under the ```src``` folder and being to build your own application. 
+Delete the demo application under the ```src``` folder and being to build your own application. It is recommended to keep the folder structure. The frameworks/[NAME]/components should be kept for asset building.
 
 ## Converting to OutSystems
 

package/bin/cli.js

@@ -16,6 +16,7 @@ const __dirname = path.dirname(__filename);
 
 const FRAMEWORKS = [
   { title: "Angular", value: "angular" },
+  { title: "Preact", value: "preact" },
   { title: "React", value: "react" },
   { title: "Svelte", value: "svelte" },
   { title: "Vue", value: "vue" }
@@ -69,6 +70,8 @@ async function main() {
 
   updateAstroConfig(targetDir, selectedFrameworks);
 
+  updateMultiAstroPage(targetDir, selectedFrameworks)
+
   const readmeSrc = path.resolve(__dirname, "../README.md");
   const readmeDest = path.join(targetDir, "README.md");
 
@@ -92,7 +95,10 @@ function copyDir(src, dest) {
   fs.mkdirSync(dest, { recursive: true });
   for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
     const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
+    
+    // Check if the file is our renamed gitignore
+    const destName = entry.name === ".npmignore" ? ".gitignore" : entry.name;
+    const destPath = path.join(dest, destName);
 
     if (entry.isDirectory()) {
       copyDir(srcPath, destPath);
@@ -153,17 +159,21 @@ function updateAstroConfig(projectDir, selectedFrameworks) {
       import: /import\s+angular\s+from\s+['"]@analogjs\/astro-angular['"];\s*\n?/,
       integration: /angular\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
     },
+    preact: {
+      import: /import\s+preact\s+from\s+['"]@astrojs\/preact['"];\s*\n?/,
+      integration: /preact\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
+    },
     react: {
       import: /import\s+react\s+from\s+['"]@astrojs\/react['"];\s*\n?/,
-      integration: /react\(\)\s*,?\s*/
+      integration: /react\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
     },
     svelte: {
       import: /import\s+svelte\s+from\s+['"]@astrojs\/svelte['"];\s*\n?/,
-      integration: /svelte\(\)\s*,?\s*/
+      integration: /svelte\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
     },
     vue: {
       import: /import\s+vue\s+from\s+['"]@astrojs\/vue['"];\s*\n?/,
-      integration: /vue\(\)\s*,?\s*/
+      integration: /vue\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
     }
   };
 
@@ -188,6 +198,57 @@ function updateAstroConfig(projectDir, selectedFrameworks) {
   console.log("🛠️ Updated astro.config.mjs integrations");
 }
 
+function updateMultiAstroPage(projectDir, selectedFrameworks) {
+  const pagePath = path.join(projectDir, "src", "pages", "multi", "store.astro");
+
+  if (!fs.existsSync(pagePath)) {
+    console.warn(`⚠️ ${path.relative(projectDir, pagePath)} not found, skipping page cleanup.`);
+    return;
+  }
+
+  let content = fs.readFileSync(pagePath, "utf-8");
+
+  // Map each framework to its specific Import and Component tag patterns
+  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
+    },
+    preact: {
+      import: /import\s+PreactStore\s+from\s+['"].*?preact\/Store['"];?\s*\n?/g,
+      component: /<PreactStore\s+client:only="preact"\s*\/>\s*\n?/g
+    },
+    react: {
+      import: /import\s+ReactStore\s+from\s+['"].*?react\/Store['"];?\s*\n?/g,
+      component: /<ReactStore\s+client:only="react"\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
+    },
+    vue: {
+      import: /import\s+VueStore\s+from\s+['"].*?vue\/Store\.vue['"];?\s*\n?/g,
+      component: /<VueStore\s+client:only="vue"\s*\/>\s*\n?/g
+    }
+  };
+
+  FRAMEWORKS.forEach(({ value: framework }) => {
+    if (!selectedFrameworks.includes(framework)) {
+      const patterns = frameworkMap[framework];
+      if (patterns) {
+        content = content.replace(patterns.import, "");
+        content = content.replace(patterns.component, "");
+      }
+    }
+  });
+
+  // Clean up any double-newlines left behind in the template body
+  content = content.replace(/\n\s*\n\s*\n/g, "\n\n");
+
+  fs.writeFileSync(pagePath, content, "utf-8");
+  console.log(`✨ Cleaned up components in ${path.relative(projectDir, pagePath)}`);
+}
+
 function detectPackageManager() {
   if (typeof Deno !== "undefined") return "deno";
 
@@ -231,7 +292,7 @@ function packageInstall(targetDir) {
         yarn: "yarn",
         pnpm: "pnpm install",
         bun: "bun install",
-        deno: "deno install && deno run postinsall",
+        deno: "deno install && deno run postinsall:deno",
         unknown: "npm install"
       }[packageManager];
 

package/package.json

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

package/template/AGENTS.md

@@ -6,8 +6,10 @@
 - The output generation will be only client side. No server side rendering or server side components will be used.
 - The Astro Islands can be used generated with the following frameworks:
   - 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/
-  - Vue - https://docs.astro.build/en/guides/integrations-guide/vue/
+  - 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.
 
 ## OutSystems
@@ -28,11 +30,14 @@ In OutSystems 11, the Islands library is available at https://www.outsystems.com
 
 In OutSystems Developer Cloud, the Islands library is available at https://www.outsystems.com/forge/component-overview/22960/islands-odc.
 
+- When starting a project, the demo files should be deleted. The demo files under src/ and test/.
+
 ### Pages
 
 - 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`
+  - Preact: `client:only="preact"`
   - React: `client:only="react"`
   - Svelte: `client:only="svelte"`
   - Vue: `client:only="vue"`
@@ -41,10 +46,25 @@ In OutSystems Developer Cloud, the Islands library is available at https://www.o
 
 - The components live in the folder framework/{NAME}/:
   - Angular: src/framework/angular
+  - Preact: src/framework/react
   - React: src/framework/react
   - Svelte: src/framework/svelte
   - Vue: src/framework/vue
-    The framework folder should stay in place as the components will be rendered from there. The Angular components will only be transformed by Astro if they are in the framework/angular folder.
+
+The framework folder should stay in place as the components will be rendered from there. The Angular components will only be transformed by Astro if they are in the framework/angular folder.
+
+- For any JSX based libraries, the @jsxImportSource directive must be at the top of the file.
+  - Preact:
+
+```js
+/** @jsxImportSource preact */
+```
+
+- React:
+
+```js
+/** @jsxImportSource react */
+```
 
 ### Parameters
 
@@ -59,6 +79,54 @@ Astro slots can be sent in. A slot can be either the default one or the named on
 
 Angular does not support the use of slots. Any use of slots with Angular should be discouraged.
 
+##### Preact
+
+- In Preact, 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/preact/Counter';
+---
+<CounterComponent client:only="preact">
+    <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: ComponentChildren;
+	header: ComponentChildren;
+}) {
+
+	return (
+		<>
+      {header}
+			<div>
+				{children}
+			</div>
+		</>
+	);
+}
+```
+
 ##### React
 
 - In React, 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:
@@ -171,13 +239,32 @@ The OutSystems 11 library is called Lightweight State Manager - https://www.outs
 
 The OutSystems Developer Cloud library is called Lightweight State Manager and is available in the ODC Forge.
 
-Nano Stores are currently supported for only React - https://github.com/nanostores/react and Vue - https://github.com/nanostores/vue. The Angular 21 library does not yet support them.
+Nano Stores are currently supported for only Preact - https://github.com/nanostores/preact, React - https://github.com/nanostores/react and Vue - https://github.com/nanostores/vue. The Angular 21 library does not yet support them.
 
 In OutSystems, the store will be on the Window object. The Islands component will then have to access it from there.
 
+#### Preact
+
+```jsx
+import { useStore } from "@nanostores/preact";
+
+export default function Counter({}) {
+  const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);
+
+  return (
+    <>
+      <div>
+        <strong>Nano Store value:</strong>
+        <div>{nanoStoreValue}</div>
+      </div>
+    </>
+  );
+}
+```
+
 #### React
 
-```js
+```jsx
 import { useStore } from "@nanostores/react";
 import { useState } from "react";
 

package/template/astro.config.mjs

@@ -1,5 +1,6 @@
 // @ts-check
 import angular from "@analogjs/astro-angular";
+import preact from "@astrojs/preact";
 import react from "@astrojs/react";
 import svelte from "@astrojs/svelte";
 import vue from "@astrojs/vue";
@@ -18,9 +19,19 @@ export default defineConfig({
         },
       },
     }),
-    react(),
-    vue(),
-    svelte(),
+    preact({
+      compat: true,
+      include: ["src/framework/preact/*"],
+    }),
+    react({
+      include: ["src/framework/react/*"],
+    }),
+    svelte({
+      include: ["src/framework/svelte/*"],
+    }),
+    vue({
+      include: ["src/framework/vue/*"],
+    }),
   ],
   server: {
     host: true,