fix: merge build and run time configs for overlapping props

ccontrols · Jun 8, 2020 · 8db4a10 · 8db4a10
1 parent c5313ee
commit 8db4a10
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 21 deletions.
diff --git a/core/config/src/index.ts b/core/config/src/index.ts
@@ -2,7 +2,7 @@ import * as path from 'path';
 import * as fs from 'fs';
 import { sync as globSync } from 'glob';
 import yargs from 'yargs';
-import { Configuration } from '@component-controls/specification';
+import { BuildConfiguration } from '@component-controls/specification';
 
 export const buildConfigFileNames = [
   'build.js',
@@ -14,7 +14,7 @@ export const buildConfigFileNames = [
 
 export const optionsFileNames = ['runtime.js', 'options.js'];
 export interface ConfigrationResult {
-  config: Configuration;
+  config: BuildConfiguration;
   configPath: string;
   optionsFilePath?: string;
 }

diff --git a/core/loader/src/replaceSource.ts b/core/loader/src/replaceSource.ts
@@ -1,3 +1,5 @@
+import { BuildConfiguration } from '@component-controls/specification';
+
 export interface StoryPath {
   absPath: string;
   relPath: string;
@@ -6,13 +8,15 @@ export interface StoryPath {
 export const replaceSource = (
   stories: StoryPath[],
   configFilePath: string | undefined,
+  config: BuildConfiguration | undefined,
   hashKey: string,
 ) => {
   const imports = `
 const imports = {};
 const configJSON = ${
     configFilePath ? `require("${configFilePath}")` : 'undefined'
   };
+
 ${stories
   .map(story => `imports['${story.absPath}'] = require(${story.relPath});`)
   .join('\n')}
@@ -73,6 +77,7 @@ ${stories
 ${imports}
 ${storeConst}
 store.config = configJSON;
+store.buildConfig = ${config ? JSON.stringify(config) : '{}'};
 ${loadStories}
 ${hmr}
 ${exports}

diff --git a/core/loader/src/runtimeLoader.ts b/core/loader/src/runtimeLoader.ts
@@ -1,4 +1,7 @@
-import { deepMerge, defaultRunConfig } from '@component-controls/specification';
+import {
+  deepMerge,
+  defaultBuildConfig,
+} from '@component-controls/specification';
 
 import { loadConfiguration, extractStories } from '@component-controls/config';
 import { stringifyRequest } from 'loader-utils';
@@ -10,10 +13,7 @@ module.exports = function(content: string) {
   const params = JSON.parse(this.query.slice(1));
   //@ts-ignore
   const config = loadConfiguration(this.rootContext, params.config);
-  store.config = deepMerge(
-    defaultRunConfig,
-    config?.optionsFilePath ? require(config?.optionsFilePath) : undefined,
-  );
+  store.buildConfig = deepMerge(defaultBuildConfig, config?.config);
 
   const stories: StoryPath[] = (config ? extractStories(config) || [] : []).map(
     fileName => ({
@@ -26,6 +26,7 @@ module.exports = function(content: string) {
   content = replaceSource(
     stories,
     config?.optionsFilePath,
+    store.buildConfig,
     `__COMPILATION_HASH__${params.compilationHash}`,
   );
   return content;

diff --git a/core/loader/src/store.ts b/core/loader/src/store.ts
@@ -1,6 +1,7 @@
 import {
   StoryComponents,
   StoryPackages,
+  BuildConfiguration,
   RunConfiguration,
   StoriesDoc,
 } from '@component-controls/specification';
@@ -10,6 +11,12 @@ export interface LoadingStore {
    * global configuration from project config file
    */
   config?: RunConfiguration;
+
+  /**
+   * global configuration from project config file
+   */
+  buildConfig?: BuildConfiguration;
+
   /**
    * global store of packages
    */
@@ -33,6 +40,7 @@ class Store implements LoadingStore {
   components: LoadingStore['components'] = {};
   packages: LoadingStore['packages'] = {};
   config: LoadingStore['config'] = {};
+  buildConfig: LoadingStore['buildConfig'] = {};
   getDocs = () =>
     this.stores
       .filter(

diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts
@@ -11,6 +11,14 @@ export interface BuildConfiguration {
    * example: "./stories/**/ /*.stories.(js|jsx|tsx|mdx)"
    */
   stories?: string[];
+  /**
+   * base url path for API documentation pages. Default is "docs/"
+   */
+  docsPath?: string;
+  /**
+   * base url path for blogs pages. Default is "blogs/"
+   */
+  blogsPath?: string;
 }
 
 /**
@@ -61,30 +69,32 @@ export interface RunConfiguration {
    * link to site image
    */
   siteImage?: string;
-  /**
-   * base url path for API documentation pages. Default is "docs/"
-   */
-  docsPath?: string;
 
   /**
    * Label for docs menu. Default is Docs
    */
   docsLabel?: string;
 
-  /**
-   * base url path for blogs pages. Default is "blogs/"
-   */
-  blogsPath?: string;
-
   /**
    * Label for blog menu. Default is Blog
    */
   blogsLabel?: string;
-
   /**
    * story sorting function
    */
   storySort?: (a: string, b: string) => number;
+
+  /**
+   * the following used in both run time and build time. Should be set in the build config and 
+   * they will be carried to the run config
+  /**
+   * base url path for API documentation pages. Default is "docs/"
+   */
+  docsPath?: string;
+  /**
+   * base url path for blogs pages. Default is "blogs/"
+   */
+  blogsPath?: string;
 }
 
 export const defaultRunConfig: RunConfiguration = {
@@ -97,8 +107,11 @@ export const defaultRunConfig: RunConfiguration = {
     'Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.',
   siteLanguage: 'en',
   author: '@component-controls',
-  docsPath: 'docs/',
   docsLabel: 'Docs',
-  blogsPath: 'blogs/',
   blogsLabel: 'Blog',
 };
+
+export const defaultBuildConfig: BuildConfiguration = {
+  docsPath: 'docs/',
+  blogsPath: 'blogs/',
+};
diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts
@@ -27,6 +27,7 @@ export const loadStoryStore = (
         packages: loadedPackages,
         components: loadedComponents,
         config,
+        buildConfig,
       } = newStore;
 
       if (stores) {
@@ -35,7 +36,7 @@ export const loadStoryStore = (
           stories: {},
           components: {},
           packages: {},
-          config: deepMerge(config, defaultRunConfig),
+          config: deepMerge(buildConfig, deepMerge(config, defaultRunConfig)),
         };
         stores.forEach(s => {
           const storeDoc = s.doc;

diff --git a/examples/gatsby/.config/main.js b/examples/gatsby/.config/main.js
@@ -5,4 +5,5 @@ module.exports = {
     '../src/stories/*.stories.(js|jsx|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|jsx|tsx|mdx)',
   ],
+  docsPath: 'page/',
 };
diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts
@@ -24,7 +24,7 @@ exports.createPages = async (
       : await compile(config);
   if (store) {
     const docTemplate = require.resolve(`../src/templates/DocPage.tsx`);
-    const { docsPath = '', blogsPath = '' } = store.config || {};
+    const { docsPath = '', blogsPath = '' } = store.buildConfig || {};
     const docs = store.getDocs();
     docs.forEach(doc => {
       createPage({