@wix/origami-site-runtime 1.0.0

package/src/transform/jsx/babelAdapter.js

@@ -0,0 +1,37 @@
+// The JSX stage's bridge to Babel.
+//
+// Exactly one Babel plugin is registered per module, however many of our plugins are selected: this
+// adapter. Babel parses the module once, and the adapter's Program visitor is where that AST is
+// handed to the stage — the same hand-off PostCSS gives the CSS stage. Our plugins are therefore
+// plain functions over an AST, and none of them has to be shaped like a Babel plugin.
+//
+// The adapter is a stable module-level function and the per-file work is passed as Babel plugin
+// options, so Babel still sees the same plugin identity on every file.
+
+import { runJsxPlugins } from './runPlugins.js'
+
+const babelAdapter = () => ({
+    name: 'wix-import-jsx-transform',
+    visitor: {
+        Program(program, state) {
+            const { plugins, context } = state.opts
+            runJsxPlugins({ plugins, program, context })
+        },
+    },
+})
+
+export const createBabelOptionsSelector =
+    ({ selectPlugins, contextFor }) =>
+    (id, { ssr = false } = {}) => {
+        const context = contextFor(id, { ssr })
+        const plugins = selectPlugins(context)
+        if (!plugins.length) return { plugins: [] }
+
+        // Parser plugins configure the parse itself, so they are collected before anything runs.
+        const parserPlugins = [...new Set(plugins.flatMap(plugin => plugin.parserPlugins ?? []))]
+
+        return {
+            plugins: [[babelAdapter, { plugins, context }]],
+            ...(parserPlugins.length ? { parserOpts: { plugins: parserPlugins } } : {}),
+        }
+    }

package/src/transform/jsx/runPlugins.js

@@ -0,0 +1,20 @@
+// Runs the selected JSX plugins over one shared Program path, in order. Parsing and printing belong
+// to Babel, which drives this stage — the only thing added here is attributing a failure to the
+// plugin and the file that caused it.
+
+const reason = cause => (cause instanceof Error ? cause.message : String(cause))
+
+export const runJsxPlugins = ({ plugins, program, context }) => {
+    for (const plugin of plugins) {
+        try {
+            plugin.transform(program, context)
+        } catch (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(
+                `JSX transform "${plugin.name}" failed for ${context.relativePath ?? context.filePath}: ${reason(cause)}`,
+                { cause }
+            )
+        }
+    }
+}

package/src/transform/pipeline.js

@@ -0,0 +1,55 @@
+// Select and cache transform plugins by stage, file, and SSR context.
+import { cssPlugins as defaultCssPlugins } from '../cssPlugins/index.js'
+import { jsxPlugins as defaultJsxPlugins } from '../jsxPlugins/index.js'
+import { createContextFactory } from './context.js'
+import { createCssPostcssPlugin } from './css/postcssPlugin.js'
+import { createBabelOptionsSelector } from './jsx/babelAdapter.js'
+import { createTransformRegistry } from './registry.js'
+
+const createState = ({ layout, registries, command }) => {
+    const contextFactory = createContextFactory({ layout, command })
+    /** @type {Map<string, readonly object[]>} `<stage>\0<ssr>\0<filePath>` -> selected plugins */
+    const selections = new Map()
+
+    const selectPlugins = (stage, context) => {
+        const key = `${stage}\0${context.ssr ? 1 : 0}\0${context.filePath}`
+        const cached = selections.get(key)
+        if (cached !== undefined) return cached
+
+        const selected = registries[stage].select(context)
+        selections.set(key, selected)
+        return selected
+    }
+
+    return { contextFactory, selectPlugins }
+}
+
+/**
+ * @param {{
+ *     layout: ReturnType<typeof import('../routing/siteLayout.js').siteLayout>,
+ *     jsxPlugins?: readonly import('./types.js').JsxTransformPlugin[],
+ *     cssPlugins?: readonly import('./types.js').CssTransformPlugin[],
+ * }} options
+ */
+export const createTransformPipeline = ({ layout, jsxPlugins = defaultJsxPlugins, cssPlugins = defaultCssPlugins }) => {
+    const registries = {
+        jsx: createTransformRegistry(jsxPlugins),
+        css: createTransformRegistry(cssPlugins),
+    }
+    let command
+    let state
+
+    const currentState = () => (state ??= createState({ layout, registries, command }))
+    const contextFor = (id, options) => currentState().contextFactory(id, options)
+    const selectFor = stage => context => currentState().selectPlugins(stage, context)
+
+    return {
+        postcssPlugin: createCssPostcssPlugin({ contextFor, selectPlugins: selectFor('css') }),
+        babelOptionsFor: createBabelOptionsSelector({ contextFor, selectPlugins: selectFor('jsx') }),
+
+        setCommand: value => {
+            command = value
+            state = undefined
+        },
+    }
+}

