prev-cli 0.24.18 → 0.24.19

package/src/jsx/schemas/primitives.ts

@@ -0,0 +1,107 @@
+// src/jsx/schemas/primitives.ts
+// Zod schemas for primitive props - single source of truth
+import { z } from 'zod'
+import {
+  SpacingToken,
+  AlignToken,
+  BackgroundToken,
+  RadiusToken,
+  ColorToken,
+  SizeToken,
+  WeightToken,
+  FitToken,
+} from './tokens'
+
+// Children type - accepts VNode array or single VNode (normalized later)
+const Children = z.any()
+
+// Layout primitive: Col - Vertical stack
+export const ColProps = z.object({
+  gap: SpacingToken.optional(),
+  align: AlignToken.optional(),
+  padding: SpacingToken.optional(),
+  children: Children.optional(),
+})
+export type ColProps = z.infer<typeof ColProps>
+
+// Layout primitive: Row - Horizontal stack
+export const RowProps = z.object({
+  gap: SpacingToken.optional(),
+  align: AlignToken.optional(),
+  padding: SpacingToken.optional(),
+  children: Children.optional(),
+})
+export type RowProps = z.infer<typeof RowProps>
+
+// Layout primitive: Box - Container with styling
+export const BoxProps = z.object({
+  padding: SpacingToken.optional(),
+  bg: BackgroundToken.optional(),
+  radius: RadiusToken.optional(),
+  children: Children.optional(),
+})
+export type BoxProps = z.infer<typeof BoxProps>
+
+// Layout primitive: Spacer - Whitespace
+export const SpacerProps = z.object({
+  size: SpacingToken.optional(), // If absent, flex grow
+})
+export type SpacerProps = z.infer<typeof SpacerProps>
+
+// Layout primitive: Slot - State-dependent placeholder
+export const SlotProps = z.object({
+  name: z.string(),
+})
+export type SlotProps = z.infer<typeof SlotProps>
+
+// Content primitive: Text
+export const TextProps = z.object({
+  children: z.string().optional(),
+  size: SizeToken.optional(),
+  weight: WeightToken.optional(),
+  color: ColorToken.optional(),
+})
+export type TextProps = z.infer<typeof TextProps>
+
+// Content primitive: Icon
+export const IconProps = z.object({
+  name: z.string(),
+  size: SizeToken.optional(),
+  color: ColorToken.optional(),
+})
+export type IconProps = z.infer<typeof IconProps>
+
+// Content primitive: Image
+export const ImageProps = z.object({
+  src: z.string(),
+  alt: z.string().optional(),
+  fit: FitToken.optional(),
+})
+export type ImageProps = z.infer<typeof ImageProps>
+
+// Primitive type enum
+export const PrimitiveType = z.enum([
+  'col',
+  'row',
+  'box',
+  'spacer',
+  'slot',
+  'text',
+  'icon',
+  'image',
+  'component',
+])
+export type PrimitiveType = z.infer<typeof PrimitiveType>
+
+// Props union for validation
+export const PrimitiveProps = z.union([
+  ColProps,
+  RowProps,
+  BoxProps,
+  SpacerProps,
+  SlotProps,
+  TextProps,
+  IconProps,
+  ImageProps,
+])
+export type PrimitiveProps = z.infer<typeof PrimitiveProps>

package/src/jsx/schemas/tokens.ts

