@emeryld/manager 0.5.0 → 0.6.0

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

@@ -0,0 +1,530 @@
+import { BASE_LINT_DEV_DEPENDENCIES, basePackageFiles, basePackageJson, baseScripts, buildReadme, isWorkspaceRoot, packageTsConfig, writeFileIfMissing, } from '../../shared.js';
+const EXPO_CLIENT_SCRIPTS = [
+    'dev',
+    'build',
+    'typecheck',
+    'lint',
+    'lint:fix',
+    'format',
+    'format:check',
+    'clean',
+    'start',
+    'android',
+    'ios',
+    'web',
+    'test',
+];
+function slugify(name) {
+    const cleaned = name.replace(/^@/, '').replace(/\//g, '-');
+    const slug = cleaned
+        .split(/[^a-zA-Z0-9]+/)
+        .filter(Boolean)
+        .join('-')
+        .toLowerCase();
+    return slug || 'rrr-client';
+}
+function nativePackageJson(name, contractName, includePrepare) {
+    const dependencies = {
+        '@emeryld/rrroutes-client': '^2.5.3',
+        '@tanstack/react-query': '^5.90.12',
+        expo: '~52.0.8',
+        'expo-constants': '~16.0.2',
+        'expo-status-bar': '~2.0.1',
+        react: '18.3.1',
+        'react-native': '0.76.6',
+        'react-native-safe-area-context': '4.12.0',
+        'react-native-screens': '4.4.0',
+        'socket.io-client': '^4.8.3',
+        zod: '^4.2.1',
+    };
+    if (contractName)
+        dependencies[contractName] = 'workspace:*';
+    const devDependencies = {
+        ...BASE_LINT_DEV_DEPENDENCIES,
+        '@babel/core': '^7.25.2',
+        '@types/react': '~18.2.79',
+        '@types/react-native': '~0.73.0',
+        'babel-preset-expo': '^11.0.0',
+        typescript: '^5.9.3',
+    };
+    return basePackageJson({
+        name,
+        main: 'expo/AppEntry',
+        useDefaults: false,
+        scripts: baseScripts('expo start', {
+            start: 'expo start',
+            android: 'expo start --android',
+            ios: 'expo start --ios',
+            web: 'expo start --web',
+            build: 'tsc -p tsconfig.json --noEmit',
+            test: 'echo "add tests"',
+        }, { includePrepare }),
+        dependencies,
+        devDependencies,
+    });
+}
+function nativeAppJson(pkgName) {
+    const baseSlug = slugify(pkgName);
+    const slug = `${baseSlug}-client`;
+    return `${JSON.stringify({
+        expo: {
+            name: slug,
+            slug,
+            version: '0.1.0',
+            orientation: 'portrait',
+            scheme: baseSlug,
+            platforms: ['ios', 'android', 'web'],
+            userInterfaceStyle: 'light',
+            extra: {
+                apiUrl: 'http://localhost:4000',
+                socketUrl: 'http://localhost:4000',
+                socketPath: '/socket.io',
+            },
+            experiments: {
+                typedRoutes: false,
+            },
+        },
+    }, null, 2)}\n`;
+}
+const NATIVE_BABEL = `module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+  }
+}
+`;
+function nativeQueryClient(contractImport) {
+    if (contractImport) {
+        return `import Constants from 'expo-constants'
+import { QueryClient } from '@tanstack/react-query'
+import { createRouteClient } from '@emeryld/rrroutes-client'
+import { registry } from '${contractImport}'
+
+const { apiUrl } = (Constants.expoConfig?.extra ?? {}) as Record<string, string>
+
+export const queryClient = new QueryClient()
+
+export const routeClient = createRouteClient({
+  baseUrl: apiUrl ?? 'http://localhost:4000',
+  queryClient,
+})
+
+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 Constants from 'expo-constants'
+import { QueryClient } from '@tanstack/react-query'
+import { createRouteClient } from '@emeryld/rrroutes-client'
+
+const { apiUrl } = (Constants.expoConfig?.extra ?? {}) as Record<string, string>
+
+export const queryClient = new QueryClient()
+
+export const routeClient = createRouteClient({
+  baseUrl: apiUrl ?? 'http://localhost:4000',
+  queryClient,
+})
+
+type RouteEndpoint = ReturnType<typeof routeClient.build>
+
+function placeholderUseEndpoint() {
+  const error = new Error('Add your contract import to src/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 nativeSocket(contractImport) {
+    if (contractImport) {
+        return `import React from 'react'
+import Constants from 'expo-constants'
+import { io, type Socket } from 'socket.io-client'
+import {
+  buildSocketProvider,
+  type SocketClientOptions,
+} from '@emeryld/rrroutes-client'
+import { socketConfig, socketEvents } from '${contractImport}'
+
+const extras = (Constants.expoConfig?.extra ?? {}) as Record<string, string>
+const socketUrl = extras.socketUrl ?? 'http://localhost:4000'
+const socketPath = extras.socketPath ?? '/socket.io'
+
+const sysEvents: SocketClientOptions<
+  typeof socketEvents,
+  typeof socketConfig
+>['sys'] = {
+  'sys:connect': async ({ socket }) => {
+    console.log('socket connected', socket.id)
+  },
+  'sys:disconnect': async ({ reason }) => console.log('disconnected', reason),
+  'sys:reconnect': async ({ attempt, socket }) =>
+    console.log('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.log('pong', payload),
+  'sys:room_join': async ({ rooms }) => {
+    console.log('join rooms', rooms)
+    return true
+  },
+  'sys:room_leave': async ({ rooms }) => {
+    console.log('leave rooms', rooms)
+    return true
+  },
+}
+
+const baseOptions: Omit<
+  SocketClientOptions<typeof socketEvents, typeof socketConfig>,
+  'socket'
+> = {
+  config: socketConfig,
+  sys: sysEvents,
+  heartbeat: { intervalMs: 15_000, timeoutMs: 7_500 },
+  debug: { connection: 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={<></>}
+    >
+      {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/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 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',
+  },
+})
+`;
+}
+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 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 HealthScreen() {
+  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(\`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 (
+    <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'], roomMeta)}
+              />
+              <Button
+                title="Leave room"
+                onPress={() => socket.leaveRooms(['health'], 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',
+  },
+})
+`;
+}
+export async function scaffoldExpoReactNativeClient(ctx) {
+    const includePrepare = isWorkspaceRoot(ctx.targetDir);
+    const tsconfig = await packageTsConfig(ctx.targetDir, {
+        include: ['App.tsx', 'src/**/*.ts', 'src/**/*.tsx'],
+        jsx: 'react-native',
+        types: ['react', 'react-native'],
+        rootDir: '.',
+    });
+    const files = {
+        'package.json': nativePackageJson(ctx.pkgName, ctx.contractName, includePrepare),
+        'tsconfig.json': tsconfig,
+        'app.json': nativeAppJson(ctx.pkgName),
+        'babel.config.js': NATIVE_BABEL,
+        'App.tsx': nativeAppTsx(),
+        'src/queryClient.ts': nativeQueryClient(ctx.contractName),
+        'src/socket.tsx': nativeSocket(ctx.contractName),
+        'src/screens/HealthScreen.tsx': nativeHealthScreen(),
+        'README.md': buildReadme({
+            name: ctx.pkgName,
+            description: 'Expo + React Native RRRoutes client scaffold.',
+            scripts: [...EXPO_CLIENT_SCRIPTS],
+            sections: [
+                {
+                    title: 'Getting Started',
+                    lines: [
+                        '- Install deps: `npm install` (or `pnpm install`).',
+                        '- Start Expo dev server: `npm run dev` (or `npm start`).',
+                        '- Launch on device/simulator: `npm run android`, `npm run ios`, or `npm run web`.',
+                    ],
+                },
+                {
+                    title: 'Contract wiring',
+                    lines: [
+                        ctx.contractName
+                            ? `- Contract wired to ${ctx.contractName}; adjust the import in \`src/queryClient.ts\` if needed.`
+                            : '- Update `src/queryClient.ts` and `src/socket.tsx` with your contract import to enable HTTP + socket helpers.',
+                    ],
+                },
+                {
+                    title: 'Environment',
+                    lines: [
+                        '- `app.json` extra values (`apiUrl`, `socketUrl`, `socketPath`) configure runtime endpoints.',
+                        '- Update those values or read from native env as needed.',
+                    ],
+                },
+            ],
+        }),
+        ...basePackageFiles(),
+    };
+    for (const [relative, contents] of Object.entries(files)) {
+        // eslint-disable-next-line no-await-in-loop
+        await writeFileIfMissing(ctx.targetDir, relative, contents);
+    }
+}