create-outsystems-astro 0.5.0 → 0.6.0

package/bin/cli.js

@@ -17,13 +17,14 @@ const __dirname = path.dirname(__filename);
 const FRAMEWORKS = [
   { title: "Angular", value: "angular" },
   { 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"]
 };
@@ -156,6 +157,10 @@ function updateAstroConfig(projectDir, selectedFrameworks) {
       import: /import\s+react\s+from\s+['"]@astrojs\/react['"];\s*\n?/,
       integration: /react\(\)\s*,?\s*/
     },
+    svelte: {
+      import: /import\s+svelte\s+from\s+['"]@astrojs\/svelte['"];\s*\n?/,
+      integration: /svelte\(\)\s*,?\s*/
+    },
     vue: {
       import: /import\s+vue\s+from\s+['"]@astrojs\/vue['"];\s*\n?/,
       integration: /vue\(\)\s*,?\s*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-outsystems-astro",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.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

@@ -31,14 +31,20 @@ In OutSystems Developer Cloud, the Islands library is available at https://www.o
 ### 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`
+  - 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
+  - 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.
 
 ### Parameters
 
@@ -49,6 +55,10 @@ 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.
+
 ##### 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 +77,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 +107,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 +142,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 +161,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.
@@ -155,15 +186,22 @@ export default function Counter({}) {
 
   return (
     <>
-      <div>
-        <strong>Nano Store value:</strong>
-        <div>{nanoStoreValue}</div>
-      </div>
+      <div>{nanoStoreValue}</div>
     </>
   );
 }
 ```
 
+#### Svelte
+
+```svelte
+<script lang="ts">
+  const nanoStoreValue = (window as any).Stores["svelteStore"];
+</script>
+
+<div>{$nanoStoreValue}</div>
+```
+
 #### Vue
 
 ```vue
@@ -173,9 +211,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,7 @@
 // @ts-check
 import angular from "@analogjs/astro-angular";
 import react from "@astrojs/react";
+import svelte from "@astrojs/svelte";
 import vue from "@astrojs/vue";
 import { defineConfig } from "astro/config";
 
@@ -19,6 +20,7 @@ export default defineConfig({
     }),
     react(),
     vue(),
+    svelte(),
   ],
   server: {
     host: true,