create-outsystems-astro 0.2.0 → 0.4.0

package/README.md

@@ -12,16 +12,43 @@ Generates [Astro Islands](https://docs.astro.build/en/concepts/islands/) for use
 - Loading performance of component must be instant. The Astro Island will load after the page/screen has loaded since the initializer and tag will be loaded after.
 
 ## Current supported frameworks
+- [Angular](https://analogjs.org/docs/packages/astro-angular/overview)
 - [React](https://docs.astro.build/en/guides/integrations-guide/react/)
 - [Vue](https://docs.astro.build/en/guides/integrations-guide/vue/)
 
 ## Getting started
 Run the Create OutSystems Astro generator:
+
+### npm
 ```bash
 npx create-outsystems-astro
 ```
+
+### Yarn
+```bash
+yarn create outsystems-astro
+```
+
+### pnpm
+```bash
+pnpm dlx create-outsystems-astro
+```
+
+### Bun
+```bash
+bunx create-outsystems-astro
+```
+
+### Deno
+The Deno DX command is available in [Deno 2.6](https://deno.com/blog/v2.6).
+```bash
+dx create-outsystems-astro
+```
+
 This will create the generated files as well as an example component.
 
+[View the full documentation](https://hs2323.github.io/create-outsystems-astro/guides/getting-started/).
+
 ## 🚀 Project Structure
 
 ```text
@@ -55,6 +82,8 @@ Stylesheets that may apply to the component.
 
 All commands are run from the root of the project, from a terminal:
 
+### npm
+
 | Command                   | Action                                           |
 | :------------------------ | :----------------------------------------------- |
 | `npm install`             | Installs dependencies                            |
@@ -65,15 +94,84 @@ All commands are run from the root of the project, from a terminal:
 | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `npm run astro -- --help` | Get help using the Astro CLI                     |
 
+### Yarn
+
+| Command                   | Action                                            |
+| :------------------------ | :-----------------------------------------------  |
+| `yarn install`             | Installs dependencies                            |
+| `yarn run dev`             | Starts local dev server at `localhost:4321`      |
+| `yarn run build`           | Build distribution to `./dist/`                  |
+| `yarn run output`          | Build OutSystems production site to `./output/`  |
+| `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                     |
+
+### pnpm
+
+| Command                   | Action                                            |
+| :------------------------ | :-----------------------------------------------  |
+| `pnpm install`             | Installs dependencies                            |
+| `pnpm run dev`             | Starts local dev server at `localhost:4321`      |
+| `pnpm run build`           | Build distribution to `./dist/`                  |
+| `pnpm run output`          | Build OutSystems production site to `./output/`  |
+| `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                     |
+
+### Bun
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `bun install`             | Installs dependencies                            |
+| `bun run dev`             | Starts local dev server at `localhost:4321`      |
+| `bun run build`           | Build distribution to `./dist/`                  |
+| `bun run output:bun`      | Build OutSystems production site to `./output/`  |
+| `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                     |
+
+### Deno
+
+| Command                   | Action                                            |
+| :------------------------ | :-----------------------------------------------  |
+| `deno install && deno run postinstall`             | 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/`  |
+| `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                     |
 
 ## Getting Started
-Delete the demo application under the ```src``` flder and choose your framework(s) to build the components in.
+Delete the demo application under the ```src``` folder and being to build your own application. 
 
 ## Converting to OutSystems
 
-Once development is complete, run:
+Once development is complete, run the output generation command:
+
+### npm
 ```bash
 npm run output
 ```
 
+### Yarn
+```bash
+yarn run output
+```
+
+### pnpm
+```bash
+pnpm run output
+```
+
+### Bun
+```bash
+bun run output:bun
+```
+
+### Deno
+```bash
+deno run output:deno
+```
+
 This will create a set of files that will then need to be coverted to OutSystems components.

package/bin/cli.js

@@ -1,13 +1,33 @@
 #!/usr/bin/env node
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import prompts from "prompts";
-import { execSync } from "child_process";
+import yargs from "yargs";
+import { hideBin } from 'yargs/helpers';
+import { execSync } from "node:child_process";
+
+prompts.override(
+  yargs(hideBin(process.argv)).parse()
+);
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const FRAMEWORKS = [
+  { title: "Angular", value: "angular" },
+  { title: "React", value: "react" },
+  { title: "Vue", value: "vue" }
+];
+
+const LOCKFILES = {
+  npm: ["package-lock.json"],
+  yarn: ["yarn.lock"],
+  pnpm: ["pnpm-lock.yaml"],
+  bun: ["bun.lock"],
+  deno: ["deno.lock", "deno.json"]
+};
+
 async function main() {
   console.log("🚀 Welcome to create-outsystems-astro!");
 
@@ -26,6 +46,28 @@ async function main() {
   console.log("📦 Copying template...");
   copyDir(templateDir, targetDir);
 
+  const packageManager = packageInstall(targetDir);
+
+  let selectedFrameworks = [];
+
+  while (selectedFrameworks.length === 0) {
+    const frameworkResponse = await prompts({
+      type: "multiselect",
+      name: "frameworks",
+      message: "Which frameworks do you want to include?",
+      choices: FRAMEWORKS,
+      hint: "- Space to select. Enter to confirm",
+      validate: value =>
+        value.length > 0 ? true : "Please select at least one framework."
+    });
+
+    selectedFrameworks = frameworkResponse.frameworks || [];
+  }
+
+  deleteUnselectedFrameworkFolders(targetDir, selectedFrameworks);
+
+  updateAstroConfig(targetDir, selectedFrameworks);
+
   const readmeSrc = path.resolve(__dirname, "../README.md");
   const readmeDest = path.join(targetDir, "README.md");
 
@@ -33,20 +75,14 @@ async function main() {
     fs.copyFileSync(readmeSrc, readmeDest);
   }
 
-  // Install dependencies
-  console.log("📦 Installing dependencies...");
-  try {
-    execSync("npm install", { cwd: targetDir, stdio: "inherit" });
-  } catch {
-    console.warn("⚠️ Failed to automatically install dependencies.");
-  }
+
 
   console.log(`
 ✅ All done!
 
 Next steps:
   cd ${response.projectName}
-  npm run dev
+  ${packageManager} run dev
 `);
 }
 
@@ -65,6 +101,147 @@ function copyDir(src, dest) {
   }
 }
 
+function deleteUnselectedFrameworkFolders(projectDir, selectedFrameworks) {
+  const allFrameworks = FRAMEWORKS.map(f => f.value);
+
+  const frameworksToDelete = allFrameworks.filter(
+    f => !selectedFrameworks.includes(f)
+  );
+
+  for (const framework of frameworksToDelete) {
+    const pageDir = path.join(projectDir, "src", "pages", framework);
+    const componentDir = path.join(projectDir, "src", "framework", framework);
+    const testDir = path.join(projectDir, "test", "integration", framework);
+    const testE2EDir = path.join(projectDir, "test", "e2e", framework);
+    
+    if (fs.existsSync(pageDir)) {
+      console.log(`🗑️ Removing ${path.relative(projectDir, pageDir)}`);
+      fs.rmSync(pageDir, { recursive: true, force: true });
+    }
+
+    if (fs.existsSync(componentDir)) {
+      console.log(`🗑️ Removing ${path.relative(projectDir, componentDir)}`);
+      fs.rmSync(componentDir, { recursive: true, force: true });
+    }
+      
+    if (fs.existsSync(testDir)) {
+      console.log(`🗑️ Removing ${path.relative(projectDir, testDir)}`);
+      fs.rmSync(testDir, { recursive: true, force: true });
+    }
+
+    if (fs.existsSync(testE2EDir)) {
+      console.log(`🗑️ Removing ${path.relative(projectDir, testE2EDir)}`);
+      fs.rmSync(testE2EDir, { recursive: true, force: true });
+    }
+
+  }
+}
+
+function updateAstroConfig(projectDir, selectedFrameworks) {
+  const configPath = path.join(projectDir, "astro.config.mjs");
+
+  if (!fs.existsSync(configPath)) {
+    console.warn("⚠️ astro.config.mjs not found, skipping integration cleanup.");
+    return;
+  }
+
+  let content = fs.readFileSync(configPath, "utf-8");
+
+  const allFrameworks = {
+    angular: {
+      import: /import\s+angular\s+from\s+['"]@analogjs\/astro-angular['"];\s*\n?/,
+      integration: /angular\s*\(\s*\{[\s\S]*?\}\s*\)\s*,?\s*/
+    },
+    react: {
+      import: /import\s+react\s+from\s+['"]@astrojs\/react['"];\s*\n?/,
+      integration: /react\(\)\s*,?\s*/
+    },
+    vue: {
+      import: /import\s+vue\s+from\s+['"]@astrojs\/vue['"];\s*\n?/,
+      integration: /vue\(\)\s*,?\s*/
+    }
+  };
+
+  for (const [framework, patterns] of Object.entries(allFrameworks)) {
+    if (!selectedFrameworks.includes(framework)) {
+      content = content.replace(patterns.import, "");
+      content = content.replace(patterns.integration, "");
+    }
+  }
+
+  // Clean up trailing commas inside integrations array
+  content = content.replace(
+    /integrations:\s*\[\s*,/g,
+    "integrations: ["
+  );
+  content = content.replace(
+    /,\s*\]/g,
+    "]"
+  );
+
+  fs.writeFileSync(configPath, content, "utf-8");
+  console.log("🛠️ Updated astro.config.mjs integrations");
+}
+
+function detectPackageManager() {
+  if (typeof Deno !== "undefined") return "deno";
+
+  const ua = process.env.npm_config_user_agent || "";
+
+  if (ua.startsWith("npm/")) return "npm";
+  if (ua.startsWith("yarn/")) return "yarn";
+  if (ua.startsWith("pnpm/")) return "pnpm";
+  if (ua.startsWith("bun/")) return "bun";
+
+  return "unknown";
+}
+
+function cleanupLockfiles(projectDir, activePackageManager) {
+  for (const [packageManager, files] of Object.entries(LOCKFILES)) {
+    if (packageManager === activePackageManager) continue;
+
+    for (const file of files) {
+      const filePath = path.join(projectDir, file);
+      if (fs.existsSync(filePath)) {
+        fs.rmSync(filePath, { force: true });
+        console.log(`🗑️ Removed ${file}`);
+      }
+    }
+  }
+}
+
+function packageInstall(targetDir) {
+   try {
+      const packageManager = detectPackageManager();
+      console.log(`🧰 Detected package manager: ${packageManager}`);
+      
+      if (packageManager === "unknown") {
+        console.warn("⚠️ Could not detect package manager — keeping all lockfiles.");
+      } else {
+        cleanupLockfiles(targetDir, packageManager);
+      }
+
+      const installCmd = {
+        npm: "npm install",
+        yarn: "yarn",
+        pnpm: "pnpm install",
+        bun: "bun install",
+        deno: "deno install && deno run postinsall",
+        unknown: "npm install"
+      }[packageManager];
+
+      console.log(`📦 Installing dependencies using ${packageManager}...`);
+      execSync(installCmd, {
+        cwd: targetDir,
+        stdio: "inherit"
+      });
+
+      return packageManager
+   } catch {
+      console.warn("⚠️ Failed to automatically install dependencies.");
+    }
+}
+
 main().catch(err => {
   console.error(err);
   process.exit(1);

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "create-outsystems-astro",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Create an OutSystems Astro Island project to import as a component into your OutSystems application",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hs2323/create-outsystems-astro.git"
+  },
   "bin": {
     "create-outsystems-astro": "bin/cli.js"
   },
@@ -23,6 +27,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "yargs": "^18.0.0"
   }
 }

package/template/.github/copilot-instructions.md

@@ -0,0 +1,6 @@
+# Copilot instructions
+
+This file is the authoritative Copilot instruction file for this repository.
+If any content in AGENTS.md conflicts with the instructions below, always follow the instructions in this file.
+
+Reference (for additional details): [AGENTS.md](../AGENTS.md)

package/template/.github/workflows/test.yml

@@ -0,0 +1,113 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+    branches: [ main ]
+
+env:
+  NODE_VERSION: '24.13.0'
+
+jobs:
+
+  format:
+    runs-on: ubuntu-latest
+
+    steps:  
+      - name: Checkout code
+        uses: actions/checkout@v6.0.1
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6.2.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Run format
+        run: npm run format
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:  
+      - name: Checkout code
+        uses: actions/checkout@v6.0.1
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6.2.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Run lint
+        run: npm run lint
+
+  security:
+    runs-on: ubuntu-latest
+
+    steps:  
+      - name: Checkout code
+        uses: actions/checkout@v6.0.1
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6.2.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Run security check
+        run: npm audit
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:  
+      - name: Checkout code
+        uses: actions/checkout@v6.0.1
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6.2.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test
+
+  teste2e:
+    runs-on: ubuntu-latest
+
+    steps:  
+      - name: Checkout code
+        uses: actions/checkout@v6.0.1
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6.2.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright
+        run: npm run test:e2e:install
+
+      - name: Run tests
+        run: npm run test:e2e
+
+  typecheck:
+    runs-on: ubuntu-latest
+
+    steps:  
+      - name: Checkout code
+        uses: actions/checkout@v6.0.1
+
+      - name: Use Node.js
+        uses: actions/setup-node@v6.2.0
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run type check
+        run: npm run typecheck

package/template/.gitignore

@@ -25,3 +25,10 @@ pnpm-debug.log*
 
 # output folder
 output/
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

package/template/.prettierignore

@@ -0,0 +1,11 @@
+.github/
+bun.lock
+deno.lock
+dist/
+node_modules/
+output/
+package-lock.json
+package.json
+patches/
+pnpm-lock.yaml
+yarn.lock