@kubb/renderer-jsx 5.0.0-alpha.33

package/src/Renderer.ts

@@ -0,0 +1,184 @@
+import { createContext } from 'react'
+import Reconciler, { type ReactContext } from 'react-reconciler'
+import { DefaultEventPriority, NoEventPriority } from 'react-reconciler/constants.js'
+import { appendChildNode, createNode, createTextNode, insertBeforeNode, removeChildNode, setAttribute, setTextNodeValue } from './dom.ts'
+import type { KubbReactNode } from './types'
+import type { DOMElement, DOMNodeAttribute, ElementNames, TextNode } from './types.ts'
+
+declare module 'react-reconciler' {
+  // @ts-expect-error custom override
+  interface Reconciler {
+    updateContainerSync(element: KubbReactNode, container: unknown, parentComponent: any, callback?: null | (() => void)): void
+    flushSyncWork(): void
+    createContainer(
+      containerInfo: unknown,
+      tag: Reconciler.RootTag,
+      hydrationCallbacks: null | Reconciler.SuspenseHydrationCallbacks<any>,
+      isStrictMode: boolean,
+      concurrentUpdatesByDefaultOverride: null | boolean,
+      identifierPrefix: string,
+      onUncaughtError: (error: Error) => void,
+      onCaughtError: (error: Error) => void,
+      onRecoverableError: (error: Error) => void,
+      transitionCallbacks: null | Reconciler.TransitionTracingCallbacks,
+    ): Reconciler.OpaqueRoot
+  }
+}
+
+type Props = Record<string, unknown>
+
+type HostContext = {
+  type: ElementNames
+  isFile: boolean
+  isSource: boolean
+}
+
+let currentUpdatePriority = NoEventPriority
+
+/**
+ * @link https://www.npmjs.com/package/react-devtools-inline
+ * @link https://github.com/nitin42/Making-a-custom-React-renderer/blob/master/part-one.md
+ * @link https://github.com/facebook/react/tree/main/packages/react-reconciler#practical-examples
+ * @link https://github.com/vadimdemedes/ink
+ * @link https://github.com/pixijs/pixi-react/tree/main/packages
+ * @link https://github.com/diegomura/react-pdf/blob/master/packages/reconciler/src/reconciler-31.ts
+ */
+export const Renderer = Reconciler({
+  getRootHostContext: () => ({
+    type: 'kubb-root',
+    isFile: false,
+    isSource: false,
+  }),
+  prepareForCommit: () => {
+    return null
+  },
+  preparePortalMount: () => null,
+  clearContainer: () => false,
+  resetAfterCommit(rootNode: DOMElement) {
+    if (typeof rootNode.onRender === 'function') {
+      rootNode.onRender()
+    }
+  },
+  getChildHostContext(parentHostContext: HostContext, type: ElementNames) {
+    const isInsideText = type === 'kubb-text'
+    const isFile = type === 'kubb-file' || parentHostContext.isFile
+    const isSource = type === 'kubb-source' || parentHostContext.isSource
+
+    return { isInsideText, isFile, isSource, type }
+  },
+  shouldSetTextContent: () => false,
+  createInstance(originalType: ElementNames, newProps: Props, _root: DOMElement) {
+    const node = createNode(originalType)
+
+    for (const [key, value] of Object.entries(newProps)) {
+      if (key === 'children') {
+        continue
+      }
+
+      // Skip undefined values to match React's behavior
+      if (value !== undefined) {
+        setAttribute(node, key, value as DOMNodeAttribute)
+      }
+    }
+
+    return node
+  },
+  createTextInstance(text: string, _root: DOMElement, hostContext: HostContext) {
+    if (hostContext.isFile && !hostContext.isSource) {
+      throw new Error(`[react] '${text}' should be part of <File.Source> component when using the <File/> component`)
+    }
+
+    return createTextNode(text)
+  },
+  resetTextContent() {},
+  hideTextInstance(node: TextNode) {
+    setTextNodeValue(node, '')
+  },
+  unhideTextInstance(node: TextNode, text: string) {
+    setTextNodeValue(node, text)
+  },
+  getPublicInstance: (instance) => instance,
+  appendInitialChild: appendChildNode,
+  appendChild: appendChildNode,
+  insertBefore: insertBeforeNode,
+  finalizeInitialChildren(_node, _type, _props, _rootNode) {
+    return false
+  },
+  supportsMutation: true,
+  isPrimaryRenderer: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  beforeActiveInstanceBlur() {},
+  afterActiveInstanceBlur() {},
+  detachDeletedInstance() {},
+  getInstanceFromNode: () => null,
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
+  appendChildToContainer: appendChildNode,
+  insertInContainerBefore: insertBeforeNode,
+  removeChildFromContainer(node: DOMElement, removeNode: TextNode) {
+    removeChildNode(node, removeNode)
+  },
+  commitMount() {},
+  commitUpdate(node: DOMElement, _payload, _type, _oldProps: Props, newProps: Props) {
+    const { props } = newProps
+
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        // Skip undefined values to match React's behavior
+        if (value !== undefined) {
+          setAttribute(node, key, value as DOMNodeAttribute)
+        }
+      }
+    }
+  },
+  commitTextUpdate(node: TextNode, _oldText, newText) {
+    setTextNodeValue(node, newText)
+  },
+  removeChild(node: DOMElement, removeNode: TextNode) {
+    removeChildNode(node, removeNode)
+  },
+  setCurrentUpdatePriority: (newPriority: number) => {
+    currentUpdatePriority = newPriority
+  },
+  getCurrentUpdatePriority: () => currentUpdatePriority,
+  resolveUpdatePriority() {
+    if (currentUpdatePriority !== NoEventPriority) {
+      return currentUpdatePriority
+    }
+
+    return DefaultEventPriority
+  },
+  maySuspendCommit() {
+    return false
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  NotPendingTransition: undefined,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  HostTransitionContext: createContext(null) as unknown as ReactContext<unknown>,
+  resetFormInstance() {},
+  requestPostPaintCallback() {},
+  shouldAttemptEagerTransition() {
+    return false
+  },
+  trackSchedulerEvent() {},
+  resolveEventType() {
+    return null
+  },
+  resolveEventTimeStamp() {
+    return -1.1
+  },
+  preloadInstance() {
+    return true
+  },
+  startSuspendingCommit() {},
+  suspendInstance() {},
+  waitForCommitToBeReady() {
+    return null
+  },
+})
+
+export type { FiberRoot } from 'react-reconciler'

