{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install oc-client-browser"],"cli":null},"imports":["\n","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","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});"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}