@parcel/transformer-html - npm Package Compare versions

Comparing version 2.0.0-alpha.1.1 to 2.0.0-alpha.2

lib/dependencies.js

@@ -18,6 +18,7 @@ "use strict";
   src: ['script', 'img', 'audio', 'video', 'source', 'track', 'iframe', 'embed'],
-  href: ['link', 'a', 'use'],
+  // Using href with <script> is described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script
+  href: ['link', 'a', 'use', 'script'],
   srcset: ['img', 'source'],
   poster: ['video'],
-  'xlink:href': ['use', 'image'],
+  'xlink:href': ['use', 'image', 'script'],
   content: ['meta'],
@@ -48,3 +49,12 @@ data: ['object']
     }
+  },
+
+  script(attrs, options) {
+    return {
+      env: {
+        outputFormat: attrs.type === 'module' && options.scopeHoist ? 'esmodule' : undefined
+      }
+    };
   }
+
 };
@@ -77,3 +87,3 @@
 
-function collectDependencies(asset) {
+function collectDependencies(asset, options) {
   let ast = (0, _nullthrows.default)(asset.ast);
@@ -117,4 +127,5 @@ (0, _posthtml.default)().walk.call(ast.program, node => {
         let depHandler = getAttrDepHandler(attr);
-        let options = OPTIONS[node.tag];
-        attrs[attr] = depHandler(asset, attrs[attr], options && options[attr]);
+        let depOptionsHandler = OPTIONS[node.tag];
+        let depOptions = typeof depOptionsHandler === 'function' ? depOptionsHandler(attrs, options) : depOptionsHandler && depOptionsHandler[attr];
+        attrs[attr] = depHandler(asset, attrs[attr], depOptions);
         ast.isDirty = true;
@@ -121,0 +132,0 @@ }

lib/HTMLTransformer.js

@@ -20,5 +20,6 @@ "use strict";
 
+var _inline = _interopRequireDefault(require("./inline"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-// import extractInlineAssets from './inline';
 var _default = new _plugin.Transformer({
@@ -43,11 +44,10 @@ canReuseAST({
 
-  async transform({
-    asset
+  transform({
+    asset,
+    options
   }) {
     // Handle .htm
     asset.type = 'html';
-    (0, _dependencies.default)(asset); // TODO: re-enable once inline assets are re-inserted into the HTML
-    // return [asset, ...extractInlineAssets(asset)];
-
-    return [asset];
+    (0, _dependencies.default)(asset, options);
+    return [asset, ...(0, _inline.default)(asset)];
   },
@@ -54,0 +54,0 @@

lib/inline.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _utils = require("@parcel/utils");
+
 var _posthtml = _interopRequireDefault(require("posthtml"));
@@ -25,6 +27,9 @@
   let ast = (0, _nullthrows.default)(asset.ast);
-  let program = ast.program; // Extract inline <script> and <style> tags for processing.
+  let program = ast.program;
+  let key = 0; // Extract inline <script> and <style> tags for processing.
 
   let parts = [];
   new _posthtml.default().walk.call(program, node => {
+    let parcelKey = (0, _utils.md5FromString)(`${asset.id}:${key++}`);
+
     if (node.tag === 'script' || node.tag === 'style') {
@@ -57,6 +62,25 @@ let value = node.content && node.content.join('').trim();
 
+        if (!node.attrs) {
+          node.attrs = {};
+        } // allow a script/style tag to declare its key
+
+
+        if (node.attrs['data-parcel-key']) {
+          parcelKey = node.attrs['data-parcel-key'];
+        } // Inform packager to remove type, since CSS and JS are the defaults.
+        // Unless it's application/ld+json
+
+
+        if (node.attrs && (node.tag === 'style' || node.attrs.type && SCRIPT_TYPES[node.attrs.type] === 'js')) {
+          delete node.attrs.type;
+        } // insert parcelId to allow us to retrieve node during packaging
+
+
+        node.attrs['data-parcel-key'] = parcelKey;
         parts.push({
           type,
           code: value,
-          inlineHTML: true,
+          uniqueKey: parcelKey,
+          isIsolated: true,
+          isInline: true,
           meta: {
@@ -75,2 +99,5 @@ type: 'tag',
         code: node.attrs.style,
+        uniqueKey: parcelKey,
+        isIsolated: true,
+        isInline: true,
         meta: {
@@ -77,0 +104,0 @@ type: 'attr',

package.json

 {
   "name": "@parcel/transformer-html",
-  "version": "2.0.0-alpha.1.1",
+  "version": "2.0.0-alpha.2",
   "license": "MIT",
@@ -11,8 +11,8 @@ "repository": {
   "engines": {
-    "node": ">= 8.0.0",
+    "node": ">= 10.0.0",
     "parcel": "^2.0.0-alpha.1.1"
   },
   "dependencies": {
-    "@parcel/plugin": "^2.0.0-alpha.1.1",
-    "@parcel/utils": "^2.0.0-alpha.1.1",
+    "@parcel/plugin": "^2.0.0-alpha.2",
+    "@parcel/utils": "^2.0.0-alpha.2",
     "nullthrows": "^1.1.1",
@@ -24,3 +24,3 @@ "posthtml": "^0.11.3",
   },
-  "gitHead": "8f9c49c1c53753b1139501cc4090cd4b1ab5ac0b",
+  "gitHead": "aa2619af0a50fecbab024d30521391814560337f",
   "publishConfig": {
@@ -27,0 +27,0 @@ "access": "public"

src/dependencies.js

 // @flow
 
-import type {MutableAsset} from '@parcel/types';
+import type {MutableAsset, PluginOptions} from '@parcel/types';
 import PostHTML from 'posthtml';
@@ -21,6 +21,7 @@
   ],
-  href: ['link', 'a', 'use'],
+  // Using href with <script> is described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script
+  href: ['link', 'a', 'use', 'script'],
   srcset: ['img', 'source'],
   poster: ['video'],
-  'xlink:href': ['use', 'image'],
+  'xlink:href': ['use', 'image', 'script'],
   content: ['meta'],
@@ -72,2 +73,10 @@ data: ['object']
     src: {isEntry: true}
+  },
+  script(attrs, options: PluginOptions) {
+    return {
+      env: {
+        outputFormat:
+          attrs.type === 'module' && options.scopeHoist ? 'esmodule' : undefined
+      }
+    };
   }
@@ -99,3 +108,6 @@ };
 
-export default function collectDependencies(asset: MutableAsset) {
+export default function collectDependencies(
+  asset: MutableAsset,
+  options: PluginOptions
+) {
   let ast = nullthrows(asset.ast);
@@ -138,4 +150,8 @@
         let depHandler = getAttrDepHandler(attr);
-        let options = OPTIONS[node.tag];
-        attrs[attr] = depHandler(asset, attrs[attr], options && options[attr]);
+        let depOptionsHandler = OPTIONS[node.tag];
+        let depOptions =
+          typeof depOptionsHandler === 'function'
+            ? depOptionsHandler(attrs, options)
+            : depOptionsHandler && depOptionsHandler[attr];
+        attrs[attr] = depHandler(asset, attrs[attr], depOptions);
         ast.isDirty = true;
@@ -142,0 +158,0 @@ }

src/HTMLTransformer.js

@@ -9,3 +9,3 @@ // @flow
 import collectDependencies from './dependencies';
-// import extractInlineAssets from './inline';
+import extractInlineAssets from './inline';
 
@@ -27,9 +27,7 @@ export default new Transformer({
 
-  async transform({asset}) {
+  transform({asset, options}) {
     // Handle .htm
     asset.type = 'html';
-    collectDependencies(asset);
-    // TODO: re-enable once inline assets are re-inserted into the HTML
-    // return [asset, ...extractInlineAssets(asset)];
-    return [asset];
+    collectDependencies(asset, options);
+    return [asset, ...extractInlineAssets(asset)];
   },
@@ -36,0 +34,0 @@

src/inline.js

 // @flow strict-local
 
 import type {MutableAsset, TransformerResult} from '@parcel/types';
+import {md5FromString} from '@parcel/utils';
 import type {PostHTMLNode} from 'posthtml';
@@ -22,2 +23,3 @@
   let program: PostHTMLNode = ast.program;
+  let key = 0;
 
@@ -27,2 +29,3 @@ // Extract inline <script> and <style> tags for processing.
   new PostHTML().walk.call(program, (node: PostHTMLNode) => {
+    let parcelKey = md5FromString(`${asset.id}:${key++}`);
     if (node.tag === 'script' || node.tag === 'style') {
@@ -54,6 +57,30 @@ let value = node.content && node.content.join('').trim();
 
+        if (!node.attrs) {
+          node.attrs = {};
+        }
+
+        // allow a script/style tag to declare its key
+        if (node.attrs['data-parcel-key']) {
+          parcelKey = node.attrs['data-parcel-key'];
+        }
+
+        // Inform packager to remove type, since CSS and JS are the defaults.
+        // Unless it's application/ld+json
+        if (
+          node.attrs &&
+          (node.tag === 'style' ||
+            (node.attrs.type && SCRIPT_TYPES[node.attrs.type] === 'js'))
+        ) {
+          delete node.attrs.type;
+        }
+
+        // insert parcelId to allow us to retrieve node during packaging
+        node.attrs['data-parcel-key'] = parcelKey;
+
         parts.push({
           type,
           code: value,
-          inlineHTML: true,
+          uniqueKey: parcelKey,
+          isIsolated: true,
+          isInline: true,
           meta: {
@@ -72,2 +99,5 @@ type: 'tag',
         code: node.attrs.style,
+        uniqueKey: parcelKey,
+        isIsolated: true,
+        isInline: true,
         meta: {
@@ -74,0 +104,0 @@ type: 'attr',

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17334

increased by18.13%

Lines of code

511

increased by15.35%

Dependency changes

• Updated@parcel/plugin@^2.0.0-alpha.2

• Updated@parcel/utils@^2.0.0-alpha.2