@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/router/modules/routing-core/domain/validators/index.ts

@@ -0,0 +1,28 @@
+import type { RouteParams } from "../../../../shared/types";
+
+export const validateRoutePath = (path: string): boolean => {
+	// Basic validation for route path
+	if (!path || typeof path !== "string") return false;
+	if (!path.startsWith("/")) return false;
+
+	// Check for invalid characters
+	const invalidChars = /[<>"{}|\\^`]/;
+	if (invalidChars.test(path)) return false;
+
+	return true;
+};
+
+export const validateRouteParams = (params: RouteParams): boolean => {
+	if (!params || typeof params !== "object") return false;
+
+	for (const key in params) {
+		if (typeof key !== "string") return false;
+		if (key.startsWith(":")) return false; // Param keys shouldn't start with :
+	}
+
+	return true;
+};
+
+export const validateRouteComponent = (component: unknown): boolean => {
+	return typeof component === "function";
+};

package/src/router/modules/routing-core/index.ts

@@ -0,0 +1,8 @@
+// Public API exports for routing-core module
+
+export * from "./application/usecases";
+export * from "./domain/models";
+export * from "./domain/operations";
+export * from "./domain/validators";
+export * from "./ports";
+export * from "./types";

package/src/router/modules/routing-core/ports/index.ts

@@ -0,0 +1,16 @@
+import type { Result } from "../../../shared/types";
+import type { MatchResult, RouteTree } from "../types";
+
+// Port for route matching (dependency injection point)
+export interface IRouteMatcher {
+	match(routes: RouteTree, path: string): Result<MatchResult>;
+}
+
+// Port for route storage (dependency injection point)
+export interface IRouteStorage {
+	getAll(): RouteTree;
+	add(route: RouteTree[number]): RouteTree;
+	remove(path: string): RouteTree;
+	update(path: string, route: RouteTree[number]): RouteTree;
+	find(path: string): RouteTree[number] | undefined;
+}

package/src/router/modules/routing-core/types/index.ts

@@ -0,0 +1,25 @@
+import type {
+	NavigationEvent,
+	RouteConfig,
+	RouteMatch,
+	RouteParams,
+	RouterState,
+	SearchParams,
+} from "../../../shared/types/routing";
+
+export type {
+	NavigationEvent,
+	RouteConfig,
+	RouteMatch,
+	RouteParams,
+	RouterState,
+	SearchParams,
+};
+
+// Core routing types
+export type RouteTree = RouteConfig[];
+
+export type MatchResult = RouteMatch;
+
+// Domain types
+export type { Match, Route } from "../domain/models";

package/src/router/presentation/index.ts

@@ -0,0 +1 @@
+export * from "./solid";

package/src/router/presentation/solid/components/index.ts

@@ -0,0 +1 @@
+export * from "./router";

package/src/router/presentation/solid/components/route-visualizer-details.tsx

@@ -0,0 +1,37 @@
+import { Button, Form, FormField, Input } from "@wrikka/ui";
+import { createSignal, Show } from "solid-js";
+import type { RouteDetailsProps } from "./route-visualizer-types";
+
+export function RouteDetails(props: RouteDetailsProps) {
+	const [path, setPath] = createSignal(props.route?.path || "");
+
+	return (
+		<div class="route-details">
+			<h4>Route Details</h4>
+			<Show when={props.route}>
+				<Form class="route-details-form">
+					<FormField label="Path:" htmlFor="route-path">
+						<Input
+							id="route-path"
+							type="text"
+							value={path()}
+							onInput={(e) => setPath(e.currentTarget.value)}
+						/>
+					</FormField>
+					<div class="route-details-actions">
+						<Button
+							type="button"
+							onClick={() => {
+								if (props.route) {
+									props.onUpdate({ ...props.route, path: path() });
+								}
+							}}
+						>
+							Save
+						</Button>
+					</div>
+				</Form>
+			</Show>
+		</div>
+	);
+}

package/src/router/presentation/solid/components/route-visualizer-helpers.ts

@@ -0,0 +1,56 @@
+import type { RouteConfig } from "../../../shared/types";
+import type { RouteNode } from "./route-visualizer-types";
+
+export const buildRouteTree = (routes: RouteConfig[]): RouteNode[] => {
+	const nodeMap = new Map<string, RouteNode>();
+	const rootNodes: RouteNode[] = [];
+
+	for (const route of routes) {
+		const node: RouteNode = {
+			...route,
+			id: route.path,
+			children: [],
+			expanded: false,
+		};
+		nodeMap.set(route.path, node);
+	}
+
+	for (const route of routes) {
+		const node = nodeMap.get(route.path);
+		if (!node) continue;
+
+		const parentPath = getParentPath(route.path);
+		const parentNode = nodeMap.get(parentPath);
+
+		if (parentNode) {
+			parentNode.children.push(node);
+		} else {
+			rootNodes.push(node);
+		}
+	}
+
+	return rootNodes;
+};
+
+export const getParentPath = (path: string): string => {
+	const segments = path.split("/").filter(Boolean);
+	if (segments.length <= 1) return "";
+	return `/${segments.slice(0, -1).join("/")}`;
+};
+
+export const reorderRoutes = (
+	routes: RouteConfig[],
+	sourceId: string,
+	targetId: string,
+): RouteConfig[] => {
+	const sourceIndex = routes.findIndex((r) => r.path === sourceId);
+	const targetIndex = routes.findIndex((r) => r.path === targetId);
+
+	if (sourceIndex === -1 || targetIndex === -1) return routes;
+
+	const newRoutes = [...routes];
+	const [removed] = newRoutes.splice(sourceIndex, 1);
+	newRoutes.splice(targetIndex, 0, removed);
+
+	return newRoutes;
+};

package/src/router/presentation/solid/components/route-visualizer-tree.tsx

@@ -0,0 +1,99 @@
+import { For, Show } from "solid-js";
+import type {
+	RouteNodeItemProps,
+	RouteTreeProps,
+} from "./route-visualizer-types";
+
+export function RouteTree(props: RouteTreeProps) {
+	return (
+		<ul class="route-tree">
+			<For each={props.nodes}>
+				{(node) => (
+					<RouteNodeItem
+						node={node}
+						selectedRoute={props.selectedRoute}
+						onSelect={props.onSelect}
+						onToggleExpand={props.onToggleExpand}
+						onDragStart={props.onDragStart}
+						onDragOver={props.onDragOver}
+						onDrop={props.onDrop}
+						onDelete={props.onDelete}
+						draggedRoute={props.draggedRoute}
+					/>
+				)}
+			</For>
+		</ul>
+	);
+}
+
+function RouteNodeItem(props: RouteNodeItemProps) {
+	const hasChildren = props.node.children.length > 0;
+
+	return (
+		<li
+			class={`route-node ${props.selectedRoute === props.node.id ? "selected" : ""} ${props.draggedRoute === props.node.id ? "dragging" : ""}`}
+			draggable
+			onDragStart={() => props.onDragStart(props.node.id)}
+			onDragOver={(e) => props.onDragOver(e, props.node.id)}
+			onDrop={(e) => props.onDrop(e, props.node.id)}
+		>
+			<div class="route-node-content">
+				<Show when={hasChildren}>
+					<button
+						type="button"
+						class="route-node-expand"
+						onClick={(e) => {
+							e.stopPropagation();
+							props.onToggleExpand(props.node.id);
+						}}
+					>
+						{props.node.expanded ? "▼" : "▶"}
+					</button>
+				</Show>
+				<button
+					type="button"
+					class="route-node-main"
+					onClick={() => props.onSelect(props.node.id)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							props.onSelect(props.node.id);
+						}
+					}}
+				>
+					<span class="route-node-path">{props.node.path}</span>
+				</button>
+				<button
+					type="button"
+					class="route-node-delete"
+					onClick={(e) => {
+						e.stopPropagation();
+						props.onDelete(props.node.path);
+					}}
+				>
+					×
+				</button>
+			</div>
+
+			<Show when={hasChildren && props.node.expanded}>
+				<ul class="route-node-children">
+					<For each={props.node.children}>
+						{(child) => (
+							<RouteNodeItem
+								node={child}
+								selectedRoute={props.selectedRoute}
+								onSelect={props.onSelect}
+								onToggleExpand={props.onToggleExpand}
+								onDragStart={props.onDragStart}
+								onDragOver={props.onDragOver}
+								onDrop={props.onDrop}
+								onDelete={props.onDelete}
+								draggedRoute={props.draggedRoute}
+							/>
+						)}
+					</For>
+				</ul>
+			</Show>
+		</li>
+	);
+}

