Merge pull request #54 from RustLangES/feat/vue-setup

feat: Add Vue setup and showcase support

Author: Brayan-724

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

js/showcase/package.json

@@ -12,6 +12,10 @@
       "types": "./dist/src/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
+    "./vue": {
+      "types": "./dist/src/vue/index.d.ts",
+      "default": "./dist/vue/index.js"
+    },
     "./styles.css": {
       "default": "./dist/styles.css"
     }
@@ -32,7 +36,8 @@
   },
   "peerDependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.28.0",

js/showcase/src/case.tsx

@@ -15,6 +15,7 @@ export type PropDef = {
   disabled?: boolean;
   hidden?: boolean;
   optional?: boolean;
+  isSlot?: boolean;
 } & (
   | {
       kind: "raw";
@@ -39,7 +40,7 @@ export type PropDef = {
     }
   | {
       kind: "icon";
-      default?: boolean;
+      default?: any;
       options?: never[];
     }
   | {
@@ -58,6 +59,11 @@ export type PropKind = PropDef["kind"];
 
 export interface CaseDef<TComponent> {
   props: Record<string, Exclude<PropKind, "raw"> | PropDef>;
+  slots?: Record<
+    string,
+    | Exclude<PropKind, "raw" | "function" | "callback">
+    | Exclude<PropDef, { kind: "function" | "callback" }>
+  >;
   component: TComponent;
 }
 
@@ -167,8 +173,9 @@ function ShowCaseDef<TComponent, TNode>(
   const {
     defs: propDefs,
     componentProps,
+    componentSlots,
     componentEvents,
-  } = prepareProps(def.props, showcaseDef);
+  } = prepareProps(def.props, def.slots, showcaseDef);
 
   const inputs = (
     <div
@@ -186,6 +193,7 @@ function ShowCaseDef<TComponent, TNode>(
     inputs: showcaseDef.attach(inputs),
     component: def.component,
     props: componentProps,
+    slots: componentSlots,
     events: componentEvents,
   });
 }

js/showcase/src/field.tsx

@@ -13,53 +13,65 @@ const PROP_KIND_DEFAULTS: { [K in PropKind]: any } = {
   function: () => {},
 };
 
+type NormalizedProps = Required<PropDef> & { id: string };
+
 function normalizeProp(
   propName: string,
-  prop: CaseDef<unknown>["props"][string]
-): Required<PropDef> {
+  prop: CaseDef<unknown>["props"][string],
+  isSlot = false
+): NormalizedProps {
   if (typeof prop === "string") {
     return {
+      id: propName,
       displayName: propName,
       kind: prop,
       disabled: false,
       hidden: false,
+      isSlot,
       options: [],
       default: PROP_KIND_DEFAULTS[prop],
       optional: true,
-    } satisfies Required<PropDef>;
+    } satisfies NormalizedProps;
   }
 
   return {
+    id: propName,
     default: prop.optional ? undefined : PROP_KIND_DEFAULTS[prop.kind],
     displayName: propName,
     disabled: false,
     hidden: false,
+    isSlot,
     optional: true,
     options: [],
     ...prop,
-  } satisfies Required<PropDef>;
+  } satisfies NormalizedProps;
 }
 
 export function normalizeProps(
-  props: CaseDef<unknown>["props"]
-): Required<PropDef>[] {
+  props: CaseDef<unknown>["props"],
+  isSlot = false
+): NormalizedProps[] {
   return Object.entries(props).map(([propName, propDef]) =>
-    normalizeProp(propName, propDef)
+    normalizeProp(propName, propDef, isSlot)
   );
 }
 
 export function prepareProps(
   props: CaseDef<unknown>["props"],
+  slots: CaseDef<unknown>["slots"],
   showcaseDef: ShowcaseDef<unknown, unknown>
 ): {
   defs: ShowcaseFieldProps[];
   componentProps: Record<string, MiniUI.Signal<unknown>>;
+  componentSlots: Record<string, MiniUI.Signal<unknown>>;
   componentEvents: Record<string, MiniUI.Signal<void>>;
 } {
   const normalizedProps = normalizeProps(props);
+  const normalizedSlots = normalizeProps(slots ?? {}, /* isSlot */ true);
 
   const defs: ShowcaseFieldProps[] = [];
   const componentProps: [string, MiniUI.Signal<unknown>][] = [];
+  const componentSlots: [string, MiniUI.Signal<unknown>][] = [];
   const componentEvents: [string, MiniUI.Signal<void>][] = [];
 
   for (const propDef of normalizedProps) {
@@ -78,7 +90,7 @@ export function prepareProps(
         showcaseDef,
       });
       componentEvents.push([
-        propDef.displayName,
+        propDef.id,
         () => {
           valueSignal(true);
         },
@@ -91,13 +103,25 @@ export function prepareProps(
         valueSignal,
         showcaseDef,
       });
-      componentProps.push([propDef.displayName, valueSignal]);
+      componentProps.push([propDef.id, valueSignal]);
     }
   }
 
