create-outsystems-astro 0.5.0 → 0.7.0

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,14 +16,16 @@ 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" }
 ];
 
 const LOCKFILES = {
   npm: ["package-lock.json"],
   yarn: ["yarn.lock"],
-  pnpm: ["pnpm-lock.yaml"],
+  pnpm: ["pnpm-lock.yaml", "pnpm-workspace.yaml"],
   bun: ["bun.lock"],
   deno: ["deno.lock", "deno.json"]
 };
@@ -68,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");
 
@@ -91,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);
@@ -152,13 +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*\{[\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*/
     }
   };
 
@@ -183,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";
 
@@ -226,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.5.0",
+  "version": "0.7.0",
   "description": "Create an OutSystems Astro Island project to import as a component into your OutSystems application",
   "repository": {
     "type": "git",

package/template/.prettierignore

@@ -1,4 +1,5 @@
 .github/
+.prettierrc
 bun.lock
 deno.json
 deno.lock
@@ -9,4 +10,5 @@ package-lock.json
 package.json
 patches/
 pnpm-lock.yaml
+pnpm-workspace.yaml
 yarn.lock

package/template/.prettierrc

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

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,17 +30,41 @@ 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.
-  - React: `client:only="react"`.
-  - Vue: `client:only="vue"`.
-  - Angular: `client:visible`.
+- 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"`
 
 ### Components
 
-- The components live in the folder framework/{NAME}/ (src/framework/angular, src/framework/react and src/framework/vue ) with each framework having its own 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.
+- 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.
+
+- 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
 
@@ -49,6 +75,58 @@ In OutSystems Developer Cloud, the Islands library is available at https://www.o
 
 Astro slots can be sent in. A slot can be either the default one or the named one. Each framework handles slots differently. Slots can only be HTML elements and cannot be components of a framework.
 
+##### Angular
+
+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:
@@ -67,10 +145,10 @@ import CounterComponent from '../../framework/react/Counter';
 ---
 <CounterComponent client:only="react">
     <div slot="header">
-        Counter
+        Counter Component
     </div>
     <div style="text-align: center;">
-        <p>Slot content!</p>
+        <p>This is content passed into the component.</p>
     </div>
 </CounterComponent>
 ```
@@ -97,6 +175,31 @@ export default function Counter({
 }
 ```
 
+##### 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.
+
+```js
+---
+import CounterComponent from "../../framework/svelte/Counter.svelte";
+---
+<CounterComponent client:only="svelte">
+    <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>
+```
+
+the slots can be used as:
+
+```svelte
+<slot name="header" />
+<div>
+  <slot />
+</div>
+```
+
 ##### Vue
 
 - In Vue, 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.
@@ -107,10 +210,10 @@ import CounterComponent from '../../framework/react/Counter';
 ---
 <CounterComponent client:only="vue">
     <div slot="header">
-        Counter
+        Counter Component
     </div>
     <div style="text-align: center;">
-        <p>Slot content!</p>
+        <p>This is content passed into the component.</p>
     </div>
 </CounterComponent>
 ```
@@ -126,10 +229,6 @@ the slots can be used as:
 </template>
 ```
 
-##### Angular
-
-Angular does not support the use of slots. Any use of slots with Angular should be discouraged.
-
 ### Nano Stores
 
 The Nano Stores library - https://github.com/nanostores/nanostores - is supported for both sharing state between different Islands or from OutSystems to an Island. This could be used in place of a parameter, but parameters should be the default method.
@@ -140,15 +239,14 @@ 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.
 
-#### React
+#### Preact
 
-```js
-import { useStore } from "@nanostores/react";
-import { useState } from "react";
+```jsx
+import { useStore } from "@nanostores/preact";
 
 export default function Counter({}) {
   const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);
@@ -164,6 +262,33 @@ export default function Counter({}) {
 }
 ```
 
+#### React
+
+```jsx
+import { useStore } from "@nanostores/react";
+import { useState } from "react";
+
+export default function Counter({}) {
+  const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);
+
+  return (
+    <>
+      <div>{nanoStoreValue}</div>
+    </>
+  );
+}
+```
+
+#### Svelte
+
+```svelte
+<script lang="ts">
+  const nanoStoreValue = (window as any).Stores["svelteStore"];
+</script>
+
+<div>{$nanoStoreValue}</div>
+```
+
 #### Vue
 
 ```vue
@@ -173,9 +298,7 @@ const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);
 </script>
 
 <template>
-  <div>
-    <div>{{ nanoStoreValue }}</div>
-  </div>
+  <div>{{ nanoStoreValue }}</div>
 </template>
 ```
 

package/template/astro.config.mjs

@@ -1,6 +1,8 @@
 // @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";
 import { defineConfig } from "astro/config";
 
@@ -17,8 +19,19 @@ export default defineConfig({
         },
       },
     }),
-    react(),
-    vue(),
+    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,