Merge pull request #3433 from storybooks/stijnkoopal/add-lit-html

Add lit-html support

addons/knobs/src/polymer/WrapStory.html

@@ -1,5 +1,7 @@
 <dom-module id="wrap-story">
   <script>
+    import { html, render, TemplateResult } from 'lit-html';
+
     class WrapStory extends HTMLElement {
       static get is() {
         return 'wrap-story';
@@ -75,6 +77,11 @@
         const wrapper = this.shadowRoot.querySelector('div#wrapper');
         if (typeof component === 'string') {
           wrapper.innerHTML = component;
+        } else if (component instanceof TemplateResult) {
+          //`render` stores the TemplateInstance in the Node and tries to update based on that.
+          //Since we reuse `rootElement` for all stories, remove the stored instance first.
+          render(html``, wrapper);
+          render(component, wrapper);
         } else {
           wrapper.innerHTML = '';
           wrapper.appendChild(component);

app/polymer/package.json

@@ -53,12 +53,14 @@
     "webpack-hot-middleware": "^2.22.0"
   },
   "devDependencies": {
+    "lit-html": "^0.9.0",
     "nodemon": "^1.17.3",
     "polymer-webpack-loader": "^2.0.2"
   },
   "peerDependencies": {
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "babel-runtime": ">=6.0.0",
+    "lit-html": "0.9.0",
     "polymer-webpack-loader": "2.0.2"
   }
 }

app/polymer/src/client/preview/render.js

@@ -1,5 +1,6 @@
 import { document } from 'global';
 import { stripIndents } from 'common-tags';
+import { html, render, TemplateResult } from 'lit-html';
 import { logger } from '@storybook/client-logger';
 import { nopreview } from './nopreview';
 import { errorpreview } from './errorpreview';
@@ -43,6 +44,11 @@ export function renderMain(data, storyStore) {
   }
   if (typeof component === 'string') {
     rootElement.innerHTML = component;
+  } else if (component instanceof TemplateResult) {
+    // `render` stores the TemplateInstance in the Node and tries to update based on that.
+    // Since we reuse `rootElement` for all stories, remove the stored instance first.
+    render(html``, rootElement);
+    render(component, rootElement);
   } else {
     rootElement.innerHTML = '';
     rootElement.appendChild(component);

examples/polymer-cli/package.json

@@ -8,6 +8,7 @@
     "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "dependencies": {
+    "lit-html": "^0.9.0",
     "@polymer/polymer": "^2.6.0",
     "@storybook/addon-actions": "4.0.0-alpha.2",
     "@storybook/addon-knobs": "4.0.0-alpha.2",

examples/polymer-cli/src/stories/addon-knobs.stories.js

@@ -1,6 +1,7 @@
 import { storiesOf } from '@storybook/polymer';
 import { action } from '@storybook/addon-actions';
 import { document } from 'global';
+import { html } from 'lit-html';
 
 import {
   withKnobs,
@@ -23,6 +24,10 @@ storiesOf('Addon|Knobs', module)
     button('callback', () => el.setAttribute('title', 'testing'));
     return el;
   })
+  .add('lit-html', () => {
+    const title = text('Button title', 'Hello');
+    return html`<playground-button title="${title}"></playground-button>`;
+  })
   .add('complex', () => {
     const name = text('Name', 'Jane');
     const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });

examples/polymer-cli/src/stories/custom-rendering.stories.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/polymer';
 import { document } from 'global';
+import { html } from 'lit-html';
 import { StringTemplateButton } from '../string-template-button';
 
 import '../separated-button/separated-button.html';
@@ -12,4 +13,5 @@ storiesOf('Custom|Methods for rendering', module)
     el.setAttribute('title', 'Rendered with document.createElement');
     return el;
   })
-  .add('Polymer instance', () => new StringTemplateButton());
+  .add('Polymer instance', () => new StringTemplateButton())
+  .add('Lit html', () => html`<separated-button title="yes!"></separated-button>`);

yarn.lock

@@ -9827,6 +9827,10 @@ listr@^0.13.0:
     stream-to-observable "^0.2.0"
     strip-ansi "^3.0.1"
 
+lit-html@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-0.9.0.tgz#a445ecbb3da7d8b17690e6ade6c872c89385092a"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"