@ossy/app 1.24.1 → 1.25.0

package/cli/build.task.js

@@ -14,10 +14,11 @@ import getPlatformFiles, {
   API_FILE_PATTERN,
   TASK_FILE_PATTERN,
   RESOURCE_FILE_PATTERN,
+  COMPONENT_FILE_PATTERN,
 } from './get-platform-files.task.js'
 import { manifestPlugin } from './manifest-plugin.js'
 
-export { PAGE_FILE_PATTERN, API_FILE_PATTERN, TASK_FILE_PATTERN, RESOURCE_FILE_PATTERN }
+export { PAGE_FILE_PATTERN, API_FILE_PATTERN, TASK_FILE_PATTERN, RESOURCE_FILE_PATTERN, COMPONENT_FILE_PATTERN }
 
 // Generated entry stubs live under `build/.ossy/entries/`. Putting them
 // inside `build/` means they're cleaned automatically with every build,
@@ -67,7 +68,7 @@ function entryNameFromSource (sourcePath, srcDir, packageName) {
 }
 
 function stubFileNameFor (kind, sourcePath, srcDir, packageName) {
-  const ext = kind === 'page' ? '.entry.jsx' : '.entry.js'
+  const ext = (kind === 'page' || kind === 'component') ? '.entry.jsx' : '.entry.js'
   return entryNameFromSource(sourcePath, srcDir, packageName) + ext
 }
 
@@ -133,10 +134,23 @@ function generateResourceStub ({ stubAbs, sourceAbs }) {
   ].join('\n')
 }
 
+// Components are re-exported as-is — the manifest plugin reads `metadata.id`
+// from the bundled output and records the entry URL. Components don't get
+// route stubs or hydration bootstrapping; they're loaded on-demand at runtime.
+function generateComponentStub ({ stubAbs, sourceAbs }) {
+  const importPath = relImport(stubAbs, sourceAbs)
+  return [
+    '// Generated by @ossy/app — do not edit',
+    `export { default, metadata } from '${importPath}'`,
+    '',
+  ].join('\n')
+}
+
 function stubFor (kind, args) {
   if (kind === 'page') return generatePageStub(args)
   if (kind === 'api') return generateApiStub(args)
   if (kind === 'resource') return generateResourceStub(args)
+  if (kind === 'component') return generateComponentStub(args)
   return generateTaskStub(args)
 }
 
@@ -177,6 +191,7 @@ export async function build (cliArgs = []) {
     ...platformFiles.apis,
     ...platformFiles.tasks,
     ...platformFiles.resources,
+    ...platformFiles.components,
   ]
 
   const entriesByStub = new Map()

package/cli/get-platform-files.task.js

@@ -5,9 +5,10 @@ export const PAGE_FILE_PATTERN = /\.page\.(jsx?|tsx?)$/
 export const API_FILE_PATTERN = /\.api\.(mjs|cjs|js)$/
 export const TASK_FILE_PATTERN = /\.task\.(mjs|cjs|js)$/
 export const RESOURCE_FILE_PATTERN = /\.resource\.(mjs|cjs|js)$/
