feat(app): migrate to skate 5.x

.yarnrc

@@ -0,0 +1 @@
+save-prefix false

package.json

@@ -49,36 +49,43 @@
     }
   },
   "devDependencies": {
-    "awesome-typescript-loader": "3.0.8",
+    "awesome-typescript-loader": "3.1.3",
     "commitizen": "2.9.6",
-    "css-loader": "0.26.2",
+    "copy-webpack-plugin": "4.0.1",
+    "css-loader": "0.28.3",
     "cz-conventional-changelog": "2.0.0",
-    "extract-text-webpack-plugin": "2.0.0",
+    "extract-text-webpack-plugin": "2.1.0",
     "html-webpack-plugin": "2.28.0",
-    "husky": "0.13.1",
+    "husky": "0.13.4",
     "progress-bar-webpack-plugin": "1.9.3",
-    "pushstate-server": "2.2.1",
+    "pushstate-server": "3.0.0",
     "shx": "0.2.2",
+    "source-map-loader": "0.2.1",
     "standard-version": "4.0.0",
     "strip-json-comments-cli": "^1.0.1",
-    "style-loader": "0.13.2",
+    "style-loader": "0.18.1",
     "to-string-loader": "1.1.5",
-    "tslint": "4.4.2",
-    "tslint-react": "2.4.0",
-    "typescript": "2.2.1",
-    "typescript-formatter": "5.0.0",
-    "validate-commit-msg": "2.11.1",
-    "webpack": "2.2.1",
-    "webpack-bundle-analyzer": "^2.3.0",
+    "tslint": "5.3.2",
+    "tslint-react": "3.0.0",
+    "typescript": "2.3.3",
+    "typescript-formatter": "5.2.0",
+    "uglify-es": "3.0.13",
+    "uglifyjs-webpack-plugin": "0.4.3",
+    "validate-commit-msg": "2.12.1",
+    "webpack": "2.6.1",
+    "webpack-bundle-analyzer": "2.3.0",
     "webpack-config-utils": "2.3.0",
-    "webpack-dev-server": "2.4.1"
+    "webpack-dev-server": "2.4.5"
   },
   "dependencies": {
-    "decko": "1.1.3",
-    "sanitize.css": "4.1.0",
-    "skatejs": "4.6.7",
-    "skatejs-web-components": "5.2.1",
-    "snarkdown": "1.2.1",
-    "tslib": "1.6.0"
+    "@webcomponents/template": "1.0.0",
+    "@webcomponents/webcomponents-platform": "1.0.0",
+    "@webcomponents/webcomponentsjs": "1.0.1",
+    "es6-promise": "4.1.0",
+    "preact": "8.1.0",
+    "sanitize.css": "5.0.0",
+    "skatejs": "5.0.0-alpha.9",
+    "snarkdown": "1.2.2",
+    "tslib": "1.7.1"
   }
 }

src/@skatejs/env.ts

@@ -0,0 +1,3 @@
+const { attachShadow } = HTMLElement.prototype;
+
+export const hasNativeShadowDomSupport = attachShadow && attachShadow.toString().indexOf('native code') > -1;

src/@skatejs/grip-tape/decorators.ts

@@ -0,0 +1 @@
+

src/@skatejs/grip-tape/index.ts

@@ -0,0 +1 @@
+export * from './utils';

src/@skatejs/grip-tape/mixins.ts

@@ -0,0 +1 @@
+

src/@skatejs/grip-tape/utils.ts

@@ -0,0 +1,13 @@
+import { Component } from 'skatejs';
+import { hasNativeShadowDomSupport } from '../env';
+
+const $template = typeof Symbol === 'function' && Symbol() || '__$template__';
+
+export function scopeCss(elem: Component<any> & { [key: string]: any }, css: string): string | void {
+  if (hasNativeShadowDomSupport) {
+    return css;
+  }
+  const template = elem[$template] || (elem[$template] = document.createElement('template'));
+  template.innerHTML = `<style>${css}</style>`;
+  window.ShadyCSS.prepareTemplate(template, elem.localName);
+}

src/@skatejs/web-components/index.ts

@@ -0,0 +1,6 @@
+require('es6-promise').polyfill();
+import { loadWebComponentPolyfills } from './loaders';
+
+loadWebComponentPolyfills();
+
+export * from './loaders';