package/src/router/presentation/solid/components/route-visualizer-types.ts

@@ -0,0 +1,41 @@
+import type { RouteConfig } from "../../../shared/types";
+
+export interface RouteVisualizerProps {
+	routes: RouteConfig[];
+	onRoutesChange: (routes: RouteConfig[]) => void;
+}
+
+export interface RouteNode extends RouteConfig {
+	id: string;
+	children: RouteNode[];
+	expanded: boolean;
+}
+
+export interface RouteTreeProps {
+	nodes: RouteNode[];
+	selectedRoute: string | null;
+	onSelect: (id: string) => void;
+	onToggleExpand: (id: string) => void;
+	onDragStart: (id: string) => void;
+	onDragOver: (event: DragEvent, id: string) => void;
+	onDrop: (event: DragEvent, id: string) => void;
+	onDelete: (path: string) => void;
+	draggedRoute: string | null;
+}
+
+export interface RouteNodeItemProps {
+	node: RouteNode;
+	selectedRoute: string | null;
+	onSelect: (id: string) => void;
+	onToggleExpand: (id: string) => void;
+	onDragStart: (id: string) => void;
+	onDragOver: (event: DragEvent, id: string) => void;
+	onDrop: (event: DragEvent, id: string) => void;
+	onDelete: (path: string) => void;
+	draggedRoute: string | null;
+}
+
+export interface RouteDetailsProps {
+	route: RouteConfig | undefined;
+	onUpdate: (route: RouteConfig | undefined) => void;
+}

