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 `<oc-component>` 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.
npm install oc-client-browserVerified import paths — ran on the pinned version, not inferred.
This HTML snippet demonstrates how to include the `oc-client-browser` script, configure global settings, and render OpenComponents using both declarative `<oc-component>` tags and dynamic `oc.build()` calls, ensuring all components are properly initialized and displayed in the browser.
Always include `oc-client-browser` via a `<script>` tag in your HTML. For TypeScript, use global declarations to inform the compiler about the `window.oc` object. If using a bundler for client-side code, ensure it's configured to treat `oc-client-browser` as an external global library.
It is recommended to place the `oc-client-browser` script at the very end of your `<body>` tag. This allows the DOM to be parsed and `<oc-component>` tags to be available before the client initializes and performs its automatic rendering scan. If placing it earlier, ensure you explicitly call `window.oc.renderUnloadedComponents()` after your component tags are present in the DOM.
Ensure the OC registry URL (specified in `<oc-component href>` or `oc.conf.baseUrl`) is correct and reachable from the client's browser. Monitor browser console for network errors. The client includes a retry mechanism (`oc.conf.retryInterval` and `oc.conf.maxRetries`) which can be configured to tolerate transient issues. Check the OC registry logs for component errors.
Always refer to the official OpenComponents documentation for specific component and registry version compatibility. Pin component versions (`~1.0.0` or `1.2.3`) to prevent unexpected updates. Conduct thorough testing when upgrading any part of the OpenComponents ecosystem to ensure client-side rendering remains stable.
Ensure the `<script src="..."></script>` tag for `oc-client-browser` is correctly placed in your HTML, typically at the end of the `<body>`. 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.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.
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 */ }`.No dependency data recorded yet.