@kubb/react-fabric 0.0.0 → 0.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubb/react-fabric",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "React integration for Kubb, providing JSX runtime support and React component generation capabilities for code generation plugins.",
   "keywords": [
     "react",
@@ -59,6 +59,12 @@
       "devtools": [
         "./dist/devtools.d.ts"
       ],
+      "jsx-dev-runtime": [
+        "./dist/jsx-dev-runtime.d.ts"
+      ],
+      "jsx-runtime": [
+        "./dist/jsx-runtime.d.ts"
+      ],
       "types": [
         "./dist/types.d.ts"
       ]
@@ -79,11 +85,11 @@
     "indent-string": "^5.0.0",
     "natural-orderby": "^5.0.0",
     "react": "^19.2.0",
-    "react-devtools-inline": "^7.0.0",
+    "react-devtools-inline": "^7.0.1",
     "react-reconciler": "0.32.0",
     "signal-exit": "^4.1.0",
     "ws": "^8.18.3",
-    "@kubb/fabric-core": "0.0.0"
+    "@kubb/fabric-core": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.2",

package/src/ReactTemplate.tsx

@@ -3,7 +3,6 @@ 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'
@@ -12,8 +11,7 @@ import type { DOMElement } from './types.ts'
 import { squashTextNodes } from './utils/squashTextNodes.ts'
 import { processFiles } from './utils/processFiles.ts'
 
-export type ReactTemplateOptions = {
-  context: AppContext
+export type ReactAppContext = AppContext<{
   stdout?: NodeJS.WriteStream
   stdin?: NodeJS.ReadStream
   stderr?: NodeJS.WriteStream
@@ -21,10 +19,10 @@ export type ReactTemplateOptions = {
    * 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
+  readonly #context: ReactAppContext
   // Ignore last render after unmounting a tree to prevent empty output before exit
   #isUnmounted: boolean
 
@@ -32,8 +30,8 @@ export class ReactTemplate {
   readonly #container: FiberRoot
   readonly #rootNode: DOMElement
 
-  constructor(options: ReactTemplateOptions) {
-    this.#options = { ...options }
+  constructor(context: ReactAppContext) {
+    this.#context = context
 
     this.#rootNode = createNode('kubb-root')
     this.#rootNode.onRender = this.onRender
@@ -122,25 +120,25 @@ export class ReactTemplate {
       return
     }
 
-    this.#options.context.clear()
+    this.#context.clear()
 
-    processFiles(this.#rootNode, this.#options.context)
+    processFiles(this.#rootNode, this.#context)
 
-    if (!this.#options.debug && !this.#options.stdout) {
+    if (!this.#context.options?.debug && !this.#context.options?.stdout) {
       return
     }
 
-    const output = await this.#getOutput(this.#rootNode, this.#options.context)
+    const output = await this.#getOutput(this.#rootNode, this.#context)
 
-    if (this.#options.debug) {
+    if (this.#context.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)
+    if (this.#context.options?.stdout && process.env.NODE_ENV !== 'test') {
+      this.#context.options.stdout.clearLine(0)
+      this.#context.options.stdout.cursorTo(0)
+      this.#context.options.stdout.write(output)
     }
   }
   onError(error: Error): void {
@@ -166,9 +164,9 @@ export class ReactTemplate {
       : text
   }
 
-  render(node: ReactNode, { meta = {} }: Omit<RootContextProps, 'exit'> = { meta: {} }): void {
+  render(node: ReactNode): void {
     const element = (
-      <Root meta={meta} onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
+      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
         {node}
       </Root>
     )
@@ -177,9 +175,9 @@ export class ReactTemplate {
     KubbRenderer.flushSyncWork()
   }
 
-  async renderToString(node: ReactNode, { meta = {} }: Omit<RootContextProps, 'exit'> = { meta: {} }): Promise<string> {
+  async renderToString(node: ReactNode): Promise<string> {
     const element = (
-      <Root meta={meta} onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
+      <Root onExit={this.onExit.bind(this)} onError={this.onError.bind(this)}>
         {node}
       </Root>
     )
@@ -187,9 +185,9 @@ export class ReactTemplate {
     KubbRenderer.updateContainerSync(element, this.#container, null, null)
     KubbRenderer.flushSyncWork()
 
-    this.#options.context.clear()
+    this.#context.clear()
 
-    return this.#getOutput(this.#rootNode, this.#options.context)
+    return this.#getOutput(this.#rootNode, this.#context)
   }
 
   unmount(error?: Error | number | null): void {
@@ -197,7 +195,7 @@ export class ReactTemplate {
       return
     }
 
-    if (this.#options.debug) {
+    if (this.#context.options?.debug) {
       console.log('Unmount', error)
     }
 

package/src/components/Const.tsx

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

package/src/components/Function.tsx

@@ -1,6 +1,5 @@
 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 = {
@@ -51,24 +50,9 @@ export function Function({ name, default: isDefault, export: canExport, async, g
           <br />
         </>
       )}
-      {canExport && (
-        <>
-          export
-          <Space />
-        </>
-      )}
-      {isDefault && (
-        <>
-          default
-          <Space />
-        </>
-      )}
-      {async && (
-        <>
-          async
-          <Space />
-        </>
-      )}
+      {canExport && <>export </>}
+      {isDefault && <>default </>}
+      {async && <>async </>}
       function {name}
       {generics && (
         <>
@@ -112,25 +96,9 @@ function ArrowFunction({ name, default: isDefault, export: canExport, async, gen
           <br />
         </>
       )}
-      {canExport && (
-        <>
-          export
-          <Space />
-        </>
-      )}
-      {isDefault && (
-        <>
-          default
-          <Space />
-        </>
-      )}
-      const {name} =<Space />
-      {async && (
-        <>
-          async
-          <Space />
-        </>
-      )}
+      {canExport && <>export </>}
+      {isDefault && <>default </>}
+      const {name} = {async && <>async </>}
       {generics && (
         <>
           {'<'}

package/src/components/Root.tsx

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

package/src/components/Type.tsx

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

package/src/{hooks → composables}/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(): AppContextProps {
+export function useApp<TMeta = unknown>(): AppContextProps<TMeta> {
   const app = useContext(App.Context)
 
   if (!app) {
     throw new Error('<App /> should be set')
   }
 
-  return app
+  return app as AppContextProps<TMeta>
 }

package/src/createApp.ts

@@ -1,14 +1,9 @@
-import process from 'node:process'
 import { defineApp } from '@kubb/fabric-core'
-import type { ElementType } from 'react'
-import { createElement } from './index.ts'
-import { ReactTemplate } from './ReactTemplate.tsx'
+import { type ElementType, createElement } from 'react'
+import { type ReactAppContext, ReactTemplate } from './ReactTemplate.tsx'
 
-export const createApp = defineApp<ElementType>((app, context) => {
-  const template =
-    process.env.NODE_ENV === 'test'
-      ? new ReactTemplate({ context })
-      : new ReactTemplate({ context, stdout: process.stdout, stderr: process.stderr, stdin: process.stdin })
+export const createApp = defineApp<ElementType, ReactAppContext>((app, context) => {
+  const template = new ReactTemplate(context)
 
   return {
     render() {

package/src/dom.ts

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

package/src/index.ts

@@ -7,12 +7,11 @@ 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'
-export { useFile } from './hooks/useFile.ts'
-export { useLifecycle } from './hooks/useLifecycle.tsx'
+export { useApp } from './composables/useApp.ts'
+export { useFile } from './composables/useFile.ts'
+export { useLifecycle } from './composables/useLifecycle.tsx'
 export { createFunctionParams, FunctionParams } from './utils/getFunctionParams.ts'
 
 export const createContext = React.createContext

package/src/components/Text.tsx

@@ -1,31 +0,0 @@
-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/utils/throttle.ts

@@ -1,30 +0,0 @@
-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)
-    },
-  ]
-}