Removed Polymer 0.5, started implementing Polymer 1.0
This commit is contained in:
Stefan Zermatten
@@ -1 +1 @@
|
||||
.npm
|
||||
.build*
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
This directory and the files immediately inside it are automatically generated
|
||||
when you change this package's NPM dependencies. Commit the files in this
|
||||
directory (npm-shrinkwrap.json, .gitignore, and this README) to source control
|
||||
so that others run the same versions of sub-dependencies.
|
||||
|
||||
You should NOT check in the node_modules directory that Meteor automatically
|
||||
creates; if you are using git, the .gitignore file tells git to ignore it.
|
||||
89
rpg-docs/packages/meteor-vulcanize/.npm/plugin/vulcanize/npm-shrinkwrap.json
generated
Normal file
89
rpg-docs/packages/meteor-vulcanize/.npm/plugin/vulcanize/npm-shrinkwrap.json
generated
Normal file
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"vulcanize": {
|
||||
"version": "1.14.7",
|
||||
"resolved": "https://registry.npmjs.org/vulcanize/-/vulcanize-1.14.7.tgz",
|
||||
"from": "https://registry.npmjs.org/vulcanize/-/vulcanize-1.14.7.tgz",
|
||||
"dependencies": {
|
||||
"dom5": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/dom5/-/dom5-1.3.1.tgz",
|
||||
"from": "https://registry.npmjs.org/dom5/-/dom5-1.3.1.tgz",
|
||||
"dependencies": {
|
||||
"clone": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
|
||||
"from": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz"
|
||||
},
|
||||
"parse5": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz",
|
||||
"from": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"es6-promise": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.3.0.tgz",
|
||||
"from": "https://registry.npmjs.org/es6-promise/-/es6-promise-2.3.0.tgz"
|
||||
},
|
||||
"hydrolysis": {
|
||||
"version": "1.22.0",
|
||||
"resolved": "https://registry.npmjs.org/hydrolysis/-/hydrolysis-1.22.0.tgz",
|
||||
"from": "https://registry.npmjs.org/hydrolysis/-/hydrolysis-1.22.0.tgz",
|
||||
"dependencies": {
|
||||
"doctrine": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
|
||||
"from": "https://registry.npmjs.org/doctrine/-/doctrine-0.7.2.tgz",
|
||||
"dependencies": {
|
||||
"esutils": {
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz",
|
||||
"from": "https://registry.npmjs.org/esutils/-/esutils-1.1.6.tgz"
|
||||
},
|
||||
"isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"from": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"espree": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/espree/-/espree-2.2.5.tgz",
|
||||
"from": "https://registry.npmjs.org/espree/-/espree-2.2.5.tgz"
|
||||
},
|
||||
"estraverse": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-3.1.0.tgz",
|
||||
"from": "https://registry.npmjs.org/estraverse/-/estraverse-3.1.0.tgz"
|
||||
},
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz",
|
||||
"from": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.0.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"nopt": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
|
||||
"from": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
|
||||
"dependencies": {
|
||||
"abbrev": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.7.tgz",
|
||||
"from": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.7.tgz"
|
||||
}
|
||||
}
|
||||
},
|
||||
"path-posix": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-posix/-/path-posix-1.0.0.tgz",
|
||||
"from": "https://registry.npmjs.org/path-posix/-/path-posix-1.0.0.tgz"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
differential:vulcanize@0.0.5
|
||||
differential:vulcanize@2.0.0
|
||||
meteor@1.1.6
|
||||
underscore@1.0.3
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
Vulcanize
|
||||
==============================================================================
|
||||
Warning: API Change for version 1.0.0.
|
||||
|
||||
This package a meteor build plugin that wraps the [vulcanize](https://www.npmjs.com/package/vulcanize) npm package, which is used to process web components into a single output file.
|
||||
|
||||
### Usage
|
||||
1. Ensure all your components are located somewhere under your public directory.
|
||||
2. Include an `imports.html` file anywhere available to the client, that contains the html imports that would normally go inside your `<head>` tag.
|
||||
1. Ensure all your components are located somewhere under your public directory. (via bower, zip, etc)
|
||||
2. Include a `config.vulcanize` file in the root of your project. This file will optionally define a path to the polyfill and paths to html imports for your components. For Example:
|
||||
|
||||
````
|
||||
<!-- Core Components -->
|
||||
<link rel="import" href="/components/core-animation/core-animation.html">
|
||||
<link rel="import" href="/components/core-animated-pages/core-animated-pages.html">
|
||||
<link rel="import" href="/components/core-animated-pages/transitions/slide-from-right.html">
|
||||
<link rel="import" href="/components/core-drawer-panel/core-drawer-panel.html">
|
||||
<link rel="import" href="/components/core-pages/core-pages.html">
|
||||
...
|
||||
|
||||
<!-- Paper Components -->
|
||||
<link rel="import" href="/components/paper-dialog/paper-action-dialog.html">
|
||||
<link rel="import" href="/components/paper-dialog/paper-dialog-transition.html">
|
||||
<link rel="import" href="/components/paper-input/paper-input.html">
|
||||
...
|
||||
{
|
||||
"polyfill": "/bower_components/webcomponentsjs/webcomponents.min.js",
|
||||
"useShadowDom": true, // optional, defaults to shady dom (polymer default)
|
||||
"imports": [
|
||||
"/bower_components/paper-button/paper-button.html",
|
||||
"/bower_components/paper-checkbox/paper-checkbox.html"
|
||||
]
|
||||
}
|
||||
````
|
||||
- By specifying a path to the polyfill we can ensure that it is injected into the bundle before any imports.
|
||||
|
||||
- Running your app in development as usual will result in the contents of `imports.html` being added to your `<head>` tag, resulting in multiple subsequent HTTP requests (good in development - debugging).
|
||||
- By setting `useShadowDom` to true, we configure polymer to opt out of shady dom and use full shadow dom. This is pretty much required at the moment unless you only use polymer elements as leaf nodes. Any light dom (child elements) that gets rendered by blaze, react, etc will not be accounted for otherwise.
|
||||
|
||||
- Running `meteor`, `meteor build`, `modulus deploy`, etc with the `VULCANIZE=true` environment variable set will result in all your html imports being vulcanized or concatenated into a single html import (good in production). The resulting file will be called `vulcanized.html`, which will be automatically added to your `<head>` tag. For example, `VULCANIZE=true meteor`, `VULCANIZE=true modulus deploy`.
|
||||
- Running your app in development as usual will result in individual imports being added to your `<head>` tag, resulting in multiple subsequent HTTP requests (good in development - debugging).
|
||||
|
||||
- Running `meteor`, `meteor build`, `modulus deploy`, etc with the `VULCANIZE=true` environment variable set will result in all your html imports being vulcanized or concatenated into a single html import (good in production). The resulting file will be called `vulcanized-{md5}.html`, which will be automatically added to your `<head>` tag. For example, `VULCANIZE=true meteor`, `VULCANIZE=true modulus deploy`.
|
||||
|
||||
- Setting the `CDN_PREFIX` environment variable will prepend the string to the beginning of the file path that is inserted into your HTML's `<head>` tag.
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
Package.describe({
|
||||
name: 'thaum:vulcanize',
|
||||
summary: 'Vulcanize',
|
||||
version: '0.0.5',
|
||||
version: '2.2.0',
|
||||
git: 'https://github.com/Differential/meteor-vulcanize'
|
||||
});
|
||||
|
||||
Package.registerBuildPlugin({
|
||||
name: 'vulcanize',
|
||||
use: [],
|
||||
use: [
|
||||
"underscore@1.0.3"
|
||||
],
|
||||
sources: [
|
||||
'vulcanize.js'
|
||||
],
|
||||
npmDependencies: {'vulcanize': '0.7.11'}
|
||||
npmDependencies: {'vulcanize': '1.14.7'}
|
||||
});
|
||||
|
||||
Package.onUse(function (api) {
|
||||
api.use('underscore');
|
||||
api.use('isobuild:compiler-plugin@1.0.0');
|
||||
});
|
||||
|
||||
@@ -1,70 +1,139 @@
|
||||
var vulcan = Npm.require('vulcanize');
|
||||
var crypto = Npm.require('crypto');
|
||||
var url = Npm.require('url');
|
||||
var fs = Npm.require('fs');
|
||||
|
||||
var _ = Npm.require('underscore');
|
||||
/**
|
||||
* Vulcanize now requires a target input file.
|
||||
* We need to create a temp file located within the same
|
||||
* 'abspath' as the actual imports. Otherwise, vulcanize
|
||||
* gets confused during the process.
|
||||
*/
|
||||
var tmpFile = '_imports.html';
|
||||
var tmpDir = 'public';
|
||||
var tmpPath = tmpDir + '/' + tmpFile;
|
||||
|
||||
var handler = function(compileStep) {
|
||||
var importsHtml = compileStep.read().toString('utf8');
|
||||
/**
|
||||
* Log
|
||||
*/
|
||||
function log() {
|
||||
args = _.values(arguments);
|
||||
args.unshift("=> Vulcanize:");
|
||||
console.log.apply(this, args);
|
||||
}
|
||||
|
||||
if (process.env.VULCANIZE) {
|
||||
log('Vulcanizing imports...');
|
||||
vulcanize(compileStep, importsHtml);
|
||||
} else {
|
||||
log('Adding all imports...');
|
||||
addImports(compileStep, importsHtml);
|
||||
}
|
||||
/**
|
||||
* Get script tag with specified path.
|
||||
*/
|
||||
function scriptTag(path) {
|
||||
return '<script src="' + path + '"></script>';
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* Get link tag with specified path.
|
||||
*/
|
||||
function linkTag(path) {
|
||||
return '<link rel="import" href="' + path + '">';
|
||||
}
|
||||
|
||||
var vulcanize = function(compileStep, importsHtml) {
|
||||
/**
|
||||
* Add config for dom mode to head.
|
||||
*/
|
||||
function addShadowDomConfig(file) {
|
||||
file.addHtml({
|
||||
section: 'head',
|
||||
data: '<script> window.Polymer = {dom: "shadow"}; </script>'
|
||||
});
|
||||
}
|
||||
|
||||
var vulcanOutputHandler = function(filename, data) {
|
||||
/**
|
||||
* Add webcomponentsjs script to head.
|
||||
* @todo read first line and check for script tag
|
||||
*/
|
||||
function addPolyfillTag(file, path) {
|
||||
file.addHtml({
|
||||
section: 'head',
|
||||
data: scriptTag(path)
|
||||
});
|
||||
}
|
||||
|
||||
var filenameHash = crypto.createHash('md5').update(data).digest('hex');
|
||||
/**
|
||||
* Add imports to head.
|
||||
*/
|
||||
|
||||
function addImportTag(file, path) {
|
||||
file.addHtml({
|
||||
section: 'head',
|
||||
data: linkTag(path)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Vulcanize all files and add output file to head.
|
||||
*/
|
||||
function vulcanizeImports(file, imports) {
|
||||
var tags = _.map(imports, function(path) {
|
||||
return linkTag(path);
|
||||
});
|
||||
|
||||
fs.writeFileSync(tmpPath, tags.join("\n"));
|
||||
|
||||
vulcan.setOptions({ abspath: tmpDir });
|
||||
|
||||
vulcan.process(tmpFile, function(err, html) {
|
||||
fs.unlinkSync(tmpPath);
|
||||
var filenameHash = crypto.createHash('md5').update(html).digest('hex');
|
||||
var filePath = '/vulcanized-' + filenameHash + '.html';
|
||||
|
||||
compileStep.addAsset({
|
||||
file.addAsset({
|
||||
path: filePath,
|
||||
data: data
|
||||
data: html
|
||||
});
|
||||
|
||||
if (_.isString(process.env.CDN_PREFIX)) {
|
||||
filePath = url.resolve(process.env.CDN_PREFIX, filePath);
|
||||
}
|
||||
|
||||
compileStep.addHtml({
|
||||
section: 'head',
|
||||
data: '<link rel="import" href="' + filePath + '">'
|
||||
});
|
||||
};
|
||||
addImportTag(file, filePath);
|
||||
});
|
||||
}
|
||||
|
||||
vulcan.setOptions({
|
||||
inputSrc: importsHtml,
|
||||
outputHandler: vulcanOutputHandler,
|
||||
abspath: 'public',
|
||||
strip: true
|
||||
}, function(error) {
|
||||
if (error) {
|
||||
log(error);
|
||||
} else {
|
||||
vulcan.processDocument();
|
||||
/**
|
||||
* Add individual import tags
|
||||
*/
|
||||
function individualImports(file, imports) {
|
||||
_.each(imports, function(path) {
|
||||
addImportTag(file, path);
|
||||
});
|
||||
}
|
||||
|
||||
function VulcanizeCompiler() {}
|
||||
VulcanizeCompiler.prototype.processFilesForTarget = function (files) {
|
||||
files.forEach(function (file) {
|
||||
// Get JSON file.
|
||||
var json = JSON.parse(file.getContentsAsString());
|
||||
|
||||
// Add polyfill to html if defined.
|
||||
if (_.isString(json.polyfill)) {
|
||||
addPolyfillTag(file, json.polyfill);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
// Optionally opt into shadow dom, rather than shady dom.
|
||||
if (json.useShadowDom) {
|
||||
addShadowDomConfig(file);
|
||||
}
|
||||
|
||||
var addImports = function(compileStep, importsHtml) {
|
||||
compileStep.addHtml({
|
||||
section: 'head',
|
||||
data: importsHtml
|
||||
// Add imports if defined.
|
||||
// log("Vulcanizing " + json.imports.length + " files");
|
||||
// vulcanizeImports(file, json.imports);
|
||||
individualImports(file, json.imports);
|
||||
});
|
||||
};
|
||||
|
||||
var log = function() {
|
||||
args = _.values(arguments);
|
||||
args.unshift("Vulcanize:");
|
||||
console.log.apply(this, args);
|
||||
};
|
||||
|
||||
Plugin.registerSourceHandler("imports.html", handler);
|
||||
Plugin.registerCompiler({
|
||||
extensions: ["vulcanize"],
|
||||
filenames: ["config"],
|
||||
archMatching: 'web',
|
||||
}, function(){
|
||||
return new VulcanizeCompiler();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user