polymer-bundler - npm Package Compare versions

Comparing version 2.0.0-pre.9 to 2.0.0-pre.10

CHANGELOG.md

@@ -10,2 +10,7 @@ # Change Log
 
+## 2.0.0-pre.10 - 2017-03-15
+
+- Add a sourcemap option to properly handle or create sourcemaps for
+  script tags
+
 ## 2.0.0-pre.9 - 2017-03-07
@@ -12,0 +17,0 @@ - Bump dependency on analyzer

lib/bin/polymer-bundler.js

@@ -20,3 +20,2 @@ #!/usr/bin/env node
 const polymer_analyzer_1 = require("polymer-analyzer");
-const fs_url_loader_1 = require("polymer-analyzer/lib/url-loader/fs-url-loader");
 const bundle_manifest_1 = require("../bundle-manifest");
@@ -106,2 +105,8 @@ console.warn('polymer-bundler is currently in alpha! Use at your own risk!');
         description: 'Input HTML. If not specified, will be the last command line argument.'
+    },
+    {
+        name: 'sourcemaps',
+        type: Boolean,
+        defaultOption: false,
+        description: 'Create and process sourcemaps for scripts.'
     }
@@ -158,3 +163,3 @@ ];
 options.inlineCss = options['inline-css'];
-options.analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader() });
+options.analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader() });
 function documentCollectionToManifestJson(documents) {
@@ -161,0 +166,0 @@ const manifest = {};

lib/bundler.d.ts

@@ -11,2 +11,3 @@ import { Analyzer } from 'polymer-analyzer';
     inlineScripts?: boolean;
+    sourcemaps?: boolean;
     stripComments?: boolean;
@@ -21,2 +22,3 @@ stripExcludes?: UrlString[];
     implicitStrip: boolean;
+    sourcemaps: boolean;
     stripComments: boolean;
@@ -23,0 +25,0 @@ stripExcludes: UrlString[];

lib/bundler.js

@@ -28,3 +28,2 @@ "use strict";
 const polymer_analyzer_1 = require("polymer-analyzer");
-const fs_url_loader_1 = require("polymer-analyzer/lib/url-loader/fs-url-loader");
 const astUtils = require("./ast-utils");
@@ -36,2 +35,3 @@ const bundleManifestLib = require("./bundle-manifest");
 const matchers = require("./matchers");
+const source_map_1 = require("./source-map");
 const urlUtils = require("./url-utils");
@@ -43,3 +43,3 @@ class Bundler {
             opts.analyzer :
-            new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader() });
+            new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader() });
         // implicitStrip should be true by default
@@ -51,2 +51,3 @@ this.implicitStrip = !Boolean(opts.noImplicitStrip);
         this.enableScriptInlining = Boolean(opts.inlineScripts);
+        this.sourcemaps = Boolean(opts.sourcemaps);
     }
@@ -157,3 +158,8 @@ /**
             }
-            return ast;
+            if (this.sourcemaps) {
+                return source_map_1.updateSourcemapLocations(document, ast);
+            }
+            else {
+                return ast;
+            }
         });
@@ -232,3 +238,3 @@ }
             for (const htmlImport of htmlImports) {
-                yield importUtils.inlineHtmlImport(document, htmlImport, visitedUrls, bundle, bundleManifest);
+                yield importUtils.inlineHtmlImport(document, htmlImport, visitedUrls, bundle, bundleManifest, this.sourcemaps);
             }
@@ -245,3 +251,3 @@ });
             for (const externalScript of scriptImports) {
-                yield importUtils.inlineScript(document, externalScript);
+                yield importUtils.inlineScript(document, externalScript, this.sourcemaps);
             }
@@ -248,0 +254,0 @@ });

lib/import-utils.d.ts

 import { ASTNode } from 'parse5';
-import { Document } from 'polymer-analyzer/lib/model/model';
+import { Document, ParsedHtmlDocument } from 'polymer-analyzer';
 import { AssignedBundle, BundleManifest } from './bundle-manifest';
@@ -9,3 +9,3 @@ import { UrlString } from './url-utils';
  */
