mbjspc

mbjspc

javascript plugin item (jsplugin) dev tools for motionboard

how to start

create typescript file has typename(classname)

e.g.

$ vi Yours.ts

import and declare its typename

// 1. default-import and declare your class.
import PluginObject from "mbjspc";

class Yours extends PluginObject {

    // 2. call constructor
    constructor(canvas: string) {
        super(canvas);
    }
}

output jsplugin source file

$ npx mbjspc Yours.ts
$ cat Yours.js # goal

before use

install typescript globally

$ npm i -g typescript
$ npx tsc # everywhere

display DOM in item window

create DOM and call this.itemDOM(div).

createChildren() { ...
    // the "div" what you created will follow item window on your screen.
    const div = document.createElement("div");
    this.itemDOM(div);
}

parse DOM as innerHTML and handle event with class method by calling this.macroHTML('').

    ...

    // macro __this___ will be instance of this on runtime
        d.innerHTML = this.macroHTML(`
<div>
    <button onclick='___this___.hoge()'>Click me</button>
    <button onclick='___this___.fuga()'>Click me</button>
</div>
        `);

        this.itemDOM(d);
    }
    hoge(){
        // your event handler of ___this___.hoge()
    }
    fuga(){
        // your event handler of ___this___.fuga()
    }