package/src/Runtime.tsx

@@ -0,0 +1,171 @@
+import { onProcessExit } from '@internals/utils'
+import type { FileNode } from '@kubb/ast/types'
+import { ConcurrentRoot } from 'react-reconciler/constants.js'
+import { Root } from './components/Root.tsx'
+import { createNode } from './dom.ts'
+import type { FiberRoot } from './Renderer.ts'
+import { Renderer } from './Renderer.ts'
+import type { DOMElement, KubbReactElement } from './types.ts'
+import { processFiles } from './utils.ts'
+
+type Options = {
+  /**
+   * Set this to true to always see the result of the render in the console(line per render)
+   */
+  debug?: boolean
+}
+
+export class Runtime {
+  readonly #options: Options
+  #isUnmounted: boolean
+  #renderError?: Error
+
+  exitPromise?: Promise<void>
+
+  nodes: FileNode[] = []
+  readonly #container: FiberRoot
+  readonly #rootNode: DOMElement
+
+  constructor(options: Options) {
+    this.#options = options
+    this.#rootNode = createNode('kubb-root')
+    this.#rootNode.onRender = this.onRender
+    this.#rootNode.onImmediateRender = this.onRender
+    this.#isUnmounted = false
+    this.unmount.bind(this)
+
+    // Intercept noisy React errors
+    console.error = (data: string | Error) => {
+      const message = typeof data === 'string' ? data : data?.message
+      if (
+        message?.match(/Encountered two children with the same key/gi) ||
+        message?.match(/React will try to recreat/gi) ||
+        message?.match(/Each child in a list should have a unique/gi) ||
+        message?.match(/The above error occurred in the <KubbErrorBoundary/gi) ||
+        message?.match(/A React Element from an older version of React was render/gi)
+      ) {
+        return
+      }
+      console.log(data)
+    }
+
+    const logRecoverableError = typeof reportError === 'function' ? reportError : console.error
+
+    const rootTag = ConcurrentRoot
+    this.#container = Renderer.createContainer(
+      this.#rootNode,
+      rootTag,
+      null,
+      false,
+      false,
+      'id',
+      logRecoverableError,
+      logRecoverableError,
+      logRecoverableError,
+      null,
+    )
+
+    // Unmount when process exits
+    // Unmount when process exits
+    this.unsubscribeExit = onProcessExit((code) => {
+      this.unmount(code)
+    })
+  }
+
+  #renderPromise: Promise<void> = Promise.resolve()
+  resolveExitPromise: () => void = () => {}
+  rejectExitPromise: (reason?: Error) => void = () => {}
+  unsubscribeExit: () => void = () => {}
+
+  onRender: () => Promise<void> = () => {
+    const previous = this.#renderPromise
+
+    const task = previous
+      .catch(() => {})
+      .then(async () => {
+        if (this.#isUnmounted) {
+          return
+        }
+
+        const files = await processFiles(this.#rootNode)
+
+        this.nodes.push(...files)
+
+        if (!this.#options?.debug) {
+          return
+        }
+      })
+
+    this.#renderPromise = task.catch((error) => {
+      this.onError(error as Error)
+    })
+
+    return this.#renderPromise
+  }
+
+  onError(error: Error): void {
+    // Store the error to be thrown after render completes
+    this.#renderError = error
+  }
+
+  onExit(error?: Error): void {
+    setTimeout(() => {
+      this.unmount(error)
+    }, 0)
+  }
+
+  async render(node: KubbReactElement): Promise<void> {
+    const props = {
+      onExit: this.onExit.bind(this),
+      onError: this.onError.bind(this),
+    }
+
+    const element = <Root {...props}>{node}</Root>
+
+    Renderer.updateContainerSync(element, this.#container, null, null)
+    Renderer.flushSyncWork()
+    await this.#renderPromise
+
+    // Throw any errors that occurred during rendering
+    if (this.#renderError) {
+      const error = this.#renderError
+      this.#renderError = undefined
+      throw error
+    }
+  }
+
+  unmount(error?: Error | number | null): void {
+    if (this.#isUnmounted) {
+      return
+    }
+
+    if (this.#options?.debug) {
+      console.log('Unmount', error)
+    }
+
+    this.onRender()
+    this.unsubscribeExit()
+
+    this.#isUnmounted = true
+
+    Renderer.updateContainerSync(null, this.#container, null, null)
+
+    if (error instanceof Error) {
+      this.rejectExitPromise(error)
+      return
+    }
+
+    this.resolveExitPromise()
+  }
+
+  async waitUntilExit(): Promise<void> {
+    if (!this.exitPromise) {
+      this.exitPromise = new Promise((resolve, reject) => {
+        this.resolveExitPromise = resolve
+        this.rejectExitPromise = reject
+      })
+    }
+
+    return this.exitPromise
+  }
+}

package/src/components/Const.tsx

@@ -0,0 +1,44 @@
+import type { JSDoc, Key, KubbReactElement, KubbReactNode } from '../types.ts'
+
+export type ConstProps = {
+  key?: Key
+  /**
+   * Name of the const
+   */
+  name: string
+  /**
+   * Does this type need to be exported.
+   */
+  export?: boolean
+  /**
+   * Type to make the const being typed
+   */
+  type?: string
+  /**
+   * Options for JSdocs.
+   */
+  JSDoc?: JSDoc
+  /**
+   * Use of `const` assertions
+   */
+  asConst?: boolean
+  /**
+   * Children nodes.
+   */
+  children?: KubbReactNode
+}
+
+/**
+ * Generates a TypeScript constant declaration.
+ */
+export function Const({ children, ...props }: ConstProps): KubbReactElement {
+  const { name, export: canExport, type, JSDoc, asConst } = props
+
+  return (
+    <kubb-const name={name} type={type} export={canExport} asConst={asConst} JSDoc={JSDoc}>
+      {children}
+    </kubb-const>
+  )
+}
+
+Const.displayName = 'Const'

package/src/components/File.tsx

@@ -0,0 +1,106 @@
+import type { ExportNode, ImportNode, SourceNode } from '@kubb/ast/types'
+import type { Key, KubbReactElement, KubbReactNode } from '../types.ts'
+
+type BasePropsWithBaseName = {
+  /**
+   * Name to be used to dynamically create the baseName(based on input.path).
+   * Based on UNIX basename
+   * @link https://nodejs.org/api/path.html#pathbasenamepath-suffix
+   */
+  baseName: `${string}.${string}`
+  /**
+   * Path will be full qualified path to a specified file.
+   */
+  path: string
+}
+
+type BasePropsWithoutBaseName = {
+  baseName?: never
+  /**
+   * Path will be full qualified path to a specified file.
+   */
+  path?: string
+}
+
+type BaseProps = BasePropsWithBaseName | BasePropsWithoutBaseName
+
+type Props<TMeta> = BaseProps & {
+  key?: Key
+  meta?: TMeta
+  banner?: string
+  footer?: string
+  children?: KubbReactNode
+}
+
+/**
+ * Adds files to the FileManager
+ */
+export function File<TMeta extends object = object>({ children, ...props }: Props<TMeta>): KubbReactElement {
+  const { baseName, path } = props
+
+  if (!baseName || !path) {
+    return <>{children}</>
+  }
+
+  return <kubb-file {...props}>{children}</kubb-file>
+}
+
+File.displayName = 'File'
+
+type FileSourceProps = Omit<SourceNode, 'kind' | 'value'> & {
+  key?: Key
+  children?: KubbReactNode
+}
+
+/**
+ * File.Source
+ *
+ * Marks a block of source text to be associated with the current file when
+ * rendering with the FileCollector. Children are treated as the source string.
+ */
+function FileSource({ children, ...props }: FileSourceProps): KubbReactElement {
+  const { name, isExportable, isIndexable, isTypeOnly } = props
+
+  return (
+    <kubb-source name={name} isTypeOnly={isTypeOnly} isExportable={isExportable} isIndexable={isIndexable}>
+      {children}
+    </kubb-source>
+  )
+}
+
+FileSource.displayName = 'FileSource'
+
+export type FileExportProps = Omit<ExportNode, 'kind'> & { key?: Key }
+
+/**
+ * File.Export
+ *
+ * Declares an export entry for the current file. This will be collected by
+ * the FileCollector for later emission.
+ */
+function FileExport(props: FileExportProps): KubbReactElement {
+  const { name, path, isTypeOnly, asAlias } = props
+
+  return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly} asAlias={asAlias} />
+}
+
+FileExport.displayName = 'FileExport'
+
+export type FileImportProps = Omit<ImportNode, 'kind'> & { key?: Key }
+
+/**
+ * File.Import
+ *
+ * Declares an import entry for the current file.
+ */
+function FileImport(props: FileImportProps): KubbReactElement {
+  const { name, root, path, isTypeOnly, isNameSpace } = props
+
+  return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly} />
+}
+
+FileImport.displayName = 'FileImport'
+
+File.Export = FileExport
+File.Import = FileImport
+File.Source = FileSource

