@vreality64 commented on Mon Feb 20 2017

I'll mention 3 things.

1. Situation I been through.
2. The thing what I expected.
3. Solution.

Situation I been through

I have one controller and two modules. everything is class inherited from eg.Component.

// Controller, Module A, Module B
var instance = new eg.Class.extend(eg.Component, {
  // ...
});

I tried handle custom event state between modules and controller using customEvent.stop() function. But stop was not worked.

Trigger Docs: If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring.

Here are code.

// Controller has Module A. Module A has Module B.
// every callback function is wrapped `$.proxy` with `this` context.
// this.module.on('eventName', $.proxy(callback, this));

// In Controller
moduleA.on('beforeSelect', function (event) {
  event.stop();
});

// In Module A
moduleB.on('beforeSelect', function (event) {
  this.trigger('beforeSelect', event);	// reuse event object
});

// In Module B
this.on('click', function (event) {
  if (this.trigger('beforeSelect')) {
    this.select('data');
  }
})

The thing what I expected

Code describes that if controller calls event.stop() then doesn't execute moduleB.select(). because stop() makes trigger return false.

I think reusing custom event is common case. normally custom event has data, so it was broadcasted to system.

But when it reused, isCanceled variable was overridden.

trigger: function(eventName, customEvent) {
  // event(data) Object are alive.
  customEvent = customEvent || {};
  
  // ...
  // isCanceled variable is overridden.
  var isCanceled = false;
  
  // ...
  return !isCanceled;
},

If intended, it is notable.

Solution

I changed middle module. not re-used event object

// [Before] In Module A
moduleB.on('beforeSelect', function (event) {
  this.trigger('beforeSelect', event);	// reuse event object
}
           
// [Changed] In Module A
moduleB.on('beforeSelect', function (event) {
  var stop = !this.trigger("beforeSelect");	// not re-used event object
  if (stop) {
    event.stop();
  }
}

I made JS fiddle example. you can reproduce my situation.

Question

I can't sure what is right, so just want to know decision history. what philosophy / thoughts leads this conclusion?

@mixed commented on Mon Feb 20 2017

@vreality64
Thank you for your report. I am going to anwser it soon. 😄

@mixed commented on Tue Feb 21 2017

I think that This case is very important issue. Sometimes Component has not to fire event. So if trigger add option like boolean for event fire condition. I think differently It is duplicate feature(stop method). So. It need more idea.

When Component triggered event, It has not found component instance in event listener.
So, Below case is inconvenience.

to-be

class Test {
	constructor(){
		this.bind();
	}
	bind(){
		const scroll = new ScrollComponent();
		scroll.on("change",this.change.bind(this));
	}
	change(e){
		// I can not found scroll instance.
	}
}

as-is

class Test {
	constructor(){
		this.bind();
	}
	bind(){
		const scroll = new ScrollComponent();
		scroll.on("change",this.change.bind(this));
	}
	change({currentTarget}){
		currentTarget; // It is scroll instance.
	}
}

Why we decided to use currentTarget

Almost Component design is affected by DOM interface. ref So. We decided to use currentTarget of DOM interface.

Returns the object whose event listener's callback is currently being invoked.

Description

개체가 'next' 속성이나 메서드를 지원하지 않습니다. (IE11)

Steps to check or reproduce

Component not supported options since 2.1.0. So. Docs have to change description.

In package.json,
xml2js should be included in "devDependency" instead of "dependency"

Related:
ce2cbbd#diff-b9cfc7f2cdf78a7f4b91a753d10865a2

Description

Sometimes I have to listen all event in component.

Steps to check or reproduce

class Test extends Component{
	foo(){
		this.trigger("foo",1);
	}
	bar(){
		this.trigger("bar",2);
	}
}

const test = new Test();

test.subscribe( data => {
	console.log(data);
	// {"name":"foo","data":1}
	// {"name":"bar","data":2}
});

test.foo();
test.bar();

Description

As-is:

• Always have to use objects for event definitions

To-be:

• Can use any types for the event definitions

eventHandler can be set. also options propertys.

If you don't want to set property, make property as private.

ref.
http://www.2ality.com/2016/01/private-data-classes.html

Description

In the @egjs/flicking module, this @egjs/component is imported as follows for the type definition.

import * as Component from "@egjs/component";

Currently, we use esModuleInterop ts-compiler option in TypeScript 2.7.x version. So, the current version of typscript and import method are not appropriate.

How about supporting esModule like @egjs/axes?

there are suggestion that is event propagation.
It is not absolutely necessary, but I think it would be good to apply.

First, let me share my experience.
the experience was limited to UI development.

i think the UI has a hierarchical structure in general, whether it is physical or conceptual.
so when i applied this component to UI, events also had to be designed to follow the hierarchy.

when, i designed to

SearchPage (independent component)
   ㄴ SearchInput
   ㄴ Filter
   ㄴ Category

the event structure was as follow,

SearchPage (independent) - onSubmit, onClear, onFilter, onSort,...
   ㄴ SearchInput - onSubmit, onClear
   ㄴ Filter - onFilter
   ㄴ Sort - onSort

and implemented this as below.

class SearchPage extends eg.Component {
    constructor() {
        super();
        this.context = {};
        this.searchInput = new SearchInput(); // child component
        this.filter = new Filter();  // child component
        // intercepts event
        this.searchInput.on('submit', (event) => {
            // bubbling
            event.pageContext = context;
            this.trigger(event.eventType, event)
        });
    }
}

const searchPage = new SearchPage();

searchPage.on('submit', (event) => {
    // todo - external module
})

but I thought it would be better if the component itself provided it systematically.
because the deeper the component, the more it will equal callback hell.

thanks for reading.

Description

trigger is not handling all handlers when some handlers are removed while calling it.

Steps to check or reproduce

Use multiple once handlers and check whether they are all called by a single trigger().

Description

In 2.1.0 version

declare class Component {
  // ...
  on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): Component;
  // ...
}

I think this part should be changed as follows, I will ask you to review that part.

declare class Component {
  // ...
  on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;
  // ...
}

=> : Componentis to be : this

In 2.1.0-snapshot, already has this part applied.
By the way, should not namespace part remain the same?

AS-IS

declare namespace Component {
  // ...
  function on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): this;
  // ...
}

