CLI/Svelte: add interactions to cli template

[italoteix]

Issue: #16722

What I did
Similar to PR #17345. Added interactions to Svelte cli template.

How to test
Build cli locally and run repro to select Svelte as a framework

Is this testable with Jest or Chromatic screenshots?
Does this need a new example in the kitchen sink apps?
Does this need an update to the documentation?
If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 80a96de. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

Thanks for this contribution @italoteix !!

Unfortunately this is broken with the latest release of @storybook/testing-library. That release included @testing-library/user-event 14.1.1 which results in the following error:

ERROR in ./node_modules/@testing-library/user-event/dist/index.mjs 1426:16-31
Can't import the named export 'createEvent' from non EcmaScript module (only default export is available)
 @ ./node_modules/@storybook/testing-library/dist/esm/index.js
 @ ./src/stories/Page.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx|svelte))$
 @ ./generated-stories-entry.js
 @ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./storybook-init-framework-entry.js ./node_modules/@storybook/svelte/dist/esm/client/preview/config-generated-config-entry.js ./node_modules/@storybook/svelte/dist/esm/client/docs/config-generated-config-entry.js ./node_modules/@storybook/addon-links/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js ./node_modules/@storybook/addon-interactions/preview.js-generated-config-entry.js ./.storybook/preview.js-generated-config-entry.js ./generated-stories-entry.js
 
ERROR in ./node_modules/@testing-library/user-event/dist/index.mjs 2879:9-35
Can't import the named export 'getConfig' from non EcmaScript module (only default export is available)
 @ ./node_modules/@storybook/testing-library/dist/esm/index.js
 @ ./src/stories/Page.stories.js
 @ ./src sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx|svelte))$
 @ ./generated-stories-entry.js

It works correctly with @storybook/testing-library 0.0.9 so I'll have to take a look at that

[yannbf]

Hey @j3rem1e do you happen to have any idea why an error like that would happen in the svelte project? It does work on other projects i.e. React

[j3rem1e]

Honestly.. I don't know ^^
I am lost with the cjs/mjs and type:"module" things.

However, I reproduce this issue easly in addon-svelte-csf by upgrading to @storybook/testing-library 0.0.10. And a fix is to add this rule to the configuration of webpack :

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto'
},

[yannbf]

This is good now, the problem was circumvented in a new release of @storybook/testing-library. Thanks @j3rem1e for the tip, the problem is in @testing-library/dom and might take some time to be fixed.

[jonniebigodes]

@italoteix if you could message me (same username) on our Discord Server I'd appreciate it as I would like to follow up on this pull request and the other one you created that includes the interactions for Preact. Looking forward to your message.

Hope you have a great weekend!

Stay safe