@wrikka/solid-framework 0.0.0-stage → 0.15.0

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

@@ -0,0 +1,67 @@
+import type {
+	ComponentNode,
+	ComponentTree,
+} from "#devtools/modules/component-inspector/domain";
+import {
+	clearSelection,
+	createComponentTree,
+	findNodeById,
+	selectNode,
+	toggleNodeExpansion,
+	updateTreeRoot,
+} from "#devtools/modules/component-inspector/domain";
+
+/**
+ * Initialize component tree
+ */
+export const initializeComponentTree = (
+	root: ComponentNode | null = null,
+): ComponentTree => createComponentTree(root);
+
+/**
+ * Update component tree with new root node
+ */
+export const updateComponentTree = (
+	tree: ComponentTree,
+	root: ComponentNode | null,
+): ComponentTree => updateTreeRoot(tree, root);
+
+/**
+ * Select a component node by ID
+ */
+export const selectComponentNode = (
+	tree: ComponentTree,
+	nodeId: string,
+): ComponentTree => {
+	const node = findNodeById(tree.root, nodeId);
+	if (!node) return tree;
+	return selectNode(tree, nodeId);
+};
+
+/**
+ * Toggle component node expansion
+ */
+export const toggleComponentExpansion = (
+	tree: ComponentTree,
+	nodeId: string,
+): ComponentTree => toggleNodeExpansion(tree, nodeId);
+
+/**
+ * Clear component selection
+ */
+export const clearComponentSelection = (tree: ComponentTree): ComponentTree =>
+	clearSelection(tree);
+
+/**
+ * Get selected component node
+ */
+export const getSelectedNode = (tree: ComponentTree): ComponentNode | null => {
+	if (!tree.selectedNodeId || !tree.root) return null;
+	return findNodeById(tree.root, tree.selectedNodeId);
+};
+
+/**
+ * Check if node is expanded
+ */
+export const isNodeExpanded = (tree: ComponentTree, nodeId: string): boolean =>
+	tree.expandedNodeIds.has(nodeId);

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

@@ -0,0 +1,5 @@
+/**
+ * Component inspector application usecases
+ */
+export * from "./component-inspector";
+export * from "./useComponentInspector";

package/src/devtools/modules/component-inspector/application/usecases/useComponentInspector.ts

@@ -0,0 +1,52 @@
+import { createSignal } from "solid-js";
+import type {
+	ComponentNode,
+	ComponentTree,
+} from "#devtools/modules/component-inspector/domain";
+import {
+	clearComponentSelection,
+	initializeComponentTree,
+	isNodeExpanded,
+	selectComponentNode,
+	toggleComponentExpansion,
+	updateComponentTree,
+} from "./component-inspector";
+
+/**
+ * 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/modules/component-inspector/domain/events/component-events.ts

@@ -0,0 +1,37 @@
+/**
+ * Domain events for component inspection
+ */
+export interface ComponentSelectedEvent {
+	readonly type: "COMPONENT_SELECTED";
+	readonly timestamp: number;
+	readonly componentId: string;
+	readonly componentName: string;
+}
+
+export interface TreeUpdatedEvent {
+	readonly type: "TREE_UPDATED";
+	readonly timestamp: number;
+	readonly rootNodeId: string | null;
+}
+
+export type ComponentDomainEvent = ComponentSelectedEvent | TreeUpdatedEvent;
+
+export const createComponentSelectedEvent = (
+	componentId: string,
+	componentName: string,
+	timestamp: number,
+): ComponentSelectedEvent => ({
+	type: "COMPONENT_SELECTED",
+	timestamp,
+	componentId,
+	componentName,
+});
+
+export const createTreeUpdatedEvent = (
+	rootNodeId: string | null,
+	timestamp: number,
+): TreeUpdatedEvent => ({
+	type: "TREE_UPDATED",
+	timestamp,
+	rootNodeId,
+});

package/src/devtools/modules/component-inspector/domain/events/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Component inspector domain events
+ */
+export * from "./component-events";

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

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

package/src/devtools/modules/component-inspector/domain/models/component-node.ts

