@atlaspack/transformer-html 2.14.5-canary.31 → 2.14.5-canary.311

package/dist/inline.js

@@ -0,0 +1,162 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = extractInlineAssets;
+const rust_1 = require("@atlaspack/rust");
+const posthtml_1 = __importDefault(require("posthtml"));
+const SCRIPT_TYPES = {
+    'application/javascript': 'js',
+    'text/javascript': 'js',
+    'application/json': false,
+    'application/ld+json': 'jsonld',
+    'text/html': false,
+    module: 'js',
+};
+function extractInlineAssets(asset, ast) {
+    let program = ast.program;
+    let key = 0;
+    // Extract inline <script> and <style> tags for processing.
+    let parts = [];
+    let hasModuleScripts = false;
+    // @ts-expect-error TS2339
+    (0, posthtml_1.default)().walk.call(program, (node) => {
+        let parcelKey = (0, rust_1.hashString)(`${asset.id}:${key++}`);
+        if (node.tag === 'script' || node.tag === 'style') {
+            let value = node.content && node.content.join('');
+            if (value != null) {
+                let type, env;
+                if (node.tag === 'style') {
+                    if (node.attrs && node.attrs.type != null) {
+                        type = node.attrs.type.split('/')[1];
+                    }
+                    else {
+                        type = 'css';
+                    }
+                }
+                else if (node.attrs && node.attrs.type != null) {
+                    // Skip JSON
+                    // @ts-expect-error TS7053
+                    if (SCRIPT_TYPES[node.attrs.type] === false) {
+                        return node;
+                    }
+                    // @ts-expect-error TS7053
+                    if (SCRIPT_TYPES[node.attrs.type]) {
+                        // @ts-expect-error TS7053
+                        type = SCRIPT_TYPES[node.attrs.type];
+                    }
+                    else {
+                        type = node.attrs.type.split('/')[1];
+                    }
+                    let outputFormat = 'global';
+                    let sourceType = 'script';
+                    let attrs = node.attrs;
+                    if (attrs && attrs.type === 'module') {
+                        if (asset.env.shouldScopeHoist &&
+                            asset.env.supports('esmodules', true)) {
+                            outputFormat = 'esmodule';
+                        }
+                        else {
+                            delete attrs.type;
+                        }
+                        sourceType = 'module';
+                    }
+                    let loc = node.location
+                        ? {
+                            filePath: asset.filePath,
+                            start: node.location.start,
+                            end: node.location.end,
+                        }
+                        : undefined;
+                    env = {
+                        sourceType,
+                        outputFormat,
+                        loc,
+                    };
+                }
+                else {
+                    let loc = node.location
+                        ? {
+                            filePath: asset.filePath,
+                            start: node.location.start,
+                            end: node.location.end,
+                        }
+                        : undefined;
+                    type = 'js';
+                    env = {
+                        sourceType: 'script',
+                        loc,
+                    };
+                }
+                if (!type) {
+                    return node;
+                }
+                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.
+                if (node.attrs?.type && node.tag === 'style') {
+                    delete node.attrs.type;
+                }
+                let bundleBehavior = 'inline';
+                if (typeof node.attrs['data-atlaspack-isolated'] !== 'undefined') {
+                    bundleBehavior = 'inlineIsolated';
+                    delete node.attrs['data-atlaspack-isolated'];
+                }
+                // insert parcelId to allow us to retrieve node during packaging
+                node.attrs['data-parcel-key'] = parcelKey;
+                asset.setAST(ast); // mark dirty
+                asset.addDependency({
+                    specifier: parcelKey,
+                    specifierType: 'esm',
+                });
+                parts.push({
+                    type,
+                    content: value,
+                    uniqueKey: parcelKey,
+                    bundleBehavior,
+                    // @ts-expect-error TS2322
+                    env,
+                    meta: {
+                        type: 'tag',
+                        node,
+                        startLine: node.location?.start.line,
+                    },
+                });
+                if (env && env.sourceType === 'module') {
+                    hasModuleScripts = true;
+                }
+            }
+        }
+        // Process inline style attributes.
+        let attrs = node.attrs;
+        let style = attrs?.style;
+        if (attrs != null && style != null) {
+            attrs.style = asset.addDependency({
+                specifier: parcelKey,
+                specifierType: 'esm',
+            });
+            asset.setAST(ast); // mark dirty
+            parts.push({
+                type: 'css',
+                content: style,
+                uniqueKey: parcelKey,
+                bundleBehavior: 'inline',
+                meta: {
+                    type: 'attr',
+                    node,
+                },
+            });
+        }
+        return node;
+    });
+    return {
+        assets: parts,
+        hasModuleScripts,
+    };
+}

