Beta/Evaluation-Warning ⚠️

Proxy-JS is an experimental library intended for my personal technical education/training only. I started Proxy-JS as an endeavour to evaluate the utilizability of ES6-Proxies for Javascript data binding. BUT it is NOT safe, tested or final for production environment or any other purpose.

Proxy-JS - A primitive Javascript data binding library

• Few APIs
• No buildsteps
• Based on well known Javascript/HTML5 Concepts
  • WebComponents
  • Proxies
  • Others...
• Binding Html-Resources to WebComponents
• Managing resources like
  • Css
  • Html-Templates

Webcomponent example

<!--hello-world.html-->

<div class="text-clickable">
    <span @click="onClick(e)">{{model.title}}<br>Clicked {{model.count}} times (Click me)</span>
</div>

/*hello-world.css*/

.text-clickable {
    cursor: pointer;
    user-select: none;
    transition: text-shadow 0.25s;
}

.text-clickable:hover {
    text-shadow: 0 0 5px lightgrey;
}

import { $p, $pLoad } from './lib/proxy-js/core.js';
import { $pResource } from './lib/proxy-js/request.js';

class HelloWorld extends HTMLElement {

    model = {
        title: 'WebComponent - Hello World',
        count: 0
    };

    constructor() {
        super();

        this.attachShadow({ mode: 'open', delegatesFocus: true });

        $p.dom.appendSheet(this.shadowRoot, 'hello');
    }

    async connectedCallback() {
        var $template = await $pResource('./resource/hello-world.html'); 

        $template.bind(this)
            .appendTo(this.shadowRoot);
    }

    onClick(e) {
        ++this.model.count;
    }
}

$pLoad(() => {
    customElements.define('hello-world', HelloWorld);

    $p.dom.styleSheet('./css/hello-world.css', 'hello');

    document.querySelector('.layout-center')
        .appendChild(document.createElement('hello-world'));
});

API Calls (most relevant)

Binding Attributes

API Calls (advanced)

Core API

Current work in progress...experimental features i am working at

I/O Handler - Define binding behaviour

$p.components.core(function (core) { //add a core component
    core.addIoHandler({ //define io handler
        name: 'dateformat',

        out: function (value, ...params) { //out to dom
            //TODO date value to string
        },

        in: function (value, ...params) { //in from dom
            //TODO string date to date
        }
    });

    core.addIoHandler({
        name: 'filesize',

        out: function (value, ...params) {
            if (value < 1024) {
                return value + ' byte';
            }

            var i = 1;
            while (i <= 4 && (value / Math.pow(1024, i)) > 1024) {
                i++;
            }

            var units = [null, 'KB', 'MB', 'GB', 'TB'];

            return parseFloat((value / Math.pow(1024, i))).toFixed(2) + ' ' + units[i];
        },

        in: function (value, ...params) {

        }
    });
});

<div class="file-item-size">{{$filesize(model.size)}}</div>

<div class="file-item-date">{{$dateformat(model.changed)}}</div>

Dynamic For Templates - Determine for binding webcomponent at runtime

<div class="pnl-task">
    <!--template is not rendered, onTaskComponent returns the name of a webcomponent-->
    <template p-for="task in model.tasks" p-component="onTaskComponent()"></template>
    <!--onTaskComponent is called for every for-item-->
</div>

//return the name of a webcomponent to use for the current for binding item
onTaskComponent(task) { 
    if (task.type == TASK_TYPE_NOTE) {
        return 'task-note'; //use task-note Webcomponent
    }
    else if (task.type == TASK_TYPE_TODO) {
        return 'task-todo'; //use task-todo Webcomponent
    }
}