Merge pull request #42 from PolymerElements/3.0-preview-dev

3.0 preview dev
PolymerElements · Jul 26, 2018 · 0a7a4f6 · 0a7a4f6
2 parents 4a2a589 + 8acdb99
commit 0a7a4f6
Show file tree

Hide file tree

Showing 14 changed files with 878 additions and 1,504 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,11 +1,16 @@
 dist: trusty
 language: node_js
 sudo: 'false'
-node_js: '9'
+node_js: 'node'
 addons:
   firefox: latest
   chrome: stable
-before_script: npm install -g polymer-cli
+before_script:
+  - npm install -g polymer-cli
+  - git checkout package-lock.json
+  - >-
+    npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
+    Project is not formatted. Please run "npm run format".' && false)
 script:
   - xvfb-run polymer test --module-resolution=node --npm
   - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test --module-resolution=node --npm -s ''default''; fi'

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
diff --git a/README.md b/README.md
@@ -1,15 +1,7 @@
-<!---
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/prism-element.svg)](https://www.npmjs.com/package/@polymer/prism-element)
+[![Build status](https://travis-ci.org/PolymerElements/prism-element.svg?branch=master)](https://travis-ci.org/PolymerElements/prism-element)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/prism-element)
 
-This README is automatically generated from the comments in these files:
-prism-highlighter.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
 ## &lt;prism-highlighter&gt;
 
 Syntax highlighting via [Prism](http://prismjs.com/).
@@ -24,4 +16,111 @@ containing the source to highlight. The event detail can optionally contain a
 
 This flow is supported by [`<marked-element>`](https://github.com/PolymerElements/marked-element).
 
+See: [Documentation](https://www.webcomponents.org/element/@polymer/prism-element),
+  [Demo](https://www.webcomponents.org/element/@polymer/prism-element/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/prism-element
+```
+
+### In an html file
+```html
+<html>
+  <body>
+    <div id="parent">
+      <prism-highlighter></prism-highlighter>
+      <div id="output"></div>
+    </div>
+  </body>
+  <script type="module">
+      import '@polymer/prism-element/prism-highlighter.js';
+      import '@polymer/prism-element/prism-theme-default.js';
+      import '@polymer/polymer/lib/elements/custom-style.js';
+      import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
+      // import prism theme styles
+      const template = html`
+        <custom-style>
+          <style include="prism-theme-default"></style>
+        </custom-style>
+      `;
+
+      document.head.appendChild(template.contents);
+
+      const parent = document.getElementById('parent');
+      const output = document.getElementById('output');
+      const ev = new CustomEvent('syntax-highlight');
+
+      // enter code and language here
+      ev.detail = {
+        code: 'p { background-color: blue }',
+        lang: 'css',
+      };
+      parent.dispatchEvent(ev);
+
+      // detail is modified by prism-highlighter
+      output.innerHTML = ev.detail.code;
+    </script>
+</html>
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/prism-element/prism-element.js';
+import '@polymer/prism-element/prism-highlighter.js';
+import '@polymer/prism-element/prism-theme-default.js';
+
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <style include="prism-theme-default"></style>
+      <div id="parent">
+        <prism-highlighter></prism-highlighter>
+        <div id="output"></div>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const ev = new CustomEvent('syntax-highlight');
+
+    // enter code and language here
+    ev.detail = {
+      code: 'p { background-color: blue }',
+      lang: 'css',
+    };
+    this.$.parent.dispatchEvent(ev);
+
+    // detail is modified by prism-highlighter
+    this.$.output.innerHTML = ev.detail.code;
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/prism-element
+cd prism-element
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
 
+### Running the tests
+```sh
+polymer test --npm
+```
diff --git a/demo/index.html b/demo/index.html
@@ -15,9 +15,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-    <script type="module" src="../../paper-styles/demo-pages.js"></script>
-    <script type="module" src="./prism-demo.js"></script>
+    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
+    <script type="module">
+      import '@polymer/paper-styles/demo-pages.js';
+      import './prism-demo.js';
+    </script>
   </head>
   <body>
     <div class="vertical-section-container centered">

diff --git a/demo/prism-demo.js b/demo/prism-demo.js
@@ -1,18 +1,19 @@
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
 import '@polymer/polymer/polymer-legacy.js';
 
 import '../prism-highlighter.js';
 import '../prism-theme-default.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 Polymer({
   _template: html`
     <style include="prism-theme-default">
@@ -24,7 +25,7 @@ Polymer({
 
     <prism-highlighter></prism-highlighter>
     <pre id="output"></pre>
-`,
+  `,
 
   is: 'prism-demo',
 

diff --git a/index.html b/index.html