package/src/components/Function.tsx

@@ -0,0 +1,107 @@
+import type { JSDoc, Key, KubbReactElement, KubbReactNode } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Name of the function.
+   */
+  name: string
+  /**
+   * Add default when export is being used
+   */
+  default?: boolean
+  /**
+   * Parameters/options/props that need to be used.
+   */
+  params?: string
+  /**
+   * Does this function need to be exported.
+   */
+  export?: boolean
+  /**
+   * Does the function has async/promise behavior.
+   * This will also add `Promise<returnType>` as the returnType.
+   */
+  async?: boolean
+  /**
+   * Generics that needs to be added for TypeScript.
+   */
+  generics?: string | string[]
+  /**
+   * ReturnType(see async for adding Promise type).
+   */
+  returnType?: string
+  /**
+   * Options for JSdocs.
+   */
+  JSDoc?: JSDoc
+  /**
+   * Children nodes.
+   */
+  children?: KubbReactNode
+}
+
+/**
+ * Generates a TypeScript function declaration.
+ */
+export function Function({ children, ...props }: Props): KubbReactElement {
+  const { name, default: isDefault, export: canExport, async: isAsync, generics, params, returnType, JSDoc } = props
+
+  // Normalize generics array to comma-separated string for DOM attribute storage
+  const genericsString = Array.isArray(generics) ? generics.join(', ').trim() : generics
+
+  return (
+    <kubb-function
+      name={name}
+      params={params}
+      export={canExport}
+      default={isDefault}
+      async={isAsync}
+      generics={genericsString}
+      returnType={returnType}
+      JSDoc={JSDoc}
+    >
+      {children}
+    </kubb-function>
+  )
+}
+
+Function.displayName = 'Function'
+
+type ArrowFunctionProps = Props & {
+  /**
+   * Create Arrow function in one line
+   */
+  singleLine?: boolean
+}
+
+/**
+ * ArrowFunction
+ *
+ * Renders an arrow function definition. Supports the same flags as `Function`.
+ * Use `singleLine` to render the body as a single-line expression.
+ */
+function ArrowFunction({ children, ...props }: ArrowFunctionProps) {
+  const { name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc, singleLine } = props
+
+  const genericsString = Array.isArray(generics) ? generics.join(', ').trim() : generics
+
+  return (
+    <kubb-arrow-function
+      name={name}
+      params={params}
+      export={canExport}
+      default={isDefault}
+      async={async}
+      generics={genericsString}
+      returnType={returnType}
+      singleLine={singleLine}
+      JSDoc={JSDoc}
+    >
+      {children}
+    </kubb-arrow-function>
+  )
+}
+
+ArrowFunction.displayName = 'ArrowFunction'
+Function.Arrow = ArrowFunction

