arcway 0.1.0

package/client/index.js

@@ -0,0 +1,62 @@
+import {
+  ApiProvider,
+  Provider,
+  SoloProvider,
+  useApiContext,
+  useSoloContext,
+  useWsManager,
+} from './provider.js';
+import useApi from './hooks/use-api.js';
+import useQuery from './hooks/use-query.js';
+import useMutation from './hooks/use-mutation.js';
+import useDebounce from './hooks/use-debounce.js';
+import useForm from './hooks/use-form.js';
+import useInterval from './hooks/use-interval.js';
+import { ApiError, soloFetch } from './fetcher.js';
+import { GraphQLError, graphqlFetch } from './graphql.js';
+import { useGraphQL, useGraphQLMutation } from './hooks/use-graphql.js';
+import { WsManager } from './ws.js';
+import useLocalStorage from './hooks/web/use-local-storage.js';
+import useClickOutside from './hooks/web/use-click-outside.js';
+import { Link, Router, SoloRouter, useRouter, usePathname, useParams, useSearchParams } from './router.jsx';
+import { Head, setSSRHeadData, clearSSRHeadData, renderHeadToString } from './head.js';
+import { useEnv, env, collectPublicEnv, buildEnvScriptTag } from './env.js';
+
+export {
+  ApiError,
+  ApiProvider,
+  GraphQLError,
+  Head,
+  Link,
+  Provider,
+  Router,
+  SoloProvider,
+  SoloRouter,
+  WsManager,
+  buildEnvScriptTag,
+  clearSSRHeadData,
+  collectPublicEnv,
+  env,
+  graphqlFetch,
+  renderHeadToString,
+  setSSRHeadData,
+  soloFetch,
+  useApi,
+  useApiContext,
+  useClickOutside,
+  useDebounce,
+  useEnv,
+  useForm,
+  useGraphQL,
+  useGraphQLMutation,
+  useInterval,
+  useLocalStorage,
+  useMutation,
+  useParams,
+  usePathname,
+  useQuery,
+  useRouter,
+  useSearchParams,
+  useSoloContext,
+  useWsManager,
+};

package/client/page-loader.js

@@ -0,0 +1,155 @@
+const moduleCache = new Map();
+const patternCache = new Map();
+
+function shouldSkipPrefetch() {
+  if (typeof navigator === 'undefined') return true;
+  return navigator.connection?.saveData === true;
+}
+
+function prefetchRoute(manifest, pathname) {
+  if (shouldSkipPrefetch()) return false;
+
+  const matched = matchClientRoute(manifest, pathname);
+  if (!matched) return false;
+
+  const { route } = matched;
+  const allUrls = [route.clientBundle, ...route.layoutBundles, ...(route.loadingBundles ?? [])];
+  const uncached = allUrls.filter((u) => !moduleCache.has(u));
+  if (uncached.length === 0) return false;
+
+  Promise.all(uncached.map((u) => importComponent(u).catch(() => {})));
+  return true;
+}
+
+function readClientManifest() {
+  if (typeof document === 'undefined') return null;
+
+  const el = document.getElementById('__app_manifest');
+  if (!el?.textContent) return null;
+
+  try {
+    return JSON.parse(el.textContent);
+  } catch {
+    return null;
+  }
+}
+
+function compilePattern(pattern) {
+  const paramNames = [];
+  let catchAllParam;
+
+  const regexStr = pattern.replace(
+    /\/:([^/]+)|\/\*(\w+)\?|\/\*(\w+)/g,
+    (match, singleParam, optCatchAll, reqCatchAll) => {
+      if (singleParam) {
+        paramNames.push(singleParam);
+        return '/([^/]+)';
+      }
+      if (optCatchAll) {
+        paramNames.push(optCatchAll);
+        catchAllParam = optCatchAll;
+        return '(?:/(.+))?';
+      }
+      if (reqCatchAll) {
+        paramNames.push(reqCatchAll);
+        catchAllParam = reqCatchAll;
+        return '/(.+)';
+      }
+      return match;
+    },
+  );
+
+  return {
+    regex: new RegExp(`^${regexStr}\\/?$`),
+    paramNames,
+    catchAllParam,
+  };
+}
+
+function matchClientRoute(manifest, pathname) {
+  for (const route of manifest.routes) {
+    let compiled = patternCache.get(route.pattern);
+    if (!compiled) {
+      compiled = compilePattern(route.pattern);
+      patternCache.set(route.pattern, compiled);
+    }
+    const { regex, paramNames, catchAllParam } = compiled;
+    const catchAll = catchAllParam || route.catchAllParam;
+    const match = regex.exec(pathname);
+    if (!match) continue;
+
+    const params = {};
+    try {
+      for (let i = 0; i < paramNames.length; i++) {
+        const name = paramNames[i];
+        const raw = match[i + 1];
+        if (name === catchAll) {
+          params[name] = raw ? raw.split('/').map(decodeURIComponent) : [];
+        } else {
+          params[name] = decodeURIComponent(raw);
+        }
+      }
+    } catch {
+      continue;
+    }
+
+    return { route, params };
+  }
+  return null;
+}
+
+async function importComponent(bundleUrl) {
+  const cached = moduleCache.get(bundleUrl);
+  if (cached) return cached;
+
+  const mod = await import(
+    /* @vite-ignore */
+    bundleUrl
+  );
+
+  const Component = mod.default;
+  if (!Component) {
+    throw new Error(`Page bundle at ${bundleUrl} has no default export`);
+  }
+
+  moduleCache.set(bundleUrl, Component);
+  return Component;
+}
+
+async function loadLoadingComponents(route) {
+  const loadingBundles = route.loadingBundles ?? [];
+  if (loadingBundles.length === 0) return [];
+
+  try {
+    return await Promise.all(loadingBundles.map((url) => importComponent(url)));
+  } catch {
+    return [];
+  }
+}
+
+async function loadPage(manifest, pathname) {
+  const matched = matchClientRoute(manifest, pathname);
+  if (!matched) return null;
+
+  const { route, params } = matched;
+  const loadingBundles = route.loadingBundles ?? [];
+  const allBundles = [route.clientBundle, ...route.layoutBundles, ...loadingBundles];
+  const components = await Promise.all(allBundles.map((url) => importComponent(url)));
+
+  return {
+    component: components[0],
+    layouts: components.slice(1, 1 + route.layoutBundles.length),
+    loadings: components.slice(1 + route.layoutBundles.length),
+    params,
+    pattern: route.pattern,
+  };
+}
+
+export {
+  compilePattern,
+  loadLoadingComponents,
+  loadPage,
+  matchClientRoute,
+  prefetchRoute,
+  readClientManifest,
+};

