Fix the error :
> Unhandled Promise rejection: Can't construct a query for the property "storyComponentElementRef" of "StorybookWrapperComponent" since the query selector wasn't defined. ; Zone: <root> ; Task: Promise.then ; Value: Error: Can't construct a query for the property "storyComponentElementRef" of "StorybookWrapperComponent" since the query selector wasn't defined.
which appears on angular v11 once the ngcc command is executed
After the first rendering of a story, the next changes of `agrs` by addon controls or `globals` (for example) are not necessarily properties of the component (or template).
but can change other things like an Angular provider
With this additional verification if the stringify `moduleMetadata` structure changes then a complete rendering is done
This snippet:
```
import { window } from 'global';
```
will let you mock window variables in Jest tests.
However, it breaks hot module reloading in Vite,
because Vite injects code snippets in top of every
file:
```
window.STUFF = 'Vite injected some HMR code here';
import { window } from 'global';
// this fails: Uncaught ReferenceError: Cannot access 'window' before initialization
```
The simple solution is to rename `window` when importing it:
```
import { window as globalWindow } from 'global';
globalWindow.alert('hello world');
```
The code works like before, but Vite will be able to
inject its code snippet without interfering with the
rest of the code.
This would be a good fundament for adding Snowpack/Vite
builder support. Currently, Storybook UI can be built by
Webpack or tsc, but esbuild transpiles .ts file-by-file
and therefore has some caveats:
https://esbuild.github.io/content-types/#typescript-caveats
This change adds isolatedModules: true to tsconfig.json,
and fixes a few places in the Storybook source code.
The result has been briefly tested with esbuild - with
these changes, it's possible to build Storybook UI
using Vite.
