create-outsystems-astro 0.10.0 → 0.11.1

package/package.json

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

package/template/.yarnrc.yml

@@ -5,4 +5,30 @@ nodeLinker: node-modules
 npmMinimalAgeGate: 7d
 yarnPath: .yarn/releases/yarn-4.15.0.cjs
 npmPreapprovedPackages:
-  - "tmp@^0.2.6"
+  - "esbuild@0.28.1"
+  - "@esbuild/aix-ppc64@0.28.1"
+  - "@esbuild/android-arm64@0.28.1"
+  - "@esbuild/android-arm@0.28.1"
+  - "@esbuild/android-x64@0.28.1"
+  - "@esbuild/darwin-arm64@0.28.1"
+  - "@esbuild/darwin-x64@0.28.1"
+  - "@esbuild/freebsd-arm64@0.28.1"
+  - "@esbuild/freebsd-x64@0.28.1"
+  - "@esbuild/linux-arm64@0.28.1"
+  - "@esbuild/linux-arm@0.28.1"
+  - "@esbuild/linux-ia32@0.28.1"
+  - "@esbuild/linux-loong64@0.28.1"
+  - "@esbuild/linux-mips64el@0.28.1"
+  - "@esbuild/linux-ppc64@0.28.1"
+  - "@esbuild/linux-riscv64@0.28.1"
+  - "@esbuild/linux-s390x@0.28.1"
+  - "@esbuild/linux-x64@0.28.1"
+  - "@esbuild/netbsd-arm64@0.28.1"
+  - "@esbuild/netbsd-x64@0.28.1"
+  - "@esbuild/openbsd-arm64@0.28.1"
+  - "@esbuild/openbsd-x64@0.28.1"
+  - "@esbuild/openharmony-arm64@0.28.1"
+  - "@esbuild/sunos-x64@0.28.1"
+  - "@esbuild/win32-arm64@0.28.1"
+  - "@esbuild/win32-ia32@0.28.1"
+  - "@esbuild/win32-x64@0.28.1"

package/template/AGENTS.md

@@ -11,6 +11,7 @@
   - 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/
+  - Twig - Documentation available at https://hs2323.github.io/create-outsystems-astro/guides/integrations/twig/
   - Vue - Documentation available at https://docs.astro.build/en/guides/integrations-guide/vue/
 - Prefer to use TypeScript when possible.
 
@@ -44,6 +45,7 @@ In OutSystems Developer Cloud, the Islands library is available at https://www.o
   - React: `client:only="react"`
   - SolidJS: `client:only="solid-js"`
   - Svelte: `client:only="svelte"`
+  - Twig: `client:load`
   - Vue: `client:only="vue"`
 
 ### Components
@@ -94,6 +96,10 @@ Angular does not support the use of slots. Any use of slots with Angular should
 
 The HTML integration does not support the use of slots. Any use of slots with the HTML integration should be discouraged.
 
+##### Twig
+
+The Twig integration does not support the use of slots. Any use of slots with the Twig integration should be discouraged. Pass content in as props and render it with `{{ }}` instead.
+
 ##### 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:
@@ -406,6 +412,47 @@ export default function Counter({}) {
 <div>{$nanoStoreValue}</div>
 ```
 
+#### Twig
+
+Like the HTML integration, Twig does not use a Nano Stores binding library. Set up a compatible store on `window.Stores` inside the component's `<script>` tag and subscribe to it directly.
+
+```html
+<div class="nanostore-value"></div>
+<script>
+  const nanostoreEl = container.querySelector(".nanostore-value");
+
+  if (!window.Stores) window.Stores = {};
+  if (!window.Stores["twigStore"]) {
+    let _value = "Test Value";
+    const _subs = [];
+    window.Stores["twigStore"] = {
+      get: function () {
+        return _value;
+      },
+      set: function (v) {
+        _value = v;
+        _subs.forEach(function (fn) {
+          fn(v);
+        });
+      },
+      subscribe: function (fn) {
+        fn(_value);
+        _subs.push(fn);
+        return function () {
+          _subs.splice(_subs.indexOf(fn), 1);
+        };
+      },
+    };
+  }
+
+  const store = window.Stores["twigStore"];
+  nanostoreEl.textContent = store.get();
+  store.subscribe(function (value) {
+    nanostoreEl.textContent = value;
+  });
+</script>
+```
+
 #### Vue
 
 ```vue

package/template/astro.config.mjs

@@ -7,6 +7,7 @@ import svelte from "@astrojs/svelte";
 import vue from "@astrojs/vue";
 import { defineConfig } from "astro/config";
 import html from "islands-integrations/html";
+import twig from "islands-integrations/twig";
 
 // https://astro.build/config
 export default defineConfig({
@@ -39,6 +40,9 @@ export default defineConfig({
     svelte({
       include: ["src/framework/svelte/*"],
     }),
+    twig({
+      include: ["src/framework/twig/*"],
+    }),
     vue({
       include: ["src/framework/vue/*"],
     }),