Lazy mode (#1443)

* Add lazy fixture loader * Fix rendering * WIP: Handle both lazy and static module wrappers * Update FixtureConnect.tsx * Merge renderKey with fixture state * Create dual user deps templates * Add Vite React plugin * Add lazy config flag * Group module wrappers into union type * Fix types * Clean up unused type * Update FixtureConnect.tsx * Update FixtureConnect.tsx * Clean up types and modules * Remove duplicate code * Simplify components * Rename files * Extract common type * Reset fixture state state when fixture ID changes * Update useRendererResponse.ts * Update types.ts * Refactor renderer tests * Delete FixtureLoader folder * Simulate async communication between renderer and parent * Test: renders first named fixture * Rename renderer helper * Expand fixture names in Playground fixture list when lazy multi fixture is selected * Fix renderer header when multi fixture is selected by path * Change test names * Set lazy mode in examples * Add lazy CLI param * Fix yargs mock * Format start command * Add lazy tests * Update test.yml * Update test.yml * Update test.yml * Send lazy flag to Cypress * Rename file * Update createRendererConnectTestApi.ts * Wrap fixtures in test helper * Make tests more resilient * Update mountTestRenderer.tsx * Make renderer tests more flexible * Test lazy renderer * Add more lazy renderer tests * Update DecoratedFixture.tsx * Add new line * Update userDepsTemplate.test.ts.snap * Update test.yml * Clean up setTimeout wrap * Update getFixtureList.ts * Don’t send fixtureStateChanged response because of setFixtureStateChange request * Refactor types
react-cosmos · Apr 17, 2023 · 03b80da · 03b80da
1 parent 68b6ea0
commit 03b80da
Show file tree

Hide file tree

Showing 141 changed files with 2,434 additions and 1,595 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -36,17 +36,26 @@ jobs:
       fail-fast: false
       matrix:
         example: [webpack, vite]
-        os:
-          - ubuntu
-          - windows
+        os: [ubuntu, windows]
         node-version: [18]
+        lazy: [false]
         include:
           - example: webpack
             os: ubuntu
             node-version: 16
+            lazy: false
           - example: webpack
             os: windows
             node-version: 16
+            lazy: false
+          - example: webpack
+            os: ubuntu
+            node-version: 18
+            lazy: true
+          - example: vite
+            os: ubuntu
+            node-version: 18
+            lazy: true
     runs-on: ${{ matrix.os }}-latest
     steps:
       - uses: actions/checkout@v3
@@ -58,7 +67,7 @@ jobs:
       - run: yarn build
 
       # Generate static export for domExport test
-      - run: yarn workspace example-${{ matrix.example }} export
+      - run: yarn workspace example-${{ matrix.example }} export --lazy=${{ matrix.lazy == true }}
 
       - uses: BerniWittmann/background-server-action@v1
         with:
@@ -67,10 +76,14 @@ jobs:
           # - DOM dev server
           # - DOM export
           # - Native dev server
-          start: yarn workspace example-${{ matrix.example }} start,yarn workspace example-${{ matrix.example }} serve,yarn workspace example-${{ matrix.example }} native
+          start: |
+            yarn workspace example-${{ matrix.example }} start --lazy=${{ matrix.lazy == true }},
+            yarn workspace example-${{ matrix.example }} serve,
+            yarn workspace example-${{ matrix.example }} native --lazy=${{ matrix.lazy == true }}
           wait-on: 'http://localhost:5000,http://localhost:5001,http://localhost:5002'
         env:
           CYPRESS_EXAMPLE_NAME: ${{ matrix.example }}
+          CYPRESS_LAZY: ${{ matrix.lazy }}
 
       - uses: actions/upload-artifact@v3
         if: failure()

diff --git a/cypress/support/envVars.ts b/cypress/support/envVars.ts
@@ -1,3 +1,7 @@
 export function exampleName() {
   return Cypress.env('EXAMPLE_NAME') as 'webpack' | 'vite';
 }
+
+export function lazy() {
+  return Cypress.env('LAZY') as 'true' | 'false';
+}
diff --git a/cypress/tests/native.ts b/cypress/tests/native.ts
@@ -1,4 +1,4 @@
-import { exampleName } from '../support/envVars';
+import { exampleName, lazy } from '../support/envVars';
 
 describe('Native', () => {
   beforeEach(() => {
@@ -25,13 +25,13 @@ describe('Native', () => {
     });
 
     it('has fixture paths', () => {
-      userDepsContainsModule('src/__fixtures__/HelloWorld.ts');
-      userDepsContainsModule('src/Counter.fixture.tsx');
-      userDepsContainsModule('src/WelcomeMessage/WelcomeMessage.fixture.tsx');
+      containsImport('src/__fixtures__/HelloWorld.ts');
+      containsImport('src/Counter.fixture.tsx');
+      containsImport('src/WelcomeMessage/WelcomeMessage.fixture.tsx');
     });
 
     it('has decorator paths', () => {
-      userDepsContainsModule('src/WelcomeMessage/cosmos.decorator.tsx');
+      containsImport('src/WelcomeMessage/cosmos.decorator.tsx');
     });
   });
 });
@@ -40,9 +40,16 @@ function getUserDepsFile() {
   return cy.readFile(`examples/${exampleName()}/cosmos.userdeps.js`);
 }
 
-function userDepsContainsModule(modulePath: string) {
-  getUserDepsFile().should(
-    'match',
-    new RegExp(`import (fixture|decorator)[0-9]+ from './${modulePath}'`)
-  );
+function containsImport(modulePath: string) {
+  if (lazy()) {
+    getUserDepsFile().should(
+      'match',
+      new RegExp(`import\\('./${modulePath}'\\)`)
+    );
+  } else {
+    getUserDepsFile().should(
+      'match',
+      new RegExp(`import [a-z0-9]+ from './${modulePath}'`)
+    );
+  }
 }
diff --git a/docs/roadmap/README.md b/docs/roadmap/README.md
@@ -10,9 +10,10 @@
 
 ## Core
 
-- [x] Redesign codebase packages and APIs.
-- [ ] Decide what to do with [Lazy fixture importing](https://github.com/react-cosmos/react-cosmos/pull/1313). Salvage what you can and move on. No need to linger if the complexity required to achieve this is unreasonable. Document everything learned for future reference.
 - [x] Research: ES6 modules (React Cosmos with no bundler and no compiler).
+- [x] Redesign codebase packages and APIs.
+- [x] Lazy mode [#1313](https://github.com/react-cosmos/react-cosmos/pull/1313) [#1443](https://github.com/react-cosmos/react-cosmos/pull/1443).
+- [ ] Isolated mode?
 
 ## Plugins
 

diff --git a/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/collapseFixtureDirs.test.ts b/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/collapseFixtureDirs.test.ts
@@ -17,24 +17,16 @@ it('collapses fixtures dir', () => {
                   Button: {
                     data: {
                       type: 'multiFixture',
-                      fixtureIds: {
-                        normal: {
-                          path: 'ui/__fixtures__/shared/Button.js',
-                          name: 'normal',
-                        },
-                        disabled: {
-                          path: 'ui/__fixtures__/shared/Button.js',
-                          name: 'disabled',
-                        },
-                      },
+                      path: 'ui/__fixtures__/shared/Button.js',
+                      names: ['normal', 'disabled'],
                     },
                   },
                 },
               },
               Dashboard: {
                 data: {
                   type: 'fixture',
-                  fixtureId: { path: 'ui/__fixtures__/Dashboard.js' },
+                  path: 'ui/__fixtures__/Dashboard.js',
                 },
               },
             },
@@ -55,24 +47,16 @@ it('collapses fixtures dir', () => {
               Button: {
                 data: {
                   type: 'multiFixture',
-                  fixtureIds: {
-                    normal: {
-                      path: 'ui/__fixtures__/shared/Button.js',
-                      name: 'normal',
-                    },
-                    disabled: {
-                      path: 'ui/__fixtures__/shared/Button.js',
-                      name: 'disabled',
-                    },
-                  },
+                  path: 'ui/__fixtures__/shared/Button.js',
+                  names: ['normal', 'disabled'],
                 },
               },
             },
           },
           Dashboard: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'ui/__fixtures__/Dashboard.js' },
+              path: 'ui/__fixtures__/Dashboard.js',
             },
           },
         },
