@praxisjs/devtools 0.1.0 → 0.2.0

package/src/ui/panel.tsx

@@ -9,8 +9,9 @@ import {
 } from "@icons";
 import { IconButton } from "@shared/icon-button";
 
-import { signal } from "@praxisjs/core";
-import type { Component } from "@praxisjs/shared";
+import { StatefulComponent } from "@praxisjs/core";
+import { Component, State } from "@praxisjs/decorators";
+import type { ComponentElement } from "@praxisjs/shared";
 
 import type { Registry } from "@core/registry";
 import type { DevtoolsPlugin } from "@plugins/types";
@@ -28,67 +29,69 @@ const DEFAULT_HEIGHT = 300;
 const MIN_WIDTH = 240;
 const DEFAULT_WIDTH = 380;
 
-const DOCK_ICONS: Record<Dock, Component> = {
+const DOCK_ICONS: Record<Dock, ComponentElement> = {
   bottom: PanelBottomIcon,
   top: PanelTopIcon,
   left: PanelLeftIcon,
   right: PanelRightIcon,
 };
 
-export function Panel({ plugins, registry, onClose }: PanelProps) {
-  const activeTab = signal(plugins[0]?.id ?? "");
-  const dock = signal<Dock>("bottom");
-  const dockMenuOpen = signal(false);
-  const bottomSize = signal(DEFAULT_HEIGHT);
-  const vertSize = signal(DEFAULT_WIDTH);
+@Component()
+export class Panel extends StatefulComponent {
+  @State() activeTab = "";
+  @State() dock: Dock = "bottom";
+  @State() dockMenuOpen = false;
+  @State() bottomSize = DEFAULT_HEIGHT;
+  @State() vertSize = DEFAULT_WIDTH;
 
-  const handleMouseDown = (e: MouseEvent) => {
+  private get p() {
+    return this.props as unknown as PanelProps;
+  }
+
+  onBeforeMount() {
+    this.activeTab = this.p.plugins[0]?.id ?? "";
+  }
+
+  handleMouseDown(e: MouseEvent) {
     e.preventDefault();
     const startX = e.clientX;
     const startY = e.clientY;
-    const d = dock();
-    const startSize = d === "bottom" || d === "top" ? bottomSize() : vertSize();
+    const d = this.dock;
+    const startSize =
+      d === "bottom" || d === "top" ? this.bottomSize : this.vertSize;
 
     const onMove = (ev: MouseEvent) => {
-      const d = dock();
+      const d = this.dock;
       if (d === "bottom") {
-        bottomSize.set(
-          Math.max(
-            MIN_HEIGHT,
-            Math.min(
-              window.innerHeight * 0.85,
-              startSize + (startY - ev.clientY),
-            ),
+        this.bottomSize = Math.max(
+          MIN_HEIGHT,
+          Math.min(
+            window.innerHeight * 0.85,
+            startSize + (startY - ev.clientY),
           ),
         );
       } else if (d === "top") {
-        bottomSize.set(
-          Math.max(
-            MIN_HEIGHT,
-            Math.min(
-              window.innerHeight * 0.85,
-              startSize + (ev.clientY - startY),
-            ),
+        this.bottomSize = Math.max(
+          MIN_HEIGHT,
+          Math.min(
+            window.innerHeight * 0.85,
+            startSize + (ev.clientY - startY),
           ),
         );
       } else if (d === "left") {
-        vertSize.set(
-          Math.max(
-            MIN_WIDTH,
-            Math.min(
-              window.innerWidth * 0.6,
-              startSize + (ev.clientX - startX),
-            ),
+        this.vertSize = Math.max(
+          MIN_WIDTH,
+          Math.min(
+            window.innerWidth * 0.6,
+            startSize + (ev.clientX - startX),
           ),
         );
       } else {
-        vertSize.set(
-          Math.max(
-            MIN_WIDTH,
-            Math.min(
-              window.innerWidth * 0.6,
-              startSize + (startX - ev.clientX),
-            ),
+        this.vertSize = Math.max(
+          MIN_WIDTH,
+          Math.min(
+            window.innerWidth * 0.6,
+            startSize + (startX - ev.clientX),
           ),
         );
       }
@@ -101,125 +104,128 @@ export function Panel({ plugins, registry, onClose }: PanelProps) {
 
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", onUp);
-  };
-
-  return (
-    <div
-      class={() => {
-        const d = dock();
-        if (d === "top")
-          return "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]";
-        if (d === "left")
-          return "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]";
-        if (d === "right")
-          return "flex fixed right-0 top-0 h-screen z-[2147483647]";
-        return "flex flex-col fixed bottom-0 left-0 w-full z-[2147483647]";
-      }}
-    >
-      <div
-        class={() => {
-          const d = dock();
-          if (d === "bottom" || d === "top")
-            return "h-1 cursor-[ns-resize] bg-transparent hover:bg-accent transition-colors duration-200";
-          return "w-1 cursor-[ew-resize] bg-transparent hover:bg-accent transition-colors duration-200";
-        }}
-        onMouseDown={handleMouseDown}
-      />
+  }
+
+  render() {
+    const { plugins, registry, onClose } = this.p;
+    return (
       <div
         class={() => {
-          const d = dock();
-          if (d === "top") return "w-full h-full bg-bg border-b border-border";
-          if (d === "left") return "w-full h-full bg-bg border-r border-border";
+          const d = this.dock;
+          if (d === "top")
+            return "flex flex-col-reverse fixed top-0 left-0 w-full z-[2147483647]";
+          if (d === "left")
+            return "flex flex-row-reverse fixed left-0 top-0 h-screen z-[2147483647]";
           if (d === "right")
-            return "w-full h-full bg-bg border-l border-border";
-          return "w-full h-full bg-bg border-t border-border";
-        }}
-        style={() => {
-          const d = dock();
-          return d === "bottom" || d === "top"
-            ? { height: `${bottomSize().toString()}px` }
-            : { width: `${vertSize().toString()}px` };
+            return "flex fixed right-0 top-0 h-screen z-[2147483647]";
+          return "flex flex-col fixed bottom-0 left-0 w-full z-[2147483647]";
         }}
       >
-        <div class="flex flex-col flex-1 w-full h-full overflow-hidden">
-          <div class="flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]">
-            <div class="flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0">
-              <img class="h-[13px] w-[13px]" src={logo} />
-              <span class="text-[10px] font-bold text-accent tracking-widest uppercase">
-                praxisjs
-              </span>
-            </div>
+        <div
+          class={() => {
+            const d = this.dock;
+            if (d === "bottom" || d === "top")
+              return "h-1 cursor-[ns-resize] bg-transparent hover:bg-accent transition-colors duration-200";
+            return "w-1 cursor-[ew-resize] bg-transparent hover:bg-accent transition-colors duration-200";
+          }}
+          onMouseDown={(e: MouseEvent) => { this.handleMouseDown(e); }}
+        />
+        <div
+          class={() => {
+            const d = this.dock;
+            if (d === "top") return "w-full h-full bg-bg border-b border-border";
+            if (d === "left") return "w-full h-full bg-bg border-r border-border";
+            if (d === "right")
+              return "w-full h-full bg-bg border-l border-border";
+            return "w-full h-full bg-bg border-t border-border";
+          }}
+          style={() => {
+            const d = this.dock;
+            return d === "bottom" || d === "top"
+              ? { height: `${this.bottomSize.toString()}px` }
+              : { width: `${this.vertSize.toString()}px` };
+          }}
+        >
+          <div class="flex flex-col flex-1 w-full h-full overflow-hidden">
+            <div class="flex h-10 items-stretch border-b border-border bg-header shrink-0 px-2 gap-[2px]">
+              <div class="flex items-center gap-[6px] pr-3 mr-[2px] border-r border-border shrink-0">
+                <img class="h-[13px] w-[13px]" src={logo} />
+                <span class="text-[10px] font-bold text-accent tracking-widest uppercase">
+                  praxisjs
+                </span>
+              </div>
 
-            <div class="flex items-stretch flex-1">
-              {plugins.map((p) => (
-                <button
-                  key={p.id}
-                  class={() =>
-                    activeTab() === p.id
-                      ? "relative flex items-center px-3 text-[11px] font-semibold text-accent cursor-pointer"
-                      : "flex items-center px-3 text-[11px] text-muted cursor-pointer hover:text-text transition-colors duration-150"
-                  }
-                  onClick={() => {
-                    activeTab.set(p.id);
-                  }}
-                >
-                  {p.label}
+              <div class="flex items-stretch flex-1">
+                {plugins.map((p) => (
+                  <button
+                    key={p.id}
+                    class={() =>
+                      this.activeTab === p.id
+                        ? "relative flex items-center px-3 text-[11px] font-semibold text-accent cursor-pointer"
+                        : "flex items-center px-3 text-[11px] text-muted cursor-pointer hover:text-text transition-colors duration-150"
+                    }
+                    onClick={() => {
+                      this.activeTab = p.id;
+                    }}
+                  >
+                    {p.label}
+                    {() =>
+                      this.activeTab === p.id ? (
+                        <span class="absolute bottom-0 left-0 right-0 h-[2px] bg-accent" />
+                      ) : null
+                    }
+                  </button>
+                ))}
+              </div>
+
+              <div class="flex items-center gap-[2px] shrink-0">
+                <div class="relative">
+                  <IconButton
+                    title="Dock position"
+                    icon={EllipsisVerticalIcon}
+                    active={() => this.dockMenuOpen}
+                    onClick={() => {
+                      this.dockMenuOpen = !this.dockMenuOpen;
+                    }}
+                  />
                   {() =>
-                    activeTab() === p.id ? (
-                      <span class="absolute bottom-0 left-0 right-0 h-[2px] bg-accent" />
+                    this.dockMenuOpen ? (
+                      <div class="absolute right-0 top-full mt-1 flex gap-[2px] bg-bg border border-border rounded-md shadow-lg p-1 z-10">
+                        {(["bottom", "top", "left", "right"] as Dock[]).map(
+                          (v) => (
+                            <IconButton
+                              key={v}
+                              title={`Dock ${v}`}
+                              active={() => this.dock === v}
+                              icon={DOCK_ICONS[v]}
+                              onClick={() => {
+                                this.dock = v;
+                                this.dockMenuOpen = false;
+                              }}
+                            />
+                          ),
+                        )}
+                      </div>
                     ) : null
                   }
-                </button>
-              ))}
-            </div>
+                </div>
 
-            <div class="flex items-center gap-[2px] shrink-0">
-              <div class="relative">
-                <IconButton
-                  title="Dock position"
-                  icon={EllipsisVerticalIcon}
-                  active={() => dockMenuOpen()}
-                  onClick={() => {
-                    dockMenuOpen.set(!dockMenuOpen());
-                  }}
-                />
-                {() =>
-                  dockMenuOpen() ? (
-                    <div class="absolute right-0 top-full mt-1 flex gap-[2px] bg-bg border border-border rounded-md shadow-lg p-1 z-10">
-                      {(["bottom", "top", "left", "right"] as Dock[]).map(
-                        (v) => (
-                          <IconButton
-                            key={v}
-                            title={`Dock ${v}`}
-                            active={() => dock() === v}
-                            icon={DOCK_ICONS[v]}
-                            onClick={() => {
-                              dock.set(v);
-                              dockMenuOpen.set(false);
-                            }}
-                          />
-                        ),
-                      )}
-                    </div>
-                  ) : null
-                }
-              </div>
+                <div class="w-px h-3 bg-border mx-1" />
 
-              <div class="w-px h-3 bg-border mx-1" />
-
-              <IconButton title="Close" icon={XIcon} onClick={onClose} />
+                <IconButton title="Close" icon={XIcon} onClick={onClose} />
+              </div>
             </div>
-          </div>
 
-          <div class="flex-1 overflow-hidden flex flex-col">
-            {() => {
-              const plugin = plugins.find((p) => p.id === activeTab());
-              const Active = plugin?.component;
-              return Active ? <Active registry={registry} /> : null;
-            }}
+            <div class="flex-1 overflow-hidden flex flex-col">
+              {() => {
+                const plugin = plugins.find((p) => p.id === this.activeTab);
+                const Active = plugin?.component;
+                return Active ? <Active registry={registry} /> : null;
+              }}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 }

package/src/ui/shared/empty-state.tsx

@@ -1,12 +1,18 @@
-export function EmptyState({ message }: { message: string }) {
-  return (
-    <div class="flex flex-col items-center justify-center gap-2 py-12">
-      <span class="text-subtle text-[20px] leading-none select-none font-mono">
-        —
-      </span>
-      <p class="text-subtle text-[11px] text-center leading-relaxed max-w-[200px]">
-        {message}
-      </p>
-    </div>
-  );
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class EmptyState extends StatelessComponent<{ message: string }> {
+  render() {
+    return (
+      <div class="flex flex-col items-center justify-center gap-2 py-12">
+        <span class="text-subtle text-[20px] leading-none select-none font-mono">
+          —
+        </span>
+        <p class="text-subtle text-[11px] text-center leading-relaxed max-w-[200px]">
+          {this.props.message}
+        </p>
+      </div>
+    );
+  }
 }

package/src/ui/shared/icon-button.tsx

@@ -1,30 +1,33 @@
-import type { Component } from "@praxisjs/shared";
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+import type { ComponentElement } from "@praxisjs/shared";
 
-export function IconButton({
-  title,
-  active,
-  icon: Icon,
-  onClick,
-}: {
+interface IconButtonProps {
   title?: string;
   active?: boolean | (() => boolean);
-  icon: Component;
+  icon: ComponentElement;
   onClick: () => void;
-}) {
-  return (
-    <button
-      title={title}
-      onClick={onClick}
-      class={() => {
-        const isActive = typeof active === "function" ? active() : active;
-        return `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${
-          isActive
-            ? "text-accent bg-soft color-white"
-            : "text-subtle hover:color-muted hover:bg-section"
-        }`;
-      }}
-    >
-      <Icon />
-    </button>
-  );
+}
+
+@Component()
+export class IconButton extends StatelessComponent<IconButtonProps> {
+  render() {
+    const { title, active, icon: Icon, onClick } = this.props;
+    return (
+      <button
+        title={title}
+        onClick={onClick}
+        class={() => {
+          const isActive = typeof active === "function" ? active() : active;
+          return `w-[22px] h-[22px] flex items-center justify-center rounded-md text-[11px] cursor-pointer transition-colors duration-150 ${
+            isActive
+              ? "text-accent bg-soft color-white"
+              : "text-subtle hover:color-muted hover:bg-section"
+          }`;
+        }}
+      >
+        <Icon />
+      </button>
+    );
+  }
 }

package/src/ui/shared/panel-section.tsx

@@ -1,18 +1,20 @@
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
 import type { Children } from "@praxisjs/shared";
 
-export function PanelSection({
-  label,
-  children,
-}: {
+@Component()
+export class PanelSection extends StatelessComponent<{
   label: string;
   children?: Children;
-}) {
-  return (
-    <div class="border-b border-border">
-      <div class="px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border">
-        {label}
+}> {
+  render() {
+    return (
+      <div class="border-b border-border">
+        <div class="px-3 py-[4px] text-[9px] text-subtle font-bold tracking-[0.12em] uppercase bg-section border-b border-border">
+          {this.props.label}
+        </div>
+        {this.props.children}
       </div>
-      {children}
-    </div>
-  );
+    );
+  }
 }

package/src/ui/shared/search-input.tsx

@@ -1,18 +1,22 @@
-export function SearchInput({
-  placeholder,
-  onInput,
-}: {
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
+
+@Component()
+export class SearchInput extends StatelessComponent<{
   placeholder: string;
   onInput: (value: string) => void;
-}) {
-  return (
-    <input
-      type="text"
-      placeholder={placeholder}
-      class="w-full bg-input border border-border rounded-lg text-text text-[11px] px-3 py-[5px] outline-none box-border transition-shadow duration-150"
-      onInput={(e: InputEvent) => {
-        onInput((e.target as HTMLInputElement).value);
-      }}
-    />
-  );
+}> {
+  render() {
+    const { placeholder, onInput } = this.props;
+    return (
+      <input
+        type="text"
+        placeholder={placeholder}
+        class="w-full bg-input border border-border rounded-lg text-text text-[11px] px-3 py-[5px] outline-none box-border transition-shadow duration-150"
+        onInput={(e: InputEvent) => {
+          onInput((e.target as HTMLInputElement).value);
+        }}
+      />
+    );
+  }
 }

package/src/ui/shared/side-panel.tsx

@@ -1,18 +1,21 @@
+import { StatelessComponent } from "@praxisjs/core";
+import { Component } from "@praxisjs/decorators";
 import type { Children } from "@praxisjs/shared";
 
-export function SidePanel({
-  children,
-  width = "280px",
-}: {
+@Component()
+export class SidePanel extends StatelessComponent<{
   children?: Children;
   width?: string;
-}) {
-  return (
-    <div
-      class="shrink-0 border-l border-border flex flex-col overflow-hidden"
-      style={{ width }}
-    >
-      {children}
-    </div>
-  );
+}> {
+  render() {
+    const { children, width = "280px" } = this.props;
+    return (
+      <div
+        class="shrink-0 border-l border-border flex flex-col overflow-hidden"
+        style={{ width }}
+      >
+        {children}
+      </div>
+    );
+  }
 }

package/vite.config.ts

@@ -1,11 +1,11 @@
 import path from "path";
 
 import UnoCSS from "unocss/vite";
-import { defineConfig } from "vite";
+import { defineConfig, type PluginOption } from "vite";
 import dts from "vite-plugin-dts";
 
 export default defineConfig({
-  plugins: [UnoCSS(), dts({ rollupTypes: true })],
+  plugins: [...UnoCSS(), dts({ rollupTypes: true })] as PluginOption[],
   esbuild: {
     jsxImportSource: "@praxisjs/jsx",
     jsx: "automatic",
@@ -17,13 +17,7 @@ export default defineConfig({
       fileName: "index",
     },
     rollupOptions: {
-      external: [
-        "@praxisjs/core",
-        "@praxisjs/jsx",
-        "@praxisjs/jsx/jsx-runtime",
-        "@praxisjs/runtime",
-        "@praxisjs/shared",
-      ],
+      external: (id) => id.startsWith("@praxisjs/"),
     },
     cssCodeSplit: false,
   },