legend-state-dev-tools 0.0.2 → 0.0.5

package/examples/basic/src/main.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { init } from 'legend-state-dev-tools';
-import 'legend-state-dev-tools/dist/styles.css';
-import { state$ } from './state';
-import { App } from './App';
-
-// Initialize dev tools
-init(state$, {
-  rootName: 'state$',
-  theme: 'githubDark',
-  readOnly: false,
-});
-
-const root = createRoot(document.getElementById('root')!);
-root.render(<App />);

package/examples/basic/src/state.ts

@@ -1,17 +0,0 @@
-import { observable } from '@legendapp/state';
-
-export const state$ = observable({
-  count: 0,
-  user: {
-    name: 'Alice',
-    email: 'alice@example.com',
-    preferences: {
-      darkMode: true,
-      notifications: true,
-    },
-  },
-  todos: [
-    { id: 1, text: 'Learn Legend State', done: true },
-    { id: 2, text: 'Try dev tools', done: false },
-  ],
-});

package/examples/basic/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": ["src"]
-}

package/examples/basic/vite.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  plugins: [react()],
-});

package/packages/core/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "legend-state-dev-tools",
-  "version": "0.1.0",
-  "description": "Dev tools for Legend State v3 - view and edit observable state",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.mjs"
-    },
-    "./dist/styles.css": "./dist/styles.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "typescript": "^5.3.0",
-    "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.0.0"
-  },
-  "peerDependencies": {
-    "@legendapp/state": ">=3.0.0-beta.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "dependencies": {
-    "eta": "^3.5.0",
-    "json-edit-react": "^1.16.0"
-  }
-}

package/packages/core/src/eta.d.ts

@@ -1,4 +0,0 @@
-declare module '*.eta' {
-  const content: string;
-  export default content;
-}

package/packages/core/src/index.ts

@@ -1,130 +0,0 @@
-import type { ObservableParam } from '@legendapp/state';
-import { Toolbar } from './ui/toolbar';
-import { Panel } from './ui/panel';
-import { createStateBridge, type StateBridge } from './state-bridge';
-import { mountJsonEditor, type JsonEditorBridge } from './ui/json-editor-mount';
-import { createCleanup } from './ui/shared-utils';
-
-export interface DevToolsOptions {
-  enabled?: boolean;
-  readOnly?: boolean;
-  theme?: string;
-  rootName?: string;
-  position?: 'left' | 'right';
-}
-
-export interface DevTools {
-  destroy: () => void;
-}
-
-export function init(
-  observable$: ObservableParam<any>,
-  options: DevToolsOptions = {}
-): DevTools {
-  const {
-    enabled = true,
-    readOnly = false,
-    theme = 'githubDark',
-    rootName = 'state$',
-    position = 'right',
-  } = options;
-
-  if (!enabled) {
-    return { destroy: () => {} };
-  }
-
-  const cleanup = createCleanup();
-  let panel: Panel | null = null;
-  let toolbar: Toolbar | null = null;
-  let bridge: StateBridge | null = null;
-  let editorBridge: JsonEditorBridge | null = null;
-
-  // Create panel
-  panel = new Panel({
-    rootName,
-    readOnly,
-    position,
-    onClose: () => {
-      hidePanel();
-    },
-  });
-
-  const showPanel = () => {
-    if (!panel) return;
-    panel.show();
-    toolbar?.setPanelVisible(true);
-
-    // Poll for editor root element (innerHTML may not be ready immediately)
-    const tryMount = (retries = 10) => {
-      const editorRoot = panel?.getEditorRoot();
-      if (!editorRoot) {
-        if (retries > 0) {
-          setTimeout(() => tryMount(retries - 1), 16);
-        } else {
-          console.warn('[Legend State DevTools] Could not find #lsdt-json-editor-root after retries');
-        }
-        return;
-      }
-      if (editorBridge) return;
-
-      const initialData = bridge?.getSnapshot() ?? {};
-
-      editorBridge = mountJsonEditor(editorRoot, {
-        initialData,
-        onEdit: (newData: unknown) => {
-          bridge?.setData(newData);
-        },
-        readOnly,
-        theme,
-        rootName,
-      });
-    };
-    tryMount();
-  };
-
-  const hidePanel = () => {
-    if (editorBridge) {
-      editorBridge.destroy();
-      editorBridge = null;
-    }
-    panel?.hide();
-    toolbar?.setPanelVisible(false);
-  };
-
-  const togglePanel = () => {
-    if (panel?.isVisible()) {
-      hidePanel();
-    } else {
-      showPanel();
-    }
-  };
-
-  // Create toolbar
-  toolbar = new Toolbar({
-    onTogglePanel: togglePanel,
-    rootName,
-  });
-  toolbar.mount();
-  cleanup.add(() => toolbar?.unmount());
-
-  // Create state bridge
-  bridge = createStateBridge(observable$, {
-    onSnapshot: (snapshot) => {
-      editorBridge?.updateData(snapshot);
-    },
-  });
-  cleanup.add(() => bridge?.destroy());
-  cleanup.add(() => {
-    if (editorBridge) {
-      editorBridge.destroy();
-      editorBridge = null;
-    }
-  });
-  cleanup.add(() => panel?.unmount());
-
-  return {
-    destroy: () => {
-      cleanup.run();
-    },
-  };
-}

