ts-dedent library in Storybook codebase.
In this article, we review ts-dedent library in Storybook codebase. We will look at:
-
What is ts-dedent?
-
ts-dedent usage in Storybook codebase.
I study patterns used in an open source project found on Github Trending. For this week, I reviewed some parts of Storybook codebase and wrote this article.
What is ts-dedent?
ts-dedent is a TypeScript package which smartly trims and strips indentation from multi-line strings.
Usage Examples
import { dedent } from 'ts-dedent';
console.log(dedent`A string that gets so long you need to break it over
multiple lines. Luckily dedent is here to keep it
readable without lots of spaces ending up in the string
itself.`);
// or
console.log(dedent`
A string that gets so long you need to break it over
multiple lines. Luckily dedent is here to keep it
readable without lots of spaces ending up in the string
itself.
`);
results in
A string that gets so long you need to break it over
multiple lines. Luckily dedent is here to keep it
readable without lots of spaces ending up in the string
itself.
What would be result if you just used back ticks — ``? well, this dedent is not about line breaks but rather about indentation because of spaces. Below is an example that makes it easy to understand:
function example() {
const message = `
Hello,
This is a message
with multiple lines
`;
console.log(message);
}
This outputs with all the leading spaces preserved:
Hello,
This is a message
with multiple lines
ts-dedent usage in Storybook codebase.
dedent is called at L40 in storybook/code/core/src/bin/loader.ts as shown below:
export function resolveWithExtension(importPath: string, currentFilePath: string): string {
// If the import already has an extension, return it as-is
if (path.extname(importPath)) {
return importPath;
}
deprecate(dedent`One or more extensionless imports detected: "${importPath}" in file "${currentFilePath}".
For maximum compatibility, you should add an explicit file extension to this import.
Storybook will attempt to resolve it automatically, but this may change in the future.
If adding the extension results in an error from TypeScript, we recommend setting moduleResolution to "bundler" in tsconfig.json
or alternatively look into the allowImportingTsExtensions option.`);
About me:
Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.
Email: ramu.narasinga@gmail.com
Study the patterns used in large OSS projects at Think Throo.