Merge pull request #217 from storybookjs/context-module

refactor: Replace deprecated `context="module"` with `module`

ERRORS.md

@@ -8,12 +8,12 @@ This document is a list of known errors that this addon throws.
 
 No **[module context]** was found in the stories file.
 
-This often happens if you call `defineMeta(...)` in a regular instance script (`<script>`) and not in a module script (`<script context="module">`), which is required.
+This often happens if you call `defineMeta(...)` in a regular instance script (`<script>`) and not in a module script (`<script module>`), which is required.
 
 Ensure the stories file which caused this error has the following initial code:
 
 ```svelte
-<script context="module">
+<script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   const { Story } = defineMeta({
@@ -42,7 +42,7 @@ No import of `defineMeta` from this addon package was found in the **[module con
 You might have forgotten to import it:
 
 ```diff
-<script context="module">
+<script module>
 + import { defineMeta } from "@storybook/addon-svelte-csf";
   ...
 </script>
@@ -53,7 +53,7 @@ You might have forgotten to import it:
 No variable declaration from the `defineMeta()` call was found. While you might have called `defineMeta()`, its result needs to be assigned to a variable:
 
 ```diff
-<script context="module">
+<script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
 - defineMeta(...);
@@ -70,7 +70,7 @@ No **destructured** `Story` component was found in the variable declaration with
 The `Story` component might have been incorrectly created:
 
 ```diff
