@parcel/packager-html - npm Package Compare versions

Comparing version 2.0.0-canary.1772 to 2.0.0-canary.1775

lib/HTMLPackager.js

@@ -28,5 +28,5 @@ "use strict";
 }
-function _utils() {
-  const data = require("@parcel/utils");
-  _utils = function () {
+function _posthtml() {
+  const data = _interopRequireDefault(require("posthtml"));
+  _posthtml = function () {
     return data;
@@ -36,5 +36,5 @@ };
 }
-function _posthtml() {
-  const data = _interopRequireDefault(require("posthtml"));
-  _posthtml = function () {
+function _utils() {
+  const data = require("@parcel/utils");
+  _utils = function () {
     return data;
@@ -81,12 +81,9 @@ };
     let code = await asset.getCode();
-
-    // Add bundles in the same bundle group that are not inline. For example, if two inline
-    // bundles refer to the same library that is extracted into a shared bundle.
-    let referencedBundles = [...(0, _utils().setDifference)(new Set(bundleGraph.getReferencedBundles(bundle)), new Set(bundleGraph.getReferencedBundles(bundle, {
-      recursive: false
-    })))];
     let renderConfig = config === null || config === void 0 ? void 0 : config.render;
     let {
       html
-    } = await (0, _posthtml().default)([tree => insertBundleReferences(referencedBundles, tree), tree => replaceInlineAssetContent(bundleGraph, getInlineBundleContents, tree)]).process(code, {
+    } = await (0, _posthtml().default)([
+    // Add bundles in the same bundle group that are not inline. For example, if two inline
+    // bundles refer to the same library that is extracted into a shared bundle.
+    tree => insertBundleReferences(bundleGraph, bundle, tree), tree => replaceInlineAssetContent(bundleGraph, getInlineBundleContents, tree)]).process(code, {
       ...renderConfig,
@@ -178,6 +175,13 @@ xmlMode: bundle.type === 'xhtml',
 }
-function insertBundleReferences(siblingBundles, tree) {
-  const bundles = [];
-  for (let bundle of siblingBundles) {
-    if (bundle.type === 'css') {
+function insertBundleReferences(bundleGraph, htmlBundle, tree) {
+  let bundles = [];
+  let importMap = {};
+  let useImportMap = htmlBundle.env.supports('import-meta-resolve');
+  let referencedBundles = new Set(bundleGraph.getReferencedBundles(htmlBundle));
+  let nonRecursiveReferencedBundles = new Set(bundleGraph.getReferencedBundles(htmlBundle, {
+    recursive: false
+  }));
+  for (let bundle of referencedBundles) {
+    let isDirectlyReferenced = nonRecursiveReferencedBundles.has(bundle);
+    if (bundle.type === 'css' && !isDirectlyReferenced) {
       bundles.push({
@@ -190,3 +194,3 @@ tag: 'link',
       });
-    } else if (bundle.type === 'js') {
+    } else if (bundle.type === 'js' && !isDirectlyReferenced) {
       let nomodule = bundle.env.outputFormat !== 'esmodule' && bundle.env.sourceType === 'module' && bundle.env.shouldScopeHoist;
@@ -203,3 +207,30 @@ bundles.push({
     }
+    if (useImportMap && bundle.type === 'js') {
+      Object.assign(importMap, (0, _utils().getImportMap)(bundleGraph, bundle));
+    }
   }
+  if (useImportMap && Object.keys(importMap).length > 0) {
+    for (let id in importMap) {
+      importMap[id] = (0, _utils().urlJoin)(htmlBundle.target.publicUrl, importMap[id]);
+    }
+
+    // If there is an existing <script type="importmap">, merge with that.
+    // This will remove the existing node so it is moved before all other scripts.
+    let existingImportMap = findImportMap(tree);
+    if (existingImportMap) {
+      if (!existingImportMap.imports) {
+        existingImportMap.imports = {};
+      }
+      importMap = Object.assign(existingImportMap.imports, importMap);
+    }
+    bundles.unshift({
+      tag: 'script',
+      attrs: {
+        type: 'importmap'
+      },
+      content: JSON.stringify({
+        imports: importMap
+      })
+    });
+  }
   addBundlesToTree(bundles, tree);
@@ -213,2 +244,22 @@ }
 }
+function findImportMap(tree) {
+  if (Array.isArray(tree)) {
+    for (let i = 0; i < tree.length; i++) {
+      var _node$attrs;
+      let node = tree[i];
+      if (node.tag === 'script' && ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.type) === 'importmap' && Array.isArray(node.content)) {
+        let importMap = JSON.parse(node.content.join(''));
+        tree.splice(i, 1);
+        return importMap;
+      } else {
+        let res = findImportMap(node);
+        if (res) {
+          return res;
+        }
+      }
+    }
+  } else if (tree && typeof tree.content === 'object') {
+    return findImportMap(tree.content);
+  }
+}
 function find(tree, tag) {
@@ -215,0 +266,0 @@ let res;

package.json

 {
   "name": "@parcel/packager-html",
-  "version": "2.0.0-canary.1772+f86f5f27c",
+  "version": "2.0.0-canary.1775+735a635f7",
   "license": "MIT",
@@ -20,12 +20,12 @@ "publishConfig": {
     "node": ">= 16.0.0",
-    "parcel": "^2.0.0-canary.1770+f86f5f27c"
+    "parcel": "^2.0.0-canary.1773+735a635f7"
   },
   "dependencies": {
-    "@parcel/plugin": "2.0.0-canary.1772+f86f5f27c",
-    "@parcel/types": "2.0.0-canary.1772+f86f5f27c",
-    "@parcel/utils": "2.0.0-canary.1772+f86f5f27c",
+    "@parcel/plugin": "2.0.0-canary.1775+735a635f7",
+    "@parcel/types": "2.0.0-canary.1775+735a635f7",
+    "@parcel/utils": "2.0.0-canary.1775+735a635f7",
     "nullthrows": "^1.1.1",
     "posthtml": "^0.16.5"
   },
-  "gitHead": "f86f5f27c3a6553e70bd35652f19e6ab8d8e4e4a"
+  "gitHead": "735a635f7eed538c449f37517b26247e0b19c1a4"
 }

src/HTMLPackager.js

@@ -7,3 +7,2 @@ // @flow strict-local
 import {Packager} from '@parcel/plugin';
-import {setDifference} from '@parcel/utils';
 import posthtml from 'posthtml';
@@ -15,2 +14,3 @@ import {
   urlJoin,
+  getImportMap,
 } from '@parcel/utils';
@@ -62,14 +62,8 @@ import nullthrows from 'nullthrows';
 
-    // Add bundles in the same bundle group that are not inline. For example, if two inline
-    // bundles refer to the same library that is extracted into a shared bundle.
-    let referencedBundles = [
-      ...setDifference(
-        new Set(bundleGraph.getReferencedBundles(bundle)),
-        new Set(bundleGraph.getReferencedBundles(bundle, {recursive: false})),
-      ),
-    ];
     let renderConfig = config?.render;
 
     let {html} = await posthtml([
-      tree => insertBundleReferences(referencedBundles, tree),
+      // Add bundles in the same bundle group that are not inline. For example, if two inline
+      // bundles refer to the same library that is extracted into a shared bundle.
+      tree => insertBundleReferences(bundleGraph, bundle, tree),
       tree =>
@@ -187,7 +181,15 @@ replaceInlineAssetContent(bundleGraph, getInlineBundleContents, tree),
 
-function insertBundleReferences(siblingBundles, tree) {
-  const bundles = [];
+function insertBundleReferences(bundleGraph, htmlBundle, tree) {
+  let bundles = [];
+  let importMap = {};
 
-  for (let bundle of siblingBundles) {
-    if (bundle.type === 'css') {
+  let useImportMap = htmlBundle.env.supports('import-meta-resolve');
+  let referencedBundles = new Set(bundleGraph.getReferencedBundles(htmlBundle));
+  let nonRecursiveReferencedBundles = new Set(
+    bundleGraph.getReferencedBundles(htmlBundle, {recursive: false}),
+  );
+
+  for (let bundle of referencedBundles) {
+    let isDirectlyReferenced = nonRecursiveReferencedBundles.has(bundle);
+    if (bundle.type === 'css' && !isDirectlyReferenced) {
       bundles.push({
@@ -200,3 +202,3 @@ tag: 'link',
       });
-    } else if (bundle.type === 'js') {
+    } else if (bundle.type === 'js' && !isDirectlyReferenced) {
       let nomodule =
@@ -216,4 +218,33 @@ bundle.env.outputFormat !== 'esmodule' &&
     }
+
+    if (useImportMap && bundle.type === 'js') {
+      Object.assign(importMap, getImportMap(bundleGraph, bundle));
+    }
   }
 
+  if (useImportMap && Object.keys(importMap).length > 0) {
+    for (let id in importMap) {
+      importMap[id] = urlJoin(htmlBundle.target.publicUrl, importMap[id]);
+    }
+
+    // If there is an existing <script type="importmap">, merge with that.
+    // This will remove the existing node so it is moved before all other scripts.
+    let existingImportMap = findImportMap(tree);
+
+    if (existingImportMap) {
+      if (!existingImportMap.imports) {
+        existingImportMap.imports = {};
+      }
+      importMap = Object.assign(existingImportMap.imports, importMap);
+    }
+
+    bundles.unshift({
+      tag: 'script',
+      attrs: {
+        type: 'importmap',
+      },
+      content: JSON.stringify({imports: importMap}),
+    });
+  }
+
   addBundlesToTree(bundles, tree);
@@ -230,2 +261,26 @@ }
 
+function findImportMap(tree) {
+  if (Array.isArray(tree)) {
+    for (let i = 0; i < tree.length; i++) {
+      let node = tree[i];
+      if (
+        node.tag === 'script' &&
+        node.attrs?.type === 'importmap' &&
+        Array.isArray(node.content)
+      ) {
+        let importMap = JSON.parse(node.content.join(''));
+        tree.splice(i, 1);
+        return importMap;
+      } else {
+        let res = findImportMap(node);
+        if (res) {
+          return res;
+        }
+      }
+    }
+  } else if (tree && typeof tree.content === 'object') {
+    return findImportMap(tree.content);
+  }
+}
+
 function find(tree, tag) {
@@ -232,0 +287,0 @@ let res;

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20009

increased by20.85%

Lines of code

558

increased by21.57%

Dependency changes

• Updated@parcel/plugin@2.0.0-canary.1775+735a635f7

• Updated@parcel/types@2.0.0-canary.1775+735a635f7

• Updated@parcel/utils@2.0.0-canary.1775+735a635f7