Source

Adds a block of source code with "copy" functionality to the page.

Similar to Storybook's Source block but with code replacement functionality for production-ready source code and image snapshot testing compatibility.

"<Component />"

useDarkMode()

true

process.env.IMPORT_PATH_REPLACEMENTS

true

false

Note:

• Source is an asynchronously rendered component.

Implementation:

To render a source code block provide any string as code:

<Source code="<Component />" />;

Note:

• As Source is designed to show production-ready source code, it will automatically remove any use of PropsTable.
• This can be disabled by setting removePropsTable to false.

The default theme is set with the useDarkMode hook from storybook-dark-mode, but this can be overwritten with the boolean dark:

<Source code="<Component />" dark={true} />;

Formatting:

The Source component uses Prettier to automatically format your code string.

If you do not wish to use this functionality, it can be disabled with format:

<Source code="This would cause line wrapping if format was enabled" format={false} />

Note:

• If the format is enabled the formatting will apply a trailing semicolon.
• You can prevent this by enabling the removeTrailingSemicolon option.

Import Path Replacements (optional):

The Source component can automatically display all file import paths as they would be used by a consumer of your code.

Please see Import Path Replacements for setting global (default) configuration of all instances of Source.

Alternatively, you can override the global configuration by supplying a stringified { key: value } object for importPathReplacements directly.

For further control, you can also use the inline comment // preserve-path to opt-out of the import path replacement:

// Component.example.mjs (the "example component")
import Component from "../src/Component.mjs";
import Preserve from "../src/Preserve.mjs"; // preserve-path

const notAnImport = "../src/notAnImport.mjs";

// Component.stories.mjs
import ComponentExampleRaw from "./Component.example.mjs?raw";
import packageJson from "../package.json";

<Source
  code={ComponentExampleRaw}
  importPathReplacements={JSON.stringify({
    "^": `${packageJson.name}/`, // Prepend package name to relative paths
    "../": "", // Remove "parent directory" relative path segments
    "./": "", // Remove "current directory" relative path segments
    "src/": "dist/", // Replace "src/" with "dist/"
  })}
/>;

// Source code displayed with "importPathReplacements" applied
import Component from "@idesigncode/storybook-tools/dist/Component.mjs";
import Preserve from "../src/Preserve.mjs";

const notAnImport = "../src/notAnImport.mjs";

You can also disable import path replacements on each instance of Source by setting importPathReplacements to false.

Note:

• Import path replacements are performed in the order specified.
• Matches may occur more than once within an import path.
• Any use of the // preserve-path will be removed from the displayed source code of each Source that uses import path replacements.

See also:

• Import Path Replacements - global (default) import path replacements configuration of all instances of Source.
• Raw Imports - get the source code of an imported file.