frontend/packages/arch/web-context/README.md
Global Context for whole hot studio web app. You should keep using this package instead of call
window.xxxdirectly
A centralized context management package that provides global state, event handling, and navigation utilities for Coze Studio web applications. This package helps you avoid direct window object manipulation and provides a structured way to handle global application state.
# Add to package.json
"@coze-arch/web-context": "workspace:*"
# Then run
rush update
import {
globalVars,
GlobalEventBus,
redirect,
BaseEnum,
SpaceAppEnum,
COZE_TOKEN_INSUFFICIENT_ERROR_CODE
} from '@coze-arch/web-context';
// Use global variables
globalVars.LAST_EXECUTE_ID = 'some-execution-id';
console.log(globalVars.LAST_EXECUTE_ID);
// Create and use event bus
const eventBus = GlobalEventBus.create('myEventBus');
eventBus.on('dataChanged', (data) => {
console.log('Data changed:', data);
});
eventBus.emit('dataChanged', { newValue: 'test' });
// Navigate safely
redirect('/new-page');
globalVarsA proxy-based storage for global variables that provides type-safe access to shared state.
import { globalVars } from '@coze-arch/web-context';
// Set a global variable
globalVars.LAST_EXECUTE_ID = 'abc123';
globalVars.MY_CUSTOM_VAR = { key: 'value' };
// Get a global variable
const executeId = globalVars.LAST_EXECUTE_ID; // string
const customVar = globalVars.MY_CUSTOM_VAR; // unknown
// Undefined for unset variables
const unsetVar = globalVars.NONEXISTENT; // undefined
Features:
undefined for unset propertiesGlobalEventBus.create<T>(key: string)Creates or retrieves a singleton event bus instance for the given key.
import { GlobalEventBus } from '@coze-arch/web-context';
// Define event types
interface MyEvents {
userLogin: [userId: string];
dataUpdate: [data: { id: string; value: unknown }];
error: [error: Error];
}
// Create event bus
const eventBus = GlobalEventBus.create<MyEvents>('app');
// Subscribe to events
eventBus.on('userLogin', (userId) => {
console.log(`User ${userId} logged in`);
});
// Emit events
eventBus.emit('userLogin', 'user123');
// Unsubscribe
const handler = (data) => console.log(data);
eventBus.on('dataUpdate', handler);
eventBus.off('dataUpdate', handler);
// Stop event processing (events will be buffered)
eventBus.stop();
// Events emitted while stopped are buffered
eventBus.emit('userLogin', 'user456'); // Buffered
// Start processing (flushes buffer)
eventBus.start(); // Now 'user456' login event fires
// Clear buffered events
eventBus.clear();
Key Features:
redirect(href: string)Safely redirects to a new URL with potential for future validation logic.
import { redirect } from '@coze-arch/web-context';
// Redirect to external URL
redirect('https://example.com');
// Redirect to internal route
redirect('/dashboard');
// Redirect with query parameters
redirect('/search?q=test');
import { BaseEnum, SpaceAppEnum } from '@coze-arch/web-context';
// Base application sections
console.log(BaseEnum.Home); // 'home'
console.log(BaseEnum.Store); // 'store'
console.log(BaseEnum.Workspace); // 'space'
// Space-specific applications
console.log(SpaceAppEnum.BOT); // 'bot'
console.log(SpaceAppEnum.WORKFLOW); // 'workflow'
console.log(SpaceAppEnum.PLUGIN); // 'plugin'
import { COZE_TOKEN_INSUFFICIENT_ERROR_CODE } from '@coze-arch/web-context';
// Check for token insufficient errors
const isTokenError = COZE_TOKEN_INSUFFICIENT_ERROR_CODE.includes(errorCode);
if (isTokenError) {
// Handle token insufficient error - stop streaming
}
import {
defaultConversationKey,
defaultConversationUniqId
} from '@coze-arch/web-context';
// Use in community bot store scenarios
const conversationId = defaultConversationKey; // -1
const uniqueId = defaultConversationUniqId; // Unique string
src/
├── const/ # Application constants
│ ├── app.ts # Base and space app enums
│ ├── community.ts # Community-specific constants
│ └── custom.ts # Error codes and custom constants
├── event-bus.ts # Global event bus implementation
├── global-var.ts # Global variables storage
├── location.ts # Navigation utilities
└── index.ts # Main exports
# Run tests
rush test --to @coze-arch/web-context
# Run tests with coverage
rush test:cov --to @coze-arch/web-context
# Lint the package
rush lint --to @coze-arch/web-context
uniqueId generation)window.xxx callsstop()/start() pattern for controlling event flowCopyright © ByteDance Ltd. All rights reserved.