### HTML Page for Component Preview Source: https://opencomponents.github.io/docs/components/getting-started An example HTML structure to embed and preview an OpenComponent. It includes the custom element `` and the OC client script for rendering. ```html Optionally, some failover text here ``` -------------------------------- ### Preview OpenComponent Directly Source: https://opencomponents.github.io/docs/components/getting-started Command to preview a specific OpenComponent directly from the command line, useful for quick checks without setting up a full HTML page. ```bash $ oc preview http://localhost:3030/hello-world ``` -------------------------------- ### Local Development Server Command Source: https://opencomponents.github.io/docs/components/getting-started Command to start a local development server for OpenComponents, allowing you to test and debug components in real-time. ```bash $ oc dev . 3030 ``` -------------------------------- ### Initialize OpenComponent Source: https://opencomponents.github.io/docs/components/getting-started Command to initialize a new OpenComponent project. It creates the basic directory structure and configuration files. You can optionally specify a template type. ```bash $ oc init hello-world ``` ```bash $ oc init hello-world oc-template-es6 ``` -------------------------------- ### OpenComponent Directory Structure Source: https://opencomponents.github.io/docs/components/getting-started Illustrates the basic file and directory layout for an OpenComponent, including configuration, view, server logic, and static assets. ```tree ├── hello-world/ ├── package.json ├── src/view.ts ├── src/server.ts ├── public/ ├── logo.png ``` -------------------------------- ### Basic OpenComponent Server Logic Source: https://opencomponents.github.io/docs/components/getting-started Provides a basic example of the server.js file, which handles the data logic for a component. It exports a data function that receives context and parameters to generate a view model. ```javascript exportconstdata=(context, callback)=>{ const{ name }= context.params; const{ staticPath }= context; callback(null,{ name, staticPath, }); }; ``` -------------------------------- ### Set Up OpenComponents Registry Source: https://opencomponents.github.io/docs/quick-start-tutorial Details the steps to set up an OpenComponents registry for production, including creating a directory, initializing npm, installing the `oc` package, and creating a configuration file. ```bash mkdir my-oc-registry cd my-oc-registry npm init -y npm install oc --save ``` -------------------------------- ### Verify OpenComponents CLI Installation Source: https://opencomponents.github.io/docs/quick-start-tutorial Checks the installed version of the OpenComponents CLI. This helps confirm that the installation was successful and provides the version number for reference. ```bash oc --version ``` -------------------------------- ### Install OpenComponents CLI Source: https://opencomponents.github.io/docs/quick-start-tutorial Installs the OpenComponents Command Line Interface globally using npm. This command is essential for creating and managing OpenComponents projects. ```bash npm install -g oc ``` -------------------------------- ### Install OpenComponents CLI Source: https://opencomponents.github.io/docs/quick-start-tutorial This section details the steps required to install the OpenComponents Command Line Interface (CLI). The CLI is essential for generating and managing OpenComponents projects. ```shell # Step 0: Install the CLI # (Command to install the CLI would typically go here, e.g., npm install -g opencomponents-cli) ``` -------------------------------- ### Install OpenComponents CLI and Initialize a Component Source: https://opencomponents.github.io/docs/intro This snippet shows how to install the OpenComponents command-line interface globally using npm and then initialize a new component project. It's the first step to getting started with building components. ```bash npm install -g oc oc init my-component ``` -------------------------------- ### Start Local Development Source: https://opencomponents.github.io/docs/quick-start-tutorial Guidance on how to start a local development server for testing OpenComponents. This includes checking component information and understanding different component URLs. ```shell # Step 3: Start Local Development # Commands to start the local server and test components would go here. ``` -------------------------------- ### OpenComponent package.json Structure Source: https://opencomponents.github.io/docs/components/getting-started Defines the structure of the package.json file for an OpenComponent, including component metadata, OC-specific configurations for files and parameters, and development dependencies. ```json { "name":"base-component-es6", "description":"", "version":"1.0.0", "oc":{ "files":{ "data":"server.js", "static":["img"], "template":{ "src":"src/view.ts", "type":"oc-template-es6" } }, "parameters":{ "name":{ "default":"Jane Doe", "description":"Your name", "example":"Jane Doe", "mandatory":false, "type":"string" } } }, "devDependencies":{ "oc-template-handlebars-compiler":"6.0.8" } } ``` -------------------------------- ### Test Client-Side Rendering with HTML Source: https://opencomponents.github.io/docs/quick-start-tutorial Provides an example HTML file to test client-side rendering of an OpenComponent. It includes the `oc-component` tag and the OpenComponents client script. ```html Testing My Component

