diff --git a/app/3.0/docs/stack-blitz.md b/app/3.0/docs/stack-blitz.md new file mode 100644 index 0000000000..934d3b508e --- /dev/null +++ b/app/3.0/docs/stack-blitz.md @@ -0,0 +1,41 @@ +--- +title: "Polymer 3.0 on StackBlitz" +--- + + + +[StackBlitz](https://stackblitz.com) is an online editor for web projects. You can use StackBlitz to prototype and preview Polymer elements and apps without a build step. + +StackBlitz transpiles ES6 to ES5, so samples with Polymer 3.0 code can run on any browser. You can install dependencies using npm, and import them with Node.js-style module resolution (`import {PolymerElement} from '@polymer/polymer/polymer-element.js'`). + +You can still use Polymer 3.0 in other online code editors, like [Plunker](https://plnkr.co/) or [jsbin](https://jsbin.com/), but you may need to use non-standard paths to import dependencies, and the code may not run on older browsers. + +Here's a [StackBlitz template for Polymer 3.0 to help you get started](https://stackblitz.com/edit/start-polymer3?file=start-polymer3.js). + +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 JavaScript modules, such as elements, from `index.js`: + +index.js {.caption} + +```js +import `my-app.js`; +``` + +index.html {.caption} + +```html + + + + + +``` + +my-app.js {.caption} + +```js +import PolymerElement from '@polymer/polymer/polymer-element.js'; +class MyApp extends PolymerElement { + ... +} +window.customElements.define('my-app', MyApp); +``` diff --git a/app/3.0/docs/tools/services.md b/app/3.0/docs/tools/services.md deleted file mode 100644 index fcc8c45cd0..0000000000 --- a/app/3.0/docs/tools/services.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Web services ---- - - - -
-{% include 'outdated.html' %} -
- -This document is a list of miscellaneous services that you may find useful -when creating Polymer elements. - -## polygit—CDN web service for serving components {#polygit} - -[Polygit](http://polygit.org/) is a proxy server for serving components from a CDN. **It is not -meant to be used for production apps**, but is very useful when prototyping and sharing jsbins. - -Usage: - -``` - - - - - - -``` - -For more documentation, see [http://polygit.org](http://polygit.org/). - -Source: [github.com/PolymerLabs/polygit](https://github.com/PolymerLabs/polygit) - -## polystyle—web service for creating style modules {#polystyle} - -[polystyle](https://poly-style.appspot.com/demo/) is a web service that can wrap an existing -stylesheet on a remote server as Polymer [style -module](/2.0/docs/devguide/style-shadow-dom#style-modules). This is useful if you have a hosted -third-party stylesheet that you want to use in an element or your application. - -Usage: - -``` - - - - - -``` - -For more information, see -[https://poly-style.appspot.com/demo/](https://poly-style.appspot.com/demo/). - -**Related tools** - -- [gulp-style-modules](https://github.com/MaKleSoft/gulp-style-modules)—3rd party Gulp plugin for -wrapping local CSS files into style modules - -Source: [github.com/PolymerLabs/polystyles](https://github.com/PolymerLabs/polystyles) - -## polyicon—create an optimized custom icon set {#polyicon} - -[polyicon](https://github.com/PolymerLabs/polyicon) is an online tool to generate -an optimized custom icon set for your app, with only the icons that you need. -Instead of loading entire sets, this tool creates a slimmer (custom) icon set that you can load and -use in your app. - -Try it out: [https://poly-icon.appspot.com/](https://poly-icon.appspot.com/) - -Source: [github.com/PolymerLabs/polyicon](https://github.com/PolymerLabs/polyicon) diff --git a/app/3.0/nav.yaml b/app/3.0/nav.yaml index 8381e93733..8322f86f51 100644 --- a/app/3.0/nav.yaml +++ b/app/3.0/nav.yaml @@ -150,9 +150,6 @@ - title: Publish your elements path: /3.0/docs/tools/publish indent: True - - title: Web services - path: /3.0/docs/tools/services - indent: True - title: polymer.json specification path: /3.0/docs/tools/polymer-json indent: True @@ -164,6 +161,9 @@ - title: Glossary path: /3.0/docs/glossary indent: True + - title: Polymer 3.0 on StackBlitz + path: /3.0/docs/stackblitz + indent: True - endheader: True - header: API Reference - title: API Reference