@emeryld/manager 1.3.0 → 1.4.0

package/dist/create-package/variants/client/expo-react-native/ui-files.js

@@ -0,0 +1,215 @@
+export function nativeAppTsx() {
+    return `import React from 'react'
+import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text } from 'react-native'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { queryClient, hasContract } from './src/queryClient'
+import { AppSocketProvider } from './src/socket'
+import { HealthScreen } from './src/screens/HealthScreen'
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AppSocketProvider>
+        <StatusBar barStyle="dark-content" />
+        <SafeAreaView style={styles.container}>
+          {!hasContract ? (
+            <Text style={styles.notice}>
+              Add your contract import in src/queryClient.ts and src/socket.tsx to enable
+              API + socket helpers.
+            </Text>
+          ) : null}
+          <ScrollView contentInsetAdjustmentBehavior="automatic">
+            <HealthScreen />
+          </ScrollView>
+        </SafeAreaView>
+      </AppSocketProvider>
+    </QueryClientProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    backgroundColor: '#f4f5fb',
+  },
+  notice: {
+    backgroundColor: '#fff7ed',
+    borderColor: '#fed7aa',
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+    color: '#9a3412',
+  },
+})
+`;
+}
+export function nativeHealthScreen() {
+    return `import React from 'react'
+import {
+  Button,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native'
+import { healthGet, healthPost, hasContract } from '../queryClient'
+import { roomMeta, useSocketClient, useSocketConnection, socketReady } from '../socket'
+
+const HEALTH_ROOMS = ['health']
+
+function useHealthSocket(event: string, onMessage: (payload: Record<string, unknown>) => void) {
+  useSocketConnection({
+    event,
+    rooms: HEALTH_ROOMS,
+    joinMeta: roomMeta,
+    leaveMeta: roomMeta,
+    onMessage,
+  })
+}
+
+function useLogs() {
+  const [logs, setLogs] = React.useState<string[]>([])
+  return {
+    logs,
+    push: (msg: string) =>
+      setLogs((prev) => ['[' + new Date().toLocaleTimeString() + '] ' + msg, ...prev].slice(0, 60)),
+    clear: () => setLogs([]),
+  }
+}
+
+export function HealthScreen() {
+  const [echo, setEcho] = React.useState('hello rrroute')
+  const httpGet = healthGet.useEndpoint()
+  const httpPost = healthPost.useEndpoint()
+  const socket = useSocketClient()
+  const { logs, push, clear } = useLogs()
+
+  useHealthSocket('health:connected', (payload) => {
+    push('connected ' + String(payload.socketId))
+  })
+
+  useHealthSocket('health:pong', (payload) => {
+    const echo = payload.echo ? ' (echo: ' + String(payload.echo) + ')' : ''
+    push('pong at ' + String(payload.at) + echo)
+  })
+
+  return (
+    <View style={styles.card}>
+      <Text style={styles.title}>RRRoutes health sandbox</Text>
+      <View style={styles.section}>
+        <Text style={styles.heading}>HTTP</Text>
+        {!hasContract ? (
+          <Text style={styles.muted}>
+            Wire up a contract to enable typed HTTP calls.
+          </Text>
+        ) : (
+          <>
+            <Button title="GET /health" onPress={() => httpGet.refetch()} />
+            <View style={{ height: 12 }} />
+            <TextInput
+              style={styles.input}
+              value={echo}
+              onChangeText={setEcho}
+              placeholder="echo payload"
+            />
+            <Button
+              title="POST /health"
+              onPress={() =>
+                httpPost
+                  .mutateAsync({ echo })
+                  .then(() => push('POST /health ok'))
+              }
+            />
+            <Text style={styles.label}>GET data</Text>
+            <Text style={styles.code}>
+              {JSON.stringify(httpGet.data ?? {}, null, 2)}
+            </Text>
+            <Text style={styles.label}>POST data</Text>
+            <Text style={styles.code}>
+              {JSON.stringify(httpPost.data ?? {}, null, 2)}
+            </Text>
+          </>
+        )}
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.heading}>Socket</Text>
+        {!socketReady ? (
+          <Text style={styles.muted}>
+            Wire up socket events via your contract to enable live updates.
+          </Text>
+        ) : (
+          <>
+            <View style={styles.row}>
+              <Button title="Connect" onPress={() => socket.connect()} />
+              <Button title="Disconnect" onPress={() => socket.disconnect()} />
+            </View>
+            <View style={{ height: 8 }} />
+            <Button
+              title="Emit ping"
+              onPress={() =>
+                socket.emit('health:ping', { note: 'ping from app' })
+              }
+            />
+            <View style={{ height: 8 }} />
+            <View style={styles.row}>
+              <Button
+                title="Join room"
+                onPress={() => socket.joinRooms(HEALTH_ROOMS, roomMeta)}
+              />
+              <Button
+                title="Leave room"
+                onPress={() => socket.leaveRooms(HEALTH_ROOMS, roomMeta)}
+              />
+            </View>
+          </>
+        )}
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.heading}>Socket logs</Text>
+        <Button title="Clear logs" onPress={clear} />
+        <Text style={styles.code}>
+          {logs.length === 0 ? 'No messages yet' : logs.join('\\n')}
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+  },
+  title: { fontSize: 20, fontWeight: '700' },
+  section: { gap: 8 },
+  heading: { fontWeight: '600', fontSize: 16 },
+  row: { flexDirection: 'row', gap: 8, justifyContent: 'space-between' },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d0d4de',
+    borderRadius: 8,
+    padding: 8,
+  },
+  label: { marginTop: 6, fontWeight: '600' },
+  code: {
+    backgroundColor: '#0f172a',
+    color: '#e2e8f0',
+    padding: 8,
+    borderRadius: 8,
+    fontFamily: 'Courier',
+  },
+  muted: {
+    color: '#6b7280',
+  },
+})
+`;
+}

