dslinter 0.1.1 → 0.1.2

package/src/playground/playgroundJoin.ts

@@ -0,0 +1,116 @@
+import type { PlaygroundSpec, WorkspaceReport } from "../types/report";
+import type { BuildPlaygroundModules, BuildPlaygroundOptions } from "./buildPlaygroundEntriesFromReport";
+
+export type PlaygroundJoinSkipReason = "module_not_found" | "export_not_found";
+
+export type PlaygroundJoinSkip = {
+  export_name: string;
+  rel_path: string;
+  globKey: string;
+  reason: PlaygroundJoinSkipReason;
+};
+
+/**
+ * Maps report `rel_path` to a Vite `import.meta.glob` key when the registry lives in
+ * `src/playground/` and components live under `src/components/`.
+ *
+ * Example: `src/components/ui/button.tsx` → `../components/ui/button.tsx`
+ */
+export function defaultConsumerGlobKeyFromRelPath(relPath: string): string {
+  const trimmed = relPath.replace(/^\/+/, "").replace(/^src\//, "");
+  return `../${trimmed}`;
+}
+
+export function defaultEmbedGlobKeyFromRelPath(relPath: string): string {
+  const trimmed = relPath.replace(/^\/+/, "");
+  return `@dslint-scan/${trimmed}`;
+}
+
+function getExport(
+  mod: Record<string, unknown>,
+  exportName: string,
+): unknown {
+  const x = mod[exportName];
+  return typeof x === "function" ? x : undefined;
+}
+
+/**
+ * For each playground spec, explain why it would not join to `modules`.
+ */
+export function diagnosePlaygroundJoinSkips(
+  report: WorkspaceReport | null | undefined,
+  modules: BuildPlaygroundModules,
+  options: Pick<BuildPlaygroundOptions, "globKeyFromRelPath"> = {},
+): PlaygroundJoinSkip[] {
+  const specs = report?.playgrounds;
+  if (!specs?.length) return [];
+
+  const globKeyFromRelPath =
+    options.globKeyFromRelPath ?? defaultEmbedGlobKeyFromRelPath;
+
+  const skipped: PlaygroundJoinSkip[] = [];
+  for (const spec of specs) {
+    const globKey = globKeyFromRelPath(spec.rel_path);
+    const mod = modules[globKey];
+    if (!mod) {
+      skipped.push({
+        export_name: spec.export_name,
+        rel_path: spec.rel_path,
+        globKey,
+        reason: "module_not_found",
+      });
+      continue;
+    }
+    if (!getExport(mod, spec.export_name)) {
+      skipped.push({
+        export_name: spec.export_name,
+        rel_path: spec.rel_path,
+        globKey,
+        reason: "export_not_found",
+      });
+    }
+  }
+  return skipped;
+}
+
+/**
+ * Dev-only: log skipped playground joins (module glob / export name mismatches).
+ */
+export function logPlaygroundJoinSkips(
+  skipped: PlaygroundJoinSkip[],
+  options?: { label?: string },
+): void {
+  if (!skipped.length) return;
+  if (typeof import.meta !== "undefined" && !import.meta.env?.DEV) return;
+
+  const label = options?.label ?? "[dslinter] playground preview";
+  console.warn(
+    `${label}: ${skipped.length} component(s) have a scan row but no live preview.`,
+  );
+  for (const s of skipped.slice(0, 12)) {
+    const hint =
+      s.reason === "module_not_found"
+        ? `add import.meta.glob key "${s.globKey}" (from rel_path "${s.rel_path}")`
+        : `export function ${s.export_name} from "${s.rel_path}"`;
+    console.warn(`  - ${s.export_name}: ${hint}`);
+  }
+  if (skipped.length > 12) {
+    console.warn(`  … and ${skipped.length - 12} more`);
+  }
+}
+
+export function findPlaygroundSpec(
+  report: WorkspaceReport | null | undefined,
+  componentId: string,
+): PlaygroundSpec | undefined {
+  return report?.playgrounds?.find(
+    (p) => p.export_name === componentId || p.id === componentId,
+  );
+}
+
+export function findPlaygroundJoinSkip(
+  skipped: PlaygroundJoinSkip[] | undefined,
+  componentId: string,
+): PlaygroundJoinSkip | undefined {
+  return skipped?.find((s) => s.export_name === componentId);
+}

package/src/shell/DashboardLayout.tsx

@@ -20,6 +20,10 @@ import { TokensPane } from "../components/TokensPane";
 import { DashboardCommandPalette } from "../components/DashboardCommandPalette";
 import { componentCatalogNamesFromReport } from "../dashboard/aggregate";
 import { resolvePlaygroundEntry } from "../playground/buildPlaygroundEntriesFromReport";
+import {
+  findPlaygroundJoinSkip,
+  type PlaygroundJoinSkip,
+} from "../playground/playgroundJoin";
 import { useHashRoute } from "./useHashRoute";
 
 const STORAGE_KEY = "dslinter-dashboard-theme";
@@ -121,6 +125,8 @@ export function useDashboardTheme(): DashboardThemeContextValue {
 
 export type DashboardLayoutProps = {
   playgroundEntries: PlaygroundEntry[];
+  /** Join failures from `buildPlaygroundEntriesFromReportWithSkips` — powers inspect-pane hints. */
+  playgroundJoinSkips?: PlaygroundJoinSkip[];
   tokenCatalog?: TokenCatalog;
   /** Custom intro shown above the governance inventory on `#!/governance`; defaults to package copy. */
   overview?: ReactNode;
@@ -136,6 +142,7 @@ export type DashboardLayoutProps = {
 
 function DashboardLayoutInner({
   playgroundEntries,
+  playgroundJoinSkips,
   tokenCatalog,
   overview,
   reportUrl,
@@ -202,6 +209,10 @@ function DashboardLayoutInner({
           workspaceReport={dslinterReport.report}
           reportReady={reportReady}
           hasPlaygroundSpec={hasPlaygroundSpec}
+          playgroundJoinSkip={findPlaygroundJoinSkip(
+            playgroundJoinSkips,
+            componentId,
+          )}
           onBackToGovernance={() => navigate({ view: "governance" })}
         />
       );

package/templates/playground/buildRegistry.ts

@@ -0,0 +1,26 @@
+import type { PlaygroundEntry, WorkspaceReport } from "dslinter";
+import { createPlaygroundRegistry } from "dslinter";
+
+/**
+ * Eager Vite glob — must cover every path in `dslint-report.json` → `playgrounds[].rel_path`.
+ * Nested paths (e.g. `src/components/ui/button.tsx`) require `**`, not a single `*`.
+ */
+const modules = import.meta.glob("../components/**/*.{tsx,jsx}", {
+  eager: true,
+}) as Record<string, Record<string, unknown>>;
+
+const buildWithSkips = createPlaygroundRegistry(modules);
+
+/** Live previews for the dashboard (`DashboardLayout` → `playgroundEntries`). */
+export function buildPlaygroundEntries(
+  report: WorkspaceReport | null | undefined,
+): PlaygroundEntry[] {
+  return buildWithSkips(report).entries;
+}
+
+/** Skipped joins (module glob / export mismatch) — useful for debugging previews. */
+export function getPlaygroundJoinSkips(
+  report: WorkspaceReport | null | undefined,
+) {
+  return buildWithSkips(report).skipped;
+}

package/templates/vite.dslinter.snippet.ts

@@ -0,0 +1,28 @@
+/**
+ * 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`.
+ */
+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"],
+  },
+  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,
+        },
+      },
+  },
+};