feat: add ability to load store from bundle

plugins/jest-snapshots/package.json

@@ -27,6 +27,7 @@
     "fix": "yarn lint --fix",
     "lint": "yarn eslint . --ext mdx,ts,tsx",
     "prepare": "yarn build",
+    "test:create-bundle": "ccc -c test/.config -d test/bundle",
     "test": "yarn jest"
   },
   "homepage": "https://github.com/ccontrols/component-controls",

plugins/jest-snapshots/src/args.ts

@@ -35,6 +35,14 @@ export const jestCliArgs: ArgOptions = [
       type: 'boolean',
     },
   },
+  {
+    name: 'bundle',
+    options: {
+      alias: 'b',
+      description: 'bundle path, if store loaded ffrom bundle',
+      type: 'string',
+    },
+  },
   {
     name: 'output',
     options: {

plugins/jest-snapshots/src/cli.ts

@@ -23,6 +23,7 @@ export const run = async (): Promise<void> => {
     overwrite,
     config,
     test = 'stories.test.js',
+    bundle,
     name,
   } = parsedArgs;
   const testFilePath = path.resolve(testFolder, test);
@@ -38,6 +39,7 @@ export const run = async (): Promise<void> => {
     format,
     configPath: config,
     name,
+    bundle,
   });
   fs.writeFileSync(testFilePath, content, 'utf8');
 };

plugins/jest-snapshots/src/templates.ts

@@ -11,6 +11,7 @@ export type TemplateOptions = {
   renderer?: Renderers;
   format?: TeplateFormats;
   configPath?: string;
+  bundle?: string;
   name?: string;
 };
 export const createTemplate = (options?: TemplateOptions): string => {
@@ -19,6 +20,7 @@ export const createTemplate = (options?: TemplateOptions): string => {
     format = 'cjs',
     configPath = path.resolve(process.cwd(), defaultConfigFolder),
     name = 'component-controls generated',
+    bundle,
   } = options || {};
   const filePath = path.resolve(
     __dirname,
@@ -29,15 +31,40 @@ export const createTemplate = (options?: TemplateOptions): string => {
     __dirname,
     `../templates/imports/${renderers[renderer]}.${format}.js`,
   );
+  const store = bundle ? 'bundle' : 'imports';
+  const storeImportPath = path.resolve(
+    __dirname,
+    `../templates/store-import/${store}.${format}.js`,
+  );
+  const storeLoopPath = path.resolve(
+    __dirname,
+    `../templates/store-loop/${store}.${format}.js`,
+  );
+  const storeRenderPath = path.resolve(
+    __dirname,
+    `../templates/store-render/${store}.${format}.js`,
+  );
+  const storeRender = fs.readFileSync(storeRenderPath, 'utf8');
   const renderPath = path.resolve(
     __dirname,
     `../templates/render/${renderers[renderer]}.${format}.js`,
   );
+  const render = dot.template(fs.readFileSync(renderPath, 'utf8'))({
+    storeRender,
+  });
 
   const vars = {
     imports: fs.readFileSync(importsPath, 'utf8'),
-    render: fs.readFileSync(renderPath, 'utf8'),
+    render,
     configPath,
+    storeRender,
+    storeImports: fs.readFileSync(storeImportPath, 'utf8'),
+    bundlePath: bundle,
+    storeLoop: dot.template(fs.readFileSync(storeLoopPath, 'utf8'))({
+      render,
+      bundlePath: bundle,
+      configPath,
+    }),
     name,
   };
   const content = fs.readFileSync(filePath, 'utf8');

plugins/jest-snapshots/templates/all-store.cjs.js

@@ -1,9 +1,4 @@
-const {
-  loadConfigurations,
-  extractDocuments,
-} = require('@component-controls/config');
-const { renderExample } = require('@component-controls/test-renderers');
-const { render: reactRender } = require('@component-controls/render/react');
+{{=it.storeImports}}
 
 {{=it.imports}}
 describe('{{=it.name}}', () => {
@@ -31,30 +26,6 @@ describe('{{=it.name}}', () => {
     });
     done();
   });
-  const configPath = '{{=it.configPath}}';
-  const config = loadConfigurations(configPath);
-  if (!config.renderFn) {
-    config.renderFn = reactRender;
-  }
-  const documents = extractDocuments({ config, configPath });
-  if (documents) {
-    documents.forEach(file => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
-
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-{{=it.render}}
-              expect(serialize()).toMatchSnapshot();
-            });
-          });
-        });
-      }
-    });
-  }
+{{=it.storeLoop}}
+
 });

