@responsive-ui/tab - npm Package Compare versions

Comparing version 1.1.0-alpha.0 to 1.1.0-alpha.1

lib/cjs/index.js

@@ -158,13 +158,30 @@ 'use strict';
 }
-let flushing = false;
+// flush() calls callbacks in this order:
+// 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
 const seen_callbacks = new Set();
+let flushidx = 0; // Do *not* move this inside the flush() function
 function flush() {
-    if (flushing)
-        return;
-    flushing = true;
+    const saved_component = current_component;
     do {
         // first, call beforeUpdate functions
         // and update components
-        for (let i = 0; i < dirty_components.length; i += 1) {
-            const component = dirty_components[i];
+        while (flushidx < dirty_components.length) {
+            const component = dirty_components[flushidx];
+            flushidx++;
             set_current_component(component);
@@ -175,2 +192,3 @@ update(component.$$);
         dirty_components.length = 0;
+        flushidx = 0;
         while (binding_callbacks.length)
@@ -195,4 +213,4 @@ binding_callbacks.pop()();
     update_scheduled = false;
-    flushing = false;
     seen_callbacks.clear();
+    set_current_component(saved_component);
 }
@@ -375,3 +393,3 @@ function update($$) {
 
-/* components/tab/src/Tab.svelte generated by Svelte v3.44.0 */
+/* components/tab/src/Tab.svelte generated by Svelte v3.45.0 */
 
@@ -412,4 +430,4 @@ function get_each_context(ctx, list, i) {
 			t1 = space();
-			attr(span, "class", "responsive-ui-tab__item svelte-zo5jci");
-			toggle_class(span, "responsive-ui-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
+			attr(span, "class", "resp-tab__item svelte-k2mekv");
+			toggle_class(span, "resp-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
 		},
@@ -431,3 +449,3 @@ m(target, anchor) {
 			if (dirty & /*selected*/ 1) {
-				toggle_class(span, "responsive-ui-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
+				toggle_class(span, "resp-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
 			}
@@ -443,3 +461,3 @@ },
 
-// (47:0) {:else}
+// (44:0) {:else}
 function create_else_block(ctx) {
@@ -528,3 +546,3 @@ let each_1_anchor;
 
-// (45:0) {#if hasSlots}
+// (42:0) {#if hasSlots}
 function create_if_block(ctx) {
@@ -577,3 +595,3 @@ let current;
 
-// (49:4) {#if item && item.component}
+// (46:4) {#if item && item.component}
 function create_if_block_1(ctx) {
@@ -645,3 +663,3 @@ let switch_instance;
 
-// (48:2) {#each items as item}
+// (45:2) {#each items as item}
 function create_each_block(ctx) {
@@ -745,6 +763,6 @@ let if_block_anchor;
 			if_block_anchor = empty();
-			attr(nav, "class", "svelte-zo5jci");
-			attr(div0, "class", "responsive-ui-tab__ink-bar svelte-zo5jci");
+			attr(nav, "class", "svelte-k2mekv");
+			attr(div0, "class", "resp-tab__ink-bar svelte-k2mekv");
 			attr(div0, "style", div0_style_value = `left:${/*left*/ ctx[4]}px;width:${/*width*/ ctx[5]}px`);
-			attr(div1, "class", "responsive-ui-tab svelte-zo5jci");
+			attr(div1, "class", "resp-tab svelte-k2mekv");
 			attr(div1, "style", /*style*/ ctx[2]);
@@ -751,0 +769,0 @@ },

lib/esm/index.js

@@ -156,13 +156,30 @@ function noop() { }
 }
-let flushing = false;
+// flush() calls callbacks in this order:
+// 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
 const seen_callbacks = new Set();
+let flushidx = 0; // Do *not* move this inside the flush() function
 function flush() {
-    if (flushing)
-        return;
-    flushing = true;
+    const saved_component = current_component;
     do {
         // first, call beforeUpdate functions
         // and update components
-        for (let i = 0; i < dirty_components.length; i += 1) {
-            const component = dirty_components[i];
+        while (flushidx < dirty_components.length) {
+            const component = dirty_components[flushidx];
+            flushidx++;
             set_current_component(component);
@@ -173,2 +190,3 @@ update(component.$$);
         dirty_components.length = 0;
+        flushidx = 0;
         while (binding_callbacks.length)
@@ -193,4 +211,4 @@ binding_callbacks.pop()();
     update_scheduled = false;
-    flushing = false;
     seen_callbacks.clear();
+    set_current_component(saved_component);
 }
@@ -373,3 +391,3 @@ function update($$) {
 
-/* components/tab/src/Tab.svelte generated by Svelte v3.44.0 */
+/* components/tab/src/Tab.svelte generated by Svelte v3.45.0 */
 
@@ -410,4 +428,4 @@ function get_each_context(ctx, list, i) {
 			t1 = space();
-			attr(span, "class", "responsive-ui-tab__item svelte-zo5jci");
-			toggle_class(span, "responsive-ui-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
+			attr(span, "class", "resp-tab__item svelte-k2mekv");
+			toggle_class(span, "resp-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
 		},
@@ -429,3 +447,3 @@ m(target, anchor) {
 			if (dirty & /*selected*/ 1) {
-				toggle_class(span, "responsive-ui-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
+				toggle_class(span, "resp-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
 			}
@@ -441,3 +459,3 @@ },
 
-// (47:0) {:else}
+// (44:0) {:else}
 function create_else_block(ctx) {
@@ -526,3 +544,3 @@ let each_1_anchor;
 
-// (45:0) {#if hasSlots}
+// (42:0) {#if hasSlots}
 function create_if_block(ctx) {
@@ -575,3 +593,3 @@ let current;
 
-// (49:4) {#if item && item.component}
+// (46:4) {#if item && item.component}
 function create_if_block_1(ctx) {
@@ -643,3 +661,3 @@ let switch_instance;
 
-// (48:2) {#each items as item}
+// (45:2) {#each items as item}
 function create_each_block(ctx) {
@@ -743,6 +761,6 @@ let if_block_anchor;
 			if_block_anchor = empty();
-			attr(nav, "class", "svelte-zo5jci");
-			attr(div0, "class", "responsive-ui-tab__ink-bar svelte-zo5jci");
+			attr(nav, "class", "svelte-k2mekv");
+			attr(div0, "class", "resp-tab__ink-bar svelte-k2mekv");
 			attr(div0, "style", div0_style_value = `left:${/*left*/ ctx[4]}px;width:${/*width*/ ctx[5]}px`);
-			attr(div1, "class", "responsive-ui-tab svelte-zo5jci");
+			attr(div1, "class", "resp-tab svelte-k2mekv");
 			attr(div1, "style", /*style*/ ctx[2]);
@@ -749,0 +767,0 @@ },

lib/index.js

@@ -159,13 +159,30 @@ var Tab = (function () {
     }
-    let flushing = false;
+    // flush() calls callbacks in this order:
+    // 1. All beforeUpdate callbacks, in order: parents before children
+    // 2. All bind:this callbacks, in reverse order: children before parents.
+    // 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+    //    for afterUpdates called during the initial onMount, which are called in
+    //    reverse order: children before parents.
+    // Since callbacks might update component values, which could trigger another
+    // call to flush(), the following steps guard against this:
+    // 1. During beforeUpdate, any updated components will be added to the
+    //    dirty_components array and will cause a reentrant call to flush(). Because
+    //    the flush index is kept outside the function, the reentrant call will pick
+    //    up where the earlier call left off and go through all dirty components. The
+    //    current_component value is saved and restored so that the reentrant call will
+    //    not interfere with the "parent" flush() call.
+    // 2. bind:this callbacks cannot trigger new flush() calls.
+    // 3. During afterUpdate, any updated components will NOT have their afterUpdate
+    //    callback called a second time; the seen_callbacks set, outside the flush()
+    //    function, guarantees this behavior.
     const seen_callbacks = new Set();
+    let flushidx = 0; // Do *not* move this inside the flush() function
     function flush() {
-        if (flushing)
-            return;
-        flushing = true;
+        const saved_component = current_component;
         do {
             // first, call beforeUpdate functions
             // and update components
-            for (let i = 0; i < dirty_components.length; i += 1) {
-                const component = dirty_components[i];
+            while (flushidx < dirty_components.length) {
+                const component = dirty_components[flushidx];
+                flushidx++;
                 set_current_component(component);
@@ -176,2 +193,3 @@ update(component.$$);
             dirty_components.length = 0;
+            flushidx = 0;
             while (binding_callbacks.length)
@@ -196,4 +214,4 @@ binding_callbacks.pop()();
         update_scheduled = false;
-        flushing = false;
         seen_callbacks.clear();
+        set_current_component(saved_component);
     }
@@ -376,3 +394,3 @@ function update($$) {
 
-    /* components/tab/src/Tab.svelte generated by Svelte v3.44.0 */
+    /* components/tab/src/Tab.svelte generated by Svelte v3.45.0 */
 
@@ -413,4 +431,4 @@ function get_each_context(ctx, list, i) {
     			t1 = space();
-    			attr(span, "class", "responsive-ui-tab__item svelte-zo5jci");
-    			toggle_class(span, "responsive-ui-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
+    			attr(span, "class", "resp-tab__item svelte-k2mekv");
+    			toggle_class(span, "resp-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
     		},
@@ -432,3 +450,3 @@ m(target, anchor) {
     			if (dirty & /*selected*/ 1) {
-    				toggle_class(span, "responsive-ui-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
+    				toggle_class(span, "resp-tab__item--selected", /*selected*/ ctx[0] == /*i*/ ctx[19]);
     			}
@@ -444,3 +462,3 @@ },
 
-    // (47:0) {:else}
+    // (44:0) {:else}
     function create_else_block(ctx) {
@@ -529,3 +547,3 @@ let each_1_anchor;
 
-    // (45:0) {#if hasSlots}
+    // (42:0) {#if hasSlots}
     function create_if_block(ctx) {
@@ -578,3 +596,3 @@ let current;
 
-    // (49:4) {#if item && item.component}
+    // (46:4) {#if item && item.component}
     function create_if_block_1(ctx) {
@@ -646,3 +664,3 @@ let switch_instance;
 
-    // (48:2) {#each items as item}
+    // (45:2) {#each items as item}
     function create_each_block(ctx) {
@@ -746,6 +764,6 @@ let if_block_anchor;
     			if_block_anchor = empty();
-    			attr(nav, "class", "svelte-zo5jci");
-    			attr(div0, "class", "responsive-ui-tab__ink-bar svelte-zo5jci");
+    			attr(nav, "class", "svelte-k2mekv");
+    			attr(div0, "class", "resp-tab__ink-bar svelte-k2mekv");
     			attr(div0, "style", div0_style_value = `left:${/*left*/ ctx[4]}px;width:${/*width*/ ctx[5]}px`);
-    			attr(div1, "class", "responsive-ui-tab svelte-zo5jci");
+    			attr(div1, "class", "resp-tab svelte-k2mekv");
     			attr(div1, "style", /*style*/ ctx[2]);
@@ -752,0 +770,0 @@ },

package.json

 {
   "name": "@responsive-ui/tab",
-  "version": "1.1.0-alpha.0",
+  "version": "1.1.0-alpha.1",
   "description": "A tab component of responsive-ui.",
@@ -48,3 +48,3 @@ "author": "Si3nLoong <[e-mail]> (https://github.com/si3nloong)",
   },
-  "gitHead": "041fde5891c39eaf1427ca4fdefbd6a13a01c1cb"
+  "gitHead": "e1b9f4e23f2b8fffe0c7b89be95d76bd1fcc2660"
 }

README.md

@@ -34,3 +34,3 @@
 
-[@responsive-ui/accordion](https://github.com/wetix/responsive-ui/tree/main/components/accordion) is 100% free and open-source, under the [MIT license](https://github.com/wetix/responsive-ui/blob/main/LICENSE).
+[@responsive-ui/tab](https://github.com/wetix/responsive-ui/tree/main/components/tab) is 100% free and open-source, under the [MIT license](https://github.com/wetix/responsive-ui/blob/main/LICENSE).
 
@@ -37,0 +37,0 @@ ## 🎉 Big Thanks To

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

2514

increased by0.4%

Worsened metrics

Total package byte prevSize

83031

decreased by-9.53%

Number of package files

9

decreased by-18.18%

No dependency changes