create-stencil-components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/LICENSE +21 -0
  2. package/LICENSE.md +21 -0
  3. package/README.md +55 -0
  4. package/dist/index.mjs +396 -0
  5. package/dist/index.mjs.map +1 -0
  6. package/dist/templates/base/.editorconfig +15 -0
  7. package/dist/templates/base/.eslintignore +4 -0
  8. package/dist/templates/base/.gemini/settings.json +13 -0
  9. package/dist/templates/base/.husky/commit-msg +1 -0
  10. package/dist/templates/base/.husky/install.mjs +6 -0
  11. package/dist/templates/base/.husky/pre-commit +2 -0
  12. package/dist/templates/base/.mcp.json +12 -0
  13. package/dist/templates/base/.nvmrc +1 -0
  14. package/dist/templates/base/.prettierignore +2 -0
  15. package/dist/templates/base/.stylelintignore +0 -0
  16. package/dist/templates/base/AGENTS.md +118 -0
  17. package/dist/templates/base/CLAUDE.md +16 -0
  18. package/dist/templates/base/README.md +83 -0
  19. package/dist/templates/base/commitlint.config.mjs +1 -0
  20. package/dist/templates/base/docs/CODE_OF_CONDUCT.md +122 -0
  21. package/dist/templates/base/docs/CONTRIBUTING.md +103 -0
  22. package/dist/templates/base/docs/LICENSE.md +21 -0
  23. package/dist/templates/base/docs/RELEASE.md +95 -0
  24. package/dist/templates/base/docs/STYLE_GUIDE.md +128 -0
  25. package/dist/templates/base/eslint.config.mjs +37 -0
  26. package/dist/templates/base/gitignore +32 -0
  27. package/dist/templates/base/nx.json +36 -0
  28. package/dist/templates/base/package.json +43 -0
  29. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/CHANGELOG.md +0 -0
  30. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/README.md +74 -0
  31. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/project.json +144 -0
  32. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/components/my-component/my-component.scss +3 -0
  33. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/components/my-component/my-component.tsx +32 -0
  34. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/components/my-component/readme.md +19 -0
  35. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/components/my-component/test/my-component.e2e.ts +32 -0
  36. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/components/my-component/test/my-component.spec.ts +36 -0
  37. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/components.d.ts +61 -0
  38. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/index.html +14 -0
  39. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/index.ts +12 -0
  40. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/main.scss +0 -0
  41. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/utils/utils.spec.ts +19 -0
  42. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/src/utils/utils.ts +3 -0
  43. package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/tsconfig.json +12 -0
  44. package/dist/templates/base/prettier.config.mjs +19 -0
  45. package/dist/templates/base/stylelint.config.mjs +25 -0
  46. package/dist/templates/base/tsconfig.base.json +23 -0
  47. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/CHANGELOG.md +0 -0
  48. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/README.md +108 -0
  49. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/ng-package.json +6 -0
  50. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/package.json +27 -0
  51. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/project.json +93 -0
  52. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/src/components-{{PROJECT_NAME_KEBAB}}.module.ts +20 -0
  53. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/src/directives/.gitkeep +0 -0
  54. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/src/index.ts +3 -0
  55. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/standalone/ng-package.json +6 -0
  56. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/standalone/src/directives/.gitkeep +0 -0
  57. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/standalone/src/index.ts +1 -0
  58. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-angular/tsconfig.json +41 -0
  59. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +85 -0
  60. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-core/stencil.config.ts +90 -0
  61. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/CHANGELOG.md +0 -0
  62. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/README.md +97 -0
  63. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/package.json +48 -0
  64. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/project.json +92 -0
  65. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/src/components/index.ts +1 -0
  66. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/src/index.ts +1 -0
  67. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-react/tsconfig.json +36 -0
  68. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/CHANGELOG.md +0 -0
  69. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/README.md +78 -0
  70. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/package.json +43 -0
  71. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/project.json +92 -0
  72. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/src/components/index.ts +1 -0
  73. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/src/index.ts +1 -0
  74. package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/tsconfig.json +39 -0
  75. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/CHANGELOG.md +0 -0
  76. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/README.md +108 -0
  77. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/ng-package.json +6 -0
  78. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/package.json +27 -0
  79. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/project.json +93 -0
  80. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/src/components-{{PROJECT_NAME_KEBAB}}.module.ts +20 -0
  81. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/src/directives/.gitkeep +0 -0
  82. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/src/index.ts +3 -0
  83. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/standalone/ng-package.json +6 -0
  84. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/standalone/src/directives/.gitkeep +0 -0
  85. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/standalone/src/index.ts +1 -0
  86. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-angular/tsconfig.json +41 -0
  87. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +83 -0
  88. package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-core/stencil.config.ts +72 -0
  89. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +83 -0
  90. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-core/stencil.config.ts +67 -0
  91. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/CHANGELOG.md +0 -0
  92. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/README.md +97 -0
  93. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/package.json +48 -0
  94. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/project.json +92 -0
  95. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/src/components/index.ts +1 -0
  96. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/src/index.ts +1 -0
  97. package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-react/tsconfig.json +36 -0
  98. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +83 -0
  99. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-core/stencil.config.ts +67 -0
  100. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/CHANGELOG.md +0 -0
  101. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/README.md +78 -0
  102. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/package.json +43 -0
  103. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/project.json +92 -0
  104. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/src/components/index.ts +1 -0
  105. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/src/index.ts +1 -0
  106. package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/tsconfig.json +39 -0
  107. package/dist/templates/variants/web-components/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +82 -0
  108. package/dist/templates/variants/web-components/packages/components-{{PROJECT_NAME_KEBAB}}-core/stencil.config.ts +58 -0
  109. package/package.json +60 -0