package/src/components/Jsx.tsx

@@ -0,0 +1,34 @@
+import type { KubbReactElement } from '../types.ts'
+
+type Props = {
+  /**
+   * Raw JSX string to embed verbatim in the generated code.
+   * Supports JSX fragments (`<>…</>`), elements, and any valid JSX syntax.
+   * @example
+   * ```tsx
+   * <Jsx>{'<>\n  <a href={href}>Open</a>\n</>'}</Jsx>
+   * ```
+   */
+  children?: string
+}
+
+/**
+ * Embeds a raw JSX string verbatim in the generated source code.
+ *
+ * Use this component when you need to include JSX markup (including fragments
+ * `<>…</>`) in the body of a generated function or component. The `children`
+ * prop must be a plain string — expression attributes that reference runtime
+ * values should be written as template literals.
+ *
+ * @example
+ * ```tsx
+ * <Function name="MyComponent" export>
+ *   <Jsx>{'return (\n  <>\n    <div>Hello</div>\n  </>\n)'}</Jsx>
+ * </Function>
+ * ```
+ */
+export function Jsx({ children }: Props): KubbReactElement {
+  return <kubb-jsx>{children}</kubb-jsx>
+}
+
+Jsx.displayName = 'Jsx'

package/src/components/Root.tsx

