@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/cli/ops.ts

@@ -0,0 +1,135 @@
+/**
+ * Ops commands — dev/build/start/preview lifecycle, config printing,
+ * env diffing, bundle size audit. The vite/bun-backed commands spawn
+ * external processes and return their exit code.
+ */
+
+import { existsSync, readFileSync, statSync } from "node:fs";
+import type { CliResult } from "./infra";
+import { listFiles, run, vite } from "./infra";
+
+export const dev = (): CliResult => vite(["dev"]);
+
+export const build = (): CliResult => {
+	const client = vite(["build"]);
+	if (client.code !== 0) return client;
+	// SSR bundle — entry resolved from config convention
+	return vite(["build", "--ssr", "src/entry-server.tsx"], {
+		SOLID_SSR_BUILD: "1",
+	});
+};
+
+export const start = (entry = "dist/server/entry-server.js"): CliResult => {
+	const candidates = [
+		entry,
+		"dist/server/index.js",
+		".output/server/index.mjs",
+	];
+	const target = candidates.find((file) => existsSync(file));
+	if (!target) {
+		console.error(
+			`[solid] no built server found (tried: ${candidates.join(", ")}). Run \`solid build\` first.`,
+		);
+		return { code: 1 };
+	}
+	return run("bun", [target]);
+};
+
+/**
+ * `solid preview` — serve the production build locally: static assets
+ * from dist/client + the built server entry on one port (Bun.serve)
+ */
+export const preview = (port = Number(process.env.PORT) || 4321): CliResult => {
+	const entry = ["dist/server/entry-server.js", "dist/server/index.js"].find(
+		existsSync,
+	);
+	if (!entry) {
+		console.error("[solid] run `solid build` first — no dist/server entry");
+		return { code: 1 };
+	}
+	const staticDir = existsSync("dist/client") ? "dist/client" : "dist";
+	const code = `
+const mod = await import(${JSON.stringify(entry.replaceAll("\\\\", "/"))});
+const handler = mod.fetch ?? mod.default?.fetch ?? mod.default;
+const mime = {js:"text/javascript",css:"text/css",json:"application/json",svg:"image/svg+xml",png:"image/png",jpg:"image/jpeg",webp:"image/webp",woff2:"font/woff2",ico:"image/x-icon",webmanifest:"application/manifest+json"};
+Bun.serve({port:${port},async fetch(req){
+	const {pathname}=new URL(req.url);
+	const file=Bun.file(${JSON.stringify(staticDir)}+pathname);
+	if(pathname!=="/"&&await file.exists()){return new Response(file,{headers:{"Content-Type":mime[pathname.split(".").pop()]??"application/octet-stream"}})}
+	return handler(req);
+}});
+console.log("[solid] preview → http://localhost:${port}");`;
+	return run("bun", ["-e", code]);
+};
+
+/** `solid config` — print the resolved framework config (JSON) */
+export const printConfig = (): CliResult => {
+	try {
+		const candidate = [
+			"solid.config.ts",
+			"solid.config.mts",
+			"src/app.config.ts",
+		].find(existsSync);
+		if (!candidate) {
+			console.log("[solid] no solid.config.ts — using defaults");
+			return { code: 0 };
+		}
+		console.log(`[solid] ${candidate}`);
+		return run("bun", [
+			"-e",
+			`import c from "${candidate.replaceAll("\\", "/")}"; console.log(JSON.stringify(c, null, 2))`,
+		]);
+	} catch {
+		return { code: 1 };
+	}
+};
+
+/**
+ * `solid env` — diff `.env` against `.env.example` and print
+ * missing keys (never prints values)
+ */
+export const envCheck = (): CliResult => {
+	const parse = (file: string) =>
+		existsSync(file)
+			? readFileSync(file, "utf8")
+					.split("\n")
+					.filter((l) => l.trim() && !l.startsWith("#"))
+					.map((l) => l.split("=")[0].trim())
+			: [];
+	const example = parse(".env.example");
+	const actual = new Set(parse(".env"));
+	if (!example.length) {
+		console.log("[solid] no .env.example — nothing to check");
+		return { code: 0 };
+	}
+	const missing = example.filter((k) => !actual.has(k));
+	for (const k of missing) console.log(`  ! missing ${k}`);
+	console.log(
+		missing.length
+			? `env: ${missing.length} missing key(s)`
+			: "env: all keys set",
+	);
+	return { code: missing.length ? 1 : 0 };
+};
+
+/**
+ * `solid size [dir]` — report dist/ bundle sizes (post-build audit)
+ */
+export const size = (dir = "dist"): CliResult => {
+	if (!existsSync(dir)) {
+		console.log(`[solid] no ${dir} — run \`solid build\` first`);
+		return { code: 1 };
+	}
+	const files = listFiles(dir);
+	const rows = files
+		.map((f) => ({ file: f, bytes: statSync(f).size }))
+		.sort((a, b) => b.bytes - a.bytes);
+	for (const r of rows.slice(0, 20)) {
+		console.log(`  ${(r.bytes / 1024).toFixed(1).padStart(8)}kB  ${r.file}`);
+	}
+	const all = rows.reduce((s, r) => s + r.bytes, 0);
+	console.log(
+		`[solid] ${rows.length} file(s), ${(all / 1024).toFixed(1)}kB total`,
+	);
+	return { code: 0 };
+};

