Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

add info on stackblitz #2560

Merged
4 commits merged into from
May 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions app/3.0/docs/stack-blitz.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
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 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
<!-- 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>
<!-- Include WebComponents polyfills -->
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<my-app></my-app>
```

my-app.js {.caption}

```js
import PolymerElement from '@polymer/polymer/polymer-element.js';
class MyApp extends PolymerElement {
...
}
window.customElements.define('my-app', MyApp);
```
73 changes: 0 additions & 73 deletions app/3.0/docs/tools/services.md

This file was deleted.

6 changes: 3 additions & 3 deletions app/3.0/nav.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down