@kubb/react-fabric 0.1.8 → 0.2.1

package/src/devtools.ts

@@ -1,118 +1,113 @@
-// @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'
+// biome-ignore lint/suspicious/noTsIgnore: cannot find types
+// @ts-ignore
+import devtools from 'react-devtools-core'
+import ws from 'ws'
+import { execa } from 'execa'
 
-// 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
+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() {
+  // 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>
@@ -50,6 +50,7 @@ export const reactPlugin = createPlugin<Options, ExtendOptions>({
         await app.context.events.emit('start')
       },
       async renderToString(App) {
+        await app.context.events.emit('start')
         return runtime.renderToString(createElement(App))
       },
       async waitUntilExit() {