{"id":15736,"library":"oc-client-browser","title":"OpenComponents Browser Client","description":"The `oc-client-browser` package is the client-side JavaScript library for the OpenComponents (OC) framework, facilitating browser-based rendering of independently deployed micro-frontends. OpenComponents, an open-source framework developed at OpenTable, enables building and managing self-contained UI components (HTML, CSS, JS, often with server-side Node.js logic) that are published to a central OC registry. Currently at version 2.1.10, the client integrates by being included as a script in a web page, exposing a global `oc` object. It automatically scans the DOM for `` custom elements, fetches component data and compiled views from a configured OC registry, and dynamically injects rendered HTML and executes client-side JavaScript. This library is crucial for the OC philosophy, which emphasizes framework-agnosticism, granular UI ownership, and independent deployment to combat monolithic frontend architectures.","status":"active","version":"2.1.10","language":"javascript","source_language":"en","source_url":"https://github.com/opencomponents/oc-client-browser","tags":["javascript","oc","opencomponents","typescript"],"install":[{"cmd":"npm install oc-client-browser","lang":"bash","label":"npm"},{"cmd":"yarn add oc-client-browser","lang":"bash","label":"yarn"},{"cmd":"pnpm add oc-client-browser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `oc-client-browser` library is designed for browser global scope access via a script tag. It exposes the `oc` object globally. Direct ES module `import` or CommonJS `require` is not the primary or recommended way to use its runtime.","wrong":"import oc from 'oc-client-browser';\nconst oc = require('oc-client-browser');","symbol":"oc","correct":"\n"},{"note":"To get TypeScript type safety for the global `oc` object, you typically need to declare it globally. If the package also ships types that define the `OCObject` interface, you might import it as a type.","wrong":"import { OCObject } from 'oc-client-browser';","symbol":"OCObject","correct":"declare global {\n interface Window {\n oc: OCObject;\n }\n}\n// Then use `window.oc` in your TypeScript code\n// import type { OCObject } from 'oc-client-browser'; // For types if bundled and exported"},{"note":"Functionality like `build` is accessed directly from the global `oc` object after the script has loaded and initialized.","wrong":"import { build } from 'oc-client-browser'; // Incorrect for runtime usage","symbol":"oc.build","correct":"window.oc.cmd.push(function(ocClient) {\n const componentHtml = ocClient.build({\n name: 'my-component',\n version: '~1.0.0',\n parameters: { data: 'value' }\n });\n document.getElementById('container').innerHTML = componentHtml;\n});"}],"quickstart":{"code":"\n\n\n \n \n OC Client Browser Quickstart\n \n\n\n

OpenComponents Browser Client Example

This page demonstrates client-side rendering of an OpenComponent fetched from a registry.

\n\n

Hello World Component

\n \n \n Loading 'hello-world' component...\n \n

\n\n

Dynamic Component

Loading dynamic component...

\n\n \n \n\n \n \n\n \n\n","lang":"typescript","description":"This HTML snippet demonstrates how to include the `oc-client-browser` script, configure global settings, and render OpenComponents using both declarative `` tags and dynamic `oc.build()` calls, ensuring all components are properly initialized and displayed in the browser."},"warnings":[{"fix":"Always include `oc-client-browser` via a `` tag for `oc-client-browser` is correctly placed in your HTML, typically at the end of the ``. If you need to interact with `oc` immediately, wrap your code in `window.oc.cmd.push(function(ocClient) { /* ... */ });` to defer execution until the client is ready.","cause":"The `oc-client-browser` script has not been loaded or has not finished initializing before `oc` is accessed.","error":"Uncaught ReferenceError: oc is not defined"},{"fix":"Check the browser's developer console for network errors (e.g., 404, 500 status codes for component requests) or JavaScript errors. Verify the component's `href` URL is correct and the OC registry is online and accessible. If `data-oc-params` is used, ensure the JSON is valid. Check the registry logs for errors related to the component.","cause":"The browser client failed to fetch or render the component from the registry. This can be due to an incorrect component `href`, an unreachable registry, network errors, or an issue with the component itself (e.g., server-side logic error, invalid template).","error":"Component stuck on 'Loading component...' or displaying fallback content indefinitely."},{"fix":"Add a global declaration file (e.g., `src/types/oc-client-browser.d.ts`) to your project. Inside, declare the global `oc` interface and its types. For example: `declare global { interface Window { oc: OCObject; } } interface OCObject { build: (options: any) => string; /* ... other methods */ }`.","cause":"The TypeScript compiler does not know about the global `oc` object that `oc-client-browser` exposes.","error":"TypeScript Error: Property 'oc' does not exist on type 'Window'."}],"ecosystem":"npm"}