polen 0.10.0-next.12 → 0.10.0-next.14

package/src/lib/kit-temp.ts

@@ -12,10 +12,8 @@
 //
 //
 
-import { Arr, Err, Fs, Http, Path, type Ts, Undefined } from '@wollybeard/kit'
-import { never } from '@wollybeard/kit/language'
+import { Arr, Err, Fs, Http, Path, Undefined } from '@wollybeard/kit'
 import type { ResolveHookContext } from 'node:module'
-import type { IsNever } from 'type-fest'
 
 export const arrayEquals = (a: any[], b: any[]) => {
   if (a.length !== b.length) return false
@@ -109,7 +107,7 @@ export const objPolicyFilter = <
   if (mode === 'allow') {
     // For allow mode, only add specified keys
     for (const key of keys) {
-      if (key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
         // @ts-expect-error
         result[key] = obj[key]
       }
@@ -220,3 +218,305 @@ export type ExtendsExact<$Input, $Constraint> =
       ? $Input
       : never
   : never
+
+/**
+ * Split an array into chunks of specified size
+ *
+ * @param array - The array to chunk
+ * @param size - The size of each chunk
+ * @returns Array of chunks
+ *
+ * @example
+ * ```ts
+ * chunk([1, 2, 3, 4, 5], 2) // [[1, 2], [3, 4], [5]]
+ * chunk(['a', 'b', 'c'], 3) // [['a', 'b', 'c']]
+ * ```
+ */
+export const chunk = <T>(array: readonly T[], size: number): T[][] => {
+  if (size <= 0) throw new Error('Chunk size must be greater than 0')
+  if (array.length === 0) return []
+
+  const chunks: T[][] = []
+  for (let i = 0; i < array.length; i += size) {
+    chunks.push(array.slice(i, i + size))
+  }
+  return chunks
+}
+
+export interface AsyncParallelOptions {
+  /**
+   * Maximum number of items to process concurrently
+   * @default 10
+   */
+  concurrency?: number
+
+  /**
+   * If true, stops processing on first error
+   * If false, continues processing all items even if some fail
+   * @default false
+   */
+  failFast?: boolean
+
+  /**
+   * Size of batches to process items in
+   * If not specified, all items are processed with the specified concurrency
+   */
+  batchSize?: number
+}
+
+export interface AsyncParallelResult<T, R> {
+  /** Successfully processed results */
+  results: R[]
+  /** Errors that occurred during processing */
+  errors: (Error & { item: T })[]
+  /** Whether all items were processed successfully */
+  success: boolean
+}
+
+/**
+ * Process items in parallel with configurable options
+ *
+ * @param items - Items to process
+ * @param operation - Async function to apply to each item (with optional index)
+ * @param options - Configuration options
+ * @returns Results and errors from processing
+ *
+ * @example
+ * ```ts
+ * const items = [1, 2, 3, 4, 5]
+ * const result = await asyncParallel(items, async (n, index) => n * 2, {
+ *   concurrency: 2,
+ *   batchSize: 3,
+ *   failFast: false
+ * })
+ * // result.results: [2, 4, 6, 8, 10]
+ * // result.errors: []
+ * // result.success: true
+ * ```
+ */
+export const asyncParallel = async <T, R>(
+  items: readonly T[],
+  operation: (item: T, index: number) => Promise<R>,
+  options: AsyncParallelOptions = {},
+): Promise<AsyncParallelResult<T, R>> => {
+  const { concurrency = 10, failFast = false, batchSize } = options
+
+  if (items.length === 0) {
+    return { results: [], errors: [], success: true }
+  }
+
+  const allResults: R[] = []
+  const allErrors: (Error & { item: T })[] = []
+
+  // If batchSize is specified, process in batches
+  if (batchSize !== undefined) {
+    const batches = chunk(items, batchSize)
+    let globalIndex = 0
+
+    for (const batch of batches) {
+      const batchResult = await processBatch(batch, operation, concurrency, failFast, globalIndex)
+      allResults.push(...batchResult.results)
+      allErrors.push(...batchResult.errors)
+      globalIndex += batch.length
+
+      if (failFast && batchResult.errors.length > 0) {
+        break
+      }
+    }
+  } else {
+    // Process all items with specified concurrency
+    const result = await processBatch(items, operation, concurrency, failFast, 0)
+    allResults.push(...result.results)
+    allErrors.push(...result.errors)
+  }
+
+  return {
+    results: allResults,
+    errors: allErrors,
+    success: allErrors.length === 0,
+  }
+}
+
+/**
+ * Process a batch of items with limited concurrency
+ */
+const processBatch = async <T, R>(
+  items: readonly T[],
+  operation: (item: T, index: number) => Promise<R>,
+  concurrency: number,
+  failFast: boolean,
+  startIndex: number = 0,
+): Promise<AsyncParallelResult<T, R>> => {
+  const results: R[] = []
+  const errors: (Error & { item: T })[] = []
+
+  // Process items in chunks based on concurrency limit
+  const chunks = chunk(items, concurrency)
+  let currentIndex = startIndex
+
+  for (const chunkItems of chunks) {
+    const promises = chunkItems.map(async (item, chunkIndex) => {
+      const globalIndex = currentIndex + chunkIndex
+      try {
+        const result = await operation(item, globalIndex)
+        return { success: true, result, item }
+      } catch (error) {
+        const enhancedError = error instanceof Error ? error : new Error(String(error))
+        Object.assign(enhancedError, { item })
+        return { success: false, error: enhancedError as Error & { item: T }, item }
+      }
+    })
+
+    currentIndex += chunkItems.length
+
+    const chunkResults = await Promise.allSettled(promises)
+
+    for (const promiseResult of chunkResults) {
+      if (promiseResult.status === 'fulfilled') {
+        const { success, result, error, item } = promiseResult.value
+        if (success) {
+          results.push(result!)
+        } else {
+          errors.push(error!)
+          if (failFast) {
+            return { results, errors, success: false }
+          }
+        }
+      } else {
+        // This shouldn't happen since we're catching errors above
+        // But handle it just in case
+        const error = new Error('Unexpected promise rejection') as Error & { item: any }
+        errors.push(error)
+        if (failFast) {
+          return { results, errors, success: false }
+        }
+      }
+    }
+  }
+
+  return { results, errors, success: errors.length === 0 }
+}
+
+// /**
+//  * Reduce an array asynchronously, processing each item in sequence
+//  *
+//  * @param items - Array of items to process
+//  * @param reducer - Async function that takes accumulator and current item
+//  * @param initial - Initial value for the accumulator
+//  * @returns Final accumulated value
+//  *
+//  * @example
+//  * ```ts
+//  * const numbers = [1, 2, 3, 4]
+//  * const sum = await asyncReduce(numbers, async (acc, n) => acc + n, 0)
+//  * // sum: 10
+//  *
+//  * const transforms = [addHeader, addFooter, minify]
+//  * const html = await asyncReduce(transforms, async (html, transform) => transform(html), initialHtml)
+//  * ```
+//  */
+// export const asyncReduce = async <T, R>(
+//   items: readonly T[],
+//   reducer: (accumulator: R, current: T, index: number) => Promise<R> | R,
+//   initial: R,
+// ): Promise<R> => {
+//   let result = initial
+//   for (let i = 0; i < items.length; i++) {
+//     const item = items[i]!
+//     result = await reducer(result, item, i)
+//   }
+//   return result
+// }
+
+// /**
+//  * Curried version of asyncReduce for functions that transform a value
+//  *
+//  * @param transformers - Array of transformer functions
+//  * @returns A function that takes an initial value and applies all transformers
+//  *
+//  * @example
+//  * ```ts
+//  * const transformers = [addHeader, addFooter, minify]
+//  * const applyTransforms = asyncReduceWith(transformers)
+//  * const finalHtml = await applyTransforms(initialHtml)
+//  *
+//  * // For simple pipelines where each function transforms the same type
+//  * const htmlPipeline = asyncReduceWith([
+//  *   (html) => html.replace('foo', 'bar'),
+//  *   async (html) => await prettify(html),
+//  *   (html) => html.trim()
+//  * ])
+//  * ```
+//  */
+// export const asyncReduceWith = <T>(
+//   transformers: readonly ((value: T) => Promise<T> | T)[],
+// ) => {
+//   return async (initial: T): Promise<T> => {
+//     return asyncReduce(transformers, (value, transform) => transform(value), initial)
+//   }
+// }
+
+/**
+ * Reduce an array asynchronously with context, processing each item in sequence
+ *
+ * @param items - Array of items to process
+ * @param reducer - Async function that takes accumulator, current item, and context
+ * @param initial - Initial value for the accumulator
+ * @param context - Context object passed to each reducer call
+ * @returns Final accumulated value
+ *
+ * @example
+ * ```ts
+ * const transformers = [transformer1, transformer2]
+ * const ctx = { request: req, response: res }
+ * const result = await asyncReduceWithContext(
+ *   transformers,
+ *   async (html, transformer) => transformer(html, ctx),
+ *   initialHtml,
+ *   ctx
+ * )
+ * ```
+ */
+export const asyncReduce = async <T, R, C>(
+  items: readonly T[],
+  reducer: (accumulator: R, current: T, context: C, index: number) => Promise<R> | R,
+  initial: R,
+  context: C,
+): Promise<R> => {
+  let result = initial
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]!
+    result = await reducer(result, item, context, i)
+  }
+  return result
+}
+
+/**
+ * Curried version of asyncReduceWithContext for functions that transform a value with context
+ *
+ * @param transformers - Array of transformer functions that take value and context
+ * @returns A function that takes an initial value and context, and applies all transformers
+ *
+ * @example
+ * ```ts
+ * const transformers = [
+ *   (html, ctx) => html.replace('{{url}}', ctx.req.url),
+ *   async (html, ctx) => await ctx.minify(html),
+ * ]
+ * const applyTransforms = asyncReduceWithContextWith(transformers)
+ * const finalHtml = await applyTransforms(initialHtml, ctx)
+ * ```
+ */
+export const asyncReduceWith = <T, C>(
+  transformers: readonly ((value: T, context: C) => Promise<T> | T)[],
+  context: C,
+) => {
+  return async (initial: T): Promise<T> => {
+    return asyncReduce(
+      transformers,
+      (value, transform, ctx) => transform(value, ctx),
+      initial,
+      context,
+    )
+  }
+}

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

@@ -1,8 +1,6 @@
-import { ensureEnd } from '#lib/kit-temp'
 import { VitePluginJson } from '#lib/vite-plugin-json/index'
-import { superjson } from '#singletons/superjson'
+import { debugPolen } from '#singletons/debug'
 import { type ComputedRef, effect, isRef } from '@vue/reactivity'
-import { Debug } from '@wollybeard/kit'
 import type { Plugin, ViteDevServer } from 'vite'
 
 interface ReactiveDataOptions {
@@ -19,11 +17,9 @@ interface ReactiveDataOptions {
    * - 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
+   * Default: JSON
    * Only used when includeJsonPlugin is true
    */
   codec?: VitePluginJson.Codec
@@ -32,47 +28,46 @@ interface ReactiveDataOptions {
    @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')
+const pluginDebug = debugPolen.sub('vite-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 codec = options.codec ?? JSON
+  const moduleId = options.moduleId
   const name = options.name ?? `reactive-data`
 
-  let server: ViteDevServer
-  let updateTimer: NodeJS.Timeout | undefined
-  let updateScheduled = false
+  const debug = pluginDebug.sub(name)
+  debug('constructor', { moduleId })
 
-  const doUpdate = () => {
-    debug('update')
-    updateTimer = undefined
-    updateScheduled = false
-    if (!server) return
-    const moduleNode = server.moduleGraph.getModuleById(moduleId)
+  let $server: ViteDevServer
+  let $invalidationScheduled = false
+
+  const tryInvalidate = () => {
+    $invalidationScheduled = false
+    // updateTimer = undefined
+    if (!$server) throw new Error('Server not available yet - this should be impossible')
+    const moduleNode = $server.moduleGraph.getModuleById(moduleId)
     if (moduleNode) {
-      server.moduleGraph.invalidateModule(moduleNode)
+      debug('invalidate', { id: moduleNode.id })
+      $server.moduleGraph.invalidateModule(moduleNode)
+    } else {
+      debug('cannot invalidate', {
+        reason: 'notInModuleGraph',
+        moduleId,
+        hint: 'maybe it was not loaded yet',
+      })
     }
   }
 
-  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)
-    }
+  const scheduleInvalidate = () => {
+    if ($invalidationScheduled) return // already scheduled
+
+    $invalidationScheduled = true
+
+    if (!$server) return // server will flush when ready
+
+    tryInvalidate()
   }
 
   // Helper to get the current data value
@@ -90,20 +85,21 @@ export const create = (options: ReactiveDataOptions): Plugin => {
   effect(() => {
     // Access data to track dependencies
     const data = getData()
-    debug('data changed:', data)
-    // Trigger update only if server is available
-    if (server) {
-      scheduleUpdate()
-    }
+    debug('effect triggered', { data })
+
+    scheduleInvalidate()
   })
 
   return {
     name,
 
     configureServer(_server) {
-      server = _server
-      // Trigger initial update since server is now available
-      scheduleUpdate()
+      debug('hook configureServer')
+      $server = _server
+      if ($invalidationScheduled) {
+        debug('try invalidate scheduled before server was ready')
+        tryInvalidate()
+      }
     },
 
     resolveId(id) {
@@ -112,20 +108,18 @@ export const create = (options: ReactiveDataOptions): Plugin => {
       }
     },
 
-    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)
-      },
+    // todo make use of Vite's builtin json plugin
+    // for example, call it here somehow
+    load(id) {
+      if (id !== moduleId) return
+
+      const data = getData()
+      debug('hook load', { data })
+
+      return {
+        code: codec.stringify(data),
+        map: null,
+      }
     },
   }
 }

package/src/package-paths.ts

@@ -49,11 +49,11 @@ export const packagePaths: PackagePaths = {
   template: {
     rootDir: templateDir,
     server: {
-      app: Path.join(templateDir, `server/app.js`),
-      entrypoint: Path.join(templateDir, `server/main.js`),
+      app: Path.join(templateDir, `server/app${sourceKind}`),
+      entrypoint: Path.join(templateDir, `server/main${sourceKind}`),
     },
     client: {
-      entrypoint: Path.join(templateDir, `entry.client.jsx`),
+      entrypoint: Path.join(templateDir, `entry.client${isRunningFromSource ? `.tsx` : `.js`}`),
     },
   },
 }

package/src/template/components/Link.tsx

@@ -3,6 +3,7 @@ import type { LinkProps as LinkPropsReactRouter } from 'react-router'
 import { Link as LinkReactRouter, useLocation } from 'react-router'
 // todo: #lib/kit-temp does not work as import
 import { ObjPartition } from '../../lib/kit-temp.ts'
+import { useClientOnly } from '../hooks/useClientOnly.ts'
 import type { LinkPropsRadix } from './RadixLink.tsx'
 import { LinkRadix } from './RadixLink.tsx'
 
@@ -22,18 +23,25 @@ const reactRouterPropKeys = [
 export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> = props => {
   const location = useLocation()
   const toPathExp = typeof props.to === 'string' ? props.to : props.to.pathname || ''
-  const active = getPathActiveReport(toPathExp, location.pathname)
+
+  const active = useClientOnly(
+    () => getPathActiveReport(toPathExp, location.pathname),
+    { is: false, isDirect: false, isDescendant: false },
+  )
 
   const { picked: reactRouterProps, omitted: radixProps } = ObjPartition(props, reactRouterPropKeys)
 
+  // Only add data attributes if they're true
+  const linkRadixProps = {
+    ...radixProps,
+    asChild: true,
+    ...(active.is && { 'data-active': true }),
+    ...(active.isDirect && { 'data-active-direct': true }),
+    ...(active.isDescendant && { 'data-active-descendant': true }),
+  }
+
   return (
-    <LinkRadix
-      asChild
-      {...radixProps}
-      data-active={active.is || undefined}
-      data-active-direct={active.isDirect || undefined}
-      data-active-descendant={active.isdescendant || undefined}
-    >
+    <LinkRadix {...linkRadixProps}>
       <LinkReactRouter {...reactRouterProps} />
     </LinkRadix>
   )
@@ -42,7 +50,7 @@ export const Link: FC<LinkPropsReactRouter & Omit<LinkPropsRadix, 'asChild'>> =
 export interface PathActiveReport {
   is: boolean
   isDirect: boolean
-  isdescendant: boolean
+  isDescendant: boolean
 }
 
 export const getPathActiveReport = (
@@ -54,13 +62,13 @@ export const getPathActiveReport = (
   const normalizedCurrentPath = currentPathExp.startsWith('/') ? currentPathExp.slice(1) : currentPathExp
 
   const isDirect = normalizedCurrentPath === normalizedPath
-  const isdescendant = normalizedCurrentPath.startsWith(normalizedPath + '/')
+  const isDescendant = normalizedCurrentPath.startsWith(normalizedPath + '/')
     && normalizedCurrentPath !== normalizedPath
-  const is = isDirect || isdescendant
+  const is = isDirect || isDescendant
 
   return {
     is,
     isDirect,
-    isdescendant,
+    isDescendant,
   }
 }

package/src/template/components/content/GraphQLDocumentWithSchema.tsx

@@ -1,4 +1,3 @@
-import type { GraphQLSchema } from 'graphql'
 import React from 'react'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
 import { GraphQLDocument } from '../../../lib/graphql-document/components/GraphQLDocument.tsx'
@@ -10,9 +9,5 @@ import type { GraphQLDocumentProps } from '../../../lib/graphql-document/compone
  */
 export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema'>> = (props) => {
   const schema = PROJECT_DATA.schema?.versions[0]?.after
-  console.log('Template wrapper - schema:', schema ? 'EXISTS' : 'UNDEFINED')
-  console.log('Template wrapper - props:', props)
-  console.log('Template wrapper - PROJECT_DATA.schema:', PROJECT_DATA.schema)
-
   return <GraphQLDocument {...props} schema={schema} />
 }

package/src/template/components/content/GraphQLDocumentWrapper.tsx

@@ -24,8 +24,8 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
           theme: 'light', // You can make this dynamic based on theme
         }).then(html => {
           setHighlightedHtml(html)
-        }).catch(err => {
-          console.error('Failed to highlight code:', err)
+        }).catch(() => {
+          // Silently fall back to unhighlighted code
         })
       }
 
@@ -33,11 +33,12 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
       if (typeof window !== 'undefined') {
         import('virtual:polen/project/data.jsonsuper').then(PROJECT_DATA => {
           const s = PROJECT_DATA.default?.schema?.versions?.[0]?.after
+          // Schema loaded successfully
           if (s) {
             setSchema(s)
           }
-        }).catch(err => {
-          console.error('Failed to load schema:', err)
+        }).catch(() => {
+          // Schema loading is optional - continue without it
         })
       }
     }, [props.children])
