Skip to content

Docs: Raw support for mjs, jsx, and tsx files#25018

Closed
ndelangen wants to merge 4 commits into
nextfrom
mjs-jsx-tsx-raw-support
Closed

Docs: Raw support for mjs, jsx, and tsx files#25018
ndelangen wants to merge 4 commits into
nextfrom
mjs-jsx-tsx-raw-support

Conversation

@ndelangen
Copy link
Copy Markdown
Member

@ndelangen ndelangen commented Nov 28, 2023

Re-apply: #21671 by @42shadow42

What I did

Enabled support for loading truly raw mjs,jsx, and tsx files by disabling the babel-loader when the raw query is set.

How to test

  1. Run a sandbox for template, e.g. yarn task --task sandbox --template react-webpack/18-ts
  2. Open Storybook in your browser
  3. Comment the webpackFinal overrides in .storybook/main.ts
  4. Access ?path=/docs/addons-docs-stories-mdx-raw-source--docs
  5. Verify you see:
import React, { Fragment } from 'react';

export const MY_VALUE_I_WANT_TO_SHOW_IN_STORY = 'Hello World!';

export const RawSource = () => {
  return <Fragment>{MY_VALUE_I_WANT_TO_SHOW_IN_STORY}</Fragment>;
};

Instead of:

import React, { Fragment } from "react";
export const MY_VALUE_I_WANT_TO_SHOW_IN_STORY = "Hello World!";
export const RawSource = () => {
  return /* @__PURE__ */ React.createElement(Fragment, null, MY_VALUE_I_WANT_TO_SHOW_IN_STORY);
};

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Comment on lines +1 to +9
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import * as stories from './raw-source.non-stories';
import { RawSource } from './RawSource';

<Meta component={RawSource} />

<Canvas>
<Story story={stories.RawSource} />
</Canvas> No newline at end of file
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test case doesn't make sense anymore, since MDX Stories won't be supported in 8.0 anyway.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, what about now?

Copy link
Copy Markdown
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the resourceQuery itself is fine, but I expect we can test this in a regular story, we don't need to test this through MDX.

@ndelangen ndelangen requested a review from JReinhold November 28, 2023 19:20
@ndelangen
Copy link
Copy Markdown
Member Author

@JReinhold do you have a suggestion on how to make this story only function for a specific set of sandboxes? none-svelte and non-angular?

Alternatively, any suggestions why they seem to not work for those frameworks?

@valentinpalkovic
Copy link
Copy Markdown
Contributor

valentinpalkovic commented Nov 29, 2023

@ndelangen For Angular, it is pretty easy to answer. Angular might use its own babel-loader on top.

@ndelangen ndelangen marked this pull request as draft February 9, 2024 10:19
@ndelangen ndelangen closed this Mar 26, 2024
@kasperpeulen kasperpeulen deleted the mjs-jsx-tsx-raw-support branch April 4, 2026 19:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants