@kubb/react-fabric 0.9.5 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubb/react-fabric",
-  "version": "0.9.5",
+  "version": "0.11.0",
   "description": "React integration for Kubb, providing JSX runtime support and React component generation capabilities for code generation plugins.",
   "keywords": [
     "react",
@@ -111,10 +111,10 @@
     "react-devtools-core": "6.1.2",
     "signal-exit": "^4.1.0",
     "ws": "8.18.0",
-    "@kubb/fabric-core": "0.9.5"
+    "@kubb/fabric-core": "0.11.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.8",
     "@types/react-reconciler": "0.32.0",
     "@types/ws": "^8.18.1",
     "react": "19.2.1",

package/src/Runtime.tsx

@@ -1,5 +1,5 @@
 import process from 'node:process'
-import type { FileManager } from '@kubb/fabric-core'
+import { type FileManager, TreeNode } from '@kubb/fabric-core'
 import type { ReactNode } from 'react'
 import { ConcurrentRoot } from 'react-reconciler/constants.js'
 import { onExit } from 'signal-exit'
@@ -7,7 +7,7 @@ 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 } from './types.ts'
+import type { ComponentNode, DOMElement } from './types.ts'
 import { processFiles } from './utils/processFiles.ts'
 import { squashTextNodes } from './utils/squashTextNodes.ts'
 
