Restore & add support for legacy syntax

[xeho91]

Dependencies

Requires #181 to be merged first.

Objectives

Support for legacy components for backward compatibility:

1. <Meta>

   • codemod - <Meta> to defineMeta & insertion into <script context="module">
   • tests

2. <Story>

   • tests
   • codemods:
     • transform let:args & let:context directives to inner children snippet block
     • transform autodocs prop to tags={["autodocs"]}
     • transform source by removing when is a shorthand or to parameters.docs.source.code
     • transform template prop to children={<template identifier>}

3. <Template>

   • codemods - replace component with snippet block
   • tests

Add addon options - StorybookAddonSvelteCsfOptions

• update addon's Vite plugin - add pre-transform hook
• add option supportLegacy

Deprecation warnings, errors, messages

• document new errors
• Ensure deprecation warnings are visible enough while writing stories code:
  - writing the code (with TypeScript support and marking <Template> as deprecated)
• log deprecated warnings at runtime

Update stories tests

• Using LegacyTemplate component
• Using LegacyStory component (and its legacy props)
• Using Meta component

Update indexer

• Support indexing legacy export const meta syntax
• Support indexing legacy Meta component

TODO

• Restore & add support for legacy syntax #186 (comment)
• Restore & add support for legacy syntax #186 (comment)
• Restore & add support for legacy syntax #186 (comment)
• Restore & add support for legacy syntax #186 (comment)

---

📦 Published PR as canary version: 4.2.0--canary.186.b543003.0

✨ Test out this PR locally via:

npm install @storybook/[email protected]
# or 
yarn add @storybook/[email protected]

[xeho91]

@JReinhold PR is ready for review.
Phew, there were some issues so hard to spot, because of missing type support from svelte/compiler on their AST nodes (reference)

Two requests to put attention to:

1. If you could find any spots where we can emit warnings about using legacy syntax, it'll be awesome!
2. Restore & add support for legacy syntax #186 (comment) This one is too hard for me to figure out at this moment. As discussed in private, is better left to user to fix very advanced cases on their own.

[JReinhold]

Very impressive work!

[JReinhold]

Maybe we can rethink this. I'd expect that if our transformation fails for whatever reason, it will show when you load the story, and the preview will fail to render it because the syntax is bad/undefined variables are references. it could also be the svelte compiler that will fail, but I think that's more rare.

so we can attempt to catch the failing render (client-side), see if the legacy flag is enabled, and display a warning like "this is likely failing because you have logic that can't be supported with the legacy api transformer. please migrate the story file to the new api manually".

I'll think about how to do this in practice.