-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Remove tools/services.md and add stackblitz.md #2529
Changes from 6 commits
dcc52cf
5be186c
5a19243
a2321f4
8bba339
833973e
459269a
d6be16e
4fa7601
eec584b
417063c
1ebff40
63fdc41
bb0b9a5
2b68036
183d264
c0c0cdc
8a33d5a
536d5e9
019a1ba
ccbaef2
a157103
8401dde
09ed36f
9e12e9d
8e1c4e9
c192eef
3da5fd3
d3e3276
1b57ef3
5152cd5
7076a66
bf1581e
5e625c8
54c4c20
d65e5e6
e10b97d
4b14db5
f8ddfc4
6bfc3b0
f6a4674
f013d65
36248de
d9d4ff6
7dda929
22b8531
18276a2
fbf04f9
b4f4ac1
b01c77b
794a7c6
bd79b51
11a65f0
0c204f0
21aa66c
2b704a2
c7d04bc
7fae52a
aeae594
d96d5ff
2c4a8c8
139af55
28900dd
2ccea89
fde847c
995cd89
0a6380f
77c3efd
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
--- | ||
title: "Polymer 3.0 on Stackblitz" | ||
--- | ||
|
||
<!-- toc --> | ||
|
||
[StackBlitz](https://stackblitz.com) is an online editor for web projects. You can use StackBlitz to prototype and preview Polymer elements. | ||
|
||
Here's a [template for Polymer 3.0 to help you get started](https://stackblitz.com/edit/start-polymer3?file=start-polymer3.js). | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we embed this demo right here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We should probably not use
I make sure to lazy load it when we use it in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I gave it a shot, it looked a bit rubbish. More work required when I have more time There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Quick note: having this link means that you'll have to eventually update the project to have 3.0.0 as a dependency instead of the prerelease There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Also in polymer pre.13 we will need to change webcomponents-lite to webcomponents-bundle and webcomponentsjs to version 2.0.0-0 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
|
||
Please note that at the time of writing, StackBlitz requires an `index.js` and `index.html` file to be present in the root folder for all JavaScript projects. You'll need to import your app shell from `index.js`, like so: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Since we mention using this to prototype elements, I think "app shell" is too specific. Maybe "... import JavaScript modules, such as elements, from |
||
|
||
index.js {.caption} | ||
|
||
``` | ||
import `my-app.js`; | ||
``` | ||
|
||
index.html {.caption} | ||
``` | ||
<!-- Include WebComponents polyfills --> | ||
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script> | ||
|
||
<!-- StackBlitz compiles es6 code to es5. Include custom elements adapter to make code work in ES6-native browsers --> | ||
<script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. don't we need the |
||
|
||
<my-app></my-app> | ||
``` | ||
|
||
my-app.js {.caption} | ||
``` | ||
import PolymerElement from '@polymer/polymer/polymer-element.js'; | ||
|
||
class MyApp extends PolymerElement { | ||
... | ||
} | ||
|
||
window.customElements.define('my-app', MyApp); | ||
``` |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Stackblitz => StackBlitz