serkansipahi / app-decorators Goto Github PK

@component({
    element: 'div',
    name: 'my-element',
    is: true,
})

@component('div', 'my-element', true)

routes.on('myRoute /some/path', () => {});
routes.destroy();
routes.init();

let routes = Router.create({
   routes: {
      'myRoute /some/path': () => {}
   }
});
routes.destroy();
routes.init();

@component({
    name: 'todo-list',
    extends: 'ul',
})
@inject({ 
    WorkflowService,
    UserService
})
class Foo {
    create({ WorkflowService, UserService }){
         this.workflowService = WorkflowService;
         this.userService = UserService;
    }
}

@component()
class SomeImage {
    created({src, height, width}){

    }
}

@component()
class SomeImage {
    created(){
         this.src;
         this.height;
         this.width;
    }
}

class Foo {
    parentMethodCall(){
    }
    a() { }
    b() { }
}
class Bar extends Foo {
    parentMethodCall(){
        super.parentMethodCall();
    }
    c() { }
    d() { }
}
class Baz extends Bar {
    parentMethodCall(){
        super.parentMethodCall();
    }
    e() { }
    f() { }
}

@component(HTMLFormElement)
class Yellow extends Baz {
    static x() {}
    static y() {}
        parentMethodCall(){
        super.parentMethodCall();
    }
    createdCallback() {
    }
    attachedCallback() {
    }
    attributeChangedCallback(attrName, oldVal, newVal) {
    }
    detachedCallback() {
    }
}

// create domInstance
let yellow = Yellow.instance();

@component({
    extends: 'progress',
})
@view(`
    <div class="progress-wrapper">
        <black-hole category="1"></back-hole>
    </div>
`)
class Progress {

}

let progress = Progress.create();
// or if put put this into dom
<progress is="com-progress"></progress>

let load = async (...args, modules) => {
	let modules = await Promise.all([...args].map(module => System.import(module)));
        Object.assign(modules, _modules);
}

export {
	load,
}

@component({
	name: 'com-page',
	extends: 'form',
})
class Pages {
	@action('/', ['startpage']) onStartpageAction({ modules, params }){
		// ..code ...
	}
	@action('/?sidebar={{type}}', ['sidebar']) onSidebarAction({ modules, params }){
		// ..code ...
	}
	@on('click .buy', ['checkout', 'payment']) onBuyAction({ modules, event }){
		// ..code ...
	}
}

import * as _load from './helpers/load'

@component()
class Pages {
	@action('/', ['startpage']) async onStartpageAction({ modules, params }){
		await _load.load(['startpage'], modules);
		// ..code ...
	}
	@action('/?sidebar={{type}}', ['sidebar']) async onSidebarAction({ modules, params }){
		await _load.load(['sidebar'], modules);
		// ..code ...
	}
	@on('click .buy', ['checkout', 'payment']) async onBuyAction({ modules, event }){
		await _load.load(['checkout', 'payment'], modules);
		// ..code ...
	}
}

@on('resize', window) onResize(event) <== test that type of 'resize'
@on('click .foo') onClick(event) <=== test that type of 'click'

Eventhandler.create({
   events : {
       'click .a': function(event) { // <== test that type of 'click'
        }
   }
});

const expressions = {
    ['@on']: /^@on\((\S+)\)$/i,
    ['@view.bind']: /^@view\.bind\.(\S+)$/i,
};

@component({
    extends: 'img'
})
@view(`
   <div class="foo">{{id}}</div>
   <div class="bar">{{nr}}</div>
`)
@style(´
    .bar {
        background-color: red;
     }
    .foo {
        background-color: blue;
    }
´)
class Baz {

}

    registerNamespaces: (target) => {

        // define $appDecorators.on namespace
        if(!target.$appDecorators) target.$appDecorators = {};
        if(!target.$appDecorators.on) {
            target.$appDecorators.on = {
                events : { local: {} },
            };
        }

        // define $onCreated.on namespace
        if(!target.$onCreated) target.$onCreated = {};
        if(!target.$onCreated.on) target.$onCreated.on = [];

        // define $onDetached.on callbacks
        if(!target.$onDetached) target.$onDetached = {};
        if(!target.$onDetached.on) target.$onDetached.on = [];

        // define $onAttached.on callbacks
        if(!target.$onAttached) target.$onAttached = {};
        if(!target.$onAttached.on) target.$onAttached.on = [];

        return target;

    }

    registerNamespaces: (target) => {

        // define $appDecorators.on namespace
        if(!target.$appDecorators) target.$appDecorators = {};
        if(!target.$appDecorators.on) {
            target.$appDecorators.on = {
                events: { local: {} },
                created: [],
                attached: [],
                detached: [],
            };
        }
        return target;

    }

