feat: update to support Stencil v1 collection format

- Updated the demo components package to use the latest Stencil compiler version - Updated the means for importing the package to follow the latest guidelines from the Stencil docs BREAKING CHANGE: `ember-cli-stencil` now requires that collections are authored using `@stencil/core` v1.0.0 or higher.
alexlafroscia · Aug 8, 2019 · 0642e11 · 0642e11
1 parent 12b82d3
commit 0642e11
Show file tree

Hide file tree

Showing 17 changed files with 175 additions and 1,208 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/alexlafroscia/ember-cli-stencil.svg?branch=master)](https://travis-ci.org/alexlafroscia/ember-cli-stencil)
 [![NPM Version](https://badgen.net/npm/v/ember-cli-stencil)](https://www.npmjs.com/package/ember-cli-stencil)
-[![Stencil Compatibility](https://badgen.net/badge/stencil/^0.12.4?label=%40stencil%2Fcore)](https://stenciljs.com)
+[![Stencil Compatibility](https://badgen.net/badge/stencil/^1.0.7?label=%40stencil%2Fcore)](https://stenciljs.com)
 
 > Automatic discovery of [Stencil.js][stencil] components for your Ember application
 

diff --git a/packages/demo-components/.gitignore b/packages/demo-components/.gitignore
@@ -1,5 +1,6 @@
 dist/
 www/
+loader/
 
 *~
 *.sw[mnpcod]
@@ -11,6 +12,7 @@ log.txt
 *.sublime-project
 *.sublime-workspace
 
+.stencil/
 .idea/
 .vscode/
 .sass-cache/

diff --git a/packages/demo-components/CHANGELOG.md b/packages/demo-components/CHANGELOG.md
diff --git a/packages/demo-components/LICENSE b/packages/demo-components/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Ionic
+Copyright (c) 2018
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/packages/demo-components/package.json b/packages/demo-components/package.json
@@ -1,34 +1,24 @@
 {
   "name": "demo-components",
-  "version": "0.4.0",
+  "version": "0.0.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
-  "private": true,
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/demo-components/demo-components.js",
   "files": [
-    "dist/"
+    "dist/",
+    "loader/"
   ],
   "scripts": {
-    "build": "stencil build",
-    "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\" ",
-    "serve": "stencil-dev-server",
-    "start": "npm run dev"
+    "build": "stencil build"
   },
   "devDependencies": {
-    "@stencil/core": "^0.12.4",
-    "@stencil/dev-server": "latest",
-    "@stencil/utils": "latest"
+    "@stencil/core": "^1.0.7"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ionic-team/stencil-component-starter.git"
-  },
-  "author": "Ionic Team",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ionic-team/stencil"
-  },
-  "homepage": "https://github.com/ionic-team/stencil"
+  "license": "MIT"
 }
diff --git a/packages/demo-components/src/components.d.ts b/packages/demo-components/src/components.d.ts
@@ -1,50 +1,25 @@
-/**
-* This is an autogenerated file created by the Stencil compiler.
-* It contains typing information for all components that exist in this project.
-*/
 /* tslint:disable */
-
-import '@stencil/core';
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
 
 
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
 
 export namespace Components {
-
   interface DemoEventEmitter {}
-  interface DemoEventEmitterAttributes extends StencilHTMLAttributes {
-    'onDemoEvent'?: (event: CustomEvent) => void;
-  }
-
   interface DemoPassingProps {
     'action': Function;
     'text': string;
   }
-  interface DemoPassingPropsAttributes extends StencilHTMLAttributes {
-    'action'?: Function;
-    'text'?: string;
-  }
-
   interface DemoRichProps {
     'list': Array<string>;
   }
-  interface DemoRichPropsAttributes extends StencilHTMLAttributes {
-    'list'?: Array<string>;
-  }
 }
 
 declare global {
-  interface StencilElementInterfaces {
-    'DemoEventEmitter': Components.DemoEventEmitter;
-    'DemoPassingProps': Components.DemoPassingProps;
-    'DemoRichProps': Components.DemoRichProps;
-  }
-
-  interface StencilIntrinsicElements {
-    'demo-event-emitter': Components.DemoEventEmitterAttributes;
-    'demo-passing-props': Components.DemoPassingPropsAttributes;
-    'demo-rich-props': Components.DemoRichPropsAttributes;
-  }
 
 
   interface HTMLDemoEventEmitterElement extends Components.DemoEventEmitter, HTMLStencilElement {}
@@ -64,26 +39,39 @@ declare global {
     prototype: HTMLDemoRichPropsElement;
     new (): HTMLDemoRichPropsElement;
   };
-
   interface HTMLElementTagNameMap {
-    'demo-event-emitter': HTMLDemoEventEmitterElement
-    'demo-passing-props': HTMLDemoPassingPropsElement
-    'demo-rich-props': HTMLDemoRichPropsElement
-  }
-
-  interface ElementTagNameMap {
     'demo-event-emitter': HTMLDemoEventEmitterElement;
     'demo-passing-props': HTMLDemoPassingPropsElement;
     'demo-rich-props': HTMLDemoRichPropsElement;
   }
+}
+
+declare namespace LocalJSX {
+  interface DemoEventEmitter extends JSXBase.HTMLAttributes<HTMLDemoEventEmitterElement> {
+    'onDemoEvent'?: (event: CustomEvent<any>) => void;
+  }
+  interface DemoPassingProps extends JSXBase.HTMLAttributes<HTMLDemoPassingPropsElement> {
+    'action'?: Function;
+    'text'?: string;
+  }
+  interface DemoRichProps extends JSXBase.HTMLAttributes<HTMLDemoRichPropsElement> {
+    'list'?: Array<string>;
+  }
+
+  interface IntrinsicElements {
+    'demo-event-emitter': DemoEventEmitter;
+    'demo-passing-props': DemoPassingProps;
+    'demo-rich-props': DemoRichProps;
+  }
+}
 
+export { LocalJSX as JSX };
 
+
+declare module "@stencil/core" {
   export namespace JSX {
-    export interface Element {}
-    export interface IntrinsicElements extends StencilIntrinsicElements {
-      [tagName: string]: any;
-    }
+    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
   }
-  export interface HTMLAttributes extends StencilHTMLAttributes {}
-
 }
+
+
diff --git a/packages/demo-components/src/components/demo-event-emitter/demo-event-emitter.tsx b/packages/demo-components/src/components/demo-event-emitter/demo-event-emitter.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter } from "@stencil/core";
+import { Component, Event, EventEmitter, h } from "@stencil/core";
 
 @Component({
   tag: "demo-event-emitter",

diff --git a/packages/demo-components/src/components/demo-passing-props/demo-passing-props.tsx b/packages/demo-components/src/components/demo-passing-props/demo-passing-props.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop } from "@stencil/core";
+import { Component, Prop, h } from "@stencil/core";
 
 @Component({
   tag: "demo-passing-props",

diff --git a/packages/demo-components/src/components/demo-rich-props/demo-rich-props.tsx b/packages/demo-components/src/components/demo-rich-props/demo-rich-props.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop } from "@stencil/core";
+import { Component, Prop, h } from "@stencil/core";
 
 @Component({
   tag: "demo-rich-props",
@@ -8,6 +8,12 @@ export class DemoRichProps {
   @Prop() list: Array<string> = [];
 
   render() {
-    return <ul>{this.list.map(item => <li>{item}</li>)}</ul>;
+    return (
+      <ul>
+        {this.list.map(item => (
+          <li>{item}</li>
+        ))}
+      </ul>
+    );
   }
 }
diff --git a/packages/demo-components/src/index.html b/packages/demo-components/src/index.html
@@ -4,18 +4,14 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
   <title>Stencil Component Starter</title>
-  <script src="/build/demo.js"></script>
+
+  <script type="module" src="/build/demo-components.esm.js"></script>
+  <script nomodule src="/build/demo-components.js"></script>
 
 </head>
 <body>
-  <demo-event-emitter>
-    Click me!
-  </demo-event-emitter>
 
-  <script>
-    document.querySelector('demo-event-emitter').addEventListener('demoEvent', () => {
-      alert('Demo Event was received!');
-    });
-  </script>
+  <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
+
 </body>
 </html>
diff --git a/packages/demo-components/stencil.config.js b/packages/demo-components/stencil.config.js
diff --git a/packages/demo-components/stencil.config.ts b/packages/demo-components/stencil.config.ts
@@ -0,0 +1,11 @@
+import { Config } from "@stencil/core";
+
+export const config: Config = {
+  namespace: "demo-components",
+  outputTargets: [
+    {
+      type: "dist",
+      esmLoaderPath: "../loader"
+    }
+  ]
+};
diff --git a/packages/demo-components/tsconfig.json b/packages/demo-components/tsconfig.json
@@ -4,23 +4,15 @@
     "allowUnreachableCode": false,
     "declaration": false,
     "experimentalDecorators": true,
-    "lib": [
-      "dom",
-      "es2015"
-    ],
+    "lib": ["dom", "es2017"],
     "moduleResolution": "node",
-    "module": "es2015",
-    "target": "es2015",
+    "module": "esnext",
+    "target": "es2017",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "jsx": "react",
     "jsxFactory": "h"
   },
-  "include": [
-    "src",
-    "types/jsx.d.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "types/jsx.d.ts"],
+  "exclude": ["node_modules"]
 }
diff --git a/packages/ember-cli-stencil/lib/generate-import-initializer.js b/packages/ember-cli-stencil/lib/generate-import-initializer.js
@@ -1,30 +1,42 @@
-const { camelCase } = require('lodash');
+'use strict';
+
+const camelCase = require('lodash.camelcase');
 const theredoc = require('theredoc');
 
 function generateInitializer(moduleNames) {
   const modules = moduleNames.map(module => ({
     name: module,
+    polyfillFunction: camelCase(`apply-polyfills-${module}`),
     importFunction: camelCase(`define-${module}`)
   }));
 
   const moduleImports = modules
     .map(
-      ({ name, importFunction }) =>
-        `import { defineCustomElements as ${importFunction} } from '${name}';`
+      ({ name, polyfillFunction, importFunction }) =>
+        theredoc`
+          import {
+            applyPolyfills as ${polyfillFunction},
+            defineCustomElements as ${importFunction}
+          } from '${name}/loader';
+        `
     )
     .reduce(
       (acc, importStatement) =>
         acc + (acc === '' ? '' : '\n') + importStatement,
       ''
     );
 
-  const defineComponents = modules
-    .map(module => module.importFunction)
-    .reduce(
-      (acc, importFunction) =>
-        acc + (acc === '' ? '' : '\n') + `${importFunction}(window);`,
-      ''
-    );
+  const defineComponents = modules.reduce(
+    (acc, { polyfillFunction, importFunction }) =>
+      acc +
+      (acc === '' ? '' : '\n') +
+      theredoc`
+        ${polyfillFunction}().then(function() {
+          ${importFunction}(window);
+        });
+      `,
+    ''
+  );
 
   const initializer = theredoc`
     export function initialize() {

diff --git a/packages/ember-cli-stencil/package.json b/packages/ember-cli-stencil/package.json
@@ -28,14 +28,14 @@
     "ember-auto-import": "^1.5.2",
     "ember-cli-babel": "^7.7.3",
     "ember-cli-htmlbars": "^3.0.1",
-    "lodash": "^4.17.10",
+    "lodash.camelcase": "^4.3.0",
     "theredoc": "^1.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.7.0",
     "ava": "1.0.0-beta.8",
     "broccoli-asset-rev": "^3.0.0",
-    "demo-components": "^0.4.0",
+    "demo-components": "*",
     "ember-cli": "~3.10.0",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-htmlbars-inline-precompile": "^2.1.0",