@@ -0,0 +1,30 @@
+/**
+ * Component node model for component tree inspection
+ */
+export interface ComponentNode {
+	readonly id: string;
+	readonly name: string;
+	readonly depth: number;
+	readonly state: Readonly<Record<string, unknown>>;
+	readonly props: Readonly<Record<string, unknown>>;
+	readonly children: readonly ComponentNode[];
+	readonly isRoot: boolean;
+}
+
+export const createComponentNode = (
+	id: string,
+	name: string,
+	depth: number,
+	state: Readonly<Record<string, unknown>> = {},
+	props: Readonly<Record<string, unknown>> = {},
+	children: readonly ComponentNode[] = [],
+	isRoot: boolean = false,
+): ComponentNode => ({
+	id,
+	name,
+	depth,
+	state,
+	props,
+	children,
+	isRoot,
+});

package/src/devtools/modules/component-inspector/domain/models/component-tree.ts

@@ -0,0 +1,20 @@
+/**
+ * Component tree model for inspection
+ */
+export interface ComponentTree {
+	readonly root: ComponentNode | null;
+	readonly selectedNodeId: string | null;
+	readonly expandedNodeIds: ReadonlySet<string>;
+}
+
+import type { ComponentNode } from "./component-node";
+
+export const createComponentTree = (
+	root: ComponentNode | null = null,
+	selectedNodeId: string | null = null,
+	expandedNodeIds: ReadonlySet<string> = new Set(),
+): ComponentTree => ({
+	root,
+	selectedNodeId,
+	expandedNodeIds,
+});

package/src/devtools/modules/component-inspector/domain/models/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Component inspector domain models
+ */
+export * from "./component-node";
+export * from "./component-tree";

package/src/devtools/modules/component-inspector/domain/operations/component-operations.ts

@@ -0,0 +1,63 @@
+import type { ComponentNode, ComponentTree } from "../models";
+
+/**
+ * Find a component node by ID in the tree
+ */
+export const findNodeById = (
+	node: ComponentNode | null,
+	id: string,
+): ComponentNode | null => {
+	if (!node) return null;
+	if (node.id === id) return node;
+	for (const child of node.children) {
+		const found = findNodeById(child, id);
+		if (found) return found;
+	}
+	return null;
+};
+
+/**
+ * Select a node in the component tree
+ */
+export const selectNode = (
+	tree: ComponentTree,
+	nodeId: string,
+): ComponentTree => ({
+	...tree,
+	selectedNodeId: nodeId,
+});
+
+/**
+ * Toggle node expansion
+ */
+export const toggleNodeExpansion = (
+	tree: ComponentTree,
+	nodeId: string,
+): ComponentTree => {
+	const expanded = new Set(tree.expandedNodeIds);
+	if (expanded.has(nodeId)) {
+		expanded.delete(nodeId);
+	} else {
+		expanded.add(nodeId);
+	}
+	return { ...tree, expandedNodeIds: expanded };
+};
+
+/**
+ * Update component tree with new root
+ */
+export const updateTreeRoot = (
+	tree: ComponentTree,
+	root: ComponentNode | null,
+): ComponentTree => ({
+	...tree,
+	root,
+});
+
+/**
+ * Clear component tree selection
+ */
+export const clearSelection = (tree: ComponentTree): ComponentTree => ({
+	...tree,
+	selectedNodeId: null,
+});

package/src/devtools/modules/component-inspector/domain/operations/index.ts

@@ -0,0 +1,4 @@
+/**
+ * Component inspector domain operations
+ */
+export * from "./component-operations";

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

@@ -0,0 +1,7 @@
+/**
+ * Component inspector module
+ * Vertical slice for component tree inspection feature
+ */
+
+export * from "./application";
+export * from "./domain";

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

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

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

