diff --git a/docs-md/addons/stencil-router.md b/docs-md/addons/stencil-router.md index b30d34626..b9fd499eb 100644 --- a/docs-md/addons/stencil-router.md +++ b/docs-md/addons/stencil-router.md @@ -145,7 +145,7 @@ Then we can use that `match` prop to access our data: const myData = this.match.params.pageNum ``` - + diff --git a/docs-md/advanced/angular-integration/index.md b/docs-md/advanced/angular-integration/index.md new file mode 100644 index 000000000..39371cd0b --- /dev/null +++ b/docs-md/advanced/angular-integration/index.md @@ -0,0 +1,75 @@ +# Using Stencil Built Web Components with Angular + +Using a Stencil built web component collection within an Angular CLI project is a three step process. We need to: + +1. Include the CUSTOM_ELEMENTS_SCHEMA in the modules that use the components +1. Include the load script in `index.html` +1. Copy the component collection during the build + +## Including the Custom Elements Schema + +Including the CUSTOM_ELEMENTS_SCHEMA in the nodule allows the use of the web components in the HTML markup without the compiler producing errors. Here is an example of adding it to `AppModule`: + +```ts +import { BrowserModule } from '@angular/platform-browser'; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule + ], + providers: [], + bootstrap: [AppComponent], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA + ] +}) +export class AppModule { } +``` + +## Including the Load Script + +A component collection built with Stencil includes a main script that is used to load the components in the collection. That script needs to be loaded in your application as such: + +```html + + + + + Test Component Usage + + + + + + + + + + +``` + +## Copying the Components + +During the build, the components need to be copied to the build output directory. The easiest way to do this is to modify include the collection in the `assets` array of the `.angular-cli.json` file. + +``` + "assets": [ + "assets", + "favicon.ico", + { "glob": "**/*", "input": "../web-components/test-components", "output": "./test-components" } + ], +``` + + + Back + + + + Next + diff --git a/docs-md/advanced/distribution/index.md b/docs-md/advanced/distribution/index.md index 67c6f5b9d..7b7fd36ec 100644 --- a/docs-md/advanced/distribution/index.md +++ b/docs-md/advanced/distribution/index.md @@ -70,7 +70,7 @@ The first step for all three of these strategies is to - + diff --git a/docs-md/advanced/webpack/index.md b/docs-md/advanced/webpack/index.md deleted file mode 100644 index 1ac9d56ef..000000000 --- a/docs-md/advanced/webpack/index.md +++ /dev/null @@ -1,88 +0,0 @@ -# Using Webpack with web components built with Stencil - -Many applications are built using Webpack. Stencil provides a Webpack plugin that makes it easy to include web components that have been built using Stencil in your Webpack built application. - -## Using the Plugin - -Using the Stencil Webpack Plugin is a two-step process. You must import the collections you are using into your project code at some appropriate location depending on the architecture of your application, and you must update the `webpack.config.js` file to call the plugin which will copy the required files to the output directory for your application. - -### Importing the Collections - -In order to use your component collections within an application, you generally have to import them in some manner. This will result in Webpack adding the appropriate Stencil loader scripting to the appropriate bundle. - -#### Angular - -In an Angular application, you should add the component collection imports to the `app.module.ts` file. You should also make sure you are using the `CUSTOM_ELEMENTS_SCHEMA` as in the following example. - -```ts -import { BrowserModule } from '@angular/platform-browser'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; - -import { AppComponent } from './app.component'; - -import 'accounting-components'; -import 'payroll-components'; -import 'purchasing-components'; -import 'web-components'; - -@NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent], - schemas: [ - CUSTOM_ELEMENTS_SCHEMA - ] -}) -export class AppModule { } -``` - -### Updating `webpack.config.js` - -Once you have the proper Stencil loader scripts bundling with your project, you need to have the collections copied to a known location in the build output so the Stencil loader can load them as needed. This is where the Stencil Webpack Plugin is used. - -After installing the plugin, modify your `webpack.config.js` file as such: - -```js -const stencil = require('@stencil/webpack'); - -... - - - "plugins": [ - new stencil.StencilPlugin({ - collections: [ - 'node-modules/accounting-components/dist/accountingcomponents', - 'node-modules/payroll-components/dist/payrollcomponents', - 'node-modules/purchasing-components/dist/purchasingcomponents', - 'node-modules/web-components/dist/webcomponents' - ]}), - -``` - -The plugin constructor takes a configuration object. At this time, the only property in this object is the `collections` property. A configuration object is used rather than a sipmle list of files in order to support the easy addition of options in the future. - -The `collections` property contains an array of component collections you would like to use. If you only have one collection, you can specify just a string instead of an array of strings. - -The component collections do not have to be installed in `node-modules` if you do not want to publish them to an NPM registry (though publishing them to either the public registry or to a private registry is suggested). You could, for example, install them in a `web-components` directory if you so desired. Manually copying the component collections as such is beyond the scope of this document. - -Once you have this set up, a build (`npm run build` for example) will copy the components to a `build` directory under the output directory for the build following usual Stencil conventions. - -**Important:** If you are in an Angular CLI project, you must first eject the project in order to modify the `webpack.config.js` file. - - - - - - - - - diff --git a/src/components.d.ts b/src/components.d.ts index 8b8f25785..0464cbb42 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -28,10 +28,8 @@ declare global { } namespace JSXElements { export interface AppMarkedAttributes extends HTMLAttributes { - mode?: string, - color?: string, - doc?: string + doc?: any } } } @@ -58,8 +56,6 @@ declare global { } namespace JSXElements { export interface DemosPageAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } @@ -87,8 +83,6 @@ declare global { } namespace JSXElements { export interface DocumentComponentAttributes extends HTMLAttributes { - mode?: string, - color?: string, pages?: any } @@ -117,8 +111,6 @@ declare global { } namespace JSXElements { export interface LandingPageAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } @@ -146,11 +138,9 @@ declare global { } namespace JSXElements { export interface LazyIframeAttributes extends HTMLAttributes { - mode?: string, - color?: string, - src?: string, - title?: string + src?: any, + title?: any } } } @@ -177,8 +167,6 @@ declare global { } namespace JSXElements { export interface PwasPageAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } @@ -206,8 +194,6 @@ declare global { } namespace JSXElements { export interface ResourcesPageAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } @@ -235,8 +221,6 @@ declare global { } namespace JSXElements { export interface SiteHeaderAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } @@ -264,8 +248,6 @@ declare global { } namespace JSXElements { export interface SiteMenuAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } @@ -293,8 +275,6 @@ declare global { } namespace JSXElements { export interface StencilSiteAttributes extends HTMLAttributes { - mode?: string, - color?: string, } } diff --git a/src/components/site-menu/site-menu.tsx b/src/components/site-menu/site-menu.tsx index 1b942395a..ae5f5686f 100644 --- a/src/components/site-menu/site-menu.tsx +++ b/src/components/site-menu/site-menu.tsx @@ -125,8 +125,8 @@ export class SiteMenu {
  • - - Webpack + + Angular Integration
    • diff --git a/src/components/stencil-site/stencil-site.tsx b/src/components/stencil-site/stencil-site.tsx index 31e266e1e..ab604a788 100644 --- a/src/components/stencil-site/stencil-site.tsx +++ b/src/components/stencil-site/stencil-site.tsx @@ -44,7 +44,7 @@ export class App { 'routing': 'addons/stencil-router.html', 'service-workers': 'advanced/service-worker/index.html', 'distribution': 'advanced/distribution/index.html', - 'webpack': 'advanced/webpack/index.html', + 'angular-integration': 'advanced/angular-integration/index.html', 'prerendering': 'advanced/pre-rendering/index.html', 'shadow-dom': 'advanced/shadow-dom/index.html' };