bug(tunnel): 1.5.x breaks the stencil state tunnel

[mburger81]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Using stencil from version 1.5.x breaks the stencil state tunnel with this error

core-37875aab.js:65 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('({ state }, children) => {
        currentState = state;
        listeners.forEach(updateListener);
        return children;
    }') is not a valid name.
    at createElm (http://localhost:3334/build/core-37875aab.js:693:19)
    at addVnodes (http://localhost:3334/build/core-37875aab.js:780:25)
    at patch (http://localhost:3334/build/core-37875aab.js:972:13)
    at renderVdom (http://localhost:3334/build/core-37875aab.js:1130:5)
    at updateComponent (http://localhost:3334/build/core-37875aab.js:1249:17)
    at Array.update (http://localhost:3334/build/core-37875aab.js:1195:26)
    at consumeTimeout (http://localhost:3334/build/core-37875aab.js:120:23)
    at flush (http://localhost:3334/build/core-37875aab.js:143:5)

Sorry I'm already late if you need more info let me know, but it seems there is a breaking change or bug and very simple to reproduce?

[manucorporat]

can you please provide a repo case? happy to take a look.

How can I reproduce?

[mburger81]

Hello, I created a new repository to reproduce the issue
https://github.com/mburger81/stencil-tunnel

The project is very simple, it has a cotainer component and an item component. The Item component is registering his self to the container component using the stencil state tunnel (stupid example but to show you the bug)

The repo is using stencil/core in version 1.5.0 very still anything is fine. If you run this you can see this output in the log

xxxxxxxxxxxxxxxxxxx
add <component-item class=​"hydrated">​…​</component-item>​
xxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxx
add <component-item class=​"hydrated">​…​</component-item>​
xxxxxxxxxxxxxxxxxxx

both component items are registering its self to the the container using add method of state tunnel.

If you upgrade to stencil/core to version 1.5.1 you'll get my error described before

core-58427871.js:65 DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('({ state }, children) => {
        currentState = state;
        listeners.forEach(updateListener);
        return children;
    }') is not a valid name.
    at createElm (http://localhost:3333/build/core-58427871.js:685:19)
    at addVnodes (http://localhost:3333/build/core-58427871.js:772:25)
    at patch (http://localhost:3333/build/core-58427871.js:964:13)
    at renderVdom (http://localhost:3333/build/core-58427871.js:1122:5)
    at updateComponent (http://localhost:3333/build/core-58427871.js:1241:17)
    at Array.update (http://localhost:3333/build/core-58427871.js:1187:26)
    at consumeTimeout (http://localhost:3333/build/core-58427871.js:121:23)
    at flush (http://localhost:3333/build/core-58427871.js:144:5)

Not sure if StateTunnel is still intend to use, because it is not documented anymore on the stencil site and there are some bugs and feature request but the rep seems to bee "dead"

Thx