package/src/router/presentation/solid/components/route-visualizer.tsx

@@ -0,0 +1,110 @@
+import { Button } from "@wrikka/ui";
+import { createSignal, Show } from "solid-js";
+import type { RouteConfig } from "../../../shared/types";
+import { RouteDetails } from "./route-visualizer-details";
+import { buildRouteTree, reorderRoutes } from "./route-visualizer-helpers";
+import { RouteTree } from "./route-visualizer-tree";
+import type { RouteNode, RouteVisualizerProps } from "./route-visualizer-types";
+
+export function RouteVisualizer(props: RouteVisualizerProps) {
+	const [tree, setTree] = createSignal<RouteNode[]>(
+		buildRouteTree(props.routes),
+	);
+	const [selectedRoute, setSelectedRoute] = createSignal<string | null>(null);
+	const [draggedRoute, setDraggedRoute] = createSignal<string | null>(null);
+
+	const toggleExpand = (nodeId: string): void => {
+		setTree((prev) => {
+			const toggleNode = (nodes: RouteNode[]): RouteNode[] => {
+				return nodes.map((node) => {
+					if (node.id === nodeId) {
+						return { ...node, expanded: !node.expanded };
+					}
+					if (node.children.length > 0) {
+						return { ...node, children: toggleNode(node.children) };
+					}
+					return node;
+				});
+			};
+			return toggleNode(prev);
+		});
+	};
+
+	const handleDragStart = (nodeId: string): void => {
+		setDraggedRoute(nodeId);
+	};
+
+	const handleDragOver = (event: DragEvent): void => {
+		event.preventDefault();
+	};
+
+	const handleDrop = (event: DragEvent, targetId: string): void => {
+		event.preventDefault();
+		const sourceId = draggedRoute();
+		if (!sourceId || sourceId === targetId) return;
+
+		const newRoutes = reorderRoutes(props.routes, sourceId, targetId);
+		props.onRoutesChange(newRoutes);
+		setDraggedRoute(null);
+	};
+
+	const addRoute = (path: string): void => {
+		const newRoute: RouteConfig = {
+			path,
+			component: () => Promise.resolve(() => null),
+		};
+		props.onRoutesChange([...props.routes, newRoute]);
+	};
+
+	const deleteRoute = (path: string): void => {
+		props.onRoutesChange(props.routes.filter((r) => r.path !== path));
+	};
+
+	return (
+		<div class="route-visualizer">
+			<div class="route-visualizer-header">
+				<h3>Route Tree</h3>
+				<Button
+					type="button"
+					onClick={() => addRoute("/new-route")}
+					class="route-visualizer-add-btn"
+					variant="primary"
+					size="sm"
+				>
+					+ Add Route
+				</Button>
+			</div>
+
+			<div class="route-visualizer-tree">
+				<RouteTree
+					nodes={tree()}
+					selectedRoute={selectedRoute()}
+					onSelect={setSelectedRoute}
+					onToggleExpand={toggleExpand}
+					onDragStart={handleDragStart}
+					onDragOver={(_event, _id) => handleDragOver(_event)}
+					onDrop={handleDrop}
+					onDelete={deleteRoute}
+					draggedRoute={draggedRoute()}
+				/>
+			</div>
+
+			<Show when={selectedRoute()} fallback={<div />}>
+				{(routeId) => (
+					<RouteDetails
+						route={props.routes.find((r) => r.path === routeId())}
+						onUpdate={(updatedRoute) => {
+							if (updatedRoute) {
+								props.onRoutesChange(
+									props.routes.map((r) =>
+										r.path === updatedRoute.path ? updatedRoute : r,
+									),
+								);
+							}
+						}}
+					/>
+				)}
+			</Show>
+		</div>
+	);
+}

