@wix/origami-transforms 0.1.17 → 0.1.19

package/dist/jsxPlugins/pageSlots.d.ts

@@ -0,0 +1,6 @@
+export namespace pageSlotsPlugin {
+    let name: string;
+    let order: number;
+    function appliesTo(context: any): boolean;
+    function transform(program: any): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -18,7 +18,7 @@
     "@babel/parser": "^7.25.0",
     "@babel/types": "^7.25.2",
     "@wix/origami-fonts": "1.0.1",
-    "@wix/origami-system-components": "1.10.0",
+    "@wix/origami-system-components": "1.10.2",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^12.0.1"
   },
@@ -64,5 +64,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "7fd53a47a2a80ee2e831d1b608e15378825592abfb78d94393377d13"
+  "falconPackageHash": "c11a6c324a5b97b42a4b7a2a48d91b173e6a90a02c324a92787797d9"
 }

package/src/jsxPlugins/index.js

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

package/src/jsxPlugins/pageSlots.js

@@ -0,0 +1,85 @@
+import { basename } from 'node:path'
+import { types as t } from '@babel/core'
+import { findAttribute } from './origamiCompatibility/ast.js'
+
+// Resolve imports rather than function names: shared definitions and wrapper names
+// are otherwise opaque to Page at runtime, especially after minification.
+const componentOf = path => {
+    const name = path.node.openingElement.name
+    if (!t.isJSXIdentifier(name)) return undefined
+    const binding = path.scope.getBinding(name.name)?.path
+    if (!binding || !binding.parentPath.isImportDeclaration()) return undefined
+    const source = binding.parentPath.node.source.value
+    const imported = binding.isImportSpecifier()
+        ? binding.node.imported.name ?? binding.node.imported.value
+        : 'default'
+    if (source === 'document' || source === 'document/components' || source === 'wixSystemElements') {
+        return imported
+    }
+    const system = /^@wix\/origami-system-components\/layout\/(Page|Header|Footer)$/u.exec(source)?.[1]
+    if (system && (imported === system || imported === 'default')) return system
+    const shared = /(?:^|\/)global\/components\/(Header|Footer)_[^/]+(?:\/index\.jsx)?$/u.exec(source)?.[1]
+    if (shared && imported === 'default') return shared
+    const background = /^@origami-wrappers\/wixSystemElements\/(background|backgroundshapedivider)$/u.exec(source)?.[1]
+    if (background && (imported.toLowerCase() === background || imported === 'default')) return 'Background'
+    return undefined
+}
+
+const slotFor = component => {
+    if (component === 'Header' || component?.startsWith('Header_')) return 'header'
+    if (component === 'Footer' || component?.startsWith('Footer_')) return 'footer'
+    if (component === 'Background' || component === 'BackgroundShapeDivider') return 'backgroundLayer'
+    return undefined
+}
+
+/** Transitional support for DM's literal Page children alongside authored slot props. */
+export const pageSlotsPlugin = {
+    name: 'wix-import-page-slots',
+    order: 0,
+    appliesTo: context => basename(context.filePath) === 'structure.jsx',
+    transform: program => {
+        program.traverse({
+            JSXElement(path) {
+                if (componentOf(path) !== 'Page') return
+                const slots = new Map()
+                const collect = parent => {
+                    for (const child of parent.get('children')) {
+                        if (child.isJSXFragment()) {
+                            collect(child)
+                            continue
+                        }
+                        if (!child.isJSXElement()) continue
+                        const slot = slotFor(componentOf(child))
+                        if (!slot) continue
+                        if (!slots.has(slot)) slots.set(slot, [])
+                        slots.get(slot).push(child.node)
+                        child.remove()
+                    }
+                }
+                collect(path)
+                const attributes = path.node.openingElement.attributes
+                for (const [slot, children] of slots) {
+                    // Explicit slots (including null) win. Insert defaults before spreads
+                    // so an authored spread can override them as normal JSX props do.
+                    if (findAttribute(attributes, slot)) continue
+                    let value
+                    if (slot === 'backgroundLayer') {
+                        // The slot shares InternalContainer's array contract. These
+                        // literal children need keys now that they form an array.
+                        children.forEach((child, index) => {
+                            const props = child.openingElement.attributes
+                            if (!findAttribute(props, 'key')) {
+                                props.push(t.jsxAttribute(t.jsxIdentifier('key'), t.stringLiteral(`origami-background-${index}`)))
+                            }
+                        })
+                        value = t.arrayExpression(children)
+                    } else {
+                        value = children.length === 1 ? children[0] :
+                            t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), children)
+                    }
+                    attributes.unshift(t.jsxAttribute(t.jsxIdentifier(slot), t.jsxExpressionContainer(value)))
+                }
+            },
+        })
+    },
+}