@opentui/solid 0.1.87 → 0.1.88

package/dist/index.d.ts

@@ -52,7 +52,9 @@ export function getComponentCatalogue(): {
 export function extend(objects: any): void;
 export var effect: typeof createRenderEffect;
 export var createTextNode: any;
+export function createSolidSlotRegistry(renderer: any, context: any, options?: {}): import("@opentui/core").SlotRegistry<any, object, any>;
 export function createSlotNode(): SlotRenderable;
+export function createSlot(registry: any, options?: {}): (props: any) => any;
 export var createElement: any;
 export function createDynamic(component: any, props: any): import("solid-js").Accessor<any>;
 declare var createComponent2: typeof createComponent;
@@ -95,6 +97,7 @@ export class SlotRenderable extends SlotBaseRenderable {
     destroyed: boolean;
     getSlotChild(parent: any): any;
 }
+export function Slot(props: any): import("solid-js").Accessor<any>;
 export var RendererContext: import("solid-js").Context<any>;
 export function Portal(props: any): SlotRenderable;
 export class LinkRenderable extends SpanRenderable {

package/index.d.ts

@@ -11,8 +11,9 @@ export declare const testRender: (node: () => JSX.Element, renderConfig?: TestRe
     captureSpans: () => import("@opentui/core").CapturedFrame;
     resize: (width: number, height: number) => void;
 }>;
-export * from "./src/reconciler";
-export * from "./src/elements";
-export * from "./src/time-to-first-draw";
-export * from "./src/types/elements";
+export * from "./src/reconciler.js";
+export * from "./src/elements/index.js";
+export * from "./src/time-to-first-draw.js";
+export * from "./src/plugins/slot.js";
+export * from "./src/types/elements.js";
 export { type JSX };

package/index.js

@@ -945,6 +945,143 @@ var TimeToFirstDraw = (props) => {
     return _el$;
   })();
 };