package/client/provider.js

@@ -0,0 +1,53 @@
+import { createContext, useContext, createElement, useEffect, useRef, useMemo } from 'react';
+import { WsManager } from './ws.js';
+
+const SOLO_CTX_KEY = '__provider_context__';
+const WS_CTX_KEY = '__ws_context__';
+const DEFAULT_CONFIG = { pathPrefix: '' };
+
+const ApiContext = (globalThis[SOLO_CTX_KEY] ??= createContext(DEFAULT_CONFIG));
+const WsContext = (globalThis[WS_CTX_KEY] ??= createContext(null));
+
+function useApiContext() {
+  return useContext(ApiContext);
+}
+
+function useWsManager() {
+  return useContext(WsContext);
+}
+
+const useSoloContext = useApiContext;
+
+function ApiProvider({ children, pathPrefix = '', headers, wsUrl }) {
+  const config = useMemo(() => ({ pathPrefix, headers, wsUrl }), [pathPrefix, headers, wsUrl]);
+
+  const wsManagerRef = useRef(null);
+  const wsManager = useMemo(() => {
+    if (wsManagerRef.current) {
+      wsManagerRef.current.disconnect();
+      wsManagerRef.current = null;
+    }
+    if (!wsUrl || typeof window === 'undefined') return null;
+    const manager = new WsManager({ url: wsUrl });
+    wsManagerRef.current = manager;
+    return manager;
+  }, [wsUrl]);
+
+  useEffect(() => {
+    if (wsManager) {
+      wsManager.connect();
+      return () => wsManager.disconnect();
+    }
+  }, [wsManager]);
+
+  return createElement(
+    ApiContext.Provider,
+    { value: config },
+    createElement(WsContext.Provider, { value: wsManager }, children),
+  );
+}
+
+const Provider = ApiProvider;
+const SoloProvider = ApiProvider;
+
+export { ApiProvider, Provider, SoloProvider, useApiContext, useSoloContext, useWsManager };

package/client/query.js

@@ -0,0 +1,13 @@
+export function parseQuery(search) {
+  return Object.fromEntries(new URLSearchParams(search));
+}
+
+export function stringifyQuery(params) {
+  const sp = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value != null) {
+      sp.set(key, String(value));
+    }
+  }
+  return sp.toString();
+}

