@abstraqt-dev/jsxknockout

This package contains an extension of the jsx-dom library that allows to generate knockout virtual elements through the use of custom tags.

Usage:

import * as ko from "knockout";
import * as React from "@abstraqt-dev/jsxknockout";

ko.component.register("my-component", {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            var vm = {
                panelShown: ko.observable(false),
                buttonClick: function() {
                    vm.panelShown(!vm.panelShown());
                }
            };

            return vm;
        }
    },
    template: [
        <div>
            <ko-if data-bind="panelShown">
                <h1>Hello World</h1>
            </ko-if>
            <div>
                <button type="button" data-bind="click: buttonClick">Switch</button>
            </div>
        </div>
    ]
});

document.appendChild("<my-component></my-component>");

ko.applyBinding({});

NOTE: Every html element whose name starts with "ko-" is considered a knockout virtual element placeholder and is transformed as follows:

    <ko-if data-bind="BooleanValue">
        <h1>Test</h1>
    </ko-if>

    // Is transformed to

    <!-- ko if: BooleanValue -->
    <h1>Test</h1>
    <!-- /ko -->

    <ul>
        <ko-foreach data-bind="Items">
            <li data-bind="text: $data">
                
            </li>    
        </ko-foreach>
        <li>
        </li>
    </ul>

    // Is transformed to 

    <ul>
        <!-- ko foreach: Items -->
            <li data-bind="text: $data">
                
            </li>    
        <!-- /ko -->        
        <li>
        </li>
    </ul>