-export declare function inlineHtmlImport(document: Document, linkTag: ASTNode, visitedUrls: Set<UrlString>, docBundle: AssignedBundle, manifest: BundleManifest): Promise<void>;
+export declare function inlineHtmlImport(document: Document, linkTag: ASTNode, visitedUrls: Set<UrlString>, docBundle: AssignedBundle, manifest: BundleManifest, enableSourcemaps: boolean): Promise<void>;
 /**
@@ -15,3 +15,3 @@ * Inlines the contents of the document returned by the script tag's src url
  */
-export declare function inlineScript(document: Document, scriptTag: ASTNode): Promise<string | undefined>;
+export declare function inlineScript(document: Document, scriptTag: ASTNode, enableSourcemaps: boolean): Promise<string | undefined>;
 /**
@@ -33,1 +33,10 @@ * Inlines the contents of the stylesheet returned by the link tag's href url
 export declare function rewriteAstBaseUrl(ast: ASTNode, oldBaseUrl: UrlString, newBaseUrl: UrlString): void;
+/**
+ * Walk through inline scripts of an import document.
+ * For each script create identity source maps unless one already exists.
+ *
+ * The generated script mapping detail is the relative location within
+ * the script tag. Later this will be updated to account for the
+ * line offset within the final bundle.
+ */
+export declare function addOrUpdateSourcemapsForInlineScripts(originalDoc: Document, reparsedDoc: ParsedHtmlDocument, oldBaseUrl: UrlString): Promise<void[]>;

lib/import-utils.js

@@ -26,2 +26,3 @@ "use strict";
 const parse5 = require("parse5");
+const polymer_analyzer_1 = require("polymer-analyzer");
 const urlLib = require("url");
@@ -31,2 +32,3 @@ const astUtils = require("./ast-utils");
 const matchers = require("./matchers");
+const source_map_1 = require("./source-map");
 const encode_string_1 = require("./third_party/UglifyJS2/encode-string");
@@ -41,3 +43,3 @@ const urlUtils = require("./url-utils");
  */
-function inlineHtmlImport(document, linkTag, visitedUrls, docBundle, manifest) {
+function inlineHtmlImport(document, linkTag, visitedUrls, docBundle, manifest, enableSourcemaps) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -90,5 +92,16 @@ const rawImportUrl = dom5.getAttribute(linkTag, 'href');
         // not get html, head or body wrappers.
-        const importAst = parse5.parseFragment(htmlImport.document.parsedDocument.contents);
+        const importAst = parse5.parseFragment(htmlImport.document.parsedDocument.contents, { locationInfo: true });
         rewriteAstToEmulateBaseTag(importAst, resolvedImportUrl);
         rewriteAstBaseUrl(importAst, resolvedImportUrl, document.url);
+        if (enableSourcemaps) {
+            const reparsedDoc = new polymer_analyzer_1.ParsedHtmlDocument({
+                url: document.url,
+                contents: htmlImport.document.parsedDocument.contents,
+                ast: importAst,
+                isInline: false,
+                locationOffset: undefined,
+                astNode: null
+            });
+            yield addOrUpdateSourcemapsForInlineScripts(document, reparsedDoc, resolvedImportUrl);
+        }
         const nestedImports = dom5.queryAll(importAst, matchers.htmlImport);
@@ -100,3 +113,3 @@ // Move all of the import doc content after the html import.
         for (const nestedImport of nestedImports) {
-            yield inlineHtmlImport(document, nestedImport, visitedUrls, docBundle, manifest);
+            yield inlineHtmlImport(document, nestedImport, visitedUrls, docBundle, manifest, enableSourcemaps);
         }
@@ -110,3 +123,3 @@ });
  */
