create-stencil-components 1.0.2 → 1.0.4
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.
- package/dist/templates/base/CLAUDE.md +1 -1
- package/dist/templates/base/README.md +83 -83
- package/dist/templates/base/package.json +3 -3
- package/dist/templates/base/packages/components-{{PROJECT_NAME_KEBAB}}-core/README.md +1 -1
- package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +6 -6
- package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-vue/README.md +1 -1
- package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +6 -6
- package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +6 -6
- package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +6 -6
- package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-vue/README.md +1 -1
- package/dist/templates/variants/web-components/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json +6 -6
- package/package.json +5 -5
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
# @{{ORGANIZATION_NAME}}/{{PROJECT_NAME_KEBAB}}
|
|
2
|
-
|
|
3
|
-
## Overview
|
|
4
|
-
|
|
5
|
-
Build modern, lightning-fast web applications for any platform using a single codebase. This toolkit utilizes [web components](https://www.webcomponents.org/introduction) to ensure premium quality and streamlined development.
|
|
6
|
-
|
|
7
|
-
Stencil is a specialized compiler designed to generate standards-compliant Web Components (Custom Elements) compatible with any browser. By integrating premium features from modern frontend frameworks—including TypeScript, JSX, a virtual DOM, and reactive one-way data binding—into a compile-time engine, Stencil produces high-performance components. These components are framework-agnostic, allowing them to integrate seamlessly with any existing stack or operate as standalone elements.
|
|
8
|
-
|
|
9
|
-
**Core Tech Stack:**
|
|
10
|
-
|
|
11
|
-
- **Stencil**: The underlying Web Component compiler.
|
|
12
|
-
- **TypeScript**: Ensures type safety and robust development.
|
|
13
|
-
- **Nx**: Manages the build system and monorepo architecture.
|
|
14
|
-
- **Sass**: Handles advanced, scalable CSS styling.
|
|
15
|
-
- **Eslint & Stylelint**: Maintain code quality through static analysis for scripts and styles.
|
|
16
|
-
- **Prettier**: Enforces consistent code formatting across the project.
|
|
17
|
-
|
|
18
|
-
## Build / Setup
|
|
19
|
-
|
|
20
|
-
Follow these steps to set up and run the project locally.
|
|
21
|
-
|
|
22
|
-
### Prerequisites
|
|
23
|
-
|
|
24
|
-
- **Volta:** The workspace uses [volta](https://volta.sh) to manage its npm and Node versions. [Install it](https://docs.volta.sh/guide/getting-started) before proceeding.
|
|
25
|
-
- There's no need to install a specific version of npm or Node right now, it shall be done automatically for you.
|
|
26
|
-
- **IDE:** We recommend [VS Code](https://code.visualstudio.com/) with the [Stencil Tools](https://marketplace.visualstudio.com/items?itemName=ionic.stencil-helper) extension.
|
|
27
|
-
|
|
28
|
-
### Installation & Running
|
|
29
|
-
|
|
30
|
-
1. **Install dependencies:**
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
npm install
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
2. **Build for production:**
|
|
37
|
-
|
|
38
|
-
```bash
|
|
39
|
-
npx nx run-many -t build
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
3. **Run unit tests:**
|
|
43
|
-
|
|
44
|
-
```bash
|
|
45
|
-
npx nx run-many -t test
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## Folder Hierarchy
|
|
49
|
-
|
|
50
|
-
The repository structure is organized as follows:
|
|
51
|
-
|
|
52
|
-
```text
|
|
53
|
-
├── .eslintignore/ # ESLint ignore rules
|
|
54
|
-
├── .gitignore # Git ignore rules
|
|
55
|
-
├── .husky/ # Git hooks configuration
|
|
56
|
-
├── .mcp.json # MCP configuration
|
|
57
|
-
├── .nvmrc # NVM configuration
|
|
58
|
-
├── .prettierignore # Prettier ignore rules
|
|
59
|
-
├── .stylelintignore # Stylelint ignore rules
|
|
60
|
-
├── docs/ # Documentation files
|
|
61
|
-
│ ├── CONTRIBUTING.md # Contributing guidelines
|
|
62
|
-
│ ├── CODE_OF_CONDUCT.md # Contributor Code of Conduct
|
|
63
|
-
| ├── LICENSE.md # License file
|
|
64
|
-
│ └── STYLE_GUIDE.md # Stencil Style Guide
|
|
65
|
-
├── packages/ # Directory for npm workspaces
|
|
66
|
-
│ └── [package-name]/ # Individual Stencil component library
|
|
67
|
-
├── AGENTS.md # AI context and guidelines for Nx
|
|
68
|
-
├── CLAUDE.md # AI context and guidelines for Nx
|
|
69
|
-
├── commitlint.config.mjs # Commitlint configuration
|
|
70
|
-
├── eslint.config.mjs # ESLint configuration
|
|
71
|
-
├── nx.json # Nx build system configuration
|
|
72
|
-
├── package-lock.json # NPM lock file
|
|
73
|
-
├── package.json # Root configuration: workspaces, dependencies, and scripts
|
|
74
|
-
├── prettier.config.mjs # Prettier configuration
|
|
75
|
-
├── stylelint.config.mjs # Stylelint configuration
|
|
76
|
-
├── tsconfig.base.json # Base TypeScript configuration
|
|
77
|
-
└── README.md # Project documentation
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
## Contributing
|
|
81
|
-
|
|
82
|
-
Thanks for your interest in contributing!
|
|
83
|
-
Please take a moment to read up on our guidelines for [contributing](/docs/CONTRIBUTING.md). Please note that this project is released with a [Contributor Code of Conduct](/docs/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
|
|
1
|
+
# @{{ORGANIZATION_NAME}}/{{PROJECT_NAME_KEBAB}}
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
Build modern, lightning-fast web applications for any platform using a single codebase. This toolkit utilizes [web components](https://www.webcomponents.org/introduction) to ensure premium quality and streamlined development.
|
|
6
|
+
|
|
7
|
+
Stencil is a specialized compiler designed to generate standards-compliant Web Components (Custom Elements) compatible with any browser. By integrating premium features from modern frontend frameworks—including TypeScript, JSX, a virtual DOM, and reactive one-way data binding—into a compile-time engine, Stencil produces high-performance components. These components are framework-agnostic, allowing them to integrate seamlessly with any existing stack or operate as standalone elements.
|
|
8
|
+
|
|
9
|
+
**Core Tech Stack:**
|
|
10
|
+
|
|
11
|
+
- **Stencil**: The underlying Web Component compiler.
|
|
12
|
+
- **TypeScript**: Ensures type safety and robust development.
|
|
13
|
+
- **Nx**: Manages the build system and monorepo architecture.
|
|
14
|
+
- **Sass**: Handles advanced, scalable CSS styling.
|
|
15
|
+
- **Eslint & Stylelint**: Maintain code quality through static analysis for scripts and styles.
|
|
16
|
+
- **Prettier**: Enforces consistent code formatting across the project.
|
|
17
|
+
|
|
18
|
+
## Build / Setup
|
|
19
|
+
|
|
20
|
+
Follow these steps to set up and run the project locally.
|
|
21
|
+
|
|
22
|
+
### Prerequisites
|
|
23
|
+
|
|
24
|
+
- **Volta:** The workspace uses [volta](https://volta.sh) to manage its npm and Node versions. [Install it](https://docs.volta.sh/guide/getting-started) before proceeding.
|
|
25
|
+
- There's no need to install a specific version of npm or Node right now, it shall be done automatically for you.
|
|
26
|
+
- **IDE:** We recommend [VS Code](https://code.visualstudio.com/) with the [Stencil Tools](https://marketplace.visualstudio.com/items?itemName=ionic.stencil-helper) extension.
|
|
27
|
+
|
|
28
|
+
### Installation & Running
|
|
29
|
+
|
|
30
|
+
1. **Install dependencies:**
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
2. **Build for production:**
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npx nx run-many -t build
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
3. **Run unit tests:**
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npx nx run-many -t test
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Folder Hierarchy
|
|
49
|
+
|
|
50
|
+
The repository structure is organized as follows:
|
|
51
|
+
|
|
52
|
+
```text
|
|
53
|
+
├── .eslintignore/ # ESLint ignore rules
|
|
54
|
+
├── .gitignore # Git ignore rules
|
|
55
|
+
├── .husky/ # Git hooks configuration
|
|
56
|
+
├── .mcp.json # MCP configuration
|
|
57
|
+
├── .nvmrc # NVM configuration
|
|
58
|
+
├── .prettierignore # Prettier ignore rules
|
|
59
|
+
├── .stylelintignore # Stylelint ignore rules
|
|
60
|
+
├── docs/ # Documentation files
|
|
61
|
+
│ ├── CONTRIBUTING.md # Contributing guidelines
|
|
62
|
+
│ ├── CODE_OF_CONDUCT.md # Contributor Code of Conduct
|
|
63
|
+
| ├── LICENSE.md # License file
|
|
64
|
+
│ └── STYLE_GUIDE.md # Stencil Style Guide
|
|
65
|
+
├── packages/ # Directory for npm workspaces
|
|
66
|
+
│ └── [package-name]/ # Individual Stencil component library
|
|
67
|
+
├── AGENTS.md # AI context and guidelines for Nx
|
|
68
|
+
├── CLAUDE.md # AI context and guidelines for Nx
|
|
69
|
+
├── commitlint.config.mjs # Commitlint configuration
|
|
70
|
+
├── eslint.config.mjs # ESLint configuration
|
|
71
|
+
├── nx.json # Nx build system configuration
|
|
72
|
+
├── package-lock.json # NPM lock file
|
|
73
|
+
├── package.json # Root configuration: workspaces, dependencies, and scripts
|
|
74
|
+
├── prettier.config.mjs # Prettier configuration
|
|
75
|
+
├── stylelint.config.mjs # Stylelint configuration
|
|
76
|
+
├── tsconfig.base.json # Base TypeScript configuration
|
|
77
|
+
└── README.md # Project documentation
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Contributing
|
|
81
|
+
|
|
82
|
+
Thanks for your interest in contributing!
|
|
83
|
+
Please take a moment to read up on our guidelines for [contributing](/docs/CONTRIBUTING.md). Please note that this project is released with a [Contributor Code of Conduct](/docs/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"prepare": "node .husky/install.mjs"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
|
-
"@commitlint/cli": "20.
|
|
17
|
-
"@commitlint/config-conventional": "20.
|
|
16
|
+
"@commitlint/cli": "20.3.0",
|
|
17
|
+
"@commitlint/config-conventional": "20.3.0",
|
|
18
18
|
"@eslint/js": "9.39.2",
|
|
19
19
|
"@nx/js": "22.3.3",
|
|
20
20
|
"eslint": "9.39.2",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"stylelint-use-logical": "2.1.2",
|
|
31
31
|
"ts-node": "10.9.2",
|
|
32
32
|
"typescript": "5.9.3",
|
|
33
|
-
"typescript-eslint": "8.
|
|
33
|
+
"typescript-eslint": "8.51.0"
|
|
34
34
|
},
|
|
35
35
|
"nx": {},
|
|
36
36
|
"volta": {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
A framework-agnostic collection of
|
|
5
|
+
A framework-agnostic collection of [web components](https://www.webcomponents.org/introduction) built for maximum compatibility. These components integrate seamlessly with popular libraries like React, Angular, and Vue, or can function entirely on their own using standard browser JavaScript.
|
|
6
6
|
|
|
7
7
|
## Tasks
|
|
8
8
|
|
package/dist/templates/variants/all/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json
CHANGED
|
@@ -69,16 +69,16 @@
|
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@stencil/angular-output-target": "1.1.1",
|
|
72
|
-
"@stencil/core": "4.
|
|
72
|
+
"@stencil/core": "4.41.0",
|
|
73
73
|
"@stencil/react-output-target": "1.2.0",
|
|
74
74
|
"@stencil/sass": "3.2.3",
|
|
75
75
|
"@stencil/vue-output-target": "0.11.8",
|
|
76
|
-
"@types/jest": "
|
|
76
|
+
"@types/jest": "30.0.0",
|
|
77
77
|
"@types/node": "25.0.3",
|
|
78
|
-
"jest": "
|
|
79
|
-
"jest-cli": "
|
|
80
|
-
"puppeteer": "24.
|
|
81
|
-
"sass": "1.97.
|
|
78
|
+
"jest": "30.2.0",
|
|
79
|
+
"jest-cli": "30.2.0",
|
|
80
|
+
"puppeteer": "24.34.0",
|
|
81
|
+
"sass": "1.97.1",
|
|
82
82
|
"stencil-inline-svg": "1.1.0"
|
|
83
83
|
},
|
|
84
84
|
"license": "MIT"
|
package/dist/templates/variants/angular/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json
CHANGED
|
@@ -69,14 +69,14 @@
|
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@stencil/angular-output-target": "1.1.1",
|
|
72
|
-
"@stencil/core": "4.
|
|
72
|
+
"@stencil/core": "4.41.0",
|
|
73
73
|
"@stencil/sass": "3.2.3",
|
|
74
|
-
"@types/jest": "
|
|
74
|
+
"@types/jest": "30.0.0",
|
|
75
75
|
"@types/node": "25.0.3",
|
|
76
|
-
"jest": "
|
|
77
|
-
"jest-cli": "
|
|
78
|
-
"puppeteer": "24.
|
|
79
|
-
"sass": "1.97.
|
|
76
|
+
"jest": "30.2.0",
|
|
77
|
+
"jest-cli": "30.2.0",
|
|
78
|
+
"puppeteer": "24.34.0",
|
|
79
|
+
"sass": "1.97.1",
|
|
80
80
|
"stencil-inline-svg": "1.1.0"
|
|
81
81
|
},
|
|
82
82
|
"license": "MIT"
|
package/dist/templates/variants/react/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json
CHANGED
|
@@ -68,15 +68,15 @@
|
|
|
68
68
|
"tslib": "2.8.1"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
|
-
"@stencil/core": "4.
|
|
71
|
+
"@stencil/core": "4.41.0",
|
|
72
72
|
"@stencil/react-output-target": "1.2.0",
|
|
73
73
|
"@stencil/sass": "3.2.3",
|
|
74
|
-
"@types/jest": "
|
|
74
|
+
"@types/jest": "30.0.0",
|
|
75
75
|
"@types/node": "25.0.3",
|
|
76
|
-
"jest": "
|
|
77
|
-
"jest-cli": "
|
|
78
|
-
"puppeteer": "24.
|
|
79
|
-
"sass": "1.97.
|
|
76
|
+
"jest": "30.2.0",
|
|
77
|
+
"jest-cli": "30.2.0",
|
|
78
|
+
"puppeteer": "24.34.0",
|
|
79
|
+
"sass": "1.97.1",
|
|
80
80
|
"stencil-inline-svg": "1.1.0"
|
|
81
81
|
},
|
|
82
82
|
"license": "MIT"
|
package/dist/templates/variants/vue/packages/components-{{PROJECT_NAME_KEBAB}}-core/package.json
CHANGED
|
@@ -68,15 +68,15 @@
|
|
|
68
68
|
"tslib": "2.8.1"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
|
-
"@stencil/core": "4.
|
|
71
|
+
"@stencil/core": "4.41.0",
|
|
72
72
|
"@stencil/sass": "3.2.3",
|
|
73
73
|
"@stencil/vue-output-target": "0.11.8",
|
|
74
|
-
"@types/jest": "
|
|
74
|
+
"@types/jest": "30.0.0",
|
|
75
75
|
"@types/node": "25.0.3",
|
|
76
|
-
"jest": "
|
|
77
|
-
"jest-cli": "
|
|
78
|
-
"puppeteer": "24.
|
|
79
|
-
"sass": "1.97.
|
|
76
|
+
"jest": "30.2.0",
|
|
77
|
+
"jest-cli": "30.2.0",
|
|
78
|
+
"puppeteer": "24.34.0",
|
|
79
|
+
"sass": "1.97.1",
|
|
80
80
|
"stencil-inline-svg": "1.1.0"
|
|
81
81
|
},
|
|
82
82
|
"license": "MIT"
|
|
@@ -68,14 +68,14 @@
|
|
|
68
68
|
"tslib": "2.8.1"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
|
-
"@stencil/core": "4.
|
|
71
|
+
"@stencil/core": "4.41.0",
|
|
72
72
|
"@stencil/sass": "3.2.3",
|
|
73
|
-
"@types/jest": "
|
|
73
|
+
"@types/jest": "30.0.0",
|
|
74
74
|
"@types/node": "25.0.3",
|
|
75
|
-
"jest": "
|
|
76
|
-
"jest-cli": "
|
|
77
|
-
"puppeteer": "24.
|
|
78
|
-
"sass": "1.97.
|
|
75
|
+
"jest": "30.2.0",
|
|
76
|
+
"jest-cli": "30.2.0",
|
|
77
|
+
"puppeteer": "24.34.0",
|
|
78
|
+
"sass": "1.97.1",
|
|
79
79
|
"stencil-inline-svg": "1.1.0"
|
|
80
80
|
},
|
|
81
81
|
"license": "MIT"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-stencil-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Create a stencil component library project using Nx, TypeScript, and SASS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Jason Messmer <mezlight@gmail.com>",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"unique-names-generator": "4.7.1"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@commitlint/cli": "20.
|
|
48
|
-
"@commitlint/config-conventional": "20.
|
|
47
|
+
"@commitlint/cli": "20.3.0",
|
|
48
|
+
"@commitlint/config-conventional": "20.3.0",
|
|
49
49
|
"@types/fs-extra": "11.0.4",
|
|
50
|
-
"@types/node": "
|
|
50
|
+
"@types/node": "25.0.3",
|
|
51
51
|
"@types/prompts": "2.4.9",
|
|
52
52
|
"rimraf": "6.1.2",
|
|
53
|
-
"tsdown": "0.18.
|
|
53
|
+
"tsdown": "0.18.4",
|
|
54
54
|
"typescript": "5.9.3"
|
|
55
55
|
},
|
|
56
56
|
"module": "./dist/index.mjs",
|