@wix/origami-transforms 0.1.27 → 0.1.29

package/src/cssPlugins/layout/parser.js

@@ -1,3 +1,4 @@
+import { fail } from './index.js'
 import { basename } from 'node:path'
 import { isValidContainerId } from '@wix/origami-system-components/layout-contract'
 import { relativeToSite } from '../../transform/relativeToSite.js'
@@ -20,7 +21,7 @@ export const parseTargets = (root, context) => {
     const owners = new Map()
     root.walkAtRules('origami-target', target => {
         const name = target.params.trim()
-        if (!Object.hasOwn(targets, name)) throw target.error(`Unknown @origami-target ${name}`)
+        if (!Object.hasOwn(targets, name)) throw fail('unknown_target', target.error(`Unknown @origami-target ${name}`))
         const owner = target.parent
         // DM writes component rules as .compId; #compId is still accepted.
         if (
@@ -28,34 +29,34 @@ export const parseTargets = (root, context) => {
             !['.', '#'].includes(owner.selector[0]) ||
             !isValidContainerId(owner.selector.slice(1))
         ) {
-            throw target.error('@origami-target requires a single component ID rule')
+            throw fail('target_requires_component_id', target.error('@origami-target requires a single component ID rule'))
         }
         for (let ancestor = owner.parent; ancestor && ancestor.type !== 'root'; ancestor = ancestor.parent) {
             if (
                 ancestor.type !== 'atrule' ||
                 !['scope', 'media', 'layer', 'supports', 'container'].includes(ancestor.name)
             ) {
-                throw target.error('@origami-target is only allowed inside layout rule envelopes')
+                throw fail('invalid_target_envelope', target.error('@origami-target is only allowed inside layout rule envelopes'))
             }
         }
         if (!isLayoutSource(target, context))
-            throw target.error('@origami-target must originate in site-owned layout.css')
+            throw fail('target_not_site_layout', target.error('@origami-target must originate in site-owned layout.css'))
         const siblings = owners.get(owner) ?? []
-        if (siblings.some(sibling => sibling.params.trim() === name)) throw target.error(`Duplicate target ${name}`)
+        if (siblings.some(sibling => sibling.params.trim() === name)) throw fail('duplicate_target', target.error(`Duplicate target ${name}`))
         const seen = new Set()
         for (const node of target.nodes ?? []) {
             if (node.type === 'comment') continue
-            if (node.type !== 'decl') throw node.error('Target bodies must contain declarations only')
-            if (seen.has(node.prop)) throw node.error(`Duplicate target property ${node.prop}`)
+            if (node.type !== 'decl') throw fail('target_requires_declarations', node.error('Target bodies must contain declarations only'))
+            if (seen.has(node.prop)) throw fail('duplicate_target_property', node.error(`Duplicate target property ${node.prop}`))
             seen.add(node.prop)
-            if (!targets[name].has(node.prop)) throw node.error(`${node.prop} does not belong to ${name}`)
+            if (!targets[name].has(node.prop)) throw fail('property_wrong_target', node.error(`${node.prop} does not belong to ${name}`))
             if (node.prop === 'position' && node.value !== 'relative')
-                throw node.error('Content position must be relative')
+                throw fail('content_position_not_relative', node.error('Content position must be relative'))
             if (name === OVERFLOW && !['auto', 'scroll', 'hidden', 'visible', 'clip'].includes(node.value)) {
-                throw node.error(`Unsupported overflow value ${node.value}`)
+                throw fail('unsupported_overflow', node.error(`Unsupported overflow value ${node.value}`))
             }
             if (node.prop === '--content-max-width-align' && !['left', 'center', 'right'].includes(node.value)) {
-                throw node.error(`Unsupported content alignment ${node.value}`)
+                throw fail('unsupported_content_alignment', node.error(`Unsupported content alignment ${node.value}`))
             }
             if (node.prop === 'display') {
                 const type = owner.nodes.find(item => item.type === 'decl' && item.prop === '--container-layout-type')
@@ -64,7 +65,7 @@ export const parseTargets = (root, context) => {
                     (type?.type === 'decl' &&
                         (!Object.hasOwn(displays, type.value) || displays[type.value] !== node.value))
                 ) {
-                    throw node.error('Container type and content display are inconsistent')
+                    throw fail('inconsistent_container_display', node.error('Container type and content display are inconsistent'))
                 }
             }
         }
@@ -75,10 +76,10 @@ export const parseTargets = (root, context) => {
         const seen = new Set()
         for (const node of owner.nodes) {
             if (node.type !== 'decl') continue
-            if (seen.has(node.prop)) throw node.error(`Duplicate root property ${node.prop}`)
+            if (seen.has(node.prop)) throw fail('duplicate_root_property', node.error(`Duplicate root property ${node.prop}`))
             seen.add(node.prop)
             if ((targets[CONTENT].has(node.prop) && node.prop !== 'position') || targets[OVERFLOW].has(node.prop)) {
-                throw node.error(`${node.prop} belongs inside @origami-target`)
+                throw fail('property_requires_target', node.error(`${node.prop} belongs inside @origami-target`))
             }
         }
     }

package/src/cssPlugins/mixins.js

@@ -7,8 +7,15 @@ const MAX_CLONED_BYTES = 10 * 1024 * 1024
 /** @param {import('postcss').AtRule} atRule */
 const mixinName = atRule => atRule.params.trim().replace(/\(\)$/, '')
 
-/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const checks = /** @type {const} */ (['missing_mixin', 'cyclic_apply', 'expansion_depth_exceeded', 'cloned_node_budget_exceeded', 'cloned_css_budget_exceeded'])
+/** @typedef {typeof checks[number]} Check */
+
+/** @template {Error} E @param {Check} check @param {E} error */
+export const fail = (check, error) => Object.assign(error, { check })
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
 export const mixinsPlugin = {
+    checks,
     name: 'mixins',
     order: 10,
     transform(root) {
@@ -30,16 +37,16 @@ export const mixinsPlugin = {
             container.walkAtRules('apply', atRule => {
                 const name = mixinName(atRule)
                 const body = bodies.get(name)
-                if (!body) throw new Error(`@apply ${atRule.params} has no @mixin definition`)
-                if (stack.includes(name)) throw new Error(`Cyclic @apply: ${[...stack, name].join(' -> ')}`)
+                if (!body) throw fail('missing_mixin', new Error(`@apply ${atRule.params} has no @mixin definition`))
+                if (stack.includes(name)) throw fail('cyclic_apply', new Error(`Cyclic @apply: ${[...stack, name].join(' -> ')}`))
                 if (stack.length >= MAX_EXPANSION_DEPTH) {
-                    throw new Error(`@apply ${name} exceeds maximum expansion depth (${MAX_EXPANSION_DEPTH})`)
+                    throw fail('expansion_depth_exceeded', new Error(`@apply ${name} exceeds maximum expansion depth (${MAX_EXPANSION_DEPTH})`))
                 }
                 const pending = [...body]
                 while (pending.length) {
                     const node = pending.pop()
                     if (++clonedNodes > MAX_CLONED_NODES) {
-                        throw new Error(`@apply ${name} exceeds stylesheet cloned-node budget (${MAX_CLONED_NODES})`)
+                        throw fail('cloned_node_budget_exceeded', new Error(`@apply ${name} exceeds stylesheet cloned-node budget (${MAX_CLONED_NODES})`))
                     }
                     if (node && 'nodes' in node && node.nodes) {
                         for (const child of node.nodes) pending.push(child)
@@ -48,7 +55,7 @@ export const mixinsPlugin = {
                 for (const node of body) {
                     clonedBytes += Buffer.byteLength((node.raws.before ?? '') + node.toString(), 'utf8')
                     if (clonedBytes > MAX_CLONED_BYTES) {
-                        throw new Error(`@apply ${name} exceeds stylesheet cloned-CSS byte budget (${MAX_CLONED_BYTES})`)
+                        throw fail('cloned_css_budget_exceeded', new Error(`@apply ${name} exceeds stylesheet cloned-CSS byte budget (${MAX_CLONED_BYTES})`))
                     }
                 }
                 // PostCSS does not revisit nodes inserted in place of the current at-rule.

package/src/cssPlugins/presets.js

@@ -23,8 +23,12 @@ const target = (selector, key) => {
     return selector === first ? `.${id}${WRAPPER}` : null
 }
 
-/** @type {import('../transform/types.js').CssTransformPlugin} */
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
 export const presetsPlugin = {
+    checks,
     name: 'presets',
     order: 13,
     transform(root, context) {
@@ -53,7 +57,8 @@ export const presetsPlugin = {
                     declaration,
                     `presets: ${context.relativePath ?? context.filePath}: ` +
                         `${declaration.prop} on "${selectors.join(', ')}": set --preset on #id or .id alone, ` +
-                        `and an inner element's as --preset-{key} on the rule of the element it sits in. Left as authored.`
+                        `and an inner element's as --preset-{key} on the rule of the element it sits in. Left as authored.`,
+                'unmappable_preset'
                 )
                 continue
             }

package/src/cssPlugins/shapeDividers.js

@@ -101,8 +101,12 @@ const layerDeclarations = (compId, vars) => {
     }
 }
 
-/** @type {import('../transform/types.js').CssTransformPlugin} */
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
 export const shapeDividersPlugin = {
+    checks,
     name: 'shape-dividers',
     // Last, with wix-vector-urls: it only adds rules, which no other plugin needs to see, and it reads only `--height` as
     // `var(--height)`, so spx converts that var's `--spx()` where it is declared.
@@ -125,7 +129,7 @@ export const shapeDividersPlugin = {
             const allVars = { ...baseVars.get(id), ...vars }
             const declarations = layerDeclarations(id, allVars)
             if (declarations === undefined) {
-                if (allVars['--svgId']) context.warn?.(rule, `Couldn't draw the shape divider's SVG ${allVars['--svgId']}: it didn't load from Wix's CDN, or has no view box`)
+                if (allVars['--svgId']) context.warn?.(rule, `Couldn't draw the shape divider's SVG ${allVars['--svgId']}: it didn't load from Wix's CDN, or has no view box`, 'svg_not_loaded')
                 continue
             }
             const layerRule = postcss.rule({ selector: `${rule.selector} ${LAYER}`, source: rule.source })

package/src/cssPlugins/spx/calls.js

@@ -1,3 +1,4 @@
+import { fail } from './index.js'
 const CALL = /--spx\(\s*(-?(?:\d+\.?\d*|\.\d+))\s*\)/g
 
 /** Replace literal SPX calls, reporting unsupported arguments at their declaration.
@@ -8,5 +9,5 @@ const CALL = /--spx\(\s*(-?(?:\d+\.?\d*|\.\d+))\s*\)/g
 export const lowerCalls = (declaration, resolve, invalidCall) => {
     if (!declaration.value.includes('--spx(')) return
     declaration.value = declaration.value.replace(CALL, (_, literal) => resolve(Number(literal)))
-    if (declaration.value.includes('--spx(')) throw invalidCall()
+    if (declaration.value.includes('--spx(')) throw fail('non_literal_spx_argument', invalidCall())
 }

package/src/cssPlugins/spx/cascade.js

@@ -1,3 +1,4 @@
+import { fail } from './index.js'
 import { lowerCalls } from './calls.js'
 
 // Keep arithmetic at the call site: an inherited derived custom property would already
@@ -16,7 +17,7 @@ const UNCAPPED_UNIT = unitCappedAt('99999px')
 export const compileCascadeDeclaration = declaration => {
     if (declaration.prop === '--spx-resolver-type') {
         const resolver = declaration.value.trim()
-        if (!['scale', 'fixed'].includes(resolver)) throw declaration.error('Unsupported SPX resolver')
+        if (!['scale', 'fixed'].includes(resolver)) throw fail('unsupported_spx_resolver', declaration.error('Unsupported SPX resolver'))
         const value = resolver === 'scale' ? '1' : '0'
         const previous = declaration.prev()
         if (
@@ -32,7 +33,7 @@ export const compileCascadeDeclaration = declaration => {
         declaration.prop === '--spx-ref-width' &&
         (!Number.isFinite(Number(declaration.value)) || Number(declaration.value) <= 0)
     ) {
-        throw declaration.error('SPX reference width must be positive')
+        throw fail('invalid_spx_reference_width', declaration.error('SPX reference width must be positive'))
     }
     const unit = declaration.prop === '--content-max-width' ? UNCAPPED_UNIT : UNIT
     lowerCalls(

package/src/cssPlugins/spx/index.js

@@ -1,7 +1,14 @@
 import { compileCascadeDeclaration } from './cascade.js'
 
-/** @type {import('../../transform/types.js').CssTransformPlugin} */
+export const checks = /** @type {const} */ (['unsupported_spx_resolver', 'invalid_spx_reference_width', 'non_literal_spx_argument'])
+/** @typedef {typeof checks[number]} Check */
+
+/** @template {Error} E @param {Check} check @param {E} error */
+export const fail = (check, error) => Object.assign(error, { check })
+
+/** @type {import('../../transform/types.js').CssTransformPlugin<Check>} */
 export const spxPlugin = {
+    checks,
     name: 'spx',
     order: 20,
     transform(root) {

package/src/cssPlugins/stackChildren.js

@@ -157,8 +157,12 @@ const where = declaration => {
 
 const or = items => (items.length === 1 ? items[0] : `${items.slice(0, -1).join(', ')} or ${items.at(-1)}`)
 
-/** @type {import('../transform/types.js').CssTransformPlugin} */
+export const checks = /** @type {const} */ (['child_not_in_stack'])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
 export const stackChildrenPlugin = {
+    checks,
     name: 'stack-children',
     // After mixins copy their bodies in, before spx rewrites --spx() calls away.
     order: 12,
@@ -199,7 +203,7 @@ export const stackChildrenPlugin = {
         }
 
         if (violations.size) {
-            throw new LayoutError([...violations], {
+            throw new LayoutError(stackChildrenPlugin, [...violations].map(message => ({ check: 'child_not_in_stack', message })), {
                 file: first?.input.file,
                 line: first?.start?.line,
                 column: first?.start?.column,

package/src/cssPlugins/svg.js

@@ -16,13 +16,16 @@ const loading = new Map()
 const svgFileName = id => (id.endsWith('.svg') ? id : `${id}.svg`)
 
 const load = async id => {
+    let ok = false
     try {
         const response = await fetch(SHAPES_URL + svgFileName(id), { signal: AbortSignal.timeout(FETCH_TIMEOUT_MS) })
         const svg = response.ok ? await response.text() : ''
-        loaded.set(id, SVG_TAG.test(svg) ? svg : null)
+        ok = SVG_TAG.test(svg)
+        loaded.set(id, ok ? svg : null)
     } catch {
         // Not loaded: the plugin warns and keeps the value as written.
     }
+    return ok
 }
 
 /** Loads the SVGs of `ids` that aren't loaded yet. */
@@ -33,7 +36,7 @@ export const loadSvgs = ids => {
             if (!loading.has(id)) loading.set(id, load(id).finally(() => loading.delete(id)))
             return loading.get(id)
         })
-    return pending.length ? Promise.all(pending).then(() => undefined) : undefined
+    return pending.length ? Promise.all(pending).then(results => ({ fetched: results.length, failed: results.filter(ok => !ok).length })) : undefined
 }
 
 /** The SVG's markup, once `loadSvgs` loaded it. */

package/src/cssPlugins/wixVectorUrls.js

@@ -17,8 +17,12 @@ const idsIn = root => {
     return ids
 }
 
-/** @type {import('../transform/types.js').CssTransformPlugin} */
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../transform/types.js').CssTransformPlugin<Check>} */
 export const wixVectorUrlsPlugin = {
+    checks,
     name: 'wix-vector-urls',
     // Last, so a url a mixin or preset copies elsewhere is inlined wherever it ends up.
     order: 25,
@@ -29,7 +33,7 @@ export const wixVectorUrlsPlugin = {
             declaration.value = declaration.value.replace(WIX_VECTOR_URL, (url, _quote, id) => {
                 const svg = loadedSvg(id)
                 if (svg === undefined) {
-                    context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`)
+                    context.warn?.(declaration, `Couldn't load the SVG ${id} from Wix's CDN, so ${url} stays as written`, 'svg_not_loaded')
                     return url
                 }
                 return svgDataUrl(scaleSvg(svg, svgInfo(svg), 'none'))

package/src/jsxPlugins/index.js

@@ -7,5 +7,5 @@ import { origamiCompatibilityPlugin } from './origamiCompatibility/index.js'
 import { layoutValidationPlugin } from './validation/index.js'
 import { pageSlotsPlugin } from './pageSlots.js'
 
-/** @type {readonly import('../transform/types.js').JsxTransformPlugin[]} */
+/** @type {readonly import('../transform/types.js').JsxTransformPlugin<string>[]} */
 export const jsxPlugins = Object.freeze([layoutValidationPlugin, mediaValidationPlugin, origamiCompatibilityPlugin, pageSlotsPlugin])

package/src/jsxPlugins/mediaValidation/index.js

@@ -1,3 +1,4 @@
+import { warn } from '../../transform/bi.js'
 // Fails the build on an Image whose `uri` is not a Wix media ID, such as a web URL or a local file.
 // The Wix import accepts such a `uri` but the image is broken on the site; `wix origami upload-media`
 // uploads it and points the Image at the uploaded file. `yarn dev` only warns, so the page still
@@ -12,8 +13,12 @@ const STRUCTURE_FILES = new Set(['structure.tsx', 'structure.jsx'])
 // `117a96_1cff23187eeb4050a2a691bcdcad6502~mv2.jpg`: an account prefix, an underscore and a file name.
 const WIX_MEDIA_ID = /^[A-Za-z0-9]+_[A-Za-z0-9_~.-]+\.[A-Za-z0-9]+$/
 
-/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+export const checks = /** @type {const} */ (['media_not_wix'])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../../transform/types.js').JsxTransformPlugin<Check>} */
 export const mediaValidationPlugin = {
+    checks,
     name: 'wix-import-media-validation',
     // Alongside the layout rules: before anything rewrites the tree.
     order: -100,
@@ -21,6 +26,7 @@ export const mediaValidationPlugin = {
 
     transform: (program, context) => {
         const file = context.relativePath ?? context.filePath
+        /** @type {import('../../transform/types.js').Violation<Check>[]} */
         const violations = []
         let first
         program.traverse({
@@ -33,17 +39,20 @@ export const mediaValidationPlugin = {
                 if (uri?.value.type !== 'StringLiteral' || WIX_MEDIA_ID.test(uri.value.value)) return
                 const id = attributes.find(attribute => attribute.name.name === 'id')?.value?.value
                 const line = uri.loc?.start.line
-                violations.push(
+                violations.push({ check: 'media_not_wix', message:
                     `${file}${line ? `:${line}` : ''} <Image${id ? ` id="${id}"` : ''}> image.uri "${uri.value.value}" is not a Wix media ID. Run \`wix origami upload-media\` to upload it.`
-                )
+                })
                 first ??= { file: context.filePath, line, column: uri.loc?.start.column }
             },
         })
         if (violations.length === 0) return
         if (context.command === 'serve') {
-            for (const violation of violations) console.warn(`[origami] ${violation}`)
+            for (const violation of violations) {
+                warn('media_not_wix')
+                console.warn(`[origami] ${violation.message}`)
+            }
             return
         }
-        throw new LayoutError(violations, first)
+        throw new LayoutError(mediaValidationPlugin, violations, first)
     },
 }

package/src/jsxPlugins/origamiCompatibility/index.js

@@ -22,8 +22,12 @@ const RULES_BY_COMPONENT = new Map(
     ])
 )
 
-/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../../transform/types.js').JsxTransformPlugin<Check>} */
 export const origamiCompatibilityPlugin = {
+    checks,
     name: 'wix-import-origami-compatibility',
     order: 0,
     appliesTo: context => basename(context.filePath) === STRUCTURE_FILE,

package/src/jsxPlugins/pageSlots.js

@@ -32,8 +32,13 @@ const slotFor = component => {
     return undefined
 }
 
-/** Transitional support for DM's literal Page children alongside authored slot props. */
+const checks = /** @type {const} */ ([])
+/** @typedef {typeof checks[number]} Check */
+
+/** Transitional support for DM's literal Page children alongside authored slot props.
+ * @type {import('../transform/types.js').JsxTransformPlugin<Check>} */
 export const pageSlotsPlugin = {
+    checks,
     name: 'wix-import-page-slots',
     order: 0,
     appliesTo: context => basename(context.filePath) === 'structure.jsx',

package/src/jsxPlugins/validation/checks.js

@@ -75,7 +75,7 @@ const CHECKS = {
 export const assertKnownConstraints = rules => {
     for (const rule of rules) {
         for (const key of Object.keys(rule)) {
-            if (key !== 'id' && key !== 'components' && !CHECKS[key]) {
+            if (key !== 'id' && key !== 'components' && key !== 'checks' && !CHECKS[key]) {
                 throw new Error(
                     `layout rules: unknown constraint "${key}" on ${rule.id}. Known: ${Object.keys(CHECKS).join(', ')}`
                 )
@@ -86,20 +86,27 @@ export const assertKnownConstraints = rules => {
 
 export const constrainsChildren = rule => CHILD_CONSTRAINTS.some(key => key in rule)
 
-/** Runs every constraint of `rule` on one element; `report` receives each full message. */
+/** Runs every constraint of `rule` on one element; `report` receives each full message.
+ * @param {import('./rules.js').Rule} rule
+ * @param {{ node: any, componentOf: (node: any) => string | undefined, report: (check: import('./index.js').Check, message: string) => void }} input
+ */
 export const checkRule = (rule, { node, componentOf, report }) => {
     const prefix = `${describe(node)} ${expectation(rule)}`
-    const fail = got => report(`${prefix}; found ${got}.`)
+    /** @param {import('./index.js').Check} check */
+    const fail = check => got => report(check, `${prefix}; found ${got}.`)
 
     const elements = node.children
         .filter(child => child.type === 'JSXElement')
         .map(element => ({ element, component: componentOf(element) }))
-    const context = { node, elements, fail }
+    const context = { node, elements }
 
-    if (constrainsChildren(rule)) checkLiteral(context)
-    for (const [key, value] of Object.entries(rule)) CHECKS[key]?.(value, context)
+    if (constrainsChildren(rule)) checkLiteral({ ...context, fail: fail(rule.checks.literal) })
+    for (const [key, value] of Object.entries(rule)) CHECKS[key]?.(value, { ...context, fail: fail(rule.checks[key]) })
 }
 
-/** `createElement(Section, …)` would hide a constrained component's children from the checks. */
+/** `createElement(Section, …)` would hide a constrained component's children from the checks.
+ * @param {import('./rules.js').Rule} rule
+ * @param {{ node: any, component: string, report: (check: import('./index.js').Check, message: string) => void }} input
+ */
 export const checkCreateElement = (rule, { node, component, report }) =>
-    report(`<${component}>${at(node)} ${expectation(rule)}; found createElement(${component}), write it as a JSX tag.`)
+    report(rule.checks.createElement, `<${component}>${at(node)} ${expectation(rule)}; found createElement(${component}), write it as a JSX tag.`)

package/src/jsxPlugins/validation/index.js

@@ -26,8 +26,12 @@ const isCreateElement = callee =>
     (callee.type === 'Identifier' && callee.name === 'createElement') ||
     (callee.type === 'MemberExpression' && !callee.computed && callee.property.name === 'createElement')
 
-/** @type {import('../../transform/types.js').JsxTransformPlugin} */
+export const checks = /** @type {const} */ (['section_wrong_child', 'section_too_few_children', 'section_too_many_children', 'section_non_literal_children', 'section_create_element'])
+/** @typedef {typeof checks[number]} Check */
+
+/** @type {import('../../transform/types.js').JsxTransformPlugin<Check>} */
 export const layoutValidationPlugin = {
+    checks,
     name: 'wix-import-layout-validation',
     // Before any plugin that rewrites the tree, so the rules see it as authored.
     order: -100,
@@ -40,8 +44,10 @@ export const layoutValidationPlugin = {
             return name.type === 'JSXIdentifier' ? name.name : undefined
         }
 
+        /** @type {import('../../transform/types.js').Violation<Check>[]} */
         const violations = []
-        const report = message => violations.push(message)
+        /** @param {Check} check @param {string} message */
+        const report = (check, message) => violations.push({ check, message })
         program.traverse({
             JSXElement(path) {
                 const component = componentOf(path.node)
@@ -60,6 +66,6 @@ export const layoutValidationPlugin = {
             },
         })
 
-        if (violations.length) throw new LayoutError(violations)
+        if (violations.length) throw new LayoutError(layoutValidationPlugin, violations)
     },
 }

package/src/jsxPlugins/validation/rules.js

@@ -13,9 +13,23 @@
 
 const STANDARD_SECTIONS = ['Section', 'HeaderSection', 'FooterSection']
 
+/**
+ * @typedef {object} Rule
+ * @property {string} id
+ * @property {string[]} components
+ * @property {string[]} allowedChildren
+ * @property {number} minChildren
+ * @property {number} maxChildren
+ * @property {Record<'allowedChildren' | 'minChildren' | 'maxChildren' | 'literal' | 'createElement', import('./index.js').Check>} checks
+ */
+/** @satisfies {Rule[]} */
 export const RULES = [
     {
         id: 'S2-SECTION-001',
+        checks: {
+            allowedChildren: 'section_wrong_child', minChildren: 'section_too_few_children',
+            maxChildren: 'section_too_many_children', literal: 'section_non_literal_children', createElement: 'section_create_element',
+        },
         components: STANDARD_SECTIONS,
         allowedChildren: ['InternalContainer'],
         minChildren: 1,

package/src/transform/bi.js

@@ -0,0 +1,64 @@
+import { currentRow } from '@wix/origami-bi'
+import { LayoutError } from './layoutError.js'
+const summaries = new WeakMap()
+
+/** Aggregate completed dev invocations; paths are only in this local set, never in rows. */
+export function countPlugin(context, duration) {
+    const parent = currentRow()
+    if (!parent || context.command !== 'serve') return
+    const { run } = parent
+    let summary = summaries.get(run)
+    if (!summary) {
+        summary = { files: new Set(), plugins: 0, duration_ms: 0 }
+        summaries.set(run, summary)
+        const timer = setInterval(() => {
+            if (!run.commandRow.isOpen) { clearInterval(timer); summaries.delete(run); return }
+            if (!summary.plugins) return
+            run.commandRow.runInContext(() => run.openRow('step', 'transform_summary', {
+                step_details: { files: summary.files.size, plugins: summary.plugins, duration_ms: Math.round(summary.duration_ms) },
+            }).end())
+            summary.files.clear(); summary.plugins = 0; summary.duration_ms = 0
+        }, 60_000)
+        timer.unref()
+    }
+    summary.files.add(context.filePath)
+    summary.plugins++
+    summary.duration_ms += duration
+}
+
+/** @param {'malformed_custom_enum' | 'unmappable_preset' | 'svg_not_loaded' | 'media_not_wix'} key */
+export function warn(key) {
+    const current = currentRow()
+    // A passing dev plugin row is discarded; warnings must retain a live parent.
+    const parent = current?.step_type === 'build_plugin' ? current.parent : current
+    parent?.runInContext(() => parent.run.openRow('warning', key, { error_name: key }).end())
+}
+
+/**
+ * @template {string} Check
+ * @param {import('./types.js').TransformPluginBase<Check>} plugin
+ * @param {unknown} cause
+ * @returns {Check | undefined}
+ */
+export function declaredCheck(plugin, cause) {
+    return cause instanceof Error && 'check' in cause ? plugin.checks.find(check => check === cause.check) : undefined
+}
+
+/** Finish a plugin failure, projecting only its declared keys into check children. */
+export function recordPluginFailure(plugin, cause, pageId) {
+    const row = currentRow()
+    const check = declaredCheck(plugin, cause)
+    const violations = cause instanceof LayoutError ? cause.violations :
+        check !== undefined ? [{ check }] : []
+    const layout = cause instanceof LayoutError || violations.length > 0
+    row?.end(false, { error_name: layout ? 'layout_error' : 'plugin_error' }, {
+        outcome: layout ? 'layout_error' : 'plugin_error', violations: violations.length,
+    })
+    const counts = new Map()
+    for (const { check } of violations) {
+        if (plugin.checks.includes(check)) counts.set(check, (counts.get(check) ?? 0) + 1)
+    }
+    for (const [check, violations] of counts) row?.run.recordRow('build_plugin', plugin.name, {
+        ...(pageId ? { item_type: 'page', item_id: pageId } : {}), step_details: { check, violations },
+    }, { success: false, duration_ms: 0 }, row)
+}

package/src/transform/context.js

@@ -1,5 +1,44 @@
+import { currentRow } from '@wix/origami-bi'
+import { existsSync, readFileSync, statSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { parse } from '@babel/parser'
 import { relativeToSite } from './relativeToSite.js'
 
+const identities = new Map()
+export function pageIdFor(context) {
+    if (!currentRow()?.run.enabled || !context.layout?.root) return undefined
+    const { root } = context.layout
+    const file = context.filePath
+    let folder = dirname(file)
+    const pages = join(root, 'src/pages')
+    while (relative(pages, folder) && !relative(pages, folder).startsWith('..')) {
+        const structure = ['structure.jsx', 'structure.tsx'].map(name => join(folder, name)).find(existsSync)
+        if (structure) {
+            try {
+                const modified = statSync(structure).mtimeMs
+                if (identities.get(structure)?.modified === modified) return identities.get(structure).id
+                const ast = parse(readFileSync(structure, 'utf8'), { sourceType: 'module', plugins: ['jsx', 'typescript'] })
+                let id
+                const visit = node => {
+                    if (!node || typeof node !== 'object') return
+                    if (node.type === 'JSXOpeningElement' && node.name?.name === 'Page') {
+                        const attribute = node.attributes.find(value => value.type === 'JSXAttribute' && value.name.name === 'id')
+                        if (attribute?.value?.type === 'StringLiteral') id ??= attribute.value.value
+                    }
+                    for (const value of Object.values(node)) {
+                        if (Array.isArray(value)) value.forEach(visit)
+                        else if (value && typeof value === 'object') visit(value)
+                    }
+                }
+                visit(ast)
+                identities.set(structure, { modified, id })
+                return id
+            } catch { return undefined }
+        }
+        folder = dirname(folder)
+    }
+}
+
 export const createContextFactory =
     ({ layout, command }) =>
     (id, { ssr = false } = {}) =>