+// src/plugins/slot.tsx
+import { createSlotRegistry } from "@opentui/core";
+import { children, createMemo as createMemo3, createSignal as createSignal2, ErrorBoundary, For, onCleanup as onCleanup3, splitProps as splitProps2 } from "solid-js";
+function createSolidSlotRegistry(renderer, context, options = {}) {
+  return createSlotRegistry(renderer, "solid:slot-registry", context, options);
+}
+function createSlot(registry, options = {}) {
+  return function BoundSlot(props) {
+    return createComponent2(Slot, mergeProps3(props, {
+      registry,
+      get pluginFailurePlaceholder() {
+        return options.pluginFailurePlaceholder;
+      }
+    }));
+  };
+}
+function Slot(props) {
+  const [local, slotProps] = splitProps2(props, ["registry", "name", "mode", "children", "pluginFailurePlaceholder"]);
+  const registry = () => local.registry;
+  const pluginFailurePlaceholder = () => local.pluginFailurePlaceholder;
+  const [version, setVersion] = createSignal2(0);
+  const unsubscribe = registry().subscribe(() => {
+    setVersion((current) => current + 1);
+  });
+  onCleanup3(unsubscribe);
+  const entries = createMemo3((previousEntries = []) => {
+    version();
+    const resolvedEntries = registry().resolveEntries(local.name);
+    const previousById = new Map(previousEntries.map((entry) => [entry.id, entry]));
+    return resolvedEntries.map((entry) => {
+      const previousEntry = previousById.get(entry.id);
+      if (previousEntry && previousEntry.renderer === entry.renderer) {
+        return previousEntry;
+      }
+      return entry;
+    });
+  });
+  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 renderPluginFailurePlaceholder = (failure, fallbackValue) => {
+    if (!pluginFailurePlaceholder()) {
+      return fallbackValue;
+    }
+    try {
+      return pluginFailurePlaceholder()(failure);
+    } catch (error) {
+      registry().reportPluginError({
+        pluginId: failure.pluginId,
+        slot: failure.slot ?? slotName(),
+        phase: "error_placeholder",
+        source: "solid",
+        error
+      });
+      return fallbackValue;
+    }
+  };
+  const renderEntry = (entry, fallbackOnError) => {
+    const fallbackValue = fallbackOnError ?? null;
+    let initialRender;
+    try {
+      initialRender = entry.renderer(registry().context, slotProps);
+    } catch (error) {
+      const failure = registry().reportPluginError({
+        pluginId: entry.id,
+        slot: slotName(),
+        phase: "render",
+        source: "solid",
+        error
+      });
+      return renderPluginFailurePlaceholder(failure, fallbackValue);
+    }
+    const resolvedInitialRender = children(() => initialRender);
+    const hasInitialOutput = resolvedInitialRender.toArray().some((node) => node !== null && node !== undefined && node !== false);
+    if (!hasInitialOutput) {
+      return fallbackValue;
+    }
+    return createComponent2(ErrorBoundary, {
+      fallback: (error) => {
+        const failure = registry().reportPluginError({
+          pluginId: entry.id,
+          slot: slotName(),
+          phase: "render",
+          source: "solid",
+          error
+        });
+        return renderPluginFailurePlaceholder(failure, fallbackValue);
+      },
+      get children() {
+        return resolvedInitialRender();
+      }
+    });
+  };
+  const AppendEntry = (appendProps) => {
+    const entry = createMemo3(() => entriesById().get(appendProps.entryId));
+    return memo2(() => {
+      const resolvedEntry = entry();
+      if (!resolvedEntry) {
+        return null;
+      }
+      return renderEntry(resolvedEntry);
+    });
+  };
+  const appendView = [memo2(fallbackChildren), createComponent2(For, {
+    get each() {
+      return entryIds();
+    },
+    children: (entryId) => createComponent2(AppendEntry, {
+      entryId
+    })
+  })];
+  return memo2(() => {
+    const resolvedEntries = entries();
+    const mode = local.mode ?? "append";
+    const fallback = fallbackChildren();
+    if (resolvedEntries.length === 0) {
+      return fallback;
+    }
+    if (mode === "single_winner") {
+      const winner = resolvedEntries[0];
+      if (!winner) {
+        return fallback;
+      }
+      return renderEntry(winner, fallback);
+    }
+    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 renderedEntries;
+    }
+    return appendView;
+  });
+}
 
 // index.ts
 var mountSolidRoot = (renderer, node) => {
@@ -1037,7 +1174,9 @@ export {
   extend,
   effect,
   createTextNode,
+  createSolidSlotRegistry,
   createSlotNode,
+  createSlot,
   createElement,
   createDynamic,
   createComponent2 as createComponent,
@@ -1048,6 +1187,7 @@ export {
   TimeToFirstDraw,
   TextSlotRenderable,
   SlotRenderable,
+  Slot,
   RendererContext,
   Portal,
   LinkRenderable,

package/jsx-runtime.d.ts

@@ -14,7 +14,7 @@ import type {
   TabSelectProps,
   TextareaProps,
   TextProps,
-} from "./src/types/elements"
+} from "./src/types/elements.js"
 import type { DomNode } from "./dist"
 
 declare namespace JSX {

package/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "types": "index.d.ts",
   "type": "module",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "description": "SolidJS renderer for OpenTUI",
   "license": "MIT",
   "repository": {
@@ -25,15 +25,19 @@
       "types": "./scripts/solid-plugin.d.ts",
       "import": "./scripts/solid-plugin.ts"
     },
+    "./runtime-plugin-support": {
+      "types": "./scripts/runtime-plugin-support.d.ts",
+      "import": "./scripts/runtime-plugin-support.ts"
+    },
     "./jsx-runtime": "./jsx-runtime.d.ts",
     "./jsx-dev-runtime": "./jsx-runtime.d.ts"
   },
   "dependencies": {
     "@babel/core": "7.28.0",
     "@babel/preset-typescript": "7.27.1",
-    "@opentui/core": "0.1.87",
+    "@opentui/core": "0.1.88",
     "babel-plugin-module-resolver": "5.0.2",
-    "babel-preset-solid": "1.9.9",
+    "babel-preset-solid": "1.9.10",
     "entities": "7.0.1",
     "s-js": "^0.4.9"
   },
@@ -41,9 +45,10 @@
     "@types/babel__core": "7.20.5",
     "@types/bun": "latest",
     "@types/node": "^24.0.0",
+    "solid-js": "1.9.11",
     "typescript": "^5"
   },
   "peerDependencies": {
-    "solid-js": "1.9.9"
+    "solid-js": "1.9.11"
   }
 }

package/scripts/preload.ts

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

package/scripts/runtime-plugin-support.d.ts

@@ -0,0 +1 @@
+export declare function ensureRuntimePluginSupport(): boolean;

package/scripts/runtime-plugin-support.ts

