feat: require context hmr

ccontrols · Jul 18, 2020 · 1587fba · 1587fba
1 parent b08e750
commit 1587fba
Show file tree

Hide file tree

Showing 17 changed files with 395 additions and 199 deletions.
diff --git a/README.md b/README.md
@@ -239,7 +239,7 @@ Collection of standard webpack rules for [@component-controls/instrument](https:
 
 Component controls shared storage store
 
-Utility class to abstract loading the stories store from the webpack loader and provides an interface to access the store. Will also share the store accross bundles using localStorage and broadcastig messages.
+Utility classes to abstract loading the stories store from the webpack loader and provides an interface to access the store. Will also share the store accross bundles using localStorage and broadcastig messages.
 
 <!-- END-PACKAGE-SECTION -->
 

diff --git a/core/config/README.md b/core/config/README.md
@@ -4,9 +4,12 @@
 -   [Installation](#installation)
 -   [API](#api)
     -   [ConfigrationResult](#configrationresult)
+    -   [RequireContextProps](#requirecontextprops)
     -   [buildConfigFileNames](#buildconfigfilenames)
     -   [optionsFileNames](#optionsfilenames)
-    -   [extractStories](#extractstories)
+    -   [configRequireContext](#configrequirecontext)
+    -   [extractDocuments](#extractdocuments)
+    -   [fixGlob](#fixglob)
     -   [getConfigurationArg](#getconfigurationarg)
     -   [loadConfiguration](#loadconfiguration)
 
@@ -30,7 +33,7 @@ $ npm install @component-controls/config --save-dev
 
 ## ConfigrationResult
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L17)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L21)_
 
 
 
@@ -42,26 +45,57 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro
 | `configPath*`     | string                                    |             |
 | `optionsFilePath` | string                                    |             |
 
+## RequireContextProps
+
+from the glob list of documents, extract require.context array of props
+
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L110)_
+
+
+
+### properties
+
+| Name                 | Type              | Description |
+| -------------------- | ----------------- | ----------- |
+| `directory*`         | string            |             |
+| `regExp*`            | [RegExp](#regexp) |             |
+| `useSubdirectories*` | boolean           |             |
+
 ## buildConfigFileNames
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L7)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L11)_
 
 
 
 ## optionsFileNames
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L9)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L13)_
+
+
+
+## configRequireContext
+
+convert glob patters from config file into require.context objects
+
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L118)_
 
+**function** configRequireContext(`__namedParameters`\*: **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string): [RequireContextProps](#requirecontextprops)\[] | undefined;
 
+### parameters
 
-## extractStories
+| Name                 | Type                                                                        | Description |
+| -------------------- | --------------------------------------------------------------------------- | ----------- |
+| `__namedParameters*` | **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string |             |
+| `returns`            | [RequireContextProps](#requirecontextprops)\[] \| undefined                 |             |
+
+## extractDocuments
 
 find the story files out of a configuration file
 using glob for the regex file search
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L84)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L90)_
 
-**function** extractStories(`__namedParameters`\*: **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string): string\[] | undefined;
+**function** extractDocuments(`__namedParameters`\*: **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string): string\[] | undefined;
 
 ### parameters
 
@@ -70,13 +104,26 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro
 | `__namedParameters*` | **config**: [BuildConfiguration](#buildconfiguration)**configPath**: string |             |
 | `returns`            | string\[] \| undefined                                                      |             |
 
+## fixGlob
+
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L84)_
+
+**function** fixGlob(`golbExpr`\*: string): string;
+
+### parameters
+
+| Name        | Type   | Description |
+| ----------- | ------ | ----------- |
+| `golbExpr*` | string |             |
+| `returns`   | string |             |
+
 ## getConfigurationArg
 
 return the configration folder from command-line parameters
 command line accepts -c/ -config parameter for config path
 the config file is assumed named main.js/main.ts
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L28)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L32)_
 
 **function** getConfigurationArg(`args`\*: string\[]): string | undefined;
 
@@ -91,7 +138,7 @@ _defined in [@component-controls/config/src/index.ts](https://github.com/ccontro
 
  given a base project folder and a configuration folder, returns the configuration file
 
-_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L49)_
+_defined in [@component-controls/config/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/config/src/index.ts#L53)_
 
 **function** loadConfiguration(`baseFolder`\*: string, `configFolder`: string, `args`: string\[]): [ConfigrationResult](#configrationresult) | undefined;
 

diff --git a/core/config/package.json b/core/config/package.json
@@ -33,6 +33,8 @@
     "@component-controls/core": "^1.9.0",
     "chalk": "^4.0.0",
     "glob": "^7.1.6",
+    "glob-base": "^0.3.0",
+    "micromatch": "^4.0.2",
     "typescript": "^3.8.3",
     "yargs": "^15.3.1"
   },

diff --git a/core/config/src/index.ts b/core/config/src/index.ts
@@ -1,6 +1,10 @@
 import * as path from 'path';
 import * as fs from 'fs';
+
 import { sync as globSync } from 'glob';
+import globBase from 'glob-base';
+import { makeRe } from 'micromatch';
+
 import yargs from 'yargs';
 import { BuildConfiguration } from '@component-controls/core';
 
@@ -76,26 +80,64 @@ export const loadConfiguration = (
   return undefined;
 };
 
+//fix for sb5 issue handling glob
+const fixGlob = (golbExpr: string): string => golbExpr.replace('.(', '.@(');
+
 /**
  * find the story files out of a configuration file
  * using glob for the regex file search
- * @param param0 configuration info return by getConfiguration
  */
-export const extractStories = ({
+export const extractDocuments = ({
   config,
   configPath,
 }: ConfigrationResult): string[] | undefined => {
-  const stories =
+  const documents =
     config && config.stories
       ? config.stories.reduce((acc: string[], storyRg: string) => {
-          //fix for sb5 issue handling glob
-          const regex = storyRg.replace('.(', '.@(');
-          const matches = globSync(path.resolve(configPath, regex));
+          const matches = globSync(path.resolve(configPath, fixGlob(storyRg)));
           if (!matches.length) {
             throw new Error(`${storyRg} did not match any files`);
           }
           return [...acc, ...matches];
         }, [])
       : undefined;
-  return stories;
+  return documents;
+};
+
+/**
+ * from the glob list of documents, extract require.context array of props
+ */
+export interface RequireContextProps {
+  directory: string;
+  useSubdirectories: boolean;
+  regExp: RegExp;
+}
+/**
+ * convert glob patters from config file into require.context objects
+ */
+export const configRequireContext = ({
+  config,
+  configPath,
+}: ConfigrationResult): RequireContextProps[] | undefined => {
+  const contexts =
+    config && config.stories
+      ? config.stories.reduce((acc: RequireContextProps[], storyRg: string) => {
+          const base = globBase(fixGlob(storyRg));
+          const useSubdirectories = base.glob.startsWith('**');
+          const glob = useSubdirectories ? base.glob.substr(3) : base.glob;
+          const regExp = base.isGlob
+            ? RegExp(makeRe(glob).source.substr(1))
+            : new RegExp(glob);
+          console.log(glob, regExp, storyRg);
+          return [
+            ...acc,
+            {
+              directory: path.resolve(configPath, base.base),
+              useSubdirectories,
+              regExp,
+            },
+          ];
+        }, [])
+      : undefined;
+  return contexts;
 };
diff --git a/core/config/test/__snapshots__/require-context.test.ts.snap b/core/config/test/__snapshots__/require-context.test.ts.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`require-context exact names 1`] = `
+Array [
+  Object {
+    "directory": "/Users/atanasster/component-controls/examples/stories/src/stories",
+    "regExp": /controls-editors-starter\\.stories\\.tsx/,
+    "useSubdirectories": false,
+  },
+  Object {
+    "directory": "/Users/atanasster/component-controls/examples/stories/src/blogs",
+    "regExp": /gatsby-nextjs-storybook\\.mdx/,
+    "useSubdirectories": false,
+  },
+]
+`;
diff --git a/core/config/test/fixtures/exact-names/main.js b/core/config/test/fixtures/exact-names/main.js
@@ -0,0 +1,6 @@
+module.exports = {
+  stories: [
+    '../../../../../examples/stories/src/stories/controls-editors-starter.stories.tsx',
+    '../../../../../examples/stories/src/blogs/gatsby-nextjs-storybook.mdx',
+  ],
+};
diff --git a/core/config/test/require-context.test.ts b/core/config/test/require-context.test.ts
@@ -0,0 +1,16 @@
+import { loadConfiguration, configRequireContext } from '../src/index';
+
+describe('require-context', () => {
+  it('exact names', () => {
+    expect(
+      configRequireContext(
+        loadConfiguration(__dirname, undefined, [
+          'file',
+          'name',
+          '--config',
+          'fixtures/exact-names',
+        ]),
+      ),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/core/config/test/stories.test.ts b/core/config/test/stories.test.ts
@@ -1,9 +1,9 @@
-import { loadConfiguration, extractStories } from '../src/index';
+import { loadConfiguration, extractDocuments } from '../src/index';
 
 describe('config-folder', () => {
   it('config file short option', () => {
     expect(
-      extractStories(
+      extractDocuments(
         loadConfiguration(__dirname, undefined, [
           'file',
           'name',
@@ -16,7 +16,7 @@ describe('config-folder', () => {
 
   it('config file long option', () => {
     expect(
-      extractStories(
+      extractDocuments(
         loadConfiguration(__dirname, undefined, [
           'file',
           'name',