upgrade output targets

.github/workflows/ci.yml

@@ -1,43 +1,27 @@
-name: CI
+name: Build & Test
 
-on: push
+on:
+  push:
+    branches:
+      - 'master'
+  pull_request:
+    branches:
+      - '**'
 
 jobs:
-  build-and-test-nix:
-    name: Build and Test
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    steps:
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - uses: actions/checkout@v1
-      - name: Restore Dependency Cache
-        uses: actions/cache@v1
-        id: restore-dependencies
-        with:
-          path: node_modules
-          key: ${{ runner.OS }}-dependency-cache-${{ hashFiles('package-lock.json') }}
+  build_and_test:
+    strategy:
+      matrix:
+        os: [ 'ubuntu-latest', 'windows-latest' ]
 
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Setup Testing Environment
-        run: npm run bootstrap
+    name: Node 16 on ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
 
-      - name: Build
-        run: npm run build
-
-      - name: Test
-        run: npm test
-  plugin-build-and-test-windows:
-    name: Build and Test
-    runs-on: windows-latest
     timeout-minutes: 30
     steps:
       - uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 16.x
       - uses: actions/checkout@v1
       - name: Restore Dependency Cache
         uses: actions/cache@v1

README.md

@@ -68,6 +68,18 @@ This is the output file that gets generated by the outputTarget. This file shoul
 
 In order for ngmodel to work on input components we need to define certain pieces of information about the input components. Unfortunately the Stencil compiler cannot infer the intent of components because this is a very conceptual idea.
 
+### excludeComponents
+
+This is an array of component names to exclude from the output target build. This is useful if you need to have a framework-specific implementation of a particular component.
+
+### includeImportCustomElements
+
+If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components.
+
+### customElementsDir
+
+This is the directory where the custom elements are imported from when using the `[Custom Elements Bundle](https://stenciljs.com/docs/custom-elements)`. Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.
+
 ### Setup of Angular Component Library
 
 There is an example component library package available on Github so that you can get started. This repo will likely live as a sibling to your Stencil component library. https://github.com/ionic-team/stencil-ds-angular-template
@@ -164,6 +176,30 @@ This is the NPM package name of your core stencil package. In the case of Ionic
 
 This is the output file that gets generated by the outputTarget. This file should be referencing a different package location. In the example case we are choosing a sibling directory’s src directory. We will then create a React package that exports all components defined in this file.
 
+### excludeComponents
+
+This is an array of component names to exclude from the output target build. This is useful if you need to have a framework-specific implementation of a particular component. For example, you may have a `my-tabs` tab view Web Component but need to rewrite this in React to take advantage of React Router.
+
+### loaderDir
+
+This is the path to where the `defineCustomElements` function exists in your built project. If `loaderDir` is not provided, the `/dist/loader` directory will be used.
+
+### includePolyfills
+
+If `true`, polyfills will automatically be imported and the `applyPolyfills` function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
+
+### includeDefineCustomElements
+
+If `true`, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
+
+### includeImportCustomElements
+
+If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components.
+
+### customElementsDir
+
+This is the directory where the custom elements are imported from when using the `[Custom Elements Bundle](https://stenciljs.com/docs/custom-elements)`. Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.
+
 ### Setup of React Component Library
 
 There is an example component library package available on Github so that you can get started. This repo will likely live as a sibling to your Stencil component library. https://github.com/ionic-team/stencil-ds-react-template
@@ -205,6 +241,84 @@ This is the NPM package name of your core stencil package. In the case of Ionic
 
 This is the output file that gets generated by the outputTarget. This file should be referencing a different package location. In the example case we are choosing a sibling directory’s src directory. We will then create a Vue package that exports all components defined in this file.
 
+### excludeComponents
+
+This is an array of component names to exclude from the output target build. This is useful if you need to have a framework-specific implementation of a particular component. For example, you may have a `my-tabs` tab view Web Component but need to rewrite this in Vue to take advantage of Vue Router.
+
+### componentModels
+
+This is an array of `ComponentModelConfig` objects for components that should be integrated with `v-model`. 
+
+```typescript
+export interface ComponentModelConfig {
+
+  /**
+   * An array of element names that
+   * should have v-model integration.
+   */
+  elements: string | string[];
+
+  /**
+   * The event emitted from the Web Component
+   * that should trigger a `v-model` update.
+   */
+  event: string;
+
+  /**
+   * The Web Component property that the value
+   * of the `v-model` reference is based off.
+   */
+  targetAttr: string;
+
+  /**
+   * (optional) The event to emit from the Vue component
+   * wrapper. When listening directly to the `event` emitted
+   * from the Web Component, the `v-model` reference has not
+   * yet had a chance to update. By setting `externalEvent`,
+   * your Web Component can emit `event`, the Vue output target
+   * can update the `v-model` reference, and then emit `externalEvent`,
+   * notifying the end user that `v-model` has changed. Defaults to `event`.
+   */
+  externalEvent?: string;
+}
+```
+
+```typescript
+vueOutputTarget({
+  ...,
+  componentModels: [
+    {
+      elements: ['my-input', 'my-textarea'],
+      event: 'v-on-change',
+      externalEvent: 'on-change',
+      targetAttr: 'value'
+    }
+  ]
+})
+```
+
+### loaderDir
+
+This is the path to where the `defineCustomElements` function exists in your built project. If `loaderDir` is not provided, the `/dist/loader` directory will be used.
+
+### includePolyfills
+
+If `true`, polyfills will automatically be imported and the `applyPolyfills` function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
+
+### includeDefineCustomElements
+
+If `true`, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when `includeImportCustomElements` is `true`.
+
+### includeImportCustomElements
+
+If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the [Custom Elements Bundle](https://stenciljs.com/docs/custom-elements) and will not work with lazy loaded components.
+
+### customElementsDir
+
+This is the directory where the custom elements are imported from when using the `[Custom Elements Bundle](https://stenciljs.com/docs/custom-elements)`. Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.
+
+
+
 ### Setup of Vue Component Library
 
 There is an example component library package available on Github so that you can get started. This repo will likely live as a sibling to your Stencil component library.