@@ -0,0 +1,60 @@
+// src/jsx/schemas/tokens.ts
+// Zod schemas for design tokens - single source of truth
+import { z } from 'zod'
+
+// Spacing tokens
+export const SpacingToken = z.enum(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'])
+export type SpacingToken = z.infer<typeof SpacingToken>
+
+// Alignment tokens
+export const AlignToken = z.enum(['start', 'center', 'end', 'stretch', 'between'])
+export type AlignToken = z.infer<typeof AlignToken>
+
+// Background tokens - shadcn-compatible
+export const BackgroundToken = z.enum([
+  'transparent',
+  'background',
+  'card',
+  'primary',
+  'secondary',
+  'muted',
+  'accent',
+  'destructive',
+  'input',
+])
+export type BackgroundToken = z.infer<typeof BackgroundToken>
+
+// Border radius tokens
+export const RadiusToken = z.enum(['none', 'sm', 'md', 'lg', 'xl', 'full'])
+export type RadiusToken = z.infer<typeof RadiusToken>
+
+// Color tokens - shadcn-compatible (foreground colors for text)
+export const ColorToken = z.enum([
+  'foreground',
+  'card-foreground',
+  'primary',
+  'primary-foreground',
+  'secondary',
+  'secondary-foreground',
+  'muted',
+  'muted-foreground',
+  'accent',
+  'accent-foreground',
+  'destructive',
+  'destructive-foreground',
+  'border',
+  'ring',
+])
+export type ColorToken = z.infer<typeof ColorToken>
+
+// Typography size tokens
+export const SizeToken = z.enum(['xs', 'sm', 'base', 'lg', 'xl', '2xl'])
+export type SizeToken = z.infer<typeof SizeToken>
+
+// Font weight tokens
+export const WeightToken = z.enum(['normal', 'medium', 'semibold', 'bold'])
+export type WeightToken = z.infer<typeof WeightToken>
+
+// Image fit tokens
+export const FitToken = z.enum(['cover', 'contain', 'fill'])
+export type FitToken = z.infer<typeof FitToken>

package/src/jsx/validation.ts

@@ -0,0 +1,77 @@
+// src/jsx/validation.ts
+// Configurable validation for JSX primitives
+import { z } from 'zod'
+
+/**
+ * Validation mode controls how schema validation behaves:
+ * - 'strict': throws on validation errors (useful for development/testing)
+ * - 'warn': logs warnings but continues (default in DEV)
+ * - 'off': no validation (default in production)
+ */
+export type ValidationMode = 'strict' | 'warn' | 'off'
+
+// DEV mode flag
+const DEV = process.env.NODE_ENV !== 'production'
+
+// Current validation mode - defaults based on environment
+let validationMode: ValidationMode = DEV ? 'warn' : 'off'
+
+/**
+ * Set the validation mode for JSX primitives
+ * @param mode - The validation mode to use
+ */
+export function setValidationMode(mode: ValidationMode): void {
+  validationMode = mode
+}
+
+/**
+ * Get the current validation mode
+ */
+export function getValidationMode(): ValidationMode {
+  return validationMode
+}
+
+/**
+ * Validate props against a Zod schema based on current mode.
+ * In 'strict' mode, throws on error.
+ * In 'warn' mode, logs a warning and continues.
+ * In 'off' mode, skips validation entirely.
+ *
+ * @param schema - Zod schema to validate against
+ * @param props - Props to validate
+ * @param componentName - Component name for error messages
+ */
+export function validateProps(
+  schema: z.ZodType,
+  props: unknown,
+  componentName: string
+): void {
+  if (validationMode === 'off') {
+    return
+  }
+
+  const result = schema.safeParse(props)
+
+  if (!result.success) {
+    const errorMessage = formatValidationError(componentName, result.error)
+
+    if (validationMode === 'strict') {
+      throw new Error(errorMessage)
+    }
+
+    // warn mode - log and continue
+    console.warn(errorMessage)
+  }
+}
+
+/**
+ * Format Zod validation error for display
+ */
+function formatValidationError(componentName: string, error: z.ZodError): string {
+  const issues = error.issues.map((issue) => {
+    const path = issue.path.length > 0 ? `${issue.path.join('.')}: ` : ''
+    return `  - ${path}${issue.message}`
+  })
+
+  return `[${componentName}] Invalid props:\n${issues.join('\n')}`
+}

package/src/jsx/vnode.ts

@@ -0,0 +1,159 @@
+// src/jsx/vnode.ts
+// Virtual Node representation - immutable tree structure
+import { z } from 'zod'
+import { PrimitiveType } from './schemas/primitives'
+
+export interface VNodeType {
+  id: string
+  type: z.infer<typeof PrimitiveType>
+  props: Record<string, unknown>
+  children?: VNodeType[]
+  componentName?: string
+}
+
+// VNode schema - recursive definition for runtime validation
+export const VNode: z.ZodType<VNodeType> = z.lazy(() =>
+  z.object({
+    id: z.string(),
+    type: PrimitiveType,
+    props: z.record(z.string(), z.unknown()),
+    children: z.array(VNode).optional(),
+    componentName: z.string().optional(),
+  })
+)
+
+// ============================================================
+// Render Context - isolated ID generation for concurrent safety
+// ============================================================
+
+/**
+ * Render context for isolated ID generation.
+ * Each render should use its own context to avoid ID conflicts
+ * when multiple renders execute concurrently.
+ */
+export interface RenderContext {
+  /** Generate unique ID for a node type */
+  nextId: (type: string) => string
+}
+
+/**
+ * Create a new render context with isolated ID counter.
+ * Use this for each render to ensure concurrent safety.
+ */
+export function createRenderContext(): RenderContext {
+  let counter = 0
+  return {
+    nextId: (type: string) => `${type}-${counter++}`,
+  }
+}
+
+// Global context for backward compatibility
+let globalContext = createRenderContext()
+
+/**
+ * Reset ID counter - call at start of each render.
+ * @deprecated Use createRenderContext() for concurrent safety
+ */
+export function resetIdCounter(): void {
+  globalContext = createRenderContext()
+}
+
+/**
+ * Get the current global render context.
+ * @internal
+ */
+export function getGlobalContext(): RenderContext {
+  return globalContext
+}
+
+/**
+ * Create an immutable VNode
+ * @param type - Node type (col, row, text, etc.)
+ * @param props - Node properties
+ * @param children - Child nodes
+ * @param context - Optional render context for ID generation (uses global if not provided)
+ */
+export function createVNode(
+  type: VNodeType['type'],
+  props: Record<string, unknown>,
+  children?: VNodeType[],
+  context?: RenderContext
+): VNodeType {
+  const ctx = context ?? globalContext
+  const node: VNodeType = {
+    id: ctx.nextId(type),
+    type,
+    props: Object.freeze({ ...props }),
+    children: children ? Object.freeze([...children]) as VNodeType[] : undefined,
+  }
+  return Object.freeze(node) as VNodeType
+}
+
+/**
+ * Create a component VNode (wraps rendered content)
+ * @param componentName - Name of the component
+ * @param props - Component properties
+ * @param children - Child nodes
+ * @param context - Optional render context for ID generation (uses global if not provided)
+ */
+export function createComponentVNode(
+  componentName: string,
+  props: Record<string, unknown>,
+  children?: VNodeType[],
+  context?: RenderContext
+): VNodeType {
+  const ctx = context ?? globalContext
+  const node: VNodeType = {
+    id: ctx.nextId('component'),
+    type: 'component',
+    props: Object.freeze({ ...props }),
+    children: children ? Object.freeze([...children]) as VNodeType[] : undefined,
+    componentName,
+  }
+  return Object.freeze(node) as VNodeType
+}
+
+/**
+ * Normalize children to array, converting strings/numbers to Text nodes
+ */
+export function normalizeChildren(children: unknown): VNodeType[] {
+  if (children === null || children === undefined) return []
+
+  const items = Array.isArray(children) ? children.flat(Infinity) : [children]
+
+  return items
+    .filter((item) => item !== null && item !== undefined && item !== false && item !== true)
+    .map((item) => {
+      // Convert strings and numbers to Text nodes
+      if (typeof item === 'string' || typeof item === 'number') {
+        return createVNode('text', { content: String(item) })
+      }
+      return item as VNodeType
+    })
+}
+
+/**
+ * Check structural equality of two VNodes (ignores IDs)
+ */
+export function vnodeEquals(a: VNodeType, b: VNodeType): boolean {
+  if (a.type !== b.type) return false
+  if (a.componentName !== b.componentName) return false
+
+  // Compare props (shallow)
+  const aProps = Object.entries(a.props).filter(([k]) => k !== 'children')
+  const bProps = Object.entries(b.props).filter(([k]) => k !== 'children')
+  if (aProps.length !== bProps.length) return false
+  for (const [key, value] of aProps) {
+    if (b.props[key] !== value) return false
+  }
+
+  // Compare children recursively
+  const aChildren = a.children || []
+  const bChildren = b.children || []
+  if (aChildren.length !== bChildren.length) return false
+  for (let i = 0; i < aChildren.length; i++) {
+    if (!vnodeEquals(aChildren[i], bChildren[i])) return false
+  }
+
+  return true
+}

package/src/primitives/index.ts

@@ -0,0 +1,8 @@
+// src/primitives/index.ts
+// Layout and content primitives for renderer-agnostic templates
+
+export * from './types'
+export * from './parser'
+export * from './template-parser'
+export * from './template-renderer'
+export * from './migrate'