Coralite v0.27.0 Released
Coralite v0.27.0 is now available. This release introduces support for compiling Coralite components into standalone client-side Web Components, renames "templates" to "components" across the public API to match frontend terminology, and refactors ref resolution to assign values directly to standard element IDs.
Standalone Web Component Generation #
This release adds support for generating standalone ES Modules from Coralite components, enabling client-side rendering without requiring a build step on the consumer side. When standalone mode is enabled, the compiler generates custom elements with native Shadow DOM, client-side import resolution, attribute parity emulation, and ref hydration.
To use this feature, specify the new standaloneOutput option in your configuration or use the --standalone command-line option:
// coralite.config.js
module.exports = {
components: './src/components',
standaloneOutput: './dist/components'
}; The standalone compiler also extracts and resolves module imports from Vue-style component script setup blocks. External libraries and JSON configuration files (e.g., imported with attributes: { type: 'json' }) are now compiled and mapped to the component's context.imports object, ensuring they execute correctly in the browser shadow DOM.
Renaming Templates to Components #
To avoid confusion with the native HTML <template> element, all public API references to "templates" have been renamed to "components". Coralite files act as Single File Components (SFCs) wrapping HTML markup, styles, and scripts. This semantic change establishes a clean distinction between the container files and the actual HTML tags used within them.
ID-Based Ref Resolution #
The refs plugin has been updated to assign ref values directly to the standard HTML id attribute instead of the custom data-coralite-ref attribute. These generated IDs are exposed in the build context under refs, enabling developers to dynamically reference element IDs in scripts using standard tokens:
<button ref="actionBtn">Click Me</button>
<script>
// Replaced with the generated ID during build
const buttonId = '{{ ref_actionBtn }}'
const button = document.getElementById(buttonId)
console.log(button)
</script> Flexible Attribute Options and Language Extraction #
The configuration validation rules for skipRenderByAttribute and ignoreByAttribute have been expanded to accept arrays of strings (e.g., ["data-id"]) in addition to structured attribute objects (e.g., [{ name: "data-id", value: "123" }]). Furthermore, the compiler now extracts the root lang attribute from the page <html> tag and sets the $lang metadata property automatically.
Breaking Changes #
- CoraliteResult Schema: The
htmlproperty has been renamed tocontent, and a new requiredtypeproperty ('page' | 'component') has been added to support page and component outputs. - Public API Renaming: The
templatesconfiguration property is renamed tocomponents. Scaffolded project directories must be changed fromsrc/templatestosrc/components, and hook registrations have been renamed fromonTemplate*toonComponent*.
How to Upgrade #
To upgrade to the latest version, update your project dependencies:
npm install coralite@0.27.0 npm install coralite-scripts@0.27.0