Improved importPathReplacement documentation & examples

idesigncode · May 31, 2023 · b5114cf · b5114cf
1 parent ec6219f
commit b5114cf
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 32 deletions.
diff --git a/__snapshots__/components-source--component-with-props-raw.png b/__snapshots__/components-source--component-with-props-raw.png
diff --git a/__snapshots__/components-source.test.js.snap b/__snapshots__/components-source.test.js.snap
@@ -67,7 +67,7 @@ exports[`Components/Source Component With Props Raw Displayed Source test 1`] =
       <span class>
       </span>
       <span class="token string">
-        '@idesigncode/storybook-tools/Component.mjs'
+        '@idesigncode/storybook-tools/dist/Component.mjs'
       </span>
       <span class="token punctuation">
         ;
@@ -244,13 +244,6 @@ exports[`Components/Source Component With Props Raw test 1`] = `
       </span>
       <span class="token tag script language-javascript">
       </span>
-      <span class="token tag script language-javascript comment">
-        // The [value] will replace the [key] matched within an import path
-      </span>
-      <span class="token tag script language-javascript">
-      </span>
-      <span class="token tag script language-javascript">
-      </span>
       <span class="token tag script language-javascript string-property property">
         '^'
       </span>
@@ -350,15 +343,15 @@ exports[`Components/Source Component With Props Raw test 1`] = `
       <span class="token tag script language-javascript">
       </span>
       <span class="token tag script language-javascript string">
-        ''
+        'dist/'
       </span>
       <span class="token tag script language-javascript punctuation">
         ,
       </span>
       <span class="token tag script language-javascript">
       </span>
       <span class="token tag script language-javascript comment">
-        // Remove "src directory" path segments
+        // Replace "src/" with "dist/"
       </span>
       <span class="token tag script language-javascript">
       </span>

diff --git a/__snapshots__/configuration-import-path-replacements.test.js.snap b/__snapshots__/configuration-import-path-replacements.test.js.snap
@@ -135,13 +135,6 @@ exports[`Configuration/Import Path Replacements Env test 1`] = `
       </span>
       <span class>
       </span>
-      <span class="token comment">
-        // The [value] will replace the [key] matched within an import path
-      </span>
-      <span class>
-      </span>
-      <span class>
-      </span>
       <span class="token string-property property">
         '^'
       </span>
@@ -241,15 +234,15 @@ exports[`Configuration/Import Path Replacements Env test 1`] = `
       <span class>
       </span>
       <span class="token string">
-        ''
+        'dist/'
       </span>
       <span class="token punctuation">
         ,
       </span>
       <span class>
       </span>
       <span class="token comment">
-        // Remove "src directory" path segments
+        // Replace "src/" with "dist/"
       </span>
       <span class>
       </span>

diff --git a/stories/ImportPathReplacements.mdx b/stories/ImportPathReplacements.mdx
@@ -7,10 +7,23 @@ import * as ImportPathReplacementsStories from './ImportPathReplacements.stories
 
 The [Source](/docs/components-source--docs) component can automatically display all [file import paths](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) as they would be used by a consumer of your code.
 
-By default, this functionality is disabled unless `process.env.IMPORT_PATH_REPLACEMENTS` has a value - a stringified "key-value pair" object:
-
-- `[key]` - a string to match within an import path (also accepts `^` to prepend relative paths).
-- `[value]` - a string to replace the matched `[key]` string.
+By default, this functionality is disabled unless `process.env.IMPORT_PATH_REPLACEMENTS` has a value - a stringified `{ key: value }` object:
+
+<table style={{ width: '100%' }}>
+  <tbody>
+    <tr>
+      <td>`key`</td>
+      <td>
+        A string to match within an import path. Also accepts `^` to prepend
+        relative paths.
+      </td>
+    </tr>
+    <tr>
+      <td>`value`</td>
+      <td>A string to replace the matched `key` string.</td>
+    </tr>
+  </tbody>
+</table>
 
 > #### Note:
 >

diff --git a/stories/ImportPathReplacements.stories.mjs b/stories/ImportPathReplacements.stories.mjs
@@ -15,11 +15,10 @@ export const Env = {
       `  env: (config) => ({`,
       `    ...config,`,
       `    IMPORT_PATH_REPLACEMENTS: JSON.stringify({`,
-      `      // The [value] will replace the [key] matched within an import path`,
       `      '^': \`\${packageJson.name}/\`, // Prepend package name to relative paths`,
       `      '../': '', // Remove "parent directory" relative path segments`,
       `      './': '', // Remove "current directory" relative path segments`,
-      `      'src/': '', // Remove "src directory" path segments`,
+      `      'src/': 'dist/', // Replace "src/" with "dist/"`,
       `    }),`,
       `  }),`,
       `  // ...main.mjs configuration`,

diff --git a/stories/Source.mdx b/stories/Source.mdx
@@ -32,10 +32,23 @@ The `Source` component can also display all [file import paths](https://develope
 
 Please see [Import Path Replacements](/docs/configuration-import-path-replacements--docs) for setting global (default) configuration of all instances of `Source`.
 
-Alternatively, you can override the global configuration by supplying a stringified "key-value pair" object for `importPathReplacements` directly:
-
-- `[key]` - a string to match within an import path (also accepts `^` to prepend relative paths).
-- `[value]` - a string to replace the matched `[key]` string.
+Alternatively, you can override the global configuration by supplying a stringified `{ key: value }` object for `importPathReplacements` directly:
+
+<table style={{ width: '100%' }}>
+  <tbody>
+    <tr>
+      <td>`key`</td>
+      <td>
+        A string to match within an import path. Also accepts `^` to prepend
+        relative paths.
+      </td>
+    </tr>
+    <tr>
+      <td>`value`</td>
+      <td>A string to replace the matched `key` string.</td>
+    </tr>
+  </tbody>
+</table>
 
 > #### Note:
 >

diff --git a/stories/Source.stories.mjs b/stories/Source.stories.mjs
@@ -85,11 +85,10 @@ export const ComponentWithPropsRaw = {
       `<Source`,
       `  code={ComponentWithPropsRaw}`,
       `  importPathReplacements={JSON.stringify({`,
-      `    // The [value] will replace the [key] matched within an import path`,
       `    '^': \`\${packageJson.name}/\`, // Prepend package name to relative paths`,
       `    '../': '', // Remove "parent directory" relative path segments`,
       `    './': '', // Remove "current directory" relative path segments`,
-      `    'src/': '', // Remove "src directory" path segments`,
+      `    'src/': 'dist/', // Replace "src/" with "dist/"`,
       `  })}`,
       `/>`,
     ].join('\n'),
@@ -107,7 +106,7 @@ export const ComponentWithPropsRawDisplayedSource = {
       '^': `${packageJson.name}/`,
       '../': '',
       './': '',
-      'src/': '',
+      'src/': 'dist/',
     }),
   },
 };