My Website

Loading component... ``` -------------------------------- ### Set Up OpenComponents Registry Source: https://opencomponents.github.io/docs/quick-start-tutorial Instructions for setting up a registry to manage and serve OpenComponents. This involves creating a directory and configuration files for the registry. ```shell # Step 7: Set Up a Registry (Production) # Commands to create registry directory and configuration files would go here. ``` -------------------------------- ### Create OpenComponents Project Directory Source: https://opencomponents.github.io/docs/quick-start-tutorial Creates a new directory for your OpenComponents project and navigates into it. This is the first step in setting up a new component. ```bash mkdir oc-tutorial && cd oc-tutorial ``` -------------------------------- ### Configure OC Client Global Settings Source: https://opencomponents.github.io/docs/consumers/client-setup This example shows how to configure global settings for the OC Client by defining the `oc.conf` object before loading the client script. It includes options like enabling debug mode, setting retry intervals, and defining global parameters. ```JavaScript var oc ={ conf:{ debug:true, retryInterval:2000, globalParameters:{userId:"123"}, }, }; ``` -------------------------------- ### Start Dev Server with Verbose Output Source: https://opencomponents.github.io/docs/building/debugging Starts the OpenComponents development server on a specified port with verbose logging enabled for detailed output during development. ```bash oc dev . 3030 --verbose ``` -------------------------------- ### Start Local OpenComponents Development Registry Source: https://opencomponents.github.io/docs/quick-start-tutorial Starts a local development registry for OpenComponents on port 3030. This command watches for file changes and automatically recompiles components, facilitating local development and testing. ```bash cd .. # Go back to oc-tutorial directory oc dev . 3030 ``` -------------------------------- ### Generate OpenComponents Component Source: https://opencomponents.github.io/docs/quick-start-tutorial Initializes a new OpenComponents component named 'hello-world'. This command scaffolds the basic file structure and configuration for a new component. ```bash oc init hello-world ``` -------------------------------- ### Create OpenComponents Project Source: https://opencomponents.github.io/docs/quick-start-tutorial Instructions on how to create a new OpenComponents project using the CLI. This involves generating the initial project structure and understanding the generated files. ```shell # Step 1: Create Your First Component # Commands to create a new component would go here, e.g., oc new-component my-component ``` -------------------------------- ### Component View Template Example Source: https://opencomponents.github.io/docs/quick-start-tutorial An example of a TypeScript view template for an OpenComponents component. It renders a simple HTML structure with dynamic content and an image. ```typescript export default function(model){ return`

Hello ${model.name}!

