Make fixture loader compatible with React Server Components (#1471)

* Extract client code * Fix imports * Define core package exports * Update test-pnp.yml * Update test-pnp.yml * Update test-pnp.yml * Fix /client export * Simplify * Update test-pnp.yml * Revert "Update test-pnp.yml" This reverts commit eddcfdd. * Create renderer package * Merge branch 'main' into rsc * Update test-pnp.yml * Extract universal renderer parts * Extract decorateFixture helper * Extract FixtureContextProvider * Move FixtureContext * Use DecoratedFixture in server fixture loader * Remove decorator props * WIP * Remove onErrorReset callback * Rename module loades * Rename stuff * Rename stuff * Rename stuff * Revert "Rename stuff" This reverts commit 41b7072. * Revert "Rename stuff" This reverts commit 8bd0198. * Revert "Rename stuff" This reverts commit e753f45. * Revert "Rename module loades" This reverts commit de26081. * Revert "Revert "Rename module loades"" This reverts commit 7b90124. * Revert "Revert "Rename stuff"" This reverts commit da1edd8. * Revert "Revert "Rename stuff"" This reverts commit 046eb06. * Revert "Revert "Rename stuff"" This reverts commit 38553d8. * Temp fix * Path fix * Rename stuff * Remove server entry point * Tmp fix * Path fix * Use renderKey and add patched retry lib to repo * Simplify * Add back async-retry * Simplify * Simplify * Simplify * Rename * Simplify * Simplify * Refactor * Fix ServerFixtureLoader * Update DomFixtureLoader.tsx * Extract isInsideWindowIframe helper * Simplify * Rename stuff * Tidy up * Update ServerFixtureLoader.tsx * Tidy up * Update domRendererConnect.ts * Rename * Pass entire rendererConfig to fixture loaders * Rename component * Simplify * Simplify * Simplify * Use .ts extension * Update RendererContext.ts * Remove superfluous 'use client' * Update DomRendererProvider.tsx * Update docs * Update MIGRATION_V6.md * Simplify * Test getFixtures().getElement() * Rename * Rename stuff * Rename stuff * Update AsyncModuleLoader.tsx * Update StaticModuleLoader.tsx * Remove extra module * Update useFixtureSelection.ts * Enforce renderKey usage * Tweak * Tweak * Make ErrorCatch CRA-agnostic * Show renderer error notification * Update runtimeStatus.tsx * Upgrade async-until and async-retry * Upgrade deps * Improve placement of 'use client' directives * Add comments * Send rendererReady while async module loader is importing modules * Update SidePanel.tsx * asdf * Update test-pnp.yml
react-cosmos · May 4, 2023 · 79b931d · 79b931d
1 parent 470aceb
commit 79b931d
Show file tree

Hide file tree

Showing 184 changed files with 1,933 additions and 1,594 deletions.
diff --git a/.jest/config.cjs b/.jest/config.cjs
@@ -4,6 +4,8 @@ const { join } = require('path');
 // Once Jest ESM is safe to use, we can remove this.
 // https://jestjs.io/docs/ecmascript-modules
 const esDependencies = [
+  '@skidding/async-retry',
+  'async-until',
   'find-up',
   'locate-path',
   'p-limit',

diff --git a/docs/MIGRATION_V6.md b/docs/MIGRATION_V6.md
@@ -58,7 +58,7 @@ React Cosmos 6 also comes with a brand new Vite plugin. To set up a Vite codebas
 
 ### Other breaking changes
 
-- `react-cosmos/fixture` exports moved to react-cosmos-core (eg. `import { useValue } from 'react-cosmos-core'`).
+- `react-cosmos/fixture` exports moved to react-cosmos-renderer (eg. `import { useValue } from 'react-cosmos-renderer/client'`).
 - `NativeFixtureLoader` component moved from `react-cosmos/native` to new `react-cosmos-native` package. Install `react-cosmos-native@next` as well for a React Native setup.
 - `getFixtures2()` renamed to `getFixtures()`.
 - `getCosmosConfigAtPath()` is now async. To replicate the old sync behavior, require() the config module manually and pass it to `createCosmosConfig()`.

diff --git a/docs/README.md b/docs/README.md
@@ -353,7 +353,7 @@ The [props panel](https://twitter.com/ReactCosmos/status/1139838627976843264) al
 
 ```jsx
 // CounterButton.fixture.jsx
-import { useValue } from 'react-cosmos-core';
+import { useValue } from 'react-cosmos-renderer/client';
 
 export default () => {
   const [count, setCount] = useValue('count', { defaultValue: 0 });
@@ -365,7 +365,7 @@ export default () => {
 
 ```jsx
 // Button.fixture.jsx
-import { useSelect } from 'react-cosmos-core';
+import { useSelect } from 'react-cosmos-renderer/client';
 
 export default () => {
   // useSelect also returns a setter as the second value in the return tuple,

diff --git a/docs/uiPlugins/README.md b/docs/uiPlugins/README.md
@@ -77,7 +77,7 @@ In case you don't have any boolean values throughout your fixtures, here's a dum
 
 ```jsx
 // example.fixture.jsx
-import { useValue } from 'react-cosmos/fixture';
+import { useValue } from 'react-cosmos-renderer/client';
 
 export default () => {
   const [toggle, setToggle] = useValue('toggle me', { defaultValue: false });

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -20,6 +20,6 @@
     "react-cosmos-plugin-open-fixture": "6.0.0-alpha.18",
     "react-cosmos-plugin-vite": "6.0.0-alpha.18",
     "react-dom": "^18.2.0",
-    "vite": "^4.3.2"
+    "vite": "^4.3.4"
   }
 }
diff --git a/examples/vite/src/CounterButton.fixture.tsx b/examples/vite/src/CounterButton.fixture.tsx
@@ -1,6 +1,6 @@
 import { CounterButton } from 'examples-shared/components/CounterButton.js';
 import React from 'react';
-import { useValue } from 'react-cosmos-core';
+import { useValue } from 'react-cosmos-renderer/client';
 
 export default () => {
   const [count, setCount] = useValue<number>('count', { defaultValue: 0 });

diff --git a/examples/vite/src/WelcomeMessage/WelcomeMessage.fixture.tsx b/examples/vite/src/WelcomeMessage/WelcomeMessage.fixture.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Viewport } from 'react-cosmos-core';
+import { Viewport } from 'react-cosmos-renderer/client';
 import { Hello } from './WelcomeMessage.js';
 
 export default (

diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -12,9 +12,9 @@
     "native": "cosmos-native"
   },
   "dependencies": {
-    "@babel/core": "^7.21.4",
+    "@babel/core": "^7.21.8",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
+    "@babel/preset-typescript": "^7.21.5",
     "babel-loader": "^9.1.2",
     "examples-shared": "6.0.0-alpha.14",
     "react": "^18.2.0",
@@ -23,6 +23,6 @@
     "react-cosmos-plugin-open-fixture": "6.0.0-alpha.18",
     "react-cosmos-plugin-webpack": "6.0.0-alpha.18",
     "react-dom": "^18.2.0",
-    "webpack": "^5.80.0"
+    "webpack": "^5.82.0"
   }
 }
diff --git a/examples/webpack/src/CounterButton.fixture.tsx b/examples/webpack/src/CounterButton.fixture.tsx
@@ -1,6 +1,6 @@
 import { CounterButton } from 'examples-shared/components/CounterButton.js';
 import React from 'react';
-import { useValue } from 'react-cosmos-core';
+import { useValue } from 'react-cosmos-renderer/client';
 
 export default () => {
   const [count, setCount] = useValue<number>('count', { defaultValue: 0 });

diff --git a/examples/webpack/src/WelcomeMessage/WelcomeMessage.fixture.tsx b/examples/webpack/src/WelcomeMessage/WelcomeMessage.fixture.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Viewport } from 'react-cosmos-core';
+import { Viewport } from 'react-cosmos-renderer/client';
 import { Hello } from './WelcomeMessage.js';
 
 export default (

diff --git a/examples/webpack/src/__fixtures__/Controls.tsx b/examples/webpack/src/__fixtures__/Controls.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelect, useValue } from 'react-cosmos-core';
+import { useSelect, useValue } from 'react-cosmos-renderer/client';
 
 export default () => {
   const [string] = useValue('string', { defaultValue: 'How are you doing?' });

diff --git a/examples/webpack/tests/__snapshots__/fixtures.test.ts.snap b/examples/webpack/tests/__snapshots__/fixtures.test.ts.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders fixture elements 1`] = `
+<button
+  onClick={[Function]}
+>
+  0
+   
+  times
+</button>
+`;
+
+exports[`renders fixture elements 2`] = `
+<button
+  onClick={[Function]}
+>
+  555555555
+   
+  times
+</button>
+`;
+
+exports[`renders fixture elements 3`] = `
+<div
+  style={
+    {
+      "border": "2px dashed #AAA",
+      "borderRadius": 8,
+      "padding": "0 16px",
+    }
+  }
+>
+  <h1>
+    Hi
+     
+    <strong>
+      Maggie
+    </strong>
+    !
+  </h1>
+</div>
+`;
diff --git a/examples/webpack/tests/fixtures.test.ts b/examples/webpack/tests/fixtures.test.ts
@@ -3,6 +3,25 @@ import 'react-cosmos/jest';
 
 import path from 'path';
 import { getCosmosConfigAtPath, getFixtures } from 'react-cosmos';
+import { create } from 'react-test-renderer';
+
+it('renders fixture elements', async () => {
+  const cosmosConfig = await getCosmosConfigAtPath(
+    require.resolve('../cosmos.config')
+  );
+  const fixures = getFixtures(cosmosConfig);
+
+  function testFixtureElement(relPath: string, name: string | null = null) {
+    const match = fixures.find(
+      f => f.relativeFilePath === relPath && f.name === name
+    );
+    expect(create(match!.getElement())).toMatchSnapshot();
+  }
+
+  testFixtureElement('src/CounterButton.fixture.tsx');
+  testFixtureElement('src/Counter.fixture.tsx', 'large number');
+  testFixtureElement('src/WelcomeMessage/WelcomeMessage.fixture.tsx');
+});
 
 it('returns fixture info', async () => {
   const cosmosConfig = await getCosmosConfigAtPath(

diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "release:next": "yarn release:check && yarn lerna publish --dist-tag=next --exact -m \"[skip ci] %s\""
   },
   "devDependencies": {
-    "@skidding/async-retry": "^3.0.0",
+    "@skidding/async-retry": "^4.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/express": "^4.17.17",
@@ -38,23 +38,23 @@
     "@types/jest": "^29.5.1",
     "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
-    "@types/node": "^18.16.0",
+    "@types/node": "^18.16.3",
     "@types/pem": "^1.9.6",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/react-is": "^17.0.3",
+    "@types/react": "^18.2.4",
+    "@types/react-dom": "^18.2.3",
+    "@types/react-is": "^18.2.0",
     "@types/react-native": "^0.71.6",
     "@types/react-test-renderer": "^18.0.0",
     "@types/styled-components": "^5.1.26",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/ws": "^8.5.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "async-until": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "async-until": "^4.0.1",
     "chalk": "5.2.0",
     "create-react-class": "^15.7.0",
     "css-loader": "^6.7.3",
-    "cypress": "12.10.0",
+    "cypress": "12.11.0",
     "delay": "^5.0.0",
     "eslint": "^8.39.0",
     "eslint-plugin-import": "^2.27.5",
@@ -83,9 +83,9 @@
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
     "typescript": "5.0.4",
-    "vite": "^4.3.2",
-    "webpack": "^5.80.0",
+    "vite": "^4.3.4",
+    "webpack": "^5.82.0",
     "webpack-cli": "^5.0.2",
-    "yargs": "^17.7.1"
+    "yargs": "^17.7.2"
   }
 }
diff --git a/packages/react-cosmos-core/package.json b/packages/react-cosmos-core/package.json
@@ -5,8 +5,8 @@
   "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/packages/react-cosmos-core",
   "license": "MIT",
   "type": "module",
-  "main": "./dist/index.js",
   "sideEffects": false,
+  "main": "./dist/index.js",
   "dependencies": {
     "lodash-es": "^4.17.21",
     "react-is": "^18.2.0"

diff --git a/packages/react-cosmos-core/src/fixture/FixtureContext.ts b/packages/react-cosmos-core/src/fixture/FixtureContext.ts
diff --git a/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/createRawFixtureTree.test.ts b/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/createRawFixtureTree.test.ts
@@ -1,4 +1,4 @@
-import { FixtureList } from '../../fixture/types.js';
+import { FixtureList } from '../../userModules/fixtureTypes.js';
 import { FixtureTreeNode } from '../types.js';
 import { createRawFixtureTree } from './createRawFixtureTree.js';
 

diff --git a/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/createRawFixtureTree.ts b/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/createRawFixtureTree.ts
@@ -1,5 +1,8 @@
 import { get, set } from 'lodash-es';
-import { FixtureList, FixtureListItem } from '../../fixture/types.js';
+import {
+  FixtureList,
+  FixtureListItem,
+} from '../../userModules/fixtureTypes.js';
 import { addTreeNodeChild } from '../../utils/tree.js';
 import { FixtureTreeNode } from '../types.js';
 

diff --git a/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/index.ts b/packages/react-cosmos-core/src/fixtureTree/createFixtureTree/index.ts
@@ -1,4 +1,4 @@
-import { FixtureList } from '../../fixture/types.js';
+import { FixtureList } from '../../userModules/fixtureTypes.js';
 import { sortTreeChildren } from '../../utils/tree.js';
 import { FixtureTreeNode } from '../types.js';
 import { collapseFixtureDirs } from './collapseFixtureDirs.js';

diff --git a/packages/react-cosmos-core/src/fixtureTree/flattenFixtureTree.test.ts b/packages/react-cosmos-core/src/fixtureTree/flattenFixtureTree.test.ts
@@ -1,4 +1,4 @@
-import { FixtureList } from '../fixture/types.js';
+import { FixtureList } from '../userModules/fixtureTypes.js';
 import { createFixtureTree } from './createFixtureTree/index.js';
 import { flattenFixtureTree } from './flattenFixtureTree.js';
 

diff --git a/packages/react-cosmos-core/src/fixtureTree/flattenFixtureTree.tsx b/packages/react-cosmos-core/src/fixtureTree/flattenFixtureTree.tsx
@@ -1,4 +1,4 @@
-import { FixtureId } from '../fixture/types.js';
+import { FixtureId } from '../userModules/fixtureTypes.js';
 import { FixtureTreeNode } from './types.js';
 
 export type FlatFixtureTreeItem = {

diff --git a/packages/react-cosmos-core/src/index.ts b/packages/react-cosmos-core/src/index.ts
@@ -1,29 +1,24 @@
-export * from './fixture/FixtureContext.js';
-export * from './fixture/Viewport.js';
-export * from './fixture/types.js';
-export * from './fixture/useSelect/index.js';
-export * from './fixture/useValue/index.js';
 export * from './fixtureState/classState.js';
+export * from './fixtureState/controls.js';
+export * from './fixtureState/createValues.js';
+export * from './fixtureState/extendWithValues.js';
 export * from './fixtureState/props.js';
 export * from './fixtureState/types.js';
 export * from './fixtureTree/createFixtureTree/index.js';
 export * from './fixtureTree/flattenFixtureTree.js';
 export * from './fixtureTree/types.js';
+export * from './message/serverMessage.js';
+export * from './message/socketMessage.js';
 export * from './playground/playgroundUrl.js';
-export * from './renderer/FixtureCapture/index.js';
-export * from './renderer/FixtureConnect.js';
-export * from './renderer/createPostMessageConnect.js';
-export * from './renderer/createWebSocketsConnect.js';
-export * from './renderer/getDecoratedFixtureElement/index.js';
-export * from './renderer/getFixtureList.js';
-export * from './renderer/getSortedDecoratorsForFixturePath.js';
-export * from './renderer/registerPlaygroundShortcuts.js';
+export * from './playground/registerPlaygroundShortcuts.js';
+export * from './plugin/cosmosPluginConfig.js';
 export * from './renderer/rendererConfig.js';
 export * from './renderer/rendererConnectTypes.js';
-export * from './renderer/userModuleTypes.js';
-export * from './server/cosmosPluginConfig.js';
-export * from './server/serverMessage.js';
-export * from './server/socketMessage.js';
+export * from './userModules/fixtureTypes.js';
+export * from './userModules/getFixtureFromExport.js';
+export * from './userModules/getFixtureList.js';
+export * from './userModules/getSortedDecoratorsForFixturePath.js';
+export * from './userModules/userModuleTypes.js';
 export * from './utils/array.js';
 export * from './utils/keys.js';
 export * from './utils/react/ClassStateMock.js';
@@ -34,3 +29,4 @@ export * from './utils/string.js';
 export * from './utils/tree.js';
 export * from './utils/types.js';
 export * from './utils/uuid.js';
+export * from './utils/window.js';
diff --git a/...t-cosmos-core/src/server/serverMessage.ts → ...-cosmos-core/src/message/serverMessage.ts b/...t-cosmos-core/src/server/serverMessage.ts → ...-cosmos-core/src/message/serverMessage.ts
diff --git a/...t-cosmos-core/src/server/socketMessage.ts → ...-cosmos-core/src/message/socketMessage.ts b/...t-cosmos-core/src/server/socketMessage.ts → ...-cosmos-core/src/message/socketMessage.ts
diff --git a/packages/react-cosmos-core/src/playground/playgroundUrl.ts b/packages/react-cosmos-core/src/playground/playgroundUrl.ts
@@ -1,4 +1,4 @@
-import { FixtureId } from '../fixture/types.js';
+import { FixtureId } from '../userModules/fixtureTypes.js';
 
 export type PlaygroundUrlParams = {
   fixtureId?: FixtureId;

diff --git a/...c/renderer/registerPlaygroundShortcuts.ts → ...playground/registerPlaygroundShortcuts.ts b/...c/renderer/registerPlaygroundShortcuts.ts → ...playground/registerPlaygroundShortcuts.ts
diff --git a/...mos-core/src/server/cosmosPluginConfig.ts → ...mos-core/src/plugin/cosmosPluginConfig.ts b/...mos-core/src/server/cosmosPluginConfig.ts → ...mos-core/src/plugin/cosmosPluginConfig.ts