@@ -0,0 +1,27 @@
1
+ {
2
+ "name": "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-angular",
3
+ "version": "0.0.0",
4
+ "description": "Angular specific wrappers for @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core",
5
+ "keywords": [
6
+ "angular",
7
+ "stencil",
8
+ "stenciljs"
9
+ ],
10
+ "scripts": {
11
+ "clean": "rimraf --glob dist src/directives/generated standalone/src/directives/generated",
12
+ "build": "ng-packagr -p ng-package.json -c tsconfig.json"
13
+ },
14
+ "dependencies": {
15
+ "tslib": "2.8.1"
16
+ },
17
+ "peerDependencies": {
18
+ "@angular/common": ">=19",
19
+ "@angular/core": ">=19",
20
+ "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core": "*",
21
+ "rxjs": ">=7.8.2"
22
+ },
23
+ "devDependencies": {
24
+ "ng-packagr": "21.0.1"
25
+ },
26
+ "license": "MIT"
27
+ }
@@ -0,0 +1,93 @@
1
+ {
2
+ "name": "components-{{PROJECT_NAME_KEBAB}}-angular",
3
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
4
+ "namedInputs": {
5
+ "default": ["{projectRoot}/**/*"]
6
+ },
7
+ "targets": {
8
+ "clean": {
9
+ "cache": false,
10
+ "executor": "nx:run-script",
11
+ "inputs": [
12
+ {
13
+ "externalDependencies": ["rimraf"]
14
+ }
15
+ ],
16
+ "options": {
17
+ "script": "clean",
18
+ "cwd": "{projectRoot}"
19
+ }
20
+ },
21
+ "build": {
22
+ "cache": false,
23
+ "dependsOn": [
24
+ {
25
+ "projects": ["components-{{PROJECT_NAME_KEBAB}}-core"],
26
+ "target": "build"
27
+ },
28
+ "^lint"
29
+ ],
30
+ "executor": "nx:run-script",
31
+ "inputs": [
32
+ "default",
33
+ {
34
+ "externalDependencies": ["ng-packagr"]
35
+ }
36
+ ],
37
+ "options": {
38
+ "script": "build",
39
+ "cwd": "{projectRoot}"
40
+ },
41
+ "outputs": [
42
+ "{projectRoot}/dist",
43
+ "{projectRoot}/src/directives/generated",
44
+ "{projectRoot}/standalone/src/directives/generated"
45
+ ]
46
+ },
47
+ "format": {
48
+ "cache": false,
49
+ "executor": "nx:run-script",
50
+ "options": {
51
+ "script": "format",
52
+ "cwd": "{projectRoot}"
53
+ }
54
+ },
55
+ "format:fix": {
56
+ "cache": false,
57
+ "executor": "nx:run-script",
58
+ "options": {
59
+ "script": "format:fix",
60
+ "cwd": "{projectRoot}"
61
+ }
62
+ },
63
+ "lint": {
64
+ "cache": false,
65
+ "executor": "nx:run-commands",
66
+ "options": {
67
+ "commands": ["npm run lint:eslint", "npm run lint:stylelint"],
68
+ "cwd": "{projectRoot}",
69
+ "parallel": true
70
+ }
71
+ },
72
+ "lint:fix": {
73
+ "cache": false,
74
+ "executor": "nx:run-commands",
75
+ "options": {
76
+ "commands": ["npm run lint:eslint:fix", "npm run lint:stylelint:fix"],
77
+ "cwd": "{projectRoot}",
78
+ "parallel": true
79
+ }
80
+ },
81
+ "test": {
82
+ "cache": false,
83
+ "executor": "nx:run-script",
84
+ "inputs": [
85
+ "default"
86
+ ],
87
+ "options": {
88
+ "script": "test",
89
+ "cwd": "{projectRoot}"
90
+ }
91
+ }
92
+ }
93
+ }
@@ -0,0 +1,20 @@
1
+ import { APP_INITIALIZER, NgModule } from '@angular/core';
2
+
3
+ import { CommonModule } from '@angular/common';
4
+ import { DIRECTIVES } from './directives/generated';
5
+ import { defineCustomElements } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core/loader';
6
+
7
+ @NgModule({
8
+ declarations: [...DIRECTIVES],
9
+ exports: [...DIRECTIVES],
10
+ imports: [CommonModule],
11
+ providers: [
12
+ {
13
+ provide: APP_INITIALIZER,
14
+ useFactory: () => defineCustomElements,
15
+ multi: true,
16
+ }
17
+ ],
18
+ })
19
+
20
+ export class Components{{PROJECT_NAME_PASCAL}}Module {}
@@ -0,0 +1,3 @@
1
+ export * from './directives/generated/components';
2
+ export { DIRECTIVES } from './directives/generated';
3
+ export * from './components-{{PROJECT_NAME_KEBAB}}.module';
@@ -0,0 +1,6 @@
1
+ {
2
+ "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
3
+ "lib": {
4
+ "entryFile": "src/index.ts"
5
+ }
6
+ }
@@ -0,0 +1 @@
1
+ export * from './directives/generated/components';
@@ -0,0 +1,41 @@
1
+ {
2
+ "angularCompilerOptions": {
3
+ "compilationMode": "partial",
4
+ "enableI18nLegacyMessageId": false,
5
+ "strictInjectionParameters": true,
6
+ "strictInputAccessModifiers": true,
7
+ "strictTemplates": true
8
+ },
9
+ "buildOnSave": false,
10
+ "compileOnSave": false,
11
+ "compilerOptions": {
12
+ "declaration": true,
13
+ "declarationDir": "./dist/types",
14
+ "esModuleInterop": true,
15
+ "experimentalDecorators": true,
16
+ "importHelpers": true,
17
+ "lib": [
18
+ "dom",
19
+ "es2022"
20
+ ],
21
+ "module": "esnext",
22
+ "moduleResolution": "bundler",
23
+ "noFallthroughCasesInSwitch": true,
24
+ "noImplicitOverride": true,
25
+ "noImplicitReturns": true,
26
+ "noPropertyAccessFromIndexSignature": true,
27
+ "outDir": "dist",
28
+ "skipLibCheck": true,
29
+ "strict": true,
30
+ "sourceMap": false,
31
+ "target": "es2022"
32
+ },
33
+ "files": [
34
+ "src/index.ts",
35
+ "standalone/src/index.ts"
36
+ ],
37
+ "exclude": [
38
+ "dist",
39
+ "node_modules"
40
+ ]
41
+ }
@@ -0,0 +1,83 @@
1
+ {
2
+ "name": "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core",
3
+ "version": "0.0.0",
4
+ "description": "Base set of atoms and modules for {{PROJECT_NAME_KEBAB}}",
5
+ "keywords": [
6
+ "components",
7
+ "stencil",
8
+ "stenciljs",
9
+ "web components"
10
+ ],
11
+ "main": "dist/index.cjs.js",
12
+ "module": "dist/index.js",
13
+ "es2015": "dist/esm/index.js",
14
+ "es2017": "dist/esm/index.js",
15
+ "types": "dist/types/index.d.ts",
16
+ "collection": "dist/collection/collection-manifest.json",
17
+ "collection:main": "dist/collection/index.js",
18
+ "unpkg": "dist/components-{{PROJECT_NAME_KEBAB}}-core/components-{{PROJECT_NAME_KEBAB}}-core.esm.js",
19
+ "exports": {
20
+ ".": {
21
+ "default": "./dist/index.mjs",
22
+ "import": "./dist/index.mjs",
23
+ "require": "./dist/index.cjs.js",
24
+ "types": "./dist/types/index.d.ts"
25
+ },
26
+ "./components/*.js": {
27
+ "import": "./dist/components/*.js",
28
+ "types": "./dist/types/components/*.d.ts"
29
+ },
30
+ "./components": {
31
+ "default": "./dist/index.js",
32
+ "import": "./dist/index.js",
33
+ "require": "./dist/index.cjs.js",
34
+ "types": "./dist/types/components.d.ts"
35
+ },
36
+ "./hydrate": {
37
+ "default": "./dist/hydrate/index.mjs",
38
+ "import": "./dist/hydrate/index.mjs",
39
+ "require": "./dist/hydrate/index.js",
40
+ "types": "./dist/hydrate/index.d.ts"
41
+ },
42
+ "./loader": {
43
+ "default": "./dist/loader/index.js",
44
+ "import": "./dist/loader/index.js",
45
+ "require": "./dist/loader/index.cjs",
46
+ "types": "./dist/loader/index.d.ts"
47
+ }
48
+ },
49
+ "files": [
50
+ "dist/"
51
+ ],
52
+ "scripts": {
53
+ "clean": "rimraf --glob coverage dist .stencil",
54
+ "build": "stencil build --ci",
55
+ "format": "prettier src/**/*.{ts,tsx} --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
56
+ "format:fix": "prettier src/**/*.{ts,tsx} --write --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
57
+ "generate": "stencil generate",
58
+ "lint:eslint": "eslint src --config ../../eslint.config.mjs",
59
+ "lint:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore",
60
+ "lint:fix:eslint": "eslint src --config ../../eslint.config.mjs --fix",
61
+ "lint:fix:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore --fix",
62
+ "server:dev": "stencil build --dev --watch --serve --no-open --ci",
63
+ "test": "stencil test --spec --coverage --no-cache",
64
+ "test:e2e": "stencil test --e2e",
65
+ "test:watch": "stencil test --spec --e2e --watchAll"
66
+ },
67
+ "dependencies": {
68
+ "tslib": "2.8.1"
69
+ },
70
+ "devDependencies": {
71
+ "@stencil/angular-output-target": "1.1.1",
72
+ "@stencil/core": "4.40.1",
73
+ "@stencil/sass": "3.2.3",
74
+ "@types/jest": "29.5.14",
75
+ "@types/node": "25.0.3",
76
+ "jest": "29.7.0",
77
+ "jest-cli": "29.7.0",
78
+ "puppeteer": "24.33.1",
79
+ "sass": "1.97.0",
80
+ "stencil-inline-svg": "1.1.0"
81
+ },
82
+ "license": "MIT"
83
+ }
@@ -0,0 +1,72 @@
1
+ import { angularOutputTarget } from '@stencil/angular-output-target';
2
+ import { Config } from '@stencil/core';
3
+ import { sass } from '@stencil/sass';
4
+ import { inlineSvg } from 'stencil-inline-svg';
5
+
6
+ const dev = process.argv.includes('--dev');
7
+
8
+ export const config: Config = {
9
+ namespace: 'components-{{PROJECT_NAME_KEBAB}}-core',
10
+ autoprefixCss: false,
11
+ buildEs5: 'prod',
12
+ devServer: {
13
+ port: 3333,
14
+ reloadStrategy: 'pageReload'
15
+ },
16
+ extras: {
17
+ enableImportInjection: true
18
+ },
19
+ globalStyle: 'src/main.scss',
20
+ hashFileNames: !dev,
21
+ hydratedFlag: {
22
+ selector: 'attribute'
23
+ },
24
+ outputTargets: [
25
+ angularOutputTarget({
26
+ componentCorePackage: '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core',
27
+ directivesProxyFile: '../components-{{PROJECT_NAME_KEBAB}}-angular/src/directives/generated/components.ts',
28
+ directivesArrayFile: '../components-{{PROJECT_NAME_KEBAB}}-angular/src/directives/generated/index.ts',
29
+ outputType: 'component'
30
+ }),
31
+ angularOutputTarget({
32
+ componentCorePackage: '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core',
33
+ customElementsDir: 'components', // match what is being exported in the package.json vs setting it to 'dist/components'
34
+ directivesProxyFile: '../components-{{PROJECT_NAME_KEBAB}}-angular/standalone/src/directives/generated/components.ts',
35
+ directivesArrayFile: '../components-{{PROJECT_NAME_KEBAB}}-angular/standalone/src/directives/generated/index.ts',
36
+ outputType: 'standalone'
37
+ }),
38
+ {
39
+ type: 'dist'
40
+ },
41
+ {
42
+ type: 'dist-custom-elements',
43
+ dir: 'dist/components',
44
+ customElementsExportBehavior: 'single-export-module',
45
+ externalRuntime: false,
46
+ generateTypeDeclarations: false
47
+ },
48
+ {
49
+ type: 'dist-hydrate-script',
50
+ dir: 'dist/hydrate'
51
+ },
52
+ {
53
+ type: 'docs-readme',
54
+ },
55
+ {
56
+ type: 'docs-vscode',
57
+ file: 'dist/docs/components-{{PROJECT_NAME_KEBAB}}-core-vscode.json'
58
+ },
59
+ {
60
+ type: 'www',
61
+ dir: 'dist/www',
62
+ serviceWorker: null
63
+ },
64
+ ],
65
+ plugins: [
66
+ inlineSvg(),
67
+ sass()
68
+ ],
69
+ testing: {
70
+ browserHeadless: "shell",
71
+ },
72
+ };
@@ -0,0 +1,83 @@
1
+ {
2
+ "name": "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core",
3
+ "version": "0.0.0",
4
+ "description": "Base set of atoms and modules for {{PROJECT_NAME_KEBAB}}",
5
+ "keywords": [
6
+ "components",
7
+ "stencil",
8
+ "stenciljs",
9
+ "web components"
10
+ ],
11
+ "main": "dist/index.cjs.js",
12
+ "module": "dist/index.js",
13
+ "es2015": "dist/esm/index.js",
14
+ "es2017": "dist/esm/index.js",
15
+ "types": "dist/types/index.d.ts",
16
+ "collection": "dist/collection/collection-manifest.json",
17
+ "collection:main": "dist/collection/index.js",
18
+ "unpkg": "dist/components-{{PROJECT_NAME_KEBAB}}-core/components-{{PROJECT_NAME_KEBAB}}-core.esm.js",
19
+ "exports": {
20
+ ".": {
21
+ "default": "./dist/index.mjs",
22
+ "import": "./dist/index.mjs",
23
+ "require": "./dist/index.cjs.js",
24
+ "types": "./dist/types/index.d.ts"
25
+ },
26
+ "./components/*.js": {
27
+ "import": "./dist/components/*.js",
28
+ "types": "./dist/types/components/*.d.ts"
29
+ },
30
+ "./components": {
31
+ "default": "./dist/index.js",
32
+ "import": "./dist/index.js",
33
+ "require": "./dist/index.cjs.js",
34
+ "types": "./dist/types/components.d.ts"
35
+ },
36
+ "./hydrate": {
37
+ "default": "./dist/hydrate/index.mjs",
38
+ "import": "./dist/hydrate/index.mjs",
39
+ "require": "./dist/hydrate/index.js",
40
+ "types": "./dist/hydrate/index.d.ts"
41
+ },
42
+ "./loader": {
43
+ "default": "./dist/loader/index.js",
44
+ "import": "./dist/loader/index.js",
45
+ "require": "./dist/loader/index.cjs",
46
+ "types": "./dist/loader/index.d.ts"
47
+ }
48
+ },
49
+ "files": [
50
+ "dist/"
51
+ ],
52
+ "scripts": {
53
+ "clean": "rimraf --glob coverage dist .stencil",
54
+ "build": "stencil build --ci",
55
+ "format": "prettier src/**/*.{ts,tsx} --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
56
+ "format:fix": "prettier src/**/*.{ts,tsx} --write --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
57
+ "generate": "stencil generate",
58
+ "lint:eslint": "eslint src --config ../../eslint.config.mjs",
59
+ "lint:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore",
60
+ "lint:fix:eslint": "eslint src --config ../../eslint.config.mjs --fix",
61
+ "lint:fix:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore --fix",
62
+ "server:dev": "stencil build --dev --watch --serve --no-open --ci",
63
+ "test": "stencil test --spec --coverage --no-cache",
64
+ "test:e2e": "stencil test --e2e",
65
+ "test:watch": "stencil test --spec --e2e --watchAll"
66
+ },
67
+ "dependencies": {
68
+ "tslib": "2.8.1"
69
+ },
70
+ "devDependencies": {
71
+ "@stencil/core": "4.40.1",
72
+ "@stencil/react-output-target": "1.2.0",
73
+ "@stencil/sass": "3.2.3",
74
+ "@types/jest": "29.5.14",
75
+ "@types/node": "25.0.3",
76
+ "jest": "29.7.0",
77
+ "jest-cli": "29.7.0",
78
+ "puppeteer": "24.33.1",
79
+ "sass": "1.97.0",
80
+ "stencil-inline-svg": "1.1.0"
81
+ },
82
+ "license": "MIT"
83
+ }
@@ -0,0 +1,67 @@
1
+ import { Config } from '@stencil/core';
2
+ import { reactOutputTarget } from '@stencil/react-output-target';
3
+ import { sass } from '@stencil/sass';
4
+ import { inlineSvg } from 'stencil-inline-svg';
5
+
6
+ const dev = process.argv.includes('--dev');
7
+
8
+ export const config: Config = {
9
+ namespace: 'components-{{PROJECT_NAME_KEBAB}}-core',
10
+ autoprefixCss: false,
11
+ buildEs5: 'prod',
12
+ devServer: {
13
+ port: 3333,
14
+ reloadStrategy: 'pageReload'
15
+ },
16
+ extras: {
17
+ enableImportInjection: true
18
+ },
19
+ globalStyle: 'src/main.scss',
20
+ hashFileNames: !dev,
21
+ hydratedFlag: {
22
+ selector: 'attribute'
23
+ },
24
+ outputTargets: [
25
+ reactOutputTarget({
26
+ clientModule: '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react',
27
+ customElementsDir: 'components', // match what is being exported in the package.json vs setting it to 'dist/components'
28
+ esModules: true,
29
+ hydrateModule: '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core/hydrate',
30
+ outDir: '../components-{{PROJECT_NAME_KEBAB}}-react/src/components/generated',
31
+ stencilPackageName: '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core'
32
+ }),
33
+ {
34
+ type: 'dist'
35
+ },
36
+ {
37
+ type: 'dist-custom-elements',
38
+ dir: 'dist/components',
39
+ customElementsExportBehavior: 'single-export-module',
40
+ externalRuntime: false,
41
+ generateTypeDeclarations: false
42
+ },
43
+ {
44
+ type: 'dist-hydrate-script',
45
+ dir: 'dist/hydrate'
46
+ },
47
+ {
48
+ type: 'docs-readme',
49
+ },
50
+ {
51
+ type: 'docs-vscode',
52
+ file: 'dist/docs/components-{{PROJECT_NAME_KEBAB}}-core-vscode.json'
53
+ },
54
+ {
55
+ type: 'www',
56
+ dir: 'dist/www',
57
+ serviceWorker: null
58
+ },
59
+ ],
60
+ plugins: [
61
+ inlineSvg(),
62
+ sass()
63
+ ],
64
+ testing: {
65
+ browserHeadless: "shell",
66
+ },
67
+ };
@@ -0,0 +1,97 @@
1
+ # @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react
2
+
3
+ ## Overview
4
+
5
+ React specific wrappers for the @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core package.
6
+
7
+ ## Tasks
8
+
9
+ The following is a list of available command line tasks:
10
+
11
+ | Task | Description |
12
+ | ------------- | ----------------------------------------------- |
13
+ | clean | Deletes build outputs of the package. |
14
+ | build | Builds the package. |
15
+ | format | Validates the form of the package. |
16
+ | format:fix | Performs a format fix of the package. |
17
+ | lint | Validates the code of the package. |
18
+ | lint:fix | Performs a validation fix of the package. |
19
+ | test | Performs a test run of the package. |
20
+
21
+ You can execute tasks within an [Nx](https://nx.dev) workspace using several methods. Here are the most common approaches:
22
+
23
+ **From the `workspace` root:**
24
+
25
+ Use the full package target path to run tasks:
26
+
27
+ ```sh
28
+ npx nx run components-{{PROJECT_NAME_KEBAB}}-react:[task]
29
+ npx nx run components-{{PROJECT_NAME_KEBAB}}-react:build
30
+ ```
31
+
32
+ **From within the package directory:**
33
+
34
+ Navigate to packages/components-{{PROJECT_NAME_KEBAB}}-react and run the task directly:
35
+
36
+ ```sh
37
+ npx nx run [task]
38
+ npx nx run build
39
+ ```
40
+
41
+ ## Folder Hierarchy
42
+
43
+ The package structure is organized as follows:
44
+
45
+ ```text
46
+ ├── src/ # Source code
47
+ │ ├── components/ # Directory for component exports and implementation entry
48
+ │ │ └── generated/ # Directory for generated component outputs
49
+ │ │ └── index.ts # Barrel export for components
50
+ │ └── index.ts # Barrel export for components
51
+ ├── package.json # Root configuration: workspaces, dependencies, and scripts
52
+ ├── project.json # Project Nx build system configuration
53
+ ├── tsconfig.json # TypeScript configuration
54
+ ├── CHANGELOG.md # Changelog documentation
55
+ └── README.md # Package documentation
56
+ ```
57
+
58
+ ## Consumer Consumption
59
+
60
+ ### Prerequisite: Install Dependencies
61
+
62
+ ```sh
63
+ npm install @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react
64
+ ```
65
+
66
+ ### Using Framework Wrappers
67
+
68
+ **Local Registration**: Best for performance (tree-shaking). In your .tsx file:
69
+
70
+ ```tsx
71
+ import { MyComponent } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react';
72
+
73
+ function App() {
74
+ return <MyComponent first="Stencil" last="React" />;
75
+ }
76
+ ```
77
+
78
+ ### Using Custom Elements Directly
79
+
80
+ **Registration**: In main.tsx, import the loader to register all components with the browser's CustomElementRegistry.
81
+
82
+ ```tsx
83
+ import { defineCustomElements } from '@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core/loader';
84
+ defineCustomElements(); // Registers all tags (e.g., <my-component>)
85
+ ```
86
+
87
+ **Usage**: Once registered, you simply use the tag in your template without further imports.
88
+
89
+ ```tsx
90
+ <my-component first="Stencil" last="React"></my-component>
91
+ ```
92
+
93
+ ### Which should you choose?
94
+
95
+ **React Wrappers**: Best for large-scale apps, TypeScript users, and those using React versions prior to 19.
96
+
97
+ **Direct Usage**: Best for simple integrations, lightweight projects, or if you are already using React 19+ which has improved custom element support.
@@ -0,0 +1,48 @@
1
+ {
2
+ "name": "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-react",
3
+ "version": "0.0.0",
4
+ "description": "React specific wrappers for @{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core",
5
+ "keywords": [
6
+ "react",
7
+ "stencil",
8
+ "stenciljs"
9
+ ],
10
+ "main": "dist/index.js",
11
+ "module": "dist/index.js",
12
+ "types": "dist/types/index.d.ts",
13
+ "exports": {
14
+ ".": {
15
+ "types": "./dist/types/index.d.ts",
16
+ "default": "./dist/index.js",
17
+ "import": "./dist/index.js"
18
+ }
19
+ },
20
+ "files": [
21
+ "dist/"
22
+ ],
23
+ "scripts": {
24
+ "clean": "rimraf --glob dist src/components/generated",
25
+ "build": "tsc",
26
+ "format": "prettier src/**/*.{ts,tsx} --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
27
+ "format:fix": "prettier src/**/*.{ts,tsx} --write --check --config ../../prettier.config.mjs --ignore-path ../../.prettierignore",
28
+ "lint:eslint": "eslint src --config ../../eslint.config.mjs",
29
+ "lint:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore",
30
+ "lint:fix:eslint": "eslint src --config ../../eslint.config.mjs --fix",
31
+ "lint:fix:stylelint": "stylelint src/**/*.{css,scss} --config ../../stylelint.config.mjs --ignore-path ../../.stylelintignore --fix",
32
+ "test": "echo 'No tests specified' && exit 0"
33
+ },
34
+ "dependencies": {
35
+ "tslib": "2.8.1"
36
+ },
37
+ "peerDependencies": {
38
+ "@stencil/react-output-target": "1.2.0",
39
+ "@{{ORGANIZATION_NAME}}/components-{{PROJECT_NAME_KEBAB}}-core": "*",
40
+ "react": ">=18"
41
+ },
42
+ "devDependencies": {
43
+ "@types/node": "25.0.3",
44
+ "@types/react": ">=18"
45
+ },
46
+ "license": "MIT",
47
+ "sideEffects": false
48
+ }