create-stencil-components 1.0.0

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/README.md

@@ -0,0 +1,97 @@
+# @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react
+
+## Overview
+
+React specific wrappers for the @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core package.
+
+## Tasks
+
+The following is a list of available command line tasks:
+
+| Task          | Description                                     |
+| ------------- | ----------------------------------------------- |
+| clean         | Deletes build outputs of the package.           |
+| build         | Builds the package.                             |
+| format        | Validates the form of the package.              |
+| format:fix    | Performs a format fix of the package.           |
+| lint          | Validates the code of the package.              |
+| lint:fix      | Performs a validation fix of the package.       |
+| test          | Performs a test run of the package.             |
+
+You can execute tasks within an [Nx](https://nx.dev) workspace using several methods. Here are the most common approaches:
+
+**From the `workspace` root:**
+
+Use the full package target path to run tasks:
+
+```sh
+npx nx run components-{{PROJECT_NAME_KEBAB}}-react:[task]
+npx nx run components-{{PROJECT_NAME_KEBAB}}-react:build
+```
+
+**From within the package directory:**
+
+Navigate to packages/components-{{PROJECT_NAME_KEBAB}}-react and run the task directly:
+
+```sh
+npx nx run [task]
+npx nx run build
+```
+
+## Folder Hierarchy
+
+The package structure is organized as follows:
+
+```text
+├── src/               # Source code
+│   ├── components/    # Directory for component exports and implementation entry
+│   │   └── generated/ # Directory for generated component outputs
+│   │   └── index.ts   # Barrel export for components
+│   └── index.ts       # Barrel export for components
+├── package.json       # Root configuration: workspaces, dependencies, and scripts
+├── project.json       # Project Nx build system configuration
+├── tsconfig.json      # TypeScript configuration
+├── CHANGELOG.md       # Changelog documentation
+└── README.md          # Package documentation
+```
+
+## Consumer Consumption
+
+### Prerequisite: Install Dependencies
+
+```sh
+npm install @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react
+```
+
+### Using Framework Wrappers
+
+**Local Registration**: Best for performance (tree-shaking). In your .tsx file:
+
+```tsx
+import { MyComponent } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react';
+
+function App() {
+  return <MyComponent first="Stencil" last="React" />;
+}
+```
+
+### Using Custom Elements Directly
+
+**Registration**: In main.tsx, import the loader to register all components with the browser's CustomElementRegistry.
+
+```tsx
+import { defineCustomElements } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core/loader';
+defineCustomElements(); // Registers all tags (e.g., <my-component>)
+```
+
+**Usage**: Once registered, you simply use the tag in your template without further imports.
+
+```tsx
+<my-component first="Stencil" last="React"></my-component>
+```
+
+### Which should you choose?
+
+**React Wrappers**: Best for large-scale apps, TypeScript users, and those using React versions prior to 19.
+
+**Direct Usage**: Best for simple integrations, lightweight projects, or if you are already using React 19+ which has improved custom element support.

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react",
+  "version": "0.0.0",
+  "description": "React specific wrappers for @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core",
+  "keywords": [
+    "react",
+    "stencil",
+    "stenciljs"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "clean": "rimraf --glob dist src/components/generated",
+    "build": "tsc",
+    "format": "prettier src/**/*.{ts,tsx} --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
+    "format:fix": "prettier src/**/*.{ts,tsx} --write --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
+    "lint:eslint": "eslint src --config ../../eslint.config.mjs",
+    "lint:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore",
+    "lint:fix:eslint": "eslint src --config ../../eslint.config.mjs --fix",
+    "lint:fix:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore --fix",
+    "test": "echo 'No tests specified' && exit 0"
+  },
+  "dependencies": {
+    "tslib": "2.8.1"
+  },
+  "peerDependencies": {
+    "@stencil/react-output-target": "1.2.0",
+    "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core": "*",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "25.0.3",
+    "@types/react": ">=18"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/project.json

@@ -0,0 +1,92 @@
+{
+  "name": "components-{{PROJECT_NAME_KEBAB}}-react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*"]
+  },
+  "targets": {
+    "clean": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "inputs": [
+        {
+          "externalDependencies": ["rimraf"]
+        }
+      ],
+      "options": {
+        "script": "clean",
+        "cwd": "{projectRoot}"
+      }
+    },
+    "build": {
+      "cache": false,
+      "dependsOn": [
+        {
+          "projects": ["components-{{PROJECT_NAME_KEBAB}}-core"],
+          "target": "build"
+        },
+        "^lint"
+      ],
+      "executor": "nx:run-script",
+      "inputs": [
+        "default",
+        {
+          "externalDependencies": ["typescript"]
+        }
+      ],
+      "options": {
+        "script": "build",
+        "cwd": "{projectRoot}"
+      },
+      "outputs": [
+        "{projectRoot}/dist",
+        "{projectRoot}/src/components/generated"
+      ]
+    },
+    "format": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "options": {
+        "script": "format",
+        "cwd": "{projectRoot}"
+      }
+    },
+    "format:fix": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "options": {
+        "script": "format:fix",
+        "cwd": "{projectRoot}"
+      }
+    },
+    "lint": {
+      "cache": false,
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run lint:eslint", "npm run lint:stylelint"],
+        "cwd": "{projectRoot}",
+        "parallel": true
+      }
+    },
+    "lint:fix": {
+      "cache": false,
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run lint:eslint:fix", "npm run lint:stylelint:fix"],
+        "cwd": "{projectRoot}",
+        "parallel": true
+      }
+    },
+    "test": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "inputs": [
+        "default"
+      ],
+      "options": {
+        "script": "test",
+        "cwd": "{projectRoot}"
+      }
+    }
+  }
+}

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/src/components/index.ts