@@ -0,0 +1,61 @@
+import { plugin as registerBunPlugin } from "bun"
+import * as coreRuntime from "@opentui/core"
+import {
+  createRuntimePlugin,
+  isCoreRuntimeModuleSpecifier,
+  runtimeModuleIdForSpecifier,
+  type RuntimeModuleEntry,
+} from "@opentui/core/runtime-plugin"
+import * as solidJsRuntime from "solid-js"
+import * as solidJsStoreRuntime from "solid-js/store"
+import * as solidRuntime from "../index"
+import { createSolidTransformPlugin } from "./solid-plugin"
+
+const runtimePluginSupportInstalledKey = "__opentuiSolidRuntimePluginSupportInstalled__"
+
+type RuntimePluginSupportState = typeof globalThis & {
+  [runtimePluginSupportInstalledKey]?: boolean
+}
+
+const additionalRuntimeModules: Record<string, RuntimeModuleEntry> = {
+  "@opentui/solid": solidRuntime as Record<string, unknown>,
+  "solid-js": solidJsRuntime as Record<string, unknown>,
+  "solid-js/store": solidJsStoreRuntime as Record<string, unknown>,
+}
+
+const resolveRuntimeSpecifier = (specifier: string): string | null => {
+  if (!isCoreRuntimeModuleSpecifier(specifier) && !additionalRuntimeModules[specifier]) {
+    return null
+  }
+
+  return runtimeModuleIdForSpecifier(specifier)
+}
+
+export function ensureRuntimePluginSupport(): boolean {
+  const state = globalThis as RuntimePluginSupportState
+
+  if (state[runtimePluginSupportInstalledKey]) {
+    return false
+  }
+
+  registerBunPlugin(
+    createSolidTransformPlugin({
+      moduleName: runtimeModuleIdForSpecifier("@opentui/solid"),
+      resolvePath(specifier) {
+        return resolveRuntimeSpecifier(specifier)
+      },
+    }),
+  )
+
+  registerBunPlugin(
+    createRuntimePlugin({
+      core: coreRuntime as Record<string, unknown>,
+      additional: additionalRuntimeModules,
+    }),
+  )
+
+  state[runtimePluginSupportInstalledKey] = true
+  return true
+}
+
+ensureRuntimePluginSupport()

package/scripts/solid-plugin.d.ts

@@ -1,3 +1,9 @@
 import { type BunPlugin } from "bun";
+export type ResolveImportPath = (specifier: string) => string | null;
+export interface CreateSolidTransformPluginOptions {
+    moduleName?: string;
+    resolvePath?: ResolveImportPath;
+}
+export declare function createSolidTransformPlugin(input?: CreateSolidTransformPluginOptions): BunPlugin;
 declare const solidTransformPlugin: BunPlugin;
 export default solidTransformPlugin;

package/scripts/solid-plugin.ts

@@ -3,49 +3,82 @@ 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"
 
-const solidTransformPlugin: BunPlugin = {
-  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 code = await readFile(path, "utf8")
-      return { contents: code, loader: "js" }
-    })
-    build.onLoad({ filter: /\/node_modules\/solid-js\/store\/dist\/server\.js$/ }, async (args) => {
-      const path = args.path.replace("server.js", "store.js")
-      const code = await readFile(path, "utf8")
-      return { contents: code, loader: "js" }
-    })
-    build.onLoad({ filter: /\.(js|ts)x$/ }, async (args) => {
-      const code = await readFile(args.path, "utf8")
-      const transforms = await transformAsync(code, {
-        filename: args.path,
-        // env: {
-        //   development: {
-        //     plugins: [["solid-refresh/babel", { "bundler": "esm" }]],
-        //   },
-        // },
-        // plugins: [["solid-refresh/babel", { bundler: "esm" }]],
-        presets: [
-          [
-            solid,
-            {
-              moduleName: "@opentui/solid",
-              generate: "universal",
-            },
+export type ResolveImportPath = (specifier: string) => string | null
+
+export interface CreateSolidTransformPluginOptions {
+  moduleName?: string
+  resolvePath?: ResolveImportPath
+}
+
+export function createSolidTransformPlugin(input: CreateSolidTransformPluginOptions = {}): BunPlugin {
+  const moduleName = input.moduleName ?? "@opentui/solid"
+  const resolvePath = input.resolvePath
+
+  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[\/\\]store[\/\\]dist[\/\\]server\.js$/ },
+        async (args) => {
+          const path = 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)
+        const code = await file.text()
+        const plugins = resolvePath
+          ? [
+              [
+                moduleResolver,
+                {
+                  resolvePath(specifier: string) {
+                    return resolvePath(specifier) ?? specifier
+                  },
+                },
+              ],
+            ]
+          : []
+
+        const transforms = await transformAsync(code, {
+          filename: args.path,
+          plugins,
+          presets: [
+            [
+              solid,
+              {
+                moduleName,
+                generate: "universal",
+              },
+            ],
+            [ts],
           ],
-          [ts],
-        ],
+        })
+
+        return {
+          contents: transforms?.code ?? "",
+          loader: "js",
+        }
       })
-      return {
-        contents: transforms?.code ?? "",
-        loader: "js",
-      }
-    })
-  },
+    },
+  }
 }
 
+const solidTransformPlugin = createSolidTransformPlugin()
+
 export default solidTransformPlugin

package/src/elements/extras.d.ts

