@kubb/react-fabric 0.0.0-canary-20251020201500

package/src/components/Type.tsx

@@ -0,0 +1,40 @@
+import type { JSDoc, Key, KubbNode } from '../types.ts'
+import { createJSDoc } from '../utils/createJSDoc.ts'
+
+type Props = {
+  key?: Key
+  /**
+   * Name of the type, this needs to start with a capital letter.
+   */
+  name: string
+  /**
+   * Does this type need to be exported.
+   */
+  export?: boolean
+  /**
+   * Options for JSdocs.
+   */
+  JSDoc?: JSDoc
+  children?: KubbNode
+}
+
+export function Type({ name, export: canExport, JSDoc, children }: Props) {
+  if (name.charAt(0).toUpperCase() !== name.charAt(0)) {
+    throw new Error('Name should start with a capital letter(see TypeScript types)')
+  }
+
+  return (
+    <>
+      {JSDoc?.comments && (
+        <>
+          {createJSDoc({ comments: JSDoc?.comments })}
+          <br />
+        </>
+      )}
+      {canExport && <>export </>}
+      type {name} = {children}
+    </>
+  )
+}
+
+Type.displayName = 'KubbType'

package/src/createApp.ts

@@ -0,0 +1,23 @@
+import process from 'node:process'
+import { defineApp } from '@kubb/fabric-core'
+import { type ElementType, createElement } from 'react'
+import { 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 })
+
+  return {
+    render() {
+      template.render(createElement(app))
+    },
+    async renderToString() {
+      return template.renderToString(createElement(app))
+    },
+    waitUntilExit() {
+      return template.waitUntilExit()
+    },
+  }
+})

package/src/devtools.ts

@@ -0,0 +1,118 @@
+// @ts-expect-error cannot find package
+import { connectToDevTools } from 'react-devtools-inline/backend'
+// import { onExit } from 'signal-exit'
+import { WebSocketServer } from 'ws'
+
+// declare global {
+//   var WebSocket: typeof WebSocket
+//   var self: any
+//   var window: any
+//   var isDevtoolsEnabled: any
+// }
+
+// Filter out Kubbs's internal components from devtools for a cleaner view.
+// See https://github.com/facebook/react/blob/edf6eac8a181860fd8a2d076a43806f1237495a1/packages/react-devtools-shared/src/types.js#L24
+
+// const customGlobal: any = globalThis
+// customGlobal.WebSocket ||= ws
+// customGlobal.window ||= customGlobal
+// customGlobal.self ||= customGlobal
+// customGlobal.isDevtoolsEnabled = true
+// customGlobal.window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = [
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'Context.Provider',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'KubbRoot',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'KubbErrorBoundary',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'kubb-file',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'kubb-text',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'kubb-import',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'kubb-export',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+//   {
+//     // ComponentFilterDisplayName
+//     type: 2,
+//     value: 'kubb-source',
+//     isEnabled: true,
+//     isValid: true,
+//   },
+// ]
+
+function openDevtools() {
+  // let subprocess: { kill: () => void }
+
+  const wss = new WebSocketServer({ port: 8097 })
+
+  connectToDevTools({
+    websocket: wss,
+  })
+
+  // import('execa')
+  //   .then(async (execa) => {
+  //     console.log('Opening devtools')
+  //
+  //     subprocess = execa.execa({ preferLocal: true })`npx react-devtools`
+  //   })
+  //   .then(() => {
+  //     // @ts-expect-error
+  //     return import('react-devtools-inline/backend')
+  //   })
+  //   .then((devtools) => {
+  //     console.log('Connecting devtools')
+  //     console.log(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, customGlobal.window.__REACT_DEVTOOLS_GLOBAL_HOOK__)
+  //     devtools.initialize()
+  //     devtools.connectToDevTools()
+  //   })
+  //   .catch((err) => {
+  //     console.log('Error connecting devtools\n', err)
+  //   })
+  //
+  // onExit(
+  //   () => {
+  //     console.log('Disconnecting devtools')
+  //     subprocess?.kill()
+  //   },
+  //   { alwaysLast: false },
+  // )
+}
+
+openDevtools()

package/src/dom.ts

