ionic-team / stencil-webpack

Tools needed to include stencil components in a project built using Webpack

Note: This plugin is not generaly required and is no longer being maintained by the Stencil team.

Stencil: A Compiler for Web Components

Stencil is a simple compiler for generating Web Components.

The webpack plugin allows apps to easily import components using the webpack bundler. The plugin is for apps with build scripts already using a traditional webpack toolchain. However, webpack is not required to use web components built by Stencil since they are already lazy-load themselves on-demand, and use standardized ES Modules imports.

Stencil combines the best concepts of the most popular front-end frameworks into a compile-time rather than a run-time tool. Stencil's output is just Web Components, so they work in any major framework or with no framework at all.

Import Components

First install the component library to be used, such as:

npm install @ionic/core

Next, import the component library within the app's entry file, such as:

import `@ionic/core`;

Updating webpack.config.js

Webpack will bundle the simple "registry" information of all the components into webpack's main bundle, but it does not include the actual component code. Instead the plugin copies external component assets to webpack's output directory, which allows for the web components to be lazy-loaded on-demand by the browser, and only pull down polyfills when required.

After installing the plugin, modify your webpack.config.js file as such:

npm install --save-dev @stencil/webpack

const stencil = require('@stencil/webpack');

...

  "plugins": [
    new stencil.StencilPlugin()
  ]

Related

• Stencil
• Stencil Worldwide Slack
• Ionic Components
• Ionicons

Contributing

Please see our Contributor Code of Conduct for information on our rules of conduct.

Creating an Issue

• If you have a question about using this plugin, please ask on the Stencil Worldwide Slack group.

• It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable.

• The issue list of this repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.

• Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs reply" and receives no further replies from the author of the issue for more than 5 days, it will be closed.

• If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been reported. You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.

• Next, create a new issue that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.

Creating a Pull Request

• We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please create an issue that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

• Looking for an issue to fix? Make sure to look through our issues with the help wanted label!

Setup

1. Fork the repo.
2. Clone your fork.
3. Make a branch for your change.
4. Run npm install (make sure you have node and npm installed first)
5. Run npm test

Modifying the Plugin

1. Create a test that demonstrates an aspect of the bug or a requirement of the feature
2. Run npm test to verify your test fails
3. Write the code
4. Run npm test to verify your test passes
5. Repeat

NOTE: Only well-tested pull requests will be merged

stencil-webpack's Issues

Console warning

Stencil version:

@stencil/[email protected] 

I'm submitting a ...

[ x ] bug report
[ ] feature request

Current behavior:
When using StencilJS Components in a Webpack app. Warning displays in the console:

To improve performance it is recommended to set the differential scripts in the head as follows:
<script type="module" src="<path-to-package>/dist/test/test.esm.js"></script>
<script nomodule="" src="<path-to-package>/dist/test/test.js"></script> 

Expected behavior:
Warning does not display in the console.

async throws error on node < v7.6

Resources:
Before submitting an issue, please consult our docs.

Stencil version:

@stencil/[email protected]

I'm submitting a ...
Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

[x] bug report
[ ] feature request

Current behavior:
On NodeJS v6.11.0, using the @stencil/webpack plugin results in a fatal error. I suspect it has to do with this version of node not supporting async.

Expected behavior:
Running webpack with the plugin should not crash.

Steps to reproduce:
Downgrade to node v6.11.0 (or anything below v7.6) and run webpack using this plugin.

Related code:
Here's how I'm using the webpack plugin:

  plugins: [
    new stencil.StencilPlugin({
      collections: [
        'src/lib/nav-bar'
      ]
    })
  ]

Other information:
Error from running npm start which runs the webpack dev server:

/code/yuzi/node_modules/@stencil/webpack/dist/index.js:64
    (async () => {
           ^
SyntaxError: Unexpected token (
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/code/yuzi/webpack.config.js:2:17)

npm ERR! Darwin 17.3.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `webpack-dev-server --config webpack.config.js --open --progress --profile --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'webpack-dev-server --config webpack.config.js --open --progress --profile --watch'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the yuzi package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config webpack.config.js --open --progress --profile --watch
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs yuzi
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls yuzi
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /code/yuzi/npm-debug.log

Assets are not copied

Stencil version:

`-- @stencil/[email protected]

I'm submitting a ...
[x] bug report
[ ] feature request

Current behavior:
Assets are not copied to the build folder

Expected behavior:
Assets are copied to the build folder

Steps to reproduce:
Install any stencils components, e.g. npm i simple-buttons. Run webpack.

Other information:
The issue is that the plugin tries to get the assets folder name using the import root which is index.js.
One possible fix is to rename package.json parameters to point to the core file, but this creates other issues:

• stencil build starts giving warnings
• it is impossible to export any additional classes as suggested here

Compiler.plugin was removed from webpack 5

Resources:
Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/webpack from a terminal/cmd prompt and paste output below):

@stencil/[email protected]

I'm submitting a ... (check one with "x")
Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

[x] bug report
[ ] feature request

Current behavior:
[webpack-cli] TypeError: compiler.plugin is not a function
at StencilPlugin.apply (C:\bitbucket\projects\ui\aafp-brand-components\node_modules@stencil\webpack\dist\index.js:14:18)

Expected behavior:
Build without errors

Steps to reproduce:
Upgrade to Webpack 5.26.3, possibly all of webpack 5. Use the 'new stencil.StencilPlugin(),' code as documented on the README.md of this repo

Related code:

insert any relevant code here

Other information:
webpack/webpack#11672

Webpack 4 deprecation warning

Resources:
Before submitting an issue, please consult our docs.

Stencil version:
@stencil/webpack: 0.0.6

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
During compilation, webpack outputs a deprecation warning:
DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
at StencilPlugin.apply ((localpath)\node_modules@stencil\webpack\dist\index.js:14:18)
at webpack ((localpath)\node_modules\webpack\lib\webpack.js:49:13)

Expected behavior:
This plugin should be updated to work correctly with the Webpack 4 API, especially since webpack 5 will likely be dropping support for the older plugin apis.

Steps to reproduce:
Compile any webpack project which uses @stencil/webpack

Other information:
The culprit seems to be the use of .plugin('emit'). This should be updated to use the new .tab instead.