Logo
`; } ``` -------------------------------- ### Safe OC Client Initialization Source: https://opencomponents.github.io/docs/consumers/client-setup This JavaScript pattern demonstrates a safe way to initialize the OC Client, especially in dynamic environments like single-page applications. It uses a command queue (`oc.cmd`) to ensure that functions are executed only after the client is fully ready. ```JavaScript window.oc=window.oc||{}; oc.cmd= oc.cmd||[]; oc.cmd.push(function(oc){ // This runs after the client is fully ready console.log("OC version:", oc.clientVersion); }); ``` -------------------------------- ### Publish OpenComponents Component Source: https://opencomponents.github.io/docs/quick-start-tutorial Details on how to publish your created OpenComponents component to a registry. This includes configuring the registry and verifying the publication. ```shell # Step 8: Publish Your Component # Commands for configuring registry and publishing would go here. ``` -------------------------------- ### OpenComponents Registry Configuration and Start Source: https://opencomponents.github.io/docs/registry/registry-configuration Example JavaScript code for configuring and starting an OpenComponents registry. It defines settings for verbosity, base URL, port, temporary directory, refresh intervals, S3 credentials, and environment, then starts the registry. ```javascript var oc =require("oc"); var configuration ={ verbosity:0, baseUrl:"https://my-components-registry.mydomain.com/", port:3000, tempDir:"./temp/", refreshInterval:600, pollingInterval:5, s3:{ key:"your-s3-key", secret:"your-s3-secret", bucket:"your-s3-bucket", region:"your-s3-region", path:"//s3.amazonaws.com/your-s3-bucket/", componentsDir:"components", }, env:{name:"production"}, }; var registry =new oc.Registry(configuration); registry.start(function(err, app){ if(err){ console.log("Registry not started: ", err); process.exit(1); } }); ``` -------------------------------- ### OpenComponents Registry with Google Storage (Production) Source: https://opencomponents.github.io/docs/registry/registry-using-google-storage Configures and starts an OpenComponents registry using Google Cloud Storage as the storage adapter. This example demonstrates a typical production setup with specified project ID, bucket, and component directory. ```javascript var oc =require("oc"); var gs =require("oc-gs-storage-adapter"); var configuration ={ verbosity:0, baseUrl:"https://my-components-registry.mydomain.com/", port:3000, tempDir:"./temp/", refreshInterval:600, pollingInterval:5, storage:{ adapter: gs, options:{ projectId:"myproject-12345", bucket:"my-components-bucket", path:"//storage.googleapis.com/my-components-bucket/", componentsDir:"components", maxAge:3600, }, }, env:{name:"production"}, }; const registry =new oc.Registry(configuration); registry.start(function(err, app){ if(err){ console.log("Registry not started: ", err); process.exit(1); } console.log("Registry started successfully on port", configuration.port); }); ``` -------------------------------- ### Setup OpenComponents Registry Source: https://opencomponents.github.io/docs/registry/registry-configuration Commands to set up a new OpenComponents registry directory, initialize npm, install the 'oc' package, and create an index.js file. ```bash mkdir oc-registry && cd oc-registry npm init npm install oc --save touch index.js ``` -------------------------------- ### Start Local OpenComponents Development Server Source: https://opencomponents.github.io/docs/intro This command starts a local development server for your OpenComponents project, allowing you to preview and test your components. It specifies the current directory as the component library and the port to run on. ```bash oc dev . 3030 ``` -------------------------------- ### Include OC Client Script Source: https://opencomponents.github.io/docs/consumers/client-setup This snippet shows how to include the OC Client script in your HTML. It uses a protocol-relative URL to ensure compatibility with both HTTP and HTTPS. Best practice is to place this tag just before the closing tag. ```HTML ``` -------------------------------- ### OpenComponents CLI - Setup Commands Source: https://opencomponents.github.io/docs/components/cli Commands required for initial setup in OpenComponents development, specifically for adding and listing component registries. ```bash oc registry add - Add registry oc registry ls - List registries ``` -------------------------------- ### Basic Registry Configuration Example Source: https://opencomponents.github.io/docs/registry/registry-configuration Demonstrates a basic configuration for starting an Open Components registry. It includes settings for the base URL, port, verbosity, discovery, and Amazon S3 integration for component storage. ```javascript var oc =require("oc"); var configuration ={ baseUrl:"https://components.mycompany.com/", port:3000, verbosity:1, discovery:true, s3:{ bucket:"my-components-bucket", region:"us-east-1", componentsDir:"components", path:"//s3.amazonaws.com/my-components-bucket/", }, }; var registry =newoc.Registry(configuration); registry.start(); ``` -------------------------------- ### Start Local OpenComponents Development Registry Source: https://opencomponents.github.io/docs/index Starts a local development registry for testing OpenComponents. It takes the component directory and a port number as arguments. ```bash oc dev . 3030 ``` -------------------------------- ### Configure CLI Registry Source: https://opencomponents.github.io/docs/quick-start-tutorial Explains how to add a registry to the OpenComponents CLI, allowing the CLI to interact with the specified registry for publishing and retrieving components. ```bash oc registry add https://your-registry-domain.com/ ``` -------------------------------- ### Configure OC Client Template Runtimes Source: https://opencomponents.github.io/docs/consumers/client-setup This JavaScript snippet demonstrates how to configure OC Client for legacy templates that require specific runtimes, such as Handlebars. It specifies the template type and provides the external URL for the runtime. ```JavaScript var oc ={ conf:{ templates:[ { type:"oc-template-handlebars", externals:[ { global:"Handlebars", url:"https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.runtime.min.js", }, ], }, ], }, }; ``` -------------------------------- ### Generate OpenComponents Component with Svelte Template Source: https://opencomponents.github.io/docs/quick-start-tutorial Initializes a new OpenComponents component using the Svelte template. This is for building components with Svelte. ```bash oc init my-component --template-type=svelte ``` -------------------------------- ### Component Package JSON Example Source: https://opencomponents.github.io/docs/components/publishing-to-a-registry An example of a `package.json` file for an OpenComponents component, showing the structure including name, version, and OpenComponents specific configuration. ```json { "name":"my-component", "version":"1.0.1", "oc":{ // component configuration } } ``` -------------------------------- ### View Component Package JSON Source: https://opencomponents.github.io/docs/quick-start-tutorial Displays the contents of the package.json file for a component. This file contains metadata, dependencies, and OpenComponents-specific configurations like parameters. ```bash cd hello-world cat package.json ``` -------------------------------- ### Create Test HTML Page Source: https://opencomponents.github.io/docs/quick-start-tutorial Steps to create a simple HTML page for testing your OpenComponents component. This allows for interactive testing outside of the development server. ```html OC Test ``` -------------------------------- ### Install OpenComponents CLI Source: https://opencomponents.github.io/docs/index Installs the OpenComponents Command Line Interface globally using npm. This tool is essential for creating, developing, testing, and publishing components. ```bash npm install -g oc ``` -------------------------------- ### Install OpenComponents CLI Source: https://opencomponents.github.io/docs/components/cli Installs the OpenComponents CLI globally using npm. This command requires Node.js and npm to be installed and configured. ```bash $ npm install oc -g ``` -------------------------------- ### Publish Component to Registry Source: https://opencomponents.github.io/docs/quick-start-tutorial Details the command to publish a component to the configured OpenComponents registry. This involves navigating to the component directory and using the `oc publish` command with credentials. ```bash cd ../hello-world oc publish . --username=your-username --password=your-password ``` -------------------------------- ### OpenComponents Dynamic Component with Server Logic Example Source: https://opencomponents.github.io/docs/components/package A comprehensive package.json example for a dynamic OpenComponents component that includes server-side logic, dependencies, API parameters, and plugins. ```json { "name":"user-profile", "description":"Dynamic user profile component with API integration", "version":"2.1.0", "author":"Frontend Team ", "repository":"https://github.com/company/user-components", "dependencies":{ "axios":"^1.0.0", "lodash":"^4.17.21" }, "oc":{ "files":{ "data":"server.js", "template":{ "src":"template.js", "type":"oc-template-es6" }, "static":["public","assets"] }, "parameters":{ "userId":{ "type":"string", "mandatory":true, "description":"User ID to fetch profile for", "example":"user123" }, "showAvatar":{ "type":"boolean", "mandatory":false, "default":true, "description":"Whether to display user avatar" }, "theme":{ "type":"string", "mandatory":false, "default":"light", "description":"Component theme", "example":"dark" } }, "plugins":["oc-plugin-hash"], "state":"active", "renderInfo":true }, "devDependencies":{ "oc-template-es6-compiler":"6.0.8" } } ``` -------------------------------- ### Generate OpenComponents Component with React Template Source: https://opencomponents.github.io/docs/quick-start-tutorial Initializes a new OpenComponents component using the React template. This allows you to build components with JSX. ```bash oc init my-component --template-type=react ``` -------------------------------- ### OpenComponents CLI - Quick Reference Source: https://opencomponents.github.io/docs/components/cli A quick reference table mapping common OpenComponents CLI commands to their purpose and providing an example of their usage. ```bash Command | Purpose | Example ---|---|--- `init` | Create component | `oc init header` `dev` | Start dev server | `oc dev . 3030` `preview` | Test component | `oc preview http://localhost:3030/header` `publish` | Deploy component | `oc publish header/` `registry add` | Add registry | `oc registry add https://my-registry.com` `clean` | Remove node_modules | `oc clean . --yes` ``` -------------------------------- ### Test Component with Parameters Source: https://opencomponents.github.io/docs/quick-start-tutorial Demonstrates how to test a component by accessing its endpoint with specific parameters like 'userId'. It also explains how to check component information for required parameters. ```javascript http://localhost:3030/hello-world?userId=1 ``` -------------------------------- ### Publishing Components with OpenComponents CLI Source: https://opencomponents.github.io/docs/intro Commands to add a component registry and publish a component using the OpenComponents CLI. This is a one-time setup for the registry and then a command to ship the component. ```bash # you have to do the registry config first, just once oc registry add http://my-components-registry.mydomain.com # then, ship it oc publish hello-world/ ``` -------------------------------- ### Create a New OpenComponents Project Source: https://opencomponents.github.io/docs/intro This command is used to create a new directory structure for an OpenComponents project, setting up the basic files needed to start developing a component. ```bash npm install oc -g oc init hello-world ``` -------------------------------- ### Complete in-browser example Source: https://opencomponents.github.io/docs/consumers/client-api A full example demonstrating how to use the OC client in a browser. It includes building a component, injecting it into the DOM, and rendering unloaded components. ```HTML
``` ```JavaScript ``` -------------------------------- ### OpenComponents Basic Static Component Example Source: https://opencomponents.github.io/docs/components/package A complete package.json example for a simple static OpenComponents component without server-side logic, including metadata, template configuration, and optional parameters. ```json { "name":"simple-banner", "description":"A static promotional banner component", "version":"1.0.0", "author":"Your Team ", "repository":"https://github.com/company/components", "oc":{ "files":{ "template":{ "src":"template.js", "type":"oc-template-es6" }, "static":["public"] }, "parameters":{ "message":{ "type":"string", "mandatory":true, "description":"Banner message to display", "example":"Special offer - 20% off!" }, "variant":{ "type":"string", "mandatory":false, "default":"primary", "description":"Banner style variant", "example":"primary" } }, "state":"active" }, "devDependencies":{ "oc-template-es6-compiler":"6.0.8" } } ``` -------------------------------- ### Install oc-gs-storage-adapter Source: https://opencomponents.github.io/docs/registry/registry-using-google-storage Installs the Google Cloud Storage adapter for OpenComponents using npm. This is the first step to integrate Google Storage with your OpenComponents registry. ```bash npm install oc-gs-storage-adapter --save ``` -------------------------------- ### Create and Test New Component Workflow Source: https://opencomponents.github.io/docs/components/cli A common workflow for creating a new OpenComponents component, navigating into its directory, starting a development server, and previewing it. ```bash # Create component oc init my-component # Navigate to component cd my-component # Start development server oc dev . 3030 # Preview component (in another terminal) oc preview http://localhost:3030/my-component ``` -------------------------------- ### Test Publishing (Dry Run) Source: https://opencomponents.github.io/docs/building/debugging Simulates the component publishing process without actually deploying it to the registry, useful for verifying publish configurations. ```bash oc publish your-component --dryRun ``` -------------------------------- ### Generate OpenComponents Component with Vue Template Source: https://opencomponents.github.io/docs/quick-start-tutorial Initializes a new OpenComponents component using the Vue.js template. This enables the creation of components using Vue single-file components. ```bash oc init my-component --template-type=vue ``` -------------------------------- ### View Component Preview Locally Source: https://opencomponents.github.io/docs/intro After starting the development server, this command opens your default web browser to the preview URL of your component. It allows you to see how your component renders in a live environment. ```bash open http://localhost:3030/my-component/~preview ``` -------------------------------- ### Access Component Information Source: https://opencomponents.github.io/docs/quick-start-tutorial Provides the URL to access detailed information about a component, including available and mandatory parameters, which is crucial for debugging 'missing mandatory parameters' errors. ```javascript http://localhost:3030/hello-world/1.0.0/~info ``` -------------------------------- ### Development and Debugging Workflow Source: https://opencomponents.github.io/docs/components/cli Commands useful for development and debugging, including starting the dev server with verbose output, cleaning node_modules, and mocking plugins. ```bash # Start dev server with verbose output oc dev . 3030 --verbose # Clean node_modules from all components oc clean . --yes # Mock plugins for local development oc mock plugin hash "test-value" ``` -------------------------------- ### Automated Migration Helpers Source: https://opencomponents.github.io/docs/building/template-system Provides examples of command-line commands for automating the migration of legacy templates (Handlebars or Jade) to ES6. These shell commands are used to invoke migration helpers. ```Shell # Automated migration helpers (if available) oc migrate handlebars-to-es6 my-component/ oc migrate jade-to-es6 my-component/ ``` -------------------------------- ### Optimal Batch Size Implementation Source: https://opencomponents.github.io/docs/consumers/batch-endpoint Provides a JavaScript example for implementing optimal batching of components. It shows how to chunk an array of components into smaller batches for efficient fetching and rendering. ```javascript // Recommended: 5-10 components per batch const componentBatches =chunkArray(allComponents,8); for(const batch of componentBatches){ const results =awaitfetchBatch(batch); renderComponents(results); } ``` -------------------------------- ### Test Registry Connectivity Source: https://opencomponents.github.io/docs/building/debugging Checks if the OpenComponents registry is accessible by sending a simple HTTP GET request to its root URL. ```curl curl https://your-registry.com/ ``` -------------------------------- ### OpenComponents URL Formats Source: https://opencomponents.github.io/docs/quick-start-tutorial Explains the different ways to access an OpenComponent: JSON API for programmatic access, Component Info Page for development/testing, and Direct Preview for embedding. It also includes a CLI preview command. ```javascript http://localhost:3030/hello-world?userId=1 ``` ```javascript http://localhost:3030/hello-world/1.0.0/~info ``` ```javascript http://localhost:3030/hello-world/1.0.0/~preview ``` ```bash oc preview http://localhost:3030/hello-world ``` -------------------------------- ### OpenComponents Registry Configuration Source: https://opencomponents.github.io/docs/quick-start-tutorial Provides a sample `index.js` file for configuring the OpenComponents registry, including settings for verbosity, base URL, port, temporary directories, polling intervals, and S3 storage. ```javascript const oc =require("oc"); const configuration ={ verbosity:0, baseUrl:"https://your-registry-domain.com/", port:3000, tempDir:"./temp/", refreshInterval:600, pollingInterval:5, // For AWS S3 s3:{ key: process.env.AWS_ACCESS_KEY_ID, secret: process.env.AWS_SECRET_ACCESS_KEY, bucket: process.env.S3_BUCKET, region: process.env.AWS_REGION, path:`//s3.amazonaws.com/${process.env.S3_BUCKET}/`, componentsDir:"components", }, env:{name:"production"}, }; const registry = oc.Registry(configuration); registry.start((err, app)=>{ if(err){ console.log("Registry not started: ", err); process.exit(1); } console.log("Registry started successfully"); }); ``` -------------------------------- ### Check Component Info Source: https://opencomponents.github.io/docs/building/debugging Retrieves information about a specific component by sending an HTTP GET request to its info endpoint on the development server. ```curl curl http://localhost:3030/your-component/~info ``` -------------------------------- ### Test Component with Parameters Source: https://opencomponents.github.io/docs/building/debugging Tests a component by sending an HTTP GET request with query parameters to the component's endpoint on the development server. ```curl curl "http://localhost:3030/your-component?param1=value1" ``` -------------------------------- ### Debug OpenComponents with VS Code Source: https://opencomponents.github.io/docs/building/debugging Configure Visual Studio Code to debug the `server.js` of your OpenComponents. This setup allows you to step through your component's server-side code, inspect variables, and identify issues during development. ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug OC", "program": "${workspaceFolder}/node_modules/.bin/oc", "outFiles": ["${workspaceRoot}/**/_package/*.js"], "cwd": "${workspaceRoot}/", "args": ["dev", ".", "3030"], "stopOnEntry": false, "sourceMaps": true } ] } ``` -------------------------------- ### Enable Verbose Logging for OpenComponents Source: https://opencomponents.github.io/docs/building/debugging Use verbose logging with the OpenComponents CLI to get detailed output during development. This is helpful for diagnosing issues by providing more insight into the component's execution flow and potential errors. ```bash oc dev . 3030 --verbose ``` -------------------------------- ### Publishing Workflow Source: https://opencomponents.github.io/docs/components/cli Steps for adding a component registry, and then packaging and publishing a component to it, including an option for a dry run to test before publishing. ```bash # Add registry (one-time setup) oc registry add https://my-registry.com # Package and publish oc publish my-component --username=myuser --password=mypass # Or test before publishing oc publish my-component --dryRun ``` -------------------------------- ### OpenComponents Enum Parameter Example Source: https://opencomponents.github.io/docs/components/package Demonstrates how to define enum parameters in OpenComponents for validation and documentation. This example shows 'theme', 'size', and 'status' parameters with predefined allowed values. ```javascript { "oc":{ "parameters":{ "theme":{ "type":"string", "mandatory":false, "description":"Visual theme for the component", "example":"dark", "enum":["light","dark","auto"] }, "size":{ "type":"string", "mandatory":true, "description":"Component size variant", "enum":["small","medium","large"] }, "status":{ "type":"string", "mandatory":false, "description":"Current status", "enum":["pending","success","error","warning"] } } } } ``` -------------------------------- ### E-commerce Page Component Fetching Example Source: https://opencomponents.github.io/docs/consumers/batch-endpoint Demonstrates a real-world use case for the batch endpoint by fetching multiple components required for an e-commerce product page, including header, product details, recommendations, and footer. ```javascript // Fetch all components for a product page const productPageComponents =awaitfetchBatch([ {name:'header',parameters:{user: currentUser }}, {name:'product-details',parameters:{productId:'123'}}, {name:'recommendations',parameters:{userId: currentUser.id}}, {name:'reviews',parameters:{productId:'123',limit:5}}, {name:'footer'} ]); ``` -------------------------------- ### ES6 Template Example for Component View Source: https://opencomponents.github.io/docs/building/template-system A practical example of a modern ES6 template used for rendering a component's view. It takes a model object as input and generates HTML for a user card, including dynamic display of online status. ```javascript // template.js - Modern ES6 template export default function(model) { return `
${model.name}

