Knockout Component Compiler

0.5.0 verified Fri May 01 auth: no javascript

A single-file component compiler for Knockout.js, enabling Vue-like component authoring with <template>, <style scoped>, and <script> blocks. Version 0.5.0 is currently the latest and appears to be in early development with minimal release activity. Key differentiators: supports scoped styles, rollup integration via rollup-plugin-ko, and automatic component registration. Requires peer dependencies insert-css and robust-mixin.

Common errors

error Cannot find module 'insert-css' ↓

cause Missing peer dependency insert-css

fix

npm install insert-css

error compiler.compile is not a function ↓

cause Incorrect import: using default import instead of named import

fix

Use import { compile } from 'ko-component-compiler' or const { compile } = require('ko-component-compiler')

error Unexpected token 'export' ↓

cause Component script uses ES module syntax but babel plugin is not configured properly

fix

Add rollup-plugin-babel with es2015-rollup preset as shown in README.

Warnings

gotcha The package uses a callback-based API; async/await not directly supported. ↓

fix Wrap callback in a Promise or promisify the function.

gotcha Rollup integration requires multiple plugins: rollup-plugin-ko, rollup-plugin-babel, rollup-plugin-commonjs, rollup-plugin-node-resolve. Missing any will cause build failures. ↓

fix Install all required rollup plugins and peer dependencies as shown in README.

gotcha The component script must use `export default` with a constructor and can include defaults, mixins, methods. Misusing the structure leads to runtime errors. ↓

fix Ensure script block matches the expected ES module export pattern.

Install

npm install ko-component-compiler

yarn add ko-component-compiler

pnpm add ko-component-compiler

Imports

compiler

wrong

const compiler = require('ko-component-compiler').default

correct

import { compile } from 'ko-component-compiler'

The main export is a function, not an object with a default export.

compile

wrong

import compile from 'ko-component-compiler'

correct

import { compile } from 'ko-component-compiler'

The package exports a named function, not a default export.

rollup-plugin-ko

wrong

import { ko } from 'rollup-plugin-ko'

correct

import ko from 'rollup-plugin-ko'

rollup-plugin-ko is a default export.

Quickstart

Demonstrates compiling a single-file component using the ko-component-compiler compiler.compile() function.

const compiler = require('ko-component-compiler');

const source = `<template>
    <div class="btn">
        <span data-bind="text: text"></span>
    </div>
</template>

<style scoped>
    .btn { color: red; }
</style>

<script>
    export default {
        constructor: function (opts, info) {
            this.text = ko.observable(opts.text || 'Button');
        }
    };
</script>`;

compiler.compile(source, function (err, result) {
    if (err) {
        console.error(err);
    } else {
        console.log(result);
    }
});