@@ -0,0 +1,75 @@
+import type { DOMElement, DOMNode, DOMNodeAttribute, ElementNames, TextNode } from './types.ts'
+
+export const createNode = (nodeName: string): DOMElement => {
+  const node: DOMElement = {
+    nodeName: nodeName as DOMElement['nodeName'],
+    attributes: {},
+    childNodes: [],
+    parentNode: undefined,
+  }
+
+  return node
+}
+
+export const appendChildNode = (node: DOMNode, childNode: DOMElement | DOMNode): void => {
+  if (childNode.parentNode) {
+    removeChildNode(childNode.parentNode, childNode)
+  }
+
+  if (node.nodeName !== '#text') {
+    childNode.parentNode = node
+    node.childNodes.push(childNode)
+  }
+}
+
+export const insertBeforeNode = (node: DOMElement, newChildNode: DOMNode, beforeChildNode: DOMNode): void => {
+  if (newChildNode.parentNode) {
+    removeChildNode(newChildNode.parentNode, newChildNode)
+  }
+
+  newChildNode.parentNode = node
+
+  const index = node.childNodes.indexOf(beforeChildNode)
+  if (index >= 0) {
+    node.childNodes.splice(index, 0, newChildNode)
+
+    return
+  }
+
+  node.childNodes.push(newChildNode)
+}
+
+export const removeChildNode = (node: DOMElement, removeNode: DOMNode): void => {
+  removeNode.parentNode = undefined
+
+  const index = node.childNodes.indexOf(removeNode)
+  if (index >= 0) {
+    node.childNodes.splice(index, 1)
+  }
+}
+
+export const setAttribute = (node: DOMElement, key: string, value: DOMNodeAttribute): void => {
+  node.attributes[key] = value
+}
+
+export const createTextNode = (text: string): TextNode => {
+  const node: TextNode = {
+    nodeName: '#text',
+    nodeValue: text,
+    parentNode: undefined,
+  }
+
+  setTextNodeValue(node, text)
+
+  return node
+}
+
+export const setTextNodeValue = (node: TextNode, text: string): void => {
+  if (typeof text !== 'string') {
+    text = String(text)
+  }
+
+  node.nodeValue = text
+}
+
+export const nodeNames: Array<ElementNames> = ['kubb-export', 'kubb-file', 'kubb-source', 'kubb-import', 'kubb-text']

package/src/globals.ts

@@ -0,0 +1,52 @@
+import type { KubbFile } from '@kubb/fabric-core'
+import type React from 'react'
+import type { KubbNode } from './types.ts'
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kubb-text': {
+        children?: KubbNode
+      }
+      'kubb-file': {
+        id?: string
+        children?: KubbNode
+        baseName: string
+        path: string
+        override?: boolean
+        meta?: KubbFile.File['meta']
+      }
+      'kubb-source': KubbFile.Source & {
+        children?: KubbNode
+      }
+      'kubb-import': KubbFile.Import
+      'kubb-export': KubbFile.Export
+      br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>
+    }
+  }
+}
+// biome-ignore lint/suspicious/noTsIgnore: not needed
+// @ts-ignore
+declare module '@kubb/react-fabric/jsx-runtime' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'kubb-text': {
+        children?: KubbNode
+      }
+      'kubb-file': {
+        id?: string
+        children?: KubbNode
+        baseName: string
+        path: string
+        override?: boolean
+        meta?: KubbFile.File['meta']
+      }
+      'kubb-source': KubbFile.Source & {
+        children?: KubbNode
+      }
+      'kubb-import': KubbFile.Import
+      'kubb-export': KubbFile.Export
+      br: React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>
+    }
+  }
+}

package/src/hooks/useApp.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react'
+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> {
+  const app = useContext(App.Context)
+
+  if (!app) {
+    throw new Error('<App /> should be set')
+  }
+
+  return app as AppContextProps<TMeta>
+}

package/src/hooks/useFile.ts

@@ -0,0 +1,14 @@
+import { useContext } from 'react'
+
+import { File } from '../components/File.tsx'
+
+import type { FileContextProps } from '../components/File.tsx'
+
+/**
+ * `useFile` will return the current file when <File/> is used.
+ */
+export function useFile(): FileContextProps {
+  const file = useContext(File.Context)
+
+  return file as FileContextProps
+}

package/src/hooks/useLifecycle.tsx

