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:

Zaaksam / koc-loader

koc-loader

简介

发行版

贡献者

近期动态

Zaaksam / koc-loader .gitee-modal { width: 500px !important; }

koc-loader

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

Zaaksam / koc-loader