@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/devtools/modules/timeline/application/usecases/timeline.ts

@@ -0,0 +1,61 @@
+import type { TimelineEvent } from "#devtools/modules/timeline/domain";
+import {
+	addEvent,
+	clearTimeline,
+	createTimelineEvent,
+	filterEventsByName,
+	filterEventsByType,
+	getEventsWithDuration,
+	getTotalDuration,
+} from "#devtools/modules/timeline/domain";
+
+/**
+ * Record a timeline event
+ */
+export const recordTimelineEvent = (
+	events: readonly TimelineEvent[],
+	type: string,
+	name: string,
+	options?: {
+		duration?: number;
+		metadata?: Readonly<Record<string, unknown>>;
+	},
+): readonly TimelineEvent[] => {
+	const event = createTimelineEvent(type, name, options);
+	return addEvent(events, event);
+};
+
+/**
+ * Clear all timeline events
+ */
+export const clearAllEvents = (): readonly TimelineEvent[] => clearTimeline();
+
+/**
+ * Filter events by type
+ */
+export const filterByType = (
+	events: readonly TimelineEvent[],
+	type: string,
+): readonly TimelineEvent[] => filterEventsByType(events, type);
+
+/**
+ * Filter events by name
+ */
+export const filterByName = (
+	events: readonly TimelineEvent[],
+	name: string,
+): readonly TimelineEvent[] => filterEventsByName(events, name);
+
+/**
+ * Get events with duration
+ */
+export const getEventsWithDurationOnly = (
+	events: readonly TimelineEvent[],
+): readonly TimelineEvent[] => getEventsWithDuration(events);
+
+/**
+ * Calculate total duration
+ */
+export const calculateTotalDuration = (
+	events: readonly TimelineEvent[],
+): number => getTotalDuration(events);

package/src/devtools/modules/timeline/application/usecases/useTimeline.ts

@@ -0,0 +1,37 @@
+import { createSignal } from "solid-js";
+import type { TimelineEvent } from "#devtools/modules/timeline/domain";
+import {
+	addEvent,
+	clearTimeline as clearTimelineOp,
+	createTimelineEvent,
+} from "#devtools/modules/timeline/domain";
+
+/**
+ * Composable for recording timeline events
+ * Presentation layer - SolidJS reactive state management
+ */
+export function useTimeline() {
+	const [events, setEvents] = createSignal<readonly TimelineEvent[]>([]);
+
+	function recordEvent(
+		type: string,
+		name: string,
+		options?: {
+			duration?: number;
+			metadata?: Readonly<Record<string, unknown>>;
+		},
+	) {
+		const event = createTimelineEvent(type, name, options);
+		setEvents((prev) => addEvent(prev, event));
+	}
+
+	function clearTimeline() {
+		setEvents(clearTimelineOp());
+	}
+
+	return {
+		events,
+		recordEvent,
+		clearTimeline,
+	};
+}

package/src/devtools/modules/timeline/domain/events/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Timeline domain events
+ */
+export * from "./timeline-events";

package/src/devtools/modules/timeline/domain/events/timeline-events.ts

@@ -0,0 +1,34 @@
+/**
+ * Domain events for timeline
+ */
+export interface TimelineClearedEvent {
+	readonly type: "TIMELINE_CLEARED";
+	readonly timestamp: number;
+}
+
+export interface EventRecordedEvent {
+	readonly type: "EVENT_RECORDED";
+	readonly timestamp: number;
+	readonly eventType: string;
+	readonly eventName: string;
+}
+
+export type TimelineDomainEvent = TimelineClearedEvent | EventRecordedEvent;
+
+export const createTimelineClearedEvent = (
+	timestamp: number,
+): TimelineClearedEvent => ({
+	type: "TIMELINE_CLEARED",
+	timestamp,
+});
+
+export const createEventRecordedEvent = (
+	eventType: string,
+	eventName: string,
+	timestamp: number,
+): EventRecordedEvent => ({
+	type: "EVENT_RECORDED",
+	timestamp,
+	eventType,
+	eventName,
+});

