[WIP] Add Polymer 2 support #2225

leonrodenburg · 2017-11-03T14:31:30Z

What I did

We added initial support for Polymer 2 and set up an example application. We are in the process of improving the compatibility in all browsers and adding support for all Storybook addons. Tests have to be added.

How to test

Run yarn in the repo root
Run yarn bootstrap in the repo root
Change to examples/polymer-cli directory (cd examples/polymer-cli)
Start Storybook (yarn storybook)

The Welcome page and example stories should be shown at http://localhost:9001/

TODO

… into add-polymer-support

Run through webpack-dev-server

…anged back

Action addon works

robdodson · 2017-12-04T21:08:59Z

I would wait on supporting Polymer 3 until the team starts announcing a release candidate.

equinusocio · 2017-12-04T21:10:58Z

@robdodson v3 is not just a v2 delivered with npm? Do you have info about some polymer 3 announcements?

robdodson · 2017-12-05T18:00:15Z

@equinusocio yes it will be delivered over npm but I think the team is still designing the project and I don't know when they plan to release it. So supporting an early alpha might be difficult because they may make breaking changes along the way.

# Conflicts: # package.json # yarn.lock

ndelangen · 2017-12-21T10:44:00Z

We should add a netlify deploy/site for this, so we can demo this!

# Conflicts: # yarn.lock

# Conflicts: # .editorconfig # lib/cli/package.json # yarn.lock

# Conflicts: # yarn.lock

ndelangen · 2018-01-12T21:42:37Z

@shilman I'd like your approval to merge this

shilman · 2018-01-13T09:04:32Z

app/polymer/src/client/manager/provider.js

+import createChannel from '@storybook/channel-postmessage';
+import Preview from './preview';
+
+export default class ReactProvider extends Provider {


Is this called ReactProvider and not PolymerProvider because it bridging between Polymer and React?

shilman

Is there any reason why don't have demo components defined in here? We do in both react/angular (but don't in vue). don't care too heavily either way, but maybe we should be consistent?

Hypnosphi · 2018-02-25T00:00:30Z

lib/cli/generators/POLYMER/template/src/stories/index.stories.js

@@ -0,0 +1 @@
+// TODO: add demo stories


Will we do that?

tonai · 2018-04-27T15:29:47Z

Hi all,

I have tried the following on my existing stencil project (which is derivated from stencil-component-starter):

npm install --save-dev @storybook/polymer polymer-webpack-loader

Then I added the script line in the package.json:

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook -s www"
  }
}

I created the .storybook folder containing a basic config.js file:

import { configure } from '@storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

And a preview-head.html with:

<script src="/build/mycomponent.js"></script>
<link rel="stylesheet" type="text/css" href="/build/mycomponent.css">

Finally I created a story:

import { storiesOf } from '@storybook/polymer';
const stories = storiesOf('Button', module);
stories.add('using string', () => ('<hec-button>Click here</hec-button>'));

But I got the following error:

custom-elements-es5-adapter.js:4 Uncaught TypeError: Class constructor  cannot be invoked without 'new'
    at new j (custom-elements-es5-adapter.js:4)
    at renderMain (VM489 preview.bundle.js:27558)
    at renderPreview (VM489 preview.bundle.js:27574)
    at renderUI (VM489 preview.bundle.js:26461)
    at Object.dispatch (VM489 preview.bundle.js:24235)
    at ConfigApi._renderMain (VM489 preview.bundle.js:27342)
    at render (VM489 preview.bundle.js:27293)
    at ConfigApi.configure (VM489 preview.bundle.js:27318)
    at Object.<anonymous> (VM489 preview.bundle.js:26365)
    at Object.defineProperty.value (VM489 preview.bundle.js:26366)

This comes from the custom-elements-es5-adapter.js script which is included by @storybook/polymer (@storybook/polymer/dist/server/iframe.html.ejs).

I have commented out the custom-elements-es5-adapter.js and webcomponents-lite.js scripts directly in the file and it finally works.

I don't know if I can override the template iframe.html.ejs inside my project, because this is clearly a dirty trick to make it works...

ndelangen · 2018-05-01T08:29:41Z

@naipath something you could do here?

equinusocio · 2018-05-01T08:39:59Z

Polymer 3 is on the way, it will be released in weeks...do worth integrating v2?

tonai · 2018-05-02T07:47:30Z

Updating my process with the usage of @storybook/[email protected]:

Just changing the first npm install and keep the rest:

npm install --save-dev @storybook/polymer@4.0.0-alpha.4 polymer-webpack-loader lit-html

And it works 👍 😄

Just one warning is remaining:

WARNING in ./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js
Module not found: Error: Can't resolve 'vertx' in './node_modules/@webcomponents/webcomponentsjs'

But doesn't seems to be blocking so far.

ndelangen and others added 30 commits November 3, 2017 09:39

ADD base for app/polymer && ADD base for example/polymer-cli

f819839

REPLACE vue with polymer