package/src/cli/routes.ts

@@ -0,0 +1,240 @@
+/**
+ * Route-ops commands — manifest generation, inspection, sitemap,
+ * rename, eject. All read `src/routes` (or a routesDir arg) from cwd.
+ */
+
+import { execSync } from "node:child_process";
+import {
+	existsSync,
+	mkdirSync,
+	readFileSync,
+	renameSync,
+	writeFileSync,
+} from "node:fs";
+import { dirname, join, relative } from "node:path";
+import {
+	buildRouteManifest,
+	generateApiTypes,
+	generateRouteTypes,
+	matchFileRoute,
+} from "#app/modules/file-routes";
+import type { CliResult } from "./infra";
+import { listFiles } from "./infra";
+
+export const generate = (routesDir = "src/routes"): CliResult => {
+	// Scan the routes dir and emit .solid/routes.d.ts — the RoutePath
+	// union consumed by route(), <Link to>, and useParams
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	const outDir = ".solid";
+	mkdirSync(outDir, { recursive: true });
+	const target = join(outDir, "routes.d.ts");
+	writeFileSync(target, generateRouteTypes(manifest));
+	const apiTarget = join(outDir, "api.d.ts");
+	writeFileSync(
+		apiTarget,
+		generateApiTypes(manifest, (file) => readFileSync(file, "utf8")),
+	);
+	console.log(`[solid] generated ${target} — ${manifest.length} route(s)`);
+	for (const route of manifest) {
+		console.log(`  ${route.path}  →  ${relative(".", route.file)}`);
+	}
+	return { code: 0 };
+};
+
+export const routes = (routesDir = "src/routes", json = false): CliResult => {
+	// Route tree inspector — path → file, kind, rule mode, middleware chain
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	if (json) {
+		console.log(JSON.stringify(manifest, null, 2));
+		return { code: 0 };
+	}
+	const rows = manifest.map((r) => ({
+		path: r.path,
+		kind: r.kind ?? "page",
+		mw: r.middleware?.length ? `+${r.middleware.length}mw` : "",
+		file: r.file,
+	}));
+	const width = Math.max(4, ...rows.map((r) => r.path.length));
+	for (const row of rows) {
+		console.log(
+			`  ${row.path.padEnd(width)}  ${row.kind.padEnd(4)}  ${row.mw.padEnd(4)} ${row.file}`,
+		);
+	}
+	const pages = rows.filter((r) => r.kind === "page").length;
+	const apis = rows.length - pages;
+	console.log(`${rows.length} route(s) — ${pages} page, ${apis} api`);
+	return { code: 0 };
+};
+
+/**
+ * `solid inspect <path>` — show which route matches a URL plus its
+ * layouts, middleware and file
+ */
+export const inspect = (
+	path = "/",
+	routesDir = "src/routes",
+	json = false,
+): CliResult => {
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	const match = matchFileRoute(path, manifest);
+	if (!match) {
+		console.log(`[solid] no route matches ${path}`);
+		return { code: 1 };
+	}
+	if (json) {
+		console.log(
+			JSON.stringify(
+				{
+					path,
+					file: match.route.file,
+					params: match.params,
+					layouts: match.route.layouts,
+					middleware: match.route.middleware ?? [],
+					loading: match.route.loading,
+					error: match.route.error,
+				},
+				null,
+				2,
+			),
+		);
+		return { code: 0 };
+	}
+	console.log(`${path} → ${match.route.file}`);
+	console.log(`  params   ${JSON.stringify(match.params)}`);
+	console.log(`  layouts  ${match.route.layouts.join(", ") || "—"}`);
+	console.log(`  mw       ${match.route.middleware?.join(", ") || "—"}`);
+	if (match.route.loading) console.log(`  loading  ${match.route.loading}`);
+	if (match.route.error) console.log(`  error    ${match.route.error}`);
+	return { code: 0 };
+};
+
+/**
+ * `solid manifest` — dump routes + kinds + files as JSON for ops tooling
+ */
+export const manifestDump = (routesDir = "src/routes"): CliResult => {
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	console.log(
+		JSON.stringify(
+			{
+				routes: manifest,
+				counts: {
+					total: manifest.length,
+					pages: manifest.filter(
+						(r) => r.kind !== "api" && r.kind !== "content",
+					).length,
+					api: manifest.filter((r) => r.kind === "api").length,
+					content: manifest.filter((r) => r.kind === "content").length,
+				},
+			},
+			null,
+			2,
+		),
+	);
+	return { code: 0 };
+};
+
+/**
+ * `solid diff` — routes added/removed vs HEAD (file-level, via git)
+ */
+export const diffRoutes = (routesDir = "src/routes"): CliResult => {
+	let atHead: string[];
+	try {
+		atHead = execSync(`git ls-files "${routesDir}"`, { encoding: "utf8" })
+			.split("\n")
+			.filter(Boolean);
+	} catch {
+		console.log("[solid] git diff unavailable (not a repo?)");
+		return { code: 1 };
+	}
+	const now = listFiles(routesDir);
+	const norm = (f: string) => f.replace(/\\/g, "/");
+	const nowSet = new Set(now.map(norm));
+	const headSet = new Set(atHead.map(norm));
+	const added = [...nowSet].filter((f) => !headSet.has(f));
+	const removed = [...headSet].filter((f) => !nowSet.has(f));
+	for (const f of added) console.log(`  + ${f}`);
+	for (const f of removed) console.log(`  - ${f}`);
+	console.log(
+		added.length || removed.length
+			? `diff: +${added.length} -${removed.length} route file(s)`
+			: "diff: no route changes",
+	);
+	return { code: 0 };
+};
+
+/**
+ * `solid sitemap <origin>` — sitemap.xml from static page routes
+ */
+export const sitemap = (
+	origin: string,
+	routesDir = "src/routes",
+	out = "public/sitemap.xml",
+): CliResult => {
+	if (!origin) {
+		console.log("usage: solid sitemap <origin> [--out <file>]");
+		return { code: 1 };
+	}
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	const urls = manifest
+		.filter((r) => !r.kind || r.kind === "page" || r.kind === "content")
+		.map((r) => r.path)
+		.filter((p) => !p.includes(":") && !p.includes("*"))
+		.sort();
+	const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls.map((u) => `  <url><loc>${origin.replace(/\/$/, "")}${u}</loc></url>`).join("\n")}
+</urlset>
+`;
+	mkdirSync(dirname(out), { recursive: true });
+	writeFileSync(out, xml);
+	console.log(`sitemap: ${urls.length} url(s) → ${out}`);
+	return { code: 0 };
+};
+
+/**
+ * `solid rename <from> <to>` — rename a route file inside src/routes
+ * and regenerate types
+ */
+export const renameRoute = (from: string, to: string): CliResult => {
+	if (!from || !to) {
+		console.log("usage: solid rename <from> <to>");
+		return { code: 1 };
+	}
+	const routesDir = "src/routes";
+	const src = join(routesDir, from);
+	const dest = join(routesDir, to);
+	if (!existsSync(src)) {
+		console.log(`[solid] not found: ${src}`);
+		return { code: 1 };
+	}
+	mkdirSync(join(dest, ".."), { recursive: true });
+	renameSync(src, dest);
+	generate(routesDir);
+	console.log(`[solid] ${from} → ${to} (types regenerated)`);
+	return { code: 0 };
+};
+
+/**
+ * `solid eject [outDir]` — dump the resolved route manifest and
+ * generated types to `.solid/eject/` for audit/debug
+ */
+export const eject = (outDir = ".solid/eject"): CliResult => {
+	const routesDir = "src/routes";
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	mkdirSync(outDir, { recursive: true });
+	writeFileSync(
+		join(outDir, "manifest.json"),
+		JSON.stringify(manifest, null, 2),
+	);
+	writeFileSync(join(outDir, "routes.d.ts"), generateRouteTypes(manifest));
+	console.log(
+		`[solid] ejected ${manifest.length} route(s) → ${outDir}/manifest.json + routes.d.ts`,
+	);
+	return { code: 0 };
+};

package/src/cli/scaffold.ts

@@ -0,0 +1,217 @@
+/**
+ * Scaffolding commands — `solid add`, `solid scaffold`, `solid test`,
+ * `solid adopt`. Writes starter files; never touches existing ones.
+ */
+
+import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { buildRouteManifest } from "#app/modules/file-routes";
+import type { CliResult } from "./infra";
+import { listFiles } from "./infra";
+
+const kebab = (name: string): string =>
+	name
+		.replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+		.replace(/[\s_]+/g, "-")
+		.toLowerCase();
+
+const routeTemplate = (name: string): string => `export default function ${name
+	.split("-")
+	.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+	.join("")}() {
+	return <section><h1>${name}</h1></section>;
+}
+`;
+
+const apiTemplate = `export const GET = () => Response.json({ ok: true });
+`;
+
+const middlewareTemplate = `import type { AppMiddleware } from "@wrikka/solid-framework/app";
+
+export default (async (ctx) => {
+	return undefined;
+}) satisfies AppMiddleware;
+`;
+
+/** `solid add route|api|middleware <name>` — scaffolds into src/routes */
+export const add = (type?: string, name?: string): CliResult => {
+	if (!type || !name || !["route", "api", "middleware"].includes(type)) {
+		console.log("usage: solid add route|api|middleware <name>");
+		return { code: 1 };
+	}
+	const file = kebab(name);
+	const dir = join("src", "routes");
+	const target =
+		type === "api"
+			? join(dir, `${file}.api.ts`)
+			: type === "middleware"
+				? join(
+						dir,
+						file === "middleware"
+							? "middleware.ts"
+							: join(file, "middleware.ts"),
+					)
+				: join(dir, `${file}.tsx`);
+	if (existsSync(target)) {
+		console.log(`  ✗ exists: ${target}`);
+		return { code: 1 };
+	}
+	mkdirSync(join(target, ".."), { recursive: true });
+	writeFileSync(
+		target,
+		type === "api"
+			? apiTemplate
+			: type === "middleware"
+				? middlewareTemplate
+				: routeTemplate(file),
+	);
+	console.log(`  + ${target}`);
+	return { code: 0 };
+};
+
+/**
+ * `solid scaffold <dir>` — minimal app: solid.config.tsx, entries,
+ * index route, package.json script hints
+ */
+export const scaffold = (dir: string): CliResult => {
+	if (!dir) {
+		console.log("usage: solid scaffold <dir>");
+		return { code: 1 };
+	}
+	const put = (rel: string, content: string) => {
+		const target = join(dir, rel);
+		mkdirSync(join(target, ".."), { recursive: true });
+		writeFileSync(target, content);
+	};
+	put(
+		"solid.config.tsx",
+		`import { defineApp } from "@wrikka/solid-framework/app";
+import { AppRoutes } from "@wrikka/solid-framework/app";
+
+export default defineApp({
+	render: () => <AppRoutes />,
+});
+`,
+	);
+	put(
+		"src/entry-server.tsx",
+		`import app from "../solid.config";
+import { serve } from "@wrikka/solid-framework/app";
+
+export default serve(app);
+`,
+	);
+	put(
+		"src/entry-client.tsx",
+		`import app from "../solid.config";
+import { hydrate } from "@wrikka/solid-framework/app";
+
+await hydrate(app);
+`,
+	);
+	put(
+		"src/routes/index.tsx",
+		`import { page } from "@wrikka/solid-framework/app";
+
+export default page({
+	load: () => ({ hello: "world" }),
+	head: () => ({ title: "Home" }),
+	component: ({ data }) => <main>{data()?.hello}</main>,
+});
+`,
+	);
+	console.log(`[solid] scaffolded ${dir} — run \`solid dev\``);
+	return { code: 0 };
+};
+
+const testTemplate = (
+	path: string,
+	file: string,
+): string => `import { describe, expect, it } from "vitest";
+import { buildRouteManifest, runFileRouteLoader } from "#app/modules/file-routes";
+
+const manifest = buildRouteManifest(["${file}"]);
+
+describe("${path}", () => {
+	it("matches the manifest", () => {
+		expect(manifest.some((r) => r.path === "${path}")).toBe(true);
+	});
+	it("runs the loader chain", async () => {
+		const data = await runFileRouteLoader(
+			"${path}",
+			manifest,
+			{ "${file}": await import("${file.replace("src/", "../src/")}") },
+			new Request("http://x${path}"),
+		);
+		expect(data).toBeDefined();
+	});
+});
+`;
+
+/**
+ * `solid test` — scaffold a vitest file per manifest route into
+ * test/routes/ (skips files that already exist)
+ */
+export const scaffoldTests = (routesDir = "src/routes"): CliResult => {
+	const files = listFiles(routesDir);
+	const manifest = buildRouteManifest(files, routesDir);
+	const outDir = join("test", "routes");
+	mkdirSync(outDir, { recursive: true });
+	let created = 0;
+	for (const route of manifest) {
+		if (route.kind === "api") continue;
+		const name =
+			route.path === "/"
+				? "index"
+				: route.path.replace(/[^\w]+/g, "_").replace(/^_|_$/g, "");
+		const target = join(outDir, `${name}.test.ts`);
+		if (existsSync(target)) continue;
+		writeFileSync(target, testTemplate(route.path, route.file));
+		created++;
+	}
+	console.log(`[solid] scaffolded ${created} test(s) into ${outDir}`);
+	return { code: 0 };
+};
+
+/**
+ * `solid adopt [dir]` — scan an existing app and print the scaffold
+ * needed to adopt the framework (routes dir, config, entries)
+ */
+export const adopt = (dir = ".", write = false): CliResult => {
+	console.log(`[solid] adopt ${dir}`);
+	const routeDirs = [
+		"src/routes",
+		"src/pages",
+		"pages",
+		"app",
+		"routes",
+	].filter((d) => existsSync(join(dir, d)));
+	if (routeDirs.length > 0) {
+		console.log(`  routes detected: ${routeDirs.join(", ")}`);
+		if (!routeDirs.includes("src/routes"))
+			console.log("  → move/rename to src/routes (or set routesDir in config)");
+	} else {
+		console.log("  + create src/routes/ with page() modules");
+	}
+	if (
+		!["solid.config.tsx", "solid.config.ts"].some((f) =>
+			existsSync(join(dir, f)),
+		)
+	) {
+		console.log(
+			"  + create solid.config.tsx → export default defineApp({ render })",
+		);
+	}
+	if (!existsSync(join(dir, "src/entry-server.tsx")))
+		console.log("  + create src/entry-server.tsx → export default serve(app)");
+	if (!existsSync(join(dir, "src/entry-client.tsx")))
+		console.log("  + create src/entry-client.tsx → await hydrate(app)");
+	if (!existsSync(join(dir, "vite.config.ts")))
+		console.log("  + create vite.config.ts with the solidFramework() plugin");
+	if (write) {
+		scaffold(dir);
+		console.log("  → scaffold files written (--write)");
+	}
+	console.log("  then: solid generate && solid test-nav && solid dev");
+	return { code: 0 };
+};