package/src/devtools/modules/timeline/domain/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Timeline domain layer
+ */
+
+export * from "./events";
+export * from "./models";
+export * from "./operations";

package/src/devtools/modules/timeline/domain/models/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Timeline domain models
+ */
+export * from "./timeline-event";

package/src/devtools/modules/timeline/domain/models/timeline-event.ts

@@ -0,0 +1,27 @@
+/**
+ * Timeline event model
+ */
+export interface TimelineEvent {
+	readonly type: string;
+	readonly name: string;
+	readonly duration?: number;
+	readonly metadata?: Readonly<Record<string, unknown>>;
+	readonly timestamp: number;
+}
+
+export const createTimelineEvent = (
+	type: string,
+	name: string,
+	options?: {
+		duration?: number;
+		metadata?: Readonly<Record<string, unknown>>;
+		timestamp?: number;
+	},
+	now: number = Date.now(),
+): TimelineEvent => ({
+	type,
+	name,
+	duration: options?.duration,
+	metadata: options?.metadata,
+	timestamp: options?.timestamp ?? now,
+});

package/src/devtools/modules/timeline/domain/operations/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Timeline domain operations
+ */
+export * from "./timeline-operations";

package/src/devtools/modules/timeline/domain/operations/timeline-operations.ts

@@ -0,0 +1,28 @@
+import type { TimelineEvent } from "../models";
+
+/**
+ * Pure operations for timeline events
+ */
+export const addEvent = (
+	events: readonly TimelineEvent[],
+	event: TimelineEvent,
+): readonly TimelineEvent[] => [...events, event];
+
+export const clearTimeline = (): readonly TimelineEvent[] => [];
+
+export const filterEventsByType = (
+	events: readonly TimelineEvent[],
+	type: string,
+): readonly TimelineEvent[] => events.filter((e) => e.type === type);
+
+export const filterEventsByName = (
+	events: readonly TimelineEvent[],
+	name: string,
+): readonly TimelineEvent[] => events.filter((e) => e.name === name);
+
+export const getEventsWithDuration = (
+	events: readonly TimelineEvent[],
+): readonly TimelineEvent[] => events.filter((e) => e.duration !== undefined);
+
+export const getTotalDuration = (events: readonly TimelineEvent[]): number =>
+	events.reduce((sum, e) => sum + (e.duration ?? 0), 0);

package/src/devtools/modules/timeline/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Timeline module
+ * Vertical slice for timeline event tracking feature
+ */
+
+export * from "./application";
+export * from "./domain";

package/src/devtools/presentation/DevtoolsPanel.tsx

