@wix/origami-site 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/origami-site",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Runs an exported Wix origami site: file-based routing, Wix dynamic pages, popups and build checks. Use with @wix/origami-site-astro or @wix/origami-site-express.",
   "type": "module",
   "files": [
@@ -9,12 +9,16 @@
   "scripts": {
     "build": "tsc --noEmit",
     "lint": "oxlint .",
-    "test": "node --test test/*.spec.js && tsc --noEmit -p tsconfig.test.json"
+    "test": "node --test test/*.spec.js && tsc --noEmit -p tsconfig.test.json && vitest run --config vitest.config.js"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "typescript": "^6.0.3",
-    "vite": "^8"
+    "vite": "^8",
+    "@vitejs/plugin-react": "^5.2.0",
+    "postcss": "^8.5.3",
+    "jsdom": "^23.0.1",
+    "vitest": "^4.1.11"
   },
   "publishUnscoped": false,
   "publishConfig": {
@@ -44,6 +48,7 @@
     "react-dom": "^18.3.1",
     "@wix/builder-error-pages": "^1.1.6",
     "@wix/builder-piler-components": "^1.6.7",
+    "@wix/origami-transforms": "0.1.2",
     "@babel/parser": "^7.25.0"
   },
   "exports": {
@@ -59,14 +64,20 @@
       "types": "./src/popups/index.d.ts",
       "default": "./src/popups/index.js"
     },
-    "./vite-plugins": {
-      "types": "./src/vite-plugins/index.d.ts",
-      "default": "./src/vite-plugins/index.js"
+    "./build": {
+      "types": "./src/build/index.d.ts",
+      "default": "./src/build/index.js"
     },
     "./types": {
       "types": "./src/types/index.d.ts"
     },
-    "./default-error-404": "./src/default-error-404.jsx"
+    "./default-error-404": {
+      "types": "./src/default-error-404.d.ts",
+      "default": "./src/default-error-404.jsx"
+    }
+  },
+  "peerDependencies": {
+    "vite": "^8"
   },
-  "falconPackageHash": "236041398ac8f5cb5996fd571ab7dbe9f17287f25c51e01599157dc7"
+  "falconPackageHash": "d4e6a231eb25f391006613a9dff797f8a37f0e1a6d465677ef365281"
 }

package/src/browser/index.d.ts

@@ -1,10 +1,14 @@
 import type { PageData } from '../server/index.js'
-// PLAN-QUESTION: mountPage options follow the example; page modules remain unknown until milestone 1.7.
+import type { ComponentType } from 'react'
+
+export type PageModule = { default: ComponentType }
 export type MountPageOptions = {
-  pages: Record<string, () => Promise<unknown>>
+  pages: Record<string, () => Promise<PageModule>>
   popups: Record<string, () => Promise<unknown>>
   seoUriByPageId: Record<string, string>
   beforeMount: () => Promise<unknown>
 }
 export function mountPage(element: Element | null, options: MountPageOptions): Promise<() => void>
-export function readPageData(): PageData
+/** Cached per page load. Warns once and returns undefined if the block is missing.
+ * Throws an Error with the parse failure as its cause for invalid JSON. */
+export function readPageData(): PageData | undefined

package/src/browser/index.js