@@ -0,0 +1,18 @@
+import { useContext } from 'react'
+
+import { Root } from '../components/Root.tsx'
+
+/**
+ * `useLifecycle` will return some helpers to exit/restart the generation.
+ */
+export function useLifecycle() {
+  const { exit } = useContext(Root.Context)
+
+  return {
+    exit: () => {
+      setTimeout(() => {
+        exit()
+      }, 0)
+    },
+  }
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+import './globals.ts'
+
+import * as React from 'react'
+
+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 './hooks/useApp.ts'
+export { useFile } from './hooks/useFile.ts'
+export { useLifecycle } from './hooks/useLifecycle.tsx'
+export { createFunctionParams, FunctionParams } from './utils/getFunctionParams.ts'
+
+export const createContext = React.createContext
+export const createElement = React.createElement
+export const useContext = React.useContext
+export const useEffect = React.useEffect
+export const useState = React.useState
+export const useRef = React.useRef
+export const use = React.use
+export const useReducer = React.useReducer

package/src/jsx-runtime.ts

@@ -0,0 +1,8 @@
+import './globals.ts'
+
+import ReactJSXRuntime from 'react/jsx-runtime'
+
+export const Fragment = ReactJSXRuntime.Fragment
+export const jsx = ReactJSXRuntime.jsx
+export const jsxs = ReactJSXRuntime.jsxs
+export const jsxDEV = ReactJSXRuntime.jsx

package/src/kubbRenderer.ts

@@ -0,0 +1,175 @@
+import Reconciler from 'react-reconciler'
+import { DefaultEventPriority, NoEventPriority } from 'react-reconciler/constants'
+
+import { appendChildNode, createNode, createTextNode, insertBeforeNode, removeChildNode, setAttribute, setTextNodeValue } from './dom.ts'
+import type { KubbNode } from './types'
+import type { DOMElement, DOMNodeAttribute, ElementNames, TextNode } from './types.ts'
+
+declare module 'react-reconciler' {
+  // @ts-expect-error custom override
+  interface Reconciler {
+    updateContainerSync(element: KubbNode, container: unknown, parentComponent: any, callback?: null | (() => void)): void
+    flushSyncWork(): void
+    createContainer(
+      containerInfo: unknown,
+      tag: Reconciler.RootTag,
+      hydrationCallbacks: null | Reconciler.SuspenseHydrationCallbacks<any>,
+      isStrictMode: boolean,
+      concurrentUpdatesByDefaultOverride: null | boolean,
+      identifierPrefix: string,
+      onUncaughtError: (error: Error) => void,
+      onCaughtError: (error: Error) => void,
+      onRecoverableError: (error: Error) => void,
+      transitionCallbacks: null | Reconciler.TransitionTracingCallbacks,
+    ): Reconciler.OpaqueRoot
+  }
+}
+
+type Props = Record<string, unknown>
+
+type HostContext = {
+  type: ElementNames
+  isFile: boolean
+  isSource: boolean
+}
+
+let currentUpdatePriority = NoEventPriority
+
+/**
+ * @link https://www.npmjs.com/package/react-devtools-inline
+ * @link https://github.com/nitin42/Making-a-custom-React-renderer/blob/master/part-one.md
+ * @link https://github.com/facebook/react/tree/main/packages/react-reconciler#practical-examples
+ * @link https://github.com/vadimdemedes/ink
+ * @link https://github.com/pixijs/pixi-react/tree/main/packages
+ * @link https://github.com/diegomura/react-pdf/blob/master/packages/reconciler/src/reconciler-31.ts
+ */
+export const KubbRenderer = Reconciler({
+  getRootHostContext: () => ({
+    type: 'kubb-root',
+    isFile: false,
+    isSource: false,
+  }),
+  prepareForCommit: () => {
+    return null
+  },
+  preparePortalMount: () => null,
+  clearContainer: () => false,
+  resetAfterCommit(rootNode: DOMElement) {
+    if (typeof rootNode.onRender === 'function') {
+      rootNode.onRender()
+    }
+  },
+  getChildHostContext(parentHostContext: HostContext, type: ElementNames) {
+    const isInsideText = type === 'kubb-text'
+    const isFile = type === 'kubb-file' || parentHostContext.isFile
+    const isSource = type === 'kubb-source' || parentHostContext.isSource
+
+    return { isInsideText, isFile, isSource, type }
+  },
+  shouldSetTextContent: () => false,
+  createInstance(originalType: ElementNames, newProps: Props, _root: DOMElement) {
+    const node = createNode(originalType)
+
+    for (const [key, value] of Object.entries(newProps)) {
+      if (key === 'children') {
+        continue
+      }
+
+      setAttribute(node, key, value as DOMNodeAttribute)
+    }
+
+    return node
+  },
+  createTextInstance(text: string, _root: DOMElement, hostContext: HostContext) {
+    if (hostContext.isFile && !hostContext.isSource) {
+      throw new Error(`[react] '${text}' should be part of <File.Source> component when using the <File/> component`)
+    }
+
+    return createTextNode(text)
+  },
+  resetTextContent() {},
+  hideTextInstance(node: TextNode) {
+    setTextNodeValue(node, '')
+  },
+  unhideTextInstance(node: TextNode, text: string) {
+    setTextNodeValue(node, text)
+  },
+  getPublicInstance: (instance) => instance,
+  appendInitialChild: appendChildNode,
+  appendChild: appendChildNode,
+  insertBefore: insertBeforeNode,
+  finalizeInitialChildren(_node, _type, _props, _rootNode) {
+    return false
+  },
+  supportsMutation: true,
+  isPrimaryRenderer: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  beforeActiveInstanceBlur() {},
+  afterActiveInstanceBlur() {},
+  detachDeletedInstance() {},
+  getInstanceFromNode: () => null,
+  prepareScopeUpdate() {},
+  getInstanceFromScope: () => null,
+  appendChildToContainer: appendChildNode,
+  insertInContainerBefore: insertBeforeNode,
+  removeChildFromContainer(node: DOMElement, removeNode: TextNode) {
+    removeChildNode(node, removeNode)
+  },
+  resetFormInstance() {},
+  commitMount() {},
+  commitUpdate(node: DOMElement, _payload, _type, _oldProps: Props, newProps: Props) {
+    const { props } = newProps
+
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        setAttribute(node, key, value as DOMNodeAttribute)
+      }
+    }
+  },
+  commitTextUpdate(node: TextNode, _oldText, newText) {
+    setTextNodeValue(node, newText)
+  },
+  removeChild(node: DOMElement, removeNode: TextNode) {
+    removeChildNode(node, removeNode)
+  },
+  setCurrentUpdatePriority: (newPriority: number) => {
+    currentUpdatePriority = newPriority
+  },
+  getCurrentUpdatePriority: () => currentUpdatePriority,
+  resolveUpdatePriority: () => currentUpdatePriority || DefaultEventPriority,
+  maySuspendCommit() {
+    return false
+  },
+  startSuspendingCommit() {},
+  waitForCommitToBeReady() {
+    return null
+  },
+  preloadInstance() {
+    // Return true to indicate it's already loaded
+    return true
+  },
+  suspendInstance() {},
+  shouldAttemptEagerTransition() {
+    return false
+  },
+  NotPendingTransition: undefined,
+  requestPostPaintCallback: function (_callback: (time: number) => void): void {
+    throw new Error('Function not implemented.')
+  },
+  trackSchedulerEvent: function (): void {
+    throw new Error('Function not implemented.')
+  },
+  resolveEventType: function (): null | string {
+    throw new Error('Function not implemented.')
+  },
+  resolveEventTimeStamp: function (): number {
+    throw new Error('Function not implemented.')
+  },
+  HostTransitionContext: undefined as any,
+})
+
+export type { FiberRoot } from 'react-reconciler'

