@kubb/react-fabric 0.0.0-canary-20251020201500

package/src/ReactTemplate.tsx

@@ -0,0 +1,229 @@
+import process from 'node:process'
+import type { AppContext } from '@kubb/fabric-core'
+import type { ReactNode } from 'react'
+import { ConcurrentRoot } from 'react-reconciler/constants'
+import { onExit } from 'signal-exit'
+import { Root } from './components/Root.tsx'
+import { createNode } from './dom.ts'
+import type { FiberRoot } from './kubbRenderer.ts'
+import { KubbRenderer } from './kubbRenderer.ts'
+import type { DOMElement } from './types.ts'
+import { squashTextNodes } from './utils/squashTextNodes.ts'
+import { processFiles } from './utils/processFiles.ts'
+
+export type ReactTemplateOptions = {
+  context: AppContext
+  stdout?: NodeJS.WriteStream
+  stdin?: NodeJS.ReadStream
+  stderr?: NodeJS.WriteStream
+  /**
+   * Set this to true to always see the result of the render in the console(line per render)
+   */
+  debug?: boolean
+}
+
+export class ReactTemplate {
+  readonly #options: ReactTemplateOptions
+  // Ignore last render after unmounting a tree to prevent empty output before exit
+  #isUnmounted: boolean
+
+  exitPromise?: Promise<void>
+  readonly #container: FiberRoot
+  readonly #rootNode: DOMElement
+
+  constructor(options: ReactTemplateOptions) {
+    this.#options = { ...options }
+
+    this.#rootNode = createNode('kubb-root')
+    this.#rootNode.onRender = this.onRender
+    this.#rootNode.onImmediateRender = this.onRender
+
+    // Ignore last render after unmounting a tree to prevent empty output before exit
+    this.#isUnmounted = false
+    this.unmount.bind(this)
+
+    const originalError = console.error
+    console.error = (data: string | Error) => {
+      const message = typeof data === 'string' ? data : data?.message
+
+      if (message.match(/Encountered two children with the same key/gi)) {
+        return
+      }
+      if (message.match(/React will try to recreat/gi)) {
+        return
+      }
+      if (message.match(/Each child in a list should have a unique/gi)) {
+        return
+      }
+      if (message.match(/The above error occurred in the <KubbErrorBoundary/gi)) {
+        return
+      }
+
+      if (message.match(/A React Element from an older version of React was render/gi)) {
+        return
+      }
+
+      originalError(data)
+    }
+
+    // Report when an error was detected in a previous render
+    // https://github.com/pmndrs/react-three-fiber/pull/2261
+    const logRecoverableError =
+      typeof reportError === 'function'
+        ? // In modern browsers, reportError will dispatch an error event,
+          // emulating an uncaught JavaScript error.
+          reportError
+        : // In older browsers and test environments, fallback to console.error.
+          console.error
+
+    const rootTag = ConcurrentRoot
+    const hydrationCallbacks = null
+    const isStrictMode = false
+    const concurrentUpdatesByDefaultOverride = false
+    const identifierPrefix = 'id'
+    const onUncaughtError = logRecoverableError
+    const onCaughtError = logRecoverableError
+    const onRecoverableError = logRecoverableError
+    const transitionCallbacks = null
+
+    this.#container = KubbRenderer.createContainer(
+      this.#rootNode,
+      rootTag,
+      hydrationCallbacks,
+      isStrictMode,
+      concurrentUpdatesByDefaultOverride,
+      identifierPrefix,
+      onUncaughtError,
+      onCaughtError,
+      onRecoverableError,
+      transitionCallbacks,
+    )
+
+    // Unmount when process exits
+    this.unsubscribeExit = onExit(
+      (code) => {
+        this.unmount(code)
+      },
+      { alwaysLast: false },
+    ).bind(this)
+
+    KubbRenderer.injectIntoDevTools({
+      bundleType: 0, // 0 for PROD, 1 for DEV
+      version: '19.1.1', // should be React version and not Kubb's custom version
+      rendererPackageName: 'kubb', // package name
+    })
+  }
+  resolveExitPromise: () => void = () => {}
+  rejectExitPromise: (reason?: Error) => void = () => {}
+  unsubscribeExit: () => void = () => {}
+  onRender: () => void = async () => {
+    if (this.#isUnmounted) {
+      return
+    }
+
+    this.#options.context.clear()
+
+    processFiles(this.#rootNode, this.#options.context)
+
+    if (!this.#options.debug && !this.#options.stdout) {
+      return
+    }
+
+    const output = await this.#getOutput(this.#rootNode, this.#options.context)
+
+    if (this.#options.debug) {
+      console.log('Rendering: \n')
+      console.log(output)
+    }
+
+    if (this.#options.stdout) {
+      this.#options.stdout.clearLine(0)
+      this.#options.stdout.cursorTo(0)
+      this.#options.stdout.write(output)
+    }
+  }
+  onError(error: Error): void {
+    if (process.env.NODE_ENV === 'test') {
+      console.warn(error)
+    }
+
+    throw error
+  }
+  onExit(error?: Error): void {
+    this.unmount(error)
+  }
+
+  async #getOutput(node: DOMElement, context: AppContext): Promise<string> {
+    const text = squashTextNodes(node)
+    const files = context.files
+
+    return files.length
+      ? [...files]
+          .flatMap((file) => [...file.sources].map((item) => item.value))
+          .filter(Boolean)
+          .join('\n\n')
+      : text
+  }
+
+  render(node: ReactNode): void {
+    const element = (
+      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
+        {node}
+      </Root>
+    )
+
+    KubbRenderer.updateContainerSync(element, this.#container, null, null)
+    KubbRenderer.flushSyncWork()
+  }
+
+  async renderToString(node: ReactNode): Promise<string> {
+    const element = (
+      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
+        {node}
+      </Root>
+    )
+
+    KubbRenderer.updateContainerSync(element, this.#container, null, null)
+    KubbRenderer.flushSyncWork()
+
+    this.#options.context.clear()
+
+    return this.#getOutput(this.#rootNode, this.#options.context)
+  }
+
+  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
+
+    KubbRenderer.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/App.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+import type { KubbNode } from '../types.ts'
+import { RootContext } from './Root.tsx'
+
+export type AppContextProps<TMeta = unknown> = {
+  /**
+   * Exit (unmount)
+   */
+  readonly exit: (error?: Error) => void
+  readonly meta: TMeta
+}
+
+const AppContext = createContext<AppContextProps | undefined>(undefined)
+
+type Props<TMeta = unknown> = {
+  readonly children?: KubbNode
+  readonly meta: TMeta
+}
+
+export function App<TMeta = unknown>({ meta, children }: Props<TMeta>) {
+  const { exit } = useContext(RootContext)
+
+  return <AppContext.Provider value={{ exit, meta }}>{children}</AppContext.Provider>
+}
+
+App.Context = AppContext
+App.displayName = 'KubbApp'

package/src/components/Const.tsx

@@ -0,0 +1,53 @@
+import type { JSDoc, Key, KubbNode } from '../types.ts'
+
+import { createJSDoc } from '../utils/createJSDoc.ts'
+
+type Props = {
+  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?: KubbNode
+}
+
+export function Const({ name, export: canExport, type, JSDoc, asConst, children }: Props) {
+  return (
+    <>
+      {JSDoc?.comments && (
+        <>
+          {createJSDoc({ comments: JSDoc?.comments })}
+          <br />
+        </>
+      )}
+      {canExport && <>export </>}
+      const {name}{' '}
+      {type && (
+        <>
+          {':'}
+          {type}{' '}
+        </>
+      )}
+      = {children}
+      {asConst && <> as const</>}
+    </>
+  )
+}
+
+Const.displayName = 'KubbConst'

package/src/components/File.tsx

@@ -0,0 +1,100 @@
+import { createContext } from 'react'
+
+import type { KubbFile } from '@kubb/fabric-core'
+import type { Key, KubbNode } from '../types.ts'
+
+export type FileContextProps<TMeta extends object = object> = {
+  /**
+   * Name to be used to dynamicly create the baseName(based on input.path).
+   * Based on UNIX basename
+   * @link https://nodejs.org/api/path.html#pathbasenamepath-suffix
+   */
+  baseName: KubbFile.BaseName
+  /**
+   * Path will be full qualified path to a specified file.
+   */
+  path: KubbFile.Path
+  meta?: TMeta
+}
+const FileContext = createContext<FileContextProps>({} as FileContextProps)
+
+type BasePropsWithBaseName = {
+  /**
+   * Name to be used to dynamicly create the baseName(based on input.path).
+   * Based on UNIX basename
+   * @link https://nodejs.org/api/path.html#pathbasenamepath-suffix
+   */
+  baseName: KubbFile.BaseName
+  /**
+   * Path will be full qualified path to a specified file.
+   */
+  path: KubbFile.Path
+}
+
+type BasePropsWithoutBaseName = {
+  baseName?: never
+  /**
+   * Path will be full qualified path to a specified file.
+   */
+  path?: KubbFile.Path
+}
+
+type BaseProps = BasePropsWithBaseName | BasePropsWithoutBaseName
+
+type Props<TMeta> = BaseProps & {
+  key?: Key
+  meta?: TMeta
+  banner?: string
+  footer?: string
+  children?: KubbNode
+}
+
+export function File<TMeta extends object = object>({ children, ...rest }: Props<TMeta>) {
+  if (!rest.baseName || !rest.path) {
+    return <>{children}</>
+  }
+
+  return (
+    <kubb-file {...rest}>
+      <FileContext.Provider value={{ baseName: rest.baseName, path: rest.path, meta: rest.meta }}>{children}</FileContext.Provider>
+    </kubb-file>
+  )
+}
+
+File.displayName = 'KubbFile'
+
+type FileSourceProps = Omit<KubbFile.Source, 'value'> & {
+  key?: Key
+  children?: KubbNode
+}
+
+function FileSource({ isTypeOnly, name, isExportable, isIndexable, children }: FileSourceProps) {
+  return (
+    <kubb-source name={name} isTypeOnly={isTypeOnly} isExportable={isExportable} isIndexable={isIndexable}>
+      {children}
+    </kubb-source>
+  )
+}
+
+FileSource.displayName = 'KubbFileSource'
+
+type FileExportProps = KubbFile.Export & { key?: Key }
+
+function FileExport({ name, path, isTypeOnly, asAlias }: FileExportProps) {
+  return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly || false} asAlias={asAlias} />
+}
+
+FileExport.displayName = 'KubbFileExport'
+
+type FileImportProps = KubbFile.Import & { key?: Key }
+
+function FileImport({ name, root, path, isTypeOnly, isNameSpace }: FileImportProps) {
+  return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly || false} />
+}
+
+FileImport.displayName = 'KubbFileImport'
+
+File.Export = FileExport
+File.Import = FileImport
+File.Source = FileSource
+File.Context = FileContext