@@ -0,0 +1,60 @@
+import type { DevtoolsState } from "#devtools/modules/devtools/domain";
+import {
+	closePanel,
+	createDevtoolsState,
+	openPanel,
+	setConnected,
+	togglePanel,
+} from "#devtools/modules/devtools/domain";
+import type { IDevtoolsConnector } from "#devtools/modules/devtools/ports";
+
+/**
+ * Initialize devtools state
+ */
+export const initializeDevtools = (
+	isConnected: boolean = false,
+	isPanelOpen: boolean = false,
+): DevtoolsState => createDevtoolsState(isConnected, isPanelOpen);
+
+/**
+ * Connect to devtools backend
+ * Pure function - connector dependency injected
+ */
+export const connectDevtools = (
+	state: DevtoolsState,
+	connector: IDevtoolsConnector,
+): Promise<DevtoolsState> =>
+	connector
+		.connect()
+		.then(() => setConnected(state, true))
+		.catch(() => state);
+
+/**
+ * Disconnect from devtools backend
+ * Pure function - connector dependency injected
+ */
+export const disconnectDevtools = (
+	state: DevtoolsState,
+	connector: IDevtoolsConnector,
+): DevtoolsState => {
+	connector.disconnect();
+	return setConnected(state, false);
+};
+
+/**
+ * Toggle devtools panel
+ */
+export const toggleDevtoolsPanel = (state: DevtoolsState): DevtoolsState =>
+	togglePanel(state);
+
+/**
+ * Open devtools panel
+ */
+export const openDevtoolsPanel = (state: DevtoolsState): DevtoolsState =>
+	openPanel(state);
+
+/**
+ * Close devtools panel
+ */
+export const closeDevtoolsPanel = (state: DevtoolsState): DevtoolsState =>
+	closePanel(state);

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

@@ -0,0 +1,5 @@
+/**
+ * Devtools application usecases
+ */
+export * from "./devtools";
+export * from "./useDevtools";

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

@@ -0,0 +1,47 @@
+import { createSignal, onMount } from "solid-js";
+import type { DevtoolsState } from "#devtools/modules/devtools/domain";
+import {
+	closePanel as closePanelOp,
+	createDevtoolsState,
+	openPanel as openPanelOp,
+	setConnected,
+	togglePanel as togglePanelOp,
+} from "#devtools/modules/devtools/domain";
+
+/**
+ * Composable for interacting with Devtools
+ * Presentation layer - SolidJS reactive state management
+ */
+export function useDevtools() {
+	const [state, setState] = createSignal<DevtoolsState>(
+		createDevtoolsState(false, false),
+	);
+
+	onMount(() => {
+		try {
+			setState((s) => setConnected(s, true));
+		} catch (error) {
+			console.error("Failed to connect to devtools backend:", error);
+		}
+	});
+
+	function togglePanel() {
+		setState((s) => togglePanelOp(s));
+	}
+
+	function openPanel() {
+		setState((s) => openPanelOp(s));
+	}
+
+	function closePanel() {
+		setState((s) => closePanelOp(s));
+	}
+
+	return {
+		isConnected: () => state().isConnected,
+		isPanelOpen: () => state().isPanelOpen,
+		togglePanel,
+		openPanel,
+		closePanel,
+	};
+}

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

@@ -0,0 +1,56 @@
+/**
+ * Domain events for devtools
+ */
+export interface DevtoolsConnectedEvent {
+	readonly type: "DEVTOOLS_CONNECTED";
+	readonly timestamp: number;
+}
+
+export interface DevtoolsDisconnectedEvent {
+	readonly type: "DEVTOOLS_DISCONNECTED";
+	readonly timestamp: number;
+}
+
+export interface PanelOpenedEvent {
+	readonly type: "PANEL_OPENED";
+	readonly timestamp: number;
+}
+
+export interface PanelClosedEvent {
+	readonly type: "PANEL_CLOSED";
+	readonly timestamp: number;
+}
+
+export type DevtoolsDomainEvent =
+	| DevtoolsConnectedEvent
+	| DevtoolsDisconnectedEvent
+	| PanelOpenedEvent
+	| PanelClosedEvent;
+
+export const createDevtoolsConnectedEvent = (
+	timestamp: number,
+): DevtoolsConnectedEvent => ({
+	type: "DEVTOOLS_CONNECTED",
+	timestamp,
+});
+
+export const createDevtoolsDisconnectedEvent = (
+	timestamp: number,
+): DevtoolsDisconnectedEvent => ({
+	type: "DEVTOOLS_DISCONNECTED",
+	timestamp,
+});
+
+export const createPanelOpenedEvent = (
+	timestamp: number,
+): PanelOpenedEvent => ({
+	type: "PANEL_OPENED",
+	timestamp,
+});
+
+export const createPanelClosedEvent = (
+	timestamp: number,
+): PanelClosedEvent => ({
+	type: "PANEL_CLOSED",
+	timestamp,
+});

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * Devtools domain layer
+ */
+
+export * from "./events";
+export * from "./models";
+export * from "./operations";
+export * from "./validators";