package/src/types.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+type ReactElementNames = 'br' | 'div'
+
+export type ElementNames = ReactElementNames | 'kubb-text' | 'kubb-file' | 'kubb-source' | 'kubb-import' | 'kubb-export' | 'kubb-root' | 'kubb-app'
+
+type Node = {
+  parentNode: DOMElement | undefined
+  internal_static?: boolean
+}
+
+export type DOMNodeAttribute = boolean | string | number
+
+type TextName = '#text'
+export type TextNode = {
+  nodeName: TextName
+  nodeValue: string
+} & Node
+
+export type DOMNode<T = { nodeName: NodeNames }> = T extends {
+  nodeName: infer U
+}
+  ? U extends '#text'
+    ? TextNode
+    : DOMElement
+  : never
+
+type OutputTransformer = (s: string, index: number) => string
+
+export type DOMElement = {
+  nodeName: ElementNames
+  attributes: Record<string, DOMNodeAttribute>
+  childNodes: DOMNode[]
+  internal_transform?: OutputTransformer
+
+  // Internal properties
+  isStaticDirty?: boolean
+  staticNode?: DOMElement
+  onComputeLayout?: () => void
+  onRender?: () => void
+  onImmediateRender?: () => void
+} & Node
+
+type NodeNames = ElementNames | TextName
+
+export type KubbNode = ReactNode
+
+export type { Key } from 'react'
+
+export type JSDoc = {
+  comments: string[]
+}
+
+export type { Params, Param } from './utils/getFunctionParams.ts'

package/src/utils/createJSDoc.ts

@@ -0,0 +1,9 @@
+export function createJSDoc({ comments }: { comments: Array<string> }): string {
+  const filteredComments = comments.filter(Boolean)
+
+  if (!filteredComments.length) {
+    return ''
+  }
+
+  return `/**\n * ${filteredComments.join('\n * ')}\n */`
+}