oc-template-esm-compiler

3.0.4 verified Fri May 01 auth: no javascript

Compiler for ESM OC (OpenComponents) templates. This package provides the build/compile step for components using the oc-template-esm template type. It is part of the OpenComponents ecosystem, which enables server-side rendering of composable UI components. Current stable version is 3.0.4, with a release cadence aligned with the OC monorepo. Key differentiator: it specifically handles ESM (ES Module) output, targeting modern bundlers and runtimes. It requires oc-server ^4.0.0 as a peer dependency and ships TypeScript types.

Common errors

error Cannot find module 'oc-template-esm-compiler' ↓

cause Package not installed or module resolution failure.

fix

Run npm install oc-template-esm-compiler --save-dev

error compile is not a function ↓

cause CommonJS require instead of ESM import.

fix

Use import { compile } from 'oc-template-esm-compiler' instead of require.

Warnings

breaking The compile function is now async. Calling without await will return a Promise. ↓

fix Use await compile(...) or .then() to get the result.

deprecated The option 'componentDir' is deprecated in favor of 'componentPath'. ↓

fix Rename 'componentDir' to 'componentPath' in the options object.

Install

npm install oc-template-esm-compiler

yarn add oc-template-esm-compiler

pnpm add oc-template-esm-compiler

Imports

compile

wrong

const compile = require('oc-template-esm-compiler').compile

correct

import { compile } from 'oc-template-esm-compiler'

This package is ESM-only. CommonJS require will not work; use static import.

CompileOptions

wrong

import { CompileOptions } from 'oc-template-esm-compiler'

correct

import type { CompileOptions } from 'oc-template-esm-compiler'

TypeScript type import only; not a runtime value.

CompileResult

wrong

import { CompileResult } from 'oc-template-esm-compiler'

correct

import type { CompileResult } from 'oc-template-esm-compiler'

TypeScript type import only; not a runtime value.

Quickstart

Demonstrates compiling an ESM OC component with minimal options, showing the async compile function and typical result.

import { compile } from 'oc-template-esm-compiler';

const result = await compile({
  componentPath: '/path/to/component',
  componentName: 'my-component',
  ocServerUrl: 'http://localhost:3000/',
  ocTemplate: 'oc-template-esm',
  production: true,
  watch: false
});

console.log('Compiled files:', result.files);
console.log('Hash:', result.hash);