@@ -1 +1,57 @@
-export {}
+import { createElement, StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { PilerPage } from '@wix/builder-piler-components'
+
+let hasReadPageData = false
+/** @type {import('../server/index.js').PageData | undefined} */
+let pageData
+/** @type {Error | undefined} */
+let pageDataError
+
+/** Read the adapter's JSON block without evaluating it as JavaScript.
+ * @returns {import('../server/index.js').PageData | undefined}
+ */
+export function readPageData() {
+    if (!hasReadPageData) {
+        hasReadPageData = true
+        const script = document.getElementById('origami-page')
+        if (!script) {
+            console.warn('Missing #origami-page data block')
+        } else {
+            try {
+                pageData = JSON.parse(script.textContent ?? '')
+            } catch (cause) {
+                pageDataError = new Error('Invalid JSON in #origami-page', { cause })
+            }
+        }
+    }
+    if (pageDataError) throw pageDataError
+    return pageData
+}
+
+/** @param {Element | null} element
+ * @param {import('./index.js').MountPageOptions} options
+ * @returns {Promise<() => void>}
+ */
+export async function mountPage(element, { pages, beforeMount }) {
+    if (!element) throw new Error('Cannot mount page: root element is missing')
+    const data = readPageData()
+    const pageKey = data?.page
+    const loadPage = (typeof pageKey === 'string' && Object.hasOwn(pages, pageKey) && pages[pageKey])
+        || (Object.hasOwn(pages, 'pages/error404') && pages['pages/error404'])
+        || (Object.hasOwn(pages, '@wix/origami-site/default-error-404') && pages['@wix/origami-site/default-error-404'])
+    if (typeof loadPage !== 'function') {
+        throw new Error('Cannot mount page: requested page and default 404 are missing')
+    }
+
+    try {
+        await beforeMount()
+    } catch (error) {
+        console.error(error)
+    }
+    // Generated page providers read PageData.services during this import.
+    const { default: Page } = await loadPage()
+    const root = createRoot(element)
+    root.render(createElement(StrictMode, null, createElement(PilerPage, { Page })))
+    return () => root.unmount()
+}

package/src/build/globalImports.js

@@ -0,0 +1,18 @@
+import { existsSync, statSync } from 'node:fs'
+import { dirname, resolve, sep } from 'node:path'
+
+/** @param {string} root
+ * @returns {import('vite').Plugin} */
+export const globalImports = root => ({
+    name: 'origami:global-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/build/index.d.ts

@@ -0,0 +1,10 @@
+import type { Plugin } from 'vite'
+import type { OrigamiSite } from '../server/index.js'
+
+export type OrigamiVitePluginsOptions = {
+    /** The site package folder, containing src/pages/, src/global/, and src/site/ glue. */
+    root: string
+    /** Shared with the adapter; the plugins do not scan or own the site tree. */
+    siteTree: Pick<OrigamiSite, 'table' | 'onTableChange'>
+}
+export function origamiVitePlugins(options: OrigamiVitePluginsOptions): Plugin[]

package/src/build/index.js

@@ -0,0 +1,15 @@
+import { transforms } from './transforms.js'
+import { globalImports } from './globalImports.js'
+import { pageList } from './pageList.js'
+import { sharedPackages } from './sharedPackages.js'
+
+/** @param {import('./index.js').OrigamiVitePluginsOptions} options
+ * @returns {import('vite').Plugin[]} */
+export function origamiVitePlugins({ root, siteTree }) {
+    return [
+        globalImports(root),
+        pageList(siteTree),
+        ...transforms({ root }),
+        sharedPackages(),
+    ]
+}

package/src/build/pageList.js

@@ -0,0 +1,37 @@
+const publicId = 'virtual:origami-site'
+const resolvedId = `\0${publicId}`
+
+/** @param {import('@wix/origami-types').SiteRouteTable} table */
+function moduleSource(table) {
+    // itemPath is relative to src/ and already includes the pages/ prefix.
+    const entries = [...table.pages, table.notFound].map(page => {
+        const entry = page.itemPath
+            ? `/src/${page.itemPath}/_generated/index.jsx`
+            : '@wix/origami-site/default-error-404'
+        return `    [${JSON.stringify(page.key)}]: () => import(${JSON.stringify(entry)})`
+    })
+    return `export const pages = {\n${entries.join(',\n')}\n};\nexport const popups = {};\nexport const seoUriByPageId = {};\n`
+}
+
+/** @param {import('./index.js').OrigamiVitePluginsOptions['siteTree']} siteTree
+ * @returns {import('vite').Plugin} */
+export function pageList(siteTree) {
+    /** @type {(() => void) | undefined} */
+    let unsubscribe
+    return {
+        name: 'origami:page-list',
+        resolveId(id) { if (id === publicId) return resolvedId },
+        async load(id) { if (id === resolvedId) return moduleSource(await siteTree.table()) },
+        configureServer(server) {
+            unsubscribe?.()
+            unsubscribe = siteTree.onTableChange(() => {
+                for (const environment of Object.values(server.environments)) {
+                    const module = environment.moduleGraph.getModuleById(resolvedId)
+                    if (module) environment.moduleGraph.invalidateModule(module)
+                }
+                server.ws.send({ type: 'full-reload', path: '*' })
+            })
+        },
+        closeBundle() { unsubscribe?.(); unsubscribe = undefined },
+    }
+}

package/src/build/sharedPackages.js

@@ -0,0 +1,14 @@
+/** @returns {import('vite').Plugin} */
+export function sharedPackages() {
+    return {
+        name: 'origami:shared-packages',
+        config: () => ({ resolve: { dedupe: [
+            'react',
+            'react-dom',
+            '@wix/services-manager-react',
+            '@wix/sdk-react-context',
+            '@preact/signals-react',
+            '@preact/signals-core',
+        ] } }),
+    }
+}

package/src/build/transforms.js

@@ -0,0 +1,27 @@
+import { resolve } from 'node:path'
+import { createTransformPipeline } from '@wix/origami-transforms'
+
+/** @param {{ root: string }} options
+ * @returns {import('vite').Plugin[]} */
+export function transforms({ root }) {
+    const pipeline = createTransformPipeline({ layout: { root: resolve(root) } })
+    return [
+        {
+            name: 'origami:jsx-checks',
+            enforce: 'pre',
+            config(_, { command }) { pipeline.setCommand(command) },
+            transform(code, id, options) {
+                if (pipeline.appliesTo(id, { ssr: options?.ssr })) return pipeline.transformJsx(code, id, { ssr: options?.ssr })
+            },
+        },
+        {
+            name: 'origami:css-transforms',
+            config: () => ({ css: { postcss: { plugins: [pipeline.postcssPlugin] } } }),
+            handleHotUpdate({ file, server }) {
+                if (pipeline.failedStylesheetDependsOn(resolve(file))) {
+                    server.ws.send({ type: 'full-reload', path: '*' })
+                }
+            },
+        },
+    ]
+}

package/src/default-error-404.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from 'react'
+
+declare const DefaultError404: ComponentType
+export default DefaultError404

package/src/default-error-404.jsx

@@ -1,9 +1,4 @@
-import React from 'react'
-import { createRoot } from 'react-dom/client'
 import { DefaultError404 } from '@wix/builder-error-pages'
-import { PilerPage } from '@wix/builder-piler-components'
 import '@wix/builder-error-pages/style.css'
 
-createRoot(document.getElementById('root')).render(
-    React.createElement(React.StrictMode, null, React.createElement(PilerPage, { Page: DefaultError404 }))
-)
+export default DefaultError404

package/src/vite-plugins/index.d.ts

@@ -1,2 +0,0 @@
-import type { Plugin } from 'vite'
-export function origamiVitePlugins(options: { root: string }): Plugin[]

package/src/vite-plugins/index.js

@@ -1 +0,0 @@
-export {}