@pilotiq/pilotiq 0.7.1 → 0.8.0

package/src/schema/TableWidget.test.ts

@@ -16,8 +16,8 @@ import type { ModelLike, ModelQuery } from '../orm/modelDefaults.js'
 class StubQuery implements ModelQuery {
   public readonly ops: Array<{ op: string; args: unknown[] }> = []
   constructor(private readonly rows: unknown[], private readonly total = rows.length) {}
-  where(): this { this.ops.push({ op: 'where', args: [...arguments] }); return this }
-  orWhere(): this { this.ops.push({ op: 'orWhere', args: [...arguments] }); return this }
+  where(...args: unknown[]): this { this.ops.push({ op: 'where', args }); return this }
+  orWhere(...args: unknown[]): this { this.ops.push({ op: 'orWhere', args }); return this }
   orderBy(column: string, direction?: 'ASC' | 'DESC'): this {
     this.ops.push({ op: 'orderBy', args: [column, direction] })
     return this

package/src/theme/migrate.test.ts

@@ -0,0 +1,178 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { migrateThemeOverrides } from './migrate.js'
+
+/**
+ * `migrateThemeOverrides` reads legacy `panelGlobal` rows on every theme
+ * GET. It runs against rows persisted before the schema renames landed
+ * (accentColor→themeColor, chartPalette→chartColor, preset 'default'
+ * gone, baseColor sentinels dropped). A silent regression here corrupts
+ * user themes on the next page load — covering it with unit tests is
+ * cheap and the matrix is small.
+ */
+describe('migrateThemeOverrides — non-object input', () => {
+  for (const bad of [null, undefined, 0, 'string', true, false] as const) {
+    it(`returns {} for ${JSON.stringify(bad)}`, () => {
+      assert.deepEqual(migrateThemeOverrides(bad), {})
+    })
+  }
+
+  // Arrays are objects in JS but the function uses them via the same
+  // key-walk; nothing should match → empty result.
+  it('returns {} for an array', () => {
+    assert.deepEqual(migrateThemeOverrides([1, 2, 3]), {})
+  })
+})
+
+describe('migrateThemeOverrides — preset rename', () => {
+  it("maps the legacy 'default' preset to 'vega'", () => {
+    assert.deepEqual(migrateThemeOverrides({ preset: 'default' }), { preset: 'vega' })
+  })
+
+  it('passes other preset names through unchanged', () => {
+    for (const preset of ['nova', 'maia', 'lyra', 'vega'] as const) {
+      assert.deepEqual(migrateThemeOverrides({ preset }), { preset })
+    }
+  })
+
+  it('ignores non-string preset values', () => {
+    assert.deepEqual(migrateThemeOverrides({ preset: 42 }), {})
+  })
+})
+
+describe('migrateThemeOverrides — baseColor mapping', () => {
+  it("maps 'slate' to 'mist'", () => {
+    assert.deepEqual(migrateThemeOverrides({ baseColor: 'slate' }), { baseColor: 'mist' })
+  })
+
+  it("drops 'cream' (Vega's bg already supplies it)", () => {
+    assert.deepEqual(migrateThemeOverrides({ baseColor: 'cream' }), {})
+  })
+
+  it("drops 'default' (sentinel; no override)", () => {
+    assert.deepEqual(migrateThemeOverrides({ baseColor: 'default' }), {})
+  })
+
+  it('passes other baseColor values through unchanged', () => {
+    assert.deepEqual(migrateThemeOverrides({ baseColor: 'mist' }), { baseColor: 'mist' })
+    assert.deepEqual(migrateThemeOverrides({ baseColor: 'taupe' }), { baseColor: 'taupe' })
+  })
+})
+
+describe('migrateThemeOverrides — accentColor → themeColor', () => {
+  it("'terracotta' becomes 'base' when paired with preset=vega", () => {
+    const out = migrateThemeOverrides({ preset: 'default', accentColor: 'terracotta' })
+    // preset: 'default' migrates to 'vega' first; the terracotta branch
+    // reads the *migrated* preset, so the Vega-specific 'base' wins.
+    assert.deepEqual(out, { preset: 'vega', themeColor: 'base' })
+  })
+
+  it("'terracotta' falls back to 'orange' when preset is not vega", () => {
+    const out = migrateThemeOverrides({ preset: 'nova', accentColor: 'terracotta' })
+    assert.deepEqual(out, { preset: 'nova', themeColor: 'orange' })
+  })
+
+  it("'terracotta' alone (no preset) falls back to 'orange'", () => {
+    const out = migrateThemeOverrides({ accentColor: 'terracotta' })
+    assert.deepEqual(out, { themeColor: 'orange' })
+  })
+
+  it('passes other accentColor names through as themeColor', () => {
+    assert.deepEqual(migrateThemeOverrides({ accentColor: 'blue' }), { themeColor: 'blue' })
+  })
+
+  it('explicit themeColor wins over legacy accentColor', () => {
+    const out = migrateThemeOverrides({ accentColor: 'blue', themeColor: 'red' })
+    assert.deepEqual(out, { themeColor: 'red' })
+  })
+})
+
+describe('migrateThemeOverrides — chartPalette → chartColor', () => {
+  const map: Record<string, string> = {
+    ocean:      'sky',
+    sunset:     'orange',
+    forest:     'emerald',
+    berry:      'fuchsia',
+    terracotta: 'base',
+    default:    'base',
+  }
+
+  for (const [from, to] of Object.entries(map)) {
+    it(`maps chartPalette '${from}' to chartColor '${to}'`, () => {
+      assert.deepEqual(migrateThemeOverrides({ chartPalette: from }), { chartColor: to })
+    })
+  }
+
+  it('passes unmapped chartPalette names through as chartColor', () => {
+    assert.deepEqual(migrateThemeOverrides({ chartPalette: 'blue' }), { chartColor: 'blue' })
+  })
+
+  it('explicit chartColor wins over legacy chartPalette', () => {
+    const out = migrateThemeOverrides({ chartPalette: 'ocean', chartColor: 'red' })
+    assert.deepEqual(out, { chartColor: 'red' })
+  })
+})
+
+describe('migrateThemeOverrides — pass-through fields', () => {
+  it('forwards radius, iconLibrary, fonts, and cssVariables when shapes match', () => {
+    const fonts = { heading: 'Space Grotesk', body: 'Inter' }
+    const cssVariables = { '--custom-x': 'oklch(0.5 0.1 100)' }
+    const out = migrateThemeOverrides({
+      radius:       'large',
+      iconLibrary:  'tabler',
+      fonts,
+      cssVariables,
+    })
+    assert.deepEqual(out, {
+      radius:       'large',
+      iconLibrary:  'tabler',
+      fonts,
+      cssVariables,
+    })
+  })
+
+  it('drops radius/iconLibrary when they are not strings', () => {
+    const out = migrateThemeOverrides({ radius: 42, iconLibrary: null })
+    assert.deepEqual(out, {})
+  })
+
+  it('drops fonts/cssVariables when they are not objects', () => {
+    const out = migrateThemeOverrides({ fonts: 'Inter', cssVariables: 'bad' })
+    assert.deepEqual(out, {})
+  })
+})
+
+describe('migrateThemeOverrides — composite migration', () => {
+  it('migrates a realistic pre-rename payload end-to-end', () => {
+    const legacy = {
+      preset:        'default',
+      baseColor:     'slate',
+      accentColor:   'terracotta',
+      chartPalette:  'ocean',
+      radius:        'medium',
+      iconLibrary:   'lucide',
+      fonts:         { heading: 'Satoshi' },
+    }
+    const out = migrateThemeOverrides(legacy)
+    assert.deepEqual(out, {
+      preset:      'vega',
+      baseColor:   'mist',
+      themeColor:  'base',     // terracotta + preset=vega
+      chartColor:  'sky',      // ocean → sky
+      radius:      'medium',
+      iconLibrary: 'lucide',
+      fonts:       { heading: 'Satoshi' },
+    })
+  })
+
+  it('a clean already-migrated payload is preserved', () => {
+    const current = {
+      preset:     'vega',
+      baseColor:  'mist',
+      themeColor: 'blue',
+      chartColor: 'sky',
+      radius:     'small',
+    }
+    assert.deepEqual(migrateThemeOverrides(current), current)
+  })
+})

package/src/vite.test.ts

@@ -0,0 +1,184 @@
+import { describe, it, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+import fs from 'node:fs'
+import path from 'node:path'
+import os from 'node:os'
+import { generatePages } from './vite.js'
+
+/**
+ * Regression test for the Vite plugin's generated Vike stubs. The
+ * stubs are emitted at construction time (before Vike scans `pages/`)
+ * and they are the integration boundary between RudderJS routing and
+ * Vike's file-based router — getting them wrong silently breaks SPA
+ * navigation. We assert the file tree + critical content invariants
+ * rather than a raw text snapshot so cosmetic edits don't churn the
+ * test, but functional regressions (a dropped guard, a missing route
+ * dir, a non-null assertion lost on a route param) still fail loudly.
+ */
+
+let tmpRoot: string
+
+before(() => {
+  tmpRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'pilotiq-vite-test-'))
+  generatePages(tmpRoot)
+})
+
+after(() => {
+  fs.rmSync(tmpRoot, { recursive: true, force: true })
+})
+
+const outDir = (): string => path.join(tmpRoot, '(pilotiq)')
+const read = (p: string): string => fs.readFileSync(path.join(outDir(), p), 'utf8')
+
+describe('generatePages — file tree', () => {
+  const expectedRouteDirs = [
+    'dashboard',
+    'slug',
+    'resource-create',
+    'resource-edit',
+    'resource-view',
+    'relation-list',
+    'relation-create',
+    'relation-view',
+    'relation-edit',
+    'nested-relation-list',
+    'nested-relation-create',
+    'nested-relation-view',
+    'nested-relation-edit',
+    'theme',
+  ]
+
+  it('emits the (pilotiq) directory with all expected route dirs', () => {
+    assert.ok(fs.existsSync(outDir()), '(pilotiq) directory should be created')
+    for (const dir of expectedRouteDirs) {
+      assert.ok(
+        fs.existsSync(path.join(outDir(), dir)),
+        `route directory "${dir}" should exist`,
+      )
+    }
+  })
+
+  it('emits shared files at the (pilotiq) root', () => {
+    for (const file of ['+config.ts', '+Head.tsx']) {
+      assert.ok(
+        fs.existsSync(path.join(outDir(), file)),
+        `shared file "${file}" should exist`,
+      )
+    }
+  })
+
+  it('every route dir has +route.ts, +data.ts, and +Page.tsx', () => {
+    // resource-create + resource-edit don't get their own +Page.tsx
+    // line in the source — they share `formPage`. The file must still
+    // be emitted (writeIfChanged is called for each). Same for nested.
+    for (const dir of expectedRouteDirs) {
+      for (const file of ['+route.ts', '+data.ts', '+Page.tsx']) {
+        assert.ok(
+          fs.existsSync(path.join(outDir(), dir, file)),
+          `${dir}/${file} should exist`,
+        )
+      }
+    }
+  })
+})
+
+describe('generatePages — route stubs', () => {
+  it('+route.ts files declare RouteSync and check the registry on SSR', () => {
+    for (const dir of ['dashboard', 'slug', 'resource-create', 'resource-edit', 'theme']) {
+      const src = read(`${dir}/+route.ts`)
+      assert.match(src, /import type { RouteSync } from 'vike\/types'/, `${dir}: RouteSync import`)
+      assert.match(src, /PilotiqRegistry/, `${dir}: registry import`)
+      assert.match(src, /export const route: RouteSync/, `${dir}: route export`)
+    }
+  })
+
+  it('non-theme routes guard the registry lookup behind import.meta.env.SSR', () => {
+    // Theme route runs the registry check unconditionally because it
+    // also needs to verify the themeEditor flag — exempting it keeps
+    // the rest of the assertion strict.
+    for (const dir of ['dashboard', 'slug', 'resource-create', 'resource-edit']) {
+      const src = read(`${dir}/+route.ts`)
+      assert.match(
+        src,
+        /if \(import\.meta\.env\.SSR && !PilotiqRegistry\.findByPath/,
+        `${dir}: SSR-guarded registry check`,
+      )
+    }
+  })
+
+  it('routeParams use non-null assertion on parts[0] (basePath)', () => {
+    // Regression guard for f18898f / 229f290 — without the `!`,
+    // noUncheckedIndexedAccess flags `string | undefined` in user
+    // typecheck and the playground fails to compile.
+    for (const dir of ['dashboard', 'slug', 'resource-create', 'resource-edit', 'theme']) {
+      const src = read(`${dir}/+route.ts`)
+      assert.match(src, /basePath:\s*parts\[0\]!/, `${dir}: parts[0]! basePath`)
+    }
+  })
+
+  it('slug route rejects the "theme" segment to avoid clobbering the theme editor', () => {
+    const src = read('slug/+route.ts')
+    assert.match(src, /parts\[1 \+ off\] === 'theme'/)
+  })
+
+  it('resource-view yields to create + theme on the same depth', () => {
+    const src = read('resource-view/+route.ts')
+    assert.match(src, /parts\[2 \+ off\] === 'create'/)
+    assert.match(src, /parts\[1 \+ off\] === 'theme'/)
+  })
+
+  it('all non-dashboard routes import clusterOffset for cluster-prefix support', () => {
+    // dashboard is single-segment — no cluster prefix possible.
+    // theme is exactly 2 segments under the panel base — also unprefixed.
+    for (const dir of ['slug', 'resource-create', 'resource-edit', 'resource-view', 'relation-list']) {
+      const src = read(`${dir}/+route.ts`)
+      assert.match(src, /import { clusterOffset } from '\.\.\/_clusterOffset\.js'/, `${dir}: clusterOffset import`)
+    }
+  })
+})
+
+describe('generatePages — page stubs', () => {
+  it('+Page.tsx renders via SchemaRenderer with passToClient props', () => {
+    for (const dir of ['slug', 'resource-create', 'resource-edit', 'resource-view', 'relation-list']) {
+      const src = read(`${dir}/+Page.tsx`)
+      assert.match(src, /import { SchemaRenderer } from '@pilotiq\/pilotiq\/react'/, `${dir}: SchemaRenderer import`)
+      assert.match(src, /usePageContext/, `${dir}: usePageContext import`)
+      assert.match(src, /ctx\.data \?\? ctx\.viewProps/, `${dir}: data/viewProps fallback`)
+    }
+  })
+
+  it('+config.ts forwards viewProps + data to the client', () => {
+    const src = read('+config.ts')
+    assert.match(src, /passToClient:\s*\['viewProps',\s*'data'\]/)
+  })
+
+  it('+data.ts (shared stub) prefers server-set viewProps over running dispatchPageData', () => {
+    // The data stub is identical across every route dir — sample one.
+    const src = read('slug/+data.ts')
+    assert.match(src, /if \(viewProps !== undefined\) return viewProps/)
+    assert.match(src, /import { dispatchPageData } from '@pilotiq\/pilotiq'/)
+  })
+})
+
+describe('generatePages — Head + theme', () => {
+  it('+Head.tsx injects the FOUC-prevention script before React hydrates', () => {
+    const src = read('+Head.tsx')
+    assert.match(src, /pilotiq-theme/, 'localStorage key for theme persistence')
+    assert.match(src, /prefers-color-scheme:dark/, 'system-preference fallback')
+    assert.match(src, /classList\.add\('dark'\)/, 'dark class application')
+  })
+
+  it('theme route checks the themeEditor config flag', () => {
+    const src = read('theme/+route.ts')
+    assert.match(src, /panel\.getConfig\(\)\.themeEditor/)
+  })
+})
+
+describe('generatePages — idempotency', () => {
+  it('re-running on the same dir does not throw and keeps file contents stable', () => {
+    const before = read('dashboard/+route.ts')
+    generatePages(tmpRoot)
+    const after = read('dashboard/+route.ts')
+    assert.equal(before, after)
+  })
+})

package/src/vite.ts

@@ -43,7 +43,7 @@ function writeIfChanged(filePath: string, contents: string): void {
   fs.writeFileSync(filePath, contents)
 }
 
-function generatePages(pagesRoot: string): void {
+export function generatePages(pagesRoot: string): void {
   const outDir = path.join(pagesRoot, '(pilotiq)')
 
   // Shared config
@@ -390,7 +390,7 @@ export const route: RouteSync = (pageContext) => {
   if (parts[5 + off] === 'edit') return false
   if (import.meta.env.SSR && !PilotiqRegistry.findByPath('/' + parts[0])) return false
   return { routeParams: {
-    basePath:      parts[0],
+    basePath:      parts[0]!,
     slug:          parts[1 + off]!,
     id:            parts[2 + off]!,
     relationship:  parts[3 + off]!,
@@ -413,7 +413,7 @@ export const route: RouteSync = (pageContext) => {
   if (parts.length !== 7 + off || parts[6 + off] !== 'create') return false
   if (import.meta.env.SSR && !PilotiqRegistry.findByPath('/' + parts[0])) return false
   return { routeParams: {
-    basePath:      parts[0],
+    basePath:      parts[0]!,
     slug:          parts[1 + off]!,
     id:            parts[2 + off]!,
     relationship:  parts[3 + off]!,
@@ -437,7 +437,7 @@ export const route: RouteSync = (pageContext) => {
   if (parts[6 + off] === 'create') return false
   if (import.meta.env.SSR && !PilotiqRegistry.findByPath('/' + parts[0])) return false
   return { routeParams: {
-    basePath:      parts[0],
+    basePath:      parts[0]!,
     slug:          parts[1 + off]!,
     id:            parts[2 + off]!,
     relationship:  parts[3 + off]!,
@@ -461,7 +461,7 @@ export const route: RouteSync = (pageContext) => {
   if (parts.length !== 8 + off || parts[7 + off] !== 'edit') return false
   if (import.meta.env.SSR && !PilotiqRegistry.findByPath('/' + parts[0])) return false
   return { routeParams: {
-    basePath:      parts[0],
+    basePath:      parts[0]!,
     slug:          parts[1 + off]!,
     id:            parts[2 + off]!,
     relationship:  parts[3 + off]!,
@@ -538,7 +538,18 @@ async function discoverPanelExports(
   // jiti gives us a Node-compatible loader that handles .ts/.tsx, ESM,
   // and TypeScript syntax. `fsCache: false` + a fresh instance per
   // call ensures HMR-style regeneration picks up edits.
-  const jiti = createJiti(projectRoot, { fsCache: false, moduleCache: false })
+  //
+  // `jsx: true` enables `@babel/plugin-transform-react-jsx` so panel
+  // modules can import `.tsx` files directly (e.g. a custom nav
+  // component registered via `Pilotiq.components({ nav })`). Default
+  // automatic runtime — matches what the playground's tsconfig assumes
+  // (`"jsx": "react-jsx"`) so authors don't need to manually import
+  // React in every component.
+  const jiti = createJiti(projectRoot, {
+    fsCache:     false,
+    moduleCache: false,
+    jsx:         { runtime: 'automatic' },
+  })
   const out: PanelExport[] = []
   for (const userPath of panelPaths) {
     const resolved = await resolvePanelPath(userPath, projectRoot)
@@ -553,6 +564,7 @@ async function discoverPanelExports(
       throw new Error(
         `[pilotiq vite plugin] Failed to import panel module "${userPath}" (resolved to "${resolved}"): ${msg}\n` +
           `Panel files must be import-safe — top-level code must not run server-only logic.`,
+        { cause: err },
       )
     }
   }
@@ -592,7 +604,7 @@ import { clusterSlugsByBasePath } from './_components.js'
 export function clusterOffset(parts: string[]): number {
   if (parts.length < 2) return 0
   const slugs = clusterSlugsByBasePath['/' + parts[0]]
-  return slugs && slugs.includes(parts[1]) ? 1 : 0
+  return slugs && slugs.includes(parts[1]!) ? 1 : 0
 }
 `)
 
@@ -609,6 +621,8 @@ export function clusterOffset(parts: string[]): number {
     lines.push('export const componentRegistry: Record<string, unknown> = {}')
     lines.push('export const clusterSlugsByBasePath: Record<string, string[]> = {}')
     lines.push('export const rightPanelRegistry: Record<string, unknown> = {}')
+    lines.push('export const layoutProviderRegistry: unknown[] = []')
+    lines.push('export const componentSlotRegistry: Record<string, unknown> = {}')
     lines.push('')
     writeIfChanged(path.join(outDir, '_components.ts'), lines.join('\n'))
     return
@@ -633,6 +647,7 @@ export function clusterOffset(parts: string[]): number {
   lines.push('const _clusters: Record<string, string[]> = {}')
   lines.push('const _rightPanels: Record<string, unknown> = {}')
   lines.push('const _layoutProviders: unknown[] = []')
+  lines.push('const _slots: Record<string, unknown> = {}')
   lines.push('function _add(c: any) { if (typeof c === \'function\' && c.name) _all[c.name] = c }')
   lines.push('function _walk(p: any) {')
   lines.push('  const cfg = p?.getConfig?.()')
@@ -649,6 +664,12 @@ export function clusterOffset(parts: string[]): number {
   lines.push('      if (typeof _C === \'function\') _layoutProviders.push(_C)')
   lines.push('    }')
   lines.push('  }')
+  lines.push('  if (cfg?.components && typeof cfg.components === \'object\') {')
+  lines.push('    for (const _k of Object.keys(cfg.components)) {')
+  lines.push('      const _v = cfg.components[_k]')
+  lines.push('      if (typeof _v === \'function\' || (typeof _v === \'object\' && _v !== null)) _slots[_k] = _v')
+  lines.push('    }')
+  lines.push('  }')
   lines.push('  if (cfg?.path && Array.isArray(cfg?.clusters)) {')
   lines.push('    const slugs = cfg.clusters.map((C: any) => (typeof C?.getSlug === \'function\' ? C.getSlug() : \'\')).filter(Boolean)')
   lines.push('    if (slugs.length > 0) _clusters[cfg.path] = slugs')
@@ -660,6 +681,7 @@ export function clusterOffset(parts: string[]): number {
   lines.push('export const clusterSlugsByBasePath: Record<string, string[]> = _clusters')
   lines.push('export const rightPanelRegistry: Record<string, unknown> = _rightPanels')
   lines.push('export const layoutProviderRegistry: unknown[] = _layoutProviders')
+  lines.push('export const componentSlotRegistry: Record<string, unknown> = _slots')
   lines.push('')
 
   writeIfChanged(path.join(outDir, '_components.ts'), lines.join('\n'))
@@ -675,7 +697,7 @@ function writeLayoutWithManifest(pagesRoot: string): void {
 import { usePageContext } from 'vike-react/usePageContext'
 import { AppShell, ThemeProvider, generateThemeCSS, NavigateProvider } from '@pilotiq/pilotiq/react'
 import { navigate as vikeNavigate } from 'vike/client/router'
-import { componentRegistry, rightPanelRegistry, layoutProviderRegistry } from './_components.js'
+import { componentRegistry, rightPanelRegistry, layoutProviderRegistry, componentSlotRegistry } from './_components.js'
 import type { ReactNode } from 'react'
 
 // Wrap vike's async navigate so the NavigateProvider's fire-and-forget
@@ -698,7 +720,7 @@ export default function PilotiqLayout({ children }: { children: ReactNode }) {
     <NavigateProvider navigate={navigate}>
       <ThemeProvider theme={panel.theme}>
         {themeCss && <style dangerouslySetInnerHTML={{ __html: themeCss }} />}
-        <AppShell panel={panel} basePath={basePath} layout={layout} notifications={notifications} currentPath={currentPath} componentRegistry={componentRegistry as any} rightPanelRegistry={rightPanelRegistry as any} layoutProviderRegistry={layoutProviderRegistry as any}>
+        <AppShell panel={panel} basePath={basePath} layout={layout} notifications={notifications} currentPath={currentPath ?? ''} componentRegistry={componentRegistry as any} rightPanelRegistry={rightPanelRegistry as any} layoutProviderRegistry={layoutProviderRegistry as any} componentSlotRegistry={componentSlotRegistry as any}>
           {children}
         </AppShell>
       </ThemeProvider>