@@ -0,0 +1,80 @@
+import {
+	Badge,
+	Card,
+	CardContent,
+	CardHeader,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@wrikka/ui";
+import { type Component, createSignal, For, Show } from "solid-js";
+import { getSelectedNode } from "#devtools/modules/component-inspector/application";
+import { useDevtools } from "#devtools/modules/devtools/application";
+import { useTimeline } from "#devtools/modules/timeline/application";
+import { ComponentTreeView } from "./components/ComponentTreeView";
+import { StateInspector } from "./components/StateInspector";
+import { TimelineView } from "./components/TimelineView";
+import { useComponentInspector } from "./composables/useComponentInspector";
+
+type Tab = "components" | "timeline" | "state";
+
+export const DevtoolsPanel: Component = () => {
+	const { isPanelOpen, isConnected } = useDevtools();
+	const { events, clearTimeline } = useTimeline();
+	const { tree, selectNode, toggleExpansion, isExpanded } =
+		useComponentInspector();
+	const [activeTab, setActiveTab] = createSignal<Tab>("components");
+
+	const selectedNode = () => getSelectedNode(tree());
+
+	return (
+		<Show when={isPanelOpen()}>
+			<Card class="solii-devtools-panel">
+				<CardHeader class="solii-devtools-header">
+					<h3>SoLi Devtools</h3>
+					<Show
+						when={isConnected()}
+						fallback={<Badge class="disconnected">Disconnected</Badge>}
+					>
+						<Badge class="connected">Connected</Badge>
+					</Show>
+				</CardHeader>
+				<Tabs
+					class="solii-devtools-tabs"
+					value={activeTab()}
+					onValueChange={(value) => setActiveTab(value as Tab)}
+				>
+					<TabsList>
+						<For each={["components", "timeline", "state"] as Tab[]}>
+							{(tab) => (
+								<TabsTrigger class="solii-tab" value={tab}>
+									{tab.charAt(0).toUpperCase() + tab.slice(1)}
+								</TabsTrigger>
+							)}
+						</For>
+					</TabsList>
+					<CardContent class="solii-devtools-content">
+						<TabsContent value="components">
+							<ComponentTreeView
+								tree={() => tree().root}
+								selectedNodeId={() => tree().selectedNodeId}
+								onSelectNode={selectNode}
+								onToggleExpansion={toggleExpansion}
+								isExpanded={isExpanded}
+							/>
+						</TabsContent>
+						<TabsContent value="timeline">
+							<TimelineView events={events} onClear={clearTimeline} />
+						</TabsContent>
+						<TabsContent value="state">
+							<StateInspector selectedNode={selectedNode} />
+						</TabsContent>
+					</CardContent>
+				</Tabs>
+			</Card>
+		</Show>
+	);
+};
+
+export default DevtoolsPanel;

package/src/devtools/presentation/components/ComponentTreeView.tsx

@@ -0,0 +1,79 @@
+import { Button, Card, CardContent, CardHeader, ScrollArea } from "@wrikka/ui";
+import type { Component } from "solid-js";
+import { For, Show } from "solid-js";
+import type { ComponentNode } from "#devtools/modules/component-inspector/domain";
+
+interface ComponentTreeViewProps {
+	tree: () => ComponentNode | null;
+	selectedNodeId: () => string | null;
+	onSelectNode: (nodeId: string) => void;
+	onToggleExpansion: (nodeId: string) => void;
+	isExpanded: (nodeId: string) => boolean;
+}
+
+function renderNode(
+	node: ComponentNode,
+	props: ComponentTreeViewProps,
+	depth: number = 0,
+) {
+	const isSelected = () => props.selectedNodeId() === node.id;
+	const expanded = () => props.isExpanded(node.id);
+
+	return (
+		<div class="solii-component-node" style={`padding-left: ${depth * 16}px`}>
+			<Button
+				variant="ghost"
+				class={`solii-node-header ${isSelected() ? "selected" : ""}`}
+				onClick={() => props.onSelectNode(node.id)}
+				onKeyDown={(e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						props.onSelectNode(node.id);
+					}
+				}}
+			>
+				<Show when={node.children.length > 0}>
+					<Button
+						variant="ghost"
+						size="icon"
+						class="solii-expand-toggle"
+						onClick={(e) => {
+							e.stopPropagation();
+							props.onToggleExpansion(node.id);
+						}}
+					>
+						{expanded() ? "▼" : "▶"}
+					</Button>
+				</Show>
+				<span class="solii-node-name">{node.name}</span>
+			</Button>
+			<Show when={expanded() && node.children.length > 0}>
+				<div class="solii-node-children">
+					<For each={node.children}>
+						{(child) => renderNode(child, props, depth + 1)}
+					</For>
+				</div>
+			</Show>
+		</div>
+	);
+}
+
+export const ComponentTreeView: Component<ComponentTreeViewProps> = (props) => {
+	return (
+		<Card class="solii-component-tree-view">
+			<CardHeader class="solii-tree-header">
+				<h4>Component Tree</h4>
+			</CardHeader>
+			<CardContent class="solii-tree-content">
+				<ScrollArea>
+					<Show
+						when={props.tree()}
+						fallback={<div class="solii-empty">No component tree</div>}
+					>
+						{(node) => renderNode(node(), props)}
+					</Show>
+				</ScrollArea>
+			</CardContent>
+		</Card>
+	);
+};

package/src/devtools/presentation/components/StateInspector.tsx