TO-BE

declare namespace Component {
  // ...
  function on(eventName: string, handlerToAttach: (event: { [key: string]: any }) => any): Component;
  // ...
}

I will request a review of that part. Thanks.

It is an ongoing document, but we need to check it.
https://w3ctag.github.io/design-principles

Description

If eventType is given inside event props, it will overwrite actual event name

Steps to check or reproduce

const evt = new ComponentEvent("correct_name", {
  eventType: "wrong_name"
});

evt.eventType // "wrong_name"

provide type definition.

When I use many Components I tired to manage events.

Description

Version information should be exposed on documentation like below.

You should apply following rules.

https://github.com/naver/egjs-flicking/blob/master/src/index.js#L7

https://github.com/naver/egjs-component/blob/master/dist/component.js

homepage link in package.json is broken. it shows 404 error.

http://naver.github.io/egjs/component

I think it have to be https://naver.github.io/egjs-component.

[WIP]

I think that Currently option method is unnecessary feature. Because Almost Component update attribute directly option object.

Sometimes Component have to know changing value of options. I suggest event and method.

class SomeThing extends Component{
	constructor(){
		// setup prop
		this.prop({
			witdh : 100,
			height : 200
		});
	}
}

const someThing = new SomeThing();
someThing.on("propChange", (data) => {
	console.log(data);
	/*
	{
		width : {
			prevValue : 100,
			newValue : 200
		}
	}
	*/
});
someThing.prop("width",200);

This idea affected by DOM.

Change webpack to rollup

Description

Before

import Component from "./Component";
import ComponentEvent from "./ComponentEvent";

(Component as any).ComponentEvent = ComponentEvent;

export default Component;

After

import Component, * as modules from './index';

for (const name in modules) {
  (Component as any)[name] = (modules as any)[name];
}

declare const module: any;
module.exports = Component;
export default Component;
export * from './index';

Steps to check or reproduce

Description

• Make Component-based classes include their event types
• Transform all project codes to typescript