@@ -1,4 +1,4 @@
-import { type DomNode } from "../reconciler";
+import { type DomNode } from "../reconciler.js";
 import type { JSX } from "../../jsx-runtime";
 import type { ValidComponent, ComponentProps } from "solid-js";
 /**

package/src/elements/index.d.ts

@@ -1,8 +1,8 @@
 import { ASCIIFontRenderable, BoxRenderable, CodeRenderable, DiffRenderable, InputRenderable, LineNumberRenderable, MarkdownRenderable, ScrollBoxRenderable, SelectRenderable, TabSelectRenderable, TextareaRenderable, TextNodeRenderable, TextRenderable, type RenderContext, type TextNodeOptions } from "@opentui/core";
-import type { RenderableConstructor } from "../types/elements";
-export * from "./hooks";
-export * from "./extras";
-export * from "./slot";
+import type { RenderableConstructor } from "../types/elements.js";
+export * from "./hooks.js";
+export * from "./extras.js";
+export * from "./slot.js";
 declare class SpanRenderable extends TextNodeRenderable {
     private readonly _ctx;
     constructor(_ctx: RenderContext | null, options: TextNodeOptions);
@@ -69,4 +69,4 @@ export declare const componentCatalogue: ComponentCatalogue;
  */
 export declare function extend<T extends ComponentCatalogue>(objects: T): void;
 export declare function getComponentCatalogue(): ComponentCatalogue;
-export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/elements";
+export type { ExtendedComponentProps, ExtendedIntrinsicElements, RenderableConstructor } from "../types/elements.js";

package/src/plugins/slot.d.ts

@@ -0,0 +1,25 @@
+import { SlotRegistry, type CliRenderer, type Plugin, type PluginContext, type PluginErrorEvent, type SlotMode, type SlotRegistryOptions } from "@opentui/core";
+import { type JSX } from "solid-js";
+export type { SlotMode };
+type SlotMap = Record<string, object>;
+export type SolidPlugin<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = Plugin<JSX.Element, TSlots, TContext>;
+export type SolidSlotProps<TSlots extends SlotMap, K extends keyof TSlots, TContext extends PluginContext = PluginContext> = {
+    registry: SlotRegistry<JSX.Element, TSlots, TContext>;
+    name: K;
+    mode?: SlotMode;
+    children?: JSX.Element;
+    pluginFailurePlaceholder?: (failure: PluginErrorEvent) => JSX.Element;
+} & TSlots[K];
+export type SolidBoundSlotProps<TSlots extends SlotMap, K extends keyof TSlots> = {
+    name: K;
+    mode?: SlotMode;
+    children?: JSX.Element;
+} & TSlots[K];
+export type SolidRegistrySlotComponent<TSlots extends SlotMap, TContext extends PluginContext = PluginContext> = <K extends keyof TSlots>(props: SolidSlotProps<TSlots, K, TContext>) => JSX.Element;
+export type SolidSlotComponent<TSlots extends SlotMap> = <K extends keyof TSlots>(props: SolidBoundSlotProps<TSlots, K>) => JSX.Element;
+export interface SolidSlotOptions {
+    pluginFailurePlaceholder?: (failure: PluginErrorEvent) => JSX.Element;
+}
+export declare function createSolidSlotRegistry<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(renderer: CliRenderer, context: TContext, options?: SlotRegistryOptions): SlotRegistry<JSX.Element, TSlots, TContext>;
+export declare function createSlot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(registry: SlotRegistry<JSX.Element, TSlots, TContext>, options?: SolidSlotOptions): SolidSlotComponent<TSlots>;
+export declare function Slot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext, K extends keyof TSlots = keyof TSlots>(props: SolidSlotProps<TSlots, K, TContext>): JSX.Element;

package/src/reconciler.d.ts

@@ -1,5 +1,5 @@
 import { BaseRenderable } from "@opentui/core";
-import { SlotRenderable } from "./elements";
+import { SlotRenderable } from "./elements/index.js";
 export type DomNode = BaseRenderable;
 export declare function createSlotNode(): SlotRenderable;
 export declare const _render: (code: () => BaseRenderable, node: BaseRenderable) => () => void, effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => BaseRenderable, props: T) => BaseRenderable, createElement: (tag: string) => BaseRenderable, createTextNode: (value: string) => BaseRenderable, insertNode: (parent: BaseRenderable, node: BaseRenderable, anchor?: BaseRenderable | undefined) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any | null, initial?: any) => BaseRenderable, spread: <T>(node: any, accessor: (() => T) | T, skipChildren?: boolean) => void, setProp: <T>(node: BaseRenderable, name: string, value: T, prev?: T | undefined) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: BaseRenderable, arg: A) => T, element: BaseRenderable, arg: A) => T;