@@ -0,0 +1,70 @@
+import { Card, CardContent, CardHeader, ScrollArea } from "@wrikka/ui";
+import type { Component } from "solid-js";
+import { For, Show } from "solid-js";
+import type { ComponentNode } from "#devtools/modules/component-inspector/domain";
+
+interface StateInspectorProps {
+	selectedNode: () => ComponentNode | null;
+}
+
+export const StateInspector: Component<StateInspectorProps> = (props) => {
+	return (
+		<Card class="solii-state-inspector">
+			<CardHeader class="solii-state-header">
+				<h4>State Inspector</h4>
+			</CardHeader>
+			<CardContent class="solii-state-content">
+				<ScrollArea>
+					<Show
+						when={props.selectedNode()}
+						fallback={<div class="solii-empty">No component selected</div>}
+					>
+						{(node) => (
+							<div class="solii-state-details">
+								<div class="solii-state-section">
+									<h5>Component: {node().name}</h5>
+								</div>
+								<div class="solii-state-section">
+									<h5>Props</h5>
+									<Show
+										when={Object.keys(node().props).length > 0}
+										fallback={<div class="solii-empty">No props</div>}
+									>
+										<For each={Object.entries(node().props)}>
+											{([key, value]) => (
+												<div class="solii-state-item">
+													<span class="solii-state-key">{key}:</span>
+													<span class="solii-state-value">
+														{JSON.stringify(value)}
+													</span>
+												</div>
+											)}
+										</For>
+									</Show>
+								</div>
+								<div class="solii-state-section">
+									<h5>State</h5>
+									<Show
+										when={Object.keys(node().state).length > 0}
+										fallback={<div class="solii-empty">No state</div>}
+									>
+										<For each={Object.entries(node().state)}>
+											{([key, value]) => (
+												<div class="solii-state-item">
+													<span class="solii-state-key">{key}:</span>
+													<span class="solii-state-value">
+														{JSON.stringify(value)}
+													</span>
+												</div>
+											)}
+										</For>
+									</Show>
+								</div>
+							</div>
+						)}
+					</Show>
+				</ScrollArea>
+			</CardContent>
+		</Card>
+	);
+};

package/src/devtools/presentation/components/TimelineView.tsx

@@ -0,0 +1,52 @@
+import {
+	Badge,
+	Button,
+	Card,
+	CardContent,
+	CardHeader,
+	ScrollArea,
+} from "@wrikka/ui";
+import type { Component } from "solid-js";
+import { For, Show } from "solid-js";
+import type { TimelineEvent } from "#devtools/modules/timeline/domain";
+
+interface TimelineViewProps {
+	events: () => readonly TimelineEvent[];
+	onClear: () => void;
+}
+
+export const TimelineView: Component<TimelineViewProps> = (props) => {
+	return (
+		<Card class="solii-timeline-view">
+			<CardHeader class="solii-timeline-header">
+				<h4>Timeline Events</h4>
+				<Button onClick={props.onClear}>Clear</Button>
+			</CardHeader>
+			<CardContent class="solii-timeline-list">
+				<ScrollArea>
+					<Show
+						when={props.events().length > 0}
+						fallback={<div class="solii-empty">No events recorded</div>}
+					>
+						<For each={props.events()}>
+							{(event) => (
+								<div class="solii-timeline-event">
+									<Badge class="solii-event-type">{event.type}</Badge>
+									<div class="solii-event-name">{event.name}</div>
+									<Show when={event.duration !== undefined}>
+										<div class="solii-event-duration">{event.duration}ms</div>
+									</Show>
+									<Show when={event.metadata}>
+										<div class="solii-event-metadata">
+											{JSON.stringify(event.metadata)}
+										</div>
+									</Show>
+								</div>
+							)}
+						</For>
+					</Show>
+				</ScrollArea>
+			</CardContent>
+		</Card>
+	);
+};

package/src/devtools/presentation/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Presentation components exports
+ */
+
+export { ComponentTreeView } from "./ComponentTreeView";
+export { StateInspector } from "./StateInspector";
+export { TimelineView } from "./TimelineView";

package/src/devtools/presentation/composables/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Presentation composables exports
+ */
+
+export * from "#devtools/modules/devtools/application";
+export * from "#devtools/modules/timeline/application";
+export * from "./useComponentInspector";

