plastic-diff-redirect

1.0.4 • Public • Published

plastic-diff-redirect

Client side build selection for Polymer, like prpl-server-node, but on client

Lllows you to serve different Polymer builds based on the capability of the browser, even on a static server. The function chooses a 'build' from an array of 'builds' in polymer.json which is compatable with the current browser (like prpl-server-node) and redirects the client to that build.

Install

Install with npm or yarn:

npm install --save plastic-diff-redirect
yarn add plastic-diff-redirect

Usage

Folder Structure

Your folder structure will look something like this if you use basePath in each build definition (see polymer.json section below):

/
|--index.html (copy sample-index.html)
|--polymer.json (copy from your polymer project)
|--build (copy in your polymer build folder)
   |--build1
   |--build2
   |--build3

or if you use autoBasePath in the root of polymer.json:

/
|--index.html (copy sample-index.html)
|--polymer.json (copy from your polymer project)
|--build1 (copy all the folders inside your polymer project build folder)
|--build2
|--build3

index.html

Create an index.html file in the root of your project (you can copy sample-index.html):

<!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></title>
    <script src="node_modules/ua-parser-js/src/ua-parser.js"></script>
    <script src="node_modules/plastic-diff-redirect/plastic-diff-redirect.js"></script>
</head>
<body>    
</body>
</html>

polymer.json

You will copy the polymer.json file from your project. You may need to use the basePath property for each build if you are using the first folder structure above or if you will be serving from other than the root folder (e.g. https://someone.github.io/my-project-name). If you are not using basePath in each build set autoBasePath to true.

See polymer.json specification for more details.

Example

For a github project page for some-project-name

"builds": [
    {
      "name": "esm-bundled",
      "browserCapabilities": ["es2015","modules"],
      "js": { "minify": true },
      "css": { "minify": true },
      "html": {"minify": true },
      "bundle": true,
      "addServiceWorker": true,
      "basePath": "some-project-name/build/esm-bundled/"
    },
    {
      "name": "es6-bundled",
      "browserCapabilities": ["es2015"],
      "js": {
        "minify": true,
        "transformModulesToAmd": true,
        "compile": "es2015" // new feature, see https://github.com/Polymer/tools/pull/270
      },
      "css": { "minify": true },
      "html": { "minify": true },
      "bundle": true,
      "addServiceWorker": true,
      "basePath": "some-project-name/build/es6-bundled/"
    },
    {
      "name": "es5-bundled",
      "js": {
        "minify": true,
        "compile": true,
        "transformModulesToAmd": true
      },
      "css": { "minify": true },
      "html": { "minify": true },
      "bundle": true,
      "addServiceWorker": true,
      "basePath": "some-project-name/build/es5-bundled/"
    }

Thats It

When the user hits the index.html file they will be redirected to the build folder matching their browser capabilities.

About the Code

The code here is based on tools from the Polymer team:

The functions used were just modified to run in the browser and downleveled to ES5.

Issues

Problems or questions can be submitted as issue in the github repository. Every effort is made to respond the same day.

Contributions

Contributions via pull request are always welcome and appreciated.

License

MIT

Package Sidebar

Install

npm i plastic-diff-redirect

Weekly Downloads

0

Version

1.0.4

License

MIT

Unpacked Size

14.7 kB

Total Files

4

Last publish

Collaborators

  • mlisook