package/src/router/presentation/solid/components/router.ts

@@ -0,0 +1,82 @@
+import {
+	createRouteState,
+	createSearchParams,
+} from "#router/presentation/solid/signals";
+import { createNavigationService } from "../../../modules/navigation/application";
+import { createRouteMatcher } from "../../../modules/routing/application";
+import type { RouteConfig } from "../../../shared/types";
+
+/**
+ * Simplified Router - 3x less code than TanStack Router
+ *
+ * @example
+ * ```typescript
+ * const router = createRouter(routes);
+ * ```
+ */
+export const createRouter = (routes: RouteConfig[]) => {
+	const routeState = createRouteState();
+	const searchParams = createSearchParams();
+	const matcher = createRouteMatcher(routes);
+	const navService = createNavigationService();
+
+	// Auto-match current path
+	const currentPath = window.location.pathname;
+	const matchResult = matcher.match(currentPath);
+
+	if (matchResult.success && matchResult.data) {
+		routeState.navigate(matchResult.data);
+	}
+
+	return {
+		routeState,
+		searchParams,
+		navigate: (to: string) => navService.navigate(to),
+		matcher,
+	};
+};
+
+/**
+ * Simplified Route configuration
+ *
+ * @example
+ * ```typescript
+ * const route = createRouteConfig("/users/:id", UserPage);
+ * ```
+ */
+export const createRouteConfig = (
+	path: string,
+	component?: () => unknown,
+	loaders?: () => Promise<unknown>,
+): RouteConfig => {
+	const config: RouteConfig = {
+		path,
+	};
+	if (component) config.component = component;
+	if (loaders) config.loaders = loaders;
+	return config;
+};
+
+/**
+ * Simplified Link utility
+ *
+ * @example
+ * ```typescript
+ * const linkProps = createLinkProps("/users/123", () => {});
+ * ```
+ */
+export const createLinkProps = (to: string, onClick?: () => void) => {
+	const handleClick = (e: MouseEvent) => {
+		e.preventDefault();
+		if (onClick) {
+			onClick();
+		}
+		window.history.pushState({}, "", to);
+		window.dispatchEvent(new PopStateEvent("popstate"));
+	};
+
+	return {
+		href: to,
+		onClick: handleClick,
+	};
+};

package/src/router/presentation/solid/devtools/index.ts

@@ -0,0 +1,2 @@
+export { RouterDevToolsPanel } from "./router-devtools-panel";
+export * from "./router-inspector";

package/src/router/presentation/solid/devtools/router-devtools-panel.tsx