package/src/devtools/modules/devtools/domain/models/devtools-state.ts

@@ -0,0 +1,15 @@
+/**
+ * Devtools state model
+ */
+export interface DevtoolsState {
+	readonly isConnected: boolean;
+	readonly isPanelOpen: boolean;
+}
+
+export const createDevtoolsState = (
+	isConnected: boolean = false,
+	isPanelOpen: boolean = false,
+): DevtoolsState => ({
+	isConnected,
+	isPanelOpen,
+});

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

@@ -0,0 +1,4 @@
+/**
+ * Devtools domain models
+ */
+export * from "./devtools-state";

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

@@ -0,0 +1,27 @@
+import type { DevtoolsState } from "../models";
+
+/**
+ * Pure operations for devtools state
+ */
+export const togglePanel = (state: DevtoolsState): DevtoolsState => ({
+	...state,
+	isPanelOpen: !state.isPanelOpen,
+});
+
+export const openPanel = (state: DevtoolsState): DevtoolsState => ({
+	...state,
+	isPanelOpen: true,
+});
+
+export const closePanel = (state: DevtoolsState): DevtoolsState => ({
+	...state,
+	isPanelOpen: false,
+});
+
+export const setConnected = (
+	state: DevtoolsState,
+	isConnected: boolean,
+): DevtoolsState => ({
+	...state,
+	isConnected,
+});

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

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

package/src/devtools/modules/devtools/domain/validators/devtools-validators.ts

@@ -0,0 +1,36 @@
+// Devtools Domain Schemas - Arktype validation schemas
+// Following /follow-arktype workflow for type-safe runtime validation
+
+import { type } from "arktype";
+import type { DevtoolsState } from "../models";
+
+/**
+ * Devtools State Schema
+ */
+export const devtoolsStateSchema = type({
+	isConnected: "boolean",
+	isPanelOpen: "boolean",
+});
+
+export type DevtoolsStateSchema = typeof devtoolsStateSchema.infer;
+
+/**
+ * Validation errors
+ */
+export class ValidationError extends Error {
+	constructor(message: string) {
+		super(message);
+		this.name = "ValidationError";
+	}
+}
+
+/**
+ * Validate devtools state using Arktype
+ */
+export const validateDevtoolsState = (state: unknown): DevtoolsState => {
+	const result = devtoolsStateSchema(state);
+	if (result instanceof type.errors) {
+		throw new ValidationError("State must be a valid devtools state");
+	}
+	return result as DevtoolsState;
+};

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

@@ -0,0 +1,4 @@
+/**
+ * Devtools domain validators
+ */
+export * from "./devtools-validators";

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

@@ -0,0 +1,7 @@
+/**
+ * Devtools module
+ * Vertical slice for devtools panel feature
+ */
+
+export * from "./application";
+export * from "./domain";

package/src/devtools/modules/devtools/ports/connector.ts

@@ -0,0 +1,10 @@
+/**
+ * Port for devtools connector
+ * Interface for external devtools communication
+ */
+export interface IDevtoolsConnector {
+	connect(): Promise<void>;
+	disconnect(): void;
+	send(message: unknown): void;
+	onMessage(handler: (message: unknown) => void): void;
+}

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

@@ -0,0 +1,4 @@
+/**
+ * Devtools ports (interface definitions)
+ */
+export * from "./connector";

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

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

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

@@ -0,0 +1,5 @@
+/**
+ * Timeline application usecases
+ */
+export * from "./timeline";
+export * from "./useTimeline";