package/src/components/Function.tsx

@@ -0,0 +1,139 @@
+import type { JSDoc, Key, KubbNode } from '../types.ts'
+import { Indent } from './Indent.tsx'
+import { createJSDoc } from '../utils/createJSDoc.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 behaviour.
+   * 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?: KubbNode
+}
+
+export function Function({ name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc, children }: Props) {
+  return (
+    <>
+      {JSDoc?.comments && (
+        <>
+          {createJSDoc({ comments: JSDoc?.comments })}
+          <br />
+        </>
+      )}
+      {canExport && <>export </>}
+      {isDefault && <>default </>}
+      {async && <>async </>}
+      function {name}
+      {generics && (
+        <>
+          {'<'}
+          {Array.isArray(generics) ? generics.join(', ').trim() : generics}
+          {'>'}
+        </>
+      )}
+      ({params}){returnType && !async && <>: {returnType}</>}
+      {returnType && async && (
+        <>
+          : Promise{'<'}
+          {returnType}
+          {'>'}
+        </>
+      )}
+      {' {'}
+      <br />
+      <Indent size={2}>{children}</Indent>
+      <br />
+      {'}'}
+    </>
+  )
+}
+
+Function.displayName = 'KubbFunction'
+
+type ArrowFunctionProps = Props & {
+  /**
+   * Create Arrow function in one line
+   */
+  singleLine?: boolean
+}
+
+function ArrowFunction({ name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc, singleLine, children }: ArrowFunctionProps) {
+  return (
+    <>
+      {JSDoc?.comments && (
+        <>
+          {createJSDoc({ comments: JSDoc?.comments })}
+          <br />
+        </>
+      )}
+      {canExport && <>export </>}
+      {isDefault && <>default </>}
+      const {name} = {async && <>async </>}
+      {generics && (
+        <>
+          {'<'}
+          {Array.isArray(generics) ? generics.join(', ').trim() : generics}
+          {'>'}
+        </>
+      )}
+      ({params}){returnType && !async && <>: {returnType}</>}
+      {returnType && async && (
+        <>
+          : Promise{'<'}
+          {returnType}
+          {'>'}
+        </>
+      )}
+      {singleLine && (
+        <>
+          {' => '}
+          {children}
+          <br />
+        </>
+      )}
+      {!singleLine && (
+        <>
+          {' => {'}
+          <br />
+          <Indent size={2}>{children}</Indent>
+          <br />
+          {'}'}
+          <br />
+        </>
+      )}
+    </>
+  )
+}
+
+ArrowFunction.displayName = 'KubbArrowFunction'
+Function.Arrow = ArrowFunction

