polen 0.9.0-next.3 → 0.9.0-next.5

package/src/lib/extensible-data/extensible-data.ts

@@ -0,0 +1,38 @@
+import { computed, reactive } from '@vue/reactivity'
+import type { ComputedRef, UnwrapRefSimple } from '@vue/reactivity'
+
+type Join<$Data> = (chunks: $Data[]) => $Data
+type Create<$Data> = () => $Data
+
+interface DataTypeOperations<$Data> {
+  join: Join<$Data>
+  create: Create<$Data>
+}
+
+export const create = <$Data extends object = object>(dataTypeOperations: DataTypeOperations<$Data>) => {
+  return new ExtensibleData<$Data>(dataTypeOperations)
+}
+
+export class ExtensibleData<$Data extends object = object> {
+  public value: ComputedRef<$Data> = computed(() => {
+    const namespacedDataItems = Array.from(this.namespacedReactiveData.values())
+    const data = this.dataTypeOperations.join(namespacedDataItems as $Data[])
+    return data
+  })
+
+  private namespacedReactiveData = reactive(new Map<string, $Data>())
+
+  private dataTypeOperations: DataTypeOperations<$Data>
+
+  constructor(dataTypeOperations: DataTypeOperations<$Data>) {
+    this.dataTypeOperations = dataTypeOperations
+  }
+
+  get(namespace: string): $Data {
+    if (!this.namespacedReactiveData.has(namespace)) {
+      const data = this.dataTypeOperations.create()
+      this.namespacedReactiveData.set(namespace, data as UnwrapRefSimple<$Data>)
+    }
+    return this.namespacedReactiveData.get(namespace)! as $Data
+  }
+}

package/src/lib/extensible-data/index.ts

@@ -0,0 +1 @@
+export * as ExtensibleData from './extensible-data.ts'

package/src/lib/kit-temp.ts

@@ -12,7 +12,7 @@
 //
 //
 
-import { Fs, Path, Undefined } from '@wollybeard/kit'
+import { Fs, Http, Path, Undefined } from '@wollybeard/kit'
 import type { ResolveHookContext } from 'node:module'
 
 export const arrayEquals = (a: any[], b: any[]) => {
@@ -95,3 +95,14 @@ export const ObjPartition = <T extends object, K extends keyof T>(
     picked: {} as Pick<T, K>,
   })
 }
+
+export const ensureEnd = (string: string, ending: string) => {
+  if (string.endsWith(ending)) return string
+  return string + ending
+}
+
+export const ResponseInternalServerError = () =>
+  new Response(null, {
+    status: Http.Status.InternalServerError.code,
+    statusText: Http.Status.InternalServerError.description,
+  })

package/src/lib/react-router-loader/react-router-loader.ts

@@ -12,7 +12,6 @@ export const createLoader = <loader extends Loader>(loader: loader): loader => {
     const serialized: Serialized = {
       superjsonData: superjson.stringify(data),
     }
-    // console.log({ serialized })
     return serialized
   }
 }

package/src/lib/vite-plugin-json/index.ts

@@ -0,0 +1 @@
+export * as VitePluginJson from './vite-plugin-json.ts'

package/src/lib/vite-plugin-json/vite-plugin-json.ts

