react-cosmos · ovidiuch · Feb 18, 2023 · Dec 19, 2022 · Dec 19, 2022 · Dec 19, 2022
diff --git a/.eslintignore b/.eslintignore
@@ -1,7 +1,7 @@
 node_modules
 
 packages/*/dist
-example/cosmos-export
+examples/*/cosmos-export
 website/dist
 
 **/__fsmocks__/**

diff --git a/.prettierignore b/.prettierignore
@@ -1,9 +1,8 @@
 .vscode
 coverage
-example/cosmos-export
-example/cosmos.userdeps.js
-example/package.json
-example/*/dist
+examples/*/cosmos-export
+examples/*/cosmos.userdeps.js
+examples/*/package.json
 lerna.json
 package.json
 packages/*/dist

diff --git a/cypress/support/testBlocks.ts b/cypress/support/testBlocks.ts
@@ -1,7 +1,7 @@
 export function homepageTests() {
   context('homepage', () => {
     it('has document title', () => {
-      cy.title().should('include', 'react-cosmos-example');
+      cy.title().should('include', 'example-webpack-babel');
     });
 
     it('displays welcome message', () => {

diff --git a/cypress/tests/native.ts b/cypress/tests/native.ts
@@ -6,7 +6,7 @@ describe('Native', () => {
 
   context('homepage', () => {
     it('has document title', () => {
-      cy.title().should('include', 'react-cosmos-example');
+      cy.title().should('include', 'example-webpack-babel');
     });
 
     it('displays pending renderer message', () => {
@@ -16,12 +16,15 @@ describe('Native', () => {
 
   context('user deps file', () => {
     it('has port option', () => {
-      getUserDepsFile().should('contain', `"port": 5002`);
+      getUserDepsFile().should(
+        'contain',
+        `"playgroundUrl": "http://localhost:5002"`
+      );
     });
 
     it('has fixture paths', () => {
       userDepsContainsModule('src/__fixtures__/HelloWorld.ts');
-      userDepsContainsModule('src/Counter/Counter.fixture.tsx');
+      userDepsContainsModule('src/Counter.fixture.tsx');
       userDepsContainsModule('src/WelcomeMessage/WelcomeMessage.fixture.tsx');
     });
 
@@ -32,7 +35,7 @@ describe('Native', () => {
 });
 
 function getUserDepsFile() {
-  return cy.readFile('example/cosmos.userdeps.js');
+  return cy.readFile('examples/webpack-babel/cosmos.userdeps.js');
 }
 
 function userDepsContainsModule(modulePath: string) {

diff --git a/docs/README.md b/docs/README.md
@@ -281,7 +281,7 @@ export default ({ children }) => <Provider store={store}>{children}</Provider>;
 
 ### Migrating _proxies_
 
-Migrating Cosmos Classic proxies to React Cosmos 5 is not intuitive. _Sorry for that!_ Check out the [nested decorators example](../example/src/NestedDecorators) and join the `#proxies-upgrade` [Slack](https://react-cosmos.slack.com/join/shared_invite/zt-g9rsalqq-clCoV7DWttVvzO5FAAmVAw) channel to learn more about this and to get help with your migration.
+Migrating Cosmos Classic proxies to React Cosmos 5 is not intuitive. _Sorry for that!_ Check out the [nested decorators example](../examples/webpack-babel/src/NestedDecorators) and join the `#proxies-upgrade` [Slack](https://react-cosmos.slack.com/join/shared_invite/zt-g9rsalqq-clCoV7DWttVvzO5FAAmVAw) channel to learn more about this and to get help with your migration.
 
 ### Redux state mock
 

diff --git a/example/src/Counter/Counter.tsx → examples/shared/components/Counter.tsx b/example/src/Counter/Counter.tsx → examples/shared/components/Counter.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { CounterButton } from '../CounterButton/CounterButton.js';
+import { CounterButton } from './CounterButton.js';
 
 type Props = {
   suffix: string;

diff --git a/example/src/CounterButton/CounterButton.tsx → examples/shared/components/CounterButton.tsx b/example/src/CounterButton/CounterButton.tsx → examples/shared/components/CounterButton.tsx
diff --git a/examples/shared/package.json b/examples/shared/package.json
@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "name": "examples-shared",
+  "version": "5.7.2",
+  "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/examples/shared",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {},
+  "dependencies": {},
+  "devDependencies": {}
+}
diff --git a/example/.gitignore → examples/vite/.gitignore b/example/.gitignore → examples/vite/.gitignore
diff --git a/examples/vite/cosmos.config.json b/examples/vite/cosmos.config.json
@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "react-cosmos-plugin-boolean-input",
+    "react-cosmos-plugin-open-fixture",
+    "react-cosmos-plugin-vite"
+  ],
+  "rendererUrl": "http://localhost:5050"
+}
diff --git a/examples/vite/index.html b/examples/vite/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/vite/index.tsx b/examples/vite/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root')!);
+root.render(<h1>Hello, world!</h1>);
diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "name": "example-vite",
+  "version": "5.7.2",
+  "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/examples/vite",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "start": "cosmos"
+  },
+  "dependencies": {
+    "examples-shared": "^5.7.2",
+    "react-cosmos": "^5.7.2",
+    "react-cosmos-plugin-boolean-input": "^5.7.2",
+    "react-cosmos-plugin-open-fixture": "^5.7.2",
+    "react-cosmos-plugin-vite": "^5.7.2",
+    "vite": "^4.1.2"
+  },
+  "devDependencies": {}
+}
diff --git a/example/src/Counter/Counter.fixture.tsx → examples/vite/src/Counter.fixture.tsx b/example/src/Counter/Counter.fixture.tsx → examples/vite/src/Counter.fixture.tsx
@@ -1,6 +1,6 @@
 import { StateMock } from '@react-mock/state';
+import { Counter } from 'examples-shared/components/Counter.js';
 import React from 'react';
-import { Counter } from './Counter.js';
 
 export default {
   default: <Counter suffix="times" />,

diff --git a/...c/CounterButton/CounterButton.fixture.tsx → examples/vite/src/CounterButton.fixture.tsx b/...c/CounterButton/CounterButton.fixture.tsx → 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 { CounterButton } from './CounterButton.js';
 
 export default () => {
   const [count, setCount] = useValue<number>('count', { defaultValue: 0 });

diff --git a/example/src/__fixtures__/HelloWorld.ts → examples/vite/src/__fixtures__/HelloWorld.ts b/example/src/__fixtures__/HelloWorld.ts → examples/vite/src/__fixtures__/HelloWorld.ts
diff --git a/examples/webpack-babel/.gitignore b/examples/webpack-babel/.gitignore
@@ -0,0 +1,2 @@
+cosmos-export
+cosmos.userdeps.js
diff --git a/example/README.md → examples/webpack-babel/README.md b/example/README.md → examples/webpack-babel/README.md
@@ -1,6 +1,6 @@
 > Run `yarn` and `yarn build` in the root directory first. Then you can run `yarn start` inside this example directory.
 
-This example is tied to the Cosmos [monorepo](../CONTRIBUTING.md#monorepo), which makes it useful for internal development, but not as useful as a starter kit because some dependencies are implicit.
+This example is tied to the Cosmos [monorepo](../../CONTRIBUTING.md#monorepo), which makes it useful for internal development, but not as useful as a starter kit because some dependencies are implicit.
 
 Here are some external examples that didn't sit comfortably in this monorepo:
 

diff --git a/example/babel.config.js → examples/webpack-babel/babel.config.js b/example/babel.config.js → examples/webpack-babel/babel.config.js
diff --git a/example/cosmos.config.json → examples/webpack-babel/cosmos.config.json b/example/cosmos.config.json → examples/webpack-babel/cosmos.config.json
@@ -2,8 +2,8 @@
   "globalImports": ["src/global.css"],
   "staticPath": "static",
   "plugins": [
+    "react-cosmos-plugin-boolean-input",
     "react-cosmos-plugin-open-fixture",
-    "react-cosmos-plugin-webpack",
-    "react-cosmos-plugin-boolean-input"
+    "react-cosmos-plugin-webpack"
   ]
 }
diff --git a/example/package.json → examples/webpack-babel/package.json b/example/package.json → examples/webpack-babel/package.json
@@ -1,14 +1,15 @@
 {
   "private": true,
-  "name": "react-cosmos-example",
+  "name": "example-webpack-babel",
   "version": "5.7.2",
-  "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/example",
+  "repository": "https://github.com/react-cosmos/react-cosmos/tree/main/examples/webpack-babel",
   "license": "MIT",
   "type": "module",
   "scripts": {
     "start": "cosmos"
   },
   "dependencies": {
+    "examples-shared": "^5.7.2",
     "react-cosmos": "^5.7.2",
     "react-cosmos-plugin-boolean-input": "^5.7.2",
     "react-cosmos-plugin-open-fixture": "^5.7.2",

diff --git a/examples/webpack-babel/src/Counter.fixture.tsx b/examples/webpack-babel/src/Counter.fixture.tsx
@@ -0,0 +1,19 @@
+import { StateMock } from '@react-mock/state';
+import { Counter } from 'examples-shared/components/Counter.js';
+import React from 'react';
+
+export default {
+  default: <Counter suffix="times" />,
+
+  'small number': (
+    <StateMock state={{ count: 5 }}>
+      <Counter suffix="times" />
+    </StateMock>
+  ),
+
+  'large number': (
+    <StateMock state={{ count: 555555555 }}>
+      <Counter suffix="times" />
+    </StateMock>
+  ),
+};
diff --git a/examples/webpack-babel/src/CounterButton.fixture.tsx b/examples/webpack-babel/src/CounterButton.fixture.tsx
@@ -0,0 +1,14 @@
+import { CounterButton } from 'examples-shared/components/CounterButton.js';
+import React from 'react';
+import { useValue } from 'react-cosmos-core';
+
+export default () => {
+  const [count, setCount] = useValue<number>('count', { defaultValue: 0 });
+  return (
+    <CounterButton
+      suffix="times"
+      count={count}
+      increment={() => setCount(prevCount => prevCount + 1)}
+    />
+  );
+};
diff --git a/example/src/NestedDecorators/Fixture.tsx → ...ck-babel/src/NestedDecorators/Fixture.tsx b/example/src/NestedDecorators/Fixture.tsx → ...ck-babel/src/NestedDecorators/Fixture.tsx
diff --git a/...edDecorators/NestedDecorators.fixture.tsx → ...edDecorators/NestedDecorators.fixture.tsx b/...edDecorators/NestedDecorators.fixture.tsx → ...edDecorators/NestedDecorators.fixture.tsx
diff --git a/...src/NestedDecorators/NestedDecorators.tsx → ...src/NestedDecorators/NestedDecorators.tsx b/...src/NestedDecorators/NestedDecorators.tsx → ...src/NestedDecorators/NestedDecorators.tsx
diff --git a/...WelcomeMessage/WelcomeMessage.fixture.tsx → ...WelcomeMessage/WelcomeMessage.fixture.tsx b/...WelcomeMessage/WelcomeMessage.fixture.tsx → ...WelcomeMessage/WelcomeMessage.fixture.tsx
diff --git a/...ple/src/WelcomeMessage/WelcomeMessage.tsx → ...bel/src/WelcomeMessage/WelcomeMessage.tsx b/...ple/src/WelcomeMessage/WelcomeMessage.tsx → ...bel/src/WelcomeMessage/WelcomeMessage.tsx
diff --git a/...e/src/WelcomeMessage/cosmos.decorator.tsx → ...l/src/WelcomeMessage/cosmos.decorator.tsx b/...e/src/WelcomeMessage/cosmos.decorator.tsx → ...l/src/WelcomeMessage/cosmos.decorator.tsx
diff --git a/example/src/__fixtures__/Controls.tsx → ...bpack-babel/src/__fixtures__/Controls.tsx b/example/src/__fixtures__/Controls.tsx → ...bpack-babel/src/__fixtures__/Controls.tsx
diff --git a/examples/webpack-babel/src/__fixtures__/HelloWorld.ts b/examples/webpack-babel/src/__fixtures__/HelloWorld.ts
@@ -0,0 +1 @@
+export default 'Hello World!';
diff --git a/example/src/__fixtures__/Props.tsx → .../webpack-babel/src/__fixtures__/Props.tsx b/example/src/__fixtures__/Props.tsx → .../webpack-babel/src/__fixtures__/Props.tsx
diff --git a/example/src/global.css → examples/webpack-babel/src/global.css b/example/src/global.css → examples/webpack-babel/src/global.css
diff --git a/example/static/cookie.txt → examples/webpack-babel/static/cookie.txt b/example/static/cookie.txt → examples/webpack-babel/static/cookie.txt
diff --git a/example/tests/fixtures.test.ts → ...ples/webpack-babel/tests/fixtures.test.ts b/example/tests/fixtures.test.ts → ...ples/webpack-babel/tests/fixtures.test.ts
@@ -24,55 +24,55 @@ it('returns fixture info', async () => {
       treePath: ['Controls'],
     },
     {
-      absoluteFilePath: `${rootDir}/src/Counter/Counter.fixture.tsx`,
+      absoluteFilePath: `${rootDir}/src/Counter.fixture.tsx`,
       fileName: 'Counter',
       getElement: expect.any(Function),
       name: 'default',
       parents: [],
       playgroundUrl:
-        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounter%2FCounter.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
-      relativeFilePath: 'src/Counter/Counter.fixture.tsx',
+        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounter.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
+      relativeFilePath: 'src/Counter.fixture.tsx',
       rendererUrl:
-        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounter%2FCounter.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
+        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounter.fixture.tsx%22%2C%22name%22%3A%22default%22%7D',
       treePath: ['Counter', 'default'],
     },
     {
-      absoluteFilePath: `${rootDir}/src/Counter/Counter.fixture.tsx`,
+      absoluteFilePath: `${rootDir}/src/Counter.fixture.tsx`,
       fileName: 'Counter',
       getElement: expect.any(Function),
       name: 'small number',
       parents: [],
       playgroundUrl:
-        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounter%2FCounter.fixture.tsx%22%2C%22name%22%3A%22small+number%22%7D',
-      relativeFilePath: 'src/Counter/Counter.fixture.tsx',
+        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounter.fixture.tsx%22%2C%22name%22%3A%22small+number%22%7D',
+      relativeFilePath: 'src/Counter.fixture.tsx',
       rendererUrl:
-        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounter%2FCounter.fixture.tsx%22%2C%22name%22%3A%22small+number%22%7D',
+        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounter.fixture.tsx%22%2C%22name%22%3A%22small+number%22%7D',
       treePath: ['Counter', 'small number'],
     },
     {
-      absoluteFilePath: `${rootDir}/src/Counter/Counter.fixture.tsx`,
+      absoluteFilePath: `${rootDir}/src/Counter.fixture.tsx`,
       fileName: 'Counter',
       getElement: expect.any(Function),
       name: 'large number',
       parents: [],
       playgroundUrl:
-        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounter%2FCounter.fixture.tsx%22%2C%22name%22%3A%22large+number%22%7D',
-      relativeFilePath: 'src/Counter/Counter.fixture.tsx',
+        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounter.fixture.tsx%22%2C%22name%22%3A%22large+number%22%7D',
+      relativeFilePath: 'src/Counter.fixture.tsx',
       rendererUrl:
-        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounter%2FCounter.fixture.tsx%22%2C%22name%22%3A%22large+number%22%7D',
+        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounter.fixture.tsx%22%2C%22name%22%3A%22large+number%22%7D',
       treePath: ['Counter', 'large number'],
     },
     {
-      absoluteFilePath: `${rootDir}/src/CounterButton/CounterButton.fixture.tsx`,
+      absoluteFilePath: `${rootDir}/src/CounterButton.fixture.tsx`,
       fileName: 'CounterButton',
       getElement: expect.any(Function),
       name: null,
       parents: [],
       playgroundUrl:
-        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounterButton%2FCounterButton.fixture.tsx%22%7D',
-      relativeFilePath: 'src/CounterButton/CounterButton.fixture.tsx',
+        'http://localhost:5000/?fixtureId=%7B%22path%22%3A%22src%2FCounterButton.fixture.tsx%22%7D',
+      relativeFilePath: 'src/CounterButton.fixture.tsx',
       rendererUrl:
-        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounterButton%2FCounterButton.fixture.tsx%22%7D',
+        'http://localhost:5000/_renderer.html?_fixtureId=%7B%22path%22%3A%22src%2FCounterButton.fixture.tsx%22%7D',
       treePath: ['CounterButton'],
     },
     {

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "workspaces": [
     "packages/*",
-    "example",
+    "examples/*",
     "website"
   ],
   "repository": "https://github.com/react-cosmos/react-cosmos",
@@ -22,10 +22,13 @@
     "dist": "yarn link-entries dist",
     "build:clear": "ts-node --esm ./scripts/clearBuild.ts",
     "build": "ts-node --esm ./scripts/build.ts",
-    "start": "yarn cosmos --root-dir example",
-    "export": "yarn cosmos-export --root-dir example",
-    "start:export": "http-server -p 5001 ./example/cosmos-export",
-    "start:native": "yarn cosmos-native --root-dir example --port 5002",
+    "start": "yarn cosmos --root-dir examples/webpack-babel",
+    "start:vite": "yarn cosmos --root-dir examples/vite",
+    "export": "yarn cosmos-export --root-dir examples/webpack-babel",
+    "export:vite": "yarn cosmos-export --root-dir examples/vite",
+    "export:vite:serve": "http-server -p 5001 ./examples/vite/cosmos-export",
+    "start:export": "http-server -p 5001 ./examples/webpack-babel/cosmos-export",
+    "start:native": "yarn cosmos-native --root-dir examples/webpack-babel --port 5002",
     "start:playground": "yarn cosmos --root-dir packages/react-cosmos-ui",
     "website:start": "yarn cosmos --root-dir website",
     "website:build": "ts-node --esm ./scripts/buildWebsite.ts",
@@ -54,7 +57,6 @@
     "@types/react-native": "^0.70.8",
     "@types/react-test-renderer": "^18.0.0",
     "@types/styled-components": "^5.1.26",
-    "@types/url-parse": "^1.4.8",
     "@types/util.promisify": "1.0.4",
     "@types/webpack": "5.28.0",
     "@types/webpack-hot-middleware": "^2.25.6",

diff --git a/packages/react-cosmos-core/src/renderer/rendererConfig.ts b/packages/react-cosmos-core/src/renderer/rendererConfig.ts
@@ -1,3 +1,3 @@
-export type RemoteRendererConfig = {
-  port: number;
+export type RendererConfig = {
+  playgroundUrl: string;
 };