@kuckit/app-web 2.0.1

package/dist/index.js

@@ -0,0 +1,210 @@
+import { createContext, createElement, useContext, useEffect, useMemo, useState } from "react";
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider, createRoute, createRouter } from "@tanstack/react-router";
+import { KuckitNavProvider, KuckitRpcProvider, KuckitSlotProvider, loadKuckitClientModules } from "@kuckit/sdk-react";
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { createTanstackQueryUtils } from "@orpc/tanstack-query";
+import { createAuthClient } from "better-auth/react";
+import { inferAdditionalFields } from "better-auth/client/plugins";
+
+//#region src/services.ts
+function createQueryClient(onError) {
+	return new QueryClient({ queryCache: new QueryCache({ onError: (error) => {
+		onError?.(error);
+	} }) });
+}
+function createRPCLink(serverUrl) {
+	return new RPCLink({
+		url: `${serverUrl}/rpc`,
+		fetch(url, options) {
+			return fetch(url, {
+				...options,
+				credentials: "include"
+			});
+		}
+	});
+}
+function createRPCClient(link) {
+	return createORPCClient(link);
+}
+function createORPCUtils(client) {
+	return createTanstackQueryUtils(client);
+}
+function createAuthClientService(serverUrl) {
+	return createAuthClient({
+		baseURL: serverUrl,
+		plugins: [inferAdditionalFields()]
+	});
+}
+function createKuckitWebServices(options = {}) {
+	const serverUrl = options.serverUrl || (typeof globalThis !== "undefined" && "location" in globalThis ? globalThis.location.origin : "");
+	const queryClient = createQueryClient(options.onQueryError);
+	const rpcClient = createRPCClient(createRPCLink(serverUrl));
+	return {
+		queryClient,
+		rpcClient,
+		orpc: createORPCUtils(rpcClient),
+		authClient: createAuthClientService(serverUrl)
+	};
+}
+
+//#endregion
+//#region src/provider.tsx
+const KuckitWebContext = createContext(null);
+const ServicesContext = createContext(null);
+function DefaultLoader() {
+	return createElement("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: "100vh"
+		},
+		children: "Loading..."
+	});
+}
+function DefaultError({ error }) {
+	return createElement("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: "100vh",
+			flexDirection: "column"
+		},
+		children: [createElement("h2", {
+			key: "title",
+			style: { color: "red" }
+		}, "Failed to load modules"), createElement("p", { key: "message" }, error.message)]
+	});
+}
+function useKuckitWeb() {
+	const ctx = useContext(KuckitWebContext);
+	if (!ctx) throw new Error("useKuckitWeb must be used within a KuckitWebProvider");
+	return ctx;
+}
+function useServices() {
+	const ctx = useContext(ServicesContext);
+	if (!ctx) throw new Error("useServices must be used within a KuckitWebProvider");
+	return ctx;
+}
+function useRpc() {
+	const { rpcClient } = useServices();
+	return rpcClient;
+}
+function useOrpc() {
+	const { orpc } = useServices();
+	return orpc;
+}
+function useAuth() {
+	const { authClient } = useServices();
+	return authClient;
+}
+function useQueryClient() {
+	const { queryClient } = useServices();
+	return queryClient;
+}
+function InternalKuckitWebProvider({ config, routeTree, rootRoute, children }) {
+	const { services, Loader, ErrorComponent } = useMemo(() => {
+		return {
+			services: createKuckitWebServices({ serverUrl: config.serverUrl }),
+			Loader: config.loaderComponent || DefaultLoader,
+			ErrorComponent: config.errorComponent || DefaultError
+		};
+	}, [
+		config.serverUrl,
+		config.loaderComponent,
+		config.errorComponent
+	]);
+	const [loadResult, setLoadResult] = useState(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		let cancelled = false;
+		const loadModules = async () => {
+			try {
+				const result = await loadKuckitClientModules({
+					orpc: services.orpc,
+					queryClient: services.queryClient,
+					env: config.env || "production",
+					modules: config.modules
+				});
+				if (!cancelled) setLoadResult(result);
+			} catch (err) {
+				if (!cancelled) setError(err instanceof Error ? err : new Error(String(err)));
+			}
+		};
+		loadModules();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		services,
+		config.modules,
+		config.env
+	]);
+	const router = useMemo(() => {
+		if (!loadResult) return null;
+		const moduleRouteDefs = loadResult.routeRegistry.getAll();
+		const moduleRoutes = moduleRouteDefs.map((routeDef) => createRoute({
+			getParentRoute: () => rootRoute,
+			path: routeDef.path,
+			component: routeDef.component
+		}));
+		if (moduleRoutes.length > 0) console.log(`[kuckit/app-web] Loaded ${moduleRoutes.length} module routes:`, moduleRouteDefs.map((r) => r.path));
+		return createRouter({
+			routeTree,
+			defaultPreload: "intent",
+			defaultPendingComponent: Loader,
+			context: {
+				orpc: services.orpc,
+				queryClient: services.queryClient
+			}
+		});
+	}, [
+		loadResult,
+		routeTree,
+		rootRoute,
+		services,
+		Loader
+	]);
+	if (error) return createElement(ErrorComponent, { error });
+	if (!loadResult || !router) return createElement(Loader);
+	const contextValue = {
+		routeRegistry: loadResult.routeRegistry,
+		navRegistry: loadResult.navRegistry,
+		slotRegistry: loadResult.slotRegistry,
+		services,
+		isLoaded: true
+	};
+	return createElement(ServicesContext.Provider, { value: services }, createElement(QueryClientProvider, { client: services.queryClient }, createElement(KuckitWebContext.Provider, { value: contextValue }, createElement(KuckitRpcProvider, {
+		client: services.rpcClient,
+		children: null
+	}, createElement(KuckitNavProvider, {
+		registry: loadResult.navRegistry,
+		children: null
+	}, createElement(KuckitSlotProvider, {
+		registry: loadResult.slotRegistry,
+		children: null
+	}, createElement(RouterProvider, { router }), children))))));
+}
+function createKuckitWebProvider(options) {
+	const { routeTree, rootRoute,...config } = options;
+	return function KuckitWebProvider({ children }) {
+		return createElement(InternalKuckitWebProvider, {
+			config,
+			routeTree,
+			rootRoute,
+			children
+		});
+	};
+}
+function withKuckitWeb(Component, options) {
+	const Provider = createKuckitWebProvider(options);
+	return function WrappedWithKuckit(props) {
+		return createElement(Provider, null, createElement(Component, props));
+	};
+}
+
+//#endregion
+export { createAuthClientService, createKuckitWebProvider, createKuckitWebServices, createORPCUtils, createQueryClient, createRPCClient, createRPCLink, useAuth, useKuckitWeb, useOrpc, useQueryClient, useRpc, useServices, withKuckitWeb };