@@ -0,0 +1,128 @@
+import jsesc from 'jsesc'
+// import { id,or,exclude  } from 'rolldown/filter'
+import {} from '@rolldown/pluginutils'
+import type { Plugin } from 'vite'
+
+export interface Codec {
+  stringify(value: any): string
+  parse(text: string): any
+}
+
+export interface VitePluginJsonImportsOptions {
+  /**
+   * Use a custom codec.
+   */
+  codec?: {
+    /**
+     * Import path for the custom codec to use in generated code.
+     *
+     * Must be a package name or use a path alias.
+     *
+     * Examples:
+     * - '@my-org/my-codec' (npm package)
+     * - '#utils/codec' (package subpath)
+     * - 'my-codec' (npm package)
+     * - '~/utils/codec' (if ~ is aliased in vite config)
+     */
+    importPath: string
+    /**
+     * Custom codec for validation and runtime parsing
+     * The codec.parse() is used at build time to validate the JSON
+     * The codec will be imported in the generated code for runtime parsing
+     * @default JSON
+     */
+    validate?: Codec
+    /**
+     * The export (its name) to import.
+     *
+     * @default 'default'
+     */
+    importExport?: string
+  }
+  filter?: {
+    /**
+     * Module types to process (the file extension without the dot).
+     * @default ['json']
+     */
+    moduleTypes?: string[]
+    /**
+     * Picomatch patterns to include
+     * @default includes all files with configured extensions
+     */
+    id?: {
+      include?: string | string[]
+      /**
+       * Picomatch patterns to exclude
+       * @default excludes node_modules and files with \0 prefix
+       */
+      exclude?: string | string[]
+    }
+  }
+  /**
+   * Plugin name. Useful to customize if providing a custom codec e.g. `superjson`.
+   *
+   * @default 'json'
+   */
+  name?: string
+}
+
+export const create = (options: VitePluginJsonImportsOptions = {}): Plugin => {
+  const codec = options.codec?.validate ?? JSON
+  const codecImportExport = options.codec?.importExport ?? `default`
+
+  const pluginName = options.name ?? `json-imports`
+
+  // Always exclude \0 prefixed modules
+  // eslint-disable-next-line no-control-regex
+  const baseExcludePatterns: (string | RegExp)[] = [/^\0/]
+  const moduleTypes = options.filter?.moduleTypes ?? [`json`]
+  const isCustomCodec = Boolean(options.codec?.importPath)
+
+  // Check if we should handle this file based on extension
+  const shouldHandle = (id: string) => {
+    // Exclude internal modules with \0 prefix
+    if (id.startsWith('\0')) return false
+
+    // Check if it has one of our configured extensions
+    return moduleTypes.some(type => id.endsWith(`.${type}`))
+  }
+
+  return {
+    name: pluginName,
+    enforce: 'pre' as const,
+    // Transform files based on extension
+    transform(code, id) {
+      if (!shouldHandle(id)) return
+
+      try {
+        // Skip validation for superjson since the codec validates the envelope format
+        if (options.codec?.validate && !options.codec.importPath?.includes('superjson')) {
+          codec.parse(code)
+        }
+
+        if (!isCustomCodec) {
+          // For native JSON, directly export as JavaScript object literal
+          return `export default ${code}`
+        } else {
+          // For custom codecs, we need to parse at runtime
+          if (!options.codec?.importPath) {
+            throw new Error(`codec.importPath is required when using a custom codec`)
+          }
+
+          const importIdentifier = codecImportExport === `default` ? `codec` : codecImportExport
+          const importStatement = codecImportExport === `default`
+            ? `import ${importIdentifier} from '${options.codec.importPath}'`
+            : `import { ${codecImportExport} } from '${options.codec.importPath}'`
+
+          return `
+${importStatement}
+const data = ${importIdentifier}.parse('${jsesc(code)}')
+export { data as default }`
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error)
+        this.error(`Failed to parse JSON in ${id}: ${message}`)
+      }
+    },
+  }
+}

package/src/lib/vite-plugin-reactive-data/index.ts

@@ -0,0 +1 @@
+export * as VitePluginReactiveData from './vite-plugin-reactive-data.ts'

package/src/lib/vite-plugin-reactive-data/vite-plugin-reactive-data.ts