package/client/router.jsx

@@ -0,0 +1,303 @@
+import React from 'react';
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useTransition,
+  createElement,
+} from 'react';
+import {
+  readClientManifest,
+  loadPage,
+  matchClientRoute,
+  loadLoadingComponents,
+  prefetchRoute,
+} from './page-loader.js';
+import { parseQuery } from './query.js';
+
+const ROUTER_CTX_KEY = '__router_context__';
+const RouterContext = (globalThis[ROUTER_CTX_KEY] ??= createContext(null));
+
+function wrapInLayouts(element, layouts) {
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    element = createElement(layouts[i], null, element);
+  }
+  return element;
+}
+
+function useRouter() {
+  const ctx = useContext(RouterContext);
+  if (!ctx) {
+    throw new Error('useRouter must be used within a <Router> provider');
+  }
+
+  return useMemo(
+    () => ({
+      pathname: ctx.pathname,
+      params: ctx.params,
+      query: typeof window !== 'undefined' ? parseQuery(window.location.search) : {},
+      push: (to, options) => ctx.navigate(to, { ...options, replace: false }),
+      replace: (to, options) => ctx.navigate(to, { ...options, replace: true }),
+      back: () => {
+        if (typeof window !== 'undefined') window.history.back();
+      },
+      forward: () => {
+        if (typeof window !== 'undefined') window.history.forward();
+      },
+      refresh: () => {
+        if (typeof window !== 'undefined') window.location.reload();
+      },
+    }),
+    [ctx.pathname, ctx.params, ctx.navigate],
+  );
+}
+
+function usePathname() {
+  return useRouter().pathname;
+}
+
+function useParams() {
+  return useRouter().params;
+}
+
+function useSearchParams() {
+  return useRouter().query;
+}
+
+function Router({
+  initialPath,
+  initialParams,
+  initialComponent,
+  initialLayouts,
+  initialLoadings,
+  children,
+}) {
+  const [pathname, setPathname] = useState(
+    () => initialPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/'),
+  );
+  const [pageState, setPageState] = useState({
+    component: initialComponent ?? null,
+    layouts: initialLayouts ?? [],
+    loadings: initialLoadings ?? [],
+    params: initialParams ?? {},
+  });
+  const [isNavigating, setIsNavigating] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const manifestRef = useRef(null);
+
+  useEffect(() => {
+    manifestRef.current = readClientManifest();
+    const onManifestUpdate = () => {
+      manifestRef.current = readClientManifest();
+    };
+    window.addEventListener('manifest-update', onManifestUpdate);
+    return () => window.removeEventListener('manifest-update', onManifestUpdate);
+  }, []);
+
+  const applyLoaded = useCallback((loaded, newPath) => {
+    startTransition(() => {
+      setPathname(newPath);
+      setPageState({
+        component: loaded.component,
+        layouts: loaded.layouts,
+        loadings: loaded.loadings,
+        params: loaded.params,
+      });
+      setIsNavigating(false);
+    });
+  }, []);
+
+  const navigateToPage = useCallback(
+    async (to, options) => {
+      const scroll = options?.scroll !== false;
+      const replace = options?.replace === true;
+      if (to === pathname) return;
+
+      const manifest = manifestRef.current;
+      if (!manifest) {
+        window.location.href = to;
+        return;
+      }
+
+      const matched = matchClientRoute(manifest, to);
+      if (!matched) {
+        window.location.href = to;
+        return;
+      }
+
+      setIsNavigating(true);
+      if (replace) {
+        window.history.replaceState(null, '', to);
+      } else {
+        window.history.pushState(null, '', to);
+      }
+
+      const targetLoadings = await loadLoadingComponents(matched.route);
+      if (targetLoadings.length > 0) {
+        setPathname(to);
+        setPageState((prev) => ({
+          ...prev,
+          loadings: targetLoadings,
+          params: matched.params,
+        }));
+      }
+
+      try {
+        const loaded = await loadPage(manifest, to);
+        if (!loaded) {
+          window.location.href = to;
+          return;
+        }
+
+        applyLoaded(loaded, to);
+
+        if (scroll) {
+          window.scrollTo(0, 0);
+        }
+      } catch (err) {
+        console.error('Client navigation failed, falling back to full page load:', err);
+        window.location.href = to;
+      }
+    },
+    [pathname, applyLoaded],
+  );
+
+  useEffect(() => {
+    async function onPopState() {
+      const newPath = window.location.pathname;
+      const manifest = manifestRef.current;
+
+      if (!manifest) {
+        setPathname(newPath);
+        setPageState((prev) => ({ ...prev, params: {} }));
+        return;
+      }
+
+      try {
+        const loaded = await loadPage(manifest, newPath);
+        if (loaded) {
+          applyLoaded(loaded, newPath);
+        } else {
+          window.location.reload();
+        }
+      } catch {
+        window.location.reload();
+      }
+    }
+
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, [applyLoaded]);
+
+  const { component: PageComponent, layouts, loadings, params } = pageState;
+
+  let content;
+  if (PageComponent) {
+    const inner = isNavigating && loadings.length > 0
+      ? createElement(loadings.at(-1))
+      : createElement(PageComponent, params);
+    content = wrapInLayouts(inner, layouts);
+  } else {
+    content = children;
+  }
+
+  return (
+    <RouterContext.Provider
+      value={{
+        pathname,
+        params,
+        navigate: navigateToPage,
+      }}
+    >
+      {content}
+      {isNavigating && loadings.length === 0 && !isPending && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '2px',
+            backgroundColor: '#0070f3',
+            zIndex: 99999,
+            animation: 'nav-progress 1s ease-in-out infinite',
+          }}
+        />
+      )}
+    </RouterContext.Provider>
+  );
+}
+
+function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ...rest }) {
+  const router = useContext(RouterContext);
+  const linkRef = useRef(null);
+
+  const handleMouseEnter = useCallback(() => {
+    if (prefetch !== 'hover') return;
+    const manifest = readClientManifest();
+    if (manifest) {
+      prefetchRoute(manifest, href);
+    }
+  }, [href, prefetch]);
+
+  useEffect(() => {
+    if (prefetch !== 'viewport') return;
+    const el = linkRef.current;
+    if (!el || typeof IntersectionObserver === 'undefined') return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const manifest = readClientManifest();
+            if (manifest) {
+              prefetchRoute(manifest, href);
+            }
+            observer.unobserve(el);
+            break;
+          }
+        }
+      },
+      { rootMargin: '200px' },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [href, prefetch]);
+
+  function handleClick(e) {
+    if (onClick) onClick(e);
+    if (e.defaultPrevented) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    if (e.button !== 0) return;
+    if (rest.target === '_blank' || rest.download !== undefined) return;
+
+    try {
+      const url = new URL(href, window.location.origin);
+      if (url.origin !== window.location.origin) return;
+    } catch {
+      return;
+    }
+
+    e.preventDefault();
+    if (router) {
+      router.navigate(href, { scroll, replace });
+    } else {
+      window.history.pushState(null, '', href);
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    }
+  }
+
+  return (
+    <a ref={linkRef} href={href} onClick={handleClick} onMouseEnter={handleMouseEnter} {...rest}>
+      {children}
+    </a>
+  );
+}
+
+const SoloRouter = Router;
+export { Link, Router, SoloRouter, useParams, usePathname, useRouter, useSearchParams };