package/src/transform/registry.js

@@ -0,0 +1,40 @@
+// One stage's plugins, kept in the order they run.
+//
+// Ordering is resolved once per registration rather than per selection: a site re-transforms the
+// same modules on every hot update, and the plugin list does not change between them. Selection
+// stays pure — the pipeline decides whether to consult a registry at all, and caches what it gets
+// back. Each stage gets its own registry, which is why nothing here knows about stages.
+
+/** @type {readonly any[]} */
+const EMPTY = Object.freeze([])
+
+const byOrderThenRegistration = (left, right) => left.plugin.order - right.plugin.order || left.index - right.index
+
+/** @param {readonly any[]} [plugins] */
+export const createTransformRegistry = (plugins = EMPTY) => {
+    const names = new Set()
+    /** @type {{ plugin: any, index: number }[]} */
+    const entries = []
+
+    const registry = {
+        register: plugin => {
+            if (names.has(plugin.name)) throw new Error(`Duplicate transform plugin "${plugin.name}"`)
+            names.add(plugin.name)
+
+            entries.push({ plugin, index: entries.length })
+            entries.sort(byOrderThenRegistration)
+            return registry
+        },
+
+        /** The plugins that apply to `context`, in order. Frozen; safe to hold onto. */
+        select: context => {
+            const selected = entries
+                .filter(({ plugin }) => !plugin.appliesTo || plugin.appliesTo(context))
+                .map(({ plugin }) => plugin)
+            return selected.length ? Object.freeze(selected) : EMPTY
+        },
+    }
+
+    for (const plugin of plugins) registry.register(plugin)
+    return registry
+}

package/src/transform/types.js

@@ -0,0 +1,39 @@
+/**
+ * The transform-plugin contract.
+ *
+ * Both stages have the same shape: an engine parses the file once, and each plugin is handed that
+ * AST plus the file's context and does what it likes with it. Babel and PostCSS are engines here,
+ * not plugin hosts — a plugin never has to know either one's own plugin protocol. Which stage a
+ * plugin belongs to is decided by the list it is registered in, so no descriptor restates it.
+ *
+ * @typedef {object} TransformContext
+ * @property {string} id Module id as the bundler reports it, query string included.
+ * @property {string} filePath `id` with any query stripped.
+ * @property {string | undefined} relativePath Posix path relative to the site root, or undefined when the file lies outside it.
+ * @property {ReturnType<typeof import('../routing/siteLayout.js').siteLayout>} layout
+ * @property {'serve' | 'build'} command
+ * @property {boolean} ssr Always false for the CSS stage, which PostCSS drives without an SSR signal.
+ *
+ * @typedef {object} TransformPluginBase
+ * @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 & {
+ *     transform: (program: any, context: TransformContext) => void,
+ *     parserPlugins?: readonly string[]
+ * }} JsxTransformPlugin
+ * `program` is the Babel `NodePath` for the module's Program node. Traverse it if you need to —
+ * 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 & {
+ *     validate?: (root: import('postcss').Root, context: TransformContext) => void,
+ *     transform: (root: import('postcss').Root, context: TransformContext) => void
+ * }} CssTransformPlugin
+ */
+
+export {}

package/src/vitePlugins/documentMiddleware.js

