diff --git a/components/webcontainer-provider.tsx b/components/webcontainer-provider.tsx deleted file mode 100644 index 6ebc4f44bc..0000000000 --- a/components/webcontainer-provider.tsx +++ /dev/null @@ -1,122 +0,0 @@ -'use client' - -import { createContext, useCallback, useContext, useEffect, useState } from 'react' -import { AlertTriangle } from 'lucide-react' -import { executeCode, getWebContainer } from '@/lib/webcontainer' - -// Create a context for WebContainer state and utilities -interface WebContainerContextType { - isReady: boolean - error: string | null - executeFunction: (code: string, params?: Record) => Promise -} - -const WebContainerContext = createContext({ - isReady: false, - error: null, - executeFunction: async () => ({ success: false, error: 'WebContainer not initialized' }), -}) - -// Hook to use WebContainer -export const useWebContainer = () => useContext(WebContainerContext) - -/** - * WebContainerProvider initializes the WebContainer API on the client side - * This component should be included near the root of the application - */ -export function WebContainerProvider({ children }: { children: React.ReactNode }) { - const [isInitialized, setIsInitialized] = useState(false) - const [error, setError] = useState(null) - const [isIsolated, setIsIsolated] = useState(null) - - // Function to execute code directly from client components - const executeFunction = useCallback( - async (code: string, params: Record = {}) => { - if (!isInitialized) { - return { - success: false, - output: {}, - error: 'WebContainer not initialized', - } - } - - try { - return await executeCode(code, params) - } catch (err: any) { - console.error('WebContainer execution error:', err) - return { - success: false, - output: {}, - error: err.message || 'Error executing function', - } - } - }, - [isInitialized] - ) - - useEffect(() => { - // Check if we're in a cross-origin isolated context - if (typeof window !== 'undefined') { - setIsIsolated(!!window.crossOriginIsolated) - } - - const initWebContainer = async () => { - try { - // Initialize WebContainer when the component mounts - await getWebContainer() - setIsInitialized(true) - } catch (err: any) { - console.error('Failed to initialize WebContainer:', err) - setError(err.message || 'Failed to initialize WebContainer') - } - } - - // Only try to initialize if we're properly isolated - if (isIsolated) { - initWebContainer() - } - }, [isIsolated]) - - // Provide WebContainer context - const contextValue = { - isReady: isInitialized, - error, - executeFunction, - } - - if (error || isIsolated === false) { - const needsRestart = error?.includes('restart') || !isIsolated - - return ( - -
-
- -
-

WebContainer Error

-

- {isIsolated === false - ? 'Cross-Origin Isolation is not enabled. WebContainers require COOP/COEP headers.' - : error} -

- {needsRestart && ( -

- Please restart the server for the COOP/COEP headers to take effect. -

- )} -

- Note: Function blocks will fall back to less secure VM-based execution until this is - resolved. -

-
-
-
- {children} -
- ) - } - - return ( - {children} - ) -} diff --git a/next.config.ts b/next.config.ts index 1e4fd9aec4..550afe2efc 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,10 +1,6 @@ import type { NextConfig } from 'next' const nextConfig: NextConfig = { - devIndicators: { - buildActivity: false, - appIsrStatus: false, - }, images: { domains: ['avatars.githubusercontent.com'], },