Make all tests pass.

.prettierignore

@@ -1,3 +1 @@
 package.json
-package-lock.json
-site/fills

package.json

@@ -2,6 +2,10 @@
   "babel": {
     "env": {
       "es": {
+        "ignore": [
+          "__tests__",
+          "node_modules"
+        ],
         "presets": [
           [
             "env",
@@ -15,6 +19,10 @@
         ]
       },
       "esnext": {
+        "ignore": [
+          "__tests__",
+          "node_modules"
+        ],
         "presets": [
           "es2016",
           "es2017",
@@ -24,6 +32,10 @@
         ]
       },
       "node": {
+        "ignore": [
+          "__tests__",
+          "node_modules"
+        ],
         "presets": [
           [
             "env",
@@ -47,6 +59,10 @@
         ]
       },
       "rollup": {
+        "ignore": [
+          "__tests__",
+          "node_modules"
+        ],
         "presets": [
           [
             "env",
@@ -72,21 +88,28 @@
     }
   },
   "dependencies": {
-    "@skatejs/renderer-lit-html": "^0.0.0",
-    "@skatejs/renderer-preact": "^0.1.0",
-    "@skatejs/renderer-react": "^0.0.0",
     "@skatejs/sk-router": "^0.1.0",
+    "babel-register": "^6.26.0",
+    "glob": "^7.1.2",
     "highlight.js": "^9.12.0",
+    "jest-environment-node": "^21.1.0",
+    "js-beautify": "^1.7.3",
     "lit-html": "^0.7.1",
+    "mkdirp": "^0.5.1",
+    "outdent": "^0.4.1",
+    "parse5": "^3.0.2",
     "preact": "^8.2.5",
     "prismjs": "^1.8.4",
     "react": "^15.0.0",
     "react-dom": "^15.0.0",
+    "prettier": "^1.7.0",
+    "uglify-es": "^3.1.2",
+    "undom": "^0.3.3",
+    "yargs": "^9.0.1",
     "yocss": "^0.5.1"
   },
   "devDependencies": {
     "@skatejs/bore": "^4.0.0",
-    "@skatejs/ssr": "^0.16.0",
     "@skatejs/val": "^0.3.1",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^7.2.3",
@@ -129,7 +152,7 @@
     "build:es": "BABEL_ENV=es bolt workspaces exec --only-fs packages/* -- babel src --out-dir es",
     "build:esnext": "BABEL_ENV=esnext bolt workspaces exec --only-fs packages/* -- babel src --out-dir esnext",
     "build:node": "BABEL_ENV=node bolt workspaces exec --only-fs packages/* -- babel src --out-dir node",
-    "build:umd": "BABEL_ENV=rollup bolt workspaces exec --only-fs packages/* -- rollup -c && BABEL_ENV=rollup bolt workspaces exec --only-fs packages/* -- rollup -c --min",
+    "build:umd": "BABEL_ENV=rollup bolt workspaces exec --only-fs packages/* -- rollup -c ../../rollup.config.js && BABEL_ENV=rollup bolt workspaces exec --only-fs packages/* -- rollup -c ../../rollup.config.js --min",
     "test": "jest",
     "dev": "cd site && webpack-dev-server --hot",
     "precommit": "lint-staged",
@@ -142,7 +165,8 @@
     "modulePathIgnorePatterns": [
       "./node_modules"
     ],
-    "testEnvironment": "@skatejs/ssr/jest"
+    "testEnvironment": "./packages/ssr/jest",
+    "transformIgnorePatterns": []
   },
   "prettier": {
     "singleQuote": true

packages/renderer-lit-html/package.json

@@ -0,0 +1,32 @@
+{
+  "author": "Trey Shugart <[email protected]> (http://treshugart.github.io)",
+  "browser": "umd/index.js",
+  "description": "A SkateJS renderer for Lit HTML.",
+  "esnext": "esnext/index.js",
+  "devDependencies": {
+    "lit-html": "^0.7.1"
+  },
+  "files": [
+    "es/",
+    "esnext/",
+    "node/",
+    "umd/"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "components",
+    "custom",
+    "dom",
+    "elements",
+    "web",
+    "vdom",
+    "virtual"
+  ],
+  "main": "src/index.js",
+  "module": "es/index.js",
+  "name": "@skatejs/renderer-lit-html",
+  "peerDependencies": {
+    "lit-html": "^0.7.1"
+  },
+  "version": "0.0.0"
+}

packages/renderer-lit-html/src/__tests__/index.js

@@ -0,0 +1,20 @@
+import { html } from 'lit-html';
+import withRenderer from '..';
+
+class MyElement extends withRenderer() {
+  renderCallback({ name }) {
+    return html`Hello, ${name}!`;
+  }
+}
+customElements.define('my-element', MyElement);
+
+describe('@skatejs/renderer-lit-html', () => {
+  it('renders', () => {
+    const el = new MyElement();
+    expect(el.innerHTML).toEqual('');
+    el.rendererCallback(el, el.renderCallback.bind(el, { name: 'World' }));
+    expect(el.innerHTML).toEqual('Hello, World!');
+    el.rendererCallback(el, el.renderCallback.bind(el, { name: 'Bob' }));
+    expect(el.innerHTML).toEqual('Hello, Bob!');
+  });
+});

packages/renderer-lit-html/src/index.js

@@ -0,0 +1,8 @@
+import { render } from 'lit-html/lib/lit-extended';
+
+export default (Base = HTMLElement) =>
+  class extends Base {
+    rendererCallback(renderRoot, renderCallback) {
+      render(renderCallback(), renderRoot);
+    }
+  };

packages/renderer-preact/package.json

@@ -0,0 +1,32 @@
+{
+  "author": "Trey Shugart <[email protected]> (http://treshugart.github.io)",
+  "browser": "umd/index.js",
+  "description": "A SkateJS renderer for Preact.",
+  "esnext": "esnext/index.js",
+  "devDependencies": {
+    "preact": "^8.2.5"
+  },
+  "files": [
+    "es/",
+    "esnext/",
+    "node/",
+    "umd/"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "components",
+    "custom",
+    "dom",
+    "elements",
+    "web",
+    "vdom",
+    "virtual"
+  ],
+  "main": "src/index.js",
+  "module": "es/index.js",
+  "name": "@skatejs/renderer-preact",
+  "peerDependencies": {
+    "preact": "^8.2.5"
+  },
+  "version": "0.1.0"
+}

packages/renderer-preact/src/__tests__/index.js

@@ -0,0 +1,49 @@
+/** @jsx h */
+
+import { Component, h } from 'preact';
+import withRenderer from '..';
+
+class MyElement extends withRenderer() {
+  renderCallback({ name }) {
+    return <div>Hello, {name}!</div>;
+  }
+}
+customElements.define('my-element', MyElement);
+
+test('renders', () => {
+  function testContent(text) {
+    return `<div>Hello, ${text}!</div>`;
+  }
+
+  const el = new MyElement();
+  expect(el.innerHTML).toEqual('');
+  el.rendererCallback(el, el.renderCallback.bind(el, { name: 'World' }));
+  expect(el.innerHTML).toEqual(testContent('World'));
+  el.rendererCallback(el, el.renderCallback.bind(el, { name: 'Bob' }));
+  expect(el.innerHTML).toEqual(testContent('Bob'));
+});
+
+test('wrappers', () => {
+  class PreactComponent extends Component {
+    render() {
+      return <div>Hello, {this.props.children}!</div>;
+    }
+  }
+
+  class PreactComponentWrapper extends withRenderer() {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    renderCallback() {
+      return <PreactComponent {...this.props} />;
+    }
+  }
+
+  customElements.define('preact-component-wrapper', PreactComponentWrapper);
+
+  const el = new PreactComponentWrapper();
+  const { shadowRoot } = el;
+  el.rendererCallback(shadowRoot, el.renderCallback.bind(el));
+  expect(shadowRoot.innerHTML).toEqual('<div>Hello, <slot></slot>!</div>');
+});

packages/renderer-preact/src/index.js

@@ -0,0 +1,22 @@
+/** @jsx h */
+
+import { h, render } from 'preact';
+
+export default (Base = HTMLElement) =>
+  class extends Base {
+    get props() {
+      // We override props so that we can satisfy most use
+      // cases for children by using a slot.
+      return {
+        ...super.props,
+        ...{ children: <slot /> }
+      };
+    }
+    rendererCallback(renderRoot, renderCallback) {
+      this._preactDom = render(
+        renderCallback(),
+        renderRoot,
+        this._preactDom || renderRoot.children[0]
+      );
+    }
+  };

packages/renderer-react/package.json

@@ -0,0 +1,34 @@
+{
+  "author": "Trey Shugart <[email protected]> (http://treshugart.github.io)",
+  "browser": "umd/index.js",
+  "description": "A SkateJS renderer for React.",
+  "esnext": "esnext/index.js",
+  "devDependencies": {
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
+  },
+  "files": [
+    "es/",
+    "esnext/",
+    "node/",
+    "umd/"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "components",
+    "custom",
+    "dom",
+    "elements",
+    "web",
+    "vdom",
+    "virtual"
+  ],
+  "main": "src/index.js",
+  "module": "es/index.js",
+  "name": "@skatejs/renderer-react",
+  "peerDependencies": {
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
+  },
+  "version": "0.0.0"
+}

packages/renderer-react/src/__tests__/index.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import withRenderer from '..';
+
+class MyElement extends withRenderer() {
+  renderCallback({ name }) {
+    return <div>Hello, {name}!</div>;
+  }
+}
+customElements.define('my-element', MyElement);
+
+test('renders', () => {
+  function testContent(text) {
+    return `<div data-reactroot=\"\"><!-- react-text: 2 -->Hello, <!-- /react-text --><!-- react-text: 3 -->${
+      text
+    }<!-- /react-text --><!-- react-text: 4 -->!<!-- /react-text --></div>`;
+  }
+
+  const el = new MyElement();
+  expect(el.innerHTML).toEqual('');
+  el.rendererCallback(el, el.renderCallback.bind(el, { name: 'World' }));
+  expect(el.innerHTML).toEqual(testContent('World'));
+  el.rendererCallback(el, el.renderCallback.bind(el, { name: 'Bob' }));
+  expect(el.innerHTML).toEqual(testContent('Bob'));
+});
+
+test('wrappers', () => {
+  class ReactComponent extends Component {
+    render() {
+      return <div>Hello, {this.props.children}!</div>;
+    }
+  }
+
+  class ReactComponentWrapper extends withRenderer() {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+    renderCallback() {
+      return <ReactComponent {...this.props} />;
+    }
+  }
+
+  customElements.define('react-component-wrapper', ReactComponentWrapper);
+
+  const el = new ReactComponentWrapper();
+  const { shadowRoot } = el;
+  el.rendererCallback(shadowRoot, el.renderCallback.bind(el));
+  expect(shadowRoot.innerHTML).toEqual(
+    '<div data-reactroot=""><!-- react-text: 2 -->Hello, <!-- /react-text --><slot></slot><!-- react-text: 4 -->!<!-- /react-text --></div>'
+  );
+});

packages/renderer-react/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+export default (Base = HTMLElement) =>
+  class extends Base {
+    get props() {
+      // We override props so that we can satisfy most use
+      // cases for children by using a slot.
+      return {
+        ...super.props,
+        ...{ children: <slot /> }
+      };
+    }
+    rendererCallback(renderRoot, renderCallback) {
+      render(renderCallback(), renderRoot);
+    }
+  };