@component()
@view(`
    <div class="foo">
         <com-loader></com-loader>
         <com-foo></com-foo>
    </div>
`)
class Foo {
    // fetch event bubbles over .loader an event with promise as value. 
    // If Promise resolved then onFetch will be called
    @on('fetch com-loader') @then onFetch({ result }) {

    }
    @on('ready com-foo') @then onReady({ result }){

    }
    // eventA, eventB and eventC send an promise through the event.
    // only when the promises (internal promise.all) resolved onAbc will be called
    @subscribe('eventA, eventB, eventC') @then onAbc({ resA, resB, resC }){

    }
}

// or
let component = Comfoo.create();
component.ready.then(() => {
    // awesome code
});

// or for subscriber
pubsub.publish('eventA', new Promise((resolve, reject) => setTimeout(resolve, 5000))); 
pubsub.publish('eventB', new Promise((resolve, reject) => setTimeout(resolve, 2000))); 
pubsub.publish('eventC', new Promise((resolve, reject) => setTimeout(resolve, 3000))); 

export {
    foo,
    foo as default
};

@component()
class Helloworld {

}

@component()
class Helloworld extend HTMLElement {

}

@component({
   extends: 'img'
})
class Helloworld {

}

@component({
   extends: 'img'
})
class Helloworld extends HTMLImageElement {

}

class Foo  {}
class Bar extends Foo {}

@component({
   extends: 'form'
})
class Helloworld extends Bar {

}

class Foo extends HTMLFormElement {}
class Bar extends Foo {}

@component({
   extends: 'img'
})
class Helloworld extends Bar {

}

@component()
@view(`
     <div>Hello world</div>
`)
@style(`
     .bar {
         display: block;
     }
`)
class Foo {

}

@view(`
     <div>Hello world</div>
`)
@component()
@style(`
     .bar {
         display: block;
     }
`)
class Foo {

}

let routerConfig = {
    event: {
        popstate: 'popstate'
    },
    popstate_scope: Eventhandler.create({
        element: window
    }),
};
// and in src/libs/router.js
_bindInternalCoreEvents(){
    this.popstate_scope.on(this.event.popstate, ::this._onAction);
}
_removeInternalCoreEvents(){
    this.popstate_scope.off(this.event.popstate);
}

let router = Router.create({
    scope: document.body,
    routes: [
        // will match all registered routes
        ['all /*', function wildcard() {} ],
        // will match if route not found and if notFound registered
        ['notFound /notFound', function notFound() {} ],
    ],
});

let router = Router.create({
    scope: document.body,
});

// will match all registered routes
router.on('all /*', () => {

});

// will match if route not found and if notFound registered
router.on('notFound /notFound', () => {

});

class Foo {
    @on('created') created(){

    }
    @on('attached') attached(){

    }
    @on('detached') detached(){

    }
    @on('attributeChanged') attributeChanged(){

    }

    // or listen a nested component
    @on('created com-bar') onCreatedComBar(){

    }
    @on('ready li[is="item"]') onReadyLiItem(){

    }
    @on('viewport com-image.big') onViewPortComImage(){

    }
}

class checkout {
   // already implemented
   @action('/index') startpage() {
       // do something
   }
   // already implemented
   @action('/index/{{id}}/{{type}}?a=1&b=2#c=3&d=4') details({actions, params, hashes}) {
       // params and hashes are reserved?!?!
    }
    // for next step
   @post @action('error.html') error(){
   }
}

/*
- for e.g. url: /checkout/index/123/descrption
- alias for routename checkout::details, checkout::startpage
- Todo´s for that: need Class Router, and something like a dispatcher
- Useful for Router - HTML5 History-API:
  - for resolving url -> new URL('https://my-domain.com')
  - see for more information black-book
*/ 

// For Safari ( dont forget a generic form for see: "src/datas/elements.js" )
if (typeof HTMLElement !== 'function'){
    var _HTMLElement = function(){};
    _HTMLElement.prototype = HTMLElement.prototype;
    HTMLElement = _HTMLElement;
}

// For IE10
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
(function () {
    function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
    }

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;
})();

// example/idea

@view(`
   <div @on('click')="methodClickFoo()" class="foo">Foo</div>
   <div @on('mousenter')="methodMouseenterFoo()" class="bar">bar</div>
`)