❤
npm
Sign UpSign In

koc-loader

0.1.4 • Public • Published

koc-loader

Knockout component loader for webpack

中文说明示例

You can write component file like Vue:

hello.koc

<template>
    <div data-bind="text: info"></div>
</template>
 
<script lang="ts">
import ko from "knockout";
 
export default class Component {
    info: KnockoutObservable<string>;
 
    constructor(params: any) {
        this.info = ko.observable("hello koc-loader");
    }
}
</script> 

Webpack.config.js:

{
    module: {
        resolve: {
            extensions: ['.ts', '.js', '.koc']
        },
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
                options: {
                    appendTsSuffixTo: [/\.koc$/]
                }
            },
            {
                test: /\.koc$/,
                loader: 'koc-loader'
            }
        ]
    }
}

app.ts (app.js)

import ko from 'knockout'
import Hello from './hello.koc'
 
ko.components.register('hello', Hello)
 
ko.applyBindings()

index.html

<html>
    <body>
        <hello></hello>
    </body>
    <script src="http://host/app.js"></script> 
</html>

koc.d.ts

/// <reference types="knockout" />
 
declare module "*.koc" {
    const koc: KnockoutComponentTypes.Config
    export default koc
}

Thanks:

Readme

Keywords

Package Sidebar

Install

npm i koc-loader

Repository

github.com/Zaaksam/koc-loader

Homepage

github.com/Zaaksam/koc-loader#readme

Weekly Downloads

0

Version

0.1.4

License

MIT

Last publish

Collaborators

  • zaaksam
Try on RunKit
Report malware