Possible bug using two components with knobs inside another

[Mark Hughes (happybeing)]

I've just pushed svelte-iux branch svench-knobs-issue so you can take a look at this. It is also currently live at https://svelte-iux.zeit-now6.now.sh/

To reproduce:

• select IUXRevealContainer > IUXRevealArea comparisson
• in the knobs tab uncheck and check show1. This works as expected, first hiding and then showing the IUXRevealArea component.
• now uncheck show2. This hides and then reshows the IUXRevealArea component, which it shouldn't be changing at all. It should just hide IUXRevealAreaJS, and not re-show it until you uncheck show2.

I've been testing both separately outside Svench and don't see how this can be an issue in the components themselves, so think its an issue with svench.

[Mark Hughes (happybeing)]

I've been doing some more work, so master and the issue branch are in step and have some changes, but the above all still applies.

I've noticed what looks like another svench bug (perhaps related) in the code I've added, which you check out as follows:

• select IUXTrayHolder > testing
• in the knobs tab, notice show2 and show4 are unchecked, these control second and fourth reveal items (text "IUXRevealArea 2" and "IUXRevealArea4") but both are visible, when they should be hidden.
• you can confirm the checkboxes do control their visibility by checking and unchecking show2 and show4, so it is just the initial state which appears to be wrong

[rixo]

Honestly, I think those are problems in the components being illustrated (that Svench made really easy to diagnose & illustrate, yay!).

In the first example, when you change show2, this line catches the first .reveal-box. That's why it's not the second component being hidden.

  var box = document.querySelector('.reveal-box');

This line also raises an error because arguments.callee is kind of deprecated and not authorized in ES modules. That most probably destroys the component state.

    element.removeEventListener('transitionend', arguments.callee);    

I didn't dig the second example, but if you display the values of the knobs (with something like <pre>{knobs.show2}</pre>) they are correct, and if you replace your custom components with <div hidden={!knobs.show2} />, it all works as expected.

[Mark Hughes (happybeing)]

Thanks, really helpful. I have much to learn and an enjoying using Svench. There were some bugs it helped me find already, so I need to trust your code more!

[Mark Hughes (happybeing)]

Just to note svench helped me find another bug. 😄

[Mark Hughes (happybeing)]

Hey @rixo how's things?

I've been doing other work for a few days but have come back to the following error which is unexpected as I'm not aware anything has changed. So I did yarn upgrade which was fine, and changed the error to something else. So I did a git pull upstream master to get the latest svench-component-template and this error returned.

To be sure it's not something in my components I checked out a previous version of everything and get the same error. Maybe it's an update to a dependency which I've forgotten I did - maybe a security update. Seems unlikely but I don't understand why this has started.

Any clue what this might be?

$ yarn svench
yarn run v1.22.4
$ cross-env SVENCH=1 rollup -cw
loaded rollup.config.js with warnings
(!) Unused external imports
default imported from external module 'rehype-add-classes' but never used
[svench] Serving from public
[routix] Watching /home/mrh/src/svelte/components/svelte-iux/src/**/*.(svench|svench.svelte|svench.svx)
[Svelte HMR] Setting css option to false (set hot.noDisableCss to true to bypass)
rollup v2.17.1
bundles .svench/svench.js → public/svench...
[svench] Listening on http://localhost:4242
[HMR] Listening on port 46815
[HMR] Serving from RAM at http://127.0.0.1:46815
mdast-util-to-hast: deprecation: `allowDangerousHTML` is nonstandard, use `allowDangerousHtml` instead
[!] (plugin svench) TypeError: Could not load /home/mrh/src/svelte/components/svelte-iux/node_modules/svench/tmp/routes.js (imported by node_modules/svench/routes.js): [x].flat is not a function
TypeError: [x].flat is not a function
    at toArray (/home/mrh/src/svelte/components/svelte-iux/node_modules/svench/rollup.js:1484:26)
    at isAutoComponentIndex (/home/mrh/src/svelte/components/svelte-iux/node_modules/svench/rollup.js:1535:5)
    at /home/mrh/src/svelte/components/svelte-iux/node_modules/svench/rollup.js:1624:26

Edit: I just noticed this in the yarn output:

warning " > @rollup/plugin-commonjs@11.0.2" has incorrect peer dependency "rollup@^1.20.0".
warning " > @rollup/plugin-node-resolve@6.1.0" has incorrect peer dependency "rollup@^1.20.0".

[rixo]

TypeError: [x].flat is not a function

Missing Array.prototype.flat. Node >= 11 apparently: https://node.green/#ES2019-features-Array-prototype--flat--flatMap-. Is this possible that's the cause of your problem?

I really need to pass the server code through Babel to lessen the Node requirement.

I should probably upgrade the Rollup plugins too. @rollup/plugin-commonjs@11.0.2 was fixed because there was a blocking bug in the next version, but it has been fixed since.

[Mark Hughes (happybeing)]

Yes that's fixed it! I'd rebooted my machine in the interim which reverted to my default Node. Sorry!

If svench would check for the node version that would be enough. I just didn't twig the error was due to node version.