package/src/devtools/presentation/composables/useComponentInspector.ts

@@ -0,0 +1,52 @@
+import { createSignal } from "solid-js";
+import {
+	clearComponentSelection,
+	initializeComponentTree,
+	isNodeExpanded,
+	selectComponentNode,
+	toggleComponentExpansion,
+	updateComponentTree,
+} from "#devtools/modules/component-inspector/application";
+import type {
+	ComponentNode,
+	ComponentTree,
+} from "#devtools/modules/component-inspector/domain";
+
+/**
+ * Composable for component tree inspection
+ * Presentation layer - SolidJS reactive state management
+ */
+export function useComponentInspector() {
+	const [tree, setTree] = createSignal<ComponentTree>(
+		initializeComponentTree(null),
+	);
+
+	function updateTree(root: ComponentNode | null) {
+		setTree((t) => updateComponentTree(t, root));
+	}
+
+	function selectNode(nodeId: string) {
+		setTree((t) => selectComponentNode(t, nodeId));
+	}
+
+	function toggleExpansion(nodeId: string) {
+		setTree((t) => toggleComponentExpansion(t, nodeId));
+	}
+
+	function clearSelection() {
+		setTree((t) => clearComponentSelection(t));
+	}
+
+	function isExpanded(nodeId: string): boolean {
+		return isNodeExpanded(tree(), nodeId);
+	}
+
+	return {
+		tree,
+		updateTree,
+		selectNode,
+		toggleExpansion,
+		clearSelection,
+		isExpanded,
+	};
+}

package/src/devtools/presentation/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Presentation layer exports
+ */
+
+export { DevtoolsPanel, default } from "./DevtoolsPanel";

package/src/devtools/shared/errors/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared error types
+ */
+export class DomainError extends Error {
+	constructor(message: string) {
+		super(message);
+		this.name = "DomainError";
+	}
+}
+
+export class ApplicationError extends Error {
+	constructor(message: string) {
+		super(message);
+		this.name = "ApplicationError";
+	}
+}
+
+export class AdapterError extends Error {
+	constructor(message: string) {
+		super(message);
+		this.name = "AdapterError";
+	}
+}

package/src/devtools/shared/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared kernel exports
+ */
+
+export * from "./errors";
+export * from "./types";
+export * from "./utils";

package/src/devtools/shared/types/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared types exports
+ */
+
+export * from "./option";
+export * from "./result";

package/src/devtools/shared/types/option.ts

@@ -0,0 +1,58 @@
+/**
+ * Option type for nullable values
+ * Represents either Some (has value) or None (no value)
+ */
+export type Option<T> =
+	| { readonly some: true; readonly value: T }
+	| { readonly some: false };
+
+/**
+ * Create a Some value
+ */
+export const some = <T>(value: T): Option<T> => ({ some: true, value });
+
+/**
+ * Create a None value
+ */
+export const none: Option<never> = { some: false };
+
+/**
+ * Check if option is Some
+ */
+export const isSome = <T>(
+	option: Option<T>,
+): option is { some: true; readonly value: T } => option.some;
+
+/**
+ * Check if option is None
+ */
+export const isNone = <T>(option: Option<T>): option is { some: false } =>
+	!option.some;
+
+/**
+ * Map over the value if Some
+ */
+export const mapOption = <T, U>(
+	option: Option<T>,
+	fn: (value: T) => U,
+): Option<U> => (option.some ? some(fn(option.value)) : none);
+
+/**
+ * Chain operations, short-circuiting on None
+ */
+export const chainOption = <T, U>(
+	option: Option<T>,
+	fn: (value: T) => Option<U>,
+): Option<U> => (option.some ? fn(option.value) : none);
+
+/**
+ * Get value or default
+ */
+export const unwrapOptionOr = <T>(option: Option<T>, defaultValue: T): T =>
+	option.some ? option.value : defaultValue;
+
+/**
+ * Get value or null
+ */
+export const unwrapOrNull = <T>(option: Option<T>): T | null =>
+	option.some ? option.value : null;