@@ -167,11 +167,16 @@ export class Runtime {
   }
 
   async render(node: ReactNode): Promise<void> {
-    const element = (
-      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
-        {node}
-      </Root>
-    )
+    const treeNode = new TreeNode<ComponentNode>({ type: 'Root', props: {} })
+    const props = {
+      fileManager: this.fileManager,
+      treeNode,
+      onExit: this.onExit.bind(this),
+      onError: this.onError.bind(this),
+    }
+    treeNode.data.props = props
+
+    const element = <Root {...props}>{node}</Root>
 
     Renderer.updateContainerSync(element, this.#container, null, null)
     Renderer.flushSyncWork()
@@ -186,11 +191,16 @@ export class Runtime {
   }
 
   async renderToString(node: ReactNode): Promise<string> {
-    const element = (
-      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
-        {node}
-      </Root>
-    )
+    const treeNode = new TreeNode<ComponentNode>({ type: 'Root', props: {} })
+    const props = {
+      fileManager: this.fileManager,
+      treeNode,
+      onExit: this.onExit.bind(this),
+      onError: this.onError.bind(this),
+    }
+    treeNode.data.props = props
+
+    const element = <Root {...props}>{node}</Root>
 
     Renderer.updateContainerSync(element, this.#container, null, null)
     Renderer.flushSyncWork()

package/src/components/App.tsx

@@ -1,27 +1,36 @@
-import { createContext, useContext } from 'react'
+import { AppContext, NodeTreeContext, provide, RootContext, useContext, useNodeTree } from '@kubb/fabric-core'
 import type { KubbNode } from '../types.ts'
-import { RootContext } from './Root.tsx'
 
-export type AppContextProps<TMeta = unknown> = {
+export type AppProps<TMeta extends object = object> = {
   /**
-   * Exit (unmount)
+   * Metadata associated with the App.
    */
-  readonly exit: (error?: Error) => void
-  readonly meta: TMeta
+  meta?: TMeta
+  /**
+   * Children nodes.
+   */
+  children?: KubbNode
 }
 
-const AppContext = createContext<AppContextProps | undefined>(undefined)
-
-type Props<TMeta = unknown> = {
-  readonly children?: KubbNode
-  readonly meta: TMeta
-}
+/**
+ * App container containing the AppContext carrying `meta` and an `exit` hook.
+ */
+export function App<TMeta extends object = object>({ children, ...props }: AppProps<TMeta>) {
+  const { meta = {} } = props
 
-export function App<TMeta = unknown>({ meta, children }: Props<TMeta>) {
   const { exit } = useContext(RootContext)
 
-  return <AppContext.Provider value={{ exit, meta }}>{children}</AppContext.Provider>
+  const nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'App', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
+  provide(AppContext, { exit, meta })
+
+  return children
 }
 
-App.Context = AppContext
 App.displayName = 'KubbApp'

package/src/components/Const.tsx

@@ -1,8 +1,8 @@
+import { NodeTreeContext, provide, useNodeTree } from '@kubb/fabric-core'
 import type { JSDoc, Key, KubbNode } from '../types.ts'
-
 import { createJSDoc } from '../utils/createJSDoc.ts'
 
-type Props = {
+export type ConstProps = {
   key?: Key
   /**
    * Name of the const
@@ -24,10 +24,26 @@ type Props = {
    * Use of `const` assertions
    */
   asConst?: boolean
+  /**
+   * Children nodes.
+   */
   children?: KubbNode
 }
 
-export function Const({ name, export: canExport, type, JSDoc, asConst, children }: Props) {
+/**
+ * Generates a TypeScript constant declaration.
+ */
+export function Const({ children, ...props }: ConstProps) {
+  const { name, export: canExport, type, JSDoc, asConst } = props
+
+  const nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'Const', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
   return (
     <>
       {JSDoc?.comments && (

package/src/components/File.tsx

@@ -1,22 +1,7 @@
+import { FileContext, NodeTreeContext, provide, useFile, useFileManager, useNodeTree } from '@kubb/fabric-core'
 import type { KubbFile } from '@kubb/fabric-core/types'
-import { createContext } from 'react'
 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).
@@ -48,16 +33,40 @@ type Props<TMeta> = BaseProps & {
   children?: KubbNode
 }
 
-export function File<TMeta extends object = object>({ children, ...rest }: Props<TMeta>) {
-  if (!rest.baseName || !rest.path) {
+/**
+ * Adds files to the FileManager
+ */
+export function File<TMeta extends object = object>({ children, ...props }: Props<TMeta>) {
+  const { baseName, path, meta = {}, footer, banner } = props
+
+  const fileManager = useFileManager()
+  const nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'File', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
+  if (!baseName || !path) {
     return <>{children}</>
   }
 
-  return (
-    <kubb-file {...rest}>
-      <FileContext.Provider value={{ baseName: rest.baseName, path: rest.path, meta: rest.meta }}>{children}</FileContext.Provider>
-    </kubb-file>
-  )
+  const file: KubbFile.File = {
+    baseName,
+    path,
+    meta,
+    banner,
+    footer,
+    sources: [],
+    imports: [],
+    exports: [],
+  }
+
+  const [resolvedFile] = fileManager.add(file)
+  provide(FileContext, resolvedFile)
+
+  return <kubb-file {...props}>{children}</kubb-file>
 }
 
 File.displayName = 'KubbFile'
@@ -67,7 +76,23 @@ type FileSourceProps = Omit<KubbFile.Source, 'value'> & {
   children?: KubbNode
 }
 
-function FileSource({ isTypeOnly, name, isExportable, isIndexable, children }: FileSourceProps) {
+/**
+ * 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) {
+  const { name, isExportable, isIndexable, isTypeOnly } = props
+
+  const nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'FileSource', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
   return (
     <kubb-source name={name} isTypeOnly={isTypeOnly} isExportable={isExportable} isIndexable={isIndexable}>
       {children}
@@ -77,18 +102,70 @@ function FileSource({ isTypeOnly, name, isExportable, isIndexable, children }: F
 
 FileSource.displayName = 'KubbFileSource'
 
-type FileExportProps = KubbFile.Export & { key?: Key }
+export type FileExportProps = KubbFile.Export & { 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) {
+  const { name, path, isTypeOnly, asAlias } = props
+
+  const nodeTree = useNodeTree()
+  const file = useFile()
 
-function FileExport({ name, path, isTypeOnly, asAlias }: FileExportProps) {
-  return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly || false} asAlias={asAlias} />
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'FileExport', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
+  if (file) {
+    file.exports.push({
+      name,
+      path,
+      asAlias,
+      isTypeOnly,
+    })
+  }
+
+  return <kubb-export name={name} path={path} isTypeOnly={isTypeOnly} asAlias={asAlias} />
 }
 
 FileExport.displayName = 'KubbFileExport'
 
-type FileImportProps = KubbFile.Import & { key?: Key }
+export type FileImportProps = KubbFile.Import & { key?: Key }
+
+/**
+ * File.Import
+ *
+ * Declares an import entry for the current file.
+ */
+function FileImport(props: FileImportProps) {
+  const { name, root, path, isTypeOnly, isNameSpace } = props
+
+  const nodeTree = useNodeTree()
+  const file = useFile()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'FileImport', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
+  if (file) {
+    file.imports.push({
+      name,
+      path,
+      root,
+      isNameSpace,
+      isTypeOnly,
+    })
+  }
 
-function FileImport({ name, root, path, isTypeOnly, isNameSpace }: FileImportProps) {
-  return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly || false} />
+  return <kubb-import name={name} root={root} path={path} isNameSpace={isNameSpace} isTypeOnly={isTypeOnly} />
 }
 
 FileImport.displayName = 'KubbFileImport'
@@ -96,4 +173,3 @@ FileImport.displayName = 'KubbFileImport'
 File.Export = FileExport
 File.Import = FileImport
 File.Source = FileSource
-File.Context = FileContext

package/src/components/Function.tsx

@@ -1,4 +1,5 @@
-import type { JSDoc, Key, KubbNode } from '../types.ts'
+import { NodeTreeContext, provide, useNodeTree } from '@kubb/fabric-core'
+import type { JSDoc, Key } from '../types.ts'
 import { createJSDoc } from '../utils/createJSDoc.ts'
 import { Indent } from './Indent.tsx'
 
@@ -29,7 +30,6 @@ type Props = {
    * Generics that needs to be added for TypeScript.
    */
   generics?: string | string[]
-
   /**
    * ReturnType(see async for adding Promise type).
    */
@@ -38,10 +38,26 @@ type Props = {
    * Options for JSdocs.
    */
   JSDoc?: JSDoc
-  children?: KubbNode
+  /**
+   * Children nodes.
+   */
+  children?: string
 }
 
-export function Function({ name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc, children }: Props) {
+/**
+ * Generates a TypeScript function declaration.
+ */
+export function Function({ children, ...props }: Props) {
+  const { name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc } = props
+
+  const nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'Function', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
   return (
     <>
       {JSDoc?.comments && (
@@ -87,7 +103,22 @@ type ArrowFunctionProps = Props & {
   singleLine?: boolean
 }
 
-function ArrowFunction({ name, default: isDefault, export: canExport, async, generics, params, returnType, JSDoc, singleLine, children }: ArrowFunctionProps) {
+/**
+ * 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 nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'ArrowFunction', props })
+
+    provide(NodeTreeContext, childTree)
+  }
   return (
     <>
       {JSDoc?.comments && (

package/src/components/Indent.tsx

@@ -10,6 +10,9 @@ type IndentProps = {
 /**
  * Indents all children by `size` spaces.
  * Collapses consecutive <br /> tags to at most 2.
+ *
+ * Indent will dedent and re-indent string children and will prefix
+ * non-string children with the requested number of spaces.
  */
 export function Indent({ size = 2, children }: IndentProps) {
   if (!children) return null

package/src/components/Root.tsx

@@ -1,6 +1,7 @@
-import { Component, createContext } from 'react'
+import { type FileManager, NodeTreeContext, provide, RootContext, type TreeNode } from '@kubb/fabric-core'
+import { Component } from 'react'
 
-import type { KubbNode } from '../types.ts'
+import type { ComponentNode, KubbNode } from '../types.ts'
 
 type ErrorBoundaryProps = {
   onError: (error: Error) => void
@@ -32,40 +33,45 @@ class ErrorBoundary extends Component<{
   }
 }
 
-export type RootContextProps = {
+export type RootProps = {
   /**
-   * Exit (unmount) the whole Ink app.
+   * Exit (unmount) the whole app.
    */
-  readonly exit: (error?: Error) => void
-}
-
-export const RootContext = createContext<RootContextProps>({
-  exit: () => {},
-})
-
-type RootProps = {
+  onExit: (error?: Error) => void
+  /**
+   * Error hook receiving runtime exceptions.
+   */
+  onError: (error: Error) => void
+  /**
+   * TreeNode representing the tree structure of the app.
+   */
+  treeNode: TreeNode<ComponentNode>
   /**
-   * Exit (unmount) hook
+   * FileManager instance for managing files within the app.
    */
-  readonly onExit: (error?: Error) => void
+  fileManager: FileManager
   /**
-   * Error hook
+   * Children nodes.
    */
-  readonly onError: (error: Error) => void
-  readonly children?: KubbNode
+  children?: KubbNode
 }
 
-export function Root({ onError, onExit, children }: RootProps) {
+/**
+ * This component provides the root behavior for the Fabric runtime.
+ */
+export function Root({ onError, onExit, treeNode, fileManager, children }: RootProps) {
+  provide(RootContext, { exit: onExit, treeNode, fileManager })
+  provide(NodeTreeContext, treeNode)
+
   return (
     <ErrorBoundary
       onError={(error) => {
         onError(error)
       }}
     >
-      <RootContext.Provider value={{ exit: onExit }}>{children}</RootContext.Provider>
+      {children}
     </ErrorBoundary>
   )
 }
 
-Root.Context = RootContext
 Root.displayName = 'KubbRoot'

package/src/components/Type.tsx

@@ -1,7 +1,8 @@
+import { NodeTreeContext, provide, useNodeTree } from '@kubb/fabric-core'
 import type { JSDoc, Key, KubbNode } from '../types.ts'
 import { createJSDoc } from '../utils/createJSDoc.ts'
 
-type Props = {
+export type TypeProps = {
   key?: Key
   /**
    * Name of the type, this needs to start with a capital letter.
@@ -15,10 +16,26 @@ type Props = {
    * Options for JSdocs.
    */
   JSDoc?: JSDoc
+  /**
+   * Children nodes.
+   */
   children?: KubbNode
 }
 
-export function Type({ name, export: canExport, JSDoc, children }: Props) {
+/**
+ * Generates a TypeScript type declaration.
+ */
+export function Type({ children, ...props }: TypeProps) {
+  const { name, export: canExport, JSDoc } = props
+
+  const nodeTree = useNodeTree()
+
+  if (nodeTree) {
+    const childTree = nodeTree.addChild({ type: 'Type', props })
+
+    provide(NodeTreeContext, childTree)
+  }
+
   if (name.charAt(0).toUpperCase() !== name.charAt(0)) {
     throw new Error('Name should start with a capital letter(see TypeScript types)')
   }

package/src/components/__snapshots__/arrow_function.ts

@@ -0,0 +1,3 @@
+export const getData = async () => {
+  return 2;
+}

package/src/components/__snapshots__/arrow_function_default.ts

@@ -0,0 +1,3 @@
+export default const getData = async () => {
+  return 2;
+}

package/src/components/__snapshots__/arrow_function_generics.ts

@@ -0,0 +1,3 @@
+export const getData = async <TData>(): Promise<number> => {
+  return 2;
+}

package/src/components/__snapshots__/arrow_function_single_line.ts

@@ -0,0 +1 @@
+export const getData = async <TData>(): Promise<number> => 2;

package/src/components/__snapshots__/arrow_function_with_generics.ts

@@ -0,0 +1,3 @@
+const getData = <TData>(): number => {
+  return 2
+}

package/src/components/__snapshots__/async_arrow_function.ts

@@ -0,0 +1,3 @@
+const myFunc = async () => {
+  return true
+}

package/src/components/__snapshots__/async_function.ts

@@ -0,0 +1,3 @@
+async function myFunc() {
+  return true
+}

package/src/components/__snapshots__/async_function_with_Promise_return_type.ts

@@ -0,0 +1,3 @@
+async function myFunc(): Promise<boolean> {
+  return true
+}

package/src/components/__snapshots__/basic_arrow_function.ts

@@ -0,0 +1,3 @@
+const myFunc = () => {
+  return true
+}

package/src/components/__snapshots__/basic_const.ts

@@ -0,0 +1 @@
+const myVar = "hello"

package/src/components/__snapshots__/basic_export.ts

@@ -0,0 +1 @@
+export * from "@kubb/react-fabric";

package/src/components/__snapshots__/basic_function.ts

@@ -0,0 +1,3 @@
+function myFunc() {
+  return true
+}

package/src/components/__snapshots__/basic_import.ts

@@ -0,0 +1 @@
+import fabric from "@kubb/react-fabric";

package/src/components/__snapshots__/basic_type.ts

@@ -0,0 +1 @@
+type MyType = { a: string }

package/src/components/__snapshots__/const_with_JSDoc.ts

@@ -0,0 +1,4 @@
+/**
+ * This is a variable
+ */
+const myVar = "hello"

package/src/components/__snapshots__/const_with_as_const.ts

@@ -0,0 +1 @@
+const myVar = "hello" as const

package/src/components/__snapshots__/const_with_type.ts

@@ -0,0 +1 @@
+const myVar :string = "hello"

package/src/components/__snapshots__/default_exported_arrow_function.ts

@@ -0,0 +1,3 @@
+export default const myFunc = () => {
+  return true
+}

package/src/components/__snapshots__/default_exported_function.ts

@@ -0,0 +1,3 @@
+export default function myFunc() {
+  return true
+}

package/src/components/__snapshots__/exported_arrow_function.ts

@@ -0,0 +1,3 @@
+export const myFunc = () => {
+  return true
+}

package/src/components/__snapshots__/exported_const.ts

@@ -0,0 +1 @@
+export const myVar = "hello"

package/src/components/__snapshots__/exported_function.ts

@@ -0,0 +1,3 @@
+export function myFunc() {
+  return true
+}

package/src/components/__snapshots__/exported_type.ts

@@ -0,0 +1 @@
+export type MyType = { a: string }

package/src/components/__snapshots__/function_generics.ts

@@ -0,0 +1,3 @@
+export async function getData<TData>(): Promise<number> {
+  return 2;
+}

package/src/components/__snapshots__/function_with_JSDoc.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated
+ */
+function myFunc() {
+  return true
+}

package/src/components/__snapshots__/function_with_comments.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated
+ */
+export async function getData() {
+  return 2;
+}

package/src/components/__snapshots__/function_with_generics.ts

@@ -0,0 +1,3 @@
+function myFunc<T>() {
+  return true
+}