create-outsystems-astro 0.4.2 → 0.6.0

package/README.md

@@ -93,6 +93,7 @@ All commands are run from the root of the project, from a terminal:
 | `npm run preview`         | Preview build locally, before creating output    |
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `npm run astro -- --help` | Get help using the Astro CLI                     |
+| `npm run audit:npm`       | Run audit of modules                             |
 
 ### Yarn
 
@@ -105,6 +106,7 @@ All commands are run from the root of the project, from a terminal:
 | `yarn run preview`         | Preview build locally, before creating output    |
 | `yarn run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `yarn run astro -- --help` | Get help using the Astro CLI                     |
+| `yarn run audit:yarn`      | Run audit of modules                             |
 
 ### pnpm
 
@@ -117,6 +119,7 @@ All commands are run from the root of the project, from a terminal:
 | `pnpm run preview`         | Preview build locally, before creating output    |
 | `pnpm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `pnpm run astro -- --help` | Get help using the Astro CLI                     |
+| `pnpm run audit:pnpm`      | Run audit of modules                             |
 
 ### Bun
 
@@ -129,6 +132,7 @@ All commands are run from the root of the project, from a terminal:
 | `bun run preview`         | Preview build locally, before creating output    |
 | `bun run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `bun run astro -- --help` | Get help using the Astro CLI                     |
+| `bun run audit:bun`       | Run audit of modules                             |
 
 ### Deno
 
@@ -141,6 +145,7 @@ All commands are run from the root of the project, from a terminal:
 | `deno run preview`         | Preview build locally, before creating output    |
 | `deno run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `deno run astro -- --help` | Get help using the Astro CLI                     |
+| `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. 

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.4.2",
+  "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,5 +1,7 @@
 .github/
+.prettierrc
 bun.lock
+deno.json
 deno.lock
 dist/
 node_modules/
@@ -8,4 +10,5 @@ package-lock.json
 package.json
 patches/
 pnpm-lock.yaml
-yarn.lock
+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

@@ -24,27 +24,41 @@
 - The project can intialized from the Create OutSystems Astro package (https://www.npmjs.com/package/create-outsystems-astro).
 - In this document, for any reference to running package manager script, the `PM` attribute should be replaced with whatever package manager the user is using.
 
+In OutSystems 11, the Islands library is available at https://www.outsystems.com/forge/component-overview/22857/islands-o11.
+
+In OutSystems Developer Cloud, the Islands library is available at https://www.outsystems.com/forge/component-overview/22960/islands-odc.
+
 ### 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
 
 - Parameters are assigned as attributes on the component. Each framework will then handle them as incoming parameters.
-- OutSystems will pass in parameters already prepared for the ``<astro-island>`. It already has copied the Astro method of serialization in https://github.com/withastro/astro/blob/main/packages/astro/src/runtime/server/serialize.ts.
+- OutSystems will pass in parameters already prepared for the astro-island. It already has copied the Astro method of serialization in https://github.com/withastro/astro/blob/main/packages/astro/src/runtime/server/serialize.ts.
 
 #### Slots
 
 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:
@@ -63,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>
 ```
@@ -93,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.
@@ -103,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>
 ```
@@ -122,16 +161,66 @@ the slots can be used as:
 </template>
 ```
 
-##### Angular
+### Nano Stores
 
-Angular does not support the use of slots. Any use of slots with Angular should be discouraged.
+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.
+
+The current supported OutSystems Nano Stores module only suports Atoms and Maps. It can either subscribe to an Atom or Map. It can also listen to Keys of a Map.
+
+The OutSystems 11 library is called Lightweight State Manager - https://www.outsystems.com/forge/component-overview/23528/lightweight-state-manager-o11 is available in the O11 Forge.
+
+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.
+
+In OutSystems, the store will be on the Window object. The Islands component will then have to access it from there.
+
+#### React
+
+```js
+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
+<script setup lang="ts">
+import { useStore } from "@nanostores/vue";
+const nanoStoreValue = useStore(window.Stores["MyGreatStore"]);
+</script>
+
+<template>
+  <div>{{ nanoStoreValue }}</div>
+</template>
+```
 
 ### Testing
 
 - There is a preset set of testing tools, but can be changed after generation.
 - The unit testing library setup is Vitest. The unit tests are located in `test/unit` folder.
-- The integration testing library is Testing Library with an equivalent library per framework. Each framework is in its own folder in `test/integration/[FRAMEWORK]`.
-- The end-to-end testing library is Playwright. Each framework is in its own folder in `test/e2e/[FRAMEWORK]`.
+- The integration testing library is Testing Library with an equivalent library per framework. Each framework is in its own folder in `test/integration/{FRAMEWORK}`.
+- The end-to-end testing library is Playwright. Each framework is in its own folder in `test/e2e/{FRAMEWORK}`.
 
 ### Linting and formatting
 
@@ -143,7 +232,7 @@ Angular does not support the use of slots. Any use of slots with Angular should
 
 ### Handlers
 
-- Incoming functions from OutSystems cannot be passed as function handlers. The way that OutSystems will invoke them is by binding the function with the name to the `document` object of the page. Then it will pass in that name as a parameter. For example, if you need a function handler of `ShowMessage`, it will need to be called as `document[ShowMessage]`.
+- Incoming functions from OutSystems cannot be passed as function handlers. The way that OutSystems will invoke them is by binding the function with the name to the `window` object of the page. Then it will pass in that name as a parameter. For example, if you need a function handler of `ShowMessage`, it will need to be called as `window[ShowMessage]`.
 - Passing in basic text, number and boolean should be fine to the handler. Any array or object must be JSON stringified prior to being passed into the handler.
 
 ## Generating output

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,