@wix/origami-transforms 0.1.27 → 0.1.29

package/src/transform/css/postcssPlugin.js

@@ -8,6 +8,8 @@
 // stylesheet the plugins see is the whole page: a rule declared in one carrier and a rule that
 // depends on it in another arrive in the same document.
 
+import { currentRow } from '@wix/origami-bi'
+import { warn as biWarn } from '../bi.js'
 import { removeCustomEnums } from '../../cssPlugins/customEnums.js'
 import { pluginError, runCssPlugins } from './runPlugins.js'
 
@@ -54,7 +56,10 @@ export const createCssPostcssPlugin = ({ selectPlugins, contextFor, failures })
         }
         // A plugin reports a problem that need not stop the build as a PostCSS warning, which Vite prints with the
         // node's code frame.
-        const warn = (node, text) => node.warn(result, text)
+        const warn = (node, text, key) => {
+            if (key) biWarn(key)
+            return node.warn(result, text)
+        }
         const context = { ...fileContext, addDependency, warn }
         const fail = error => {
             failures?.set(from, declared)
@@ -70,10 +75,20 @@ export const createCssPostcssPlugin = ({ selectPlugins, contextFor, failures })
         }
         // PostCSS awaits the hook only when it returns a promise; a stylesheet nothing loads for stays synchronous.
         const loading = plugins.flatMap(plugin => {
+            if (!plugin.prepare) return []
+            const row = currentRow()?.run.openRow('op', 'css_prepare', { step_details: { plugin: plugin.name, fetched: 0, failed: 0 } })
             try {
-                const prepared = plugin.prepare?.(root, context)
-                return prepared ? [prepared.catch(cause => fail(pluginError(plugin, context, cause)))] : []
+                const prepared = row ? row.runInContext(() => plugin.prepare(root, context)) : plugin.prepare(root, context)
+                if (!prepared) { row?.end(); return [] }
+                return [prepared.then(counts => {
+                    if (counts) row?.update({ step_details: counts })
+                    row?.end()
+                }, cause => {
+                    row?.end(false, { error_name: 'plugin_error' })
+                    return fail(pluginError(plugin, context, cause))
+                })]
             } catch (cause) {
+                row?.end(false, { error_name: 'plugin_error' })
                 return fail(pluginError(plugin, context, cause))
             }
         })

package/src/transform/css/runPlugins.js

@@ -5,6 +5,9 @@
 // A LayoutError comes from a plugin that only checks, so the Root is as it was and the later plugins still run:
 // the author gets every plugin's violations in one error, at the first one's position, not one plugin's per build.
 
+import { currentRow, namedError } from '@wix/origami-bi'
+import { countPlugin, declaredCheck, recordPluginFailure } from '../bi.js'
+import { pageIdFor } from '../context.js'
 import { LayoutError } from '../layoutError.js'
 
 const reason = cause => (cause instanceof Error ? cause.message : String(cause))
@@ -13,29 +16,46 @@ const reason = cause => (cause instanceof Error ? cause.message : String(cause))
 export const pluginError = (plugin, context, cause) =>
     // Tooling such as Vite's error overlay prints only the message, so the reason goes in it as well. A
     // plugin may throw any value, so it is read without assuming an Error.
