diff --git a/core/instrument/package.json b/core/instrument/package.json index 97f8fe770..deaf13b03 100644 --- a/core/instrument/package.json +++ b/core/instrument/package.json @@ -42,6 +42,7 @@ "find-cache-dir": "^3.3.1", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "resolve": "^1.15.1", diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts index 5196f75f4..b4edb0167 100644 --- a/core/instrument/src/babel/mdx-stories.ts +++ b/core/instrument/src/babel/mdx-stories.ts @@ -10,6 +10,7 @@ import camelCase from 'camelcase'; import { File } from '@babel/types'; import traverse from '@babel/traverse'; import { extractFunctionParameters } from './extract-function-parameters'; +import jsStringEscape from 'js-string-escape'; import { followStoryImport } from './follow-imports'; import { extractAttributes } from './extract-attributes'; import { sourceLocation } from '../misc/source-location'; @@ -78,6 +79,17 @@ export const extractMDXStories = (props: any) => ( exports: {}, packages: {}, }; + if (props) { + store.exports.default = { + story: Object.keys(props).reduce((acc: object, key: string) => { + const prop = props[key]; + return { + ...acc, + [key]: typeof prop === 'string' ? `"${jsStringEscape(prop)}"` : prop, + }; + }, {}), + }; + } const { transformMDX } = _options.mdx; traverse(ast as any, { JSXElement: (path: any) => { diff --git a/core/instrument/src/misc/mdx-exports.ts b/core/instrument/src/misc/mdx-exports.ts index d6ae63474..cac368dcd 100644 --- a/core/instrument/src/misc/mdx-exports.ts +++ b/core/instrument/src/misc/mdx-exports.ts @@ -23,11 +23,11 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => { const exportNames = Object.keys(exports); if (exportNames.length) { let defaultExportCode = ''; - if (exports.default && exports.default.story) { + if (exports.default) { const expCode = mdxPropertiesExport(exports.default); - if (expCode) { - defaultExportCode = `export default { ${expCode}, MDXPage: () => };`; - } + defaultExportCode = `export default { ${ + expCode ? `${expCode},` : '' + } MDXPage: () => };`; } let storiesExports: string[] = []; diff --git a/core/instrument/src/typings.d.ts b/core/instrument/src/typings.d.ts index 0f74eac0f..06824b404 100644 --- a/core/instrument/src/typings.d.ts +++ b/core/instrument/src/typings.d.ts @@ -2,3 +2,4 @@ declare module 'read-package-json'; declare module '@hutson/parse-repository-url'; declare module 'hosted-git-info'; declare module '@mdx-js/mdx'; +declare module 'js-string-escape'; diff --git a/core/loader/src/store.ts b/core/loader/src/store.ts index f16d9f470..021a5cdc5 100644 --- a/core/loader/src/store.ts +++ b/core/loader/src/store.ts @@ -31,7 +31,9 @@ export const store: LoadingStore = { }; export const reserveStories = (filePaths: string[]) => { - filePaths.forEach(filePath => store.stores.push({ filePath })); + if (store.stores.length === 0) { + filePaths.forEach(filePath => store.stores.push({ filePath })); + } }; export const addStoriesDoc = (filePath: string, added: LoadingDocStore) => { const { components, packages, stories, doc } = added; @@ -45,5 +47,7 @@ export const addStoriesDoc = (filePath: string, added: LoadingDocStore) => { if (storeStore) { storeStore.stories = stories; storeStore.doc = doc; + } else { + store.stores.push({ filePath, stories, doc }); } }; diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts index ade7b8301..d51ceda83 100644 --- a/integrations/gatsby-theme-stories/src/gatsby-node.ts +++ b/integrations/gatsby-theme-stories/src/gatsby-node.ts @@ -24,7 +24,6 @@ exports.createPages = async ( : await compile(config); if (store) { const { basePath = '' } = store.config?.options || {}; - console.log('basePath', basePath); const template = require.resolve(`../src/templates/StoryPage.tsx`); store.stores.forEach(s => { const doc = s.doc;