7025701

REMOVE vue from webpack.prod

ead9750

Added an example polymer application

47131c4

Merge branch 'add-polymer-support' of github.com:storybooks/storybook…

64bd0fa

… into add-polymer-support

Updated readme a bit

297a587

ADD polymer-cli so this is not a global dependency

f3d8169

REMOVE vue render components

75f0c9e

ADD basics storybook in example/polymer-cli

b4ed3c6

Use Babel for transpilation

bcdd36e

Run through webpack-dev-server

ADD dependencies for storybook to example/polymer-cli

84cef3e

ADD example/polymer-cli to yarn workspaces

18a8924

Add polymer support in CLI

57f0104

Simplest approach of adding an element for viewing

9b750f4

Fixed require path for storybook config

3fd410e

Changed paths in order to render an element, the paths, need to be ch…

74ab41b

…anged back

Add very simple test for CLI Polymer support

57acec3

Further implementation of the render function for polymer

bc2382c

Use node_modules in examples/polymer-cli dir instead of project root

e2c8b6e

Added improved "NoPreview" and "ErrorPreview"

b9d7bfa

Added custom elements adapter to Polymer iframe

42e887d

Properly close <base> element

df19908

Added Welcome story

1d4f472

Install webcomponents polyfills locally

19f5a96

Changed png for svg, started integrating addons

5674eee

Fixed typo

cd8db75

Renamed PlaygroundButton to playground-button for consistency

fcaf34b

Altered story name

d1c7df5

Fixed duplicate entry

3aa959b

Render an HTMLElement in your story

8d6b9ab

Action addon works

Updated version numbers

6ca2c72

Hypnosphi approved these changes Dec 4, 2017

View reviewed changes

Merge branch 'release/3.3' into add-polymer-support

48f37f8

# Conflicts: # package.json # yarn.lock

ndelangen added 3 commits December 21, 2017 12:46

UPDATE polymer cli test snapshot

943df0f

Merge branch 'release/3.3' into add-polymer-support

51725cf

# Conflicts: # yarn.lock

Merge branch 'release/3.3' into add-polymer-support

dd42353

ndelangen changed the base branch from release/3.3 to master December 23, 2017 22:54

ndelangen added 4 commits January 12, 2018 20:24

Merge branch 'master' into add-polymer-support

e094775

# Conflicts: # .editorconfig # lib/cli/package.json # yarn.lock

Merge branch 'master' into add-polymer-support

ca6d67e

# Conflicts: # yarn.lock

REFACTOR away commons to core && CHANGE logging to logger

f75041b

UPDATE lockfile

9023b47

REFACTOR stories into 2 files for clarity

e878dc5

shilman reviewed Jan 13, 2018

View reviewed changes

shilman approved these changes Jan 13, 2018

View reviewed changes

Merge branch 'master' into add-polymer-support

17724f2

shilman merged commit 4c050d2 into master Jan 13, 2018

shilman deleted the add-polymer-support branch January 13, 2018 10:12

Hypnosphi reviewed Feb 25, 2018

View reviewed changes

lib/cli/generators/POLYMER/template/src/stories/index.stories.js

@@ -0,0 +1 @@

// TODO: add demo stories

Copy link

Member

Hypnosphi Feb 25, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will we do that?

ndelangen removed ci: do not merge in progress labels May 1, 2018

dependabot-preview bot mentioned this pull request May 7, 2019

Bump eslint-plugin-react from 7.12.4 to 7.13.0 #6728

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Add Polymer 2 support #2225

[WIP] Add Polymer 2 support #2225

leonrodenburg commented Nov 3, 2017 •

edited by lonyele

Loading

robdodson commented Dec 4, 2017

equinusocio commented Dec 4, 2017 •

edited

Loading

robdodson commented Dec 5, 2017

ndelangen commented Dec 21, 2017

ndelangen commented Jan 12, 2018

shilman Jan 13, 2018

shilman left a comment

Hypnosphi Feb 25, 2018

tonai commented Apr 27, 2018

ndelangen commented May 1, 2018

equinusocio commented May 1, 2018

tonai commented May 2, 2018

[WIP] Add Polymer 2 support #2225

[WIP] Add Polymer 2 support #2225

Conversation

leonrodenburg commented Nov 3, 2017 • edited by lonyele Loading

What I did

How to test

TODO

robdodson commented Dec 4, 2017

equinusocio commented Dec 4, 2017 • edited Loading

robdodson commented Dec 5, 2017

ndelangen commented Dec 21, 2017

ndelangen commented Jan 12, 2018

shilman Jan 13, 2018

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

Hypnosphi Feb 25, 2018

Choose a reason for hiding this comment

tonai commented Apr 27, 2018

ndelangen commented May 1, 2018

equinusocio commented May 1, 2018

tonai commented May 2, 2018

leonrodenburg commented Nov 3, 2017 •

edited by lonyele

Loading

equinusocio commented Dec 4, 2017 •

edited

Loading