@wix/origami-transforms 0.1.6 → 0.1.7

package/dist/cssPlugins/structureFile.d.ts

@@ -0,0 +1,4 @@
+export function structureFileOf(stylesheetPath: any): string | undefined;
+export function parseStructure(structurePath: any): any;
+export function walk(node: any, visit: any): void;
+export function literalIdOf(openingElement: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-transforms",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Babel and PostCSS checks and transforms for Wix origami page files.",
   "main": "./src/index.js",
   "files": [
@@ -54,5 +54,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "falconPackageHash": "104bb1dbbdebc96c665a8cdf46acdfeb8ceef46bd8a7fcbd1ff2d10b"
+  "falconPackageHash": "9674cee94f59f7db338de844100c7527c7eeddff5e2d58f750c8f488"
 }

package/src/cssPlugins/customEnums.js

@@ -4,18 +4,16 @@
 // `customEnums.ts`), which the page imports and the bundler inlines. The blocks are removed from the output.
 // Native `if()` can't do it: Firefox doesn't have it, and a var named like its key refers to itself.
 //
-// The instance's component comes from the item's structure file, as in stackChildren.js: the element with
+// The instance's component comes from the item's structure file (structureFile.js): the element with
 // `id="comp-1"`, and the `@origami-wrappers/…` import it is rendered from. See customEnums.md.
 
-import { existsSync, readFileSync, realpathSync } from 'node:fs'
+import { realpathSync } from 'node:fs'
 import { createRequire } from 'node:module'
-import { basename, dirname, join } from 'node:path'
-import { parseSync } from '@babel/core'
+import { basename, dirname } from 'node:path'
 import postcss from 'postcss'
 import { LayoutError } from '../transform/layoutError.js'
+import { literalIdOf, parseStructure, structureFileOf, walk } from './structureFile.js'
 
-const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
-const GENERATED = '_generated'
 // `@origami-wrappers/<module>/<symbol>`, and nothing that could resolve outside its package.
 const WRAPPER_IMPORT = /^@origami-wrappers\/[\w-]+\/[\w-]+$/
 // `#id` or `.id` (exports give an instance both), then only what narrows that same element: classes,
@@ -23,44 +21,21 @@ const WRAPPER_IMPORT = /^@origami-wrappers\/[\w-]+\/[\w-]+$/
 // and no pseudo-elements, which the component doesn't read vars from.
 const INSTANCE = /^[#.]([\w-]+)(?!.*::)(?:[.:[][^\s>+~]*)?((?:\s+[^\s>+~]+)*)$/
 
-/** The folder holding the structure file a stylesheet is checked against: its own, or its item's for `_generated/`. */
-const structureFolderOf = stylesheetPath => {
-    const folder = dirname(stylesheetPath)
-    return basename(folder) === GENERATED ? dirname(folder) : folder
-}
-
 /** Id → the wrapper import it is rendered from, for elements with a literal `id` and an imported wrapper tag. */
 const importsById = structurePath => {
-    const ast = parseSync(readFileSync(structurePath, 'utf8'), {
-        babelrc: false,
-        configFile: false,
-        filename: structurePath,
-        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
-    })
+    const program = parseStructure(structurePath)
     const sources = new Map()
-    for (const node of ast?.program.body ?? []) {
+    for (const node of program?.body ?? []) {
         if (node.type !== 'ImportDeclaration' || !WRAPPER_IMPORT.test(node.source.value)) continue
         for (const specifier of node.specifiers) sources.set(specifier.local.name, node.source.value)
     }
     const byId = new Map()
-    const visit = node => {
-        if (Array.isArray(node)) return node.forEach(visit)
-        if (!node || typeof node.type !== 'string') return
-        if (node.type === 'JSXOpeningElement' && node.name.type === 'JSXIdentifier') {
-            const id = node.attributes.find(
-                attribute =>
-                    attribute.type === 'JSXAttribute' &&
-                    attribute.name.name === 'id' &&
-                    attribute.value?.type === 'StringLiteral'
-            )?.value.value
-            const source = sources.get(node.name.name)
-            if (id !== undefined && source !== undefined) byId.set(id, source)
-        }
-        for (const [key, value] of Object.entries(node)) {
-            if (key !== 'loc' && value && typeof value === 'object') visit(value)
-        }
-    }
-    visit(ast?.program)
+    walk(program, node => {
+        if (node.type !== 'JSXOpeningElement' || node.name.type !== 'JSXIdentifier') return
+        const id = literalIdOf(node)
+        const source = sources.get(node.name.name)
+        if (id !== undefined && source !== undefined) byId.set(id, source)
+    })
     return byId
 }
 
@@ -221,9 +196,7 @@ export const customEnumsPlugin = {
     transform(root, context) {
         const { byFolder, blocks, malformed } = definitionsIn(root)
         if (blocks.length === 0) return
-        const structurePath = STRUCTURE_FILES.map(file => join(structureFolderOf(context.filePath), file)).find(
-            existsSync
-        )
+        const structurePath = structureFileOf(context.filePath)
         if (structurePath !== undefined) context.addDependency?.(structurePath)
         const instances = structurePath === undefined ? new Map() : enumsById(structurePath, byFolder)
         const keys = new Set([...instances.values()].flatMap(enums => enums.map(({ key }) => key)))

package/src/cssPlugins/stackChildren.js

@@ -3,18 +3,14 @@
 //
 // A stack is a parent whose rule declares `--container-layout-type: StackContainerLayout`; its
 // `flex-direction` says which way it stacks (column → vertical, anything else → horizontal, as in
-// CSS). Parent and child are the JSX tree's, so the tree comes from the item's `structure.tsx` (or `.jsx`): next
-// to the stylesheet, or one folder up when the stylesheet is the generated one in `_generated/`. Elements and
-// rules meet on `id` and `#id`. The stylesheet is the page's, with its
+// CSS). Parent and child are the JSX tree's, so the tree comes from the item's structure file (see
+// structureFile.js). The stylesheet is the page's, with its
 // carriers already inlined (see ../transform/css/postcssPlugin.js), so every rule is in view.
 
-import { existsSync, readFileSync } from 'node:fs'
-import { basename, dirname, join } from 'node:path'
-import { parseSync } from '@babel/core'
+import { basename } from 'node:path'
 import { LayoutError } from '../transform/layoutError.js'
+import { literalIdOf, parseStructure, structureFileOf, walk } from './structureFile.js'
 
-const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
-const GENERATED = '_generated'
 const STACK_CONTAINER = 'StackContainerLayout'
 const BASE = ''
 
@@ -56,46 +52,21 @@ const lengthOf = token => {
     return UNIT.exec(token)?.[1].toLowerCase()
 }
 
-/** The folder holding the structure file a stylesheet is checked against: its own, or its item's for `_generated/`. */
-const structureFolderOf = stylesheetPath => {
-    const folder = dirname(stylesheetPath)
-    return basename(folder) === GENERATED ? dirname(folder) : folder
-}
-
 /** Child id → its direct parent's id, for elements with a literal `id`. Slot props are not children. */
 const parentsIn = structurePath => {
-    const ast = parseSync(readFileSync(structurePath, 'utf8'), {
-        babelrc: false,
-        configFile: false,
-        filename: structurePath,
-        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
-    })
     const parents = new Map()
-    const idOf = element => {
-        const attribute = element.openingElement.attributes.find(
-            node => node.type === 'JSXAttribute' && node.name.name === 'id' && node.value?.type === 'StringLiteral'
-        )
-        return attribute?.value.value
-    }
     const directChildren = node =>
         node.children.flatMap(child =>
             child.type === 'JSXElement' ? [child] : child.type === 'JSXFragment' ? directChildren(child) : []
         )
-    const visit = node => {
-        if (Array.isArray(node)) return node.forEach(visit)
-        if (!node || typeof node.type !== 'string') return
-        if (node.type === 'JSXElement') {
-            const parent = idOf(node)
-            for (const child of directChildren(node)) {
-                const id = idOf(child)
-                if (parent !== undefined && id !== undefined) parents.set(id, parent)
-            }
-        }
-        for (const [key, value] of Object.entries(node)) {
-            if (key !== 'loc' && value && typeof value === 'object') visit(value)
+    walk(parseStructure(structurePath), node => {
+        if (node.type !== 'JSXElement') return
+        const parent = literalIdOf(node.openingElement)
+        for (const child of directChildren(node)) {
+            const id = literalIdOf(child.openingElement)
+            if (parent !== undefined && id !== undefined) parents.set(id, parent)
         }
-    }
-    visit(ast?.program)
+    })
     return parents
 }
 
@@ -158,9 +129,7 @@ export const stackChildrenPlugin = {
     // After mixins copy their bodies in, before spx rewrites --spx() calls away.
     order: 12,
     transform(root, context) {
-        const structurePath = STRUCTURE_FILES.map(file => join(structureFolderOf(context.filePath), file)).find(
-            existsSync
-        )
+        const structurePath = structureFileOf(context.filePath)
         if (structurePath === undefined) return
         context.addDependency?.(structurePath)
         const parents = parentsIn(structurePath)

package/src/cssPlugins/structureFile.js

@@ -0,0 +1,43 @@
+// The item's structure file, for CSS plugins that check a stylesheet against its JSX tree: `structure.tsx` (or
+// `.jsx`) next to the stylesheet, or one folder up when the stylesheet is the generated one in `_generated/`.
+// Elements and rules meet on a literal `id` and `#id`.
+
+import { existsSync, readFileSync } from 'node:fs'
+import { basename, dirname, join } from 'node:path'
+import { parseSync } from '@babel/core'
+
+const STRUCTURE_FILES = ['structure.tsx', 'structure.jsx']
+const GENERATED = '_generated'
+
+/** The structure file `stylesheetPath` is checked against, or undefined when its item has none. */
+export const structureFileOf = stylesheetPath => {
+    const folder = dirname(stylesheetPath)
+    const item = basename(folder) === GENERATED ? dirname(folder) : folder
+    return STRUCTURE_FILES.map(file => join(item, file)).find(existsSync)
+}
+
+/** The structure file's program. */
+export const parseStructure = structurePath =>
+    parseSync(readFileSync(structurePath, 'utf8'), {
+        babelrc: false,
+        configFile: false,
+        filename: structurePath,
+        parserOpts: { plugins: structurePath.endsWith('.tsx') ? ['jsx', 'typescript'] : ['jsx'] },
+    })?.program
+
+/** Calls `visit` on every node under `node`, parents first. */
+export const walk = (node, visit) => {
+    if (Array.isArray(node)) return node.forEach(child => walk(child, visit))
+    if (!node || typeof node.type !== 'string') return
+    visit(node)
+    for (const [key, value] of Object.entries(node)) {
+        if (key !== 'loc' && value && typeof value === 'object') walk(value, visit)
+    }
+}
+
+/** A JSX opening element's `id`, when it is a string literal. */
+export const literalIdOf = openingElement =>
+    openingElement.attributes.find(
+        attribute =>
+            attribute.type === 'JSXAttribute' && attribute.name.name === 'id' && attribute.value?.type === 'StringLiteral'
+    )?.value.value