feat: load data values and hmr on change

ccontrols · May 13, 2021 · 1d7102b · 1d7102b
1 parent 4684b95
commit 1d7102b
Show file tree

Hide file tree

Showing 31 changed files with 664 additions and 334 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -211,7 +211,7 @@
       "name": "jest cc-cli",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/plugins/cc-cli",
-      "args": ["-u", "document-rtr-bundle-ts"],
+      "args": ["data-template-import-existing"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,

diff --git a/core/core/src/controls-smart.ts b/core/core/src/controls-smart.ts
@@ -175,16 +175,18 @@ export const controlsFromProps = (props: PropTypes): ComponentControls => {
   return props
     ? Object.keys(props)
         .map((key: string) => {
-          const control = controlFromProps(key, props[key]);
+          const prop = props[key];
+          const control = controlFromProps(key, prop);
           if (control) {
             control.defaultValue = control.value;
           }
           return {
+            deprecated: prop.deprecated,
             name: key,
             control,
           };
         })
-        .filter(p => p.control)
+        .filter(p => !p.deprecated && p.control)
         .reduce(
           (acc: ComponentControls, prop: NamedComponentControl) => ({
             ...acc,

diff --git a/core/core/src/controls-utils.ts b/core/core/src/controls-utils.ts
@@ -353,7 +353,7 @@ export const transformControls = (
   propControls?: ComponentControls,
 ): ComponentControls | undefined => {
   return controls
-    ? Object.keys(controls).reduce((acc, key) => {
+    ? Object.keys({ ...propControls, ...controls }).reduce((acc, key) => {
         const control = controlShortcuts(key, controls, propControls);
         if (control.defaultValue === undefined) {
           const defaultValue = getControlValue(control);
@@ -423,7 +423,6 @@ export const getStoryControls = (
     const component = doc.componentsLookup
       ? components[doc.componentsLookup[componentName]]
       : undefined;
-
     if (component?.info) {
       const newControls = controlsFromProps(component.info.props);
       const { include, exclude } = smartControls;

diff --git a/core/core/src/modules.ts b/core/core/src/modules.ts
@@ -14,7 +14,8 @@ export const nakedFileName = (filePath: string): string => {
   return baseName.substr(0, baseName.lastIndexOf('.'));
 };
 
-const esmRequire = (filePath: string): any => {
+export const esmRequire = (filePath: string): any => {
+  delete require.cache[filePath];
   const result = require('esm')(module)(filePath);
   if (
     !result ||

diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts
@@ -20,6 +20,7 @@ import { getComponentProps } from '../misc/props-info';
 import { getFileIinfo } from '../misc/file-info';
 import { extractTests } from '../misc/jest-tests';
 import { CachedFileResource } from '../misc/chached-file';
+import { assignDocumentData } from '../misc/data-driven';
 
 export const extractComponent = async (
   componentName: string,
@@ -232,9 +233,20 @@ const componentRelatedMetrics = async (
             }
           });
       }
+      const testData: string[] = [];
+      if (store.doc?.testData) {
+        const testDataFile = path.resolve(
+          path.dirname(filePath),
+          store.doc.testData,
+        );
+        if (fs.existsSync(testDataFile)) {
+          testData.push(testDataFile);
+        }
+      }
       const testResults = await extractTests(
         Array.from(new Set(testFiles)),
         Array.from(new Set(coverageFiles)),
+        testData,
         jest,
       );
       if (testResults) {
@@ -252,6 +264,7 @@ export const extractStoreComponent = async (
 ): Promise<void> => {
   if (store.doc) {
     const doc: Document = store.doc;
+    assignDocumentData(doc, filePath);
     if (doc.componentsLookup) {
       const components = doc.componentsLookup;
       if (

diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -36,7 +36,6 @@ import {
   defaultMDXOptions,
   ParseStorieReturnType,
 } from './types';
-import { assignDocumentData } from './misc/data-driven';
 
 export * from './types';
 
@@ -92,7 +91,6 @@ const parseSource = async (
   await extractStoreComponent(store, filePath, source, options);
   const doc: Document | undefined = store.doc;
   if (doc) {
-    assignDocumentData(doc, filePath);
     if (store.stories) {
       const storyPackage = await packageInfo(
         doc.title,

diff --git a/core/instrument/src/misc/chached-file.ts b/core/instrument/src/misc/chached-file.ts
@@ -41,22 +41,19 @@ export class CachedFileResource<T> {
     );
   };
 
-  private getKey = () => {
+  getKey = (): string => {
     const version = '2';
     const files = Array.isArray(this.filePath)
       ? this.filePath
       : [this.filePath];
     return files
-      .reduce(
-        (acc, f) =>
-          acc.update(f).update(
-            fs
-              .statSync(f)
-              .mtime.getTime()
-              .toString(),
-          ),
-        createHash('md5').update(version),
-      )
+      .reduce((acc, f) => {
+        const mTime = fs
+          .statSync(f)
+          .mtime.getTime()
+          .toString();
+        return acc.update(f).update(mTime);
+      }, createHash('md5').update(version))
       .digest('hex');
   };
   /**

diff --git a/core/instrument/src/misc/data-driven.ts b/core/instrument/src/misc/data-driven.ts
@@ -9,15 +9,17 @@ import { CachedFileResource } from './chached-file';
 
 export const getDataFile = (filePath: string): string => {
   const parts = filePath.split('.');
-  parts.splice(
-    parts.length - parts.length <= 2 ? 1 : 2,
-    parts.length <= 2 ? 0 : 1,
-    'data',
-  );
-  const extention = parts[parts.length - 1];
-  if (extention.length === 3) {
-    parts[parts.length - 1] = extention.slice(0, -1);
+  if (parts.length > 2) {
+    parts.splice(1, 1, 'data');
+  } else {
+    parts.splice(1, 0, 'data');
   }
+  if (parts.length <= 2) {
+    parts.push('js');
+  } else if (parts[parts.length - 1].length > 2) {
+    parts[parts.length - 1] = parts[parts.length - 1].slice(0, -1);
+  }
+
   return parts.join('.');
 };
 
@@ -30,7 +32,7 @@ export const assignDocumentData = (doc: Document, filePath: string): void => {
     const cached = new CachedFileResource<DocumentData>(
       'data-driven',
       `v1`,
-      filePath,
+      dataFilePath,
     );
     let result: DocumentData | undefined = cached.get();
     if (result) {
@@ -44,6 +46,7 @@ export const assignDocumentData = (doc: Document, filePath: string): void => {
     result = loaded.default || loaded;
     cached.set(result);
     doc.data = result;
-    doc.testData = doc.testData || path.relative(filePath, dataFilePath);
+    doc.testData =
+      doc.testData || relativeImport(path.dirname(filePath), dataFilePath);
   }
 };
diff --git a/core/instrument/src/misc/jest-tests.ts b/core/instrument/src/misc/jest-tests.ts
@@ -20,6 +20,7 @@ import { CachedFileResource } from './chached-file';
 export const extractTests = async (
   testFiles: string[],
   coverageFiles: string[],
+  dataFiles: string[],
   options?: JestConfig,
 ): Promise<JestTests | undefined> => {
   if (!testFiles.length) {
@@ -38,6 +39,7 @@ export const extractTests = async (
     ...testFiles,
     ...coverageFiles,
     ...snapshotFiles,
+    ...dataFiles,
   ]);
   const cachedResults = cached.get();
   if (cachedResults) {

diff --git a/core/instrument/test/data-driven.test.ts b/core/instrument/test/data-driven.test.ts
@@ -5,7 +5,7 @@ import { getDataFile, assignDocumentData } from '../src/misc/data-driven';
 describe('data-driven', () => {
   it('getDataFile length 1', () => {
     const fileName = getDataFile('file');
-    expect(fileName).toBe('file.data');
+    expect(fileName).toBe('file.data.js');
   });
   it('getDataFile length 2', () => {
     const fileName = getDataFile('file.js');
@@ -16,6 +16,16 @@ describe('data-driven', () => {
     const fileName = getDataFile('file.test.js');
     expect(fileName).toBe('file.data.js');
   });
+  it('getDataFile jsx', () => {
+    const fileName = getDataFile('file.test.jsx');
+    expect(fileName).toBe('file.data.js');
+  });
+
+  it('getDataFile tsx', () => {
+    const fileName = getDataFile('file.test.tsx');
+    expect(fileName).toBe('file.data.ts');
+  });
+
   it('load data file', () => {
     const doc: Document = { title: 'doc' };
     assignDocumentData(

diff --git a/core/instrument/test/esm-props-info.test.ts b/core/instrument/test/esm-props-info.test.ts
@@ -9,7 +9,6 @@ const createTest = (fileName: string, callback: TestCallback) =>
         name: '@component-controls/react-docgen-typescript-info',
         test: /\.(ts|tsx)$/,
       },
-      ,
     ],
     components: {
       sourceFiles: false,

diff --git a/core/instrument/test/jest-tests.test.ts b/core/instrument/test/jest-tests.test.ts
@@ -37,6 +37,7 @@ describe('component-tests', () => {
           '../../../ui/components/src/Table/useTableLayout.ts',
         ),
       ],
+      [],
     );
     expect(tests).toMatchObject({
       results: [
@@ -414,6 +415,7 @@ describe('component-tests', () => {
           '../../../plugins/addon-catalog/src/Catalog/Catalog.tsx',
         ),
       ],
+      [],
     );
     expect(tests).toMatchObject({
       results: [
@@ -479,6 +481,7 @@ describe('component-tests', () => {
         ),
       ],
       [path.resolve(__dirname, '../../../ui/components/src/Header/Header.tsx')],
+      [],
     );
     expect(tests).toMatchObject({
       results: [

diff --git a/core/loader/src/loader.ts b/core/loader/src/loader.ts
@@ -32,8 +32,13 @@ async function loader(this: WebpackLoaderContext): Promise<string> {
     );
     if (store?.doc) {
       log('loaded: ', filePath);
+      const fileDependencies: string[] = [];
+      if (store.doc.testData) {
+        fileDependencies.push(
+          path.resolve(path.dirname(filePath), store.doc.testData),
+        );
+      }
       if (store.stories && store.components && store.packages) {
-        const fileDependencies: string[] = [];
         Object.values(store.components).forEach(component => {
           if (component.request) {
             fileDependencies.push(component.request as string);
@@ -54,7 +59,6 @@ async function loader(this: WebpackLoaderContext): Promise<string> {
             }
           }
         });
-        new Set(fileDependencies).forEach(d => this.addDependency(d));
         addStoriesDoc(filePath, this._compilation.records.hash, {
           stories: store.stories,
           components: store.components,
@@ -65,6 +69,9 @@ async function loader(this: WebpackLoaderContext): Promise<string> {
           },
         });
       }
+      new Set(fileDependencies).forEach(d => {
+        this.addDependency(d);
+      });
     } else {
       log('removed: ', filePath);
       removeStoriesDoc(filePath);

diff --git a/examples/gatsby/.config/buildtime.ts b/examples/gatsby/.config/buildtime.ts
@@ -6,37 +6,37 @@ require('dotenv').config();
 
 const config: BuildConfiguration = {
   stories: [
-    '../../stories/src/blogs/*.mdx',
-    '../../stories/src/showcase/*.mdx',
-    '../../stories/src/authors/*.mdx',
-    '../../stories/src/pages/*.mdx',
-    '../../stories/src/tutorial/getting-started/ssg/*.mdx',
-    '../../stories/src/tutorial/getting-started/*.mdx',
-    '../../stories/src/tutorial/write-documentation/*.mdx',
-    '../../stories/src/tutorial/design/*.mdx',
-    '../../stories/src/tutorial/design/tokens/*.mdx',
-    '../../stories/src/tutorial/testing/*.mdx',
-    '../../stories/src/tutorial/configuration/*.mdx',
-    '../../stories/src/tutorial/reference/*.mdx',
-    '../../stories/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)',
-    '../../stories/src/mdx-stories/*.mdx',
-    '../../stories/src/catalogs/*.mdx',
-    '../../../ui/components/src/**/*.mdx',
-    '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../ui/blocks/src/**/*.mdx',
-    '../../../ui/blocks/src/**/*.@(stories.@(js|jsx|tsx)|mdx)',
-    '../../../ui/design-tokens/src/Colors/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../ui/editors/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/axe-plugin/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/viewport-plugin/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/addon-stats/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/addon-catalog/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/figma-embed/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/addon-notes/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../plugins/addon-images/src/**/*.stories.@(js|jsx|tsx|mdx)',
-    '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../stories/src/blogs/*.mdx',
+    // '../../stories/src/showcase/*.mdx',
+    // '../../stories/src/authors/*.mdx',
+    // '../../stories/src/pages/*.mdx',
+    // '../../stories/src/tutorial/getting-started/ssg/*.mdx',
+    // '../../stories/src/tutorial/getting-started/*.mdx',
+    // '../../stories/src/tutorial/write-documentation/*.mdx',
+    // '../../stories/src/tutorial/design/*.mdx',
+    // '../../stories/src/tutorial/design/tokens/*.mdx',
+    // '../../stories/src/tutorial/testing/*.mdx',
+    // '../../stories/src/tutorial/configuration/*.mdx',
+    // '../../stories/src/tutorial/reference/*.mdx',
+    '../../stories/src/stories/VariantButton/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../stories/src/mdx-stories/*.mdx',
+    // '../../stories/src/catalogs/*.mdx',
+    // '../../../ui/components/src/**/*.mdx',
+    // '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../ui/blocks/src/**/*.mdx',
+    // '../../../ui/blocks/src/**/*.@(stories.@(js|jsx|tsx)|mdx)',
+    // '../../../ui/design-tokens/src/Colors/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../ui/editors/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/axe-plugin/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/viewport-plugin/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/addon-stats/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/addon-catalog/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/figma-embed/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/addon-notes/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../plugins/addon-images/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    // '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
   ],
   siteUrl:
     process.env.NODE_ENV === 'development'