package/packages/core/src/state-bridge.ts

@@ -1,56 +0,0 @@
-import type { ObservableParam } from '@legendapp/state';
-
-export interface StateBridgeOptions {
-  onSnapshot: (snapshot: unknown) => void;
-}
-
-export interface StateBridge {
-  getSnapshot: () => unknown;
-  setData: (newData: unknown) => void;
-  destroy: () => void;
-}
-
-export function createStateBridge(
-  observable$: ObservableParam<any>,
-  options: StateBridgeOptions
-): StateBridge {
-  // Get initial snapshot
-  const getSnapshot = () => {
-    try {
-      return JSON.parse(JSON.stringify((observable$ as any).peek()));
-    } catch {
-      return undefined;
-    }
-  };
-
-  // Subscribe to changes using onChange
-  let dispose: (() => void) | null = null;
-  try {
-    dispose = (observable$ as any).onChange(
-      () => {
-        const snapshot = getSnapshot();
-        options.onSnapshot(snapshot);
-      },
-      { trackingType: false }
-    );
-  } catch {
-    console.warn('[Legend State DevTools] Could not subscribe to observable changes via onChange');
-  }
-
-  return {
-    getSnapshot,
-    setData: (newData: unknown) => {
-      try {
-        (observable$ as any).set(newData);
-      } catch (e) {
-        console.error('[Legend State DevTools] Failed to set data:', e);
-      }
-    },
-    destroy: () => {
-      if (dispose) {
-        dispose();
-        dispose = null;
-      }
-    },
-  };
-}

package/packages/core/src/ui/json-editor-mount.tsx