+  for (const slotDef of normalizedSlots) {
+    const valueSignal = createSignal(slotDef.default);
+
+    defs.push({
+      ...slotDef,
+      valueSignal,
+      showcaseDef,
+    });
+    componentSlots.push([slotDef.id, valueSignal]);
+  }
+
   return {
     defs,
     componentProps: Object.fromEntries(componentProps),
+    componentSlots: Object.fromEntries(componentSlots),
     componentEvents: Object.fromEntries(componentEvents),
   };
 }

js/showcase/src/index.ts

@@ -15,12 +15,7 @@ export interface ShowcaseDef<TComponent, TNode>
   instiate(node: TComponent, props: unknown): TNode;
   render(node: TComponent): Node;
   renderNode(node: TNode): Node;
-  renderCaseSplitted(props: {
-    inputs: TNode;
-    component: TComponent;
-    props: Record<string, MiniUI.Signal<unknown>>;
-    events: Record<string, MiniUI.Signal<void>>;
-  }): TNode;
+  renderCaseSplitted: TComponent;
   attach(node: MiniUI.Node): TNode;
   createErrorBoundary(
     render: () => TNode,

js/showcase/src/miniui/index.ts

@@ -84,7 +84,7 @@ export function createEffect(fn: () => void): () => void {
   return effect(fn);
 }
 
-export function renderH(parent: HTMLElement, node: MiniUI.Node) {
+export function renderH(parent: Element, node: MiniUI.Node) {
   parent.innerHTML = "";
   appendChildren(parent, [node]);
 }

js/showcase/src/react/index.tsx

@@ -21,7 +21,7 @@ export function setupShowcase(
     ])
   );
 