@@ -95,7 +79,7 @@ it('collapses fixtures dir with sibling', () => {
               Dashboard: {
                 data: {
                   type: 'fixture',
-                  fixtureId: { path: 'ui/__fixtures__/Dashboard.js' },
+                  path: 'ui/__fixtures__/Dashboard.js',
                 },
               },
             },
@@ -106,7 +90,7 @@ it('collapses fixtures dir with sibling', () => {
               Button: {
                 data: {
                   type: 'fixture',
-                  fixtureId: { path: 'ui/shared/Button.fixture.js' },
+                  path: 'ui/shared/Button.fixture.js',
                 },
               },
             },
@@ -127,15 +111,15 @@ it('collapses fixtures dir with sibling', () => {
               Button: {
                 data: {
                   type: 'fixture',
-                  fixtureId: { path: 'ui/shared/Button.fixture.js' },
+                  path: 'ui/shared/Button.fixture.js',
                 },
               },
             },
           },
           Dashboard: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'ui/__fixtures__/Dashboard.js' },
+              path: 'ui/__fixtures__/Dashboard.js',
             },
           },
         },
@@ -155,7 +139,7 @@ it('collapses fixtures dirs at different levels', () => {
           Dashboard: {
             data: {
               type: 'fixture',
-              fixtureId: { path: '__fixtures__/Dashboard.js' },
+              path: '__fixtures__/Dashboard.js',
             },
           },
         },
@@ -169,7 +153,7 @@ it('collapses fixtures dirs at different levels', () => {
               Button: {
                 data: {
                   type: 'fixture',
-                  fixtureId: { path: 'shared/__fixtures__/Button.js' },
+                  path: 'shared/__fixtures__/Button.js',
                 },
               },
             },
@@ -184,7 +168,7 @@ it('collapses fixtures dirs at different levels', () => {
       Dashboard: {
         data: {
           type: 'fixture',
-          fixtureId: { path: '__fixtures__/Dashboard.js' },
+          path: '__fixtures__/Dashboard.js',
         },
       },
       shared: {
@@ -193,7 +177,7 @@ it('collapses fixtures dirs at different levels', () => {
           Button: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'shared/__fixtures__/Button.js' },
+              path: 'shared/__fixtures__/Button.js',
             },
           },
         },

diff --git a/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/collapseIndexes.test.ts b/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/collapseIndexes.test.ts
@@ -11,7 +11,7 @@ it('collapses index fixture', () => {
           index: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/index.fixture.js' },
+              path: 'Dashboard/index.fixture.js',
             },
           },
         },
@@ -24,7 +24,7 @@ it('collapses index fixture', () => {
       Dashboard: {
         data: {
           type: 'fixture',
-          fixtureId: { path: 'Dashboard/index.fixture.js' },
+          path: 'Dashboard/index.fixture.js',
         },
       },
     },
@@ -42,10 +42,8 @@ it('collapses index multi fixture', () => {
           index: {
             data: {
               type: 'multiFixture',
-              fixtureIds: {
-                normal: { path: 'Button/index.fixture.js', name: 'normal' },
-                disabled: { path: 'Button/index.fixture.js', name: 'disabled' },
-              },
+              path: 'Button/index.fixture.js',
+              names: ['normal', 'disabled'],
             },
           },
         },
@@ -58,10 +56,8 @@ it('collapses index multi fixture', () => {
       Button: {
         data: {
           type: 'multiFixture',
-          fixtureIds: {
-            normal: { path: 'Button/index.fixture.js', name: 'normal' },
-            disabled: { path: 'Button/index.fixture.js', name: 'disabled' },
-          },
+          path: 'Button/index.fixture.js',
+          names: ['normal', 'disabled'],
         },
       },
     },
@@ -79,13 +75,13 @@ it('does not collapse index fixture with sibling', () => {
           index: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/index.fixture.js' },
+              path: 'Dashboard/index.fixture.js',
             },
           },
           Settings: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/Settings.fixture.js' },
+              path: 'Dashboard/Settings.fixture.js',
             },
           },
         },
@@ -101,13 +97,13 @@ it('does not collapse index fixture with sibling', () => {
           index: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/index.fixture.js' },
+              path: 'Dashboard/index.fixture.js',
             },
           },
           Settings: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/Settings.fixture.js' },
+              path: 'Dashboard/Settings.fixture.js',
             },
           },
         },
@@ -127,7 +123,7 @@ it('only collapses index fixture without sibling', () => {
           index: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/index.fixture.js' },
+              path: 'Dashboard/index.fixture.js',
             },
           },
           Settings: {
@@ -136,7 +132,7 @@ it('only collapses index fixture without sibling', () => {
               index: {
                 data: {
                   type: 'fixture',
-                  fixtureId: { path: 'Dashboard/Settings/index.fixture.js' },
+                  path: 'Dashboard/Settings/index.fixture.js',
                 },
               },
             },
@@ -154,13 +150,13 @@ it('only collapses index fixture without sibling', () => {
           index: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/index.fixture.js' },
+              path: 'Dashboard/index.fixture.js',
             },
           },
           Settings: {
             data: {
               type: 'fixture',
-              fixtureId: { path: 'Dashboard/Settings/index.fixture.js' },
+              path: 'Dashboard/Settings/index.fixture.js',
             },
           },
         },