@usels/vite-plugin-legend-memo 0.1.0

package/README.md

@@ -0,0 +1,561 @@
+# @usels/vite-plugin-legend-memo
+
+A Vite plugin that applies [`@usels/babel-plugin-legend-memo`](../babel) during the transform phase. Automatically wraps Legend-State observable `.get()` calls in JSX with reactive `<Memo>` boundaries for fine-grained reactivity — without any boilerplate.
+
+```tsx
+// You write this naturally
+<div>{count$.get()}</div>
+
+// Plugin transforms to this automatically
+import { Memo } from "@legendapp/state/react";
+<div><Memo>{() => count$.get()}</Memo></div>
+```
+
+**One plugin replaces two** — no longer need `@legendapp/state/babel` alongside another auto-wrap plugin.
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Setup](#setup)
+- [Plugin Order (Critical)](#plugin-order-critical)
+- [Configuration](#configuration)
+- [Features](#features)
+- [Writing Components](#writing-components)
+- [API Reference](#api-reference)
+- [Troubleshooting](#troubleshooting)
+
+---
+
+## Installation
+
+```bash
+npm install -D @usels/vite-plugin-legend-memo @usels/babel-plugin-legend-memo @babel/core
+# or
+pnpm add -D @usels/vite-plugin-legend-memo @usels/babel-plugin-legend-memo @babel/core
+# or
+yarn add -D @usels/vite-plugin-legend-memo @usels/babel-plugin-legend-memo @babel/core
+```
+
+---
+
+## Setup
+
+### Basic
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { autoWrap } from '@usels/vite-plugin-legend-memo';
+
+export default defineConfig({
+  plugins: [
+    autoWrap(),   // ← Must be BEFORE react()
+    react(),
+  ],
+});
+```
+
+### With options
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { autoWrap } from '@usels/vite-plugin-legend-memo';
+
+export default defineConfig({
+  plugins: [
+    autoWrap({
+      // Detect all .get() regardless of $ suffix (default: false)
+      allGet: false,
+
+      // Auto-wrap Memo/Show/Computed children (default: true)
+      wrapReactiveChildren: true,
+
+      // Custom wrapper component (default: "Memo")
+      componentName: 'Memo',
+
+      // Import source (default: "@legendapp/state/react")
+      importSource: '@legendapp/state/react',
+    }),
+    react(),
+  ],
+});
+```
+
+### With a different observable library
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { autoWrap } from '@usels/vite-plugin-legend-memo';
+
+export default defineConfig({
+  plugins: [
+    autoWrap({
+      componentName: 'Auto',
+      importSource: '@usels/core',
+    }),
+    react(),
+  ],
+});
+```
+
+---
+
+## Plugin Order (Critical)
+
+**`autoWrap()` MUST be placed BEFORE `react()` in the plugins array.**
+
+```typescript
+// ✅ Correct — autoWrap processes JSX before React plugin
+plugins: [autoWrap(), react()]
+
+// ❌ Wrong — JSX is already transpiled when autoWrap runs
+plugins: [react(), autoWrap()]
+```
+
+### Why order matters
+
+The plugin uses `enforce: 'pre'` to run before `@vitejs/plugin-react`:
+
+1. **`autoWrap()` runs first** — processes `.jsx`/`.tsx` files while JSX syntax is intact
+2. **React plugin runs** — converts JSX to `React.createElement()` calls
+3. **esbuild bundles** — produces the final output
+
+If `react()` runs before `autoWrap()`, the JSX is already converted to function calls and the plugin cannot find JSX expressions to wrap.
+
+---
+
+## Configuration
+
+All options from `@usels/babel-plugin-legend-memo` are supported:
+
+```typescript
+interface PluginOptions {
+  /**
+   * Wrapper component name
+   * @default "Memo"
+   */
+  componentName?: string;
+
+  /**
+   * Import source for the wrapper component
+   * @default "@legendapp/state/react"
+   */
+  importSource?: string;
+
+  /**
+   * Detect all .get() calls regardless of $ suffix
+   * @default false
+   */
+  allGet?: boolean;
+
+  /**
+   * Additional method names to detect beyond "get"
+   * @default ["get"]
+   */
+  methodNames?: string[];
+
+  /**
+   * Additional reactive component names to skip
+   * Merged with defaults: Auto, For, Show, Memo, Computed, Switch
+   */
+  reactiveComponents?: string[];
+
+  /**
+   * Observer HOC function names — skip content inside these
+   * @default ["observer"]
+   */
+  observerNames?: string[];
+
+  /**
+   * Auto-wrap non-function children of Memo/Show/Computed in () =>
+   * Replaces the need for @legendapp/state/babel plugin
+   * @default true
+   */
+  wrapReactiveChildren?: boolean;
+
+  /**
+   * Additional component names whose children should be auto-wrapped
+   * Merged with defaults: Memo, Show, Computed
+   */
+  wrapReactiveChildrenComponents?: string[];
+}
+```
+
+---
+
+## Features
+
+### 1. Auto-wrap `.get()` calls in JSX expressions
+
+```tsx
+// Input
+<div>{count$.get()}</div>
+
+// Output
+import { Memo } from "@legendapp/state/react";
+<div><Memo>{() => count$.get()}</Memo></div>
+```
+
+Complex expressions, ternaries, and conditionals are all handled:
+
+```tsx
+// Multiple observables → one Memo
+<p>{a$.get() + " " + b$.get()}</p>
+// → <p><Memo>{() => a$.get() + " " + b$.get()}</Memo></p>
+
+// Ternary
+<div>{isActive$.get() ? "ON" : "OFF"}</div>
+// → <div><Memo>{() => isActive$.get() ? "ON" : "OFF"}</Memo></div>
+
+// Conditional rendering
+<div>{show$.get() && <Modal />}</div>
+// → <div><Memo>{() => show$.get() && <Modal />}</Memo></div>
+```
+
+### 2. Auto-wrap `.get()` calls in JSX attributes
+
+When an element's props contain `.get()`, the entire element is wrapped:
+
+```tsx
+// Input
+<Component value={obs$.get()} />
+
+// Output
+<Memo>{() => <Component value={obs$.get()} />}</Memo>
+```
+
+Attributes and children together → one `<Memo>`:
+
+```tsx
+// Input
+<div className={theme$.get()}>
+  {count$.get()}
+</div>
+
+// Output
+<Memo>{() =>
+  <div className={theme$.get()}>
+    {count$.get()}
+  </div>
+}</Memo>
+```
+
+### 3. Auto-wrap children of Memo/Show/Computed
+
+Non-function children are automatically wrapped in `() =>`. This replaces `@legendapp/state/babel`:
+
+```tsx
+// Input
+<Memo>{count$.get()}</Memo>
+<Show if={cond$}>{count$.get()}</Show>
+<Computed>{price$.get() * qty$.get()}</Computed>
+
+// Output
+<Memo>{() => count$.get()}</Memo>
+<Show if={cond$}>{() => count$.get()}</Show>
+<Computed>{() => price$.get() * qty$.get()}</Computed>
+```
+
+Direct JSX children and multiple children:
+
+```tsx
+// Direct JSX child
+<Memo><div>{count$.get()}</div></Memo>
+// → <Memo>{() => <div>{count$.get()}</div>}</Memo>
+
+// Multiple children → Fragment
+<Memo><Header /><Body /></Memo>
+// → <Memo>{() => <><Header /><Body /></>}</Memo>
+```
+
+---
+
+## Writing Components
+
+### Basic principle: write `.get()` naturally, plugin handles wrapping
+
+```tsx
+import { observable } from '@legendapp/state';
+import { Show, Memo, For } from '@legendapp/state/react';
+
+const count$ = observable(0);
+const isVisible$ = observable(true);
+const user$ = observable({ name: 'Alice', age: 30 });
+const items$ = observable([{ id: 1, name: 'Item 1' }]);
+
+export function App() {
+  return (
+    <div>
+      {/* Simple expressions — plugin wraps each */}
+      <h1>Count: {count$.get()}</h1>
+      <p>User: {user$.name.get()}</p>
+
+      {/* Memo children — plugin auto-wraps in () => */}
+      <Memo>
+        <div className="card">{count$.get()}</div>
+      </Memo>
+
+      {/* Show children — plugin auto-wraps in () => */}
+      <Show if={isVisible$}>
+        {user$.name.get()}
+      </Show>
+
+      {/* For — handles list reactivity, plugin skips inside */}
+      <For each={items$}>
+        {(item$) => <li>{item$.name.get()}</li>}
+      </For>
+    </div>
+  );
+}
+```
+
+### Use `$` suffix for observables (required by default)
+
+```tsx
+// ✅ Detected automatically — use $ suffix
+const count$ = observable(0);
+const profile$ = observable({ name: '', email: '' });
+
+// ❌ Without $ — won't be wrapped (use allGet: true to override)
+const count = observable(0);
+```
+
+### Use `observer()` for component-level reactivity
+
+When the whole component is reactive, wrap with `observer()`. Plugin skips content inside — no double-wrapping:
+
+```tsx
+import { observer } from '@legendapp/state/react';
+
+// ✅ Entire component is reactive — no individual Memo wrappers needed
+const Profile = observer(() => {
+  return (
+    <div>
+      <h2>{user$.name.get()}</h2>
+      <p>{user$.bio.get()}</p>
+      <span>{user$.age.get()} years old</span>
+    </div>
+  );
+});
+```
+
+**When to use `observer()`:** When the entire component needs reactivity and you want simpler code without individual `<Memo>` boundaries.
+
+**When to use auto-wrap (default):** When you want fine-grained reactivity — only the specific expressions that use observables update, not the whole component.
+
+### Reactive attributes
+
+```tsx
+const theme$ = observable({ color: '#007bff', size: 'lg' });
+const isDark$ = observable(false);
+
+function ThemedButton({ label }: { label: string }) {
+  return (
+    <button
+      className={`btn-${theme$.size.get()}`}
+      style={{ backgroundColor: theme$.color.get() }}
+      aria-pressed={isDark$.get()}
+    >
+      {label}
+    </button>
+    // ↑ Plugin wraps entire <button> since attributes have .get()
+  );
+}
+```
+
+### Conditional rendering patterns
+
+```tsx
+const auth$ = observable({ isLoggedIn: false, username: '' });
+
+function Header() {
+  return (
+    <header>
+      {/* Show removes from DOM when false */}
+      <Show if={auth$.isLoggedIn}>
+        {/* Plugin auto-wraps children */}
+        Welcome, {auth$.username.get()}
+      </Show>
+
+      {/* Ternary with .get() */}
+      <nav>
+        {auth$.isLoggedIn.get()
+          ? <a href="/profile">Profile</a>
+          : <a href="/login">Login</a>
+        }
+      </nav>
+    </header>
+  );
+}
+```
+
+### Reactive lists with `For`
+
+```tsx
+const todos$ = observable([
+  { id: 1, text: 'Learn Legend-State', done: false },
+]);
+
+function TodoList() {
+  return (
+    <ul>
+      <For each={todos$}>
+        {(todo$) => (
+          // item$ is already reactive — plugin skips inside For
+          <li
+            style={{ textDecoration: todo$.done.get() ? 'line-through' : 'none' }}
+          >
+            {todo$.text.get()}
+          </li>
+        )}
+      </For>
+    </ul>
+  );
+}
+```
+
+### Computed derived values
+
+```tsx
+import { computed } from '@legendapp/state';
+
+const price$ = observable(100);
+const qty$ = observable(2);
+const discount$ = observable(0.1);
+
+// Derived value
+const total$ = computed(() =>
+  price$.get() * qty$.get() * (1 - discount$.get())
+);
+
+function OrderSummary() {
+  return (
+    <div>
+      <p>Price: {price$.get()}</p>
+      <p>Qty: {qty$.get()}</p>
+      <p>Total: {total$.get()}</p>
+      {/* Plugin wraps each expression individually */}
+    </div>
+  );
+}
+```
+
+---
+
+## API Reference
+
+### `autoWrap(options?: PluginOptions): Plugin`
+
+Returns a Vite plugin that transforms `.jsx` and `.tsx` files using `@usels/babel-plugin-legend-memo`.
+
+**Parameters:**
+- `options` (optional) — Configuration object. See [Configuration](#configuration).
+
+**Returns:** Vite `Plugin` object
+
+**Example:**
+
+```typescript
+import { autoWrap } from '@usels/vite-plugin-legend-memo';
+
+const plugin = autoWrap({
+  componentName: 'Memo',
+  importSource: '@legendapp/state/react',
+  wrapReactiveChildren: true,
+});
+```
+
+### Type exports
+
+```typescript
+import type { PluginOptions } from '@usels/vite-plugin-legend-memo';
+
+const options: PluginOptions = {
+  allGet: false,
+  wrapReactiveChildren: true,
+};
+```
+
+---
+
+## Troubleshooting
+
+### `.get()` calls aren't being wrapped
+
+1. Check plugin order — `autoWrap()` must come before `react()`
+2. Check that your observable uses `$` suffix (or enable `allGet: true`)
+3. Check if code is inside `observer()` — this is intentional (observer makes whole component reactive)
+
+```typescript
+// Check 1: plugin order
+plugins: [autoWrap(), react()]  // ✅ correct order
+
+// Check 2: $ suffix
+const count$ = observable(0);  // ✅ will be wrapped
+const count = observable(0);   // ❌ won't be wrapped (add allGet: true)
+
+// Check 3: observer() is expected
+const Comp = observer(() => {
+  return <div>{count$.get()}</div>;  // intentionally not wrapped
+});
+```
+
+### `Memo` is not defined error
+
+The plugin auto-adds `import { Memo } from "@legendapp/state/react"` when wrapping. If you see this error:
+
+1. Ensure `@legendapp/state` is installed: `npm install @legendapp/state`
+2. If using a different import source, configure it: `autoWrap({ importSource: '...' })`
+
+### Source maps not working
+
+The plugin preserves source maps automatically. If DevTools shows incorrect locations:
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  build: {
+    sourcemap: true,  // Enable for production builds
+  },
+});
+```
+
+### Performance: too many re-renders
+
+If you see many components re-rendering, consider using `observer()` for entire components instead of fine-grained `<Memo>` boundaries:
+
+```tsx
+// Fine-grained (default) — each expression gets its own Memo
+function Component() {
+  return <div>{a$.get()} {b$.get()} {c$.get()}</div>;
+}
+
+// Component-level (use observer if whole component should update together)
+const Component = observer(() => {
+  return <div>{a$.get()} {b$.get()} {c$.get()}</div>;
+});
+```
+
+---
+
+## Peer Dependencies
+
+| Package | Required Version |
+|---------|-----------------|
+| `vite` | `>=4.0.0` |
+| `@babel/core` | `>=7.0.0` |
+| `@usels/babel-plugin-legend-memo` | `workspace:*` |
+
+---
+
+## See Also
+
+- [@usels/babel-plugin-legend-memo](../babel) — The underlying Babel plugin and its full documentation
+- [Legend-State Documentation](https://legendapp.com/dev/state/v3/)
+- [Vite Plugin API](https://vitejs.dev/guide/api-plugin.html)

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+import { Plugin } from 'vite';
+import { PluginOptions } from '@usels/babel-plugin-legend-memo';
+export { PluginOptions } from '@usels/babel-plugin-legend-memo';
+
+/**
+ * Vite plugin that applies @usels/babel-plugin-legend-memo during transform.
+ *
+ * Wraps Legend-State observable .get() calls in JSX with <Auto> component
+ * for fine-grained reactive rendering.
+ *
+ * IMPORTANT: Must be placed BEFORE @vitejs/plugin-react in the plugins array,
+ * because `enforce: "pre"` ensures this runs before esbuild JSX transform.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { autoWrap } from '@usels/vite-plugin-legend-memo';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     autoWrap({ importSource: '@usels/core' }),
+ *     react(),
+ *   ],
+ * });
+ * ```
+ */
+declare function autoWrap(opts?: PluginOptions): Plugin;
+
+export { autoWrap, autoWrap as default };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import { Plugin } from 'vite';
+import { PluginOptions } from '@usels/babel-plugin-legend-memo';
+export { PluginOptions } from '@usels/babel-plugin-legend-memo';
+
+/**
+ * Vite plugin that applies @usels/babel-plugin-legend-memo during transform.
+ *
+ * Wraps Legend-State observable .get() calls in JSX with <Auto> component
+ * for fine-grained reactive rendering.
+ *
+ * IMPORTANT: Must be placed BEFORE @vitejs/plugin-react in the plugins array,
+ * because `enforce: "pre"` ensures this runs before esbuild JSX transform.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { autoWrap } from '@usels/vite-plugin-legend-memo';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     autoWrap({ importSource: '@usels/core' }),
+ *     react(),
+ *   ],
+ * });
+ * ```
+ */
+declare function autoWrap(opts?: PluginOptions): Plugin;
+
+export { autoWrap, autoWrap as default };

package/dist/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  autoWrap: () => autoWrap,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+function autoWrap(opts = {}) {
+  return {
+    name: "@usels/vite-plugin-legend-memo",
+    // Must run before esbuild JSX transform (before @vitejs/plugin-react)
+    enforce: "pre",
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id)) return null;
+      const babel = await import("@babel/core");
+      const result = await babel.transformAsync(code, {
+        filename: id,
+        plugins: [["@usels/babel-plugin-legend-memo", opts]],
+        parserOpts: {
+          plugins: ["jsx", "typescript"]
+        },
+        sourceMaps: true,
+        configFile: false,
+        babelrc: false
+      });
+      if (!result || !result.code) return null;
+      return {
+        code: result.code,
+        map: result.map ?? void 0
+      };
+    }
+  };
+}
+var index_default = autoWrap;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  autoWrap
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Plugin } from 'vite';\nimport type { PluginOptions } from '@usels/babel-plugin-legend-memo';\n\n/**\n * Vite plugin that applies @usels/babel-plugin-legend-memo during transform.\n *\n * Wraps Legend-State observable .get() calls in JSX with <Auto> component\n * for fine-grained reactive rendering.\n *\n * IMPORTANT: Must be placed BEFORE @vitejs/plugin-react in the plugins array,\n * because `enforce: \"pre\"` ensures this runs before esbuild JSX transform.\n *\n * @example\n * ```typescript\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import react from '@vitejs/plugin-react';\n * import { autoWrap } from '@usels/vite-plugin-legend-memo';\n *\n * export default defineConfig({\n *   plugins: [\n *     autoWrap({ importSource: '@usels/core' }),\n *     react(),\n *   ],\n * });\n * ```\n */\nexport function autoWrap(opts: PluginOptions = {}): Plugin {\n  return {\n    name: '@usels/vite-plugin-legend-memo',\n    // Must run before esbuild JSX transform (before @vitejs/plugin-react)\n    enforce: 'pre',\n\n    async transform(code, id) {\n      // Only process .jsx and .tsx files\n      if (!/\\.[jt]sx$/.test(id)) return null;\n\n      // Lazy import @babel/core to avoid bundling it\n      const babel = await import('@babel/core');\n\n      const result = await babel.transformAsync(code, {\n        filename: id,\n        plugins: [['@usels/babel-plugin-legend-memo', opts]],\n        parserOpts: {\n          plugins: ['jsx', 'typescript'],\n        },\n        sourceMaps: true,\n        configFile: false,\n        babelrc: false,\n      });\n\n      if (!result || !result.code) return null;\n\n      return {\n        code: result.code,\n        map: result.map ?? undefined,\n      };\n    },\n  };\n}\n\nexport default autoWrap;\nexport type { PluginOptions };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BO,SAAS,SAAS,OAAsB,CAAC,GAAW;AACzD,SAAO;AAAA,IACL,MAAM;AAAA;AAAA,IAEN,SAAS;AAAA,IAET,MAAM,UAAU,MAAM,IAAI;AAExB,UAAI,CAAC,YAAY,KAAK,EAAE,EAAG,QAAO;AAGlC,YAAM,QAAQ,MAAM,OAAO,aAAa;AAExC,YAAM,SAAS,MAAM,MAAM,eAAe,MAAM;AAAA,QAC9C,UAAU;AAAA,QACV,SAAS,CAAC,CAAC,mCAAmC,IAAI,CAAC;AAAA,QACnD,YAAY;AAAA,UACV,SAAS,CAAC,OAAO,YAAY;AAAA,QAC/B;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,MACX,CAAC;AAED,UAAI,CAAC,UAAU,CAAC,OAAO,KAAM,QAAO;AAEpC,aAAO;AAAA,QACL,MAAM,OAAO;AAAA,QACb,KAAK,OAAO,OAAO;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,33 @@
+// src/index.ts
+function autoWrap(opts = {}) {
+  return {
+    name: "@usels/vite-plugin-legend-memo",
+    // Must run before esbuild JSX transform (before @vitejs/plugin-react)
+    enforce: "pre",
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id)) return null;
+      const babel = await import("@babel/core");
+      const result = await babel.transformAsync(code, {
+        filename: id,
+        plugins: [["@usels/babel-plugin-legend-memo", opts]],
+        parserOpts: {
+          plugins: ["jsx", "typescript"]
+        },
+        sourceMaps: true,
+        configFile: false,
+        babelrc: false
+      });
+      if (!result || !result.code) return null;
+      return {
+        code: result.code,
+        map: result.map ?? void 0
+      };
+    }
+  };
+}
+var index_default = autoWrap;
+export {
+  autoWrap,
+  index_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Plugin } from 'vite';\nimport type { PluginOptions } from '@usels/babel-plugin-legend-memo';\n\n/**\n * Vite plugin that applies @usels/babel-plugin-legend-memo during transform.\n *\n * Wraps Legend-State observable .get() calls in JSX with <Auto> component\n * for fine-grained reactive rendering.\n *\n * IMPORTANT: Must be placed BEFORE @vitejs/plugin-react in the plugins array,\n * because `enforce: \"pre\"` ensures this runs before esbuild JSX transform.\n *\n * @example\n * ```typescript\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import react from '@vitejs/plugin-react';\n * import { autoWrap } from '@usels/vite-plugin-legend-memo';\n *\n * export default defineConfig({\n *   plugins: [\n *     autoWrap({ importSource: '@usels/core' }),\n *     react(),\n *   ],\n * });\n * ```\n */\nexport function autoWrap(opts: PluginOptions = {}): Plugin {\n  return {\n    name: '@usels/vite-plugin-legend-memo',\n    // Must run before esbuild JSX transform (before @vitejs/plugin-react)\n    enforce: 'pre',\n\n    async transform(code, id) {\n      // Only process .jsx and .tsx files\n      if (!/\\.[jt]sx$/.test(id)) return null;\n\n      // Lazy import @babel/core to avoid bundling it\n      const babel = await import('@babel/core');\n\n      const result = await babel.transformAsync(code, {\n        filename: id,\n        plugins: [['@usels/babel-plugin-legend-memo', opts]],\n        parserOpts: {\n          plugins: ['jsx', 'typescript'],\n        },\n        sourceMaps: true,\n        configFile: false,\n        babelrc: false,\n      });\n\n      if (!result || !result.code) return null;\n\n      return {\n        code: result.code,\n        map: result.map ?? undefined,\n      };\n    },\n  };\n}\n\nexport default autoWrap;\nexport type { PluginOptions };\n"],"mappings":";AA2BO,SAAS,SAAS,OAAsB,CAAC,GAAW;AACzD,SAAO;AAAA,IACL,MAAM;AAAA;AAAA,IAEN,SAAS;AAAA,IAET,MAAM,UAAU,MAAM,IAAI;AAExB,UAAI,CAAC,YAAY,KAAK,EAAE,EAAG,QAAO;AAGlC,YAAM,QAAQ,MAAM,OAAO,aAAa;AAExC,YAAM,SAAS,MAAM,MAAM,eAAe,MAAM;AAAA,QAC9C,UAAU;AAAA,QACV,SAAS,CAAC,CAAC,mCAAmC,IAAI,CAAC;AAAA,QACnD,YAAY;AAAA,UACV,SAAS,CAAC,OAAO,YAAY;AAAA,QAC/B;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,MACX,CAAC;AAED,UAAI,CAAC,UAAU,CAAC,OAAO,KAAM,QAAO;AAEpC,aAAO;AAAA,QACL,MAAM,OAAO;AAAA,QACb,KAAK,OAAO,OAAO;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@usels/vite-plugin-legend-memo",
+  "version": "0.1.0",
+  "description": "Vite plugin to auto-wrap Legend-State observable .get() calls in JSX with <Auto> component",
+  "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"
+    }
+  },
+  "peerDependencies": {
+    "@babel/core": ">=7.0.0",
+    "vite": ">=4.0.0",
+    "@usels/babel-plugin-legend-memo": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@types/babel__core": "^7.20.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "@usels/babel-plugin-legend-memo": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+import type { Plugin } from 'vite';
+import type { PluginOptions } from '@usels/babel-plugin-legend-memo';
+
+/**
+ * Vite plugin that applies @usels/babel-plugin-legend-memo during transform.
+ *
+ * Wraps Legend-State observable .get() calls in JSX with <Auto> component
+ * for fine-grained reactive rendering.
+ *
+ * IMPORTANT: Must be placed BEFORE @vitejs/plugin-react in the plugins array,
+ * because `enforce: "pre"` ensures this runs before esbuild JSX transform.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import react from '@vitejs/plugin-react';
+ * import { autoWrap } from '@usels/vite-plugin-legend-memo';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     autoWrap({ importSource: '@usels/core' }),
+ *     react(),
+ *   ],
+ * });
+ * ```
+ */
+export function autoWrap(opts: PluginOptions = {}): Plugin {
+  return {
+    name: '@usels/vite-plugin-legend-memo',
+    // Must run before esbuild JSX transform (before @vitejs/plugin-react)
+    enforce: 'pre',
+
+    async transform(code, id) {
+      // Only process .jsx and .tsx files
+      if (!/\.[jt]sx$/.test(id)) return null;
+
+      // Lazy import @babel/core to avoid bundling it
+      const babel = await import('@babel/core');
+
+      const result = await babel.transformAsync(code, {
+        filename: id,
+        plugins: [['@usels/babel-plugin-legend-memo', opts]],
+        parserOpts: {
+          plugins: ['jsx', 'typescript'],
+        },
+        sourceMaps: true,
+        configFile: false,
+        babelrc: false,
+      });
+
+      if (!result || !result.code) return null;
+
+      return {
+        code: result.code,
+        map: result.map ?? undefined,
+      };
+    },
+  };
+}
+
+export default autoWrap;
+export type { PluginOptions };

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "node",
+    "module": "CommonJS"
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  external: ['@babel/core', '@usels/babel-plugin-legend-memo', 'vite'],
+  clean: true,
+  sourcemap: true,
+});