Context Utilities

/**
 * React context for sharing data between framework and child applications
 * Initialized with empty object by default
 */
export const FrameworkContext: React.Context<{}>;

/**
 * Hook to access framework context with type safety
 * @returns Typed context data from FrameworkContext
 * @template T - Type of the context data object
 */
export function useFrameworkContext<T extends object>(): T;

import { useFrameworkContext } from '@ice/plugin-icestark/Context';

// Define the expected context type
interface AppContextData {
  theme: 'light' | 'dark';
  user: { id: string; name: string };
  permissions: string[];
}

// Use the context in a child application component
function ChildComponent() {
  const contextData = useFrameworkContext<AppContextData>();
  
  return (
    <div className={`theme-${contextData.theme}`}>
      <h1>Welcome, {contextData.user.name}</h1>
      {contextData.permissions.includes('admin') && (
        <button>Admin Panel</button>
      )}
    </div>
  );
}

// Use in a framework layout component
function FrameworkLayout() {
  const contextData = useFrameworkContext<AppContextData>();
  
  return (
    <header>
      Current theme: {contextData.theme}
      User: {contextData.user.name}
    </header>
  );
}

// Automatically generated by child runtime
<FrameworkContext.Provider value={{ ...customProps }}>
  {childApplication}
</FrameworkContext.Provider>

// Framework application (src/app.ts)
import { defineFrameworkConfig } from '@ice/plugin-icestark/types';

export const icestark = defineFrameworkConfig({
  getApps: () => [
    {
      name: 'child-app',
      activePath: '/child',
      container: '#child-container',
      url: ['//localhost:3001/build/js/index.js'],
      // Custom properties passed to child
      props: {
        theme: 'dark',
        apiBaseUrl: 'https://api.example.com',
        permissions: ['read', 'write'],
      },
    },
  ],
});

// Child application component
import { useFrameworkContext } from '@ice/plugin-icestark/Context';

interface FrameworkProps {
  theme: string;
  apiBaseUrl: string;
  permissions: string[];
}

function ChildApp() {
  const { theme, apiBaseUrl, permissions } = useFrameworkContext<FrameworkProps>();
  
  // Use framework-provided data
  const apiClient = new ApiClient(apiBaseUrl);
  
  return (
    <div data-theme={theme}>
      <h1>Child Application</h1>
      {permissions.includes('write') && (
        <button>Create New Item</button>
      )}
    </div>
  );
}