diff --git a/README.md b/README.md index 56d53d0..ddb3254 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,16 @@ When I was introduced to [React](https://github.com/facebook/react), I liked it - About **6k** code size (~3k compressed) - **Stateful components** using [hooks](https://reactjs.org/docs/hooks-intro.html) -- **Compatible** with ancient browsers - Optional **development mode** -- **Animations** integrated +- CSS-less **Animations** integrated +- **Fast and efficient** - Conditional css classes on elements -- Not terribly inefficient -- Can be bundled together with your application - 0 dependencies -- Production ready (at least the dynamic variant) +- No toolchain neccessary +- [RequireJS](https://requirejs.org) compatible +- [Production ready](https://softwareengineering.stackexchange.com/questions/61726) +- Compatible with down to 20th century browsers, basic polyfills included +- Created and actively maintained by a [perfectionist](https://www.webdesignerdepot.com/2010/04/the-ups-and-downs-of-being-a-perfectionist) ## Demos diff --git a/package.json b/package.json index cf57430..e91b408 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lui", - "version": "1.1.1", + "version": "1.1.2", "description": "web framework", "homepage": "https://l3p3.de/dok/lui.html", "repository": { diff --git a/src/lui.js b/src/lui.js index 7ca17b3..89db554 100644 --- a/src/lui.js +++ b/src/lui.js @@ -142,7 +142,7 @@ let current_slots_index = 0; let render_time = 0; /** - animation frame request (or null) + pending animation frame request or 0 @type {number} */ let rerender_requested = 0; @@ -512,6 +512,7 @@ const deps_comp_get = deps => ( const instance_render = (dom_parent, dom_first) => { const instance = /** @type {TYPE_INSTANCE} */ (current); const dom_after = dom_first; + const ilevel = instance.ilevel + 1; current_slots = instance.slots; current_slots_index = 1; @@ -605,7 +606,7 @@ const instance_render = (dom_parent, dom_first) => { object_comp_get(child_call.props) ), iparent: instance, - ilevel: instance.ilevel + 1, + ilevel, parent_index: childs_index, slots: [], childs: null_, @@ -700,6 +701,7 @@ const instance_render = (dom_parent, dom_first) => { ); let items_index = list_data.length; + let props_changed = true_; if( hook_prev(items_index, items_index) + items_index <= 0 @@ -713,6 +715,7 @@ const instance_render = (dom_parent, dom_first) => { items_index > 0 && list_data_index(list_data, items_map, items_order) ); + const indexes_removed = []; DEBUG && ( items_index || hook_static() @@ -720,7 +723,7 @@ const instance_render = (dom_parent, dom_first) => { // rerender? if (state.item_map) { - state.props_changed = ( + props_changed = ( props !== null_ && state.props_comp( props, @@ -730,7 +733,7 @@ const instance_render = (dom_parent, dom_first) => { VERBOSE && props && - state.props_changed && + props_changed && log('props changed', object_diff(state.props_prev, props)); // remove items @@ -757,10 +760,9 @@ const instance_render = (dom_parent, dom_first) => { state.props_comp = ( state.props_prev = props ) && object_comp_get(props); - state.props_changed = true_; } - // insert/reinsert all items + // for all items const childs = instance.childs = new Array_(items_index); while (items_index > 0) { const key = items_order[--items_index]; @@ -783,7 +785,7 @@ const instance_render = (dom_parent, dom_first) => { }, props_comp: null_, iparent: instance, - ilevel: instance.ilevel + 1, + ilevel, parent_index: items_index, slots: [], childs: null_, @@ -808,13 +810,10 @@ const instance_render = (dom_parent, dom_first) => { ); } else { - if (child.parent_index !== items_index) { - instance_reinsert(child, dom_parent, dom_first); - child.parent_index = items_index; - } + instance_reinsert(child, dom_parent, dom_first); if ( - state.props_changed || + props_changed || items_objects && state.item_comp( items_map[key], @@ -837,11 +836,12 @@ const instance_render = (dom_parent, dom_first) => { } ( - childs[items_index] = child + childs[child.parent_index = items_index] = child ).dom_first && ( dom_first = child.dom_first ); } + instance.dom_first = dom_first !== dom_after ? dom_first