Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
create-stencil
Advanced tools
create-stencil - npm Package Compare versions
Comparing version 3.2.0 to 3.3.0
| { | ||
| "name": "create-stencil", | ||
| "version": "3.2.0", | ||
| "version": "3.3.0", | ||
| "description": "Quickly create a new stencil component project: npm init stencil", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/ionic-team/create-stencil" | ||
| }, | ||
| "main": "index.js", | ||
@@ -34,3 +38,3 @@ "files": [ | ||
| "devDependencies": { | ||
| "@ionic/prettier-config": "^3.0.0", | ||
| "@ionic/prettier-config": "^4.0.0", | ||
| "@rollup/plugin-commonjs": "^25.0.0", | ||
@@ -40,3 +44,3 @@ "@rollup/plugin-json": "^6.0.0", | ||
| "@types/cli-spinner": "^0.2.0", | ||
| "@types/jest": "^27.5.1", | ||
| "@types/jest": "^29.0.0", | ||
| "@types/node": "^20.1.7", | ||
@@ -47,6 +51,6 @@ "@types/prompts": "^2.0.14", | ||
| "colorette": "^2.0.20", | ||
| "https-proxy-agent": "^6.0.0", | ||
| "jest": "^28.1.0", | ||
| "np": "^7.6.2", | ||
| "prettier": "2.8.8", | ||
| "https-proxy-agent": "^7.0.0", | ||
| "jest": "^29.0.0", | ||
| "np": "^8.0.2", | ||
| "prettier": "3.0.0", | ||
| "replace-in-file": "^6.1.0", | ||
@@ -56,4 +60,4 @@ "rollup": "^3.21.2", | ||
| "terser": "^5.17.1", | ||
| "ts-jest": "^28.0.3", | ||
| "typescript": "^4.9.4", | ||
| "ts-jest": "^29.0.0", | ||
| "typescript": "~5.0.0", | ||
| "yauzl": "^2.10.0" | ||
@@ -74,5 +78,5 @@ }, | ||
| "volta": { | ||
| "node": "20.2.0", | ||
| "npm": "9.6.6" | ||
| "node": "20.5.0", | ||
| "npm": "9.8.1" | ||
| } | ||
| } |
143
README.md
@@ -1,13 +0,11 @@ | ||
| # Create Stencil | ||
| # The create-stencil CLI | ||
| > Note that you will need to use npm 6 or higher. | ||
| create-stencil is a CLI for creating new Stencil projects based on predefined templates, or "starters". | ||
| It is the official CLI maintained by the Stencil team, and is recommended for all new projects. | ||
| Run: | ||
| ## Prerequisites | ||
| ``` | ||
| npm i -g npm | ||
| ``` | ||
| The create-stencil CLI requires `npm` version 6 or higher to be installed. | ||
| For instructions for installing or upgrading npm, please see the [npm Documentation](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). | ||
| To install latest version of `npm` | ||
| ## Starters | ||
@@ -18,74 +16,125 @@ | ||
| - `component` - allows one to spin up a component library containing one or more Stencil components. Best suited for | ||
| teams/individuals looking to reuse components across one or more applications. | ||
| teams/individuals looking to reuse components across one or more applications. ([Source Code](https://github.com/ionic-team/stencil-component-starter)) | ||
| - `app` - allows one to spin up an application, complete with routing. This is a **community-driven** project, | ||
| and is not formally owned by the Stencil team | ||
| - `ionic-pwa` - allows one to spin up an Ionic PWA, complete with tabs layout and routing. This is a **community-driven** project. | ||
| and is not formally owned by the Stencil team. ([Source Code](https://github.com/stencil-community/stencil-app-starter)) | ||
| - `ionic-pwa` - allows one to spin up an Ionic PWA, complete with tabs layout and routing. This is a **community-driven** project, | ||
| and is not formally owned by the Stencil team. ([Source Code](https://github.com/stencil-community/stencil-ionic-starter)) | ||
| ## Usage | ||
| The create-stencil CLI can be run in one of two modes - Interactive Mode or Command Mode. | ||
| ### Interactive mode | ||
| ### Interactive Mode | ||
| Interactive Mode allows a user to interactively select options for creating a new Stencil project. | ||
| create-stencil can be started in Interactive Mode by running: | ||
| ```console | ||
| $ npm init stencil | ||
| ``` | ||
| npm init stencil | ||
| ``` | ||
| ### Command mode | ||
| Running the CLI in Interactive Mode on your machine will ask you which starter you'd like to use: | ||
| ```console | ||
| $ npm init stencil | ||
| ✔ Select a starter project. | ||
| Starters marked as [community] are developed by the Stencil Community, | ||
| rather than Ionic. For more information on the Stencil Community, please see | ||
| https://github.com/stencil-community › - Use arrow-keys. Return to submit. | ||
| ❯ component Collection of web components that can be used anywhere | ||
| app [community] Minimal starter for building a Stencil app or website | ||
| ionic-pwa [community] Ionic PWA starter with tabs layout and routes | ||
| ``` | ||
| npm init stencil <starter> <projectName> | ||
| Followed by a name for your new project: | ||
| ```console | ||
| ✔ Project name > my-stencil-library | ||
| ``` | ||
| Example: | ||
| After confirming your selections, your project will be created. | ||
| In this example, new component library starter will have been created in a newly created `my-stencil-library` directory: | ||
| ```console | ||
| ✔ Confirm? … yes | ||
| ✔ All setup in 29 ms | ||
| We suggest that you begin by typing: | ||
| $ cd my-stencil-library | ||
| $ npm install | ||
| $ npm start | ||
| You may find the following commands will be helpful: | ||
| $ npm start | ||
| Starts the development server. | ||
| $ npm run build | ||
| Builds your project in production mode. | ||
| $ npm test | ||
| Starts the test runner. | ||
| Further reading: | ||
| - https://github.com/ionic-team/stencil-component-starter | ||
| - https://stenciljs.com/docs | ||
| Happy coding! 🎈 | ||
| ``` | ||
| ### Command Mode | ||
| Command Mode allows you to create a new Stencil project by specifying all project options upfront. | ||
| To run the CLI in Command Mode, a starter and project name must be specified: | ||
| ``` | ||
| npm init stencil [starter] [project-name] | ||
| ``` | ||
| An example of creating a component starter with the name "my-stencil-library" is shown below: | ||
| ``` | ||
| npm init stencil component my-stencil-library | ||
| ``` | ||
| In the example above, new component library starter will have been created in a newly created `my-stencil-library` directory: | ||
| ### Using a proxy | ||
| ### Additional Flags | ||
| If you are behind a proxy, configure `https_proxy` environment variable. | ||
| **Note:** When passing flags to the create-stencil CLI, a double dash ('--') must be placed between `npm init stencil` | ||
| and the flag(s) passed to the CLI: | ||
| ```console | ||
| $ npm init stencil -- --help | ||
| ``` | ||
| ## Built-in starters | ||
| #### `--help`, `-h` | ||
| - [app (community-maintained)](https://github.com/stencil-community/stencil-app-starter) | ||
| - [ionic-pwa (community-maintained)](https://github.com/stencil-community/stencil-ionic-starter) | ||
| - [component](https://github.com/ionic-team/stencil-component-starter) | ||
| The `--help` flag shows usage examples for the CLI. | ||
| ## Developing locally | ||
| #### `--info` | ||
| If you want to add features, clone this repo, open terminal: | ||
| The `--info` will print the current version of the CLI. | ||
| #### Install dependencies | ||
| ### Environment Variables | ||
| ```bash | ||
| npm install | ||
| ``` | ||
| #### `https_proxy` | ||
| Then, compile and run the starter: | ||
| ```bash | ||
| npm run dev | ||
| If you are behind a proxy, the `https_proxy` environment variable can be set when running the CLI: | ||
| ```console | ||
| $ https_proxy=https://[IP_ADDRESS] npm init stencil | ||
| ``` | ||
| And it will help you test out your changes. | ||
| Stencil uses [https-proxy-agent](https://github.com/TooTallNate/proxy-agents/tree/main/packages/https-proxy-agent) | ||
| under the hood to connect to the specified proxy server. | ||
| The value provided for `https_proxy` will be passed directly to the constructor for a new | ||
| [`HttpsProxyAgent` instance](https://github.com/TooTallNate/proxy-agents/tree/main/packages/https-proxy-agent#api). | ||
| ## Citations | ||
| Created by William M. Riley: | ||
| Original project was created by William M. Riley: | ||
| * [Twitter](https://twitter.com/splitinfinities) | ||
| * [Github](https://github.com/splitinfinities) | ||
| ## Related Links | ||
| ## Related | ||
| * [Stencil Documentation](https://stenciljs.com/) | ||
| * [Stencil Worldwide Slack](https://stencil-worldwide.slack.com) | ||
| * [Ionic](https://ionicframework.com/) | ||
| * [Ionic Worldwide Discord](https://ionic.link/discord) | ||
| * [Ionicons](http://ionicons.com/) | ||
| ## License | ||
| * MIT | ||
| * The [Stencil Documentation](https://stenciljs.com/) site has more information on using Stencil. | ||
| * Check out the [Stencil Discord](https://chat.stenciljs.com/) for help and general Stencil discussion! |
Sorry, the diff of this file is too big to display
Fixed alerts
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.15%
198521
- Number of lines in readme file
- increased by53.85%
140
- Number of low supply chain risk alerts
- decreased by-7.14%
13
No dependency changes