@@ -1,144 +0,0 @@
-import React, { Component, useEffect, useState, type ErrorInfo, type ReactNode } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
-import { JsonEditor, githubDarkTheme, githubLightTheme, monoDarkTheme, monoLightTheme } from 'json-edit-react';
-
-const themeMap: Record<string, object> = {
-  githubDark: githubDarkTheme,
-  githubLight: githubLightTheme,
-  monoDark: monoDarkTheme,
-  monoLight: monoLightTheme,
-};
-
-class ErrorBoundary extends Component<
-  { children: ReactNode },
-  { error: Error | null }
-> {
-  state = { error: null as Error | null };
-  static getDerivedStateFromError(error: Error) {
-    return { error };
-  }
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error('[Legend State DevTools] React error:', error, info);
-  }
-  render() {
-    if (this.state.error) {
-      return React.createElement(
-        'pre',
-        { style: { color: '#ff6b6b', padding: 16, fontSize: 12 } },
-        `DevTools Error: ${this.state.error.message}\n${this.state.error.stack}`
-      );
-    }
-    return this.props.children;
-  }
-}
-
-interface JsonEditorWrapperProps {
-  data: unknown;
-  onEdit: (newData: unknown) => void;
-  readOnly: boolean;
-  theme: string;
-  rootName: string;
-}
-
-function JsonEditorWrapper({
-  data,
-  onEdit,
-  readOnly,
-  theme,
-  rootName,
-}: JsonEditorWrapperProps) {
-  const resolvedTheme = themeMap[theme] ?? githubDarkTheme;
-  return (
-    <JsonEditor
-      data={data as Record<string, unknown>}
-      setData={onEdit as any}
-      rootName={rootName}
-      theme={resolvedTheme as any}
-      collapse={2}
-      restrictEdit={readOnly}
-      restrictDelete={readOnly}
-      restrictAdd={readOnly}
-      restrictTypeSelection={readOnly ? true : undefined}
-    />
-  );
-}
-
-export interface JsonEditorBridge {
-  updateData: (data: unknown) => void;
-  destroy: () => void;
-}
-
-// Wrapper component that receives data via a callback registration
-function JsonEditorBridgeWrapper(props: {
-  initialData: unknown;
-  onEdit: (newData: unknown) => void;
-  readOnly: boolean;
-  theme: string;
-  rootName: string;
-  registerUpdater: (updater: (data: unknown) => void) => void;
-}) {
-  const [data, setData] = useState<unknown>(props.initialData);
-
-  useEffect(() => {
-    props.registerUpdater((newData: unknown) => {
-      setData(newData);
-    });
-  }, []);
-
-  const handleEdit = (newData: unknown) => {
-    setData(newData);
-    props.onEdit(newData);
-  };
-
-  return (
-    <JsonEditorWrapper
-      data={data}
-      onEdit={handleEdit}
-      readOnly={props.readOnly}
-      theme={props.theme}
-      rootName={props.rootName}
-    />
-  );
-}
-
-export function mountJsonEditor(
-  container: HTMLElement,
-  options: {
-    initialData: unknown;
-    onEdit: (newData: unknown) => void;
-    readOnly: boolean;
-    theme: string;
-    rootName: string;
-  }
-): JsonEditorBridge {
-  let root: Root | null = null;
-  let updaterFn: ((data: unknown) => void) | null = null;
-
-  root = createRoot(container);
-  root.render(
-    <ErrorBoundary>
-    <JsonEditorBridgeWrapper
-      initialData={options.initialData}
-      onEdit={options.onEdit}
-      readOnly={options.readOnly}
-      theme={options.theme}
-      rootName={options.rootName}
-      registerUpdater={(updater) => {
-        updaterFn = updater;
-      }}
-    />
-    </ErrorBoundary>
-  );
-
-  return {
-    updateData: (data: unknown) => {
-      updaterFn?.(data);
-    },
-    destroy: () => {
-      if (root) {
-        root.unmount();
-        root = null;
-      }
-    },
-  };
-}

package/packages/core/src/ui/panel.ts

@@ -1,96 +0,0 @@
-import { renderPanel, type PanelData } from './template-engine';
-
-export class Panel {
-  private container: HTMLElement | null = null;
-  private visible = false;
-  private rootName: string;
-  private readOnly: boolean;
-  private onClose?: () => void;
-  private position: 'left' | 'right';
-
-  constructor(options: {
-    rootName?: string;
-    readOnly?: boolean;
-    onClose?: () => void;
-    position?: 'left' | 'right';
-  } = {}) {
-    this.rootName = options.rootName || 'state$';
-    this.readOnly = options.readOnly || false;
-    this.onClose = options.onClose;
-    this.position = options.position || 'right';
-  }
-
-  public toggle(): void {
-    if (this.visible) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-
-  public show(): void {
-    this.visible = true;
-
-    if (!this.container) {
-      this.container = document.createElement('div');
-      this.container.id = 'lsdt-panel';
-      if (this.position === 'left') {
-        this.container.classList.add('lsdt-panel-left');
-      }
-      document.body.appendChild(this.container);
-      this.attachEventListeners();
-    }
-
-    this.render();
-  }
-
-  public hide(): void {
-    this.visible = false;
-    this.container?.remove();
-    this.container = null;
-  }
-
-  public isVisible(): boolean {
-    return this.visible;
-  }
-
-  public getEditorRoot(): HTMLElement | null {
-    return this.container?.querySelector('#lsdt-json-editor-root') || null;
-  }
-
-  private render(): void {
-    if (!this.container) return;
-
-    const data: PanelData = {
-      rootName: this.rootName,
-      readOnly: this.readOnly,
-    };
-
-    this.container.innerHTML = renderPanel(data);
-  }
-
-  private attachEventListeners(): void {
-    if (!this.container) return;
-    this.container.addEventListener('click', this.handleClick);
-  }
-
-  private handleClick = (e: Event): void => {
-    const target = e.target as HTMLElement;
-    const actionElement = target.closest('[data-action]');
-    if (!actionElement) return;
-
-    const action = actionElement.getAttribute('data-action');
-    if (action === 'close-panel') {
-      this.onClose?.();
-    }
-  };
-
-  public unmount(): void {
-    if (this.container) {
-      this.container.removeEventListener('click', this.handleClick);
-      this.container.remove();
-      this.container = null;
-    }
-    this.visible = false;
-  }
-}

package/packages/core/src/ui/shared-utils.ts

@@ -1,49 +0,0 @@
-/**
- * Shared UI utilities for Legend State Dev Tools
- */
-
-const STORAGE_PREFIX = 'lsdt';
-
-export function escapeHtml(str: string): string {
-  const div = document.createElement('div');
-  div.textContent = str;
-  return div.innerHTML;
-}
-
-export function getStoredBoolean(key: string, defaultValue: boolean): boolean {
-  const stored = localStorage.getItem(`${STORAGE_PREFIX}-${key}`);
-  if (stored === null) return defaultValue;
-  return stored === 'true';
-}
-
-export function setStoredBoolean(key: string, value: boolean): void {
-  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, String(value));
-}
-
-export function getStoredString(key: string, defaultValue: string): string {
-  return localStorage.getItem(`${STORAGE_PREFIX}-${key}`) || defaultValue;
-}
-
-export function setStoredString(key: string, value: string): void {
-  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, value);
-}
-
-export function createCleanup(): {
-  add: (fn: () => void) => void;
-  run: () => void;
-} {
-  const cleanupFns: (() => void)[] = [];
-  return {
-    add: (fn: () => void) => cleanupFns.push(fn),
-    run: () => {
-      cleanupFns.forEach((fn) => {
-        try {
-          fn();
-        } catch (e) {
-          console.error('[Legend State DevTools] Cleanup error:', e);
-        }
-      });
-      cleanupFns.length = 0;
-    },
-  };
-}