-<script context="module">
+<script module>
 - const Story = defineMeta({
 + const { Story } = defineMeta({
     // define your stories meta here
@@ -84,7 +84,7 @@ The **first argument** to the `defineMeta()` call was invalid.
 It must be a valid **object expression** with the same structure as [the Default export in CSF](https://storybook.js.org/docs/api/csf#default-export).
 
 ```diff
-<script context="module">
+<script module>
 - const { Story } = defineMeta();
 + const { Story } = defineMeta({
 +   title: 'Path/To/MyComponent',
@@ -193,7 +193,7 @@ It expected an identifier to a Svelte component but got something else.
 Ensure you're using the correct syntax, following the example below:
 
 ```svelte
-<script context="module">
+<script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';

MIGRATION.md

@@ -38,7 +38,7 @@ Before:
 After:
 
 ```svelte
-<script context="module">
+<script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
@@ -57,7 +57,7 @@ Difference:
 
 ```diff
 - <script>
-+ <script context="module">
++ <script module>
 -  import { Meta } from "@storybook/addon-svelte-csf";
 +  import { defineMeta } from "@storybook/addon-svelte-csf";
 
@@ -82,7 +82,7 @@ Difference:
 Before:
 
 ```svelte
-<script context="module">
+<script module>
   import { Story } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
@@ -102,7 +102,7 @@ Before:
 After:
 
 ```svelte
-<script context="module">
+<script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
@@ -120,7 +120,7 @@ After:
 Difference:
 
 ```diff
-<script context="module">
+<script module>
 -   import { Story } from "@storybook/addon-svelte-csf";
 +   import { defineMeta } from "@storybook/addon-svelte-csf";
 

README.md

@@ -58,7 +58,7 @@ Svelte CSF stories files must always have the `.stories.svelte` extension.
 All stories files must have a "meta" (aka. "default export") defined, and its structure follows what's described in [the official docs on the subject](https://storybook.js.org/docs/api/csf#default-export). To define the meta in Svelte CSF, call the `defineMeta` function **within the module context**, with the meta properties you want:
 
 ```svelte
-<script context="module">
+<script module>
   //    👆 notice the module context, defineMeta does not work in a regular <script> tag - instance
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -164,7 +164,7 @@ If you only need a single template that you want to share, it can be tedious to
 In this case you can use the `setTemplate()` helper function that sets a default template for all stories. In regular CSF terms, this is the equivalent of defining a meta-level `render`-function versus story-level `render`-functions:
 
 ```svelte
-<script context="module">
+<script module>
   import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
   //                   👆 import the function
   import MyComponent from './MyComponent.svelte';
@@ -233,7 +233,7 @@ Story snippets and args can be type-safe when necessary. The type of the args ar
 You can make your snippets type-safe with the `Args` and `StoryContext` helper types:
 
 ```svelte
-<script context="module" lang="ts">
+<script module lang="ts">
   import { defineMeta, type Args, type StoryContext } from '@storybook/addon-svelte-csf';
   //                   👆         👆 import those type helpers from this addon -->
 

examples/Button.stories.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import {
     defineMeta,
     setTemplate,

examples/ExportName.stories.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
   /**

examples/Templating.stories.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { defineMeta, setTemplate, type Args } from '@storybook/addon-svelte-csf';
   import { expect, within } from '@storybook/test';
 

src/compiler/pre-transform/index.test.ts

@@ -82,7 +82,7 @@ describe(codemodLegacyNodes.name, () => {
     const transformed = await codemodLegacyNodes({ ast });
 
     expect(print(transformed)).toMatchInlineSnapshot(`
-      "<script context="module">
+      "<script module>
       	import { defineMeta } from "@storybook/addon-svelte-csf";
 
       	/** This is a description for the **Button** component stories. */
@@ -152,7 +152,7 @@ describe(codemodLegacyNodes.name, () => {
     const transformed = await codemodLegacyNodes({ ast });
 
     expect(print(transformed)).toMatchInlineSnapshot(`
-      "<script context="module">
+      "<script module>
       	import { defineMeta } from "@storybook/addon-svelte-csf";
       </script>"
     `);
@@ -175,7 +175,7 @@ describe(codemodLegacyNodes.name, () => {
     const transformed = await codemodLegacyNodes({ ast });
 
     expect(print(transformed)).toMatchInlineSnapshot(`
-      "<script context="module">
+      "<script module>
       	import { defineMeta } from "@storybook/addon-svelte-csf";
 
       	const { Story } = defineMeta({
@@ -207,7 +207,7 @@ describe(codemodLegacyNodes.name, () => {
     const transformed = await codemodLegacyNodes({ ast });
 
     expect(print(transformed)).toMatchInlineSnapshot(`
-      "<script context="module">
+      "<script module>
       	import { defineMeta } from "@storybook/addon-svelte-csf";
       	import Button from "./Button.svelte";
 
@@ -222,7 +222,7 @@ describe(codemodLegacyNodes.name, () => {
 
   it('throws error on more than one unidentified <Template> components', async ({ expect }) => {
     const code = `
-      <script context="module" lang="ts">
+      <script module lang="ts">
         import { Story, Template } from "${pkg.name}";
       </script>
 

src/parser/analyse/story/attributes.test.ts

@@ -12,7 +12,7 @@ describe(getStringValueFromAttribute.name, () => {
     expect,
   }) => {
     const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -50,7 +50,7 @@ describe(getArrayOfStringsValueFromAttribute.name, () => {
     expect,
   }) => {
     const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -90,7 +90,7 @@ describe(getArrayOfStringsValueFromAttribute.name, () => {
     expect,
   }) => {
     const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -129,7 +129,7 @@ describe(getArrayOfStringsValueFromAttribute.name, () => {
   it("extracts 'tags' attribute when is a correct type - array of strings", async ({ expect }) => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -154,7 +154,7 @@ describe(getArrayOfStringsValueFromAttribute.name, () => {
   it("returns empty array when 'tags' attribute is not provided", async ({ expect }) => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>

src/parser/analyse/story/attributes/identifiers.test.ts

@@ -11,7 +11,7 @@ describe(getStoryIdentifiers.name, () => {
   it("extracts 'exportName' attribute when is a Text string", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -40,7 +40,7 @@ describe(getStoryIdentifiers.name, () => {
   it("extracts 'exportName' attribute when is an expression with literal", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -69,7 +69,7 @@ describe(getStoryIdentifiers.name, () => {
   it("throws when '<Story />' doesn't provide an 'exportName' or 'name' attribute prop", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -104,7 +104,7 @@ describe(getStoryIdentifiers.name, () => {
   it("it ignores the 'exportName' attribute of '<Story>'s children component", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -135,7 +135,7 @@ describe(getStoryIdentifiers.name, () => {
   it("extracts both 'exportName' and 'name' attributes", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -164,7 +164,7 @@ describe(getStoryIdentifiers.name, () => {
   it("derives 'exportName' from 'name' attribute when 'exportName' attribute is missing", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -193,7 +193,7 @@ describe(getStoryIdentifiers.name, () => {
   it("throws when 'exportName' is not a valid JavaScript variable name", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -233,7 +233,7 @@ describe(getStoriesIdentifiers.name, () => {
   it('extracts multiple <Story /> components identifiers', async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -270,7 +270,7 @@ describe(getStoriesIdentifiers.name, () => {
   it("throws on identical 'exportName' attributes", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>
@@ -307,7 +307,7 @@ describe(getStoriesIdentifiers.name, () => {
   it("throws on identical 'exportName' attributes when deriving from 'name' attributes", async () => {
     const ast = getSvelteAST({
       code: `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf"
           const { Story } = defineMeta();
         </script>

src/parser/analyse/story/children.test.ts

@@ -11,7 +11,7 @@ describe(getStoryChildrenRawCode.name, () => {
       expect,
     }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -44,7 +44,7 @@ describe(getStoryChildrenRawCode.name, () => {
 
     it('works when `setTemplate` was used correctly in the instance tag', async ({ expect }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta, setTemplate } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -83,7 +83,7 @@ describe(getStoryChildrenRawCode.name, () => {
       expect,
     }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta, setTemplate } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -124,7 +124,7 @@ describe(getStoryChildrenRawCode.name, () => {
 
     it('works when no `setTemplate`, no `children` attribute, just a story', async ({ expect }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -155,7 +155,7 @@ describe(getStoryChildrenRawCode.name, () => {
   describe('When a `<Story />` is NOT a self-closing tag...', () => {
     it('works when a static children content provided', async ({ expect }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -186,7 +186,7 @@ describe(getStoryChildrenRawCode.name, () => {
 
     it("works when a `children` svelte's snippet block used inside", async ({ expect }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";
@@ -221,7 +221,7 @@ describe(getStoryChildrenRawCode.name, () => {
       expect,
     }) => {
       const code = `
-        <script context="module">
+        <script module>
           import { defineMeta, setTemplate } from "@storybook/addon-svelte-csf";
 
           import SampleComponent from "./SampleComponent.svelte";