@@ -0,0 +1,141 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@wrikka/ui";
+import { createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import type { RouteMatch, RouterState } from "../../../shared/types";
+import { createRouterInspector } from "./router-inspector";
+
+interface RouterDevToolsPanelProps {
+	inspector?: ReturnType<typeof createRouterInspector>;
+}
+
+export function RouterDevToolsPanel(props: RouterDevToolsPanelProps) {
+	const inspector = props.inspector || createRouterInspector();
+	const [currentRoute, setCurrentRoute] = createSignal<RouteMatch | null>(null);
+	const [state, setState] = createSignal<RouterState>(inspector.inspectState());
+	const [history, setHistory] = createSignal<RouteMatch[]>([]);
+
+	let unsubscribe: (() => void) | null = null;
+
+	onMount(() => {
+		// Track navigation changes
+		unsubscribe = inspector.trackNavigation((route) => {
+			setCurrentRoute(route);
+			setHistory((prev) => [...prev.slice(-9), route].slice(-10)); // Keep last 10
+		});
+
+		// Initial state
+		setCurrentRoute(inspector.inspectRoute());
+		setState(inspector.inspectState());
+	});
+
+	onCleanup(() => {
+		if (unsubscribe) unsubscribe();
+	});
+
+	return (
+		<Tabs defaultValue="routes" class="router-devtools-panel">
+			<div class="router-devtools-header">
+				<h3>Router DevTools</h3>
+				<TabsList class="router-devtools-tabs">
+					<TabsTrigger value="routes">Routes</TabsTrigger>
+					<TabsTrigger value="state">State</TabsTrigger>
+					<TabsTrigger value="history">History</TabsTrigger>
+				</TabsList>
+			</div>
+
+			<div class="router-devtools-content">
+				<TabsContent value="routes" class="router-devtools-tab-content">
+					<RoutesTab currentRoute={currentRoute()} />
+				</TabsContent>
+
+				<TabsContent value="state" class="router-devtools-tab-content">
+					<StateTab state={state()} />
+				</TabsContent>
+
+				<TabsContent value="history" class="router-devtools-tab-content">
+					<HistoryTab history={history()} />
+				</TabsContent>
+			</div>
+		</Tabs>
+	);
+}
+
+function RoutesTab(props: { currentRoute: RouteMatch | null }) {
+	return (
+		<div class="router-devtools-tab-content">
+			<Show
+				when={props.currentRoute}
+				keyed
+				fallback={<div class="router-devtools-empty">No active route</div>}
+			>
+				{(route) => (
+					<div class="router-devtools-route-info">
+						<div class="router-devtools-route-path">
+							<strong>Path:</strong> {route.path}
+						</div>
+						<div class="router-devtools-route-params">
+							<strong>Params:</strong>
+							<pre>{JSON.stringify(route.params, null, 2)}</pre>
+						</div>
+						<div class="router-devtools-route-search">
+							<strong>Search:</strong>
+							<pre>{JSON.stringify(route.searchParams, null, 2)}</pre>
+						</div>
+					</div>
+				)}
+			</Show>
+		</div>
+	);
+}
+
+function StateTab(props: { state: RouterState }) {
+	return (
+		<div class="router-devtools-tab-content">
+			<div class="router-devtools-state-info">
+				<div class="router-devtools-state-item">
+					<strong>Loading:</strong> {props.state.isLoading ? "Yes" : "No"}
+				</div>
+				<div class="router-devtools-state-item">
+					<strong>Error:</strong>
+					<Show when={props.state.error} keyed fallback="None">
+						{(error) => (
+							<span class="router-devtools-error">{error.message}</span>
+						)}
+					</Show>
+				</div>
+				<div class="router-devtools-state-item">
+					<strong>Current Route:</strong>
+					<Show when={props.state.currentRoute} keyed fallback="None">
+						{(route) => <span>{route.path}</span>}
+					</Show>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function HistoryTab(props: { history: RouteMatch[] }) {
+	return (
+		<div class="router-devtools-tab-content">
+			<Show
+				when={props.history.length > 0}
+				keyed
+				fallback={
+					<div class="router-devtools-empty">No navigation history</div>
+				}
+			>
+				<div class="router-devtools-history-list">
+					<For each={props.history}>
+						{(route, index) => (
+							<div class="router-devtools-history-item">
+								<span class="router-devtools-history-index">
+									{index() + 1}.
+								</span>
+								<span class="router-devtools-history-path">{route.path}</span>
+							</div>
+						)}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+}