@kubb/react-fabric 0.0.0-canary-20251020201500 → 0.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubb/react-fabric",
-  "version": "0.0.0-canary-20251020201500",
+  "version": "0.0.0",
   "description": "React integration for Kubb, providing JSX runtime support and React component generation capabilities for code generation plugins.",
   "keywords": [
     "react",
@@ -83,7 +83,7 @@
     "react-reconciler": "0.32.0",
     "signal-exit": "^4.1.0",
     "ws": "^8.18.3",
-    "@kubb/fabric-core": "0.0.0-canary-20251020201500"
+    "@kubb/fabric-core": "0.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.2",

package/src/ReactTemplate.tsx

@@ -3,6 +3,7 @@ import type { AppContext } from '@kubb/fabric-core'
 import type { ReactNode } from 'react'
 import { ConcurrentRoot } from 'react-reconciler/constants'
 import { onExit } from 'signal-exit'
+import type { RootContextProps } from './components/Root.tsx'
 import { Root } from './components/Root.tsx'
 import { createNode } from './dom.ts'
 import type { FiberRoot } from './kubbRenderer.ts'
@@ -165,9 +166,9 @@ export class ReactTemplate {
       : text
   }
 
-  render(node: ReactNode): void {
+  render(node: ReactNode, { meta = {} }: Omit<RootContextProps, 'exit'> = { meta: {} }): void {
     const element = (
-      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
+      <Root meta={meta} onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
         {node}
       </Root>
     )
@@ -176,9 +177,9 @@ export class ReactTemplate {
     KubbRenderer.flushSyncWork()
   }
 
-  async renderToString(node: ReactNode): Promise<string> {
+  async renderToString(node: ReactNode, { meta = {} }: Omit<RootContextProps, 'exit'> = { meta: {} }): Promise<string> {
     const element = (
-      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
+      <Root meta={meta} onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
         {node}
       </Root>
     )

package/src/components/Const.tsx

@@ -1,5 +1,6 @@
 import type { JSDoc, Key, KubbNode } from '../types.ts'
 
+import { Space } from './Text.tsx'
 import { createJSDoc } from '../utils/createJSDoc.ts'
 
 type Props = {
@@ -36,16 +37,28 @@ export function Const({ name, export: canExport, type, JSDoc, asConst, children
           <br />
         </>
       )}
-      {canExport && <>export </>}
-      const {name}{' '}
+      {canExport && (
+        <>
+          export
+          <Space />
+        </>
+      )}
+      const {name}
+      <Space />
       {type && (
         <>
           {':'}
-          {type}{' '}
+          {type}
+          <Space />
         </>
       )}
       = {children}
-      {asConst && <> as const</>}
+      {asConst && (
+        <>
+          <Space />
+          as const
+        </>
+      )}
     </>
   )
 }

package/src/components/Function.tsx

@@ -1,5 +1,6 @@
 import type { JSDoc, Key, KubbNode } from '../types.ts'
 import { Indent } from './Indent.tsx'
+import { Space } from './Text.tsx'
 import { createJSDoc } from '../utils/createJSDoc.ts'
 
 type Props = {
@@ -50,9 +51,24 @@ export function Function({ name, default: isDefault, export: canExport, async, g
           <br />
         </>
       )}
-      {canExport && <>export </>}
-      {isDefault && <>default </>}
-      {async && <>async </>}
+      {canExport && (
+        <>
+          export
+          <Space />
+        </>
+      )}
+      {isDefault && (
+        <>
+          default
+          <Space />
+        </>
+      )}
+      {async && (
+        <>
+          async
+          <Space />
+        </>
+      )}
       function {name}
       {generics && (
         <>
@@ -96,9 +112,25 @@ function ArrowFunction({ name, default: isDefault, export: canExport, async, gen
           <br />
         </>
       )}
-      {canExport && <>export </>}
-      {isDefault && <>default </>}
-      const {name} = {async && <>async </>}
+      {canExport && (
+        <>
+          export
+          <Space />
+        </>
+      )}
+      {isDefault && (
+        <>
+          default
+          <Space />
+        </>
+      )}
+      const {name} =<Space />
+      {async && (
+        <>
+          async
+          <Space />
+        </>
+      )}
       {generics && (
         <>
           {'<'}

package/src/components/Root.tsx

@@ -2,8 +2,9 @@ import { Component, createContext } from 'react'
 
 import type { KubbNode } from '../types.ts'
 
-type ErrorBoundaryProps = {
+type ErrorBoundaryProps<Meta extends Record<string, unknown> = Record<string, unknown>> = {
   onError: (error: Error) => void
+  meta: Meta
   children?: KubbNode
 }
 
@@ -32,18 +33,20 @@ class ErrorBoundary extends Component<{
   }
 }
 
-export type RootContextProps = {
+export type RootContextProps<Meta extends Record<string, unknown> = Record<string, unknown>> = {
   /**
    * Exit (unmount) the whole Ink app.
    */
   readonly exit: (error?: Error) => void
+  readonly meta: Meta
 }
 
 export const RootContext = createContext<RootContextProps>({
   exit: () => {},
+  meta: {},
 })
 
-type RootProps = {
+type RootProps<Meta extends Record<string, unknown> = Record<string, unknown>> = {
   /**
    * Exit (unmount) hook
    */
@@ -52,10 +55,11 @@ type RootProps = {
    * Error hook
    */
   readonly onError: (error: Error) => void
+  readonly meta: Meta
   readonly children?: KubbNode
 }
 
-export function Root({ onError, onExit, children }: RootProps) {
+export function Root<Meta extends Record<string, unknown> = Record<string, unknown>>({ onError, onExit, meta, children }: RootProps<Meta>) {
   try {
     return (
       <ErrorBoundary
@@ -63,7 +67,7 @@ export function Root({ onError, onExit, children }: RootProps) {
           onError(error)
         }}
       >
-        <RootContext.Provider value={{ exit: onExit }}>{children}</RootContext.Provider>
+        <RootContext.Provider value={{ meta, exit: onExit }}>{children}</RootContext.Provider>
       </ErrorBoundary>
     )
   } catch (_e) {

package/src/components/Text.tsx

@@ -0,0 +1,31 @@
+import type { Key, KubbNode } from '../types.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Change the indent.
+   * @default 0
+   * @deprecated
+   */
+  indentSize?: number
+  children?: KubbNode
+}
+
+/**
+ * @deprecated
+ */
+export function Text({ children }: Props) {
+  return <kubb-text>{children}</kubb-text>
+}
+
+type SpaceProps = {}
+
+Text.displayName = 'KubbText'
+
+export function Space({}: SpaceProps) {
+  return <kubb-text> </kubb-text>
+}
+
+Space.displayName = 'KubbSpace'
+
+Text.Space = Space

package/src/components/Type.tsx

@@ -1,4 +1,5 @@
 import type { JSDoc, Key, KubbNode } from '../types.ts'
+import { Space } from './Text.tsx'
 import { createJSDoc } from '../utils/createJSDoc.ts'
 
 type Props = {
@@ -31,7 +32,12 @@ export function Type({ name, export: canExport, JSDoc, children }: Props) {
           <br />
         </>
       )}
-      {canExport && <>export </>}
+      {canExport && (
+        <>
+          export
+          <Space />
+        </>
+      )}
       type {name} = {children}
     </>
   )

package/src/createApp.ts

@@ -1,6 +1,7 @@
 import process from 'node:process'
 import { defineApp } from '@kubb/fabric-core'
-import { type ElementType, createElement } from 'react'
+import type { ElementType } from 'react'
+import { createElement } from './index.ts'
 import { ReactTemplate } from './ReactTemplate.tsx'
 
 export const createApp = defineApp<ElementType>((app, context) => {

package/src/dom.ts

@@ -11,15 +11,13 @@ export const createNode = (nodeName: string): DOMElement => {
   return node
 }
 
-export const appendChildNode = (node: DOMNode, childNode: DOMElement | DOMNode): void => {
+export const appendChildNode = (node: DOMElement, childNode: DOMElement): void => {
   if (childNode.parentNode) {
     removeChildNode(childNode.parentNode, childNode)
   }
 
-  if (node.nodeName !== '#text') {
-    childNode.parentNode = node
-    node.childNodes.push(childNode)
-  }
+  childNode.parentNode = node
+  node.childNodes.push(childNode)
 }
 
 export const insertBeforeNode = (node: DOMElement, newChildNode: DOMNode, beforeChildNode: DOMNode): void => {

package/src/hooks/useApp.ts

@@ -4,12 +4,12 @@ import { App, type AppContextProps } from '../components/App.tsx'
 /**
  * `useApp` will return the current App with plugin, pluginManager, fileManager and mode.
  */
-export function useApp<TMeta = unknown>(): AppContextProps<TMeta> {
+export function useApp(): AppContextProps {
   const app = useContext(App.Context)
 
   if (!app) {
     throw new Error('<App /> should be set')
   }
 
-  return app as AppContextProps<TMeta>
+  return app
 }

package/src/index.ts

@@ -7,6 +7,7 @@ export { Const } from './components/Const.tsx'
 export { File } from './components/File.tsx'
 export { Function } from './components/Function.tsx'
 export { Indent } from './components/Indent.tsx'
+export { Text } from './components/Text.tsx'
 export { Type } from './components/Type.tsx'
 export { createApp } from './createApp.ts'
 export { useApp } from './hooks/useApp.ts'

package/src/utils/throttle.ts

@@ -0,0 +1,30 @@
+export const throttle = <R, A extends any[]>(fn: (...args: A) => R, delay: number): [(...args: A) => R | undefined, () => void] => {
+  let wait = false
+  let timeout: NodeJS.Timeout
+  let cancelled = false
+
+  return [
+    (...args: A) => {
+      if (cancelled) {
+        return undefined
+      }
+      if (wait) {
+        return undefined
+      }
+
+      const val = fn(...args)
+
+      wait = true
+
+      timeout = setTimeout(() => {
+        wait = false
+      }, delay) as NodeJS.Timeout
+
+      return val
+    },
+    () => {
+      cancelled = true
+      clearTimeout(timeout)
+    },
+  ]
+}