{"id":25835,"library":"ko-component-compiler","title":"Knockout Component Compiler","description":"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.","status":"active","version":"0.5.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","knockout","component","compiler"],"install":[{"cmd":"npm install ko-component-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add ko-component-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add ko-component-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for injecting component styles","package":"insert-css","optional":false},{"reason":"Peer dependency for mixin functionality","package":"robust-mixin","optional":false}],"imports":[{"note":"The main export is a function, not an object with a default export.","wrong":"const compiler = require('ko-component-compiler').default","symbol":"compiler","correct":"import { compile } from 'ko-component-compiler'"},{"note":"The package exports a named function, not a default export.","wrong":"import compile from 'ko-component-compiler'","symbol":"compile","correct":"import { compile } from 'ko-component-compiler'"},{"note":"rollup-plugin-ko is a default export.","wrong":"import { ko } from 'rollup-plugin-ko'","symbol":"rollup-plugin-ko","correct":"import ko from 'rollup-plugin-ko'"}],"quickstart":{"code":"const compiler = require('ko-component-compiler');\n\nconst source = `<template>\n    <div class=\"btn\">\n        <span data-bind=\"text: text\"></span>\n    </div>\n</template>\n\n<style scoped>\n    .btn { color: red; }\n</style>\n\n<script>\n    export default {\n        constructor: function (opts, info) {\n            this.text = ko.observable(opts.text || 'Button');\n        }\n    };\n</script>`;\n\ncompiler.compile(source, function (err, result) {\n    if (err) {\n        console.error(err);\n    } else {\n        console.log(result);\n    }\n});","lang":"javascript","description":"Demonstrates compiling a single-file component using the ko-component-compiler compiler.compile() function."},"warnings":[{"fix":"Wrap callback in a Promise or promisify the function.","message":"The package uses a callback-based API; async/await not directly supported.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Install all required rollup plugins and peer dependencies as shown in README.","message":"Rollup integration requires multiple plugins: rollup-plugin-ko, rollup-plugin-babel, rollup-plugin-commonjs, rollup-plugin-node-resolve. Missing any will cause build failures.","severity":"gotcha","affected_versions":">=0.5.0"},{"fix":"Ensure script block matches the expected ES module export pattern.","message":"The component script must use `export default` with a constructor and can include defaults, mixins, methods. Misusing the structure leads to runtime errors.","severity":"gotcha","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install insert-css","cause":"Missing peer dependency insert-css","error":"Cannot find module 'insert-css'"},{"fix":"Use `import { compile } from 'ko-component-compiler'` or `const { compile } = require('ko-component-compiler')`","cause":"Incorrect import: using default import instead of named import","error":"compiler.compile is not a function"},{"fix":"Add rollup-plugin-babel with es2015-rollup preset as shown in README.","cause":"Component script uses ES module syntax but babel plugin is not configured properly","error":"Unexpected token 'export'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}