@ossy/app 0.9.0 → 0.10.0

package/README.md

@@ -1,6 +1,68 @@
 # `@ossy/app`
 
-Server-side rendering runtime for Ossy apps.
+Server-side rendering runtime and build tooling for Ossy apps. Use with `@ossy/cli` for the convention-based setup (`npx @ossy/cli dev`).
+
+For custom setups (Next.js, Vite, etc.), use `@ossy/connected-components` directly — see the [root README](../README.md#when-to-use-what).
+
+## Setup
+
+Create `*.page.jsx` files in `src/`:
+
+```jsx
+// src/home.page.jsx
+import React from 'react'
+export default () => <h1>Welcome</h1>
+```
+
+Each file becomes a route: `home.page.jsx` → `/`, `about.page.jsx` → `/about`. Optionally export `metadata` for custom id/path or multi-language:
+
+```js
+export const metadata = { path: { en: '/about', sv: '/om' } }
+export default () => <h1>About</h1>
+```
+
+For a single-file setup, use `src/pages.jsx` (legacy).
+
+Add `src/config.js` for workspace and theme:
+
+```js
+import { CloudLight } from '@ossy/themes'
+
+export default {
+  workspaceId: 'your-workspace-id',
+  theme: CloudLight, // or 'light' | 'dark' | CloudDark
+  apiUrl: 'https://api.ossy.se/api/v0', // optional
+}
+```
+
+Config is loaded at build time and merged with request-time settings (e.g. user theme preference from cookies). The server passes `workspaceId`, `apiUrl`, and `theme` to the App component.
+
+Run `npx @ossy/cli dev` or `npx @ossy/cli build`.
+
+## API routes
+
+Create `src/api.js` to define custom API endpoints. Each route must have `id`, `path`, and a `handle(req, res)` function:
+
+```js
+export default [
+  {
+    id: 'health',
+    path: '/api/health',
+    handle(req, res) {
+      res.json({ status: 'ok' })
+    },
+  },
+  {
+    id: 'users',
+    path: '/api/users',
+    handle(req, res) {
+      res.json({ users: [] })
+    },
+  },
+]
+```
+
+API routes are matched before the app is rendered. The router supports dynamic segments (e.g. `path: '/api/users/:id'`); extract params from `req.originalUrl` if needed. Use paths that don't conflict with `/@ossy/*` (reserved for the internal proxy).
 
 ## Port configuration
 

package/cli/build.js

@@ -16,12 +16,143 @@ import remove from 'rollup-plugin-delete';
 import arg from 'arg'
 // import inject from '@rollup/plugin-inject'
 
+const PAGE_FILE_PATTERN = /\.page\.(jsx?|tsx?)$/
+
+export function discoverPageFiles(srcDir) {
+  const dir = path.resolve(srcDir)
+  if (!fs.existsSync(dir) || !fs.statSync(dir).isDirectory()) {
+    return []
+  }
+  const files = []
+  const walk = (d) => {
+    const entries = fs.readdirSync(d, { withFileTypes: true })
+    for (const e of entries) {
+      const full = path.join(d, e.name)
+      if (e.isDirectory()) walk(full)
+      else if (PAGE_FILE_PATTERN.test(e.name)) files.push(full)
+    }
+  }
+  walk(dir)
+  return files.sort()
+}
+
+export function filePathToRoute(filePath, srcDir) {
+  const rel = path.relative(srcDir, filePath).replace(/\\/g, '/')
+  let pathPart = rel.replace(PAGE_FILE_PATTERN, '').replace(/\/index$/, '').replace(/\/home$/, '') || 'home'
+  if (pathPart === 'index' || pathPart === 'home') pathPart = 'home'
+  const id = pathPart === 'home' ? 'home' : pathPart.replace(/\//g, '-')
+  const routePath = pathPart === 'home' ? '/' : '/' + pathPart
+  return { id, path: routePath }
+}
+
+export function generatePagesModule(pageFiles, cwd, srcDir = 'src') {
+  const resolvedSrc = path.resolve(cwd, srcDir)
+  const lines = [
+    "import React from 'react'",
+    ...pageFiles.map((f, i) => {
+      const rel = path.relative(cwd, f).replace(/\\/g, '/')
+      return `import * as _page${i} from './${rel}'`
+    }),
+    '',
+    'function toPage(mod, derived) {',
+    '  const meta = mod?.metadata || {}',
+    "  const def = mod?.default",
+    "  if (typeof def === 'function') {",
+    "    return { ...derived, ...meta, element: React.createElement(def) }",
+    '  }',
+    "  return { ...derived, ...meta, ...(def || {}) }",
+    '}',
+    '',
+    'export default [',
+    ...pageFiles.map((f, i) => {
+      const { id, path: defaultPath } = filePathToRoute(f, resolvedSrc)
+      const pathStr = typeof defaultPath === 'string' ? defaultPath : JSON.stringify(defaultPath)
+      return `  toPage(_page${i}, { id: '${id}', path: ${pathStr} }),`
+    }),
+    ']',
+  ]
+  return lines.join('\n')
+}
+
+export function parsePagesFromSource(filePath) {
+  try {
+    const content = fs.readFileSync(filePath, 'utf8')
+    const items = []
+    // Match { id: 'x', path: '/y' } or { id: "x", path: "/y" }
+    const idPathPattern = /\{\s*id\s*:\s*['"]([^'"]*)['"]\s*,\s*path\s*:\s*['"]([^'"]*)['"]/g
+    // Match { path: '/y', element: ... } (path-first)
+    const pathElementPattern = /\{\s*path\s*:\s*['"]([^'"]*)['"]\s*,\s*element\s*:/g
+    // Match { path: { en: '/x', sv: '/y' }, ... }
+    const pathObjPattern = /\{\s*path\s*:\s*\{\s*([^}]+)\}/g
+    let m
+    while ((m = idPathPattern.exec(content)) !== null) {
+      items.push({ id: m[1], path: m[2] })
+    }
+    if (items.length === 0) {
+      while ((m = pathElementPattern.exec(content)) !== null) {
+        const p = m[1]
+        const id = p === '/' ? 'home' : p.replace(/^\//, '').replace(/\/$/, '').replace(/\//g, '-') || 'page'
+        items.push({ id, path: p })
+      }
+    }
+    if (items.length === 0) {
+      while ((m = pathObjPattern.exec(content)) !== null) {
+        const pathStr = m[1].replace(/\s/g, '').replace(/:/g, ': ')
+        items.push({ id: 'page', path: pathStr })
+      }
+    }
+    return items
+  } catch {
+    return []
+  }
+}
+
+export function printBuildOverview({ pagesSourcePath, apiSourcePath, configPath, isPageFiles, pageFiles }) {
+  const rel = (p) => path.relative(process.cwd(), p)
+  const cwd = process.cwd()
+  const srcDir = path.resolve(cwd, 'src')
+  console.log('\n  \x1b[1mBuild overview\x1b[0m')
+  console.log('  ' + '─'.repeat(50))
+  console.log(`  \x1b[36mPages:\x1b[0m ${rel(pagesSourcePath)}`)
+  if (fs.existsSync(configPath)) {
+    console.log(`  \x1b[36mConfig:\x1b[0m ${rel(configPath)}`)
+  }
+  console.log('  ' + '─'.repeat(50))
+
+  const pages = isPageFiles && pageFiles?.length
+    ? pageFiles.map((f) => filePathToRoute(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))
+    const maxPath = Math.max(6, ...pages.map((p) => String(p.path).length))
+    pages.forEach((p) => {
+      const id = String(p.id).padEnd(maxId)
+      const pathStr = String(p.path).padEnd(maxPath)
+      console.log(`    ${id}  ${pathStr}`)
+    })
+  } else {
+    console.log('  \x1b[33mRoutes:\x1b[0m (could not parse or empty)')
+  }
+
+  if (fs.existsSync(apiSourcePath)) {
+    const apiRoutes = parsePagesFromSource(apiSourcePath)
+    if (apiRoutes.length > 0) {
+      console.log('  \x1b[36mAPI routes:\x1b[0m')
+      apiRoutes.forEach((r) => {
+        console.log(`    ${r.id}  ${r.path}`)
+      })
+    }
+  }
+  console.log('  ' + '─'.repeat(50) + '\n')
+}
+
 export const build = async (cliArgs) => {
     console.log('[@ossy/app][build] Starting...')
 
     const options = arg({
-        '--source': String,
-        '--s': '--source',
+        '--pages': String,
+        '--p': '--pages',
 
         '--destination': String,
         '--d': '--destination',
@@ -31,22 +162,40 @@ export const build = async (cliArgs) => {
       }, { argv: cliArgs })
 
 
-    const appSourcePath = path.resolve(options['--source'] || 'src/App.jsx');
+    const scriptDir = path.dirname(url.fileURLToPath(import.meta.url))
+    const cwd = process.cwd()
+    const pagesOpt = options['--pages'] || 'src'
+    const srcDir = path.resolve(pagesOpt)
+    const pageFiles = discoverPageFiles(srcDir)
+    const pagesJsxPath = path.resolve('src/pages.jsx')
+    const hasPagesJsx = fs.existsSync(pagesJsxPath)
+
+    let effectivePagesSource
+    let isPageFiles = false
+    if (pageFiles.length > 0) {
+      const generatedPath = path.join(cwd, '.ossy-pages.generated.jsx')
+      fs.writeFileSync(generatedPath, generatePagesModule(pageFiles, cwd, pagesOpt))
+      effectivePagesSource = generatedPath
+      isPageFiles = true
+    } else if (hasPagesJsx) {
+      effectivePagesSource = pagesJsxPath
+    } else {
+      throw new Error(`[@ossy/app][build] No pages found. Create *.page.jsx files in src/, or src/pages.jsx`);
+    }
+
     let apiSourcePath = path.resolve(options['--api-source'] || 'src/api.js');
     let middlewareSourcePath = path.resolve(options['--middleware-source'] || 'src/middleware.js');
     const configPath = path.resolve(options['--config'] || 'src/config.js');
     const buildPath = path.resolve(options['--destination'] || 'build');
     const publicDir = path.resolve('public')
 
-    const scriptDir = path.dirname(url.fileURLToPath(import.meta.url))
     const inputClient = path.resolve(scriptDir, 'client.js')
     const inputServer = path.resolve(scriptDir, 'server.js')
 
     const inputFiles = [inputClient, inputServer]
 
-    if (!fs.existsSync(appSourcePath)) {
-        throw new Error(`[@ossy/app][build] Source path does not exist: ${appSourcePath}`);
-    }
+    const appEntryPath = path.resolve(scriptDir, 'default-app.jsx')
+    printBuildOverview({ pagesSourcePath: effectivePagesSource, apiSourcePath, configPath, isPageFiles, pageFiles: isPageFiles ? pageFiles : [] });
 
     if (!fs.existsSync(apiSourcePath)) {
       apiSourcePath = path.resolve(scriptDir, 'api.js')
@@ -56,9 +205,9 @@ export const build = async (cliArgs) => {
       middlewareSourcePath = path.resolve(scriptDir, 'middleware.js')
     }
 
-    if (fs.existsSync(configPath)) {
-        inputFiles.push(configPath)
-    }
+    const configSourcePath = fs.existsSync(configPath)
+      ? configPath
+      : path.resolve(scriptDir, 'default-config.js')
 
     const inputOptions = {
         input: inputFiles,
@@ -68,7 +217,12 @@ export const build = async (cliArgs) => {
           replace({
             preventAssignment: true,
             delimiters: ['%%', '%%'],
-            '@ossy/app/source-file': appSourcePath,
+            '@ossy/app/source-file': appEntryPath,
+          }),
+          replace({
+            preventAssignment: true,
+            delimiters: ['%%', '%%'],
+            '@ossy/pages/source-file': effectivePagesSource,
           }),
           replace({
             preventAssignment: true,
@@ -80,6 +234,11 @@ export const build = async (cliArgs) => {
             delimiters: ['%%', '%%'],
             '@ossy/middleware/source-file': middlewareSourcePath,
           }),
+          replace({
+            preventAssignment: true,
+            delimiters: ['%%', '%%'],
+            '@ossy/config/source-file': configSourcePath,
+          }),
           replace({
             preventAssignment: true,
             'process.env.NODE_ENV': JSON.stringify('production')

package/cli/default-app.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { App } from '@ossy/connected-components'
+import pages from '%%@ossy/pages/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 })
+}

package/cli/default-config.js

@@ -0,0 +1,5 @@
+/**
+ * Default config when src/config.js does not exist.
+ * Provides empty defaults so the server can always merge config.
+ */
+export default {}

package/cli/dev.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import url from 'url';
 import fs from 'fs';
+import { printBuildOverview, discoverPageFiles, generatePagesModule } from './build.js';
 import { watch } from 'rollup';
 import babel from '@rollup/plugin-babel';
 import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
@@ -21,8 +22,8 @@ export const dev = async (cliArgs) => {
     console.log('[@ossy/app][dev] Starting...')
 
     const options = arg({
-        '--source': String,
-        '--s': '--source',
+        '--pages': String,
+        '--p': '--pages',
 
         '--destination': String,
         '--d': '--destination',
@@ -32,22 +33,39 @@ export const dev = async (cliArgs) => {
       }, { argv: cliArgs, permissive: true })
 
 
-    const appSourcePath = path.resolve(options['--source'] || 'src/App.jsx');
+    const scriptDir = path.dirname(url.fileURLToPath(import.meta.url))
+    const cwd = process.cwd()
+    const pagesOpt = options['--pages'] || 'src'
+    const srcDir = path.resolve(pagesOpt)
+    const pageFiles = discoverPageFiles(srcDir)
+    const pagesJsxPath = path.resolve('src/pages.jsx')
+    const hasPagesJsx = fs.existsSync(pagesJsxPath)
+
+    let effectivePagesSource
+    let isPageFiles = false
+    if (pageFiles.length > 0) {
+      const generatedPath = path.join(cwd, '.ossy-pages.generated.jsx')
+      fs.writeFileSync(generatedPath, generatePagesModule(pageFiles, cwd, pagesOpt))
+      effectivePagesSource = generatedPath
+      isPageFiles = true
+    } else if (hasPagesJsx) {
+      effectivePagesSource = pagesJsxPath
+    } else {
+      throw new Error(`[@ossy/app][dev] No pages found. Create *.page.jsx files in src/, or src/pages.jsx`);
+    }
+
     let apiSourcePath = path.resolve(options['--api-source'] || 'src/api.js');
     let middlewareSourcePath = path.resolve(options['--middleware-source'] || 'src/middleware.js');
     const configPath = path.resolve(options['--config'] || 'src/config.js');
     const buildPath = path.resolve(options['--destination'] || 'build');
     const publicDir = path.resolve('public')
 
-    const scriptDir = path.dirname(url.fileURLToPath(import.meta.url))
     const inputClient = path.resolve(scriptDir, 'client.js')
     const inputServer = path.resolve(scriptDir, 'server.js')
 
     const inputFiles = [inputClient, inputServer]
 
-    if (!fs.existsSync(appSourcePath)) {
-        throw new Error(`[@ossy/app][build] Source path does not exist: ${appSourcePath}`);
-    }
+    printBuildOverview({ pagesSourcePath: effectivePagesSource, apiSourcePath, configPath, isPageFiles, pageFiles: isPageFiles ? pageFiles : [] });
 
     if (!fs.existsSync(apiSourcePath)) {
       apiSourcePath = path.resolve(scriptDir, 'api.js')
@@ -57,9 +75,9 @@ export const dev = async (cliArgs) => {
       middlewareSourcePath = path.resolve(scriptDir, 'middleware.js')
     }
 
-    if (fs.existsSync(configPath)) {
-        inputFiles.push(configPath)
-    }
+    const configSourcePath = fs.existsSync(configPath)
+      ? configPath
+      : path.resolve(scriptDir, 'default-config.js')
 
     const inputOptions = {
         input: inputFiles,
@@ -69,7 +87,12 @@ export const dev = async (cliArgs) => {
           replace({
             preventAssignment: true,
             delimiters: ['%%', '%%'],
-            '@ossy/app/source-file': appSourcePath,
+            '@ossy/app/source-file': path.resolve(scriptDir, 'default-app.jsx'),
+          }),
+          replace({
+            preventAssignment: true,
+            delimiters: ['%%', '%%'],
+            '@ossy/pages/source-file': effectivePagesSource,
           }),
           replace({
             preventAssignment: true,
@@ -81,6 +104,11 @@ export const dev = async (cliArgs) => {
             delimiters: ['%%', '%%'],
             '@ossy/middleware/source-file': middlewareSourcePath,
           }),
+          replace({
+            preventAssignment: true,
+            delimiters: ['%%', '%%'],
+            '@ossy/config/source-file': configSourcePath,
+          }),
           replace({
             preventAssignment: true,
             'process.env.NODE_ENV': JSON.stringify('development')
@@ -173,4 +201,16 @@ export const dev = async (cliArgs) => {
         restartServer()
       }
     })
+
+    if (isPageFiles) {
+      fs.watch(srcDir, { recursive: true }, (eventType, filename) => {
+        if (filename && /\.page\.(jsx?|tsx?)$/.test(filename)) {
+          const files = discoverPageFiles(srcDir)
+          if (files.length > 0) {
+            const generatedPath = path.join(cwd, '.ossy-pages.generated.jsx')
+            fs.writeFileSync(generatedPath, generatePagesModule(files, cwd, pagesOpt))
+          }
+        }
+      })
+    }
 };

package/cli/proxy-internal.js

@@ -37,7 +37,7 @@ export function ProxyInternal() {
         }
     
         if (req.originalUrl.startsWith('/@ossy/users/me/app-settings') && req.method === 'GET') {
-            LogService.Info({ message: `[UsersService][HandleUserAppSettings] METHOD ${req.method}` })
+            console.log(`[@ossy/app][proxy] GET /@ossy/users/me/app-settings`)
             const userSettings = JSON.parse(req.signedCookies?.['x-ossy-user-settings'] || '{}')
             res.status(200)
             res.json(userSettings)

package/cli/server.js

@@ -11,6 +11,9 @@ import cookieParser from 'cookie-parser'
 import App from '%%@ossy/app/source-file%%'
 import ApiRoutes from '%%@ossy/api/source-file%%'
 import Middleware from '%%@ossy/middleware/source-file%%'
+import configModule from '%%@ossy/config/source-file%%'
+
+const buildTimeConfig = configModule?.default ?? configModule ?? {}
 
 const app = express();
 
@@ -108,14 +111,18 @@ app.all('*all', (req, res) => {
   if (apiRoute) {
     console.log(`[@ossy/app][server] Handling API route: ${pathname}`)
     apiRoute.handle(req, res)
+    return
   }
 
   const userAppSettings = req.userAppSettings || {}
 
   const appConfig = {
+    ...buildTimeConfig,
     url: req.url,
-    theme: userAppSettings.theme || 'light',
+    theme: userAppSettings.theme || buildTimeConfig.theme || 'light',
     isAuthenticated: req.isAuthenticated || false,
+    workspaceId: userAppSettings.workspaceId || buildTimeConfig.workspaceId,
+    apiUrl: buildTimeConfig.apiUrl,
   }
 
   renderToString(App, appConfig)

package/package.json

@@ -1,18 +1,23 @@
 {
   "name": "@ossy/app",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
-  "bin": "./cli/index.js",
   "type": "module",
   "scripts": {
     "build": "echo Building not required",
-    "test": "echo 'No test specified'"
+    "test": "node --experimental-vm-modules ../node_modules/jest/bin/jest.js --verbose",
+    "typecheck": "tsc --noEmit"
   },
   "keywords": [],
   "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
   "license": "MIT",
+  "devDependencies": {
+    "@jest/globals": "^30.2.0",
+    "jest": "^30.2.0",
+    "typescript": "^5.9.3"
+  },
   "peerDependencies": {
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
@@ -22,7 +27,7 @@
     "@babel/register": "^7.25.9",
     "@ossy/connected-components": ">=0.5.0 <1.0.0",
     "@ossy/design-system": ">=0.5.0 <1.0.0",
-    "@ossy/design-system-extras": ">=0.5.0 <1.0.0",
+    "@ossy/pages": ">=0.5.0 <1.0.0",
     "@ossy/resource-templates": ">=0.5.0 <1.0.0",
     "@ossy/router": ">=0.5.0 <1.0.0",
     "@ossy/router-react": ">=0.5.0 <1.0.0",
@@ -56,7 +61,9 @@
   },
   "files": [
     "/cli",
-    "README.md"
+    "/src",
+    "README.md",
+    "tsconfig.json"
   ],
-  "gitHead": "eec27800542ed59264caf788326e525a2ee77d63"
+  "gitHead": "3019a8da590435ba6f10d7d861addeba011baf5d"
 }

package/src/index.js

@@ -0,0 +1,2 @@
+export { build } from '../cli/build.js'
+export { dev } from '../cli/dev.js'

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "lib": ["ES2022"],
+    "allowJs": true,
+    "checkJs": false,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["cli/**/*.js", "src/**/*.js"],
+  "exclude": ["node_modules", "build", "**/__tests__/**"]
+}

package/cli/index.js

@@ -1,21 +0,0 @@
-#!/usr/bin/env node
-/* eslint-disable global-require, no-unused-vars */
-import { build } from './build.js'
-import { dev } from './dev.js'
-
-const [_, __, command, ...restArgs] = process.argv
-
-if (!command) {
-  console.error({ message: '[@ossy/app] No command provided' })
-}
-
-const commandHandler = {
-  'build': build,
-  'dev': dev,
-}[command]
-
-if (!commandHandler) {
-  console.error({ message: `[@ossy/app] Unknown command: ${command}` })
-}
-
-commandHandler(restArgs)