initial commit

.eslintrc.json

@@ -0,0 +1,38 @@
+{
+  "extends": ["eslint:recommended", "google", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "plugins": ["html", "prettier"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "bracketSpacing": false,
+        "jsxBracketSameLine": false
+      }
+    ],
+    "brace-style": "off",
+    "new-cap": ["error", {"capIsNewExceptions": ["Polymer", "PolymerVis"]}],
+    "no-var": "off",
+    "require-jsdoc": "off",
+    "comma-dangle": ["error", "never"],
+    "arrow-parens": ["error", "as-needed"],
+    "no-console": ["error", {"allow": ["warn", "error"]}]
+  },
+  "globals": {
+    "Polymer": true,
+    "PolymerVis": true,
+    "sinon": true,
+    "expect": true,
+    "assert": true,
+    "fixture": true
+  }
+}

.gitignore

@@ -0,0 +1,60 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+jspm_packages/
+/node_modules/*
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+build/

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": false
+}

.travis.yml

@@ -0,0 +1,21 @@
+language: node_js
+sudo: required
+node_js: stable
+before_script:
+  - yarn
+  - yarn global add npx
+  - npx bower i
+cache:
+  yarn: true
+  directories:
+    - node_modules
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+script:
+  - npm test
+dist: trusty

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 PolymerVis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,126 @@
+web-worker
+[![GitHub release](https://img.shields.io/github/release/PolymerVis/web-worker.svg)](https://github.com/PolymerVis/web-worker/releases)
+[![Build Status](https://travis-ci.org/PolymerVis/web-worker.svg?branch=master)](https://travis-ci.org/PolymerVis/web-worker)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerVis/web-worker)
+[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+==========
+
+<!---
+```
+<custom-element-demo>
+  <template>
+    <link rel="import" href="../polymer/lib/elements/dom-bind.html">
+    <link rel="import" href="web-worker.html">
+    <dom-bind>
+      <template is="dom-bind">
+        <next-code-block></next-code-block>
+      </template>
+    </dom-bind>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<!-- create and run web-worker with the inline code. -->
+<web-worker id="worker" last-message="{{reply}}">
+  <script type="text/js-worker">
+    onmessage = function(e) {
+      postMessage(e.data.a + e.data.b);
+    };
+  </script>
+</web-worker>
+
+<!-- data-binded div to show msg from worker -->
+<div>1 + 2 = <b>[[reply]]</b></div>
+
+<!-- button to run function -->
+<button onclick="javascript:document.querySelector('#worker').postMessage({a: 1, b: 2});">Calculate 1+2</button>
+```
+
+## Installation
+```
+bower install --save PolymerVis/web-worker
+```
+
+## Documentation and demos
+More examples and documentation can be found at `web-worker` [webcomponents page](https://www.webcomponents.org/element/PolymerVis/web-worker).
+
+## Disclaimers
+PolymerVis is a personal project and is NOT in any way affliated with Polymer or Google.
+
+## `web-worker`
+`web-worker` is a Polymer 2.0 element to provide an easy way to data-bind with a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)-based task. Compute-intensive tasks are usually done on a web worker to prevent blocking of the UI thread.
+
+## Quick start
+### Create a web worker
+Creating a web worker from a URL.
+```html
+<web-worker url="some_script.js"></web-worker>
+```
+
+Creating a web worker through `script` attribute.
+```html
+<web-worker script="postMessage('hello!');"></web-worker>
+```
+
+Creating a web worker from inline code.
+```html
+<web-worker>
+  <script type="text/js-worker">
+    postMessage('hello!');
+  </script>
+</web-worker>
+```
+
+### Message from web worker
+Data-bind to the last message/reply from the worker with the `last-message` attribute.
+```html
+<web-worker last-message="{{reply}}">
+  <script type="text/js-worker">
+    postMessage('hello!');
+  </script>
+</web-worker>
+```
+
+Or listen to the `message` event.
+```html
+<web-worker on-message="onReply">
+  <script type="text/js-worker">
+    postMessage('hello!');
+  </script>
+</web-worker>
+```
+
+### Message to web worker
+You can post a message to the worker with `postMessage` function or through one of the 3 message attributes (`text-to-worker`, `object-to-worker`, or `array-to-worker`).
+
+`postMessage` function
+```js
+var ele = document.createElement('web-worker'); // create web-worker element
+ele.url = 'some_script.js'; // set url to worker script
+ele.postMessage('hello!') // return a Promise to the next message from worker
+  .then(reply => console.log(reply));
+```
+
+Data-binding to `text-to-worker`, `object-to-worker`, or `array-to-worker`
+```html
+<web-worker url="some_script.js"
+  text-to-worker="hello"
+  last-message="{{reply}}"></web-worker>
+```
+
+### Running ad-hoc functions
+You can also run an ad-hoc function. This function must be stateless and has no external dependencies, as the function and arguments are serialized and executed in the worker context.
+
+```js
+document.createElement('web-worker')  // create web-worker element
+  .executeFnOnce((a, b) => a + b, a, b) // serialized function and run in worker
+  .then(sum => alert(a + ' + ' + b + ' = ' + sum)); // return a Promise to the output
+```
+
+## Development
+
+### Unit testing
+```
+npm test
+```

bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "web-worker",
+  "description": "Polymer 2.0 element to data-bind with a web-worker or to run ad-hoc function asynchronously without blockin the UI thread.",
+  "main": "web-worker.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  },
+  "keywords": [
+    "polymer",
+    "web-components",
+    "webworker",
+    "worker",
+    "async"
+  ],
+  "license": "MIT"
+}

demo/data-bind.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+<title>web-worker demo</title>
+
+<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+<link rel="import" href="../../polymer/lib/elements/dom-bind.html">
+<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+<link rel="import" href="../web-worker.html">
+
+<custom-style>
+  <style is="custom-style" include="demo-pages-shared-styles">
+  </style>
+</custom-style>
+</head>
+
+<body>
+<div class="vertical-section-container centered">
+<h3>Basic web-worker demo</h3>
+
+Running web-worker with inline code.
+<demo-snippet>
+<template>
+
+  <!-- enable data binding outside of Polymer app -->
+  <dom-bind id="demo1">
+    <!-- html to stamp -->
+    <template>
+
+      <!--
+        create and run web-worker with the inline code.
+        listen to message event.
+      -->
+      <web-worker text-to-worker="[[msg]]" last-message="{{reply}}">
+        <script type="text/js-worker">
+          onmessage = function(e) {
+            postMessage(e.data);
+          }
+        </script>
+      </web-worker>
+
+      <!-- data-binded div to show msg from worker -->
+      <div>[[reply]]</div>
+
+      <button onclick="send('hello')">Echo 'hello'</button>
+    </template>
+  </dom-bind>
+
+  <script>
+    function send(str) {
+      document.querySelector('dom-bind#demo1').msg = str;
+    }
+  </script>
+
+</template>
+</demo-snippet>
+
+</div>
+</body>
+</html>