diff --git a/notes/2020-08-12.md b/notes/2020-08-12.md new file mode 100644 index 00000000000..3d09d5d915d --- /dev/null +++ b/notes/2020-08-12.md @@ -0,0 +1,127 @@ +**August 12, 2020** + +## Introducing Stencil v2 + +- Adam is going through the new features and breaking changes of Stencil v2. + +- The breaking change is the fact that IE and Edge are disabled by default. It is possible to re-enable them via configuration. + +- Simon and Adam are exchanging on the contributor channel about new default, es5, opt-in/opt-out and production build. + +- `disconnectCallback` is the new standard because `didUnload` worked only 95% of the time. Angular for instance reuses instances so it is not stable to connect and disconnect. + +- `async` is the default for taskQueue for improved performance. + +- However, the `immediate` task queue doesn't have the request animation frame and for that reason is going to be better rated by benchmark tools as it accelerate the rendering. + +- Node v12.10 is the new minimal requirement. + +- The build is upgraded to ES2018. + +- v2 will be kept under prerelease until TypeScript v4 will be out. TS will be just better at checking the application but no major breaking changes. + +- Some breaking changes have been made internally, but it is just smarter now 😉. + +- ReflectAttribute changed to just `reflect` and Stencil will throw a warning asking you to fix it. + +- Some bugs fix have been implemented too (one for Safari v10 and another for an issue in the immediate queue) + +- Styles are not consumed as esm imports. + +``` +import { Component, h } from '@stencil/core'; +++ import styles from './styles.css'; +@Component({ + tag: 'hello-vdom', +++ styles, +}) +export class HelloWorld { + render() { + return

Hello VDom!

; + } +} +``` + +The example can be found in the following [hello-vdom.tsx](https://github.com/ionic-team/stencil/blob/master/test/hello-vdom/src/components/hello-vdom.tsx). + +Sass should be consumed the same way but it has not yet been tested. + +Style consumption works in an identical scoped way as it is working today. + +Adam is also showing a unit test to display what's happening right now with styles (see `static get styles()` in [parse-styles.spec.ts](https://github.com/ionic-team/stencil/blob/735a1a14eb688ce2bd75785a566f2249c6f78f38/src/compiler/transformers/test/parse-styles.spec.ts#L75)). + +In short: "that's how is it working now - Adam". + +## Terser v5 + +- the new version (v5) of Terser, for minification, is coming and will be integrated. It includes a better async/await support. + +## Contributors questions + +### Debug minify + +Matthias is asking how is it possible to track/debug minify errors. + +### Function Component And React Bindings + +Ashika is asking about Functional Component used in React Bindings because of rendering issues. + +Sam has maybe also a related issue (I did not properly understand, my data connection was pretty unstable 😅). + +Adam asks if this happens with the very last release of the DS output (has they released a new version really recently). He will ask Josh (who's now in another team) to have a look. + +Resources: +* [stencil-ds-output-targets](https://github.com/ionic-team/stencil-ds-output-targets) +* [react-output-target](https://github.com/ionic-team/stencil-ds-output-targets/tree/master/packages/react-output-target) + +### Best Way To Pass Data Down And Bindings + +Akisha has also a question regarding the development of renderless components in order to pass down data (like for example `@Props`) to components added as slots. + +Adam answered that the preferred solution to pass data down would be the Stencil Store. + +Akisha said there was issue with this store and the bindings. + +The related issue: [#109](https://github.com/ionic-team/stencil-ds-output-targets/issues/109). + +Adam said it's probably an esm/commonjs issue. + +(Adam's puppy 🐕 is barking, I guess his dog does not like bundling issue neither). + +After discussion, it's maybe a bug in the core regarding export. Akisha will update the issue to provide a bit more details. + +### Readonly Store For Children + +Akisha ask if it is possible to make the Stencil store `readonly` for the children? + +Adam said not yet, but he discussed that with Manu. They think it is possible with types. He's also really into it and would love to get a PR about it. + +### Memory Issues + +Cory is asking if anyone is having memory issues? + +He is not sure if it is Stencil related. He spent a lot of type debugging but did not find anything. + +It can be debugged with Chrome. The DOM count keep increasing even if everything is properly cleaned. + +He faces the problem in a dashboard with a calendar containing many "dominos". + +It finds place inside a tab inside a split-pane, so he will try to extract that to a plain page. + +The details of his issue is the following: + +* Loading the page and taking a heap snapshot I can see I already have detached DOM nodes +* e.g. https://beta.sworkit.com/collections/flexibility-challenge +* maybe the elements going from loading to loaded state - but shouldn't they be fully removed? + +### Event Listener And Lighthouse + +Adam ask about "my" issue [#2621](https://github.com/ionic-team/stencil/issues/2621) regarding event listener and Lighthouse complaining about the fact that it is not `passive`. + +I tried to answer but well, my data connection was really bad 😔. I will try to check the issue tonight or tomorrow. + +## Conclusion + +A nice presentation of what's upcoming in Stencil v2 and some exchange about the community questions. + +Another awesome Stencil Contributors Chat 🥳