Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Replace deprecated context="module" with module #217

Merged
merged 6 commits into from
Oct 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions ERRORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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>
Expand All @@ -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(...);
Expand All @@ -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
Expand All @@ -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',
Expand Down Expand Up @@ -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';
Expand Down
10 changes: 5 additions & 5 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Before:
After:

```svelte
<script context="module">
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
Expand All @@ -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";

Expand All @@ -82,7 +82,7 @@ Difference:
Before:

```svelte
<script context="module">
<script module>
import { Story } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
Expand All @@ -102,7 +102,7 @@ Before:
After:

```svelte
<script context="module">
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
Expand All @@ -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";

Expand Down
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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 -->

Expand Down
2 changes: 1 addition & 1 deletion examples/Button.stories.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script context="module" lang="ts">
<script module lang="ts">
import {
defineMeta,
setTemplate,
Expand Down
2 changes: 1 addition & 1 deletion examples/ExportName.stories.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script context="module" lang="ts">
<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';

/**
Expand Down
2 changes: 1 addition & 1 deletion examples/Templating.stories.svelte
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
10 changes: 5 additions & 5 deletions src/compiler/pre-transform/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down Expand Up @@ -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>"
`);
Expand All @@ -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({
Expand Down Expand Up @@ -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";

Expand All @@ -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>

Expand Down
10 changes: 5 additions & 5 deletions src/parser/analyse/story/attributes.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions src/parser/analyse/story/attributes/identifiers.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions src/parser/analyse/story/children.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down
Loading
Loading