@kubb/react-fabric 0.1.2 → 0.1.4

package/src/{ReactTemplate.tsx → Runtime.tsx}

@@ -1,17 +1,18 @@
 import process from 'node:process'
-import type { AppContext } from '@kubb/fabric-core/types'
 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 { FiberRoot } from './Renderer.ts'
+import { Renderer } from './Renderer.ts'
 import type { DOMElement } from './types.ts'
 import { squashTextNodes } from './utils/squashTextNodes.ts'
 import { processFiles } from './utils/processFiles.ts'
+import type { FileManager } from '@kubb/fabric-core'
 
-export type ReactAppContext = AppContext<{
+type Options = {
+  fileManager: FileManager
   stdout?: NodeJS.WriteStream
   stdin?: NodeJS.ReadStream
   stderr?: NodeJS.WriteStream
@@ -19,10 +20,10 @@ export type ReactAppContext = AppContext<{
    * Set this to true to always see the result of the render in the console(line per render)
    */
   debug?: boolean
-}>
+}
 
-export class ReactTemplate {
-  readonly #context: ReactAppContext
+export class Runtime {
+  readonly #options: Options
   // Ignore last render after unmounting a tree to prevent empty output before exit
   #isUnmounted: boolean
 
@@ -30,8 +31,8 @@ export class ReactTemplate {
   readonly #container: FiberRoot
   readonly #rootNode: DOMElement
 
-  constructor(context: ReactAppContext) {
-    this.#context = context
+  constructor(options: Options) {
+    this.#options = options
 
     this.#rootNode = createNode('kubb-root')
     this.#rootNode.onRender = this.onRender
@@ -85,7 +86,7 @@ export class ReactTemplate {
     const onRecoverableError = logRecoverableError
     const transitionCallbacks = null
 
-    this.#container = KubbRenderer.createContainer(
+    this.#container = Renderer.createContainer(
       this.#rootNode,
       rootTag,
       hydrationCallbacks,
@@ -106,12 +107,17 @@ export class ReactTemplate {
       { alwaysLast: false },
     ).bind(this)
 
-    KubbRenderer.injectIntoDevTools({
+    Renderer.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
     })
   }
+
+  get fileManager() {
+    return this.#options.fileManager
+  }
+
   resolveExitPromise: () => void = () => {}
   rejectExitPromise: (reason?: Error) => void = () => {}
   unsubscribeExit: () => void = () => {}
@@ -120,25 +126,25 @@ export class ReactTemplate {
       return
     }
 
-    this.#context.fileManager.clear()
+    this.fileManager.clear()
 
-    processFiles(this.#rootNode, this.#context)
+    processFiles(this.#rootNode, this.fileManager)
 
-    if (!this.#context.options?.debug && !this.#context.options?.stdout) {
+    if (!this.#options?.debug && !this.#options?.stdout) {
       return
     }
 
-    const output = await this.#getOutput(this.#rootNode, this.#context)
+    const output = await this.#getOutput(this.#rootNode)
 
-    if (this.#context.options?.debug) {
+    if (this.#options?.debug) {
       console.log('Rendering: \n')
       console.log(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)
+    if (this.#options?.stdout && process.env.NODE_ENV !== 'test') {
+      this.#options.stdout.clearLine(0)
+      this.#options.stdout.cursorTo(0)
+      this.#options.stdout.write(output)
     }
   }
   onError(error: Error): void {
@@ -152,9 +158,9 @@ export class ReactTemplate {
     this.unmount(error)
   }
 
-  async #getOutput(node: DOMElement, context: AppContext): Promise<string> {
+  async #getOutput(node: DOMElement): Promise<string> {
     const text = squashTextNodes(node)
-    const files = context.fileManager.files
+    const files = this.fileManager.files
 
     return files.length
       ? [...files]
@@ -171,8 +177,8 @@ export class ReactTemplate {
       </Root>
     )
 
-    KubbRenderer.updateContainerSync(element, this.#container, null, null)
-    KubbRenderer.flushSyncWork()
+    Renderer.updateContainerSync(element, this.#container, null, null)
+    Renderer.flushSyncWork()
   }
 
   async renderToString(node: ReactNode): Promise<string> {
@@ -182,12 +188,12 @@ export class ReactTemplate {
       </Root>
     )
 
-    KubbRenderer.updateContainerSync(element, this.#container, null, null)
-    KubbRenderer.flushSyncWork()
+    Renderer.updateContainerSync(element, this.#container, null, null)
+    Renderer.flushSyncWork()
 
-    this.#context.fileManager.clear()
+    this.fileManager.clear()
 
-    return this.#getOutput(this.#rootNode, this.#context)
+    return this.#getOutput(this.#rootNode)
   }
 
   unmount(error?: Error | number | null): void {
@@ -195,7 +201,7 @@ export class ReactTemplate {
       return
     }
 
-    if (this.#context.options?.debug) {
+    if (this.#options?.debug) {
       console.log('Unmount', error)
     }
 
@@ -204,7 +210,7 @@ export class ReactTemplate {
 
     this.#isUnmounted = true
 
-    KubbRenderer.updateContainerSync(null, this.#container, null, null)
+    Renderer.updateContainerSync(null, this.#container, null, null)
 
     if (error instanceof Error) {
       this.rejectExitPromise(error)

package/src/index.ts

@@ -2,18 +2,26 @@ import './globals.ts'
 
 import * as React from 'react'
 
+// components
 export { App } from './components/App.tsx'
 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 { Type } from './components/Type.tsx'
-export { createApp } from './createApp.ts'
+
 export { useApp } from './composables/useApp.ts'
 export { useFile } from './composables/useFile.ts'
 export { useLifecycle } from './composables/useLifecycle.tsx'
+
+// expose fabric core helpers
+export { createApp } from '@kubb/fabric-core'
+
+// utils
 export { createFunctionParams, FunctionParams } from './utils/getFunctionParams.ts'
+export { Runtime } from './Runtime.tsx'
 
+// react helpers
 export const createContext = React.createContext
 export const createElement = React.createElement
 export const useContext = React.useContext

package/src/parsers/index.ts

@@ -0,0 +1 @@
+export * from '@kubb/fabric-core/parsers'

package/src/plugins/index.ts

@@ -0,0 +1,3 @@
+export * from '@kubb/fabric-core/plugins'
+
+export { reactPlugin } from './reactPlugin.ts'

package/src/plugins/reactPlugin.ts

@@ -0,0 +1,47 @@
+import { createPlugin } from '@kubb/fabric-core/plugins'
+import { Runtime } from '../Runtime.tsx'
+import { createElement, type ElementType } from 'react'
+
+type Options = {
+  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
+}
+
+type ExtendOptions = {
+  render(App: ElementType): Promise<void> | void
+  renderToString(App: ElementType): Promise<string> | string
+  waitUntilExit(): Promise<void>
+}
+
+declare module '@kubb/fabric-core' {
+  interface App {
+    render(App: ElementType): Promise<void> | void
+    renderToString(App: ElementType): Promise<string> | string
+    waitUntilExit(): Promise<void>
+  }
+}
+
+export const reactPlugin = createPlugin<Options, ExtendOptions>({
+  name: 'react',
+  install() {},
+  inject(app, options: Options = {}) {
+    const runtime = new Runtime({ fileManager: app.context.fileManager, ...options })
+
+    return {
+      async render(App) {
+        runtime.render(createElement(App))
+      },
+      async renderToString(App) {
+        return runtime.renderToString(createElement(App))
+      },
+      waitUntilExit() {
+        return runtime.waitUntilExit()
+      },
+    }
+  },
+})

package/src/utils/processFiles.ts

@@ -3,12 +3,13 @@ import { squashExportNodes } from './squashExportNodes.ts'
 import { squashImportNodes } from './squashImportNodes.ts'
 import { squashSourceNodes } from './squashSourceNodes.ts'
 
-import type { AppContext, KubbFile } from '@kubb/fabric-core/types'
+import type { KubbFile } from '@kubb/fabric-core/types'
 import type React from 'react'
 import type { File } from '../components/File.tsx'
 import type { DOMElement } from '../types.ts'
+import type { FileManager } from '@kubb/fabric-core'
 
-export function processFiles(node: DOMElement, context: AppContext) {
+export function processFiles(node: DOMElement, fileManager: FileManager) {
   for (let index = 0; index < node.childNodes.length; index++) {
     const childNode = node.childNodes[index]
 
@@ -17,7 +18,7 @@ export function processFiles(node: DOMElement, context: AppContext) {
     }
 
     if (childNode.nodeName !== '#text' && childNode.nodeName !== 'kubb-file' && nodeNames.includes(childNode.nodeName)) {
-      processFiles(childNode, context)
+      processFiles(childNode, fileManager)
     }
 
     if (childNode.nodeName === 'kubb-file') {
@@ -37,7 +38,7 @@ export function processFiles(node: DOMElement, context: AppContext) {
           banner: attributes.banner,
         }
 
-        context.fileManager.add(file)
+        fileManager.add(file)
       }
     }
   }

package/src/createApp.ts

@@ -1,19 +0,0 @@
-import { defineApp } from '@kubb/fabric-core'
-import { type ElementType, createElement } from 'react'
-import { type ReactAppContext, ReactTemplate } from './ReactTemplate.tsx'
-
-export const createApp = defineApp<ElementType, ReactAppContext>((App, context) => {
-  const template = new ReactTemplate(context)
-
-  return {
-    render() {
-      template.render(createElement(App))
-    },
-    async renderToString() {
-      return template.renderToString(createElement(App))
-    },
-    waitUntilExit() {
-      return template.waitUntilExit()
-    },
-  }
-})