diff --git a/apps/origin-pooling/App.tsx b/apps/origin-pooling/App.tsx new file mode 100644 index 0000000..e3ff4b0 --- /dev/null +++ b/apps/origin-pooling/App.tsx @@ -0,0 +1,308 @@ +/** + * Origin Pooling Demo + * + * Dynamically add/remove sandboxes under two shared origins (alpha, beta) + * plus an isolated (no-origin) option. Same-origin sandboxes share a + * ReactHost / Hermes VM; removing the last one triggers the idle TTL. + * + * Messaging is handled inside the sandbox widget via globalThis.postMessage. + * The host only logs messages received via onMessage. + */ +import SandboxReactNativeView from '@callstack/react-native-sandbox' +import React, {useCallback, useRef, useState} from 'react' +import { + Button, + Platform, + SafeAreaView, + ScrollView, + StatusBar, + StyleSheet, + Text, + View, +} from 'react-native' + +type SandboxEntry = {key: string; label: string; origin: string} +type LogEntry = {source: string; text: string; ts: number} + +let nextId = 0 + +const ORIGIN_ALPHA = 'alpha' +const ORIGIN_BETA = 'beta' +const COLOR_ALPHA = '#8232ff' +const COLOR_BETA = '#e67e22' +const COLOR_ISOLATED = '#6c757d' + +/** Alpha uses a function-based TTL (4 seconds) */ +const ALPHA_TTL = () => 4000 +/** Beta and isolated use a static TTL (2 seconds) */ +const DEFAULT_TTL = 2000 + +export default function App() { + const [sandboxes, setSandboxes] = useState([]) + const [log, setLog] = useState([]) + const logScrollRef = useRef(null) + + const addLog = useCallback((source: string, text: string) => { + setLog(prev => [...prev.slice(-49), {source, text, ts: Date.now()}]) + }, []) + + const addSandbox = useCallback((origin: string) => { + const id = String(++nextId) + setSandboxes(prev => [...prev, {key: id, label: `#${id}`, origin}]) + }, []) + + const removeSandbox = useCallback((key: string) => { + setSandboxes(prev => prev.filter(s => s.key !== key)) + }, []) + + const clearLog = useCallback(() => setLog([]), []) + + const alphas = sandboxes.filter(s => s.origin === ORIGIN_ALPHA) + const betas = sandboxes.filter(s => s.origin === ORIGIN_BETA) + const isolated = sandboxes.filter(s => s.origin === '') + + return ( + + Origin Pooling Demo + + Same-origin sandboxes share a VM. Alpha: function-based TTL (4s). Beta: + static TTL (2s). + + + +