-  createShowcase<(props: unknown) => React.ReactNode, React.ReactNode>({
+  createShowcase<(props: any) => React.ReactNode, React.ReactNode>({
     ...config,
     icons,
     instiate,

js/showcase/src/vue/ErrorBoundary.ts

@@ -0,0 +1,109 @@
+import {
+  ComponentPublicInstance,
+  defineComponent,
+  h as vueH,
+  VNode,
+} from "vue";
+import { ErrorsDef, ErrorStack } from "../error";
+
+export function createErrorBoundary(
+  render: () => VNode,
+  renderErrors: (error: ErrorsDef) => VNode
+): VNode {
+  return vueH(ErrorBoundary, { render, renderErrors });
+}
+
+type ErrorBoundary = ComponentPublicInstance<{}, {}, ErrorBoundaryData>;
+type ErrorBoundaryData = {
+  hasError: boolean;
+  errorsDef: ErrorsDef | null;
+};
+const ErrorBoundary = defineComponent<{
+  render: () => VNode;
+  renderErrors: (error: ErrorsDef) => VNode;
+}>({
+  name: "ErrorBoundary",
+  props: ["render", "renderErrors"],
+  data: () =>
+    ({
+      hasError: false,
+      errorsDef: null as ErrorsDef | null,
+    }) as ErrorBoundaryData,
+  setup({ render, renderErrors }) {
+    return (ctx: ErrorBoundary) =>
+      ctx.$data.hasError && ctx.$data.errorsDef != null
+        ? renderErrors(ctx.$data.errorsDef)
+        : render();
+  },
+  errorCaptured(this: ErrorBoundary, err) {
+    console.log("ERROR CAPTURED", err);
+    this.$data.hasError = true;
+    this.$data.errorsDef = errorToDef(err as Error);
+    return false;
+  },
+});
+
+function errorToDef(error: Error): ErrorsDef {
+  const stack: ErrorStack[] = (error.stack?.split?.("\n") ?? [])
+    .map(line => {
+      if (line.length === 0) {
+        return;
+      }
+
+      // split by really last @ or @http(s)?://
+      let [, name, source = ""] = line.match(/(.*)@(https?:\/\/.*)$/) ??
+        line.match(/(.*)@(:?[^@]*)$/) ?? [, line];
+
+      // replace empty string to anonymous call
+      name = name || "<anonymous>";
+
+      // Ignore all the internal functions of react and vite
+      if (
+        source.includes("vite/client") ||
+        name.includes("/node_modules/") ||
+        name.startsWith("__require")
+      ) {
+        return;
+      }
+
+      // Remove any URL prefix, leave just path
+      source = source.startsWith(location.origin)
+        ? source.substring(location.origin.length)
+        : source;
+
+      // Remove node_modules prefix from URL
+      const NODE_MODULES_DEPS = "/node_modules/.vite/deps/";
+      source = source.startsWith(NODE_MODULES_DEPS)
+        ? "/node_modules/" +
+          source.substring(NODE_MODULES_DEPS.length).replace(/_/g, "/")
+        : source;
+
+      const SHOWCASE_DIST = "showcase/dist";
+      source = source.includes(SHOWCASE_DIST)
+        ? "@showcase" +
+          source.substring(source.indexOf(SHOWCASE_DIST) + SHOWCASE_DIST.length)
+        : source;
+
+      // match to <source-file>?<timestamp-or-version>:<line>:<column>
+      const [, sourceFile, lineN, columnN] = source.match(
+        /^(.+)?(?:t=\d+|v=\w+):(\d+):(\d+)$/
+      ) ?? [, source, "", ""];
+
+      if (sourceFile.endsWith("vue.js?")) {
+        return;
+      }
+
+      return {
+        line: parseInt(lineN),
+        column: parseInt(columnN),
+        name: name,
+        source: sourceFile,
+      } satisfies ErrorStack;
+    })
+    .filter((e): e is ErrorStack => !!e);
+
+  return {
+    message: error.message,
+    stack,
+  };
+}

js/showcase/src/vue/index.tsx

@@ -0,0 +1,62 @@
+import {
+  ConcreteComponent,
+  createApp,
+  defineComponent,
+  VNode,
+  h as vueH,
+} from "vue";
+import { createShowcase, registerCase, ShowcaseConfigDef } from "..";
+import { createErrorBoundary } from "./ErrorBoundary";
+import {
+  attach,
+  instiate,
+  render,
+  renderCaseSplitted,
+  renderNode,
+} from "./render";
+
+export function setupShowcase(
+  config: ShowcaseConfigDef<ConcreteComponent<any>> & {
+    showcases: Record<string, ConcreteComponent<any>>;
+  }
+) {
+  const virtualElem = document.createElement("div");
+  Object.values(config.showcases).forEach(comp => {
+    createApp(comp).mount(virtualElem);
+  });
+
+  const icons = Object.fromEntries(
+    Object.entries(config?.icons ?? {}).map(([iconName, iconComp]) => [
+      iconName,
+      vueH(iconComp),
+    ])
+  );
+
+  createShowcase<ConcreteComponent<any>, VNode>({
+    ...config,
+    icons,
+    instiate,
+    render,
+    renderNode,
+    renderCaseSplitted,
+    attach,
+    createErrorBoundary,
+  });
+}
+
+export default defineComponent({
+  name: "Showcase",
+  props: ["name", "props", "slots", "component"],
+  setup(props, { slots }) {
+    if (slots.default) {
+      registerCase(props.name, () => slots.default!());
+    } else {
+      registerCase(props.name, {
+        props: props.props,
+        slots: props.slots,
+        component: props.component,
+      });
+    }
+    return () => vueH("div");
+  },
+});