-    new Error(`CSS transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`, {
+    namedError(declaredCheck(plugin, cause) !== undefined ? 'layout_error' : 'plugin_error', `CSS transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`, {
         cause,
     })
 
 export const runCssPlugins = ({ plugins, root, context }) => {
-    /** @type {LayoutError[]} */
+    /** @type {LayoutError<string>[]} */
     const layoutErrors = []
     for (const phase of ['validate', 'transform']) {
         for (const plugin of plugins) {
+            if (!plugin[phase]) continue
+            const pageId = pageIdFor(context)
+            const row = currentRow()?.run.openRow('build_plugin', plugin.name, {
+                ...(pageId ? { item_type: 'page', item_id: pageId } : {}),
+                step_details: { phase, outcome: 'ok', violations: 0 },
+            })
+            const started = performance.now()
             try {
-                plugin[phase]?.(root, context)
+                if (row) row.runInContext(() => plugin[phase](root, context))
+                else plugin[phase](root, context)
+                if (context.command === 'serve') row?.discard()
+                else row?.end()
             } catch (cause) {
+                if (row) row.runInContext(() => recordPluginFailure(plugin, cause, pageId))
                 if (cause instanceof LayoutError) {
                     layoutErrors.push(cause)
                     continue
                 }
                 throw pluginError(plugin, context, cause)
+            } finally {
+                countPlugin(context, performance.now() - started)
             }
         }
     }
+    if (layoutErrors.length) currentRow()?.run.openRow('op', 'css_layout_errors', {
+        step_details: { violations: layoutErrors.reduce((count, error) => count + error.violations.length, 0) },
+    }).end()
     if (layoutErrors.length === 1) throw layoutErrors[0]
     if (layoutErrors.length > 1) {
         throw new LayoutError(
+            { checks: layoutErrors.flatMap(error => error.plugin.checks) },
             layoutErrors.flatMap(error => error.violations),
             layoutErrors[0].location
         )

package/src/transform/jsx/runPlugins.js

@@ -2,22 +2,37 @@
 // to Babel, which drives this stage — the only thing added here is attributing a failure to the
 // plugin and the file that caused it. A LayoutError is the author's, so it passes through.
 
+import { currentRow, namedError } from '@wix/origami-bi'
+import { countPlugin, declaredCheck, recordPluginFailure } from '../bi.js'
+import { pageIdFor } from '../context.js'
 import { LayoutError } from '../layoutError.js'
 
 const reason = cause => (cause instanceof Error ? cause.message : String(cause))
 
 export const runJsxPlugins = ({ plugins, program, context }) => {
     for (const plugin of plugins) {
+        const pageId = pageIdFor(context)
+        const row = currentRow()?.run.openRow('build_plugin', plugin.name, {
+            ...(pageId ? { item_type: 'page', item_id: pageId } : {}),
+            step_details: { outcome: 'ok', violations: 0 },
+        })
+        const started = performance.now()
         try {
-            plugin.transform(program, context)
+            if (row) row.runInContext(() => plugin.transform(program, context))
+            else plugin.transform(program, context)
+            if (context.command === 'serve') row?.discard()
+            else row?.end()
         } catch (cause) {
+            if (row) row.runInContext(() => recordPluginFailure(plugin, cause, pageId))
             if (cause instanceof LayoutError) throw cause
             // Tooling such as Vite's error overlay prints only the message, so the reason goes in it as well. A
             // plugin may throw any value, so it is read without assuming an Error.
-            throw new Error(
+            throw namedError(declaredCheck(plugin, cause) !== undefined ? 'layout_error' : 'plugin_error',
                 `JSX transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`,
                 { cause }
             )
+        } finally {
+            countPlugin(context, performance.now() - started)
         }
     }
 }

package/src/transform/layoutError.js

@@ -2,16 +2,21 @@
 // without naming the plugin, and it carries no stack: the bundler already names the file, and the
 // messages say where in it.
 
+/** @template {string} Check */
 export class LayoutError extends Error {
     /**
-     * @param {readonly string[]} violations
+     * @param {Pick<import('./types.js').TransformPluginBase<Check>, 'checks'>} plugin
+     * @param {readonly import('./types.js').Violation<NoInfer<Check>>[]} violations
      * @param {{ file?: string, line?: number, column?: number }} [location] The first violation's, which the
      *     bundler prints as the error's position (Vite's CSS stage reads `file`, `line` and `column`).
      */
-    constructor(violations, location = {}) {
-        super(violations.length === 1 ? violations[0] : `\n  ${violations.join('\n  ')}`)
+    constructor(plugin, violations, location = {}) {
+        const messages = violations.map(violation => violation.message)
+        super(messages.length === 1 ? messages[0] : `\n  ${messages.join('\n  ')}`)
         this.name = 'LayoutError'
+        this.error_name = 'layout_error'
         this.stack = ''
+        this.plugin = plugin
         this.violations = violations
         this.location = location
         Object.assign(this, location)

package/src/transform/pipeline.js

@@ -1,4 +1,6 @@
 // Select and cache transform plugins by stage, file, and SSR context.
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { currentRow, trackStepSync } from '@wix/origami-bi'
 import { transformAsync } from '@babel/core'
 import { cssPlugins as defaultCssPlugins } from '../cssPlugins/index.js'
 import { jsxPlugins as defaultJsxPlugins } from '../jsxPlugins/index.js'
@@ -28,11 +30,15 @@ const createState = ({ layout, registries, command }) => {
 /**
  * @param {{
  *     layout: import('./types.js').SiteLayout,
- *     jsxPlugins?: readonly import('./types.js').JsxTransformPlugin[],
- *     cssPlugins?: readonly import('./types.js').CssTransformPlugin[],
+ *     jsxPlugins?: readonly import('./types.js').JsxTransformPlugin<string>[],
+ *     cssPlugins?: readonly import('./types.js').CssTransformPlugin<string>[],
  * }} options
  */
 export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins, cssPlugins = defaultCssPlugins }) => {
+    // Vite/Rolldown can dispatch hooks outside creation's async context.
+    const snapshot = AsyncLocalStorage.snapshot()
+    let devStep
+    const inContext = fn => snapshot(() => devStep ? devStep.runInContext(fn) : fn())
     const registries = {
         jsx: createTransformRegistry(jsxPlugins),
         css: createTransformRegistry(cssPlugins),
@@ -47,6 +53,7 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
     const cssFailures = new Map()
 
     const babelOptionsFor = createBabelOptionsSelector({ contextFor, selectPlugins: selectFor('jsx') })
+    const postcssPlugin = createCssPostcssPlugin({ contextFor, selectPlugins: selectFor('css'), failures: cssFailures })
 
     return {
         /** Whether any JSX transform selects this module (structure.jsx/.tsx by default).
@@ -58,7 +65,7 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
          * @param {string} code
          * @param {string} id
          * @param {{ ssr?: boolean | undefined }} [contextOptions] */
-        transformJsx: async (code, id, { ssr = false } = {}) => {
+        transformJsx: async (code, id, { ssr = false } = {}) => inContext(async () => {
             const filename = id.split('?', 1)[0]
             const options = babelOptionsFor(id, { ssr })
             const result = await transformAsync(code, {
@@ -77,15 +84,28 @@ export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins
                 },
             })
             return { code: result.code, map: result.map }
-        },
+        }),
 
-        postcssPlugin: createCssPostcssPlugin({ contextFor, selectPlugins: selectFor('css'), failures: cssFailures }),
+        postcssPlugin: { ...postcssPlugin, Once: (...args) => inContext(() => postcssPlugin.Once(...args)) },
         babelOptionsFor,
 
         /** Whether a stylesheet whose last CSS run failed declared `file`, so an edit to it may fix the stylesheet. */
         failedStylesheetDependsOn: file => [...cssFailures.values()].some(files => files.has(file)),
 
+        close: () => devStep?.end(),
+
+        /** @param {string} file @param {() => void} reload */
+        handleHotUpdate: (file, reload) => inContext(() => {
+            if (command === 'serve' && [...cssFailures.values()].some(files => files.has(file)))
+                trackStepSync('op', 'hmr_full_reload', {}, reload)
+        }),
+
         setCommand: value => {
+            if (value === 'serve' && !devStep) snapshot(() => {
+                const run = currentRow()?.run
+                devStep = run?.commandRow.runInContext(() => run.openRow('step', 'build_plugins', {}))
+            })
+            inContext(() => currentRow()?.run.openRow('op', 'pipeline_create', { step_details: { plugins: jsxPlugins.length + cssPlugins.length, command: value } }).end())
             command = value
             state = undefined
         },

package/src/transform/types.js

@@ -18,15 +18,32 @@
  * @property {SiteLayout} layout
  * @property {'serve' | 'build'} command
  * @property {boolean} ssr Always false for the CSS stage, which PostCSS drives without an SSR signal.
- *
+ */
+
+/**
+ * @template {string} Check
+ * @typedef {{ check: Check, message: string }} Violation
+ */
+
+/**
+ * @template {string} Check
+ * @typedef {Error & { check: Check }} CheckError
+ */
+
+/**
+ * @template {string} Check
  * @typedef {object} TransformPluginBase
+ * @property {readonly Check[]} checks
  * @property {string} name
  * @property {number} order Ascending. Ties break by registration order.
  * @property {(context: TransformContext) => boolean} [appliesTo] Whether the plugin runs for this
  * file. Must depend only on the file's identity, not on anything that can change between transforms
  * of the same file: the pipeline memoizes the selection per file path.
- *
- * @typedef {TransformPluginBase & {
+ */
+
+/**
+ * @template {string} Check
+ * @typedef {TransformPluginBase<Check> & {
  *     transform: (program: any, context: TransformContext) => void,
  *     parserPlugins?: readonly string[]
  * }} JsxTransformPlugin
@@ -34,19 +51,24 @@
  * nothing walks it for you, so a plugin that can rule itself out cheaply should just return.
  * `parserPlugins` are Babel parser plugins the file needs; they are unioned across selected plugins
  * and applied before any of them run.
- *
- * @typedef {TransformPluginBase & {
- *     prepare?: (root: import('postcss').Root, context: CssTransformContext) => Promise<void> | void,
+ */
+
+/**
+ * @template {string} Check
+ * @typedef {TransformPluginBase<Check> & {
+ *     prepare?: (root: import('postcss').Root, context: CssTransformContext) => Promise<void | { fetched: number, failed: number }> | void,
  *     validate?: (root: import('postcss').Root, context: CssTransformContext) => void,
  *     transform: (root: import('postcss').Root, context: CssTransformContext) => void
  * }} CssTransformPlugin
  * `prepare` loads what the plugin needs that can't be read synchronously, such as a file from a CDN, before any
  * plugin's `validate` or `transform` runs. It returns a promise only when it has something to load, so a stylesheet
  * that needs nothing loaded stays synchronous for PostCSS.
- *
+ */
+
+/**
  * @typedef {TransformContext & {
  *     addDependency?: (file: string) => void,
- *     warn?: (node: import('postcss').Node, text: string) => void
+ *     warn?: (node: import('postcss').Node, text: string, key?: 'malformed_custom_enum' | 'unmappable_preset' | 'svg_not_loaded') => void
  * }} CssTransformContext
  * `addDependency` declares a file the plugin read besides the stylesheet, so the bundler re-runs the
  * stylesheet when it changes. `warn` reports a problem at `node` without failing the run, as a PostCSS