@@ -0,0 +1,131 @@
+import { ensureEnd } from '#lib/kit-temp'
+import { VitePluginJson } from '#lib/vite-plugin-json/index'
+import { superjson } from '#singletons/superjson'
+import { type ComputedRef, effect, isRef } from '@vue/reactivity'
+import { Debug } from '@wollybeard/kit'
+import type { Plugin, ViteDevServer } from 'vite'
+
+interface ReactiveDataOptions {
+  /**
+   * Virtual module ID (e.g., 'virtual:polen/navbar') that this data will be exported from.
+   * The appropriate extension will be appended automatically based on moduleType.
+   */
+  moduleId: string
+  /**
+   * The reactive data to expose.
+   * Can be either:
+   * - A Vue computed ref (recommended)
+   * - A function that returns reactive data
+   * - A reactive value directly
+   */
+  data: ComputedRef<object | unknown[]> | (() => object | unknown[]) | object | unknown[]
+  /** Debounce updates (ms). If not set, uses process.nextTick for batching */
+  debounce?: number
+  /**
+   * JSON codec to use (e.g., superjson)
+   * Default: superjson
+   * Only used when includeJsonPlugin is true
+   */
+  codec?: VitePluginJson.Codec
+  /**
+   * Custom plugin name. Can use to help identify this plugin in logs if using many instances of this plugin.
+   @default 'reactive-data'
+   */
+  name?: string
+  /**
+   * Module type to return. Default: 'json'
+   * Use 'superjson' to avoid conflicts with built-in JSON plugin
+   */
+  moduleType?: string
+}
+
+const debug = Debug.create('vite-plugin-reactive-data')
+
+export const create = (options: ReactiveDataOptions): Plugin => {
+  const codec = options.codec ?? superjson
+  const moduleType = options.moduleType ?? 'json'
+  const moduleId = ensureEnd(options.moduleId, `.${moduleType}`)
+  const name = options.name ?? `reactive-data`
+
+  let server: ViteDevServer
+  let updateTimer: NodeJS.Timeout | undefined
+  let updateScheduled = false
+
+  const doUpdate = () => {
+    debug('update')
+    updateTimer = undefined
+    updateScheduled = false
+    if (!server) return
+    const moduleNode = server.moduleGraph.getModuleById(moduleId)
+    if (moduleNode) {
+      server.moduleGraph.invalidateModule(moduleNode)
+    }
+  }
+
+  const scheduleUpdate = () => {
+    if (options.debounce) {
+      // User wants actual debouncing for rapid updates
+      if (updateTimer) clearTimeout(updateTimer)
+      updateTimer = setTimeout(doUpdate, options.debounce)
+    } else {
+      // Just batch synchronous updates using nextTick
+      if (updateScheduled) return
+      updateScheduled = true
+      process.nextTick(doUpdate)
+    }
+  }
+
+  // Helper to get the current data value
+  const getData = () => {
+    if (isRef(options.data)) {
+      return options.data.value
+    } else if (typeof options.data === 'function') {
+      return options.data()
+    } else {
+      return options.data
+    }
+  }
+
+  // Set up reactive effect immediately
+  effect(() => {
+    // Access data to track dependencies
+    const data = getData()
+    debug('data changed:', data)
+    // Trigger update only if server is available
+    if (server) {
+      scheduleUpdate()
+    }
+  })
+
+  return {
+    name,
+
+    configureServer(_server) {
+      server = _server
+      // Trigger initial update since server is now available
+      scheduleUpdate()
+    },
+
+    resolveId(id) {
+      if (id === moduleId) {
+        return moduleId
+      }
+    },
+
+    load: {
+      // todo: doesn't work for some reason, prefer over handler
+      // filter: {
+      //   id: {
+      //     include: moduleId,
+      //   },
+      // },
+      handler: (id) => {
+        if (id !== moduleId) return
+
+        const data = getData()
+        // Return just the raw JSON string - let the JSON plugin handle the transformation
+        return codec.stringify(data)
+      },
+    },
+  }
+}

package/src/lib/vite-plugins/build-logger.ts

@@ -1,31 +1,33 @@
 import type { Plugin } from 'vite'
 
+const log = console.log
+
 export const BuildLogger: Plugin = {
   // https://rollupjs.org/plugin-development/#build-hooks
   name: `build-logger`,
   buildStart(...args) {
-    console.log(`buildStart`, args)
+    log(`buildStart`, args)
   },
   resolveId(...args) {
-    console.log(`resolveId`, args)
+    log(`resolveId`, args)
   },
   load(...args) {
-    console.log(`load`, JSON.stringify(args))
+    log(`load`, JSON.stringify(args))
   },
   shouldTransformCachedModule(...args) {
-    console.log(`shouldTransformCachedModule`, args)
+    log(`shouldTransformCachedModule`, args)
   },
   transform(...args) {
-    console.log(`transform`, args)
+    log(`transform`, args)
     return args[0]
   },
   moduleParsed(...args) {
-    console.log(`\nmoduleParsed`, args)
+    log(`\nmoduleParsed`, args)
   },
   resolveDynamicImport(...args) {
-    console.log(`resolveDynamicImport`, args)
+    log(`resolveDynamicImport`, args)
   },
   buildEnd(...args) {
-    console.log(`buildEnd`, args)
+    log(`buildEnd`, args)
   },
 }

package/src/project-data.ts

@@ -1,14 +1,10 @@
 import type { Config } from '#api/config/index'