src/@skatejs/web-components/loaders.ts

@@ -0,0 +1,83 @@
+// this is how new @skate/web-components should look like
+
+export const WC_READY_EVENT = 'WebComponentsReady';
+
+export function whenWebComponentsReady() {
+  return new Promise((resolve, reject) => {
+    window.addEventListener(WC_READY_EVENT, function() {
+      resolve(WC_READY_EVENT);
+    });
+  });
+}
+
+export function loadWebComponentPolyfills(useEs5ShimAdapter = true) {
+  return loadAdapter(useEs5ShimAdapter).then(lazyLoadPolyfills);
+}
+
+// custom LOADER
+function loadAdapter(useAdapter = true) {
+  return useAdapter && window.customElements
+    // tslint:disable-next-line:max-line-length
+    ? System.import(/* webpackChunkName = "es5-adapter" */ '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js')
+    : Promise.resolve();
+}
+
+function lazyLoadPolyfills() {
+
+  // global for (1) existence means `WebComponentsReady` will file,
+  // (2) WebComponents.ready == true means event has fired.
+  window.WebComponents = window.WebComponents || {};
+  // Feature detect which polyfill needs to be imported.
+
+  // tslint:disable-next-line:max-line-length
+  const loadCustomElements = !window.customElements || window.customElements.forcePolyfill;
+  const loadShadyDOM = !('attachShadow' in Element.prototype && 'getRootNode' in Element.prototype) || (window.ShadyDOM && window.ShadyDOM.force);
+  // tslint:disable-next-line:max-line-length
+  const loadFullPolyfillSuite = !('content' in document.createElement('template')) || !window.Promise || !Array.from || !(document.createDocumentFragment().cloneNode() instanceof DocumentFragment);
+
+
+  // NOTE: any browser that does not have template or ES6 features must load:
+  // - webcomponents-platform(Array.from,Object.assign,CustomEvents polyfills)
+  // - template polyfill
+  // - this saves 20kB(HTMLImports) + 15kb(template,assign,from,CustomEvents)
+  // in IE in favor of loading '@webcomponents/webcomponentsjs/webcomponents-lite.js
+  if (loadFullPolyfillSuite) {
+    return loadES6requiredPolyfills().then(loadCEandSDpolyfill);
+  }
+
+  if (loadShadyDOM && loadCustomElements) {
+    return loadCEandSDpolyfill();
+  }
+
+
+  // Ensure `WebComponentsReady` is fired also when there are no polyfills loaded.
+  // however, we have to wait for the document to be in 'interactive' state,
+  // otherwise a rAF may fire before scripts in <body>
+
+  const fire = function() {
+    requestAnimationFrame(function() {
+      window.WebComponents.ready = true;
+      document.dispatchEvent(new CustomEvent('WebComponentsReady', { bubbles: true }));
+    });
+  };
+
+  if (document.readyState !== 'loading') {
+    fire();
+  } else {
+    document.addEventListener('readystatechange', function wait() {
+      fire();
+      document.removeEventListener('readystatechange', wait);
+    });
+  }
+}
+
+function loadES6requiredPolyfills() {
+  return Promise.all([
+    System.import('@webcomponents/template'),
+    System.import('@webcomponents/webcomponents-platform')
+  ]);
+}
+
+function loadCEandSDpolyfill() {
+  return System.import('@webcomponents/webcomponentsjs/webcomponents-sd-ce.js');
+}

src/app/App.css