package/packages/core/src/ui/template-engine.ts

@@ -1,55 +0,0 @@
-/**
- * Eta template engine wrapper for Legend State Dev Tools
- */
-import { Eta } from 'eta';
-
-import toolbarTemplate from './templates/toolbar.eta';
-import panelTemplate from './templates/panel.eta';
-
-const eta = new Eta({
-  autoEscape: true,
-  autoTrim: false,
-});
-
-const templates: Record<string, string> = {
-  toolbar: toolbarTemplate,
-  panel: panelTemplate,
-};
-
-export function renderTemplate<T extends Record<string, unknown>>(
-  name: string,
-  data: T
-): string {
-  const template = templates[name];
-  if (!template) {
-    console.error(`[LSDT] Template not found: ${name}`);
-    return '';
-  }
-  try {
-    return eta.renderString(template, data);
-  } catch (error) {
-    console.error(`[LSDT] Error rendering template ${name}:`, error);
-    return '';
-  }
-}
-
-export interface ToolbarData {
-  [key: string]: unknown;
-  isMinimized: boolean;
-  panelVisible: boolean;
-  rootName: string;
-}
-
-export function renderToolbar(data: ToolbarData): string {
-  return renderTemplate('toolbar', data);
-}
-
-export interface PanelData {
-  [key: string]: unknown;
-  rootName: string;
-  readOnly: boolean;
-}
-
-export function renderPanel(data: PanelData): string {
-  return renderTemplate('panel', data);
-}

package/packages/core/src/ui/templates/panel.eta

@@ -1,12 +0,0 @@
-<div class="lsdt-panel-header">
-  <h3><%= it.rootName %></h3>
-  <div class="lsdt-panel-actions">
-    <% if (it.readOnly) { %>
-      <span class="lsdt-readonly-badge">Read-only</span>
-    <% } %>
-    <button class="lsdt-close-btn" data-action="close-panel" title="Close">&times;</button>
-  </div>
-</div>
-<div class="lsdt-panel-content">
-  <div id="lsdt-json-editor-root"></div>
-</div>

package/packages/core/src/ui/templates/toolbar.eta

@@ -1,13 +0,0 @@
-<div class="lsdt-toolbar-header">
-  <div class="lsdt-toolbar-title">
-    <span class="lsdt-toolbar-indicator"></span>
-    Legend State
-  </div>
-  <button
-    class="lsdt-toggle-btn <%= it.panelVisible ? 'active' : '' %>"
-    data-action="toggle-panel"
-    title="<%= it.panelVisible ? 'Hide panel' : 'Show panel' %>"
-  >
-    <%= it.panelVisible ? 'Hide' : 'Show' %> <%= it.rootName %>
-  </button>
-</div>