package/src/components/Indent.tsx

@@ -0,0 +1,53 @@
+import dedent from 'dedent'
+import indentString from 'indent-string'
+import React from 'react'
+
+type IndentProps = {
+  size?: number
+  children?: React.ReactNode
+}
+
+/**
+ * Indents all children by `size` spaces.
+ * Collapses consecutive <br /> tags to at most 2.
+ */
+export function Indent({ size = 2, children }: IndentProps) {
+  if (!children) return null
+
+  const filtered = React.Children.toArray(children).filter(Boolean)
+  const result: React.ReactNode[] = []
+
+  let prevWasBr = false
+  let brCount = 0
+
+  filtered.forEach((child) => {
+    if (React.isValidElement(child) && child.type === 'br') {
+      if (!prevWasBr || brCount < 2) {
+        result.push(child)
+        brCount++
+      }
+      prevWasBr = true
+    } else {
+      prevWasBr = false
+      brCount = 0
+      result.push(child)
+    }
+  })
+
+  return (
+    <>
+      {result.map((child) => {
+        if (typeof child === 'string') {
+          const cleaned = dedent(child)
+          return <>{indentString(cleaned, size)}</>
+        }
+        return (
+          <>
+            {' '.repeat(size)}
+            {child}
+          </>
+        )
+      })}
+    </>
+  )
+}