plugins/jest-snapshots/templates/all-store.esm.js

@@ -1,6 +1,4 @@
-import { loadConfigurations, extractDocuments } from '@component-controls/config';
-import { renderExample } from '@component-controls/test-renderers';
-import { render as reactRender } from '@component-controls/render/react';
+{{=it.storeImports}}
 
 {{=it.imports}}
 describe('{{=it.name}}', () => {
@@ -28,30 +26,5 @@ describe('{{=it.name}}', () => {
     });
     done();
   });
-  const configPath = '{{=it.configPath}}';
-  const config = loadConfigurations(configPath);
-  if (!config.renderFn) {
-    config.renderFn = reactRender;
-  }
-  const documents = extractDocuments({ config, configPath });
-  if (documents) {
-    documents.forEach(file => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
-
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-{{=it.render}}
-              expect(serialize()).toMatchSnapshot();
-            });
-          });
-        });
-      }
-    });
-  }
+{{=it.storeLoop}}  
 });

plugins/jest-snapshots/templates/all-store.ts.js

@@ -1,6 +1,4 @@
-import { loadConfigurations, extractDocuments } from '@component-controls/config';
-import { renderExample } from '@component-controls/test-renderers';
-import { render as reactRender } from '@component-controls/render/react';
+{{=it.storeImports}}
 
 {{=it.imports}}
 describe('{{=it.name}}', () => {
@@ -28,30 +26,5 @@ describe('{{=it.name}}', () => {
     });
     done();
   });
-  const configPath = '{{=it.configPath}}';
-  const config = loadConfigurations(configPath);
-  if (!config.renderFn) {
-    config.renderFn = reactRender;
-  }
-  const documents = extractDocuments({ config, configPath });
-  if (documents) {
-    documents.forEach((file: string) => {
-      const exports = require(file);
-      const doc = exports.default;
-      const examples = Object.keys(exports)
-        .filter(key => key !== 'default')
-        .map(key => exports[key]);
-
-      if (examples.length) {
-        describe(doc.title, () => {
-          examples.forEach(example => {
-            it(example.name, async () => {
-{{=it.render}}
-              expect(serialize()).toMatchSnapshot();
-            });
-          });
-        });
-      }
-    });
-  }
+{{=it.storeLoop}} 
 });

plugins/jest-snapshots/templates/render/enzyme-react-17.cjs.js

@@ -1,7 +1,4 @@
-              const rendered = renderExample({
-                example,
-                doc,
-                config,
-              });
+              let rendered;
+{{=it.storeRender}}
               const component = mount(rendered);
               const serialize = () => toJson(component, { mode: 'deep' });

plugins/jest-snapshots/templates/render/enzyme-react-17.esm.js

@@ -1,7 +1,4 @@
-              const rendered = renderExample({
-                example,
-                doc,
-                config,
-              });
+              let rendered;
+{{=it.storeRender}}
               const component = mount(rendered);
               const serialize = () => toJson(component, { mode: 'deep' });

plugins/jest-snapshots/templates/render/enzyme-react-17.ts.js

@@ -1,7 +1,4 @@
-              const rendered = renderExample({
-                example,
-                doc,
-                config,
-              });
+              let rendered;
+{{=it.storeRender}}
               const component = mount(rendered);
               const serialize = () => toJson(component, { mode: 'deep' });

plugins/jest-snapshots/templates/render/react-test-renderer.cjs.js

@@ -1,10 +1,6 @@
               let rendered;
               renderer.act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
-              });
+{{=it.storeRender}}
+              })
               const component = renderer.create(rendered);
               const serialize = component ? component.toJSON : () => undefined;

plugins/jest-snapshots/templates/render/react-test-renderer.esm.js