package/src/devtools/App.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@wrikka/ui";
+import { createSignal } from "solid-js";
+
+export default function App() {
+	const [count, setCount] = createSignal(0);
+
+	return (
+		<div class="p-8">
+			<h1 class="text-2xl font-bold mb-4">SolidJS Devtools</h1>
+			<p class="mb-4">Count: {count()}</p>
+			<Button onClick={() => setCount(count() + 1)}>Increment</Button>
+		</div>
+	);
+}

package/src/devtools/adapters/connector.ts

@@ -0,0 +1,23 @@
+import type { IDevtoolsConnector } from "#devtools/modules/devtools/ports";
+
+/**
+ * Connector adapter for devtools protocol
+ * Handles I/O operations for devtools communication
+ * Implements IDevtoolsConnector port interface
+ */
+export function createConnector(): IDevtoolsConnector {
+	return {
+		async connect() {
+			// Implementation - connect to devtools backend
+		},
+		disconnect() {
+			// Implementation - disconnect from devtools backend
+		},
+		send(_message: unknown) {
+			// Implementation - send message to devtools backend
+		},
+		onMessage(_handler: (message: unknown) => void) {
+			// Implementation - register message handler
+		},
+	};
+}

package/src/devtools/adapters/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Adapters layer exports
+ */
+export * from "./connector";

package/src/devtools/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Devtools Module
+ * Clean Architecture implementation for SolidJS devtools
+ *
+ * Structure:
+ * - modules/               - Feature modules (Vertical Slice Architecture)
+ *   - component-inspector/ - Component tree inspection feature
+ *   - devtools/            - Devtools panel feature
+ *   - timeline/            - Timeline event tracking feature
+ * - shared/                - Shared kernel (types, errors, utils)
+ * - adapters/              - External systems integration
+ * - presentation/          - Entry points (composables, components)
+ */
+
+// Adapters exports (internal barrel files - acceptable exception)
+export * from "./adapters";
+// Module exports (Vertical Slice Architecture)
+export * from "./modules/component-inspector";
+export * from "./modules/devtools";
+export * from "./modules/timeline";
+
+// Presentation exports
+export { DevtoolsPanel, default } from "./presentation/DevtoolsPanel";
+
+// Shared kernel exports (internal barrel files - acceptable exception)
+export * from "./shared";

package/src/devtools/modules/component-inspector/application/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Component inspector application layer
+ */
+export * from "./usecases";