package/client/ui/accordion.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+function Accordion({ className, ...props }) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('cn-accordion flex w-full flex-col', className)}
+      {...props}
+    />
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('cn-accordion-item', className)}
+      {...props}
+    />
+  );
+}
+function AccordionTrigger({ className, children, ...props }) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'cn-accordion-trigger group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+function AccordionContent({ className, children, ...props }) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="cn-accordion-content overflow-hidden"
+      {...props}
+    >
+      <div
+        className={cn(
+          'cn-accordion-content-inner [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  );
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/client/ui/accordion.stories.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion.jsx';
+const meta = {
+  title: 'UI/Accordion',
+  component: Accordion,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Section One</AccordionTrigger>
+        <AccordionContent>Content for section one.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Section Two</AccordionTrigger>
+        <AccordionContent>Content for section two.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByText('Section One');
+    await expect(trigger).toBeInTheDocument();
+    await expect(canvas.getByText('Section Two')).toBeInTheDocument();
+  },
+};
+const Multiple = {
+  render: () => (
+    <Accordion type="multiple">
+      <AccordionItem value="a">
+        <AccordionTrigger>First</AccordionTrigger>
+        <AccordionContent>First content</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Second</AccordionTrigger>
+        <AccordionContent>Second content</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const triggers = canvas.getAllByRole('button');
+    await expect(triggers.length).toBe(2);
+  },
+};
+export { Default, Multiple, stdin_default as default };