@@ -1,10 +1,6 @@
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+{{=it.storeRender}}                
               });
               const component = rendered ? renderer.create(rendered) : undefined;
               const serialize = component ? component.toJSON : () => undefined;

plugins/jest-snapshots/templates/render/react-test-renderer.ts.js

@@ -1,10 +1,6 @@
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
-              });
+{{=it.storeRender}}
+              })
               const component = rendered ? renderer.create(rendered) : undefined;
               const serialize = component ? component.toJSON : () => undefined;

plugins/jest-snapshots/templates/render/react-testing-library.cjs.js

@@ -1,9 +1,5 @@
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+{{=it.storeRender}}
               });
               const { asFragment: serialize } = render(rendered);

plugins/jest-snapshots/templates/render/react-testing-library.esm.js

@@ -1,10 +1,6 @@
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+{{=it.storeRender}}
               });
               let serialize;
               if (rendered) {

plugins/jest-snapshots/templates/render/react-testing-library.ts.js

@@ -1,10 +1,6 @@
               let rendered;
               act(() => {
-                rendered = renderExample({
-                  example,
-                  doc,
-                  config,
-                });
+{{=it.storeRender}}
               });
               let serialize;
               if (rendered) {

plugins/jest-snapshots/templates/store-import/bundle.cjs.js

@@ -0,0 +1,2 @@
+const { loadStore } = require('@component-controls/store');
+const { render: reactRender } = require('@component-controls/render/react');

plugins/jest-snapshots/templates/store-import/bundle.esm.js

@@ -0,0 +1,2 @@
+import { loadStore } from '@component-controls/store';
+const { render: reactRender } = require('@component-controls/render/react');

plugins/jest-snapshots/templates/store-import/bundle.ts.js

@@ -0,0 +1,2 @@
+import { loadStore } from '@component-controls/store';
+const { render: reactRender } = require('@component-controls/render/react');

plugins/jest-snapshots/templates/store-import/imports.cjs.js

@@ -0,0 +1,6 @@
+const {
+  loadConfigurations,
+  extractDocuments,
+} = require('@component-controls/config');
+const { renderExample } = require('@component-controls/test-renderers');
+const { render: reactRender } = require('@component-controls/render/react');

plugins/jest-snapshots/templates/store-import/imports.esm.js

@@ -0,0 +1,3 @@
+import { loadConfigurations, extractDocuments } from '@component-controls/config';
+import { renderExample } from '@component-controls/test-renderers';
+import { render as reactRender } from '@component-controls/render/react';

plugins/jest-snapshots/templates/store-import/imports.ts.js

@@ -0,0 +1,3 @@
+import { loadConfigurations, extractDocuments } from '@component-controls/config';
+import { renderExample } from '@component-controls/test-renderers';
+import { render as reactRender } from '@component-controls/render/react';

plugins/jest-snapshots/templates/store-loop/bundle.cjs.js

@@ -0,0 +1,17 @@
+  const store = loadStore(require('{{=it.bundlePath}}'));
+  const renderFn = store.config.renderFn || reactRender;
+  Object.keys(store.docs).forEach(docId => {
+    const doc = store.docs[docId];
+    if (doc.stories && doc.stories.length) {
+      const stories = doc.stories;
+      describe(doc.title, () => {
+        stories.forEach(storyId => {
+          const story = store.stories[storyId];
+          it(story.name, async () => {
+{{=it.render}}
+            expect(serialize()).toMatchSnapshot();
+          });
+        });
+      });
+    }
+  });

plugins/jest-snapshots/templates/store-loop/bundle.esm.js

@@ -0,0 +1,17 @@
+const store = loadStore(require('{{=it.bundlePath}}'));
+const renderFn = store.config.renderFn || reactRender;
+Object.keys(store.docs).forEach(docId => {
+  const doc = store.docs[docId];
+  if (doc.stories && doc.stories.length) {
+    const stories = doc.stories;
+    describe(doc.title, () => {
+      stories.forEach(storyId => {
+        const story = store.stories[storyId];
+        it(story.name, async () => {
+{{=it.render}}
+          expect(serialize()).toMatchSnapshot();
+        });
+      });
+    });
+  }
+});