@@ -0,0 +1,42 @@
+// Serves a route-matched HTML document for requests Vite itself did not handle.
+
+import { Buffer } from 'node:buffer'
+import { readFile } from 'node:fs/promises'
+import { renderPageDocument } from '../routing/documentHtml.js'
+import { pagesToRoutes } from '../routing/pagesToRoutes.js'
+import { normalizeRequestPath } from '../routing/urlPath.js'
+
+const DOCUMENT_METHODS = new Set(['GET', 'HEAD'])
+
+const acceptsHtml = request => {
+    const { accept } = request.headers
+    if (accept === undefined) return true
+    return accept.split(',').some(value => value.trim().startsWith('text/html'))
+}
+
+const isDocumentRequest = request => DOCUMENT_METHODS.has(request.method) && acceptsHtml(request)
+
+export const createDocumentMiddleware = ({ layout, transformHtml }) =>
+    async function serveDocument(request, response, next) {
+        if (!isDocumentRequest(request)) return next()
+
+        try {
+            const table = pagesToRoutes(layout.root)
+            const template = await readFile(layout.template, 'utf8')
+            const requestPath = normalizeRequestPath(request.url)
+            const matched = table.routes.find(route => route.url === requestPath)
+            const document = renderPageDocument({ template, route: matched ?? table.notFound })
+            const html = await transformHtml(requestPath ?? '/', document)
+
+            response.statusCode = matched ? 200 : 404
+            response.setHeader('Content-Type', 'text/html; charset=utf-8')
+            response.setHeader('Cache-Control', 'no-store')
+            // A HEAD response has to carry the headers a GET would, so the length is set before the
+            // body is skipped. Measured in bytes, not characters: a non-ASCII page name makes those
+            // differ, and a wrong Content-Length is worse than a missing one.
+            response.setHeader('Content-Length', Buffer.byteLength(html))
+            response.end(request.method === 'HEAD' ? undefined : html)
+        } catch (error) {
+            next(error)
+        }
+    }

package/src/vitePlugins/itemFolderImports.js

@@ -0,0 +1,16 @@
+import { existsSync, statSync } from 'node:fs'
+import { dirname, resolve, sep } from 'node:path'
+
+export const itemFolderImports = root => ({
+    name: 'wix-item-folder-imports',
+    enforce: /** @type {const} */ ('pre'),
+    resolveId(source, importer) {
+        if (!importer || source === './' || !(source.startsWith('./') || source.startsWith('../'))) return undefined
+        const folder = resolve(dirname(importer.split('?', 1)[0]), source)
+        if (!folder.startsWith(`${resolve(root, 'src/global')}${sep}`)) return undefined
+        const entry = resolve(folder, '_generated/index.jsx')
+        if (existsSync(folder) && statSync(folder).isDirectory() && existsSync(entry) && statSync(entry).isFile())
+            return entry
+        return undefined
+    },
+})

package/src/vitePlugins/reactBabel.js

@@ -0,0 +1,6 @@
+// React/Babel wiring; transform selection is delegated to the site's pipeline.
+
+import react from '@vitejs/plugin-react'
+
+export const reactBabelPlugin = ({ pipeline }) =>
+    react({ babel: (id, { ssr }) => pipeline.babelOptionsFor(id, { ssr }) })

package/src/vitePlugins/siteDocumentsPlugin.js

@@ -0,0 +1,35 @@
+// The `wix-import-site` Vite plugin: serves route-matched documents in development, synthesizes one
+// virtual HTML entry per render target for the build.
+
+import { readFileSync } from 'node:fs'
+import { renderPageDocument } from '../routing/documentHtml.js'
+import { createDocumentMiddleware } from './documentMiddleware.js'
+
+export const siteDocumentsPlugin = ({ layout, documents, pipeline }) => ({
+    name: 'wix-import-site',
+
+    config(_, { command }) {
+        pipeline.setCommand(command)
+    },
+
+    configureServer(server) {
+        // Returned as a post hook so document rendering only sees requests Vite did not handle.
+        return () =>
+            server.middlewares.use(
+                createDocumentMiddleware({
+                    layout,
+                    transformHtml: (url, html) => server.transformIndexHtml(url, html),
+                })
+            )
+    },
+
+    resolveId(id) {
+        return documents.has(id) ? id : undefined
+    },
+
+    load(id) {
+        const route = documents.get(id)
+        if (!route) return undefined
+        return renderPageDocument({ template: readFileSync(layout.template, 'utf8'), route })
+    },
+})