@opentui/solid 0.1.88 → 0.1.90

package/README.md

@@ -128,6 +128,8 @@ Returns the current component catalogue that powers JSX tag lookup.
 
 - `useRenderer()`
 - `onResize(callback)`
+- `onFocus(callback)`
+- `onBlur(callback)`
 - `useTerminalDimensions()`
 - `useKeyboard(handler, options?)`
 - `usePaste(handler)`

package/dist/index.d.ts

@@ -23,6 +23,8 @@ export function spread(node: any, accessor: any, skipChildren: any): void;
 export function setProp(node: any, name: any, value: any, prev: any): any;
 export function render(node: any, rendererOrConfig?: {}): Promise<void>;
 export function onResize(callback: any): void;
+export function onFocus(callback: any): void;
+export function onBlur(callback: any): void;
 declare var mergeProps3: typeof mergeProps;
 declare function memo2(fn: any): import("solid-js").Accessor<any>;
 export var insertNode: any;

package/index.js

@@ -80,6 +80,24 @@ var usePaste = (callback) => {
   });
 };
 var useKeyHandler = useKeyboard;
+var onFocus = (callback) => {
+  const renderer = useRenderer();
+  onMount(() => {
+    renderer.on("focus", callback);
+  });
+  onCleanup(() => {
+    renderer.off("focus", callback);
+  });
+};
+var onBlur = (callback) => {
+  const renderer = useRenderer();
+  onMount(() => {
+    renderer.on("blur", callback);
+  });
+  onCleanup(() => {
+    renderer.off("blur", callback);
+  });
+};
 var useSelectionHandler = (callback) => {
   const renderer = useRenderer();
   onMount(() => {
@@ -984,11 +1002,18 @@ function Slot(props) {
   });
   const entryIds = createMemo3(() => entries().map((entry) => entry.id));
   const entriesById = createMemo3(() => new Map(entries().map((entry) => [entry.id, entry])));
-  const fallbackChildren = children(() => local.children);
   const slotName = () => String(local.name);
+  const FallbackView = () => {
+    const resolvedFallbackChildren = children(() => local.children);
+    return memo2(resolvedFallbackChildren);
+  };
+  const renderFallback = () => {
+    return createComponent2(FallbackView, {});
+  };
+  const resolveFallback = (fallbackValue) => fallbackValue?.() ?? null;
   const renderPluginFailurePlaceholder = (failure, fallbackValue) => {
     if (!pluginFailurePlaceholder()) {
-      return fallbackValue;
+      return resolveFallback(fallbackValue);
     }
     try {
       return pluginFailurePlaceholder()(failure);
@@ -1000,11 +1025,10 @@ function Slot(props) {
         source: "solid",
         error
       });
-      return fallbackValue;
+      return resolveFallback(fallbackValue);
     }
   };
   const renderEntry = (entry, fallbackOnError) => {
-    const fallbackValue = fallbackOnError ?? null;
     let initialRender;
     try {
       initialRender = entry.renderer(registry().context, slotProps);
@@ -1016,12 +1040,12 @@ function Slot(props) {
         source: "solid",
         error
       });
-      return renderPluginFailurePlaceholder(failure, fallbackValue);
+      return renderPluginFailurePlaceholder(failure, fallbackOnError);
     }
     const resolvedInitialRender = children(() => initialRender);
     const hasInitialOutput = resolvedInitialRender.toArray().some((node) => node !== null && node !== undefined && node !== false);
     if (!hasInitialOutput) {
-      return fallbackValue;
+      return resolveFallback(fallbackOnError);
     }
     return createComponent2(ErrorBoundary, {
       fallback: (error) => {
@@ -1032,7 +1056,7 @@ function Slot(props) {
           source: "solid",
           error
         });
-        return renderPluginFailurePlaceholder(failure, fallbackValue);
+        return renderPluginFailurePlaceholder(failure, fallbackOnError);
       },
       get children() {
         return resolvedInitialRender();
@@ -1049,7 +1073,7 @@ function Slot(props) {
       return renderEntry(resolvedEntry);
     });
   };
-  const appendView = [memo2(fallbackChildren), createComponent2(For, {
+  const appendView = [renderFallback, createComponent2(For, {
     get each() {
       return entryIds();
     },
@@ -1060,22 +1084,21 @@ function Slot(props) {
   return memo2(() => {
     const resolvedEntries = entries();
     const mode = local.mode ?? "append";
-    const fallback = fallbackChildren();
     if (resolvedEntries.length === 0) {
-      return fallback;
+      return renderFallback();
     }
     if (mode === "single_winner") {
       const winner = resolvedEntries[0];
       if (!winner) {
-        return fallback;
+        return renderFallback();
       }
-      return renderEntry(winner, fallback);
+      return renderEntry(winner, renderFallback);
     }
     if (mode === "replace") {
       const renderedEntries = resolvedEntries.map((entry) => renderEntry(entry));
       const hasPluginOutput = renderedEntries.some((entry) => entry !== null && entry !== undefined && entry !== false);
       if (!hasPluginOutput) {
-        return fallback;
+        return renderFallback();
       }
       return renderedEntries;
     }
@@ -1166,6 +1189,8 @@ export {
   setProp,
   render,
   onResize,
+  onFocus,
+  onBlur,
   mergeProps3 as mergeProps,
   memo2 as memo,
   insertNode,

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
   "dependencies": {
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",
-    "@opentui/core": "0.1.88",
+    "@opentui/core": "0.1.90",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-preset-solid": "1.9.10",
     "entities": "7.0.1",

package/scripts/preload.ts

@@ -1,4 +1,3 @@
-import solidTransformPlugin from "./solid-plugin.js"
-import { plugin, type BunPlugin } from "bun"
+import { ensureSolidTransformPlugin } from "./solid-plugin.js"
 
-plugin(solidTransformPlugin)
+ensureSolidTransformPlugin()

package/scripts/runtime-plugin-support.ts

@@ -9,9 +9,9 @@ import {
 import * as solidJsRuntime from "solid-js"
 import * as solidJsStoreRuntime from "solid-js/store"
 import * as solidRuntime from "../index"
-import { createSolidTransformPlugin } from "./solid-plugin"
+import { ensureSolidTransformPlugin } from "./solid-plugin"
 
-const runtimePluginSupportInstalledKey = "__opentuiSolidRuntimePluginSupportInstalled__"
+const runtimePluginSupportInstalledKey = Symbol.for("opentui.solid.runtime-plugin-support")
 
 type RuntimePluginSupportState = typeof globalThis & {
   [runtimePluginSupportInstalledKey]?: boolean
@@ -38,14 +38,12 @@ export function ensureRuntimePluginSupport(): boolean {
     return false
   }
 
-  registerBunPlugin(
-    createSolidTransformPlugin({
-      moduleName: runtimeModuleIdForSpecifier("@opentui/solid"),
-      resolvePath(specifier) {
-        return resolveRuntimeSpecifier(specifier)
-      },
-    }),
-  )
+  ensureSolidTransformPlugin({
+    moduleName: runtimeModuleIdForSpecifier("@opentui/solid"),
+    resolvePath(specifier) {
+      return resolveRuntimeSpecifier(specifier)
+    },
+  })
 
   registerBunPlugin(
     createRuntimePlugin({

package/scripts/solid-plugin.d.ts

@@ -4,6 +4,8 @@ export interface CreateSolidTransformPluginOptions {
     moduleName?: string;
     resolvePath?: ResolveImportPath;
 }
+export declare function ensureSolidTransformPlugin(input?: CreateSolidTransformPluginOptions): boolean;
+export declare function resetSolidTransformPluginState(): void;
 export declare function createSolidTransformPlugin(input?: CreateSolidTransformPluginOptions): BunPlugin;
 declare const solidTransformPlugin: BunPlugin;
 export default solidTransformPlugin;

package/scripts/solid-plugin.ts

@@ -1,47 +1,112 @@
 import { transformAsync } from "@babel/core"
-import { readFile } from "node:fs/promises"
 // @ts-expect-error - Types not important.
 import ts from "@babel/preset-typescript"
 // @ts-expect-error - Types not important.
 import moduleResolver from "babel-plugin-module-resolver"
 // @ts-expect-error - Types not important.
 import solid from "babel-preset-solid"
-import { type BunPlugin } from "bun"
+import { plugin as registerBunPlugin, type BunPlugin } from "bun"
 
 export type ResolveImportPath = (specifier: string) => string | null
 
+const solidTransformStateKey = Symbol.for("opentui.solid.transform")
+
+type SolidTransformRuntime = {
+  moduleName?: string
+  resolvePath?: ResolveImportPath
+}
+
+type SolidTransformState = {
+  installed: boolean
+  runtime?: SolidTransformRuntime
+}
+
+type GlobalSolidTransformState = typeof globalThis & {
+  [solidTransformStateKey]?: SolidTransformState
+}
+
 export interface CreateSolidTransformPluginOptions {
   moduleName?: string
   resolvePath?: ResolveImportPath
 }
 
-export function createSolidTransformPlugin(input: CreateSolidTransformPluginOptions = {}): BunPlugin {
-  const moduleName = input.moduleName ?? "@opentui/solid"
-  const resolvePath = input.resolvePath
+const getSolidTransformState = (): SolidTransformState => {
+  const state = globalThis as GlobalSolidTransformState
+  state[solidTransformStateKey] ??= { installed: false }
+  return state[solidTransformStateKey]
+}
+
+const getSolidTransformRuntime = (): SolidTransformRuntime => {
+  return getSolidTransformState().runtime ?? {}
+}
+
+const sourcePath = (path: string): string => {
+  const searchIndex = path.indexOf("?")
+  const hashIndex = path.indexOf("#")
+  const end = [searchIndex, hashIndex].filter((index) => index >= 0).sort((a, b) => a - b)[0]
+  return end === undefined ? path : path.slice(0, end)
+}
+
+const hasSolidTransformRuntime = (input: CreateSolidTransformPluginOptions): boolean => {
+  return input.moduleName !== undefined || input.resolvePath !== undefined
+}
+
+export function ensureSolidTransformPlugin(input: CreateSolidTransformPluginOptions = {}): boolean {
+  const state = getSolidTransformState()
+
+  if (hasSolidTransformRuntime(input)) {
+    state.runtime = {
+      moduleName: input.moduleName,
+      resolvePath: input.resolvePath,
+    }
+  }
+
+  if (state.installed) {
+    return false
+  }
+
+  registerBunPlugin(createSolidTransformPlugin())
+  state.installed = true
+  return true
+}
 
+export function resetSolidTransformPluginState(): void {
+  const state = getSolidTransformState()
+  state.installed = false
+  delete state.runtime
+}
+
+export function createSolidTransformPlugin(input: CreateSolidTransformPluginOptions = {}): BunPlugin {
   return {
     name: "bun-plugin-solid",
     setup: (build) => {
-      build.onLoad({ filter: /[\/\\]node_modules[\/\\]solid-js[\/\\]dist[\/\\]server\.js$/ }, async (args) => {
-        const path = args.path.replace("server.js", "solid.js")
-        const file = Bun.file(path)
-        const code = await file.text()
-        return { contents: code, loader: "js" }
-      })
+      build.onLoad(
+        { filter: /[\/\\]node_modules[\/\\]solid-js[\/\\]dist[\/\\]server\.js(?:[?#].*)?$/ },
+        async (args) => {
+          const path = sourcePath(args.path).replace("server.js", "solid.js")
+          const file = Bun.file(path)
+          const code = await file.text()
+          return { contents: code, loader: "js" }
+        },
+      )
 
       build.onLoad(
-        { filter: /[\/\\]node_modules[\/\\]solid-js[\/\\]store[\/\\]dist[\/\\]server\.js$/ },
+        { filter: /[\/\\]node_modules[\/\\]solid-js[\/\\]store[\/\\]dist[\/\\]server\.js(?:[?#].*)?$/ },
         async (args) => {
-          const path = args.path.replace("server.js", "store.js")
+          const path = sourcePath(args.path).replace("server.js", "store.js")
           const file = Bun.file(path)
           const code = await file.text()
           return { contents: code, loader: "js" }
         },
       )
 
-      build.onLoad({ filter: /\.(js|ts)x$/ }, async (args) => {
-        const file = Bun.file(args.path)
+      build.onLoad({ filter: /\.(js|ts)x(?:[?#].*)?$/ }, async (args) => {
+        const path = sourcePath(args.path)
+        const file = Bun.file(path)
         const code = await file.text()
+        const runtime = getSolidTransformRuntime()
+        const moduleName = input.moduleName ?? runtime.moduleName ?? "@opentui/solid"
+        const resolvePath = input.resolvePath ?? runtime.resolvePath
         const plugins = resolvePath
           ? [
               [
@@ -56,7 +121,7 @@ export function createSolidTransformPlugin(input: CreateSolidTransformPluginOpti
           : []
 
         const transforms = await transformAsync(code, {
-          filename: args.path,
+          filename: path,
           plugins,
           presets: [
             [

package/src/elements/hooks.d.ts

@@ -32,5 +32,7 @@ export declare const usePaste: (callback: (event: PasteEvent) => void) => void;
  * @deprecated renamed to useKeyboard
  */
 export declare const useKeyHandler: (callback: (key: KeyEvent) => void, options?: UseKeyboardOptions) => void;
+export declare const onFocus: (callback: () => void) => void;
+export declare const onBlur: (callback: () => void) => void;
 export declare const useSelectionHandler: (callback: (selection: Selection) => void) => void;
 export declare const useTimeline: (options?: TimelineOptions) => Timeline;