@@ -68,15 +69,21 @@ export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'sch
           schema={schema}
           highlightedHtml={highlightedHtml || undefined}
           options={{
+            debug: false, // Default to false for shipping
             ...props.options,
             onNavigate: handleNavigate,
-            debug: false, // Disable debug mode for shipping
           }}
         />
       </div>
     )
   } catch (err) {
-    console.error('GraphQLDocumentWithSchema error:', err)
-    return <div>Error rendering GraphQL document</div>
+    // Fall back to plain code block on error
+    return (
+      <div data-testid='graphql-document' className='graphql-document graphql-document-static'>
+        <pre className='shiki'>
+          <code className="language-graphql">{props.children}</code>
+        </pre>
+      </div>
+    )
   }
 }

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

@@ -63,7 +63,7 @@ const SBLink: React.FC<{
         display: `block`,
         textDecoration: `none`,
         color: active.is ? `var(--accent-12)` : undefined,
-        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isdescendant ? `var(--accent-1)` : `transparent`,
+        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isDescendant ? `var(--accent-1)` : `transparent`,
         borderRadius: `var(--radius-2)`,
       }}
     >
@@ -145,7 +145,7 @@ const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
       style={{
         textDecoration: `none`,
         color: active.is ? `var(--accent-12)` : undefined,
-        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isdescendant ? `var(--accent-1)` : `transparent`,
+        backgroundColor: active.isDirect ? `var(--accent-2)` : active.isDescendant ? `var(--accent-1)` : `transparent`,
         borderBottomRightRadius: `var(--radius-2)`,
         borderTopRightRadius: `var(--radius-2)`,
       }}

package/src/template/entry.client.tsx

@@ -1,6 +1,3 @@
-// TODO it seems more logical to have this asset imported in the server entry.
-// But then, we won't get it from the client manifest. But we could get it from the server manifest. Should we do that?
-// But then, that wouldn't work for SPA. Does that matter? Just put a conditional here e.g. if (import.meta.env.PROD) ...?
 import '@radix-ui/themes/styles.css'
 import './styles/code-block.css'
 import { ReactDomClient } from '#dep/react-dom-client/index'

package/src/template/hooks/useClientOnly.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook that returns a server value during SSR and switches to client value after hydration
+ *
+ * @param clientValue - Function that returns the value to use on the client
+ * @param serverValue - Value to use during SSR
+ * @returns The appropriate value based on rendering context
+ */
+export function useClientOnly<T>(
+  clientValue: () => T,
+  serverValue: T,
+): T {
+  const [value, setValue] = useState<T>(serverValue)
+
+  useEffect(() => {
+    setValue(clientValue())
+  }, [])
+
+  return value
+}