package/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "@kuckit/app-web",
+	"version": "2.0.1",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"default": "./src/index.ts"
+		},
+		"./*": {
+			"types": "./src/*.ts",
+			"default": "./src/*.ts"
+		}
+	},
+	"publishConfig": {
+		"main": "dist/index.js",
+		"types": "dist/index.d.ts",
+		"exports": {
+			".": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
+			},
+			"./*": {
+				"types": "./dist/*.d.ts",
+				"default": "./dist/*.js"
+			}
+		}
+	},
+	"scripts": {
+		"build": "tsdown",
+		"check-types": "tsc -b"
+	},
+	"dependencies": {
+		"@kuckit/sdk-react": "workspace:*",
+		"@kuckit/api": "workspace:*",
+		"@kuckit/auth": "workspace:*",
+		"@tanstack/react-query": "^5.85.5",
+		"@tanstack/react-router": "^1.114.25",
+		"@orpc/client": "catalog:",
+		"@orpc/tanstack-query": "^1.10.0",
+		"better-auth": "catalog:",
+		"react": "19.1.0"
+	},
+	"devDependencies": {
+		"typescript": "catalog:",
+		"@types/react": "~19.1.10",
+		"tsdown": "catalog:"
+	},
+	"peerDependencies": {
+		"typescript": "^5",
+		"react": "^18 || ^19"
+	}
+}

package/src/index.ts

@@ -0,0 +1,38 @@
+// Provider and HOC
+export {
+	createKuckitWebProvider,
+	withKuckitWeb,
+	useKuckitWeb,
+	useServices,
+	useRpc,
+	useOrpc,
+	useAuth,
+	useQueryClient,
+} from './provider'
+
+// Service factories (for custom setup)
+export {
+	createKuckitWebServices,
+	createQueryClient,
+	createRPCLink,
+	createRPCClient,
+	createORPCUtils,
+	createAuthClientService,
+	type CreateServicesOptions,
+} from './services'
+
+// Types
+export type {
+	KuckitWebConfig,
+	KuckitWebContext,
+	KuckitWebServices,
+	KuckitWebProviderProps,
+	KuckitWebRouterProps,
+	CreateKuckitWebProviderOptions,
+	ORPCUtils,
+	AuthClient,
+	ModuleRoute,
+} from './types'
+
+// Re-export commonly used types from sdk-react for convenience
+export type { ClientModuleSpec, RouteDefinition, NavItem } from '@kuckit/sdk-react'