dslinter 0.1.3 → 0.1.5

package/src/dashboard/ComponentCatalog.tsx

@@ -3,7 +3,7 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card";
+} from "../components/ui/hover-card";
 import {
   Table,
   TableBody,
@@ -11,7 +11,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "../components/ui/table";
 import {
   aggregateDeclaredProps,
   aggregateDefinitions,

package/src/dashboard/ComponentUsageDetails.tsx

@@ -6,12 +6,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "../components/ui/table";
 import type { UsageLocation, WorkspaceReport } from "../types/report";
 import { usageMap } from "./aggregate";
 import { shortPath } from "./paths";
 import { EmptyCard } from "../components/EmptyCard";
-import { InlineCode } from "@/components/InlineCode";
+import { InlineCode } from "../components/InlineCode";
 
 function formatCallSiteProps(loc: UsageLocation): string {
   if (!loc.props.length) return "—";
@@ -76,18 +76,24 @@ export function ComponentUsageDetails({
     <Table className="[&>table]:table-fixed [&>table]:w-full">
       <TableHeader>
         <TableRow>
-          <TableHead className="w-[40%]">File</TableHead>
+          <TableHead className="w-[40%] min-w-0">File</TableHead>
           <TableHead className="w-14 whitespace-nowrap">Line</TableHead>
           <TableHead className="min-w-0">Props at this call site</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
         {rows.map((loc, i) => {
+          const fileText = shortPath(report.root, loc.path);
           const propsText = formatCallSiteProps(loc);
           return (
             <TableRow key={`${loc.path}-${loc.line}-${i}`}>
-              <TableCell className="font-mono text-xs text-foreground">
-                {shortPath(report.root, loc.path)}
+              <TableCell className="min-w-0 max-w-0">
+                <span
+                  className="block truncate font-mono text-xs text-foreground"
+                  title={fileText}
+                >
+                  {fileText}
+                </span>
               </TableCell>
               <TableCell className="tabular-nums text-muted-foreground">
                 {loc.line}

package/src/dashboard/DashboardBody.tsx

@@ -6,7 +6,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "../components/ui/table";
 import type { WorkspaceReport } from "../types/report";
 import { ComponentCatalog } from "./ComponentCatalog";
 import { FindingsList } from "./FindingsList";

package/src/dashboard/FindingsList.tsx

@@ -6,11 +6,11 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "../components/ui/table";
 import { shortPath } from "./paths";
 import type { LintFinding, Severity } from "../types/report";
-import { Badge } from "@/components/ui/badge";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Badge } from "../components/ui/badge";
+import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
 
 type Filter = "all" | Severity;
 

package/src/dashboard/ScannedTokenWall.tsx

@@ -3,7 +3,7 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card";
+} from "../components/ui/hover-card";
 import { cn } from "../lib/utils";
 import { shortPath } from "./paths";
 import {

package/src/dashboard/mergeTokenCatalog.ts

@@ -1,5 +1,5 @@
 import type { TokenCatalog } from "../types/tokenCatalog";
-import type { CssTokenSummary, WorkspaceReport } from "../types/report";
+import type { WorkspaceReport } from "../types/report";
 
 export type TokenUsageFilter = "all" | "used" | "unused";
 

package/src/index.ts

@@ -39,6 +39,7 @@ export {
   createPlaygroundRegistry,
   createPlaygroundRegistryEntriesOnly,
 } from "./playground/createPlaygroundRegistry";
+export { usePlaygroundFromReport } from "./playground/usePlaygroundFromReport";
 export type { CreatePlaygroundRegistryOptions } from "./playground/createPlaygroundRegistry";
 export type { DefinedPlayground } from "./playground/definePlayground";
 export type { PlaygroundPreviewProps, PlaygroundPreviewComponent } from "./types/preview";

package/src/playground/scanPlaygroundModules.ts

@@ -0,0 +1 @@
+export { scanPlaygroundModules } from "virtual:dslinter/playground-modules";

package/src/playground/usePlaygroundFromReport.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+import { embedGlobKeyFromRelPath } from "../../vite/collectScanModules";
+import { buildPlaygroundEntriesFromReportWithSkips } from "./buildPlaygroundEntriesFromReport";
+
+describe("autoPlayground join (embed glob keys)", () => {
+  it("joins report playgrounds to virtual module keys", () => {
+    const relPath =
+      "resources/js/Components/Billing/AdditionalEventLimitModal.tsx";
+    const globKey = embedGlobKeyFromRelPath(relPath);
+    const modules = {
+      [globKey]: {
+        AdditionalEventLimitModal: function AdditionalEventLimitModal() {
+          return null;
+        },
+      },
+    };
+    const report = {
+      playgrounds: [
+        {
+          id: "AdditionalEventLimitModal",
+          export_name: "AdditionalEventLimitModal",
+          rel_path: relPath,
+        },
+      ],
+    };
+
+    const { entries, skipped } = buildPlaygroundEntriesFromReportWithSkips(
+      report,
+      modules,
+      { logJoinSkips: false },
+    );
+
+    expect(skipped).toHaveLength(0);
+    expect(entries).toHaveLength(1);
+    expect(entries[0]?.modulePath).toBe(globKey);
+  });
+});

package/src/playground/usePlaygroundFromReport.ts

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import type { WorkspaceReport } from "../types/report";
+import { buildPlaygroundEntriesFromReportWithSkips } from "./buildPlaygroundEntriesFromReport";
+import type { BuildPlaygroundResult } from "./buildPlaygroundEntriesFromReport";
+import { scanPlaygroundModules } from "./scanPlaygroundModules";
+
+/**
+ * Join scanner `playgrounds` to eager modules from the dslinter Vite plugin
+ * (`virtual:dslinter/playground-modules`). Requires `plugins: [dslinter()]` from
+ * `dslinter/vite`, or `npx dslinter` which merges the plugin automatically.
+ */
+export function usePlaygroundFromReport(
+  report: WorkspaceReport | null | undefined,
+): BuildPlaygroundResult {
+  return useMemo(
+    () =>
+      buildPlaygroundEntriesFromReportWithSkips(
+        report,
+        scanPlaygroundModules,
+      ),
+    [report],
+  );
+}

package/src/playground/virtual-playground-modules.d.ts

@@ -0,0 +1,6 @@
+declare module "virtual:dslinter/playground-modules" {
+  export const scanPlaygroundModules: Record<
+    string,
+    Record<string, unknown>
+  >;
+}

package/src/shell/DashboardLayout.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from "react";
 import {
   createContext,
+  lazy,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
@@ -10,7 +12,7 @@ import {
 import type { PlaygroundEntry } from "../types/playground";
 import type { TokenCatalog } from "../types/tokenCatalog";
 import type { DslinterReportState } from "../dashboard/useWorkspaceReport";
-import { Button } from "@/components/ui/button";
+import { Button } from "../components/ui/button";
 import { cn } from "../lib/utils";
 import { ComponentInspectPane } from "../components/ComponentInspectPane";
 import { ComponentPlaygroundPane } from "../components/ComponentPlaygroundPane";
@@ -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,21 +1,4 @@
-/**
- * Add to `vite.config.ts` when using the `@dslint-scan` embed-style glob in your 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:
- *   const modules = import.meta.glob("@dslint-scan/**/*.{tsx,jsx}", { eager: true });
- *   buildPlaygroundEntriesFromReport(report, modules);
- *
- * Prefer `npx dslinter init --laravel` (relative glob) when you have your own Vite app.
- */
+// 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,28 +1,26 @@
 /**
- * Add to your existing `vite.config.ts` when using `npx dslinter` dev mode.
- * Adjust paths if your app layout differs from `src/` + `public/dslint-report.json`.
+ * Legacy snippet — prefer `import dslinter from "dslinter/vite"` (one plugin line).
+ * `npx dslinter` merges the plugin automatically when a consumer Vite app exists.
  */
-import path from "node:path";
-
 const DSLINT_SERVE_PORT = Number(process.env.DSLINT_SERVE_PORT ?? "7878");
 
-// Inside defineConfig(({ mode }) => ({ ... })):
 export const dslinterViteSnippet = {
   resolve: {
     dedupe: ["react", "react-dom"],
   },
+  optimizeDeps: {
+    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 };