fix: gracefully handle stories named the same as standard javascript …

…keywords (#41) * fix: gracefully handle stories named the same as standard javascript keywords * fix indexer * capitalize id instead of adding a prefix
tobiasdiez · Apr 15, 2023 · 83abd96 · 83abd96
1 parent 0d584f8
commit 83abd96
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 50 deletions.
diff --git a/examples/vite/src/tests/defaultname.stories.vue b/examples/vite/src/tests/defaultname.stories.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import MyButton from '../components/Button.vue'
+</script>
+
+<template>
+  <Stories
+    :component="MyButton"
+    title="Tests/Default Name"
+  >
+    <Story title="Default">
+      <MyButton label="Button" />
+    </Story>
+  </Stories>
+</template>
diff --git a/src/core/transform.ts b/src/core/transform.ts
@@ -108,6 +108,10 @@ function generateStoryImport(
     id: 'test',
     compilerOptions: { bindingMetadata: resolvedScript?.bindings },
   })
+
+  // Capitalize id to avoid collisions with standard js keywords (e.g. if the id is 'default')
+  id = id.charAt(0).toUpperCase() + id.slice(1)
+
   const renderFunction = code.replace(
     'export function render',
     `function render${id}`

diff --git a/test/index.test.ts b/test/index.test.ts
@@ -13,13 +13,13 @@ describe('transform', () => {
         //parameters: { ... }
       };
 
-      function renderprimary(_ctx, _cache) {
+      function renderPrimary(_ctx, _cache) {
         return \\"hello\\";
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
       "
@@ -38,13 +38,13 @@ describe('transform', () => {
         //parameters: { ... }
       };
 
-      function renderprimary(_ctx, _cache) {
+      function renderPrimary(_ctx, _cache) {
         return \\"hello\\";
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
       "
@@ -69,13 +69,13 @@ describe('transform', () => {
         //parameters: { ... }
       };
 
-      function renderprimary(_ctx, _cache, $props, $setup, $data, $options) {
+      function renderPrimary(_ctx, _cache, $props, $setup, $data, $options) {
         return \\"hello\\";
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
       "
@@ -92,13 +92,13 @@ describe('transform', () => {
         //parameters: { ... }
       };
 
-      function renderprimary_story(_ctx, _cache) {
+      function renderPrimary_story(_ctx, _cache) {
         return \\"hello\\";
       }
-      export const primary_story = () =>
-        Object.assign({ render: renderprimary_story }, _sfc_main);
-      primary_story.storyName = \\"Primary story\\";
-      primary_story.parameters = {
+      export const Primary_story = () =>
+        Object.assign({ render: renderPrimary_story }, _sfc_main);
+      Primary_story.storyName = \\"Primary story\\";
+      Primary_story.parameters = {
         docs: { source: { code: \`hello\` } },
       };
       "
@@ -115,13 +115,13 @@ describe('transform', () => {
         //parameters: { ... }
       };
 
-      function renderprimary(_ctx, _cache) {
+      function renderPrimary(_ctx, _cache) {
         return \\"hello\\";
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
       "
@@ -143,23 +143,23 @@ describe('transform', () => {
         //parameters: { ... }
       };
 
-      function renderprimary(_ctx, _cache) {
+      function renderPrimary(_ctx, _cache) {
         return \\"hello\\";
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
 
-      function rendersecondary(_ctx, _cache) {
+      function renderSecondary(_ctx, _cache) {
         return \\"world\\";
       }
-      export const secondary = () =>
-        Object.assign({ render: rendersecondary }, _sfc_main);
-      secondary.storyName = \\"Secondary\\";
-      secondary.parameters = {
+      export const Secondary = () =>
+        Object.assign({ render: renderSecondary }, _sfc_main);
+      Secondary.storyName = \\"Secondary\\";
+      Secondary.parameters = {
         docs: { source: { code: \`world\` } },
       };
       "
@@ -187,27 +187,27 @@ describe('transform', () => {
         resolveComponent as _resolveComponent,
       } from \\"vue\\";
 
-      function renderprimary(_ctx, _cache) {
+      function renderPrimary(_ctx, _cache) {
         const _component_Button = _resolveComponent(\\"Button\\");
 
         return _openBlock(), _createBlock(_component_Button);
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`<Button>\` } },
       };
 
-      function rendersecondary(_ctx, _cache) {
+      function renderSecondary(_ctx, _cache) {
         const _component_Button = _resolveComponent(\\"Button\\");
 
         return _openBlock(), _createBlock(_component_Button);
       }
-      export const secondary = () =>
-        Object.assign({ render: rendersecondary }, _sfc_main);
-      secondary.storyName = \\"Secondary\\";
-      secondary.parameters = {
+      export const Secondary = () =>
+        Object.assign({ render: renderSecondary }, _sfc_main);
+      Secondary.storyName = \\"Secondary\\";
+      Secondary.parameters = {
         docs: { source: { code: \`<Button>\` } },
       };
       "
@@ -256,13 +256,13 @@ describe('transform', () => {
 
       import { createBlock as _createBlock, openBlock as _openBlock } from \\"vue\\";
 
-      function renderprimary(_ctx, _cache, $props, $setup, $data, $options) {
+      function renderPrimary(_ctx, _cache, $props, $setup, $data, $options) {
         return _openBlock(), _createBlock($setup[\\"test\\"]);
       }
-      export const primary = () =>
-        Object.assign({ render: renderprimary }, _sfc_main);
-      primary.storyName = \\"Primary\\";
-      primary.parameters = {
+      export const Primary = () =>
+        Object.assign({ render: renderPrimary }, _sfc_main);
+      Primary.storyName = \\"Primary\\";
+      Primary.parameters = {
         docs: { source: { code: \`<test></test>\` } },
       };
       "