@atlaspack/transformer-html 2.14.5-canary.36 → 2.14.5-canary.360

package/dist/dependencies.js

@@ -0,0 +1,262 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = collectDependencies;
+const posthtml_1 = __importDefault(require("posthtml"));
+const srcset_1 = require("srcset");
+// A list of all attributes that may produce a dependency
+// Based on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
+const ATTRS = {
+    src: [
+        'script',
+        'img',
+        'audio',
+        'video',
+        'source',
+        'track',
+        'iframe',
+        'embed',
+        'amp-img',
+    ],
+    // Using href with <script> is described here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/script
+    href: ['link', 'a', 'use', 'script', 'image'],
+    srcset: ['img', 'source'],
+    imagesrcset: ['link'],
+    poster: ['video'],
+    'xlink:href': ['use', 'image', 'script'],
+    content: ['meta'],
+    data: ['object'],
+};
+// A list of metadata that should produce a dependency
+// Based on:
+// - http://schema.org/
+// - http://ogp.me
+// - https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup
+// - https://msdn.microsoft.com/en-us/library/dn255024.aspx
+// - https://vk.com/dev/publications
+const META = {
+    property: [
+        'og:image',
+        'og:image:url',
+        'og:image:secure_url',
+        'og:audio',
+        'og:audio:secure_url',
+        'og:video',
+        'og:video:secure_url',
+        'vk:image',
+    ],
+    name: [
+        'twitter:image',
+        'msapplication-square150x150logo',
+        'msapplication-square310x310logo',
+        'msapplication-square70x70logo',
+        'msapplication-wide310x150logo',
+        'msapplication-TileImage',
+        'msapplication-config',
+    ],
+    itemprop: [
+        'image',
+        'logo',
+        'screenshot',
+        'thumbnailUrl',
+        'contentUrl',
+        'downloadUrl',
+    ],
+};
+const FEED_TYPES = new Set(['application/rss+xml', 'application/atom+xml']);
+// Options to be passed to `addDependency` for certain tags + attributes
+const OPTIONS = {
+    a: {
+        href: { needsStableName: true },
+    },
+    iframe: {
+        src: { needsStableName: true },
+    },
+    link(attrs) {
+        if (attrs.rel === 'stylesheet') {
+            return {
+                // Keep in the same bundle group as the HTML.
+                priority: 'parallel',
+            };
+        }
+    },
+};
+function collectSrcSetDependencies(asset, srcset, opts) {
+    let parsed = (0, srcset_1.parse)(srcset).map(({ url, ...v }) => ({
+        url: asset.addURLDependency(url, opts),
+        ...v,
+    }));
+    return (0, srcset_1.stringify)(parsed);
+}
+function getAttrDepHandler(attr) {
+    if (attr === 'srcset' || attr === 'imagesrcset') {
+        return collectSrcSetDependencies;
+    }
+    return (asset, src, opts) => asset.addURLDependency(src, opts);
+}
+function collectDependencies(asset, ast) {
+    let isDirty = false;
+    let hasModuleScripts = false;
+    let seen = new Set();
+    let errors = [];
+    // @ts-expect-error TS2339
+    (0, posthtml_1.default)().walk.call(ast.program, (node) => {
+        let { tag, attrs } = node;
+        if (!attrs || seen.has(node)) {
+            return node;
+        }
+        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'));
+            });
+            if (isMetaDependency) {
+                const metaAssetUrl = attrs.content;
+                if (metaAssetUrl) {
+                    attrs.content = asset.addURLDependency(attrs.content, {
+                        needsStableName: !(attrs.name && attrs.name.includes('msapplication')),
+                    });
+                    isDirty = true;
+                    asset.setAST(ast);
+                }
+            }
+            return node;
+        }
+        if (tag === 'link' &&
+            (attrs.rel === 'canonical' ||
+                attrs.rel === 'manifest' ||
+                (attrs.rel === 'alternate' && FEED_TYPES.has(attrs.type))) &&
+            attrs.href) {
+            let href = attrs.href;
+            if (attrs.rel === 'manifest') {
+                // A hack to allow manifest.json rather than manifest.webmanifest.
+                // If a custom pipeline is used, it is responsible for running @atlaspack/transformer-webmanifest.
+                if (!href.includes(':')) {
+                    href = 'webmanifest:' + href;
+                }
+            }
+            attrs.href = asset.addURLDependency(href, {
+                needsStableName: true,
+            });
+            isDirty = true;
+            asset.setAST(ast);
+            return node;
+        }
+        if (tag === 'script' && attrs.src) {
+            let sourceType = attrs.type === 'module' ? 'module' : 'script';
+            let loc = node.location
+                ? {
+                    filePath: asset.filePath,
+                    start: node.location.start,
+                    end: {
+                        line: node.location.end.line,
+                        // PostHTML's location is inclusive
+                        column: node.location.end.column + 1,
+                    },
+                }
+                : undefined;
+            let outputFormat = 'global';
+            if (attrs.type === 'module' && asset.env.shouldScopeHoist) {
+                outputFormat = 'esmodule';
+            }
+            else {
+                if (attrs.type === 'module') {
+                    attrs.defer = '';
+                }
+                delete attrs.type;
+            }
+            // 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;
+            if (outputFormat === 'esmodule' &&
+                !asset.env.supports('esmodules', true)) {
+                let attrs = Object.assign({}, node.attrs);
+                copy = { ...node, attrs };
+                delete attrs.type;
+                attrs.nomodule = '';
+                attrs.defer = '';
+                attrs.src = asset.addURLDependency(attrs.src, {
+                    // Keep in the same bundle group as the HTML.
+                    priority: 'parallel',
+                    bundleBehavior: sourceType === 'script' || attrs.async != null
+                        ? 'isolated'
+                        : undefined,
+                    env: {
+                        // @ts-expect-error TS2322
+                        sourceType,
+                        outputFormat: 'global',
+                        loc,
+                    },
+                });
+                seen.add(copy);
+            }
+            attrs.src = asset.addURLDependency(attrs.src, {
+                // Keep in the same bundle group as the HTML.
+                priority: 'parallel',
+                // If the script is async it can be executed in any order, so it cannot depend
+                // on any sibling scripts for dependencies. Keep all dependencies together.
+                // Also, don't share dependencies between classic scripts and nomodule scripts
+                // 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,
+                },
+            });
+            asset.setAST(ast);
+            if (sourceType === 'module')
+                hasModuleScripts = true;
+            return copy ? [node, copy] : node;
+        }
+        for (let attr in attrs) {
+            // Check for virtual paths
+            if (tag === 'a' && attrs[attr].split('#')[0].lastIndexOf('.') < 1) {
+                continue;
+            }
+            // Check for id references
+            if (attrs[attr][0] === '#') {
+                continue;
+            }
+            // @ts-expect-error TS7053
+            let elements = ATTRS[attr];
+            if (elements && elements.includes(node.tag)) {
+                // Check for empty string
+                if (attrs[attr].length === 0) {
+                    errors.push({
+                        message: `'${attr}' should not be empty string`,
+                        filePath: asset.filePath,
+                        loc: node.location,
+                    });
+                }
+                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);
+                isDirty = true;
+            }
+        }
+        if (isDirty) {
+            asset.setAST(ast);
+        }
+        return node;
+    });
+    if (errors.length > 0) {
+        throw errors;
+    }
+    return hasModuleScripts;
+}

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.36+2d10c6656",
+  "version": "2.14.5-canary.360+fc3adc098",
   "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.104+2d10c6656",
-    "@atlaspack/plugin": "2.14.5-canary.36+2d10c6656",
-    "@atlaspack/rust": "3.2.1-canary.36+2d10c6656",
+    "@atlaspack/diagnostic": "2.14.1-canary.428+fc3adc098",
+    "@atlaspack/feature-flags": "2.14.1-canary.428+fc3adc098",
+    "@atlaspack/plugin": "2.14.5-canary.360+fc3adc098",
+    "@atlaspack/rust": "3.2.1-canary.360+fc3adc098",
     "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.36+2d10c6656"
+    "@atlaspack/core": "2.16.2-canary.360+fc3adc098"
   },
   "type": "commonjs",
-  "gitHead": "2d10c6656fc58743c5dbed1d2b6c5666887f9fe4"
-}
+  "gitHead": "fc3adc098f583e40d6d7687412cac6dde7cbb3f3"
+}