-function inlineScript(document, scriptTag) {
+function inlineScript(document, scriptTag, enableSourcemaps) {
     return __awaiter(this, void 0, void 0, function* () {
@@ -121,5 +134,10 @@ const rawImportUrl = dom5.getAttribute(scriptTag, 'src');
         // Second argument 'true' tells encodeString to escape <script> tags.
-        const scriptContent = encode_string_1.default(scriptImport.document.parsedDocument.contents, true);
+        let scriptContent = scriptImport.document.parsedDocument.contents;
+        if (enableSourcemaps) {
+            // it's easier to calculate offsets if the external script contents don't
+            // start on the same line as the script tag. Offset the map appropriately.
+            scriptContent = yield source_map_1.addOrUpdateSourcemapComment(document.analyzer, resolvedImportUrl, '\n' + scriptContent, -1, 0, 1, 0);
+        }
         dom5.removeAttribute(scriptTag, 'src');
-        dom5.setTextContent(scriptTag, scriptContent);
+        dom5.setTextContent(scriptTag, encode_string_1.default(scriptContent, true));
         return scriptContent;
@@ -195,2 +213,25 @@ });
 /**
+ * Walk through inline scripts of an import document.
+ * For each script create identity source maps unless one already exists.
+ *
+ * The generated script mapping detail is the relative location within
+ * the script tag. Later this will be updated to account for the
+ * line offset within the final bundle.
+ */
+function addOrUpdateSourcemapsForInlineScripts(originalDoc, reparsedDoc, oldBaseUrl) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const inlineScripts = dom5.queryAll(reparsedDoc.ast, matchers.inlineJavascript);
+        const promises = inlineScripts.map(scriptAst => {
+            let content = dom5.getTextContent(scriptAst);
+            const sourceRange = reparsedDoc.sourceRangeForStartTag(scriptAst);
+            return source_map_1.addOrUpdateSourcemapComment(originalDoc.analyzer, oldBaseUrl, content, sourceRange.end.line, sourceRange.end.column, -sourceRange.end.line + 1, -sourceRange.end.column)
+                .then(updatedContent => {
+                dom5.setTextContent(scriptAst, encode_string_1.default(updatedContent));
+            });
+        });
+        return Promise.all(promises);
+    });
+}
+exports.addOrUpdateSourcemapsForInlineScripts = addOrUpdateSourcemapsForInlineScripts;
+/**
  * Simple utility function used to find an item in a set with a predicate
@@ -197,0 +238,0 @@ * function.  Analagous to Array.find(), without requiring converting the set

lib/test/bundler_test.js

@@ -32,3 +32,2 @@ "use strict";
 const polymer_analyzer_1 = require("polymer-analyzer");
-const fs_url_loader_1 = require("polymer-analyzer/lib/url-loader/fs-url-loader");
 const bundle_manifest_1 = require("../bundle-manifest");
@@ -48,3 +47,3 @@ const bundler_1 = require("../bundler");
             if (!bundlerOpts.analyzer) {
-                bundlerOpts.analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader(path.dirname(inputPath)) });
+                bundlerOpts.analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader(path.dirname(inputPath)) });
                 inputPath = path.basename(inputPath);
@@ -367,3 +366,3 @@ }
                 inlineScripts: true,
-                analyzer: new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader() }),
+                analyzer: new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader() }),
             });
@@ -485,3 +484,3 @@ const scripts = dom5.queryAll(doc, matchers.inlineJavascript);
         test('Assetpath rewriting', () => __awaiter(this, void 0, void 0, function* () {
-            const doc = yield bundle('test/html/path-rewriting/src/app-main/app-main.html', { analyzer: new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader() }) });
+            const doc = yield bundle('test/html/path-rewriting/src/app-main/app-main.html', { analyzer: new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader() }) });
             assert(doc);
@@ -488,0 +487,0 @@ const domModules = dom5.queryAll(doc, preds.hasTagName('dom-module'));

lib/test/deps-index_test.js

@@ -21,3 +21,2 @@ "use strict";
 const polymer_analyzer_1 = require("polymer-analyzer");
-const fs_url_loader_1 = require("polymer-analyzer/lib/url-loader/fs-url-loader");
 const deps_index_1 = require("../deps-index");
@@ -33,3 +32,3 @@ chai.config.showDiff = true;
     beforeEach(() => {
-        analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader() });
+        analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader() });
     });
@@ -36,0 +35,0 @@ const expectedEntrypointsToDeps = new Map([

lib/test/shards_test.js

@@ -30,3 +30,2 @@ "use strict";
 const polymer_analyzer_1 = require("polymer-analyzer");
-const fs_url_loader_1 = require("polymer-analyzer/lib/url-loader/fs-url-loader");
 const bundle_manifest_1 = require("../bundle-manifest");
@@ -50,3 +49,3 @@ const bundler_1 = require("../bundler");
             if (!bundlerOpts.analyzer) {
-                bundlerOpts.analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new fs_url_loader_1.FSUrlLoader() });
+                bundlerOpts.analyzer = new polymer_analyzer_1.Analyzer({ urlLoader: new polymer_analyzer_1.FSUrlLoader() });
             }
@@ -53,0 +52,0 @@ bundler = new bundler_1.Bundler(bundlerOpts);

package.json

 {
   "name": "polymer-bundler",
-  "version": "2.0.0-pre.9",
+  "version": "2.0.0-pre.10",
   "description": "Process Web Components into one output file",
@@ -21,2 +21,3 @@ "main": "lib/bundler.js",
     "es6-promise": "^2.1.0",
+    "espree": "^3.4.0",
     "mkdirp": "^0.5.1",
@@ -26,3 +27,4 @@ "nopt": "^3.0.1",
     "path-posix": "^1.0.0",
-    "polymer-analyzer": "2.0.0-alpha.31"
+    "polymer-analyzer": "2.0.0-alpha.33",
+    "source-map": "^0.5.6"
   },
@@ -35,2 +37,3 @@ "devDependencies": {
     "@types/parse5": "^2.2.33",
+    "@types/source-map": "^0.5.0",
     "chai": "^3.5.0",
@@ -37,0 +40,0 @@ "clang-format": "^1.0.42",

README.md

@@ -30,2 +30,3 @@ [![NPM version](http://img.shields.io/npm/v/polymer-bundler.svg)](https://npmjs.org/package/polymer-bundler)
 - `--strip-comments`: Strips all HTML comments not containing an @license from the document.
+- `--sourcemaps`: Honor (or create) sourcemaps for inline script tags.
 - `--out-html <path>`: If specified, output will be written to <path> instead of stdout.
@@ -100,2 +101,3 @@ - `--out-dir <path>`: If specified, output will be written to <path>. Necessary if bundling multiple files.
 - `redirects`: An array of strings with the format `URI|PATH` where url is a URI composed of a protocol, hostname, and path and PATH is a local filesystem path to replace the matched URI part with. Multiple redirects may be specified; the earliest ones have the highest priority.
+- `sourcemaps`: Honor (or create) sourcemaps for inline scripts
 - `stripComments`: Remove non-license HTML comments.
@@ -102,0 +104,0 @@ - `loader`: A [hydrolysis](https://www.npmjs.com/package/hydrolysis) loader.

No alert changes

Improved metrics

Number of lines in readme file

146

increased by1.39%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

317115

decreased by-39.55%

Dependency count

12

increased by20%

Dev dependency count

16

increased by6.67%

Number of package files

71

decreased by-39.83%

Lines of code

3926

decreased by-41.64%

Dependency changes

• + Addedespree@^3.4.0

• + Addedsource-map@^0.5.6

• + Addedpolymer-analyzer@2.0.0-alpha.33(transitive)

• + Addedsource-map@0.5.7(transitive)

• - Removed@types/estraverse@0.0.2(transitive)

• - Removedestraverse@3.1.0(transitive)

• - Removedpolymer-analyzer@2.0.0-alpha.31(transitive)

• Updatedpolymer-analyzer@2.0.0-alpha.33