@emeryld/manager 0.5.1 → 0.6.1

package/dist/create-package/variants/client/client_vite_r.js

@@ -0,0 +1,583 @@
+import { BASE_LINT_DEV_DEPENDENCIES, basePackageFiles, basePackageJson, baseScripts, buildReadme, isWorkspaceRoot, packageTsConfig, writeFileIfMissing, } from '../../shared.js';
+const VITE_CLIENT_SCRIPTS = [
+    'dev',
+    'build',
+    'preview',
+    'typecheck',
+    'lint',
+    'lint:fix',
+    'format',
+    'format:check',
+    'clean',
+    'test',
+];
+const CLIENT_ENV_EXAMPLE = `VITE_API_URL=http://localhost:4000
+VITE_SOCKET_URL=http://localhost:4000
+VITE_SOCKET_PATH=/socket.io
+`;
+function vitePackageJson(name, contractName, includePrepare) {
+    const dependencies = {
+        '@emeryld/rrroutes-client': '^2.5.3',
+        '@tanstack/react-query': '^5.90.12',
+        react: '^18.3.1',
+        'react-dom': '^18.3.1',
+        'socket.io-client': '^4.8.3',
+        zod: '^4.2.1',
+    };
+    if (contractName)
+        dependencies[contractName] = 'workspace:*';
+    const devDependencies = {
+        ...BASE_LINT_DEV_DEPENDENCIES,
+        '@types/node': '^24.10.2',
+        '@types/react': '^18.3.27',
+        '@types/react-dom': '^18.3.7',
+        '@vitejs/plugin-react': '^4.3.4',
+        typescript: '^5.9.3',
+        vite: '^6.4.1',
+    };
+    return basePackageJson({
+        name,
+        useDefaults: false,
+        type: 'module',
+        scripts: baseScripts('vite', {
+            build: 'vite build',
+            preview: 'vite preview',
+            typecheck: 'tsc -p tsconfig.json --noEmit',
+        }, { includePrepare }),
+        dependencies,
+        devDependencies,
+    });
+}
+function viteConfig() {
+    return `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
+`;
+}
+const MAIN_TSX = `import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+`;
+function appTsx() {
+    return `import React from 'react'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClient } from './lib/queryClient'
+import { AppSocketProvider } from './lib/socket'
+import { HealthPage } from './pages/HealthPage'
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppSocketProvider>
+        <HealthPage />
+      </AppSocketProvider>
+    </QueryClientProvider>
+  )
+}
+`;
+}
+const STYLES = `:root {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  color: #0b1021;
+  background: #f7f8fb;
+}
+
+body {
+  margin: 0;
+  background: radial-gradient(circle at 20% 20%, #eef2ff, #f7f8fb 45%);
+  min-height: 100vh;
+}
+
+.health {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 8px 24px rgba(12, 18, 32, 0.05);
+}
+
+.notice {
+  background: #fff7ed;
+  border: 1px solid #fed7aa;
+  color: #9a3412;
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.muted {
+  color: #6b7280;
+}
+
+button {
+  background: #0f172a;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+button.secondary {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+button + button {
+  margin-left: 8px;
+}
+
+textarea {
+  width: 100%;
+  min-height: 80px;
+}
+
+.logs {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
+    monospace;
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: 12px;
+  border-radius: 8px;
+  min-height: 160px;
+  white-space: pre-line;
+}
+`;
+function queryClient(contractImport) {
+    if (contractImport) {
+        return `import { QueryClient } from '@tanstack/react-query'
+import { createRouteClient } from '@emeryld/rrroutes-client'
+import { registry } from '${contractImport}'
+
+const baseUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:4000'
+
+export const queryClient = new QueryClient()
+
+export const routeClient = createRouteClient({
+  baseUrl,
+  queryClient,
+  environment: import.meta.env.MODE === 'production' ? 'production' : 'development',
+})
+
+export const healthGet = routeClient.build(registry.byKey['GET /api/health'])
+export const healthPost = routeClient.build(registry.byKey['POST /api/health'])
+export const hasContract = true as const
+`;
+    }
+    return `import { QueryClient } from '@tanstack/react-query'
+import { createRouteClient } from '@emeryld/rrroutes-client'
+
+const baseUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:4000'
+
+export const queryClient = new QueryClient()
+
+export const routeClient = createRouteClient({
+  baseUrl,
+  queryClient,
+  environment: import.meta.env.MODE === 'production' ? 'production' : 'development',
+})
+
+type RouteEndpoint = ReturnType<typeof routeClient.build>
+
+function placeholderUseEndpoint() {
+  const error = new Error('Add your contract import to src/lib/queryClient.ts')
+  return {
+    data: undefined,
+    error,
+    refetch: () => undefined,
+    mutateAsync: async () => Promise.reject(error),
+    isPending: false,
+  }
+}
+
+const placeholderEndpoint = {
+  useEndpoint: placeholderUseEndpoint,
+} as unknown as RouteEndpoint
+
+export const healthGet: RouteEndpoint = placeholderEndpoint
+export const healthPost: RouteEndpoint = placeholderEndpoint
+export const hasContract = false as const
+`;
+}
+function socketProvider(contractImport) {
+    if (contractImport) {
+        return `import React from 'react'
+import { io, type Socket } from 'socket.io-client'
+import {
+  buildSocketProvider,
+  type SocketClientOptions,
+} from '@emeryld/rrroutes-client'
+import { socketConfig, socketEvents } from '${contractImport}'
+
+const socketUrl = import.meta.env.VITE_SOCKET_URL ?? 'http://localhost:4000'
+const socketPath = import.meta.env.VITE_SOCKET_PATH ?? '/socket.io'
+
+const sysEvents: SocketClientOptions<
+  typeof socketEvents,
+  typeof socketConfig
+>['sys'] = {
+  'sys:connect': async ({ socket }) => {
+    console.info('socket connected', socket.id)
+  },
+  'sys:disconnect': async ({ reason }) => {
+    console.info('socket disconnected', reason)
+  },
+  'sys:reconnect': async ({ attempt, socket }) => {
+    console.info('socket reconnect', attempt, socket?.id)
+  },
+  'sys:connect_error': async ({ error }) => {
+    console.warn('socket connect error', error)
+  },
+  'sys:ping': () => ({
+    note: 'client-heartbeat',
+    sentAt: new Date().toISOString(),
+  }),
+  'sys:pong': async ({ payload }) => {
+    console.info('socket pong', payload)
+  },
+  'sys:room_join': async ({ rooms }) => {
+    console.info('joining rooms', rooms)
+    return true
+  },
+  'sys:room_leave': async ({ rooms }) => {
+    console.info('leaving rooms', rooms)
+    return true
+  },
+}
+
+const baseOptions: Omit<
+  SocketClientOptions<typeof socketEvents, typeof socketConfig>,
+  'socket'
+> = {
+  config: socketConfig,
+  sys: sysEvents,
+  environment: import.meta.env.MODE === 'production' ? 'production' : 'development',
+  heartbeat: { intervalMs: 15_000, timeoutMs: 7_500 },
+  debug: {
+    connection: true,
+    heartbeat: true,
+  },
+}
+
+const { SocketProvider, useSocketClient, useSocketConnection } =
+  buildSocketProvider({
+    events: socketEvents,
+    options: baseOptions,
+  })
+
+function getSocket(): Promise<Socket> {
+  return Promise.resolve(
+    io(socketUrl, {
+      path: socketPath,
+      transports: ['websocket'],
+    }),
+  )
+}
+
+export const roomMeta = { room: 'health' }
+export const socketReady = true as const
+
+export function AppSocketProvider(props: React.PropsWithChildren) {
+  return (
+    <SocketProvider
+      getSocket={getSocket}
+      destroyLeaveMeta={roomMeta}
+      fallback={<p>Connecting socket…</p>}
+    >
+      {props.children}
+    </SocketProvider>
+  )
+}
+
+export { useSocketClient, useSocketConnection }
+`;
+    }
+    return `import React from 'react'
+
+export const roomMeta = { room: 'health' }
+export const socketReady = false as const
+
+const stubSocket = {
+  connect: () =>
+    console.info('Socket disabled; add your contract import in src/lib/socket.tsx.'),
+  disconnect: () => undefined,
+  emit: () => undefined,
+  joinRooms: () => undefined,
+  leaveRooms: () => undefined,
+}
+
+export function AppSocketProvider(props: React.PropsWithChildren) {
+  return <>{props.children}</>
+}
+
+export function useSocketClient() {
+  return stubSocket
+}
+
+export function useSocketConnection() {
+  // no-op when sockets are not configured
+}
+`;
+}
+function healthPage(contractImport) {
+    return `import React from 'react'
+import { healthGet, healthPost, hasContract } from '../lib/queryClient'
+import { roomMeta, useSocketClient, useSocketConnection, socketReady } from '../lib/socket'
+
+const now = () => new Date().toLocaleTimeString()
+
+function useLogs() {
+  const [logs, setLogs] = React.useState<string[]>([])
+  return {
+    logs,
+    push: (msg: string) =>
+      setLogs((prev) => [\`[\${now()}] \${msg}\`, ...prev].slice(0, 60)),
+    clear: () => setLogs([]),
+  }
+}
+
+export function HealthPage() {
+  const [echo, setEcho] = React.useState('hello rrroute')
+  const httpGet = healthGet.useEndpoint()
+  const httpPost = healthPost.useEndpoint()
+  const socket = useSocketClient()
+  const { logs, push, clear } = useLogs()
+
+  useSocketConnection({
+    event: 'health:connected',
+    rooms: ['health'],
+    joinMeta: roomMeta,
+    leaveMeta: roomMeta,
+    onMessage: (payload) => {
+      push(\`socket connected (\${payload.socketId})\`)
+    },
+  })
+
+  useSocketConnection({
+    event: 'health:pong',
+    rooms: ['health'],
+    joinMeta: roomMeta,
+    leaveMeta: roomMeta,
+    onMessage: (payload) => {
+      push(
+        \`pong at \${payload.at}\${payload.echo ? \` (echo: \${payload.echo})\` : ''}\`,
+      )
+    },
+  })
+
+  return (
+    <div className="health">
+      <h1>RRRoutes health sandbox</h1>
+      {!hasContract ? (
+        <p className="notice">
+          Add your contract import in <code>src/lib/queryClient.ts</code> and{' '}
+          <code>src/lib/socket.tsx</code> to call the real API and socket events.
+        </p>
+      ) : null}
+      <div className="grid">
+        <div className="card">
+          <h2>HTTP endpoints</h2>
+          {!hasContract ? (
+            <p className="muted">Wire up a contract to enable HTTP calls.</p>
+          ) : (
+            <>
+              <p>GET and POST against the shared contract.</p>
+              <div>
+                <button onClick={() => httpGet.refetch()}>GET /health</button>
+                {httpGet.error ? (
+                  <p style={{ color: 'crimson', marginTop: 6 }}>
+                    GET error: {String(httpGet.error)}
+                  </p>
+                ) : null}
+              </div>
+              <div style={{ marginTop: 12 }}>
+                <input
+                  value={echo}
+                  onChange={(e) => setEcho(e.target.value)}
+                  placeholder="echo payload"
+                  style={{ width: '100%', padding: '8px' }}
+                />
+                <div style={{ marginTop: 8 }}>
+                  <button
+                    onClick={() =>
+                      httpPost.mutateAsync({ echo }).then(() => {
+                        push('POST /health ok')
+                      })
+                    }
+                  >
+                    POST /health
+                  </button>
+                </div>
+                {httpPost.error ? (
+                  <p style={{ color: 'crimson', marginTop: 6 }}>
+                    POST error: {String(httpPost.error)}
+                  </p>
+                ) : null}
+              </div>
+              <div style={{ marginTop: 12 }}>
+                <strong>GET data</strong>
+                <pre>{JSON.stringify(httpGet.data, null, 2) ?? 'none'}</pre>
+                <strong>POST data</strong>
+                <pre>{JSON.stringify(httpPost.data, null, 2) ?? 'none'}</pre>
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="card">
+          <h2>Socket</h2>
+          {!socketReady ? (
+            <p className="muted">
+              Wire up socket events via your contract to enable live updates.
+            </p>
+          ) : (
+            <>
+              <p>Connect, ping, and watch lifecycle events.</p>
+              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                <button onClick={() => socket.connect()}>Connect</button>
+                <button className="secondary" onClick={() => socket.disconnect()}>
+                  Disconnect
+                </button>
+                <button
+                  onClick={() =>
+                    socket.emit('health:ping', { note: 'ping from client' })
+                  }
+                >
+                  Emit ping
+                </button>
+                <button
+                  className="secondary"
+                  onClick={() => socket.joinRooms(['health'], roomMeta)}
+                >
+                  Join room
+                </button>
+                <button
+                  className="secondary"
+                  onClick={() => socket.leaveRooms(['health'], roomMeta)}
+                >
+                  Leave room
+                </button>
+              </div>
+              {httpGet.error || httpPost.error ? (
+                <p style={{ color: 'crimson', marginTop: 8 }}>
+                  Check server logs; errors will also show above.
+                </p>
+              ) : null}
+            </>
+          )}
+        </div>
+
+        <div className="card">
+          <h2>Socket logs</h2>
+          <button className="secondary" onClick={clear}>
+            Clear
+          </button>
+          <div className="logs">
+            {logs.length === 0 ? 'No messages yet' : logs.join('\\n')}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+`;
+}
+function indexHtml() {
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>RRRoutes starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+}
+export async function scaffoldViteReactClient(ctx) {
+    const includePrepare = isWorkspaceRoot(ctx.targetDir);
+    const tsconfig = await packageTsConfig(ctx.targetDir, {
+        include: ['src/**/*', 'vite.config.ts'],
+        lib: ['ES2022', 'DOM'],
+        types: ['vite/client'],
+        jsx: 'react-jsx',
+    });
+    const files = {
+        'package.json': vitePackageJson(ctx.pkgName, ctx.contractName, includePrepare),
+        'tsconfig.json': tsconfig,
+        'vite.config.ts': viteConfig(),
+        'src/main.tsx': MAIN_TSX,
+        'src/App.tsx': appTsx(),
+        'src/lib/queryClient.ts': queryClient(ctx.contractName),
+        'src/lib/socket.tsx': socketProvider(ctx.contractName),
+        'src/pages/HealthPage.tsx': healthPage(ctx.contractName),
+        'src/styles.css': STYLES,
+        'src/env.d.ts': '/// <reference types="vite/client" />\n',
+        'index.html': indexHtml(),
+        '.env.example': CLIENT_ENV_EXAMPLE,
+        'README.md': buildReadme({
+            name: ctx.pkgName,
+            description: 'Vite + React RRRoutes client scaffold.',
+            scripts: [...VITE_CLIENT_SCRIPTS],
+            sections: [
+                {
+                    title: 'Getting Started',
+                    lines: [
+                        '- Install deps: `npm install` (or `pnpm install`).',
+                        '- Copy `.env.example` to `.env` and tweak URLs as needed.',
+                        '- Start dev mode: `npm run dev`.',
+                        '- Build output: `npm run build`, preview with `npm run preview`.',
+                    ],
+                },
+                {
+                    title: 'Contract wiring',
+                    lines: [
+                        ctx.contractName
+                            ? `- Contract wired to ${ctx.contractName}; adjust the import in \`src/lib/queryClient.ts\` if needed.`
+                            : '- Update `src/lib/queryClient.ts` and `src/lib/socket.tsx` with your contract import to enable HTTP + socket helpers.',
+                    ],
+                },
+                {
+                    title: 'Environment',
+                    lines: [
+                        '- `VITE_API_URL` sets the API base URL (default http://localhost:4000).',
+                        '- `VITE_SOCKET_URL` and `VITE_SOCKET_PATH` configure socket connections.',
+                    ],
+                },
+            ],
+        }),
+        ...basePackageFiles(),
+    };
+    for (const [relative, contents] of Object.entries(files)) {
+        // eslint-disable-next-line no-await-in-loop
+        await writeFileIfMissing(ctx.targetDir, relative, contents);
+    }
+}