${model.name}

${model.email}

${ model.isOnline ? 'Online' : 'Offline' }
`; } ``` -------------------------------- ### Check Component Availability in Registry Source: https://opencomponents.github.io/docs/building/debugging Verifies if a specific component is available in the OpenComponents registry by requesting its endpoint. ```curl curl https://your-registry.com/your-component ``` -------------------------------- ### Analyze Package Contents Source: https://opencomponents.github.io/docs/building/debugging Analyzes the contents of a compressed component package by listing the files included in the tar archive. ```bash tar -tzf _package/package.tar.gz ``` -------------------------------- ### Customize Component Server Logic Source: https://opencomponents.github.io/docs/quick-start-tutorial Shows how to modify the server-side logic of a component by editing the `server.ts` file. This includes handling parameters, making API calls, and returning data. ```javascript exportconstdata=(context, callback)=>{ const{ name ="World"}= context.params; const{ staticPath }= context; // You can add logic here, like API calls const greeting =getTimeBasedGreeting(); callback(null,{ name, greeting, staticPath, timestamp:newDate().toISOString(), }); }; functiongetTimeBasedGreeting(){ const hour =newDate().getHours(); if(hour <12)return"Good morning"; if(hour <18)return"Good afternoon"; return"Good evening"; } ``` -------------------------------- ### Validate Component Structure Source: https://opencomponents.github.io/docs/building/debugging Validates the structure and integrity of a component package, ensuring it meets the expected format for packaging and publishing. ```bash oc package your-component ``` -------------------------------- ### Routes Example Source: https://opencomponents.github.io/docs/registry/registry-configuration Defines custom routes for the Open Components registry, specifying the route path, HTTP method, and handler function. ```javascript options.routes=[ { route:"/example-route", method:"get", handler:function(req, res){ // Handling function content }, }, ]; ``` -------------------------------- ### Check Component Bundle Size Source: https://opencomponents.github.io/docs/building/debugging Checks the size of a component's package after compression and lists the files within the package directory. ```bash oc package your-component --compress ls -la _package/ ``` -------------------------------- ### View Component View Template Source: https://opencomponents.github.io/docs/quick-start-tutorial Displays the TypeScript code for the component's view. This file defines the component's appearance and uses modern JavaScript with CSS imports and client-side event handling. ```bash cat src/view.ts ``` -------------------------------- ### Clean and Rebuild Component Source: https://opencomponents.github.io/docs/building/debugging Cleans the component's build artifacts and then restarts the development server, useful for resolving build-related issues. ```bash oc clean . && oc dev . 3030 ``` -------------------------------- ### Client-side Global Error Handler Source: https://opencomponents.github.io/docs/building/debugging Adds a global error event listener to catch errors originating from OpenComponents components and logs them to the console. ```javascript // Global error handler for components window.addEventListener('error', (event) => { if (event.target.tagName === 'OC-COMPONENT') { console.error('Component error:', event); } }); ``` -------------------------------- ### Initialize a New OpenComponents Component Source: https://opencomponents.github.io/docs/index Creates a new OpenComponents component with the specified name. This command sets up the basic structure for a new micro frontend component. ```bash oc init my-first-component ``` -------------------------------- ### Test Component Load Times Source: https://opencomponents.github.io/docs/building/debugging Measures the time it takes for a component to load from the development server by making a silent curl request and discarding the output. ```bash time curl -s http://localhost:3030/your-component > /dev/null ``` -------------------------------- ### Consume OpenComponent in Production Source: https://opencomponents.github.io/docs/quick-start-tutorial This snippet shows how to update your HTML to consume an OpenComponent from a production registry. It includes the custom element `` with its `href` attribute pointing to the production registry and the client-side JavaScript file to load the OpenComponents client. ```HTML Loading component... ``` -------------------------------- ### Monitor Memory Usage Source: https://opencomponents.github.io/docs/building/debugging Logs the current memory usage in the browser and periodically checks the number of components loaded in memory to detect potential leaks. ```javascript // Monitor memory usage in browser console.log('Memory usage:', performance.memory); // Check for memory leaks in components setInterval(() => { console.log('Components in memory:', Object.keys(window.oc.components).length); }, 5000); ``` -------------------------------- ### Test Registry with Custom Headers Source: https://opencomponents.github.io/docs/building/debugging Tests registry connectivity for a component using a custom Accept header, useful for retrieving specific content types. ```curl curl -H "Accept: application/vnd.oc.unrendered+json" https://your-registry.com/your-component ``` -------------------------------- ### Preview Component from Local Registry Source: https://opencomponents.github.io/docs/intro This command allows you to preview a component by connecting to a running local test registry. It specifies the registry's URL and the name of the component to be previewed. ```bash oc preview http://localhost:3030/hello-world ```