@@ -0,0 +1 @@
+export * from './generated/components.js';

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/src/index.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/tsconfig.json

@@ -0,0 +1,36 @@
+{
+    "buildOnSave": false,
+    "compileOnSave": false,
+    "compilerOptions": {
+        "allowUnreachableCode": false,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "declarationDir": "./dist/types",
+        "esModuleInterop": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "jsx": "react",
+        "lib": [
+            "dom",
+            "es2022"
+        ],
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "outDir": "dist",
+        "removeComments": false,
+        "rootDir": "src",
+        "sourceMap": false,
+        "target": "es2022"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "dist",
+        "node_modules"
+    ]
+}

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/README.md

@@ -0,0 +1,78 @@
+# @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-vue
+
+## Overview
+
+Vue specific wrappers for the @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-vue package.
+
+## Tasks
+
+The following is a list of available command line tasks:
+
+| Task          | Description                                     |
+| ------------- | ----------------------------------------------- |
+| clean         | Deletes build outputs of the package.           |
+| build         | Builds the package.                             |
+| format        | Validates the form of the package.              |
+| format:fix    | Performs a format fix of the package.           |
+| lint          | Validates the code of the package.              |
+| lint:fix      | Performs a validation fix of the package.       |
+| test          | Performs a test run of the package.             |
+
+You can execute tasks within an [Nx](https://nx.dev) workspace using several methods. Here are the most common approaches:
+
+**From the `workspace` root:**
+
+Use the full package target path to run tasks:
+
+```sh
+npx nx run components-{{PROJECT_NAME_KEBAB}}-vue:[task]
+npx nx run components-{{PROJECT_NAME_KEBAB}}-vue:build
+```
+
+**From within the package directory:**
+
+Navigate to packages/components-{{PROJECT_NAME_KEBAB}}-vue and run the task directly:
+
+```sh
+npx nx run [task]
+npx nx run build
+```
+
+## Folder Hierarchy
+
+The package structure is organized as follows:
+
+```text
+├── src/               # Source code
+│   ├── components/    # Directory for component exports and implementation entry
+│   │   └── generated/ # Directory for generated component outputs
+│   │   └── index.ts   # Barrel export for components
+│   └── index.ts       # Barrel export for components
+├── package.json       # Root configuration: workspaces, dependencies, and scripts
+├── project.json       # Project Nx build system configuration
+├── tsconfig.json      # TypeScript configuration
+├── CHANGELOG.md       # Changelog documentation
+└── README.md          # Package documentation
+```
+
+## Consumer Consumption
+
+### Prerequisite: Install Dependencies
+
+```sh
+npm install @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-vue
+```
+
+### Using Framework Wrappers
+
+**Local Registration**: Best for performance (tree-shaking). In your .vue file:
+
+```ts
+<script>
+import { MyComponent } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-vue';
+</script>
+
+<template>
+  <MyComponent first="Stencil" last="Vue" />
+</template>
+```

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-vue",
+  "version": "0.0.0",
+  "description": "Vue specific wrappers for @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core",
+  "keywords": [
+    "stencil",
+    "stenciljs",
+    "vue"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "clean": "rimraf --glob dist src/components/generated",
+    "build": "tsc",
+    "format": "prettier src/**/*.{ts,tsx} --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
+    "format:fix": "prettier src/**/*.{ts,tsx} --write --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
+    "lint:eslint": "eslint src --config ../../eslint.config.mjs",
+    "lint:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore",
+    "lint:fix:eslint": "eslint src --config ../../eslint.config.mjs --fix",
+    "lint:fix:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore --fix",
+    "test": "echo 'No tests specified' && exit 0"
+  },
+  "dependencies": {
+    "tslib": "2.8.1"
+  },
+  "peerDependencies": {
+    "@stencil/vue-output-target": "0.11.8",
+    "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core": "*"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/project.json

@@ -0,0 +1,92 @@
+{
+  "name": "components-{{PROJECT_NAME_KEBAB}}-vue",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*"]
+  },
+  "targets": {
+    "clean": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "inputs": [
+        {
+          "externalDependencies": ["rimraf"]
+        }
+      ],
+      "options": {
+        "script": "clean",
+        "cwd": "{projectRoot}"
+      }
+    },
+    "build": {
+      "cache": false,
+      "dependsOn": [
+        {
+          "projects": ["components-{{PROJECT_NAME_KEBAB}}-core"],
+          "target": "build"
+        },
+        "^lint"
+      ],
+      "executor": "nx:run-script",
+      "inputs": [
+        "default",
+        {
+          "externalDependencies": ["typescript"]
+        }
+      ],
+      "options": {
+        "script": "build",
+        "cwd": "{projectRoot}"
+      },
+      "outputs": [
+        "{projectRoot}/dist",
+        "{projectRoot}/src/components/generated"
+      ]
+    },
+    "format": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "options": {
+        "script": "format",
+        "cwd": "{projectRoot}"
+      }
+    },
+    "format:fix": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "options": {
+        "script": "format:fix",
+        "cwd": "{projectRoot}"
+      }
+    },
+    "lint": {
+      "cache": false,
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run lint:eslint", "npm run lint:stylelint"],
+        "cwd": "{projectRoot}",
+        "parallel": true
+      }
+    },
+    "lint:fix": {
+      "cache": false,
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["npm run lint:eslint:fix", "npm run lint:stylelint:fix"],
+        "cwd": "{projectRoot}",
+        "parallel": true
+      }
+    },
+    "test": {
+      "cache": false,
+      "executor": "nx:run-script",
+      "inputs": [
+        "default"
+      ],
+      "options": {
+        "script": "test",
+        "cwd": "{projectRoot}"
+      }
+    }
+  }
+}

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/src/components/index.ts

