PlutoSW - Dom manipülasyonu ve Component Yönetici

Son zamanlarda React ve Vue gibi birçok kütüphane yada framework peydah oldu. Bunlar; birden fazla kişinin geliştirdiği projelerde süreç yönetmek, işleri daha hızlı ve kontrol edilebilir bir şekilde yapmak için oldukça ideal kütüphaneler. Ancak bu kütüphaneler için birden fazla bağımlılık mevcut. NodeJS, TypeScript gibi derleyiciler ve NPM gibi repositorylere ihtiyaç duyuyorlar. Bu da yapılacak işin çok daha karmaşık olması ve işe başlamak için çok detaylı hazırlıklar gerektiriyor.

Bu gibi sistemlerin bağımlılıkları ve karmaşası beni oldukça korkutur. Bu yüzden PlutoSW'yi geliştirdim. Component (webcomponent değil) yapısına sahip olan PlutoSW, DOM manipülasyonu ve element oluşturup yönetmek için tasarlandı.

Örnek uygulamacık için aşağıdaki linke gidebilirsiniz. 

https://plutosw.github.io/PlutoSW/

import {Pluto,PlutoComponent} from './PlutoSW.js';

class ul extends PlutoComponent {
    constructor(props) {
        super(props.name, props.data);
        this.props = props;
    }
    onDataPush() {
        this.render(this.element, this.dataDiff);
        localStorage.data = JSON.stringify(PlutoComponents.ul.data);
    }
    onMount() {
        this.props.result.html(JSON.highlight(PlutoComponents.ul.data));
    }
    render(target = Pluto.ul, data = this.data) {
        var elem = [];
        data.forEach(function (d) {
            elem.push({
                component: li,
                props: d
            });
        })
        return target.child(...elem);
    }
}
class li extends PlutoComponent {
    constructor(data) {
        super(data);
        this.in = 0;
    }
    click() {
        this.element.attr('contenteditable', 'true').focus();
        document.execCommand('selectAll', false, null);
    }
    onDataChange(){
        PlutoComponents.ul.props.result.html(JSON.highlight(PlutoComponents.ul.data));
    }
    render() {
        return Pluto.li.props({
            innerText: this.data.key
        }).on("click", () => this.click()).on("blur", () => {
            this.data = {
                key: this.element.text()
            }
            localStorage.data = JSON.stringify(PlutoComponents.ul.data);
        });
    }
}


window.storeddata = (localStorage.data) ? JSON.parse(localStorage.data) : null;
var result = Pluto.pre,
    ulcontainer = {
        component: ul,
        props: {
            name: "ul",
            result: result,
            data: storeddata || [{
                "key": "li 1 (Click for edit)"
            }, {
                "key": "li 2 (Click for edit)"
            }]
        }
    };
Pluto.query(document.getElementById("root")).render(
    ulcontainer,
    Pluto.button.text("ekle").on("click", () => {
        PlutoComponents.ul.pushData({
            "key": "li " + (PlutoComponents.ul.data.length + 1)
        });
    }),
    Pluto.button.text("getir").on("click", () => {
        result.html(JSON.highlight(PlutoComponents.ul.data));
    }),
    result
)

Comments