+export const COMPONENT_FILE_PATTERN = /\.component\.(jsx?|tsx?)$/
 
 /**
- * @typedef {'page' | 'api' | 'task' | 'resource'} EntryKind
+ * @typedef {'page' | 'api' | 'task' | 'resource' | 'component'} EntryKind
  *
  * @typedef {object} PlatformEntry
  * @property {EntryKind} kind          Which bucket this entry lives in.
@@ -16,10 +17,11 @@ export const RESOURCE_FILE_PATTERN = /\.resource\.(mjs|cjs|js)$/
  * @property {string} [packageSrcDir]  Absolute path to the package's `src/` dir, set only for installed-package entries.
  *
  * @typedef {object} PlatformFiles
- * @property {PlatformEntry[]} pages      Discovered `*.page.{jsx,tsx,...}` entries.
- * @property {PlatformEntry[]} apis       Discovered `*.api.{js,mjs,cjs}` entries.
- * @property {PlatformEntry[]} tasks      Discovered `*.task.{js,mjs,cjs}` entries.
- * @property {PlatformEntry[]} resources  Discovered `*.resource.{js,mjs,cjs}` entries.
+ * @property {PlatformEntry[]} pages       Discovered `*.page.{jsx,tsx,...}` entries.
+ * @property {PlatformEntry[]} apis        Discovered `*.api.{js,mjs,cjs}` entries.
+ * @property {PlatformEntry[]} tasks       Discovered `*.task.{js,mjs,cjs}` entries.
+ * @property {PlatformEntry[]} resources   Discovered `*.resource.{js,mjs,cjs}` entries.
+ * @property {PlatformEntry[]} components  Discovered `*.component.{jsx,tsx,...}` entries.
  */
 export function discoverFilesByPattern (srcDir, filePattern) {
   const dir = path.resolve(srcDir)
@@ -42,6 +44,7 @@ function classifyFile (absPath) {
   if (API_FILE_PATTERN.test(base)) return 'api'
   if (TASK_FILE_PATTERN.test(base)) return 'task'
   if (RESOURCE_FILE_PATTERN.test(base)) return 'resource'
+  if (COMPONENT_FILE_PATTERN.test(base)) return 'component'
   return null
 }
 
@@ -58,6 +61,7 @@ export function metadataIdFromFile (absPath, srcDir) {
     .replace(PAGE_FILE_PATTERN, '')
     .replace(API_FILE_PATTERN, '')
     .replace(TASK_FILE_PATTERN, '')
+    .replace(COMPONENT_FILE_PATTERN, '')
   if (noExt === 'home' || noExt === 'index') return 'home'
   return noExt.replace(/\//g, '-')
 }
@@ -109,6 +113,7 @@ export function discoverInstalledPackageEntries (projectRoot) {
       ...discoverFilesByPattern(packageSrcDir, API_FILE_PATTERN),
       ...discoverFilesByPattern(packageSrcDir, TASK_FILE_PATTERN),
       ...discoverFilesByPattern(packageSrcDir, RESOURCE_FILE_PATTERN),
+      ...discoverFilesByPattern(packageSrcDir, COMPONENT_FILE_PATTERN),
     ]
     for (const sourcePath of files) {
       const stat = fs.statSync(sourcePath)
@@ -152,14 +157,15 @@ export function discoverInstalledPackageEntries (projectRoot) {
  * @returns {Promise<PlatformFiles>}
  */
 export default async function getPlatformFiles (srcDir) {
-  const out = { pages: [], apis: [], tasks: [], resources: [] }
-  const bucketByKind = { page: 'pages', api: 'apis', task: 'tasks', resource: 'resources' }
+  const out = { pages: [], apis: [], tasks: [], resources: [], components: [] }
+  const bucketByKind = { page: 'pages', api: 'apis', task: 'tasks', resource: 'resources', component: 'components' }
 
   const localFiles = [
     ...discoverFilesByPattern(srcDir, PAGE_FILE_PATTERN),
     ...discoverFilesByPattern(srcDir, API_FILE_PATTERN),
     ...discoverFilesByPattern(srcDir, TASK_FILE_PATTERN),
     ...discoverFilesByPattern(srcDir, RESOURCE_FILE_PATTERN),
+    ...discoverFilesByPattern(srcDir, COMPONENT_FILE_PATTERN),
   ]
   for (const sourcePath of localFiles) {
     const stat = fs.statSync(sourcePath)

package/cli/manifest-plugin.js

@@ -38,8 +38,13 @@ import { metadataIdFromFile, defaultPageRoute } from './get-platform-files.task.
  * @property {string} entry               URL the platform serves the bundle from
  *                                        (e.g. `/static/home.page-7f2a.js`).
  *
+ * @typedef {object} ComponentManifestEntry
+ * @property {string} id     Unique component id (from `metadata.id`).
+ * @property {string} entry  URL the platform serves the component bundle from.
+ *
  * @typedef {object} Manifest
  * @property {ManifestEntry[]} entries          Flat, ordered list of every routable thing.
+ * @property {ComponentManifestEntry[]} components  Discovered `*.component.*` entries, keyed by id.
  * @property {object[]} resourceTemplates       Each `*.resource.js` file's default-exported template object.
  * @property {object} config                    Inlined `src/config.js` default export.
  */
@@ -86,7 +91,9 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
       const entries = []
       /** @type {object[]} */
       const resourceTemplates = []
-      const seenIds = { page: new Set(), api: new Set(), task: new Set() }
+      /** @type {import('./get-platform-files.task.js').ComponentManifestEntry[]} */
+      const components = []
+      const seenIds = { page: new Set(), api: new Set(), task: new Set(), component: new Set() }
       const seenResourceIds = new Set()
 
       for (const fileName of Object.keys(bundle)) {
@@ -147,6 +154,11 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
         }
         seenIds[entryInfo.kind].add(id)
 
+        if (entryInfo.kind === 'component') {
+          components.push({ id, entry: url })
+          continue
+        }
+
         if (entryInfo.kind === 'page') {
           const pagePath = rawMeta.path !== undefined ? rawMeta.path : defaultPageRoute(id)
           entries.push({ type: 'page', id, path: pagePath, title: rawMeta.title, entry: url })
@@ -169,7 +181,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
       }
 
       /** @type {Manifest} */
-      const manifest = { entries, resourceTemplates, config: configValue || {} }
+      const manifest = { entries, components, resourceTemplates, config: configValue || {} }
       fs.mkdirSync(path.dirname(manifestPath), { recursive: true })
       fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8')
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -37,15 +37,15 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/connected-components": "^1.24.1",
-    "@ossy/design-system": "^1.24.1",
+    "@ossy/connected-components": "^1.25.0",
+    "@ossy/design-system": "^1.25.0",
     "@ossy/pages": "^1.23.0",
-    "@ossy/platform": "^1.23.1",
-    "@ossy/router": "^1.24.1",
-    "@ossy/router-react": "^1.24.1",
-    "@ossy/sdk": "^1.24.1",
-    "@ossy/sdk-react": "^1.24.1",
-    "@ossy/themes": "^1.24.1",
+    "@ossy/platform": "^1.24.0",
+    "@ossy/router": "^1.25.0",
+    "@ossy/router-react": "^1.25.0",
+    "@ossy/sdk": "^1.25.0",
+    "@ossy/sdk-react": "^1.25.0",
+    "@ossy/themes": "^1.25.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -79,5 +79,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "c4dfd4a2cc4a6977ce00dc223c91dbaecc3348ba"
+  "gitHead": "9b116b6a4fadd570c1e6c0c6d9a4867448f7410c"
 }

package/runtime/page-runtime.js

@@ -1,6 +1,31 @@
 import { createElement } from 'react'
 import { App } from '@ossy/connected-components'
 
+/**
+ * Dynamically imports each component bundle listed in `entries` and returns a
+ * `Record<id, ComponentType>` suitable for passing to `App` as `components`.
+ *
+ * Entries that fail to import (network error, missing export, etc.) are silently
+ * skipped so a broken component never prevents the page from rendering.
+ *
+ * @param {Array<{ id: string, entry: string }>} entries
+ * @returns {Promise<Record<string, import('react').ComponentType>>}
+ */
+export async function loadComponents (entries = []) {
+  const map = {}
+  await Promise.all(
+    entries.map(async ({ id, entry }) => {
+      try {
+        const mod = await import(entry)
+        if (mod && mod.default) map[id] = mod.default
+      } catch {
+        // silently skip broken component bundles
+      }
+    }),
+  )
+  return map
+}
+
 function buildTree ({ Component, metadata, props }) {
   const lang = props.htmlLang || props.defaultLanguage || 'en'
   return createElement(
@@ -50,7 +75,9 @@ export function createPageEntry (pageModule, options = {}) {
       import('node:stream'),
     ])
 
-    const tree = buildTree({ Component, metadata, props })
+    const { componentEntries = [], ...pageProps } = props
+    const components = await loadComponents(componentEntries)
+    const tree = buildTree({ Component, metadata, props: { ...pageProps, components } })
     const bootstrapUrl = toBootstrapUrl(entryUrl)
     const bootstrapModules = bootstrapUrl ? [bootstrapUrl] : []
     const bootstrapScriptContent =
@@ -82,8 +109,12 @@ export function createPageEntry (pageModule, options = {}) {
     if (typeof document === 'undefined' || typeof window === 'undefined') return
     hydrated = true
     const props = window.__OSSY__ || {}
-    import('react-dom/client').then(({ hydrateRoot }) => {
-      hydrateRoot(document, buildTree({ Component, metadata, props }))
+    const { componentEntries = [], ...pageProps } = props
+    Promise.all([
+      import('react-dom/client'),
+      loadComponents(componentEntries),
+    ]).then(([{ hydrateRoot }, components]) => {
+      hydrateRoot(document, buildTree({ Component, metadata, props: { ...pageProps, components } }))
     })
   }