package/src/components/Root.tsx

@@ -0,0 +1,75 @@
+import { Component, createContext } from 'react'
+
+import type { KubbNode } from '../types.ts'
+
+type ErrorBoundaryProps = {
+  onError: (error: Error) => void
+  children?: KubbNode
+}
+
+class ErrorBoundary extends Component<{
+  onError: ErrorBoundaryProps['onError']
+  children?: KubbNode
+}> {
+  state = { hasError: false }
+
+  static displayName = 'KubbErrorBoundary'
+  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 RootContextProps = {
+  /**
+   * Exit (unmount) the whole Ink app.
+   */
+  readonly exit: (error?: Error) => void
+}
+
+export const RootContext = createContext<RootContextProps>({
+  exit: () => {},
+})
+
+type RootProps = {
+  /**
+   * Exit (unmount) hook
+   */
+  readonly onExit: (error?: Error) => void
+  /**
+   * Error hook
+   */
+  readonly onError: (error: Error) => void
+  readonly children?: KubbNode
+}
+
+export function Root({ onError, onExit, children }: RootProps) {
+  try {
+    return (
+      <ErrorBoundary
+        onError={(error) => {
+          onError(error)
+        }}
+      >
+        <RootContext.Provider value={{ exit: onExit }}>{children}</RootContext.Provider>
+      </ErrorBoundary>
+    )
+  } catch (_e) {
+    return null
+  }
+}
+
+Root.Context = RootContext
+Root.displayName = 'KubbRoot'