@@ -0,0 +1 @@
+export * from './generated/components.js';

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/src/index.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/tsconfig.json

@@ -0,0 +1,39 @@
+{
+    "buildOnSave": false,
+    "compileOnSave": false,
+    "compilerOptions": {
+        "allowUnreachableCode": false,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "declarationDir": "./dist/types",
+        "esModuleInterop": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "jsx": "preserve",
+        "jsxImportSource": "vue",
+        "isolatedModules": true,
+        "lib": [
+            "dom",
+            "es2022"
+        ],
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "outDir": "dist",
+        "removeComments": false,
+        "rootDir": "src",
+        "skipLibCheck": true,
+        "sourceMap": false,
+        "target": "es2022"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "dist",
+        "node_modules"
+    ]
+}

package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/README.md

@@ -0,0 +1,108 @@
+# @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-angular
+
+## Overview
+
+Angular specific wrappers for the @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core package.
+
+## Tasks
+
+The following is a list of available command line tasks:
+
+| Task          | Description                                     |
+| ------------- | ----------------------------------------------- |
+| clean         | Deletes build outputs of the package.           |
+| build         | Builds the package.                             |
+| format        | Validates the form of the package.              |
+| format:fix    | Performs a format fix of the package.           |
+| lint          | Validates the code of the package.              |
+| lint:fix      | Performs a validation fix of the package.       |
+| test          | Performs a test run of the package.             |
+
+You can execute tasks within an [Nx](https://nx.dev) workspace using several methods. Here are the most common approaches:
+
+**From the `workspace` root:**
+
+Use the full package target path to run tasks:
+
+```sh
+npx nx run components-{{PROJECT_NAME_KEBAB}}-angular:[task]
+npx nx run components-{{PROJECT_NAME_KEBAB}}-angular:build
+```
+
+**From within the package directory:**
+
+Navigate to packages/components-{{PROJECT_NAME_KEBAB}}-angular and run the task directly:
+
+```sh
+npx nx run [task]
+npx nx run build
+```
+
+## Folder Hierarchy
+
+The package structure is organized as follows:
+
+```text
+├── src/            # Directory for lazy loaded component implementations
+├── standalone/     # Directory for standalone component implementations
+├── ng-package.json # Ng-packagr configuration
+├── package.json    # Root configuration: workspaces, dependencies, and scripts
+├── project.json    # Project Nx build system configuration
+├── tsconfig.json   # TypeScript configuration
+├── CHANGELOG.md    # Changelog documentation
+└── README.md       # Package documentation
+```
+
+## Consumer Consumption
+
+### Prerequisite: Install Dependencies
+
+```sh
+npm install @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-angular
+```
+
+### Using Framework Wrappers
+
+**Registration**: In the Angular library's main module (or main.ts for standalone apps), use the Stencil loader to register the components with the browser:
+
+```ts
+import { defineCustomElements } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core/loader';
+defineCustomElements();
+```
+
+**Usage**: In your Angular application, import the generated wrapper module or individual standalone components:
+
+```ts
+import { MyComponent } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-angular/standalone';;
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [MyComponent], // Use the wrapper component here
+  template: `<my-component [first]="'Stencil'" [last]="'Angular'"></my-component>`
+})
+export class AppComponent { ... }
+```
+
+### Using Custom Elements Directly
+
+**Registration**: In main.ts, import the loader to register all components with the browser's CustomElementRegistry.
+
+```ts
+import { defineCustomElements } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core/loader';
+defineCustomElements();
+```
+
+**Usage**: Angular will error on unknown tags. You must add CUSTOM_ELEMENTS_SCHEMA to any module or component that uses the Stencil tags.
+
+```tsx
+import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Tells Angular to ignore unknown tags
+  template: `<my-component [first]="'Stencil'" [last]="'Angular'"></my-component>`
+})
+export class AppComponent { }
+```

package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "src/index.ts"
+    }
+}