@@ -2,8 +2,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100vh;
-  font-size: 2rem;
+}
+
+:host > div {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 :host:not(:defined) {
   /* Pre-style, give layout, replicate app-drawer's eventual styles, etc. */

src/app/App.tsx

@@ -1,7 +1,10 @@
-import { Component, h, prop } from 'skatejs';
+import { Component, h, props } from 'skatejs';
 
+import { scopeCss } from '../@skatejs/grip-tape';
 import styles from './App.css';
+import { store } from './app.store';
 import { MarkdownEditor } from './components/markdown-editor';
+import './components/markdown-editor';
 
 type Props = {
   greeting: string,
@@ -10,20 +13,25 @@ export default class App extends Component<Props> {
   static get is() { return 'my-app'; }
   static get props() {
     return {
-      greeting: prop.string()
+      greeting: props.string
     };
   }
 
   greeting: string = 'World';
 
+  css = scopeCss(this, styles);
+
   renderCallback({ greeting }: Props) {
-    return [
-      <style>{styles}</style>,
-      <div>Hello {greeting}!</div>,
-      <p>
-        <blockquote>Don't hate! Just Skate!</blockquote>
-      </p>,
-      <MarkdownEditor />
-    ];
+    return (
+      <div>
+        <style>{this.css}</style>
+        <div>Hello {greeting}!</div>
+        <p>
+          <blockquote>Don't hate! Just Skate!</blockquote>
+        </p>
+        <MarkdownEditor.is content={store.content} />
+        {/*<my-markdown-editor content={store.content}/>*/}
+      </div>
+    );
   }
-};
+}

src/app/app.store.ts

@@ -0,0 +1,17 @@
+export const store = {
+  content: (
+    `## Snarkdown
+
+![snarkdown](http://emojipop.net/data/images/emoji_set_77.png)
+
+*[Snarkdown](http://github.com/developit/snarkdown)* is __easy__ to \`use\`!
+
+Here's an [**important** anchor link](#example).
+
+Two newlines creates a line break.
+
+Or, end a line with two spaces.
+Just like that!`
+  )
+};
+

src/app/components/markdown-editor/MarkdownEditor.css

@@ -1,9 +1,17 @@
+
 :host{
   font-size: 1rem;
   padding: .5rem;
   box-sizing: border-box;
-  width: 80%;
   box-shadow: 1px 0 1rem #333;
+  width: 80%;
+}
+:host > div {
+
+}
+
+textarea {
+  background-color: white;
 }
 
 .in {

src/app/components/markdown-editor/MarkdownEditor.tsx

@@ -1,63 +1,56 @@
-import { bind } from 'decko';
-import { Component, ComponentProps, h, prop, props } from 'skatejs';
+import { Component, ComponentProps, h, props } from 'skatejs';
 import snarkdown from 'snarkdown';
 
+import { scopeCss } from '../../../@skatejs/grip-tape';
 import styles from './MarkdownEditor.css';
 
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'my-markdown-editor': Props
+    }
+  }
+}
+
 type Props = {
   content?: string;
 };
 
 export default class MarkdowEditor extends Component<Props> {
-  static get is() { return 'my-markdown-editor'; }
+  static readonly is = 'my-markdown-editor';
   static get props(): ComponentProps<MarkdowEditor, Props> {
     return {
-      content: prop.string(),
+      content: props.string,
     };
   }
 
-  private mdTargetRef: HTMLDivElement;
-
-  private content: string = (
-    `## Snarkdown
+  css = scopeCss(this, styles);
 
-![snarkdown](http://emojipop.net/data/images/emoji_set_77.png)
-
-*[Snarkdown](http://github.com/developit/snarkdown)* is __easy__ to \`use\`!
-
-Here's an [**important** anchor link](#example).
-
-Two newlines creates a line break.
-
-Or, end a line with two spaces.
-Just like that!`
-  );
+  private mdTargetRef: HTMLDivElement;
 
   renderCallback() {
-    const { content } = this;
-    return [
-      <style>{styles}</style>,
+    const { content } = this.props;
+    return (
       <div>
+        <style>{this.css}</style>
         <textarea class="in" cols={40} rows={10} onInput={this.handleInput}>{content}</textarea>
-        <div class="out" ref={this.setMdRef} skip />
+        <div class="out" ref={this.setMdRef} />
       </div>
-    ];
+    );
   }
 
   renderedCallback() {
-    const { content } = this;
+    const { content = '' } = this.props;
     this.mdTargetRef.innerHTML = this.renderMarkdown(content);
   }
 
-  @bind()
-  private setMdRef(el: HTMLDivElement) {
+  private setMdRef = (el: HTMLDivElement) => {
     this.mdTargetRef = el;
   }
 
-  @bind()
-  private handleInput(ev: KeyboardEvent) {
+  private handleInput = (ev: KeyboardEvent) => {
     const { value } = ev.target as HTMLTextAreaElement;
-    props(this, { content: value });
+    this.props = { content: value };
   }
 
   private renderMarkdown(text: string) {

src/environment.ts

@@ -0,0 +1,3 @@
+
+export const IS_DEV = process.env.NODE_ENV === 'development';
+export const IS_PROD = process.env.NODE_ENV === 'production';