feat: props-info hmr support

core/instrument/src/babel/extract-component.ts

@@ -3,7 +3,6 @@ import { Component, Document, PackageInfo } from '@component-controls/core';
 import { hashStoreId } from '../misc/hashStore';
 import { followImports } from './follow-imports';
 import { packageInfo } from '../misc/package-info';
-import { propsInfo } from '../misc/props-info';
 import { LoadingDocStore, InstrumentOptions } from '../types';
 
 interface ComponentParseData {
@@ -55,18 +54,7 @@ export const extractComponent = async (
       name: componentName,
     };
   }
-  const { propsLoaders } = options || {};
-  if (follow && follow.filePath && Array.isArray(propsLoaders)) {
-    const info = await propsInfo(
-      propsLoaders,
-      follow.filePath,
-      follow.importedName,
-      follow.source,
-    );
-    if (info) {
-      component.info = info;
-    }
-  }
+
   globalCache[filePath] = { component, componentPackage };
   return globalCache[filePath];
 };

core/instrument/src/index.ts

@@ -32,6 +32,7 @@ import {
 } from './types';
 
 export * from './types';
+export { getComponentProps } from './misc/props-info';
 
 type TraverseFn = (
   ast: File,

core/instrument/src/misc/props-info.ts

@@ -9,7 +9,7 @@ import {
 } from '@component-controls/core';
 import { PropsLoaderConfig } from '../types';
 
-export const propsInfo = async (
+export const getComponentProps = async (
   options: PropsLoaderConfig[],
   filePath: string,
   componentName?: string,

core/loader/src/loader.ts

@@ -23,7 +23,7 @@ module.exports = async function() {
   if (store?.doc) {
     console.log(chalk.bgRgb(244, 147, 66)('@loaded: '), filePath);
     if (store.stories && store.components && store.packages) {
-      addStoriesDoc(filePath, context._compilation.records.hash, {
+      addStoriesDoc(options, filePath, context._compilation.records.hash, {
         stories: store.stories,
         components: store.components,
         packages: store.packages,

core/loader/src/plugin.ts

@@ -3,7 +3,7 @@ import * as path from 'path';
 import * as webpack from 'webpack';
 import { createHash } from 'crypto';
 import jsStringEscape from 'js-string-escape';
-import { store } from './store';
+import { getSerializedStore } from './store';
 
 export interface LoaderPluginOptions {
   config?: string;
@@ -29,14 +29,16 @@ export class LoaderPlugin {
     compiler.hooks.compilation.tap(LoaderPlugin.pluginName, compilation => {
       compilation.hooks.optimizeChunkAssets.tap(
         LoaderPlugin.pluginName,
-        chunks => {
+        async chunks => {
+          const jsFiles: string[] = [];
           chunks.forEach(chunk => {
             chunk.files
               .filter(fileName => fileName.endsWith('.js'))
-              .forEach(file => {
-                this.replaceSource(compilation, file);
-              });
+              .forEach(fileName => jsFiles.push(fileName));
           });
+          for (let i = 0; i < jsFiles.length; i += 1) {
+            await this.replaceSource(compilation, jsFiles[i]);
+          }
         },
       );
     });
@@ -60,17 +62,18 @@ export class LoaderPlugin {
     nmrp.apply(compiler);
   }
 
-  private replaceSource(
+  private async replaceSource(
     compilation: webpack.compilation.Compilation,
     file: string,
   ) {
     const placeholder = `__COMPILATION_HASH__${this.compilationHash}`;
     const source = compilation.assets[file];
     const placeholderPos = source.source().indexOf(placeholder);
     if (placeholderPos > -1) {
+      const store = await getSerializedStore();
       const newContent = this.options.escapeOutput
-        ? jsStringEscape(JSON.stringify(store))
-        : JSON.stringify(store);
+        ? jsStringEscape(store)
+        : store;
       const newSource = new ReplaceSource(source, file);
       newSource.replace(
         placeholderPos,

core/loader/src/store.ts

@@ -4,7 +4,11 @@ import {
   BuildConfiguration,
   RunConfiguration,
 } from '@component-controls/core';
-import { LoadingDocStore } from '@component-controls/instrument';
+import {
+  LoadingDocStore,
+  InstrumentOptions,
+  getComponentProps,
+} from '@component-controls/instrument';
 
 export interface LoadingStore {
   /**
@@ -42,6 +46,8 @@ export const store: LoadingStore = {
   buildConfig: {},
 };
 
+let instrumentOptions: InstrumentOptions = {};
+
 export const reserveStories = (filePaths: string[]) => {
   if (store.stores.length === 0) {
     filePaths.forEach(filePath => store.stores.push({ filePath }));
@@ -51,10 +57,12 @@ export const removeStoriesDoc = (filePath: string) => {
   store.stores = store.stores.filter(s => s.filePath !== filePath);
 };
 export const addStoriesDoc = (
+  options: InstrumentOptions,
   filePath: string,
   hash: string,
   added: LoadingDocStore,
 ) => {
+  instrumentOptions = options;
   const { components, packages, stories, doc } = added;
   if (!doc) {
     throw new Error(`Invalid store with no document ${filePath}`);
@@ -81,3 +89,22 @@ export const addStoriesDoc = (
     store.stores.push({ filePath, hash, stories, doc });
   }
 };
+
+export const getSerializedStore = async (): Promise<string> => {
+  const { propsLoaders = [] } = instrumentOptions;
+  for (const name in store.components) {
+    const component = store.components[name];
+    if (component.request) {
+      const propsInfo = await getComponentProps(
+        propsLoaders,
+        component.request,
+        component.name,
+        component.source,
+      );
+      if (propsInfo) {
+        component.info = propsInfo;
+      }
+    }
+  }
+  return JSON.stringify(store);
+};

core/store/src/types.ts

@@ -30,7 +30,7 @@ export interface StoryStore {
   getStore: () => Store | undefined;
   getStory: (storyId: string) => Story | undefined;
   getStoryDoc: (name: string) => Document | undefined;
-  config: RunConfiguration | undefined;
+  config: RunConfiguration;
   store: Store;
   pages: Pages;
   docs: Documents;