@@ -0,0 +1,64 @@
+import { Component } from 'react'
+import type { KubbReactElement, KubbReactNode } from '../types.ts'
+
+type ErrorBoundaryProps = {
+  onError: (error: Error) => void
+  children?: KubbReactNode
+}
+
+class ErrorBoundary extends Component<{
+  onError: ErrorBoundaryProps['onError']
+  children?: KubbReactNode
+}> {
+  state = { hasError: false }
+
+  static displayName = 'ErrorBoundary'
+  static getDerivedStateFromError(_error: Error) {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error) {
+    if (error) {
+      this.props.onError(error)
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+    return this.props.children
+  }
+}
+
+export type RootProps = {
+  /**
+   * Exit (unmount) the whole app.
+   */
+  onExit: (error?: Error) => void
+  /**
+   * Error hook receiving runtime exceptions.
+   */
+  onError: (error: Error) => void
+  /**
+   * Children nodes.
+   */
+  children?: KubbReactNode
+}
+
+/**
+ * This component provides the root behavior for the Kubb runtime.
+ */
+export function Root({ onError, children }: RootProps): KubbReactElement {
+  return (
+    <ErrorBoundary
+      onError={(error) => {
+        onError(error)
+      }}
+    >
+      {children}
+    </ErrorBoundary>
+  )
+}
+
+Root.displayName = 'Root'