-import type { FileRouter } from '#lib/file-router/index'
 import type { Schema } from './api/schema/index.ts'
 
 export interface ProjectData {
   schema: null | Schema.Schema
-  siteNavigationItems: SiteNavigationItem[]
-  sidebarIndex: SidebarIndex
   faviconPath: string
   paths: Config.Config[`paths`][`project`]
-  pagesScanResult: FileRouter.ScanResult
   server: {
     static: {
       directory: string
@@ -16,12 +12,3 @@ export interface ProjectData {
     }
   }
 }
-
-export interface SiteNavigationItem {
-  title: string
-  pathExp: string
-}
-
-export interface SidebarIndex {
-  [pathExpression: string]: FileRouter.Sidebar.Sidebar
-}

package/src/template/components/Link.tsx

@@ -49,11 +49,14 @@ export const getPathActiveReport = (
   pathExp: string,
   currentPathExp: string,
 ): PathActiveReport => {
-  // Normalize paths for comparison - remove leading slash if present
+  // Normalize both paths for comparison
+  const normalizedPath = pathExp.startsWith('/') ? pathExp.slice(1) : pathExp
   const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
-  const isDirect = normalizedCurrentPath === pathExp
-  const isdescendant = normalizedCurrentPath.startsWith(pathExp)
+  
+  const isDirect = normalizedCurrentPath === normalizedPath
+  const isdescendant = normalizedCurrentPath.startsWith(normalizedPath + '/') && normalizedCurrentPath !== normalizedPath
   const is = isDirect || isdescendant
+  
   return {
     is,
     isDirect,

package/src/template/components/sidebar/Sidebar.tsx

@@ -1,17 +1,19 @@
 import type { FileRouter } from '#lib/file-router/index'
 import { Box } from '@radix-ui/themes'
+import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props'
 import { Items } from './SidebarItem.tsx'
 
-interface SidebarProps {
-  items: FileRouter.Sidebar.Item[]
+interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
+  data: FileRouter.Sidebar.Item[]
+  style?: React.CSSProperties
 }
 
-export const Sidebar = ({ items }: SidebarProps) => {
+export const Sidebar = ({ data, ...props }: SidebarProps) => {
   return (
     <Box
       data-testid='sidebar'
       role='Sidebar'
-      flexShrink='0'
+      {...props}
     >
       <style>
         {`
@@ -20,7 +22,7 @@ export const Sidebar = ({ items }: SidebarProps) => {
           }
         `}
       </style>
-      <Items items={items} />
+      <Items items={data} />
     </Box>
   )
 }

package/src/template/routes/changelog.tsx

@@ -1,6 +1,6 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
-import { PROJECT_DATA } from 'virtual:polen/project/data'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { Changelog } from '../components/Changelog.jsx'
 
 const loader = createLoader(() => {

package/src/template/routes/reference.tsx

@@ -2,7 +2,7 @@ import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { Container, Flex } from '@radix-ui/themes'
 import { Outlet } from 'react-router'
-import { PROJECT_DATA } from 'virtual:polen/project/data'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { MissingSchema } from '../components/MissingSchema.jsx'
 import { TypeIndex } from '../components/TypeIndex.jsx'
 import { reference$type } from './reference.$type.jsx'

package/src/template/routes/root.tsx

@@ -1,13 +1,15 @@
 import type { ReactRouter } from '#dep/react-router/index'
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { GitHubLogoIcon } from '@radix-ui/react-icons'
-import { Box, Button, Heading, Text } from '@radix-ui/themes'
+import { Box, Button, Grid, Heading, Text } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
 import radixStylesUrl from '@radix-ui/themes/styles.css?url'
 import { Arr } from '@wollybeard/kit'
 import { Link as LinkReactRouter } from 'react-router'
 import { Outlet, ScrollRestoration, useLocation } from 'react-router'
-import { PROJECT_DATA } from 'virtual:polen/project/data'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
+import projectDataNavbar from 'virtual:polen/project/data/navbar.jsonsuper'
+import projectDataPages from 'virtual:polen/project/data/pages.jsonsuper'
 import { pages } from 'virtual:polen/project/pages.jsx'
 import { templateVariables } from 'virtual:polen/template/variables'
 import { Link } from '../components/Link.jsx'
@@ -72,54 +74,66 @@ const Layout = () => {
   }
 
   const currentNavPathExp = getCurrentNavPathExp()
-  const sidebar = currentNavPathExp && PROJECT_DATA.sidebarIndex[currentNavPathExp]
-  const showSidebar = sidebar && sidebar.items.length > 0
+  const sidebar = currentNavPathExp && projectDataPages.sidebarIndex[currentNavPathExp]
+  const isShowSidebar = sidebar && sidebar.items.length > 0
+
+  const header = (
+    <Flex
+      gridArea={'header'}
+      align='center'
+      gap='8'
+      pb='4'
+      mb='8'
+      style={{
+        borderBottom: `1px solid var(--gray-3)`,
+      }}
+    >
+      <LinkReactRouter
+        to='/'
+        style={{ color: `inherit`, textDecoration: `none` }}
+      >
+        <Flex align='center' gap='2'>
+          <GitHubLogoIcon style={{ width: 30, height: 30 }} />
+          <Text size='3' weight='medium'>
+            {templateVariables.title}
+          </Text>
+        </Flex>
+      </LinkReactRouter>
+      <Flex direction='row' gap='4'>
+        {projectDataNavbar.map((item, key) => (
+          <Link key={key} color='gray' to={item.pathExp}>
+            {item.title}
+          </Link>
+        ))}
+      </Flex>
+    </Flex>
+  )
+
   return (
     <Theme asChild>
-      <Box m='8'>
-        <Flex
-          align='center'
-          gap='8'
-          pb='4'
-          mb='8'
-          style={{
-            borderBottom: `1px solid var(--gray-3)`,
-          }}
-        >
-          <LinkReactRouter
-            to='/'
-            style={{ color: `inherit`, textDecoration: `none` }}
-          >
-            <Flex align='center' gap='2'>
-              <GitHubLogoIcon style={{ width: 30, height: 30 }} />
-              <Text size='3' weight='medium'>
-                {templateVariables.title}
-              </Text>
-            </Flex>
-          </LinkReactRouter>
-          <Flex direction='row' gap='4'>
-            {PROJECT_DATA.siteNavigationItems.map((item, key) => (
-              <Link key={key} color='gray' to={item.pathExp}>
-                {item.title}
-              </Link>
-            ))}
-          </Flex>
-        </Flex>
-        {showSidebar
-          ? (
-            <Flex gap='8'>
-              <Sidebar items={sidebar.items} />
-              <Box style={{ flex: 1 }}>
-                <Outlet />
-              </Box>
-            </Flex>
-          )
-          : (
-            <Box>
-              <Outlet />
-            </Box>
-          )}
-      </Box>
+      <Grid
+        width={{ initial: 'var(--container-4)' }}
+        areas="'header header header header header header header header' 'sidebar sidebar . content content content content content'"
+        rows='min-content auto'
+        columns='repeat(8, 1fr)'
+        gapX='2'
+        my='8'
+        mx='auto'
+      >
+        {header}
+        {isShowSidebar && (
+          <Sidebar
+            gridColumn='1 / 3'
+            gridRow='2 / auto'
+            data={sidebar.items}
+            // ml='-100px'
+            // style={{ transform: 'translate(calc(-100% - var(--space-8)))' }}
+          />
+        )}
+        <Box gridArea='content / content / auto / 8'>
+          <Outlet />
+        </Box>
+      </Grid>
     </Theme>
   )
 }

package/src/template/server/app.ts

@@ -5,7 +5,7 @@ import { AppleTouchIcon } from '#lib/apple-touch-icon/index'
 import { Favicon } from '#lib/favicon/index'
 import { serveStatic } from '@hono/node-server/serve-static'
 import { Fs, Http, Path } from '@wollybeard/kit'
-import { PROJECT_DATA } from 'virtual:polen/project/data'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { renderPage } from './render-page.jsx'
 import { view } from './view.ts'
 

package/src/template/server/render-page.tsx

@@ -1,4 +1,6 @@
+import { reportError } from '#api/server/report-error'
 import type { ReactRouter } from '#dep/react-router/index'
+import { ResponseInternalServerError } from '#lib/kit-temp'
 import type { ReactRouterAid } from '#lib/react-router-aid/index'
 import { Arr } from '@wollybeard/kit'
 import { StrictMode } from 'react'
@@ -22,7 +24,8 @@ export const renderPage = (
       </StrictMode>,
     )
   } catch (cause) {
-    throw new Error(`Failed to server side render the HTML`, { cause })
+    reportError(new Error(`Failed to server side render the HTML`, { cause }))
+    return ResponseInternalServerError()
   }
 
   if (__BUILDING__) {

package/src/template/server/ssg/generate.ts

@@ -2,7 +2,7 @@ import { Hono } from '#dep/hono/index'
 import type { ReactRouter } from '#dep/react-router/index'
 import { app } from '#template/server/app'
 import * as NodeFs from 'node:fs/promises'
-import { PROJECT_DATA } from 'virtual:polen/project/data'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { renderPage } from '../render-page.jsx'
 import { getRoutesPaths } from './get-route-paths.ts'
 

package/src/template/server/ssg/get-route-paths.ts

@@ -2,7 +2,7 @@ import { Grafaid } from '#lib/grafaid/index'
 import { visit } from 'graphql'
 // Or your specific import path for this type
 import { ReactRouterAid } from '#lib/react-router-aid/index'
-import { PROJECT_DATA } from 'virtual:polen/project/data'
+import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { routes } from '../../routes.jsx'
 
 // todo: Frameworks tend to colocate ssg data loaders with routes to solve the following