dslinter 0.1.4 → 0.1.5

package/src/shell/DashboardLayout.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import {
   createContext,
+  lazy,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
@@ -26,6 +28,8 @@ import {
 } from "../playground/playgroundJoin";
 import { useHashRoute } from "./useHashRoute";
 
+const DashboardLayoutAuto = lazy(() => import("./DashboardLayoutAuto"));
+
 const STORAGE_KEY = "dslinter-dashboard-theme";
 
 export type DashboardThemePreference = "light" | "dark";
@@ -124,7 +128,14 @@ export function useDashboardTheme(): DashboardThemeContextValue {
 }
 
 export type DashboardLayoutProps = {
-  playgroundEntries: PlaygroundEntry[];
+  /**
+   * When true, loads playground modules from the dslinter Vite plugin
+   * (`virtual:dslinter/playground-modules`). Requires `plugins: [dslinter()]`
+   * from `dslinter/vite`, or running via `npx dslinter`.
+   */
+  autoPlayground?: boolean;
+  /** Required unless `autoPlayground` is true. */
+  playgroundEntries?: PlaygroundEntry[];
   /** Join failures from `buildPlaygroundEntriesFromReportWithSkips` — powers inspect-pane hints. */
   playgroundJoinSkips?: PlaygroundJoinSkip[];
   tokenCatalog?: TokenCatalog;
@@ -140,7 +151,15 @@ export type DashboardLayoutProps = {
   dslinterReport: DslinterReportState;
 };
 
-function DashboardLayoutInner({
+export type DashboardLayoutInnerProps = Omit<
+  DashboardLayoutProps,
+  "autoPlayground" | "playgroundEntries" | "playgroundJoinSkips"
+> & {
+  playgroundEntries: PlaygroundEntry[];
+  playgroundJoinSkips?: PlaygroundJoinSkip[];
+};
+
+export function DashboardLayoutInner({
   playgroundEntries,
   playgroundJoinSkips,
   tokenCatalog,
@@ -149,7 +168,7 @@ function DashboardLayoutInner({
   dslinterReportHint,
   formatModulePath,
   dslinterReport,
-}: DashboardLayoutProps) {
+}: DashboardLayoutInnerProps) {
   const [route, navigate] = useHashRoute();
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   const { theme, setTheme, resolvedTheme } = useDashboardTheme();
@@ -267,9 +286,23 @@ function DashboardLayoutInner({
 }
 
 export function DashboardLayout(props: DashboardLayoutProps) {
+  if (props.autoPlayground) {
+    return (
+      <DashboardThemeProvider>
+        <Suspense fallback={null}>
+          <DashboardLayoutAuto {...props} />
+        </Suspense>
+      </DashboardThemeProvider>
+    );
+  }
+
   return (
     <DashboardThemeProvider>
-      <DashboardLayoutInner {...props} />
+      <DashboardLayoutInner
+        {...props}
+        playgroundEntries={props.playgroundEntries ?? []}
+        playgroundJoinSkips={props.playgroundJoinSkips}
+      />
     </DashboardThemeProvider>
   );
 }

package/src/shell/DashboardLayoutAuto.tsx

@@ -0,0 +1,20 @@
+import type { DashboardLayoutProps } from "./DashboardLayout";
+import { usePlaygroundFromReport } from "../playground/usePlaygroundFromReport";
+import { DashboardLayoutInner } from "./DashboardLayout";
+
+/** Loaded via `React.lazy` when `autoPlayground` is set (pulls virtual playground modules). */
+export default function DashboardLayoutAuto(props: DashboardLayoutProps) {
+  const autoPlaygroundBuild = usePlaygroundFromReport(props.dslinterReport.report);
+
+  return (
+    <DashboardLayoutInner
+      {...props}
+      playgroundEntries={autoPlaygroundBuild.entries}
+      playgroundJoinSkips={autoPlaygroundBuild.skipped}
+      formatModulePath={
+        props.formatModulePath ??
+        ((modulePath: string) => modulePath.replace(/^@dslint-scan\//, ""))
+      }
+    />
+  );
+}

package/templates/vite.dslint-scan-alias.snippet.ts

@@ -1,14 +1,4 @@
-// Add to vite.config.ts when using @dslint-scan embed-style glob in App:
-//
-//   import path from "node:path";
-//   const scanRoot = path.resolve(process.env.DSLINT_SCAN_ROOT ?? ".");
-//
-//   resolve: { alias: { "@dslint-scan": scanRoot } },
-//   server: { fs: { allow: [scanRoot] } },
-//
-// App — glob every .tsx/.jsx under @dslint-scan (use ** recursive glob in import.meta.glob).
-//   buildPlaygroundEntriesFromReport(report, modules);
-//
-// Prefer: npx dslinter init --laravel (relative glob) for Inertia resources/js layouts.
+// Deprecated — use `import dslinter from "dslinter/vite"` instead.
+// The plugin generates virtual playground modules; no @dslint-scan alias required.
 
 export {};

package/templates/vite.dslinter.snippet.ts

@@ -1,34 +1,26 @@
 /**
- * Merge into your existing `vite.config.ts` when using `npx dslinter` dev mode.
- *
- * Published dslinter source uses relative imports only — your app's `@/*` alias
- * (e.g. Laravel `@/*` → `resources/js/*`) does not need remapping for package UI.
- *
- * Adjust proxy paths if your report is not served from the Vite dev server root.
+ * Legacy snippet — prefer `import dslinter from "dslinter/vite"` (one plugin line).
+ * `npx dslinter` merges the plugin automatically when a consumer Vite app exists.
  */
 const DSLINT_SERVE_PORT = Number(process.env.DSLINT_SERVE_PORT ?? "7878");
 
-// Inside defineConfig(({ mode }) => ({ ... })):
 export const dslinterViteSnippet = {
   resolve: {
     dedupe: ["react", "react-dom"],
   },
   optimizeDeps: {
-    /** Source-first package: transpile from node_modules instead of pre-bundling. */
     exclude: ["dslinter"],
   },
   server: {
-    proxy:
-      // mode === "serve" when started via `npx dslinter` (not plain `vite`)
-      {
-        "/dslint-report.json": {
-          target: `http://127.0.0.1:${DSLINT_SERVE_PORT}`,
-          changeOrigin: true,
-        },
-        "/events": {
-          target: `http://127.0.0.1:${DSLINT_SERVE_PORT}`,
-          changeOrigin: true,
-        },
+    proxy: {
+      "/dslint-report.json": {
+        target: `http://127.0.0.1:${DSLINT_SERVE_PORT}`,
+        changeOrigin: true,
       },
+      "/events": {
+        target: `http://127.0.0.1:${DSLINT_SERVE_PORT}`,
+        changeOrigin: true,
+      },
+    },
   },
 };

package/vite/collectScanModules.test.ts

@@ -0,0 +1,42 @@
+import { mkdtempSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { describe, expect, it } from "vitest";
+import {
+  collectScanModuleRelPaths,
+  embedGlobKeyFromRelPath,
+} from "./collectScanModules";
+
+describe("embedGlobKeyFromRelPath", () => {
+  it("maps Laravel rel_path to @dslint-scan key", () => {
+    expect(
+      embedGlobKeyFromRelPath(
+        "resources/js/Components/Billing/AdditionalEventLimitModal.tsx",
+      ),
+    ).toBe(
+      "@dslint-scan/resources/js/Components/Billing/AdditionalEventLimitModal.tsx",
+    );
+  });
+
+  it("strips leading slashes", () => {
+    expect(embedGlobKeyFromRelPath("/src/components/Foo.tsx")).toBe(
+      "@dslint-scan/src/components/Foo.tsx",
+    );
+  });
+});
+
+describe("collectScanModuleRelPaths", () => {
+  it("collects tsx/jsx and skips node_modules", () => {
+    const root = mkdtempSync(join(tmpdir(), "dslinter-scan-"));
+    mkdirSync(join(root, "resources", "js", "Components"), { recursive: true });
+    writeFileSync(
+      join(root, "resources", "js", "Components", "Button.tsx"),
+      "export function Button() { return null; }",
+    );
+    mkdirSync(join(root, "node_modules", "pkg"), { recursive: true });
+    writeFileSync(join(root, "node_modules", "pkg", "Ignored.tsx"), "");
+
+    const paths = collectScanModuleRelPaths(root);
+    expect(paths).toEqual(["resources/js/Components/Button.tsx"]);
+  });
+});

package/vite/collectScanModules.ts

@@ -0,0 +1,60 @@
+import { readdirSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+
+const SKIP_DIR_NAMES = new Set([
+  "node_modules",
+  "vendor",
+  ".git",
+  "dist",
+  "build",
+  "dashboard-dist",
+  "storage",
+  "bootstrap",
+  "coverage",
+  ".next",
+  ".nuxt",
+  ".output",
+  ".turbo",
+  ".cache",
+]);
+
+const SOURCE_EXT = /\.(tsx|jsx)$/;
+
+/**
+ * Collect repo-relative posix paths for `.tsx`/`.jsx` files under `scanRoot`.
+ */
+export function collectScanModuleRelPaths(scanRoot: string): string[] {
+  const root = resolve(scanRoot);
+  const out: string[] = [];
+
+  function walk(dir: string): void {
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const ent of entries) {
+      if (ent.name.startsWith(".") && ent.name !== ".") continue;
+      const full = join(dir, ent.name);
+      if (ent.isDirectory()) {
+        if (SKIP_DIR_NAMES.has(ent.name)) continue;
+        walk(full);
+      } else if (ent.isFile() && SOURCE_EXT.test(ent.name)) {
+        out.push(relative(root, full).replace(/\\/g, "/"));
+      }
+    }
+  }
+
+  walk(root);
+  out.sort();
+  return out;
+}
+
+/**
+ * Virtual module map key for a scanner `rel_path` (embed convention).
+ */
+export function embedGlobKeyFromRelPath(relPath: string): string {
+  const trimmed = relPath.replace(/^\/+/, "");
+  return `@dslint-scan/${trimmed}`;
+}

package/vite/consumer.config.mjs

@@ -0,0 +1,22 @@
+import { defineConfig, loadConfigFromFile, mergeConfig } from "vite";
+
+/**
+ * Merges the consumer's vite.config with the dslinter plugin.
+ * Used by `npx dslinter` when a host Vite app is detected (`DSLINT_VITE_ROOT`).
+ */
+export default defineConfig(async ({ command, mode }) => {
+  const viteRoot = process.env.DSLINT_VITE_ROOT?.trim() || process.cwd();
+  const loaded = await loadConfigFromFile(
+    { command, mode },
+    undefined,
+    viteRoot,
+  );
+  const userConfig = loaded?.config ?? {};
+  const { default: dslinter } = await import("./plugin.ts");
+  return mergeConfig(
+    userConfig,
+    defineConfig({
+      plugins: [dslinter()],
+    }),
+  );
+});

package/vite/plugin.ts

@@ -0,0 +1,140 @@
+import { resolve } from "node:path";
+import type { Plugin, UserConfig } from "vite";
+import {
+  collectScanModuleRelPaths,
+  embedGlobKeyFromRelPath,
+} from "./collectScanModules";
+
+export const VIRTUAL_PLAYGROUND_MODULES_ID = "virtual:dslinter/playground-modules";
+const RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_PLAYGROUND_MODULES_ID}`;
+
+export type DslinterVitePluginOptions = {
+  /** Scan root (repo root passed to `npx dslinter`). Defaults to `DSLINT_SCAN_ROOT` or `process.cwd()`. */
+  scanRoot?: string;
+  /** Scanner HTTP port for report + SSE proxy in `serve` mode. */
+  servePort?: number;
+};
+
+function defaultServePort(): number {
+  const fromEnv = process.env.DSLINT_SERVE_PORT?.trim();
+  if (fromEnv) {
+    const n = Number.parseInt(fromEnv, 10);
+    if (Number.isFinite(n) && n > 0 && n <= 65535) return n;
+  }
+  return 7878;
+}
+
+function generatePlaygroundModulesSource(
+  scanRoot: string,
+  relPaths: string[],
+): string {
+  const root = resolve(scanRoot);
+  const lines: string[] = [
+    "// Generated by dslinter/vite — do not edit",
+  ];
+
+  for (let i = 0; i < relPaths.length; i++) {
+    const rel = relPaths[i]!;
+    const abs = resolve(root, rel).replace(/\\/g, "/");
+    lines.push(`import * as __dslinter_m${i} from ${JSON.stringify(abs)};`);
+  }
+
+  lines.push("export const scanPlaygroundModules = {");
+  for (let i = 0; i < relPaths.length; i++) {
+    const key = embedGlobKeyFromRelPath(relPaths[i]!);
+    lines.push(`  ${JSON.stringify(key)}: __dslinter_m${i},`);
+  }
+  lines.push("};");
+
+  return lines.join("\n");
+}
+
+/**
+ * Vite plugin: virtual playground module map, scanner proxy, react dedupe, fs.allow for scan root.
+ *
+ * @example
+ * ```ts
+ * import dslinter from "dslinter/vite";
+ * export default defineConfig({ plugins: [dslinter()] });
+ * ```
+ */
+export default function dslinter(
+  options: DslinterVitePluginOptions = {},
+): Plugin {
+  const scanRoot = resolve(
+    options.scanRoot ??
+      process.env.DSLINT_SCAN_ROOT ??
+      process.cwd(),
+  );
+  const servePort = options.servePort ?? defaultServePort();
+  let relPaths: string[] = [];
+
+  return {
+    name: "dslinter",
+    enforce: "pre",
+
+    config(config, { mode }): UserConfig {
+      const proxy =
+        mode === "serve"
+          ? {
+              "/dslint-report.json": {
+                target: `http://127.0.0.1:${servePort}`,
+                changeOrigin: true,
+              },
+              "/events": {
+                target: `http://127.0.0.1:${servePort}`,
+                changeOrigin: true,
+              },
+            }
+          : undefined;
+
+      const existingAllow = config.server?.fs?.allow;
+      const fsAllow = Array.isArray(existingAllow)
+        ? [...existingAllow, scanRoot]
+        : [scanRoot];
+
+      return {
+        resolve: {
+          dedupe: ["react", "react-dom"],
+        },
+        optimizeDeps: {
+          exclude: ["dslinter"],
+        },
+        server: {
+          fs: {
+            allow: fsAllow,
+          },
+          proxy,
+        },
+      };
+    },
+
+    configResolved() {
+      relPaths = collectScanModuleRelPaths(scanRoot);
+    },
+
+    resolveId(id) {
+      if (id === VIRTUAL_PLAYGROUND_MODULES_ID) {
+        return RESOLVED_VIRTUAL_ID;
+      }
+    },
+
+    load(id) {
+      if (id !== RESOLVED_VIRTUAL_ID) return;
+      return generatePlaygroundModulesSource(scanRoot, relPaths);
+    },
+
+    configureServer(server) {
+      const refresh = () => {
+        relPaths = collectScanModuleRelPaths(scanRoot);
+        const mod = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ID);
+        if (mod) server.moduleGraph.invalidateModule(mod);
+      };
+      server.watcher.add(scanRoot);
+      server.watcher.on("add", refresh);
+      server.watcher.on("unlink", refresh);
+    },
+  };
+}
+
+export { collectScanModuleRelPaths, embedGlobKeyFromRelPath };