package/lib/HTMLTransformer.js

@@ -58,6 +58,8 @@ function _diagnostic() {
   return data;
 }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// @ts-expect-error TS2305
+
 function parseHTML(code, xmlMode) {
   return {
     type: 'posthtml',
@@ -156,6 +158,7 @@ const transformerOpts = exports.transformerOpts = {
   }) {
     return {
       content: (0, _posthtmlRender().render)(ast.program, {
+        // @ts-expect-error TS2322
         closingSingleTag: asset.type === 'xhtml' ? 'slash' : undefined
       })
     };
@@ -165,6 +168,7 @@ var _default = exports.default = new (_plugin().Transformer)(transformerOpts);
 function findFirstMatch(ast, expressions) {
   let found;
   for (const expression of expressions) {
+    // @ts-expect-error TS2339
     (0, _posthtml().default)().match.call(ast.program, expression, node => {
       found = node;
       return node;

package/lib/dependencies.js

@@ -19,6 +19,8 @@ function _srcset() {
   return data;
 }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// @ts-expect-error TS2724
+
 // A list of all attributes that may produce a dependency
 // Based on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
 const ATTRS = {
@@ -89,6 +91,7 @@ function collectDependencies(asset, ast) {
   let hasModuleScripts = false;
   let seen = new Set();
   let errors = [];
+  // @ts-expect-error TS2339
   (0, _posthtml().default)().walk.call(ast.program, node => {
     let {
       tag,
@@ -100,6 +103,7 @@ function collectDependencies(asset, ast) {
     seen.add(node);
     if (tag === 'meta') {
       const isMetaDependency = Object.keys(attrs).some(attr => {
+        // @ts-expect-error TS7053
         let values = META[attr];
         return values && values.includes(attrs[attr]) && attrs.content !== '' && !(attrs.name === 'msapplication-config' && attrs.content === 'none');
       });
@@ -169,6 +173,7 @@ function collectDependencies(asset, ast) {
           priority: 'parallel',
           bundleBehavior: sourceType === 'script' || attrs.async != null ? 'isolated' : undefined,
           env: {
+            // @ts-expect-error TS2322
             sourceType,
             outputFormat: 'global',
             loc
@@ -185,7 +190,9 @@ function collectDependencies(asset, ast) {
         // because nomodule scripts won't run when modules are supported.
         bundleBehavior: sourceType === 'script' || attrs.async != null ? 'isolated' : undefined,
         env: {
+          // @ts-expect-error TS2322
           sourceType,
+          // @ts-expect-error TS2322
           outputFormat,
           loc
         }
@@ -204,6 +211,8 @@ function collectDependencies(asset, ast) {
       if (attrs[attr][0] === '#') {
         continue;
       }
+
+      // @ts-expect-error TS7053
       let elements = ATTRS[attr];
       if (elements && elements.includes(node.tag)) {
         // Check for empty string
@@ -215,6 +224,7 @@ function collectDependencies(asset, ast) {
           });
         }
         let depHandler = getAttrDepHandler(attr);
+        // @ts-expect-error TS7053
         let depOptionsHandler = OPTIONS[node.tag];
         let depOptions = typeof depOptionsHandler === 'function' ? depOptionsHandler(attrs, asset.env) : depOptionsHandler && depOptionsHandler[attr];
         attrs[attr] = depHandler(asset, attrs[attr], depOptions);

package/lib/inline.js

@@ -19,6 +19,8 @@ function _posthtml() {
   return data;
 }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// @ts-expect-error TS2724
+
 const SCRIPT_TYPES = {
   'application/javascript': 'js',
   'text/javascript': 'js',
@@ -34,6 +36,7 @@ function extractInlineAssets(asset, ast) {
   // Extract inline <script> and <style> tags for processing.
   let parts = [];
   let hasModuleScripts = false;
+  // @ts-expect-error TS2339
   (0, _posthtml().default)().walk.call(program, node => {
     let parcelKey = (0, _rust().hashString)(`${asset.id}:${key++}`);
     if (node.tag === 'script' || node.tag === 'style') {
@@ -49,10 +52,14 @@ function extractInlineAssets(asset, ast) {
           }
         } else if (node.attrs && node.attrs.type != null) {
           // Skip JSON
+          // @ts-expect-error TS7053
           if (SCRIPT_TYPES[node.attrs.type] === false) {
             return node;
           }
+
+          // @ts-expect-error TS7053
           if (SCRIPT_TYPES[node.attrs.type]) {
+            // @ts-expect-error TS7053
             type = SCRIPT_TYPES[node.attrs.type];
           } else {
             type = node.attrs.type.split('/')[1];
@@ -106,6 +113,11 @@ function extractInlineAssets(asset, ast) {
         if ((_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.type && node.tag === 'style') {
           delete node.attrs.type;
         }
+        let bundleBehavior = 'inline';
+        if (typeof node.attrs['data-atlaspack-isolated'] !== 'undefined') {
+          bundleBehavior = 'inlineIsolated';
+          delete node.attrs['data-atlaspack-isolated'];
+        }
 
         // insert parcelId to allow us to retrieve node during packaging
         node.attrs['data-parcel-key'] = parcelKey;
@@ -119,11 +131,11 @@ function extractInlineAssets(asset, ast) {
           type,
           content: value,
           uniqueKey: parcelKey,
-          bundleBehavior: 'inline',
+          bundleBehavior,
+          // @ts-expect-error TS2322
           env,
           meta: {
             type: 'tag',
-            // $FlowFixMe
             node,
             startLine: (_node$location = node.location) === null || _node$location === void 0 ? void 0 : _node$location.start.line
           }
@@ -151,7 +163,6 @@ function extractInlineAssets(asset, ast) {
         bundleBehavior: 'inline',
         meta: {
           type: 'attr',
-          // $FlowFixMe
           node
         }
       });

package/lib/types/HTMLTransformer.d.ts

@@ -0,0 +1,6 @@
+import { Transformer } from '@atlaspack/plugin';
+import type { AST, Transformer as TransformerOpts } from '@atlaspack/types';
+export declare function parseHTML(code: string, xmlMode: boolean): AST;
+export declare const transformerOpts: TransformerOpts<undefined>;
+declare const _default: Transformer<undefined>;
+export default _default;

package/lib/types/dependencies.d.ts

@@ -0,0 +1,2 @@
+import type { AST, MutableAsset } from '@atlaspack/types';
+export default function collectDependencies(asset: MutableAsset, ast: AST): boolean;

package/lib/types/inline.d.ts

@@ -0,0 +1,7 @@
+import type { AST, MutableAsset, TransformerResult } from '@atlaspack/types';
+interface ExtractInlineAssetsResult {
+    hasModuleScripts: boolean;
+    assets: Array<TransformerResult>;
+}
+export default function extractInlineAssets(asset: MutableAsset, ast: AST): ExtractInlineAssetsResult;
+export {};

package/package.json

@@ -1,26 +1,29 @@
 {
   "name": "@atlaspack/transformer-html",
-  "version": "2.14.5-canary.31+e05252108",
+  "version": "2.14.5-canary.311+38f3569a7",
   "license": "(MIT OR Apache-2.0)",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "test": "mocha"
+    "test": "mocha",
+    "build:lib": "gulp build --gulpfile ../../../gulpfile.js --cwd ."
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/atlassian-labs/atlaspack.git"
   },
-  "main": "lib/HTMLTransformer.js",
-  "source": "src/HTMLTransformer.js",
+  "main": "./lib/HTMLTransformer.js",
+  "source": "./src/HTMLTransformer.ts",
+  "types": "./lib/types/HTMLTransformer.d.ts",
   "engines": {
     "node": ">= 16.0.0"
   },
   "dependencies": {
-    "@atlaspack/diagnostic": "2.14.1-canary.99+e05252108",
-    "@atlaspack/plugin": "2.14.5-canary.31+e05252108",
-    "@atlaspack/rust": "3.2.1-canary.31+e05252108",
+    "@atlaspack/diagnostic": "2.14.1-canary.379+38f3569a7",
+    "@atlaspack/feature-flags": "2.14.1-canary.379+38f3569a7",
+    "@atlaspack/plugin": "2.14.5-canary.311+38f3569a7",
+    "@atlaspack/rust": "3.2.1-canary.311+38f3569a7",
     "nullthrows": "^1.1.1",
     "posthtml": "^0.16.5",
     "posthtml-parser": "^0.10.1",
@@ -29,8 +32,8 @@
     "srcset": "4"
   },
   "devDependencies": {
-    "@atlaspack/core": "2.16.2-canary.31+e05252108"
+    "@atlaspack/core": "2.16.2-canary.311+38f3569a7"
   },
   "type": "commonjs",
-  "gitHead": "e0525210850ed1606146eb86991049cf567c5dec"
-}
+  "gitHead": "38f3569a7024357c43274666312bc6d024bfe5f9"
+}

package/src/{HTMLTransformer.js → HTMLTransformer.ts}

@@ -1,9 +1,8 @@
-// @flow
-
 import {Transformer} from '@atlaspack/plugin';
 import type {AST, Transformer as TransformerOpts} from '@atlaspack/types';
 import {parser as parse} from 'posthtml-parser';
 import nullthrows from 'nullthrows';
+// @ts-expect-error TS2305
 import type {PostHTMLExpression, PostHTMLNode} from 'posthtml';
 import PostHTML from 'posthtml';
 import {render} from 'posthtml-render';
@@ -25,7 +24,7 @@ export function parseHTML(code: string, xmlMode: boolean): AST {
   };
 }
 
-export const transformerOpts: TransformerOpts<void> = {
+export const transformerOpts: TransformerOpts<undefined> = {
   canReuseAST({ast}) {
     return ast.type === 'posthtml' && semver.satisfies(ast.version, '^0.4.0');
   },
@@ -46,7 +45,7 @@ export const transformerOpts: TransformerOpts<void> = {
     let hasModuleScripts;
     try {
       hasModuleScripts = collectDependencies(asset, ast);
-    } catch (errors) {
+    } catch (errors: any) {
       if (Array.isArray(errors)) {
         throw new ThrowableDiagnostic({
           diagnostic: errors.map((error) => ({
@@ -81,7 +80,7 @@ export const transformerOpts: TransformerOpts<void> = {
           }),
         },
         content: [],
-      };
+      } as const;
 
       const found = findFirstMatch(ast, [{tag: 'body'}, {tag: 'html'}]);
 
@@ -108,20 +107,23 @@ export const transformerOpts: TransformerOpts<void> = {
   generate({ast, asset}) {
     return {
       content: render(ast.program, {
+        // @ts-expect-error TS2322
         closingSingleTag: asset.type === 'xhtml' ? 'slash' : undefined,
       }),
     };
   },
 };
-export default (new Transformer(transformerOpts): Transformer);
+
+export default new Transformer(transformerOpts) as Transformer<undefined>;
 
 function findFirstMatch(
   ast: AST,
   expressions: PostHTMLExpression[],
-): ?PostHTMLNode {
+): PostHTMLNode | null | undefined {
   let found;
 
   for (const expression of expressions) {
+    // @ts-expect-error TS2339
     PostHTML().match.call(ast.program, expression, (node) => {
       found = node;
       return node;

package/src/{dependencies.js → dependencies.ts}

@@ -1,6 +1,5 @@
-// @flow
-
 import type {AST, MutableAsset, FilePath} from '@atlaspack/types';
+// @ts-expect-error TS2724
 import type {PostHTMLNode} from 'posthtml';
 import PostHTML from 'posthtml';
 import {parse, stringify} from 'srcset';
@@ -26,7 +25,7 @@ const ATTRS = {
   'xlink:href': ['use', 'image', 'script'],
   content: ['meta'],
   data: ['object'],
-};
+} as const;
 
 // A list of metadata that should produce a dependency
 // Based on:
@@ -63,7 +62,7 @@ const META = {
     'contentUrl',
     'downloadUrl',
   ],
-};
+} as const;
 
 const FEED_TYPES = new Set(['application/rss+xml', 'application/atom+xml']);
 
@@ -75,7 +74,7 @@ const OPTIONS = {
   iframe: {
     src: {needsStableName: true},
   },
-  link(attrs) {
+  link(attrs: any) {
     if (attrs.rel === 'stylesheet') {
       return {
         // Keep in the same bundle group as the HTML.
@@ -83,9 +82,13 @@ const OPTIONS = {
       };
     }
   },
-};
+} as const;
 
-function collectSrcSetDependencies(asset, srcset, opts) {
+function collectSrcSetDependencies(
+  asset: MutableAsset,
+  srcset: string,
+  opts: any,
+) {
   let parsed = parse(srcset).map(({url, ...v}) => ({
     url: asset.addURLDependency(url, opts),
     ...v,
@@ -93,12 +96,13 @@ function collectSrcSetDependencies(asset, srcset, opts) {
   return stringify(parsed);
 }
 
-function getAttrDepHandler(attr) {
+function getAttrDepHandler(attr: string) {
   if (attr === 'srcset' || attr === 'imagesrcset') {
     return collectSrcSetDependencies;
   }
 
-  return (asset, src, opts) => asset.addURLDependency(src, opts);
+  return (asset: MutableAsset, src: string, opts: any) =>
+    asset.addURLDependency(src, opts);
 }
 
 export default function collectDependencies(
@@ -108,11 +112,12 @@ export default function collectDependencies(
   let isDirty = false;
   let hasModuleScripts = false;
   let seen = new Set();
-  let errors: Array<{|
-    message: string,
-    filePath: FilePath,
-    loc: PostHTMLNode['location'],
-  |}> = [];
+  let errors: Array<{
+    message: string;
+    filePath: FilePath;
+    loc: PostHTMLNode['location'];
+  }> = [];
+  // @ts-expect-error TS2339
   PostHTML().walk.call(ast.program, (node) => {
     let {tag, attrs} = node;
     if (!attrs || seen.has(node)) {
@@ -123,6 +128,7 @@ export default function collectDependencies(
 
     if (tag === 'meta') {
       const isMetaDependency = Object.keys(attrs).some((attr) => {
+        // @ts-expect-error TS7053
         let values = META[attr];
         return (
           values &&
@@ -197,7 +203,7 @@ export default function collectDependencies(
 
       // If this is a <script type="module">, and not all of the browser targets support ESM natively,
       // add a copy of the script tag with a nomodule attribute.
-      let copy: ?PostHTMLNode;
+      let copy: PostHTMLNode | null | undefined;
       if (
         outputFormat === 'esmodule' &&
         !asset.env.supports('esmodules', true)
@@ -215,6 +221,7 @@ export default function collectDependencies(
               ? 'isolated'
               : undefined,
           env: {
+            // @ts-expect-error TS2322
             sourceType,
             outputFormat: 'global',
             loc,
@@ -236,7 +243,9 @@ export default function collectDependencies(
             ? 'isolated'
             : undefined,
         env: {
+          // @ts-expect-error TS2322
           sourceType,
+          // @ts-expect-error TS2322
           outputFormat,
           loc,
         },
@@ -258,6 +267,7 @@ export default function collectDependencies(
         continue;
       }
 
+      // @ts-expect-error TS7053
       let elements = ATTRS[attr];
       if (elements && elements.includes(node.tag)) {
         // Check for empty string
@@ -270,6 +280,7 @@ export default function collectDependencies(
         }
 
         let depHandler = getAttrDepHandler(attr);
+        // @ts-expect-error TS7053
         let depOptionsHandler = OPTIONS[node.tag];
         let depOptions =
           typeof depOptionsHandler === 'function'

package/src/{inline.js → inline.ts}

@@ -1,10 +1,15 @@
-// @flow strict-local
-
-import type {AST, MutableAsset, TransformerResult} from '@atlaspack/types';
+import type {
+  AST,
+  BundleBehavior,
+  MutableAsset,
+  TransformerResult,
+} from '@atlaspack/types';
 import {hashString} from '@atlaspack/rust';
+// @ts-expect-error TS2724
 import type {PostHTMLNode} from 'posthtml';
 
 import PostHTML from 'posthtml';
+import {getFeatureFlag} from '@atlaspack/feature-flags';
 
 const SCRIPT_TYPES = {
   'application/javascript': 'js',
@@ -13,7 +18,7 @@ const SCRIPT_TYPES = {
   'application/ld+json': 'jsonld',
   'text/html': false,
   module: 'js',
-};
+} as const;
 
 interface ExtractInlineAssetsResult {
   hasModuleScripts: boolean;
@@ -30,6 +35,7 @@ export default function extractInlineAssets(
   // Extract inline <script> and <style> tags for processing.
   let parts: Array<TransformerResult> = [];
   let hasModuleScripts = false;
+  // @ts-expect-error TS2339
   PostHTML().walk.call(program, (node: PostHTMLNode) => {
     let parcelKey = hashString(`${asset.id}:${key++}`);
     if (node.tag === 'script' || node.tag === 'style') {
@@ -45,11 +51,14 @@ export default function extractInlineAssets(
           }
         } else if (node.attrs && node.attrs.type != null) {
           // Skip JSON
+          // @ts-expect-error TS7053
           if (SCRIPT_TYPES[node.attrs.type] === false) {
             return node;
           }
 
+          // @ts-expect-error TS7053
           if (SCRIPT_TYPES[node.attrs.type]) {
+            // @ts-expect-error TS7053
             type = SCRIPT_TYPES[node.attrs.type];
           } else {
             type = node.attrs.type.split('/')[1];
@@ -117,6 +126,12 @@ export default function extractInlineAssets(
           delete node.attrs.type;
         }
 
+        let bundleBehavior: BundleBehavior = 'inline';
+        if (typeof node.attrs['data-atlaspack-isolated'] !== 'undefined') {
+          bundleBehavior = 'inlineIsolated';
+          delete node.attrs['data-atlaspack-isolated'];
+        }
+
         // insert parcelId to allow us to retrieve node during packaging
         node.attrs['data-parcel-key'] = parcelKey;
         asset.setAST(ast); // mark dirty
@@ -130,11 +145,11 @@ export default function extractInlineAssets(
           type,
           content: value,
           uniqueKey: parcelKey,
-          bundleBehavior: 'inline',
+          bundleBehavior,
+          // @ts-expect-error TS2322
           env,
           meta: {
             type: 'tag',
-            // $FlowFixMe
             node,
             startLine: node.location?.start.line,
           },
@@ -163,7 +178,6 @@ export default function extractInlineAssets(
         bundleBehavior: 'inline',
         meta: {
           type: 'attr',
-          // $FlowFixMe
           node,
         },
       });