package/dist/create-package/variants/client/vite-react/health-page.js

@@ -0,0 +1,251 @@
+export function HealthPage() {
+    return `import React from 'react'
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import { healthGet, healthPost, hasContract } from '../lib/queryClient'
+import {
+  roomMeta,
+  socketReady,
+  useSocketClient,
+  useSocketConnection,
+} from '../lib/socket'
+
+const HEALTH_ROOMS = ['health']
+
+function now() {
+  return new Date().toLocaleTimeString()
+}
+
+function useHealthSocket(event: string, onMessage: (payload: Record<string, unknown>) => void) {
+  useSocketConnection({
+    event,
+    rooms: HEALTH_ROOMS,
+    joinMeta: roomMeta,
+    leaveMeta: roomMeta,
+    onMessage,
+  })
+}
+
+function useLogs() {
+  const [logs, setLogs] = React.useState<string[]>([])
+  return {
+    logs,
+    push: (msg: string) =>
+      setLogs((prev) => ['[' + now() + '] ' + msg, ...prev].slice(0, 60)),
+    clear: () => setLogs([]),
+  }
+}
+
+type HttpSectionProps = {
+  echo: string
+  onEchoChange: (value: string) => void
+  onLog: (message: string) => void
+  httpGet: ReturnType<typeof healthGet.useEndpoint>
+  httpPost: ReturnType<typeof healthPost.useEndpoint>
+}
+
+function HttpSection({ echo, onEchoChange, onLog, httpGet, httpPost }: HttpSectionProps) {
+  return (
+    <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) => onEchoChange(e.target.value)}
+              placeholder="echo payload"
+              style={{ width: '100%', padding: '8px' }}
+            />
+            <div style={{ marginTop: 8 }}>
+              <button
+                onClick={() =>
+                  httpPost.mutateAsync({ echo }).then(() => onLog('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>
+  )
+}
+
+type SocketSectionProps = {
+  socket: ReturnType<typeof useSocketClient>
+  onLog: (message: string) => void
+  hasError: boolean
+}
+
+function SocketSection({ socket, onLog, hasError }: SocketSectionProps) {
+  return (
+    <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_ROOMS, roomMeta)}
+            >
+              Join room
+            </button>
+            <button
+              className="secondary"
+              onClick={() => socket.leaveRooms(HEALTH_ROOMS, roomMeta)}
+            >
+              Leave room
+            </button>
+          </div>
+          {hasError ? (
+            <p style={{ color: 'crimson', marginTop: 8 }}>
+              Check server logs; errors will also show above.
+            </p>
+          ) : null}
+        </>
+      )}
+    </div>
+  )
+}
+
+type LogsSectionProps = {
+  logs: string[]
+  onClear: () => void
+}
+
+function LogsSection({ logs, onClear }: LogsSectionProps) {
+  return (
+    <div className="card">
+      <h2>Socket logs</h2>
+      <button className="secondary" onClick={onClear}>
+        Clear
+      </button>
+      <div className="logs">
+        {logs.length === 0 ? 'No messages yet' : logs.join('\\n')}
+      </div>
+    </div>
+  )
+}
+
+type ChartSectionProps = {
+  chartData: { name: string; value: number }[]
+}
+
+function ChartSection({ chartData }: ChartSectionProps) {
+  return (
+    <div className="card chart-card">
+      <h2>Live state</h2>
+      <div className="chart-container">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={chartData}>
+            <XAxis dataKey="name" />
+            <YAxis />
+            <Tooltip />
+            <Bar dataKey="value" fill="#2563eb" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}
+
+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()
+
+  const chartData = React.useMemo(
+    () => [
+      { name: 'Logs', value: logs.length },
+      { name: 'Socket ready', value: socketReady ? 1 : 0 },
+      {
+        name: 'HTTP errors',
+        value: Number(Boolean(httpGet.error || httpPost.error)),
+      },
+    ],
+    [logs.length, socketReady, httpGet.error, httpPost.error],
+  )
+
+  useHealthSocket('health:connected', (payload) => {
+    push('socket connected (' + String(payload.socketId) + ')')
+  })
+
+  useHealthSocket('health:pong', (payload) => {
+    const echo = payload.echo ? ' (echo: ' + String(payload.echo) + ')' : ''
+    push('pong at ' + String(payload.at) + 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">
+        <HttpSection
+          echo={echo}
+          onEchoChange={setEcho}
+          onLog={push}
+          httpGet={httpGet}
+          httpPost={httpPost}
+        />
+        <SocketSection
+          socket={socket}
+          onLog={push}
+          hasError={Boolean(httpGet.error || httpPost.error)}
+        />
+        <LogsSection logs={logs} onClear={clear} />
+        <ChartSection chartData={chartData} />
+      </div>
+    </div>
+  )
+}
+`;
+}

package/dist/create-package/variants/client/vite-react/lib-files.js

@@ -0,0 +1,176 @@
+export 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
+`;
+}
+export 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
+}
+`;
+}