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

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,
         },
       });

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

@@ -1,22 +1,19 @@
-// @flow strict-local
-
-import {type PostHTMLNode, render} from 'posthtml-render';
+import {PostHTMLNode, render} from 'posthtml-render';
 import {parseHTML, transformerOpts} from '../src/HTMLTransformer';
 import assert from 'assert';
 import type {PluginOptions} from '../../../core/types-internal/src';
 
 function normalizeHTML(code: string): string {
   const ast = parseHTML(code, true);
-  // $FlowFixMe
   const result = renderHTML(ast);
   const lines = result
     .split('\n')
-    .map((line) => line.trim())
-    .filter((line) => line);
+    .map((line: any) => line.trim())
+    .filter((line: any) => line);
   return lines.join('');
 }
 
-function renderHTML(newAST: {|program: PostHTMLNode|}): string {
+function renderHTML(newAST: {program: PostHTMLNode}): string {
   return render(newAST.program, {
     closingSingleTag: 'slash',
   });
@@ -24,24 +21,24 @@ function renderHTML(newAST: {|program: PostHTMLNode|}): string {
 
 async function runTestTransform(
   code: string,
-  options: {|
-    shouldScopeHoist: boolean,
-    supportsEsmodules: boolean,
-    hmrOptions: PluginOptions['hmrOptions'],
-  |} = {
+  options: {
+    shouldScopeHoist: boolean;
+    supportsEsmodules: boolean;
+    hmrOptions: PluginOptions['hmrOptions'];
+  } = {
     shouldScopeHoist: true,
     supportsEsmodules: true,
     hmrOptions: null,
   },
 ) {
-  const dependencies = [];
+  const dependencies: Array<any> = [];
   let newAST = null;
   const asset = {
     getAST: () => parseHTML(code, true),
-    setAST: (n) => {
+    setAST: (n: any) => {
       newAST = n;
     },
-    addURLDependency(url, opts) {
+    addURLDependency(url: string, opts: Partial<DependencyOptions>) {
       dependencies.push({url, opts});
       return `dependency-id::${url}`;
     },
@@ -53,34 +50,31 @@ async function runTestTransform(
         return options.supportsEsmodules;
       },
     },
-    addDependency(specifier, specifierType) {
+    addDependency(specifier: DependencyOptions, specifierType: undefined) {
       dependencies.push({specifier, specifierType});
       return 'dependency-id';
     },
-  };
+  } as const;
 
   const transformInput = {
     asset,
     options: {
       hmrOptions: options.hmrOptions,
     },
-  };
-  // $FlowFixMe
+  } as const;
   const transformResult = await transformerOpts.transform(transformInput);
 
-  // $FlowFixMe
   const outputCode = renderHTML(newAST);
 
   return {dependencies, newAST, outputCode, transformResult, inputAsset: asset};
 }
 
-function normalizeDependencies(dependencies) {
-  return dependencies.map((dependency) => ({
+function normalizeDependencies(dependencies: any) {
+  return dependencies.map((dependency: any) => ({
     ...dependency,
     opts: {
       ...dependency.opts,
       env: {
-        // $FlowFixMe
         ...dependency.opts.env,
         loc: null,
       },
@@ -88,9 +82,8 @@ function normalizeDependencies(dependencies) {
   }));
 }
 
-function normalizeAssets(assets) {
-  return assets.map((asset) => {
-    // $FlowFixMe
+function normalizeAssets(assets: any) {
+  return assets.map((asset: any) => {
     return {
       ...asset,
       env: null,
@@ -189,7 +182,7 @@ describe('HTMLTransformer', () => {
         sourceType: 'script',
       },
       priority: 'parallel',
-    };
+    } as const;
     assert.deepEqual(normalizeDependencies(dependencies), [
       {
         url: 'input1.js',
@@ -358,4 +351,25 @@ describe('HTMLTransformer', () => {
       },
     ]);
   });
+
+  it('transforms simple inline script with data-atlaspack-isolated', async () => {
+    const code = `
+<html>
+  <body>
+    <script data-atlaspack-isolated>console.log('blah'); require('path');</script>
+  </body>
+</html>
+    `;
+    const {transformResult, inputAsset} = await runTestTransform(code);
+    assert(transformResult.includes(inputAsset));
+    const assets = normalizeAssets(transformResult);
+    assert.deepEqual(assets[1], {
+      type: 'js',
+      content: "console.log('blah'); require('path');",
+      uniqueKey: 'a8a37984d2e520b9',
+      bundleBehavior: 'inlineIsolated',
+      env: null,
+      meta: null,
+    });
+  });
 });

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../../core/core/tsconfig.json"
+    },
+    {
+      "path": "../../core/diagnostic/tsconfig.json"
+    },
+    {
+      "path": "../../core/feature-flags/tsconfig.json"
+    },
+    {
+      "path": "../../core/plugin/tsconfig.json"
+    },
+    {
+      "path": "../../core/rust/tsconfig.json"
+    }
+  ]
+}