├── .gitignore
├── Makefile
├── Readme.md
├── component.json
├── index.js
├── package.json
├── replace.sh
└── test
    ├── index.html
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | test/build.js
4 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | .PHONY: update clean all test
 2 | 
 3 | all: index.js
 4 | 
 5 | index.js: build
 6 | 
 7 | update: build/tools
 8 | 	-cd build/tools && sh bin/pull-all.sh
 9 | 
10 | build:
11 | 	-cd build/tools/components/webcomponentsjs && git checkout .
12 | 	-cd build/tools/components/webcomponentsjs && npm install
13 | 	-cd build/tools/components/webcomponentsjs && ./node_modules/.bin/gulp
14 | 	cp -f build/tools/components/webcomponentsjs/dist/webcomponents.js build/webcomponents.js
15 | 	sh replace.sh
16 | 
17 | build/tools:
18 | 	-mkdir build
19 | 	-cd build && git clone https://github.com/Polymer/tools.git
20 | 	-cd build/tools && git checkout . && git clean -df
21 | 
22 | test: build
23 | 	node_modules/.bin/uglifyjs ./index.js --lint 2>&1 | grep Accide || echo "ok"
24 | 	cd test && beefy index.js:build.js --open
25 | 
26 | clean:
27 | 	rm -Rf build
28 | 
29 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | # polyfill-webcomponents 
  2 | 
  3 | ## Deprecated
  4 | 
  5 | Thanks for all the support, but this package is now deprecated. polyfill-webcomponents served its purpose while there was no official equivalent, but now there is [webcomponents.js](https://www.npmjs.com/package/webcomponents.js) which has more frequent updates and is maintained by the polymer team. Whoo!
  6 | 
  7 | ----
  8 | 
  9 | ### Web Components Polyfills for use with [Browserify](https://github.com/substack/node-browserify).
 10 | 
 11 | This is the [Polymer Platform](https://github.com/Polymer/polymer) in a browserify-compatible package. This is not the full Polymer framework (e.g. no  `<polymer-element>`), it's just the platform, which provides the polyfills for next-generation web technology (plus some other stuff).
 12 | 
 13 | ![image](https://cloud.githubusercontent.com/assets/43438/3347708/0b705ae2-f8f5-11e3-8492-759e74607aff.png)
 14 | 
 15 | ## Features
 16 | 
 17 | * CustomElements
 18 | * ShadowDOM
 19 | * HTMLTemplates
 20 | * Model Driven Views
 21 | * WeakMap
 22 | * PointerEvents
 23 | * PointerGestures
 24 | * HTMLImports
 25 | 
 26 | Due to nature of the browser, isolated encapsulation of these polyfills is not possible, thus be warned
 27 | **this modifies your entire browser environment** i.e. does not play well with others.
 28 | 
 29 | ## Documentation
 30 | 
 31 | See the documentation specifically for the **Platform** on the [Polymer website.](http://www.polymer-project.org/docs/polymer/polymer.html)
 32 | 
 33 | ## Versioning
 34 | 
 35 | Polyfills will be regularly updated to latest development versions. As there is no sensible way to do semver, versions will be tagged by timestamp: `0.YYYYMMDD.patch`. Patch version may be incremented if there's a critical problem with the build. If you want me to cut a new build to incorporate a particular update, please just open an issue.
 36 | 
 37 | ## Usage
 38 | 
 39 | **See the [Getting Started](https://github.com/timoxley/polyfill-webcomponents/wiki/Getting-Started) guide for a step-by-step example.**
 40 | 
 41 | Use in-browser only with [browserify](https://github.com/substack/node-browserify).
 42 | 
 43 | ```js
 44 | // polyfill your browser environment
 45 | var Platform = require('polyfill-webcomponents')
 46 | // Platform is polymer's proprietary namespace, contains some helpers
 47 | // Note this will creates a bunch of globals.
 48 | ```
 49 | 
 50 | Simply `require('polyfill-webcomponents')` anywhere your code depends on webcomponents support.
 51 | 
 52 | You can safely `require('polyfill-webcomponents')` multiple times, it will only add the polyfills once.
 53 | 
 54 | ## Installation
 55 | 
 56 | ```
 57 | > npm install polyfill-webcomponents
 58 | ```
 59 | 
 60 | ### Use as a peer dependency
 61 | 
 62 | Peer dependencies allow child modules to require that the parent module has a compatible version installed. Despite the npm team no longer being keen on peer-dependencies, I believe this is a perfect use-case for them and I recommended you set `polyfill-webcomponents` as a [Peer Dependency](http://domenic.me/2013/02/08/peer-dependencies/) for anything except your top-level application. 
 63 | 
 64 | Because `polyfill-webcomponents` necessarily modifies your global state, and has been configured to only apply the polyfills once, it doesn't make much sense to have multiple copies of it bundled in your app.
 65 | 
 66 | Add this to your `package.json`:
 67 | 
 68 | ```json
 69 |   "peerDependencies": {
 70 |     "polyfill-webcomponents": "*"
 71 |   },
 72 | ```
 73 | 
 74 | ## Browser Compatibility
 75 | 
 76 | Polymer is alpha software. Support/performance is a bit fickle in everything but Chrome & Canary, and you may even experience dramatic differences between versions of Chrome. For best experience you'll want to at least enable:
 77 | 
 78 | * chrome://flags/#enable-experimental-web-platform-features
 79 | * chrome://flags/#enable-html-imports
 80 | * chrome://flags/#enable-javascript-harmony
 81 | 
 82 | But remember to also test for degraded performance with these features off.
 83 | 
 84 | These polyfills work ([with caveats](http://www.polymer-project.org/compatibility.html)) in [Evergreen Browsers](http://tomdale.net/2013/05/evergreen-browsers/).
 85 | 
 86 | * Chrome
 87 | * Canary
 88 | * Chrome Android
 89 | * Firefox
 90 | * Safari 6+
 91 | * Mobile Safari
 92 | * Internet Explorer 10+
 93 | 
 94 | **Do the web a favour, insist on only supporting Evergreen Browsers in your upcoming project.**
 95 | 
 96 | [See Polymer's documentation for more information](http://www.polymer-project.org/compatibility.html).
 97 | 
 98 | ## TODO
 99 | 
100 | * Break these packages into more isolated components
101 | * [Convince polymer team to publish these on npm themselves](https://github.com/Polymer/polymer/issues/326#)
102 | 
103 | ## No Fork
104 | 
105 | If this package does not work as expected, let's work together to fix it; the last thing we need is
106 | *more* random 3rd parties scattering unofficial Polymer pieces around npm.
107 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "polyfill-webcomponents",
 3 |   "repo": "timoxley/polyfill-webcomponents",
 4 |   "version": "0.20140826.0",
 5 |   "description": "Web Component Polyfills courtesy of Polymer",
 6 |   "main": "index.js",
 7 |   "scripts": [
 8 |     "index.js"
 9 |   ],
10 |   "keywords": [
11 |     "template",
12 |     "shadowdom",
13 |     "observe",
14 |     "WeakMap"
15 |   ],
16 |   "license": "BSD-2-Clause"
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "polyfill-webcomponents",
 3 |   "version": "0.20150204.0",
 4 |   "description": "Web Component Polyfills courtesy of Polymer",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "make update -B && make build -B",
 8 |     "test": "make test"
 9 |   },
10 |   "author": "Tim Oxley",
11 |   "keywords": [
12 |     "template",
13 |     "shadowdom",
14 |     "observe",
15 |     "WeakMap"
16 |   ],
17 |   "license": "BSD-2-Clause",
18 |   "devDependencies": {
19 |     "beefy": "^1.1.0",
20 |     "polymer-expressions": "*",
21 |     "templatebinding": "*",
22 |     "uglify-js": "~2.4.15"
23 |   },
24 |   "directories": {
25 |     "test": "test"
26 |   },
27 |   "repository": {
28 |     "type": "git",
29 |     "url": "git://github.com/timoxley/polyfill-webcomponents.git"
30 |   },
31 |   "bugs": {
32 |     "url": "https://github.com/timoxley/polyfill-webcomponents/issues"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/replace.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | set -e
 4 | 
 5 | ### Here be some dodgy modifications for browserify compatibility ###
 6 | 
 7 | cat build/webcomponents.js > index.src.js
 8 | 
 9 | # remove source mapping
10 | sed -i bak -e 's/\/\/@ sourceMappingURL=platform\.concat.js\.map//g' index.src.js
11 | sed -i bak -e 's/window.WebComponents || {}/window.WebComponents || {flags: flags}/g' index.src.js
12 | # prevent double loading
13 | # need to wrap in whole thing in closure because browserify/esprima spits "Illegal return statement"
14 | # on return statement below?
15 | echo "module.exports = (function(flags) {\n" > index.js
16 | echo "if (window.Platform) return window.Platform; // prevent double-loading\n" >> index.js
17 | # inject actual source
18 | cat index.src.js >> index.js
19 | # inject export val of window.Plaform.
20 | # Try encourage people to access proprietary Platform via:
21 | #   var Platform = require('polyfill-webcomponents')
22 | # rather than global var window.Plaform
23 | echo "return window.Platform;\n" >> index.js
24 | ## end closure
25 | echo "\n})()\n" >> index.js
26 | 
27 | # clean up
28 | rm index.src.jsbak
29 | rm index.src.js
30 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 | Code distributed by Google as part of the polymer project is also
 8 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 | -->
10 | <html>
11 |   <head>
12 |     <title>template distribute</title>
13 |   </head>
14 |   <body>
15 |   
16 |  <h1>Bind To Text</h1>
17 | 
18 |     <ul>
19 |     <template id="text" repeat="{{ text }}">
20 |       <li>Value: {{ value }}</li>
21 |     </template>
22 |     </ul>
23 | 
24 |     <button id="rotateText">Rotate</button>
25 | 
26 |     <script src="build.js"></script>
27 |   </body>
28 | </html>
29 | 
30 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | var assert = require('assert')
 2 | 
 3 | require('../')
 4 | 
 5 | if (!hasTemplateBinding()) {
 6 |   require('templatebinding')
 7 | }
 8 | 
 9 | var Expressions = typeof PolymerExpressions !== 'undefined'
10 |   ? PolymerExpressions
11 |   : require('polymer-expressions')
12 | 
13 | function hasTemplateBinding() {
14 |   var t = document.createElement('template')
15 |   return 'model' in t
16 | }
17 | 
18 | var t = document.getElementById('text');
19 | var t = document.querySelector('template');
20 | t.bindingDelegate = new Expressions()
21 | t.model = {
22 |   text: [
23 |     { value: 'Fee' },
24 |     { value: 'Fi' },
25 |     { value: 'Fo' },
26 |     { value: 'Fum' }
27 |   ]
28 | };
29 | 
30 | var b = document.getElementById('rotateText');
31 | b.addEventListener('click', function() {
32 |   t.model.text.push(t.model.text.shift());
33 | });
34 | 
35 | setTimeout(function() {
36 |   var ul = document.querySelector('ul')
37 |   for (var i = 1, l = ul.children.length; i < l; i ++) {
38 |     var child = ul.children[i];
39 |     assert.equal(child.innerText,  'Value: ' + t.model.text[i - 1].value)
40 |   }
41 | }, 100)
42 | 


--------------------------------------------------------------------------------