fix: 🐛 make loader be more aggressive

TODO.md

@@ -151,7 +151,13 @@
 ## First priority (v0.6)
 
 - [ ] Bugs
-  - [ ] Readlink don't work on windows. Need to change storybook framework detection
+  - [x] Readlink don't work on windows. Need to change storybook framework detection
+  - [ ] Don't handle correctly storybook render story errors
+  - [x] Restart workers output errors `NoSuchSessionError: Tried to run command without establishing a connection` and `TypeError: _cluster.default.disconnect is not a function`
+- [x] Cutoff subcomponents parameter
+- [x] Apply AST transformation on storybook config directory (cut decorators)
+- [ ] Don't load any of addons
+- [x] EPIPE Error on SIGINT :(
 - [ ] Fix warnings
   - [x] [BABEL] Note: The code generator has deoptimised the styling of /home/kich/Projects/creevey/report/storybook/tmp-8207-HTp79b5JhpxQ-.js as it exceeds the max of 500KB.
   - [ ] Unexpected loaded state. Did you call `load` twice?
@@ -168,6 +174,7 @@
   - [x] Angular
   - [x] Create React App
 - [ ] Docs
+  - [ ] Add `delay` option
   - [ ] Record screencast with Creevey UI
     - Pre-requirements: Storybook ui-kit + creevey setup + approve all images + vscode with opened story
     - Start storybook
@@ -213,6 +220,7 @@
 
 ## Second priority (v0.7)
 
+- [ ] Support mdx stories
 - [ ] Update Eslint to v7
 - [ ] Support run tests inside docker
 - [ ] Setup NODE_ENV to 'test' on open storybook in browser
@@ -230,12 +238,12 @@
   - [ ] Add instruction for various frameworks
     - [ ] Create React App Typescript
     - [ ] Vue
-- [ ] Apply AST transformation on storybook config directory (optional)
 - [ ] Add human readable error message if test failed with `window.__CREEVEY_SELECT_STORY__` is not a function
 
 ## Third priority (vNext)
 
 - [ ] Drop storiesOf and Storybook v4.x support
+  - [ ] Could we drop more entry points from webpack config? (generated entry for example)
 - [ ] Creevey as Addon PoC
 - [ ] Add Strobybook integration tests
 - [ ] Transform to monorepo

src/server/master/loader.ts

@@ -43,6 +43,12 @@ function getKindObjectNodePath<T>(path: NodePath<T>): NodePath<t.ObjectExpressio
   }
 }
 
+function removeAllPropsExcept(path: NodePath<t.ObjectExpression>, name: string): void {
+  (path.get('properties') as NodePath[])
+    .filter((propPath) => !propPath.isObjectProperty() || !t.isIdentifier(propPath.node.key, { name }))
+    .forEach((propPath) => propPath.remove());
+}
+
 function replaceStoryFnToNoop(declarations: t.VariableDeclarator[]): void {
   declarations.forEach((declarator) => (declarator.init = t.arrowFunctionExpression([], t.blockStatement([]))));
 }
@@ -100,7 +106,12 @@ function minifyStories(ast: t.File, source: string): string {
       if (!kindPath) return;
       isTransformed = true;
       getPropertyPath(kindPath, 'component')?.remove();
+      getPropertyPath(kindPath, 'subcomponents')?.remove();
       getPropertyPath(kindPath, 'decorators')?.remove();
+      const kindParametersPath = getPropertyPath(kindPath, 'parameters')?.get('value');
+      if (kindParametersPath?.isObjectExpression()) {
+        removeAllPropsExcept(kindParametersPath, 'creevey');
+      }
       defaultPath.parentPath.traverse({
         ExportNamedDeclaration(namedPath) {
           const { declaration: namedDeclaration } = namedPath.node;
@@ -109,10 +120,26 @@ function minifyStories(ast: t.File, source: string): string {
           const storyPath = getStoryObjectNodePath(namedPath, namedDeclaration.declarations);
           if (!storyPath) return;
           getPropertyPath(storyPath, 'decorators')?.remove();
+          const storyParametersPath = getPropertyPath(storyPath, 'parameters')?.get('value');
+          if (storyParametersPath?.isObjectExpression()) {
+            removeAllPropsExcept(storyParametersPath, 'creevey');
+          }
         },
       });
     },
     CallExpression(path) {
+      if (path.get('callee').isIdentifier({ name: 'addDecorator' })) {
+        isTransformed = true;
+        path.remove();
+        return;
+      }
+      if (path.get('callee').isIdentifier({ name: 'addParameters' })) {
+        const [argPath] = path.get('arguments');
+        if (!argPath || !argPath.isObjectExpression()) return;
+        isTransformed = true;
+        removeAllPropsExcept(argPath, 'creevey');
+        return;
+      }
       if (!path.get('callee').isIdentifier({ name: 'storiesOf' }) || visited.has(path)) return;
       isTransformed = true;
       visited.add(path);

tests/server/master/loader.fixtures/addDecorator.input.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+import { withCreevey } from 'creevey';
+import { addDecorator } from '@storybook/react';
+import { withA11y } from '@storybook/addon-a11y';
+
+import { GlobalStyle } from '../src/components/shared/global';
+
+addDecorator(withA11y);
+addDecorator(story => (
+  <>
+    <GlobalStyle />
+    {story()}
+  </>
+));
+addDecorator(withCreevey());

tests/server/master/loader.fixtures/addParameters.input.tsx

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { addParameters } from '@storybook/react';
+import { DocsPage } from 'storybook-addon-deps/blocks';
+
+addParameters({
+  options: { showRoots: true },
+  docs: { page: DocsPage },
+});
+addParameters({ creevey: { captureElement: '#test-root' } });

tests/server/master/loader.fixtures/addParameters.output.tsx

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { addParameters } from '@storybook/react';
+
+
+addParameters({});
+
+
+
+addParameters({ creevey: { captureElement: '#test-root' } });

tests/server/master/loader.fixtures/csf-component.input.tsx

@@ -1,10 +1,12 @@
 // @ts-nocheck
 import React from 'react';
 import Button from './src/Button';
+import Input from './src/Input';
 
 export default {
   title: 'Button',
   component: Button,
+  subcomponents: { input: Input },
 };
 
 export const Text = () => <Button>Hello Button</Button>;

tests/server/master/loader.fixtures/csf-component.output.tsx

@@ -2,9 +2,11 @@
 
 
 
+
 export default {
   title: 'Button' };
 
 
 
+
 export const Text = () => {};

tests/server/master/loader.fixtures/csf-custom-params.input.tsx

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import React from 'react';
+import Button from './src/Button';
+import Input from './src/Input';
+
+export default {
+  title: 'Button',
+  component: Button,
+  subcomponents: { input: Input },
+  parameters: {
+    component: Button,
+    subcomponents: { input: Input },
+    creevey: { captureElement: '#root' },
+  },
+};
+
+export const Text = () => <Button>Hello Button</Button>;
+Text.story = {
+  parameters: {
+    component: Button,
+    subcomponents: { input: Input },
+    creevey: { captureElement: '#root' },
+  },
+};

tests/server/master/loader.fixtures/csf-custom-params.output.tsx

@@ -0,0 +1,22 @@
+// @ts-nocheck
+
+
+
+
+export default {
+  title: 'Button',
+
+
+  parameters: {
+
+
+    creevey: { captureElement: '#root' } } };
+
+
+
+export const Text = () => {};
+Text.story = {
+  parameters: {
+
+
+    creevey: { captureElement: '#root' } } };