@kubb/react-fabric 0.2.0 → 0.2.2

package/src/devtools.ts

@@ -1,118 +1,115 @@
-// @ts-expect-error cannot find package
-import { connectToDevTools } from 'react-devtools-inline/backend'
-// import { onExit } from 'signal-exit'
-import { WebSocketServer } from 'ws'
+import { onExit } from 'signal-exit'
 
-// declare global {
-//   var WebSocket: typeof WebSocket
-//   var self: any
-//   var window: any
-//   var isDevtoolsEnabled: any
-// }
+import ws from 'ws'
+import { execa } from 'execa'
 
-// 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
+declare global {
+  var WebSocket: typeof WebSocket
+  var self: any
+  var window: any
+  var isDevtoolsEnabled: any
+}
 
-// 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,
-//   },
-// ]
+export function open() {
+  // biome-ignore lint/suspicious/noTsIgnore: cannot find types
+  // @ts-ignore
+  import('react-devtools-core').then((devtools) => {
+    // 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 = global as any
+    customGlobal.WebSocket ||= ws
+    customGlobal.window ||= global
+    customGlobal.self ||= global
+    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 }
+    console.info('Opening devtools')
+    const controller = new AbortController()
+    execa({
+      stdio: 'pipe',
+      preferLocal: true,
+      cancelSignal: controller.signal,
+      gracefulCancel: true,
+    })`npx react-devtools`
 
-  const wss = new WebSocketServer({ port: 8097 })
+    ;(devtools as any).initialize()
+    console.info('Connecting devtools')
 
-  connectToDevTools({
-    websocket: wss,
-  })
+    try {
+      ;(devtools as any).connectToDevTools({
+        host: 'localhost',
+        port: 8097,
+        useHttps: false,
+        isAppActive: () => true,
+      })
+    } catch (e) {
+      console.error(e)
+      console.info('Error when connecting the devtools')
+    }
 
-  // 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 },
-  // )
+    onExit(
+      () => {
+        console.info('Disconnecting devtools')
+        controller.abort()
+      },
+      { alwaysLast: false },
+    )
+  })
 }
-
-openDevtools()

package/src/index.ts

@@ -15,7 +15,8 @@ export { useFile } from './composables/useFile.ts'
 export { useLifecycle } from './composables/useLifecycle.tsx'
 
 // expose fabric core helpers
-export { createApp } from '@kubb/fabric-core'
+export { createFabric } from '@kubb/fabric-core'
+export { createReactFabric } from './createReactFabric.ts'
 
 // utils
 export { createFunctionParams, FunctionParams } from './utils/getFunctionParams.ts'

package/src/plugins/reactPlugin.ts

@@ -2,7 +2,7 @@ import { createPlugin } from '@kubb/fabric-core/plugins'
 import { Runtime } from '../Runtime.tsx'
 import { createElement, type ElementType } from 'react'
 
-type Options = {
+export type Options = {
   stdout?: NodeJS.WriteStream
   stdin?: NodeJS.ReadStream
   stderr?: NodeJS.WriteStream
@@ -21,7 +21,7 @@ type ExtendOptions = {
 // biome-ignore lint/suspicious/noTsIgnore: production ready
 // @ts-ignore
 declare module '@kubb/fabric-core' {
-  interface App {
+  interface Fabric {
     render(App: ElementType): Promise<void> | void
     renderToString(App: ElementType): Promise<string> | string
     waitUntilExit(): Promise<void>
@@ -30,7 +30,7 @@ declare module '@kubb/fabric-core' {
 
 declare global {
   namespace Kubb {
-    interface App {
+    interface Fabric {
       render(App: ElementType): Promise<void> | void
       renderToString(App: ElementType): Promise<string> | string
       waitUntilExit(): Promise<void>