@wix/origami-transforms 0.1.54 → 0.1.56

package/dist/jsxPlugins/validation/checks.d.ts

@@ -1,8 +1,9 @@
 export function assertKnownConstraints(rules: any): void;
 export function constrainsChildren(rule: any): boolean;
-export function checkRule(rule: import("./rules.js").Rule, { node, componentOf, report }: {
+export function checkRule(rule: import("./rules.js").Rule, { node, componentOf, isProvider, report }: {
     node: any;
     componentOf: (node: any) => string | undefined;
+    isProvider: (node: any) => boolean;
     report: (check: import("./index.js").Check, message: string) => void;
 }): void;
 export function checkCreateElement(rule: import("./rules.js").Rule, { node, component, report }: {

package/dist/jsxPlugins/validation/index.d.ts

@@ -1,4 +1,4 @@
-export const checks: readonly ["section_wrong_child", "section_too_few_children", "section_too_many_children", "section_non_literal_children", "section_create_element"];
+export const checks: readonly ["section_wrong_child", "section_too_few_children", "section_too_many_children", "section_non_literal_children", "section_create_element", "invalid_component_catalog"];
 /** @typedef {typeof checks[number]} Check */
 /** @type {import('../../transform/types.js').JsxTransformPlugin<Check>} */
 export const layoutValidationPlugin: import("../../transform/types.js").JsxTransformPlugin<Check>;

package/dist/jsxPlugins/validation/providers.d.ts

@@ -0,0 +1 @@
+export function findProviderTags(program: any, root: string | undefined): Set<string>;

package/dist/jsxPlugins/validation/tree.d.ts

@@ -1 +1,2 @@
 export function describe(node: any): string;
+export function elementUnderProviders(element: any, isProvider: (element: any) => boolean): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.54",
+  "version": "0.1.56",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -24,7 +24,7 @@
     "@wix/origami-system-components": "1.10.14",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1",
-    "@wix/origami-bi": "0.21.0"
+    "@wix/origami-bi": "0.22.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
@@ -76,5 +76,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "aae99aa83d2e96a4134ab3ed320d8a02995bec99c275d844f2dace0d"
+  "falconPackageHash": "db1e35b4c8643d29244f6bad8070b058b173b7fa7761c59210f8a8c2"
 }

package/src/jsxPlugins/validation/checks.js

@@ -5,7 +5,7 @@
 // To add a kind of constraint: add a function to CHECKS, use its key in rules.js, and extend
 // expectation() so messages state it.
 
-import { describe } from './tree.js'
+import { describe, elementUnderProviders } from './tree.js'
 
 const CHILD_CONSTRAINTS = ['allowedChildren', 'minChildren', 'maxChildren']
 
@@ -86,17 +86,19 @@ 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. A child counts as the element
+ * under its context providers.
  * @param {import('./rules.js').Rule} rule
- * @param {{ node: any, componentOf: (node: any) => string | undefined, report: (check: import('./index.js').Check, message: string) => void }} input
+ * @param {{ node: any, componentOf: (node: any) => string | undefined, isProvider: (node: any) => boolean, report: (check: import('./index.js').Check, message: string) => void }} input
  */
-export const checkRule = (rule, { node, componentOf, report }) => {
+export const checkRule = (rule, { node, componentOf, isProvider, report }) => {
     const prefix = `${describe(node)} ${expectation(rule)}`
     /** @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(child => elementUnderProviders(child, isProvider))
         .map(element => ({ element, component: componentOf(element) }))
     const context = { node, elements }
 

package/src/jsxPlugins/validation/index.js

@@ -3,11 +3,13 @@
 //
 // One walk serves every rule. Rules are data (./rules.js); each names the components it looks at,
 // identified for now by JSX tag name as written (<Section>, <InternalContainer>), whatever they are
-// imported from, and the checks (./checks.js) run on each matching element.
+// imported from, and the checks (./checks.js) run on each matching element. A context provider is the one exception: it's
+// known by its import, against the site's component catalog (./providers.js), and a rule checks the element it wraps.
 
 import { basename } from 'node:path'
 import { LayoutError } from '../../transform/layoutError.js'
 import { assertKnownConstraints, checkCreateElement, checkRule, constrainsChildren } from './checks.js'
+import { findProviderTags } from './providers.js'
 import { RULES } from './rules.js'
 
 const STRUCTURE_FILES = new Set(['structure.tsx', 'structure.jsx'])
@@ -26,7 +28,7 @@ const isCreateElement = callee =>
     (callee.type === 'Identifier' && callee.name === 'createElement') ||
     (callee.type === 'MemberExpression' && !callee.computed && callee.property.name === 'createElement')
 
-export const checks = /** @type {const} */ (['section_wrong_child', 'section_too_few_children', 'section_too_many_children', 'section_non_literal_children', 'section_create_element'])
+export const checks = /** @type {const} */ (['section_wrong_child', 'section_too_few_children', 'section_too_many_children', 'section_non_literal_children', 'section_create_element', 'invalid_component_catalog'])
 /** @typedef {typeof checks[number]} Check */
 
 /** @type {import('../../transform/types.js').JsxTransformPlugin<Check>} */
@@ -37,12 +39,14 @@ export const layoutValidationPlugin = {
     order: -100,
     appliesTo: context => STRUCTURE_FILES.has(basename(context.filePath)),
 
-    transform: program => {
+    transform: (program, context) => {
         // The component an element is: its tag name, as written.
         const componentOf = node => {
             const name = node.openingElement.name
             return name.type === 'JSXIdentifier' ? name.name : undefined
         }
+        const providerTags = findProviderTags(program, context.layout?.root)
+        const isProvider = node => providerTags.has(componentOf(node))
 
         /** @type {import('../../transform/types.js').Violation<Check>[]} */
         const violations = []
@@ -53,7 +57,7 @@ export const layoutValidationPlugin = {
                 const component = componentOf(path.node)
                 const rules = component === undefined ? undefined : RULES_BY_COMPONENT.get(component)
                 if (rules === undefined) return
-                for (const rule of rules) checkRule(rule, { node: path.node, componentOf, report })
+                for (const rule of rules) checkRule(rule, { node: path.node, componentOf, isProvider, report })
             },
 
             CallExpression({ node }) {

package/src/jsxPlugins/validation/providers.js

@@ -0,0 +1,57 @@
+// Which tags of a structure are context providers: a tag the structure imports from an app's wrapper package, which the
+// site's component catalog lists among that app's context providers.
+
+import { existsSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { moduleFromWrapperEntry, wrapperImport } from '../../wrapperImport.js'
+
+const CATALOG = 'site-component-catalog.json'
+
+/**
+ * The site's component catalog; empty for a site exported before it.
+ * @param {string | undefined} root the site app's folder
+ * @returns {import('../../wrapperSideEffects.js').WrapperCatalog}
+ */
+const readCatalog = root => {
+    const file = root === undefined ? undefined : join(root, CATALOG)
+    if (file === undefined || !existsSync(file)) return {}
+    try {
+        return JSON.parse(readFileSync(file, 'utf8'))
+    } catch (error) {
+        // The export's to fix, so it carries its check, as a layout violation does.
+        throw Object.assign(
+            new Error(`${CATALOG} is not valid JSON (${error instanceof Error ? error.message : String(error)}). Export the site again.`),
+            { check: 'invalid_component_catalog' }
+        )
+    }
+}
+
+/** The structure's imports of app wrappers, with the app each is from. */
+const wrapperImportsOf = program =>
+    program.node.body
+        .filter(statement => statement.type === 'ImportDeclaration')
+        .map(statement => ({ statement, module: moduleFromWrapperEntry(statement.source.value) }))
+        .filter(({ module }) => module !== undefined)
+
+/**
+ * The tags the structure names its context providers by. A structure that imports no app wrapper doesn't read the catalog.
+ * @param {any} program the structure file's Babel program path
+ * @param {string | undefined} root the site app's folder
+ * @returns {Set<string>}
+ */
+export const findProviderTags = (program, root) => {
+    const imports = wrapperImportsOf(program)
+    const catalog = imports.length === 0 ? {} : readCatalog(root)
+    /** @type {Set<string>} */
+    const tags = new Set()
+    for (const { statement, module } of imports) {
+        const providers = catalog[module]?.entries?.contextProviders ?? {}
+        for (const specifier of statement.specifiers) {
+            if (specifier.type !== 'ImportSpecifier') continue
+            const name = specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value
+            const isProvider = Object.hasOwn(providers, name) && wrapperImport({ module, symbol: name }) === statement.source.value
+            if (isProvider) tags.add(specifier.local.name)
+        }
+    }
+    return tags
+}

package/src/jsxPlugins/validation/tree.js

@@ -13,3 +13,30 @@ export const describe = node => {
     const line = node.loc ? ` (line ${node.loc.start.line})` : ''
     return `<${tag}${id ? ` id="${id.value.value}"` : ''}>${line}`
 }
+
+// Whitespace between tags and {/* comments */}, which the converter skips too (parseJsx.ts isFillerChild).
+const isFiller = child =>
+    (child.type === 'JSXText' && child.value.trim() === '') ||
+    (child.type === 'JSXExpressionContainer' && child.expression.type === 'JSXEmptyExpression')
+
+/** The element's only child element; undefined when it has none, more, or anything else in it. */
+const onlyChildElement = node => {
+    const children = node.children.filter(child => !isFiller(child))
+    return children.length === 1 && children[0].type === 'JSXElement' ? children[0] : undefined
+}
+
+/**
+ * The element a child stands for. A context provider wraps exactly one element, which stands in its place (the
+ * converter's parseJsx.ts wrappedChildOf), so the element under the providers; a provider that wraps none or more is
+ * itself the child, so the rule reports it.
+ * @param {any} element
+ * @param {(element: any) => boolean} isProvider
+ */
+export const elementUnderProviders = (element, isProvider) => {
+    while (isProvider(element)) {
+        const wrapped = onlyChildElement(element)
+        if (wrapped === undefined) break
+        element = wrapped
+    }
+    return element
+}