@ossy/app 0.15.12 → 0.15.13

package/README.md

@@ -25,6 +25,12 @@ For a single-file setup, use `src/pages.jsx` (legacy).
 
 Split pages are merged into **`build/.ossy/pages.generated.jsx`** (next to other build output) during `dev` / `build`.
 
+List **`modules: ['@your/npm-package', ...]`** in `src/config.js` to pull in every **`*.page.js`**, **`*.page.jsx`**, **`*.page.ts`**, and **`*.page.tsx`** file under each package’s **`src/`** tree (any subfolder). Deprecated: **`pagesModules`** / **`pagesModule`** — still read for now, with a deprecation warning.
+
+Optional **`src/page-shell.jsx`** (or `.js`): default export your site layout component. **`usePageShell()`** from `@ossy/connected-components` wraps module pages in that shell so packages do not import site paths.
+
+**Note:** **`@ossy/connected-components`** is slated for retirement; its responsibilities (app shell, routing wrapper, **`usePageShell`**, etc.) should move into **`@ossy/app`** or smaller focused packages over time. See that package’s README.
+
 Add `src/config.js` for workspace and theme:
 
 ```js

package/cli/build.js

@@ -37,6 +37,17 @@ export function ensureOssyGeneratedDir (buildPath) {
   return dir
 }
 
+export function resolvePageShellSource (cwd, scriptDir) {
+  const candidates = [
+    path.resolve(cwd, 'src/page-shell.jsx'),
+    path.resolve(cwd, 'src/page-shell.js'),
+  ]
+  for (const p of candidates) {
+    if (fs.existsSync(p)) return p
+  }
+  return path.resolve(scriptDir, 'page-shell-default.jsx')
+}
+
 function relToGeneratedImport (generatedAbs, targetAbs) {
   return path.relative(path.dirname(generatedAbs), targetAbs).replace(/\\/g, '/')
 }
@@ -280,6 +291,27 @@ export function filePathToRoute(filePath, srcDir) {
   return { id, path: routePath }
 }
 
+/** Route base for `filePathToRoute`: site `--pages` dir, or a package’s `src` dir (first `src` segment in the path). */
+export function pageFilesRouteBaseDir (filePath, sitePagesDir) {
+  const fp = path.resolve(filePath)
+  const siteRoot = path.resolve(sitePagesDir)
+  const sitePrefix = siteRoot + path.sep
+  if (fp === siteRoot || fp.startsWith(sitePrefix)) {
+    return siteRoot
+  }
+  const parts = fp.split(path.sep)
+  const srcIdx = parts.indexOf('src')
+  if (srcIdx !== -1) {
+    return parts.slice(0, srcIdx + 1).join(path.sep)
+  }
+  return siteRoot
+}
+
+/** Derive `{ id, path }` for build overview when mixing site pages and installable `modules` package paths. */
+export function routeForPageFileOverview (filePath, sitePagesDir) {
+  return filePathToRoute(filePath, pageFilesRouteBaseDir(filePath, sitePagesDir))
+}
+
 export function generatePagesModule (pageFiles, cwd, srcDir, generatedPath) {
   const resolvedSrc = path.resolve(cwd, srcDir)
   const lines = [
@@ -300,7 +332,8 @@ export function generatePagesModule (pageFiles, cwd, srcDir, generatedPath) {
     '',
     'export default [',
     ...pageFiles.map((f, i) => {
-      const { id, path: defaultPath } = filePathToRoute(f, resolvedSrc)
+      const base = pageFilesRouteBaseDir(f, resolvedSrc)
+      const { id, path: defaultPath } = filePathToRoute(f, base)
       const pathStr = JSON.stringify(defaultPath)
       return `  toPage(_page${i}, { id: '${id}', path: ${pathStr} }),`
     }),
@@ -309,6 +342,21 @@ export function generatePagesModule (pageFiles, cwd, srcDir, generatedPath) {
   return lines.join('\n')
 }
 
+function installableModulePackagesFromCfgObject (cfg, warn) {
+  if (Array.isArray(cfg.modules) && cfg.modules.length) {
+    return cfg.modules
+  }
+  if (Array.isArray(cfg.pagesModules) && cfg.pagesModules.length) {
+    warn?.('[@ossy/app][build] `pagesModules` is deprecated; use `modules` in src/config.js')
+    return cfg.pagesModules
+  }
+  if (typeof cfg.pagesModule === 'string') {
+    warn?.('[@ossy/app][build] `pagesModule` is deprecated; use `modules: [ ... ]` in src/config.js')
+    return [cfg.pagesModule]
+  }
+  return []
+}
+
 export async function discoverModulePageFiles({ cwd, configPath }) {
   if (!configPath || !fs.existsSync(configPath)) return []
   try {
@@ -316,54 +364,59 @@ export async function discoverModulePageFiles({ cwd, configPath }) {
     // importable (configs often import theme/template modules that may not be
     // resolvable in the build-time node context).
     const cfgSource = fs.readFileSync(configPath, 'utf8')
-    const modules = []
+    const moduleNames = []
+    let warnedLegacy = false
+    const warnOnce = (msg) => {
+      if (!warnedLegacy) {
+        console.warn(msg)
+        warnedLegacy = true
+      }
+    }
 
-    // pagesModules: ['a', "b"]
-    const arrMatch = cfgSource.match(/pagesModules\s*:\s*\[([^\]]*)\]/m)
-    if (arrMatch?.[1]) {
-      const body = arrMatch[1]
+    const modulesArr = cfgSource.match(/\bmodules\s*:\s*\[([^\]]*)\]/m)
+    const pagesModulesArr = cfgSource.match(/\bpagesModules\s*:\s*\[([^\]]*)\]/m)
+    const listBody = modulesArr?.[1] ?? pagesModulesArr?.[1]
+    if (listBody !== undefined && listBody !== null) {
+      if (pagesModulesArr && !modulesArr) {
+        warnOnce('[@ossy/app][build] `pagesModules` is deprecated; use `modules` in src/config.js')
+      }
       const re = /['"]([^'"]+)['"]/g
       let m
-      while ((m = re.exec(body)) !== null) modules.push(m[1])
+      while ((m = re.exec(listBody)) !== null) moduleNames.push(m[1])
     }
 
-    // pagesModule: 'a'
-    if (modules.length === 0) {
-      const singleMatch = cfgSource.match(/pagesModule\s*:\s*['"]([^'"]+)['"]/m)
-      if (singleMatch?.[1]) modules.push(singleMatch[1])
+    if (moduleNames.length === 0) {
+      const singlePagesModule = cfgSource.match(/\bpagesModule\s*:\s*['"]([^'"]+)['"]/m)
+      if (singlePagesModule?.[1]) {
+        warnOnce('[@ossy/app][build] `pagesModule` is deprecated; use `modules: [ ... ]` in src/config.js')
+        moduleNames.push(singlePagesModule[1])
+      }
     }
 
-    if (modules.length) {
+    const loadFromNames = (names) => {
       const req = createRequire(path.resolve(cwd, 'package.json'))
       const files = []
-      for (const name of modules) {
+      for (const name of names) {
         const pkgJsonPath = req.resolve(`${name}/package.json`)
         const pkgDir = path.dirname(pkgJsonPath)
-        const modulePagesDir = path.join(pkgDir, 'src', 'pages')
-        files.push(...discoverPageFiles(modulePagesDir))
+        const moduleSrcDir = path.join(pkgDir, 'src')
+        files.push(...discoverPageFiles(moduleSrcDir))
       }
       return files
     }
 
+    if (moduleNames.length) {
+      return loadFromNames(moduleNames)
+    }
+
     const mod = await import(url.pathToFileURL(configPath))
     const cfg = mod?.default ?? mod ?? {}
-    const modules2 = Array.isArray(cfg.pagesModules)
-      ? cfg.pagesModules
-      : (typeof cfg.pagesModule === 'string' ? [cfg.pagesModule] : [])
+    const modules2 = installableModulePackagesFromCfgObject(cfg, (msg) => console.warn(msg))
 
     if (!modules2.length) return []
-
-    const req = createRequire(path.resolve(cwd, 'package.json'))
-    const files = []
-    for (const name of modules2) {
-      const pkgJsonPath = req.resolve(`${name}/package.json`)
-      const pkgDir = path.dirname(pkgJsonPath)
-      const modulePagesDir = path.join(pkgDir, 'src', 'pages')
-      files.push(...discoverPageFiles(modulePagesDir))
-    }
-    return files
+    return loadFromNames(modules2)
   } catch (e) {
-    console.warn('[@ossy/app][build] pagesModules config could not be loaded; continuing without modules')
+    console.warn('[@ossy/app][build] `modules` config could not be loaded; continuing without installable module pages')
     return []
   }
 }
@@ -421,9 +474,10 @@ export function printBuildOverview({
   console.log(`  \x1b[36mAPI:\x1b[0m ${rel(apiSourcePath)}`)
   console.log('  ' + '─'.repeat(50))
 
-  const pages = isPageFiles && pageFiles?.length
-    ? pageFiles.map((f) => filePathToRoute(f, srcDir))
-    : parsePagesFromSource(pagesSourcePath)
+  const pages =
+    isPageFiles && pageFiles?.length
+      ? pageFiles.map((f) => routeForPageFileOverview(f, srcDir))
+      : parsePagesFromSource(pagesSourcePath)
   if (pages.length > 0) {
     console.log('  \x1b[36mRoutes:\x1b[0m')
     const maxId = Math.max(6, ...pages.map((p) => String(p.id).length))
@@ -635,7 +689,7 @@ export const build = async (cliArgs) => {
       apiOverviewFiles,
       configPath,
       isPageFiles,
-      pageFiles: isPageFiles ? pageFiles : [],
+      pageFiles: isPageFiles ? [...pageFiles, ...modulePageFiles] : [],
     });
 
     if (!fs.existsSync(apiSourcePath)) {
@@ -650,6 +704,8 @@ export const build = async (cliArgs) => {
       ? configPath
       : path.resolve(scriptDir, 'default-config.js')
 
+    const pageShellSourcePath = resolvePageShellSource(cwd, scriptDir)
+
     const inputOptions = {
         input: inputFiles,
         plugins: [
@@ -680,6 +736,11 @@ export const build = async (cliArgs) => {
             delimiters: ['%%', '%%'],
             '@ossy/config/source-file': configSourcePath,
           }),
+          replace({
+            preventAssignment: true,
+            delimiters: ['%%', '%%'],
+            '@ossy/page-shell/source-file': pageShellSourcePath,
+          }),
           replace({
             preventAssignment: true,
             'process.env.NODE_ENV': JSON.stringify('production')

package/cli/default-app.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { App } from '@ossy/connected-components'
 import pages from '%%@ossy/pages/source-file%%'
+import pageShell from '%%@ossy/page-shell/source-file%%'
 
 /**
  * App entry. Uses App from @ossy/connected-components with pages from src/pages.jsx.
  */
-export default function DefaultApp(config) {
-  return React.createElement(App, { ...config, pages })
+export default function DefaultApp (config) {
+  return React.createElement(App, { ...config, pages, pageShell })
 }

package/cli/dev.js

@@ -12,6 +12,7 @@ import {
   ossyGeneratedDir,
   OSSY_GEN_PAGES_BASENAME,
   OSSY_GEN_API_BASENAME,
+  resolvePageShellSource,
 } from './build.js';
 import { watch } from 'rollup';
 import babel from '@rollup/plugin-babel';
@@ -94,7 +95,7 @@ export const dev = async (cliArgs) => {
       apiOverviewFiles,
       configPath,
       isPageFiles,
-      pageFiles: isPageFiles ? pageFiles : [],
+      pageFiles: isPageFiles ? [...pageFiles, ...modulePageFiles] : [],
     });
 
     if (!fs.existsSync(apiSourcePath)) {
@@ -109,6 +110,8 @@ export const dev = async (cliArgs) => {
       ? configPath
       : path.resolve(scriptDir, 'default-config.js')
 
+    const pageShellSourcePath = resolvePageShellSource(cwd, scriptDir)
+
     const inputOptions = {
         input: inputFiles,
         plugins: [
@@ -139,6 +142,11 @@ export const dev = async (cliArgs) => {
             delimiters: ['%%', '%%'],
             '@ossy/config/source-file': configSourcePath,
           }),
+          replace({
+            preventAssignment: true,
+            delimiters: ['%%', '%%'],
+            '@ossy/page-shell/source-file': pageShellSourcePath,
+          }),
           replace({
             preventAssignment: true,
             'process.env.NODE_ENV': JSON.stringify('development')

package/cli/page-shell-default.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+/**
+ * Used when the site has no `src/page-shell.jsx`.
+ * Module pages still call {@link usePageShell} but get a passthrough.
+ */
+export default function PageShellDefault ({ children }) {
+  return children
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "0.15.12",
+  "version": "0.15.13",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -66,5 +66,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "1da35d94f324f917d5ea790f838ce8e50214730e"
+  "gitHead": "280ce1f62d7daf721909ac5eabe4181991e00456"
 }