package/dist/create-package/variants/client/shared.js

@@ -0,0 +1,56 @@
+import { scaffoldExpoReactNativeClient } from './client_expo_rn.js';
+import { scaffoldViteReactClient } from './client_vite_r.js';
+export const CLIENT_KIND_OPTIONS = [
+    {
+        id: 'vite-react',
+        label: 'Vite + React (web)',
+        summary: 'Vite SPA with React Query and socket helpers.',
+    },
+    {
+        id: 'expo-react-native',
+        label: 'Expo + React Native (mobile)',
+        summary: 'Expo-managed React Native app with RRRoutes client wiring.',
+    },
+];
+export const DEFAULT_CLIENT_KIND = 'vite-react';
+export function normalizeClientKind(input) {
+    if (!input)
+        return undefined;
+    const normalized = input.trim().toLowerCase();
+    if (!normalized)
+        return undefined;
+    if (['vite', 'vite-react', 'react', 'web', 'spa', 'v'].includes(normalized)) {
+        return 'vite-react';
+    }
+    if (['expo', 'rn', 'react-native', 'expo-react-native', 'native', 'e'].includes(normalized)) {
+        return 'expo-react-native';
+    }
+    return undefined;
+}
+const scaffolders = {
+    'vite-react': scaffoldViteReactClient,
+    'expo-react-native': scaffoldExpoReactNativeClient,
+};
+export const clientVariant = {
+    id: 'rrr-client',
+    label: 'rrr client',
+    defaultDir: 'packages/rrr-client',
+    summary: 'RRRoutes client scaffold (pick Vite + React web or Expo + React Native).',
+    keyFiles: [
+        'package.json',
+        'tsconfig.json',
+        'src/lib/queryClient.ts or src/queryClient.ts',
+        'src/lib/socket.tsx or src/socket.tsx',
+    ],
+    scripts: ['dev', 'build', 'typecheck', 'lint', 'format'],
+    notes: [
+        'Pick a contract from discovered workspace packages (or skip) during scaffolding.',
+        'Choose between a Vite-powered web client or an Expo React Native mobile client.',
+        'If you skip a contract, stub endpoints/sockets are generated so the project still builds.',
+    ],
+    async scaffold(ctx) {
+        const kind = ctx.clientKind ?? DEFAULT_CLIENT_KIND;
+        const scaffolder = scaffolders[kind] ?? scaffoldViteReactClient;
+        await scaffolder({ ...ctx, clientKind: kind });
+    },
+};