polymer-bundler - npm Package Compare versions

Comparing version 2.3.1 to 3.0.0

CHANGELOG.md

		@@ -11,2 +11,7 @@ # Change Log

		## 3.0.0 - 2017-07-14
		- BREAKING: The following changes support polymer 2.x, but will break some Polymer 1.x projects which may rely on the rewriting of relative urls within style tags. For those projects, set the `rewriteUrlsInTemplates` option to `true` or use `--rewriteUrlsInTemplates` at command-line.
		- Fixed [issue #579](https://github.com/Polymer/polymer-bundler/issues/579) where `url()` values inside `<style>` tags inside of `<dom-module>` tags of inlined html imports were rewritten without consideration of the module's `assetpath` property.
		- Fixed issue when stylesheet imports are inlined inside of a `<dom-module>` the url resolution now takes into consideration the `assetpath`.

		## 2.3.1 - 2017-07-13
		@@ -23,2 +28,4 @@ - Rolling back these changes from 2.3.0 release which break polymer 1.x bundling case and going to release them in polymer-bundler 3.x because they are breaking changes:
		- Fixed issue where HTML imports which were not inlined, because they matched an entry in the `excludes` option, were being erroneously added to the bundle's `missingImports` set.
		- Fixed [issue #579](https://github.com/Polymer/polymer-bundler/issues/579) where `url()` values inside `<style>` tags inside of `<dom-module>` tags of inlined html imports were rewritten without consideration of the module's `assetpath` property.
		- Fixed issue when stylesheet imports are inlined inside of a `<dom-module>` the url resolution now takes into consideration the `assetpath`.

		@@ -195,2 +202,18 @@ ## 2.2.0 - 2017-06-28

		## 1.16.0 - 2017-07-14
		- Fix erroneously reverse-order inlining of style imports `<link rel="import" type="css">`.
		- Added `--polymer2` flag that changes some of the rewriting behaviors to support the fact that Polymer 2.x honors the `assetpath` of `<dom-module>` when interpreting style urls:
		- Disables rewriting urls in inlined html imports containing `<style>` tags inside `<dom-module>` containers.
		- Include consideration of container `<dom-module>` `assetpath` property when rewriting urls inside inlined style imports.

		## 1.15.5 - 2017-06-01
		- Add --out-request-list to bin/vulcanize help message

		## 1.15.4 - 2017-03-21
		- `excludes` option now honors JavaScript asset references:
		- Won't attempt to load the JS (which caused errors when local file not present.)
		- Won't inline excluded JS files.
		- Added --out-request-list option, which writes a list of request URLs required
		to vulcanize `<html file>` to a given file on success.

		## 1.15.3 - 2017-01-17
		@@ -197,0 +220,0 @@ - Fix for how paths are rewritten in nested import scenarios where paths to same

lib/bundler.d.ts

		@@ -118,3 +118,3 @@ import { Analyzer } from 'polymer-analyzer';
		*/
		private _inlineStylesheetImports(document, ast, bundle, excludes);
		private _inlineStylesheetImports(document, ast, bundle, excludes, rewriteUrlsInTemplates);
		/**
		@@ -125,3 +125,3 @@ * Replace all external stylesheet references, in `<link rel="stylesheet">`
		*/
		private _inlineStylesheetLinks(document, ast, bundle, excludes?);
		private _inlineStylesheetLinks(document, ast, bundle, excludes?, rewriteUrlsInTemplates?);
		/**
		@@ -128,0 +128,0 @@ * Old Polymer supported `<style>` tag in `<dom-module>` but outside of

lib/bundler.js

		@@ -171,4 +171,4 @@ "use strict";
		if (this.enableCssInlining) {
		yield this._inlineStylesheetLinks(document, ast, docBundle, this.excludes);
		yield this._inlineStylesheetImports(document, ast, docBundle, this.excludes);
		yield this._inlineStylesheetLinks(document, ast, docBundle, this.excludes, this.rewriteUrlsInTemplates);
		yield this._inlineStylesheetImports(document, ast, docBundle, this.excludes, this.rewriteUrlsInTemplates);
		}
		@@ -337,3 +337,3 @@ if (this.stripComments) {
		*/
		_inlineStylesheetImports(document, ast, bundle, excludes) {
		_inlineStylesheetImports(document, ast, bundle, excludes, rewriteUrlsInTemplates) {
		return __awaiter(this, void 0, void 0, function* () {
		@@ -343,3 +343,3 @@ const cssImports = dom5.queryAll(ast, matchers.stylesheetImport);
		for (const cssLink of cssImports) {
		const style = yield importUtils.inlineStylesheet(this.analyzer, document, cssLink, bundle, excludes);
		const style = yield importUtils.inlineStylesheet(this.analyzer, document, cssLink, bundle, excludes, rewriteUrlsInTemplates);
		if (style) {
		@@ -357,7 +357,7 @@ this._moveDomModuleStyleIntoTemplate(style, lastInlined);
		*/
		_inlineStylesheetLinks(document, ast, bundle, excludes) {
		_inlineStylesheetLinks(document, ast, bundle, excludes, rewriteUrlsInTemplates) {
		return __awaiter(this, void 0, void 0, function* () {
		const cssLinks = dom5.queryAll(ast, matchers.externalStyle);
		for (const cssLink of cssLinks) {
		yield importUtils.inlineStylesheet(this.analyzer, document, cssLink, bundle, excludes);
		yield importUtils.inlineStylesheet(this.analyzer, document, cssLink, bundle, excludes, rewriteUrlsInTemplates);
		}
		@@ -364,0 +364,0 @@ });

lib/import-utils.d.ts

		@@ -20,3 +20,3 @@ import { ASTNode } from 'parse5';
		*/
		export declare function inlineStylesheet(analyzer: Analyzer, document: Document, cssLink: ASTNode, docBundle: AssignedBundle, excludes?: string[]): Promise<ASTNode \| undefined>;
		export declare function inlineStylesheet(analyzer: Analyzer, document: Document, cssLink: ASTNode, docBundle: AssignedBundle, excludes?: string[], rewriteUrlsInTemplates?: boolean): Promise<ASTNode \| undefined>;
		/**
		@@ -23,0 +23,0 @@ * Given an import document with a base tag, transform all of its URLs and set

lib/import-utils.js

		@@ -188,3 +188,3 @@ "use strict";
		*/
		function inlineStylesheet(analyzer, document, cssLink, docBundle, excludes) {
		function inlineStylesheet(analyzer, document, cssLink, docBundle, excludes, rewriteUrlsInTemplates) {
		return __awaiter(this, void 0, void 0, function* () {
		@@ -210,3 +210,16 @@ const stylesheetUrl = dom5.getAttribute(cssLink, 'href');
		const media = dom5.getAttribute(cssLink, 'media');
		const resolvedStylesheetContent = rewriteCssTextBaseUrl(stylesheetContent, resolvedImportUrl, document.url);
		let newBaseUrl = document.url;
		// If the css link we are about to inline is inside of a dom-module, the new
		// base url must be calculated using the assetpath of the dom-module if
		// present, since Polymer will honor assetpath when resolving urls in
		// `<style>` tags, even inside of `<template>` tags.
		const parentDomModule = findAncestor(cssLink, dom5.predicates.hasTagName('dom-module'));
		if (!rewriteUrlsInTemplates && parentDomModule &&
		dom5.hasAttribute(parentDomModule, 'assetpath')) {
		const assetPath = dom5.getAttribute(parentDomModule, 'assetpath') \|\| '';
		if (assetPath) {
		newBaseUrl = urlLib.resolve(newBaseUrl, assetPath);
		}
		}
		const resolvedStylesheetContent = rewriteCssTextBaseUrl(stylesheetContent, resolvedImportUrl, newBaseUrl);
		const styleNode = dom5.constructors.element('style');
		@@ -258,3 +271,3 @@ if (media) {
		rewriteElementAttrsBaseUrl(ast, oldBaseUrl, newBaseUrl, rewriteUrlsInTemplates);
		rewriteStyleTagsBaseUrl(ast, oldBaseUrl, newBaseUrl);
		rewriteStyleTagsBaseUrl(ast, oldBaseUrl, newBaseUrl, rewriteUrlsInTemplates);
		setDomModuleAssetpaths(ast, oldBaseUrl, newBaseUrl);
		@@ -287,2 +300,18 @@ }
		/**
		* Walk the ancestor nodes from parentNode up to document root, returning the
		* first one matching the predicate function.
		*/
		function findAncestor(ast, predicate) {
		// The visited set protects us against circular references.
		const visited = new Set();
		while (ast.parentNode && !visited.has(ast.parentNode)) {
		if (predicate(ast.parentNode)) {
		return ast.parentNode;
		}
		visited.add(ast.parentNode);
		ast = ast.parentNode;
		}
		return undefined;
		}
		/**
		* Simple utility function used to find an item in a set with a predicate
		@@ -340,4 +369,21 @@ * function. Analagous to Array.find(), without requiring converting the set
		*/
		function rewriteStyleTagsBaseUrl(ast, oldBaseUrl, newBaseUrl) {
		const styleNodes = dom5.queryAll(ast, matchers.styleMatcher, undefined, dom5.childNodesIncludeTemplate);
		function rewriteStyleTagsBaseUrl(ast, oldBaseUrl, newBaseUrl, rewriteUrlsInTemplates = false) {
		const childNodesOption = rewriteUrlsInTemplates ?
		dom5.childNodesIncludeTemplate :
		dom5.defaultChildNodes;
		// If `rewriteUrlsInTemplates` is `true`, include `<style>` tags that are
		// inside `<template>`.
		const styleNodes = dom5.queryAll(ast, matchers.styleMatcher, undefined, childNodesOption);
		// Unless rewriteUrlsInTemplates is on, if a `<style>` tag is anywhere
		// inside a `<dom-module>` tag, then it should not have its urls rewritten.
		if (!rewriteUrlsInTemplates) {
		for (const domModule of dom5.queryAll(ast, dom5.predicates.hasTagName('dom-module'))) {
		for (const styleNode of dom5.queryAll(domModule, matchers.styleMatcher, undefined, childNodesOption)) {
		const styleNodeIndex = styleNodes.indexOf(styleNode);
		if (styleNodeIndex > -1) {
		styleNodes.splice(styleNodeIndex, 1);
		}
		}
		}
		}
		for (const node of styleNodes) {
		@@ -344,0 +390,0 @@ let styleText = dom5.getTextContent(node);

lib/test/bundler_test.js

		@@ -467,6 +467,23 @@ "use strict";
		assert.equal(styles.length, 3);
		assert.match(dom5.getTextContent(styles[0]), /regular-style/, 'regular-style.css');
		assert.match(dom5.getTextContent(styles[1]), /simple-style/, 'simple-style.css');
		assert.match(dom5.getTextContent(styles[2]), /import-linked-style/, 'import-linked-style.css');
		assert.match(dom5.getTextContent(styles[0]), /regular-style/);
		assert.match(dom5.getTextContent(styles[1]), /simple-style/);
		assert.match(dom5.getTextContent(styles[2]), /import-linked-style/);
		// Verify the inlined url() values in the stylesheet are not rewritten
		// to use the "imports/" prefix, since the stylesheet is inside a
		// `<dom-module>` with an assetpath that defines the base url as
		// "imports/".
		assert.match(dom5.getTextContent(styles[1]), /url\("assets\/platform\.png"\)/);
		}));
		test('Inlined styles observe containing dom-module assetpath', () => __awaiter(this, void 0, void 0, function* () {
		const doc = yield bundle('test/html/style-rewriting.html', { inlineCss: true });
		const style = dom5.query(doc, matchers.styleMatcher, dom5.childNodesIncludeTemplate);
		assert.isNotNull(style);
		assert.match(dom5.getTextContent(style), /url\("styles\/unicorn.png"\)/);
		}));
		test('Inlining ignores assetpath if rewriteUrlsInTemplates', () => __awaiter(this, void 0, void 0, function* () {
		const doc = yield bundle('test/html/style-rewriting.html', { inlineCss: true, rewriteUrlsInTemplates: true });
		const style = dom5.query(doc, matchers.styleMatcher, dom5.childNodesIncludeTemplate);
		assert.isNotNull(style);
		assert.match(dom5.getTextContent(style), /url\("style-rewriting\/styles\/unicorn.png"\)/);
		}));
		test('Inlined styles have proper paths', () => __awaiter(this, void 0, void 0, function* () {
		@@ -473,0 +490,0 @@ const doc = yield bundle('test/html/inline-styles.html', options);

lib/test/import-utils_test.js

		@@ -67,6 +67,10 @@ "use strict";
		<style>:host { background-image: url(background.svg); }</style>
		<div style="position: absolute;"></div>
		<div style="background-image: url(background.svg)"></div>
		</template>
		<script>Polymer({is: "my-element"})</script>
		</dom-module>
		<script>Polymer({is: "my-element"})</script>
		<template is="dom-bind">
		<style>.outside-dom-module { background-image: url(outside-dom-module.png); }</style>
		</template>
		<style>.outside-template { background-image: url(outside-template.png); }</style>
		`;
		@@ -79,7 +83,11 @@ const expected = `
		<img src="neato.gif">
		<style>:host { background-image: url("my-element/background.svg"); }</style>
		<div style="position: absolute;"></div>
		<style>:host { background-image: url(background.svg); }</style>
		<div style="background-image: url(background.svg)"></div>
		</template>
		<script>Polymer({is: "my-element"})</script>
		</dom-module>
		<script>Polymer({is: "my-element"})</script>
		<template is="dom-bind">
		<style>.outside-dom-module { background-image: url(outside-dom-module.png); }</style>
		</template>
		<style>.outside-template { background-image: url("my-element/outside-template.png"); }</style>
		`;
		@@ -98,6 +106,10 @@ const ast = astUtils.parse(html);
		<style>:host { background-image: url(background.svg); }</style>
		<div style="position: absolute;"></div>
		<div style="background-image: url(background.svg)"></div>
		</template>
		<script>Polymer({is: "my-element"})</script>
		</dom-module>
		<script>Polymer({is: "my-element"})</script>
		<template is="dom-bind">
		<style>.something { background-image: url(something.png); }</style>
		</template>
		<style>.outside-template { background-image: url(outside-template.png); }</style>
		`;
		@@ -110,6 +122,10 @@ const expected = `
		<style>:host { background-image: url("my-element/background.svg"); }</style>
		<div style="position: absolute;"></div>
		<div style="background-image: url("my-element/background.svg")"></div>
		</template>
		<script>Polymer({is: "my-element"})</script>
		</dom-module>
		<script>Polymer({is: "my-element"})</script>
		<template is="dom-bind">
		<style>.something { background-image: url("my-element/something.png"); }</style>
		</template>
		<style>.outside-template { background-image: url("my-element/outside-template.png"); }</style>
		`;
		@@ -152,4 +168,4 @@ const ast = astUtils.parse(html);
		<template>
		<style>:host { background-image: url("components/my-element/background.svg"); }</style>
		<img src="components/my-element/bloop.gif">
		<style>:host { background-image: url(background.svg); }</style>
		<img src="bloop.gif">
		</template>
		@@ -159,3 +175,3 @@ </dom-module>
		const ast = astUtils.parse(htmlBase);
		importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url', true);
		importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url');
		const actual = parse5.serialize(ast);
		@@ -184,4 +200,4 @@ assert.deepEqual(stripSpace(actual), stripSpace(expectedBase), 'base');
		<template>
		<style>:host { background-image: url("components/background.svg"); }</style>
		<img src="components/bloop.gif">
		<style>:host { background-image: url(background.svg); }</style>
		<img src="bloop.gif">
		</template>
		@@ -192,3 +208,3 @@ </dom-module>
		const ast = astUtils.parse(htmlBase);
		importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url', true);
		importUtils.rewriteAstToEmulateBaseTag(ast, 'the/doc/url');
		const actual = parse5.serialize(ast);
		@@ -195,0 +211,0 @@ assert.deepEqual(stripSpace(actual), stripSpace(expectedBase), 'base');

lib/test/url-utils_test.js

		@@ -67,2 +67,5 @@ "use strict";
		});
		test('Rewrite paths when new base url has trailing slash', () => {
		testRewrite('pic.png', 'foo/bar/baz.html', 'foo/', 'bar/pic.png');
		});
		});
		@@ -69,0 +72,0 @@ suite('Relative URL calculations', () => {

lib/url-utils.js

		@@ -108,3 +108,6 @@ /**
		parsedFrom.host === parsedTo.host) {
		let dirFrom = path.posix.dirname(parsedFrom.pathname \|\| '');
		let dirFrom = path.posix.dirname(
		// Have to append a '_' to the path because path.posix.dirname('foo/')
		// returns '.' instead of 'foo'.
		parsedFrom.pathname ? parsedFrom.pathname + '_' : '');
		let pathTo = parsedTo.pathname \|\| '';
		@@ -111,0 +114,0 @@ if (isAbsolutePath(oldBaseUrl) \|\| isAbsolutePath(newBaseUrl)) {

package.json

		{
		"name": "polymer-bundler",
		"version": "2.3.1",
		"version": "3.0.0",
		"description": "Process Web Components into one output file",
		@@ -5,0 +5,0 @@ "main": "lib/bundler.js",

README.md

		@@ -38,3 +38,3 @@ [![Build Status](https://travis-ci.org/Polymer/polymer-bundler.svg?branch=master)](https://travis-ci.org/Polymer/polymer-bundler)
		- `--redirect <prefix>\|<path>`: Routes URLs with arbitrary `<prefix>`, possibly including a protocol, hostname, and/or path prefix to a `<path>` on local filesystem. For example `--redirect "myapp://\|src"` would route `myapp://main/home.html` to `./src/main/home.html`. Multiple redirects may be specified; the earliest ones have the highest priority.
		- `--rewrite-urls-in-templates`: Fix URLs found inside certain element attributes (`action`, `assetpath`, `href`, `src`, and `style`) inside `<template>` tags.
		- `--rewrite-urls-in-templates`: Fix URLs found inside `<style>` tags and certain element attributes (`action`, `assetpath`, `href`, `src`, and `style`) when inside `<template>` tags. This may be necessary to bundle some Polymer 1.x projects with components that ues relative image urls in their styles, as Polymer 1.x did not use the `assetpath` of `<dom-module>` to resolve urls in styles like Polymer 2.x does.
		- `--shell`: Uses a bundling strategy which puts inlines shared dependencies into a specified html app "shell".
		@@ -55,2 +55,8 @@ - `--strip-comments`: Strips all HTML comments from the document which do not contain an `@license`, or start with `<!--#` or `<!--!`.

		polymer-bundler target.html --rewrite-urls-in-templates

		will inline the HTML Imports of `target.html` and rewrite relative urls encountered in style tags and element attributes to support Polymer 1.x projects which may rely on it.

		The command

		polymer-bundler target.html > build.html
		@@ -107,3 +113,3 @@
		- `inlineScripts`: Inline content of external scripts into the bundled html. Defaults to `true`.
		- `rewriteUrlsInTemplates`: Fix URLs found inside certain element attributes (`action`, `assetpath`, `href`, `src`, and `style`) inside `<template>` tags. Defaults to `false`.
		- `rewriteUrlsInTemplates`: Fix URLs found inside `<style>` tags and certain element attributes (`action`, `assetpath`, `href`, `src`, and `style`) when inside `<template>` tags. This may be necessary to bundle some Polymer 1.x projects with components that ues relative image urls in their styles, as Polymer 1.x did not use the `assetpath` of `<dom-module>` to resolve urls in styles like Polymer 2.x does. Defaults to `false`.
		- `sourcemaps`: Honor (or create) sourcemaps for inline scripts. Defaults to `false`.
		@@ -110,0 +116,0 @@ - `stripComments`: Remove all HTML comments, except for `@license`, which are merely de-duplicated, server-side include directives like `<!--# ... -->`, and other important comments of the form `<!--! ... -->`. Defaults to `false`.

lib/bundler.js.map