javey/intact

An inheritable and strong logic template front-end mvvm framework.

intact's Issues

Support v-show

Disable and show a leaving Animate

When a Animate is leaving to hide, and then we disable its animation and show it, it can not be handled correctly.

RFC

是否要实现Fragment

如果组件可以返回多个节点，如何兼容Vue/React

是否要实现函数式组件

函数式组件如果返回多个节点，如何兼容Vue/React

should normalize props.children especially

For children of component, misstime should normalize them. So we can iterate them like a flattened array. But should not add key for them. The key should be added in html element. Otherwise the keys may be conflicted.

<Component>{[<div></div>, 1]} 2</Component>

=> flatten

<Component><div></div>1 2</Component>

How to make a leaving element enter coherently?

When enter a leaving element. misstime will append it, this operation will lead to the last leaving animation breaks. If we don't append the dom, then how to keep the order of the dom correctly?

Enter animation will not be executed when update in updating

Because of isRender has changed when the component is updating rather than rendering first time.

<Animate v-if={self.get('show')}></Animate>

this.on('$change:show', () => { this.update(); });
this.set('show', true);

Events passed by props must be called before which add in self component

class Component extends Intact {
     _init() {
         this.on('event', () => {
            console.log('this should be called later');
        });
    }
}

<Component ev-event={() => console.log('this should be called firstly')} />

set method support set object value by path

The set method should support set object type value by path like bellow:

this.set({'a.b': 1, 'a.c': '2'}, {path: true});
// trigger $change:a.b $change:a.c $change:a $change $changed:a.b $changed:a.c $changed:a $changed
this.get('a') // {b: 1, c: '2'}

support property validate and correct

Support validate and correct property like bellow:

class A extends Intact {
    static propTypes = {
        show: Boolean,
        name: {
            type: Number,
            fix: (value) => {
                return Number(value);
            }
        }
}

Support set/get property which name has dot

instance.set('["a.a"]', 1) // {'a.a': 1}
instance.get('["a.a"]') // 1

Enter animation does not work in firefox

When a element is entering. It will be added enter className, then we call getAnimateType method will add enter-active className. In this case the animation has been triggered in firefox. So we should call getAnimateType method before adding enter className.

Property that value is undefined should be set to default value

can not set block in nested component

Such as

// AnotherComponent
<div>{self.get('children)}</div>

// Component
<div>
    <AnotherComponent>
        <b:body>test</b:body>
    </AnotherComponent>
</div>

<Component>
    <b:body>component</b:body>
</Component>

if AnotherComponent have not a block named body, the content wich passd as block in Component will be ignored. Because the body block is a blocks property for AnotherComponent, not children.
Howerver you can do like this:

<div>
    <AnotherComponent>
        <div>
            <b:body>test</b:body>
        </div>
    </AnotherComponent>
</div>

support add v-model and ev-$change:value property at the same time

Because v-model has been compiled to ev-$change:value property, we can't add ev-$change:value property again. But we do need this feature. Maybe we can compile them to Array when add both of them.

Should not add side-effect prototype method of Object.setPrototypeOf

Let user to handle compatibility of IE.

appear animation

Update an Animate component when it's rendering, the isRender flag will be set to false. This make the component trigger enter animation when mount it. But it is rendering in fact.
We should set isRender to false in this case.

Async component should catch exception when init

As shown in title

Add _beforeCreate lifecycle method

_init: can't get vNode and operate vNode;
_create: can operate vNode but it is too late and must make component to update
Add a _beforeCreate lifecycle method between _init and _create to operate vNode before render.

support two-way bind any property

Let two way bind support any property like bellow:

<Component v-model="value" v-model:name="name" v-model:data.age="age" />

$changed events will be discarded when update in updating

When invoke update method in updating, the $changed events will be discarded.

this.on('$changed:value', () => {
    // this callback does not be called
});
this.on('$change:value', () => {
    this.update()
});
this.set('value', 1);

In IE 10 & 11, input event will be triggered on focusin foucsout and change placeholder if input has placeholder

Change placeholder or foucsin/foucsout to make it change will trigger input event.

Should freeze the property passed to component

When we pass a Object to child component, the child component may change the property of that Object. But the $change event can not to be triggered.

class A extends Intact {
     defauts() {
        return {data: {}};
    },
    change() {
        // this set will trigger '$change:data.a' and '$change:data' events
        this.set('data.a', 1);
   }
}

// when the users has changed by `change` method of A component
// we can not get the `$change:user.a` and `$change:user` events
<A data={self.get('user')} />

So we should freeze the property which passed to child component.