feat: Update cosmos.modules file on fixture file changes (#735)

.travis.yml

@@ -1,8 +1,11 @@
 language: node_js
+sudo: required
 node_js:
+  - 9
   - 8
   - 6
 before_install:
+  - sudo sysctl fs.inotify.max_user_watches=524288
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH=$HOME/.yarn/bin:$PATH
 script:

TODO.md

@@ -13,7 +13,7 @@
   - [x] Create RN server cmd
   - [x] Create sockets server (forwarding messages between clients)
   - [x] Generate user modules file
-  - [ ] Update user modules file on changes
+  - [x] Update cosmos.modules file on fixture file changes
   - [x] Add loaderOpts to cosmos.modules
   - [ ] Onboarding
     - [ ] Generate Cosmos config
@@ -32,3 +32,4 @@
   - [x] Test socket transport
   - [ ] Check if existing proxies are compatible
 - [x] Create React Native App example
+- [ ] Add (experimental) README section

examples/create-react-native-app/link-workspaces.js

@@ -1 +1 @@
-require('crna-make-symlinks-for-yarn-workspaces')(__dirname);
+require('@skidding/crna-make-symlinks-for-yarn-workspaces')(__dirname);

examples/create-react-native-app/package.json

@@ -17,8 +17,8 @@
     "react-native": "^0.55.4"
   },
   "devDependencies": {
-    "crna-make-symlinks-for-yarn-workspaces": "^1.0.1",
-    "metro-bundler-config-yarn-workspaces": "^1.0.3",
+    "@skidding/crna-make-symlinks-for-yarn-workspaces": "^1.0.1",
+    "@skidding/metro-bundler-config-yarn-workspaces": "^1.0.5",
     "react-native-scripts": "^1.14.0"
   },
   "xo": false,

examples/create-react-native-app/rn-cli.config.js

@@ -1,5 +1,5 @@
 const { resolve } = require('path');
-const getConfig = require('metro-bundler-config-yarn-workspaces');
+const getConfig = require('@skidding/metro-bundler-config-yarn-workspaces');
 
 module.exports = getConfig(__dirname, {
   nodeModules: resolve(__dirname, '../../node_modules'),

examples/local-state/package.json

@@ -10,7 +10,7 @@
     "test": "node ../../node_modules/jest-cli/bin/jest.js --watch --config ../../jest.config.json"
   },
   "dependencies": {
-    "async-until": "^1.0.1",
+    "async-until": "^1.1.0",
     "react-cosmos": "^4.5.0",
     "react-cosmos-test": "^4.5.0"
   },

jest.config.json

@@ -10,7 +10,7 @@
     "/__fsmocks__/",
     "/_shared"
   ],
-  "watchPathIgnorePatterns": ["/__fsoutput__/"],
+  "watchPathIgnorePatterns": ["/__fsoutput__/", "jestnowatch"],
   "transformIgnorePatterns": [
     "/node_modules/(?!(react-cosmos.+|react-native))"
   ],

package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "after-pending-promises": "^0.0.1",
     "after-pending-timers": "^0.0.1",
-    "async-until": "^1.0.1",
+    "async-until": "^1.1.0",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",

packages/react-cosmos-apollo-proxy/package.json

@@ -16,7 +16,7 @@
   },
   "xo": false,
   "devDependencies": {
-    "async-until": "^1.0.1",
+    "async-until": "^1.1.0",
     "fetch-mock": "^5.12.2",
     "graphql-tag": "^2.9.2"
   }

packages/react-cosmos-loader/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "index.js",
   "dependencies": {
-    "async-until": "^1.0.1",
+    "async-until": "^1.1.0",
     "deep-equal": "^1.0.1",
     "lodash.merge": "^4.6.1",
     "prop-types": "^15.6.1",

packages/react-cosmos-playground/src/components/ComponentPlayground/index.js

@@ -280,6 +280,9 @@ export default class ComponentPlayground extends Component<Props, State> {
       const { status } = await fetch(loaderUri, {
         credentials: 'same-origin'
       });
+      // WARN: At this point the component could be unmounted and we'll get the
+      // following React warning:
+      // > Can't call setState (or forceUpdate) on an unmounted component.
       if (status === 200) {
         // Wait until all session settings are read before rendering
         this.restoreUserSettings(() => {

packages/react-cosmos/package.json

@@ -6,12 +6,13 @@
   "license": "MIT",
   "dependencies": {
     "babel-polyfill": "^6.26.0",
+    "chokidar": "^2.0.4",
     "express": "^4.16.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.1",
     "http-proxy-middleware": "^0.18.0",
     "import-from": "^2.1.0",
-    "lodash.omit": "^4.5.0",
+    "lodash": "^4.17.10",
     "object.values": "^1.0.4",
     "react-cosmos-config": "^4.5.0",
     "react-cosmos-loader": "^4.4.0",

packages/react-cosmos/src/server/native/__tests__/start-new-fixture.js

@@ -0,0 +1,65 @@
+/**
+ * @flow
+ * @jest-environment node
+ */
+
+import { join } from 'path';
+import { readFile, copy, remove } from 'fs-extra';
+import until from 'async-until';
+import {
+  defaultFileMatch as mockFileMatch,
+  defaultFileMatchIgnore as mockFileMatchIgnore,
+  defaultExclude as mockExclude
+} from 'react-cosmos-shared/server';
+import { startServer } from '../start';
+
+const mockRootPath = join(__dirname, '__fsmocks__');
+const mockProxiesPath = join(mockRootPath, 'cosmos.proxies');
+const mockNewFixturePath = join(mockRootPath, 'jestnowatch.fixture.js');
+const mockModulesPath = join(__dirname, '__fsoutput__/cosmos.modules.js');
+
+jest.mock('react-cosmos-config', () => ({
+  getCosmosConfig: () => ({
+    rootPath: mockRootPath,
+    port: 10002,
+    hostname: null,
+    publicUrl: '/',
+    fileMatch: mockFileMatch,
+    fileMatchIgnore: mockFileMatchIgnore,
+    exclude: mockExclude,
+    proxiesPath: mockProxiesPath,
+    modulesPath: mockModulesPath
+  })
+}));
+
+let stopServer;
+
+beforeEach(async () => {
+  jest.clearAllMocks();
+  stopServer = await startServer();
+});
+
+afterEach(async () => {
+  await stopServer();
+  await remove(mockModulesPath);
+  await remove(mockNewFixturePath);
+});
+
+it('re-generates modules file on new fixture file ', async () => {
+  expect((await getFixtureFilesFromModules()).length).toBe(1);
+
+  await copy(join(mockRootPath, 'MyComponent.fixture.js'), mockNewFixturePath);
+
+  // Wait for fs event to be picked up
+  await until(async () => (await getFixtureFilesFromModules()).length === 2, {
+    loopDelay: 200,
+    timeout: 2000,
+    failMsg: 'cosmos.modules file has not been updated'
+  });
+});
+
+async function getFixtureFilesFromModules() {
+  const output = await readFile(mockModulesPath, 'utf8');
+
+  return JSON.parse(output.match(/fixtureFiles: (.+?),\n/)[1]);
+}

packages/react-cosmos/src/server/native/__tests__/start.js

@@ -4,9 +4,8 @@
  */
 
 import { join } from 'path';
-import { readFile, unlink } from 'fs';
+import { readFile, remove } from 'fs-extra';
 import request from 'request-promise-native';
-import promisify from 'util.promisify';
 import {
   defaultFileMatch as mockFileMatch,
   defaultFileMatchIgnore as mockFileMatchIgnore,
@@ -15,9 +14,6 @@ import {
 import io from 'socket.io-client';
 import { startServer } from '../start';
 
-const readFileAsync = promisify(readFile);
-const unlinkAsync = promisify(unlink);
-
 const mockRootPath = join(__dirname, '__fsmocks__');
 const mockProxiesPath = join(mockRootPath, 'cosmos.proxies');
 const mockModulesPath = join(__dirname, '__fsoutput__/cosmos.modules.js');
@@ -45,12 +41,12 @@ beforeEach(async () => {
 
 afterEach(async () => {
   await stopServer();
-  await unlinkAsync(mockModulesPath);
+  await remove(mockModulesPath);
 });
 
 it('serves index.html on / route with playgrounds opts included', async () => {
   const res = await request('http://127.0.0.1:10001/');
-  const source = await readFileAsync(
+  const source = await readFile(
     require.resolve('../../shared/static/index.html'),
     'utf8'
   );
@@ -66,7 +62,7 @@ it('serves index.html on / route with playgrounds opts included', async () => {
 
 it('serves playground js on /_playground.js route', async () => {
   const res = await request('http://127.0.0.1:10001/_playground.js');
-  const source = await readFileAsync(
+  const source = await readFile(
     require.resolve('react-cosmos-playground'),
     'utf8'
   );
@@ -76,7 +72,7 @@ it('serves playground js on /_playground.js route', async () => {
 
 it('serves favicon.ico on /_cosmos.ico route', async () => {
   const res = await request('http://127.0.0.1:10001/_cosmos.ico');
-  const source = await readFileAsync(
+  const source = await readFile(
     require.resolve('../../shared/static/favicon.ico'),
     'utf8'
   );
@@ -101,7 +97,7 @@ it('broadcasts events to between clients', async () => {
 });
 
 it('generates modules file', async () => {
-  const output = await readFileAsync(mockModulesPath, 'utf8');
+  const output = await readFile(mockModulesPath, 'utf8');
 
   const fixturePath = join(mockRootPath, 'MyComponent.fixture.js');
   const componentPath = join(mockRootPath, 'MyComponent.js');

packages/react-cosmos/src/server/native/start.js

@@ -1,5 +1,7 @@
 // @flow
 
+import chokidar from 'chokidar';
+import { debounce } from 'lodash';
 import { getCosmosConfig } from 'react-cosmos-config';
 import {
   createServerApp,
@@ -28,7 +30,10 @@ export async function startServer() {
   const closeSockets = attachSockets(server);
   await startServer();
 
+  const watcher = await startFixtureFileWatcher(cosmosConfig);
+
   return async () => {
+    watcher.close();
     await closeSockets();
     await stopServer();
   };
@@ -40,3 +45,30 @@ function getPlaygroundOpts({ rootPath }) {
     projectKey: rootPath
   };
 }
+
+async function startFixtureFileWatcher(cosmosConfig) {
+  const { rootPath, fileMatch } = cosmosConfig;
+
+  return new Promise(resolve => {
+    const watcher = chokidar
+      .watch(fileMatch, {
+        ignored: getNormalizedIgnores(cosmosConfig),
+        ignoreInitial: true,
+        cwd: rootPath
+      })
+      .on('ready', () => resolve(watcher))
+      .on(
+        'all',
+        debounce(() => {
+          // Rebuild cosmos.modules file on fixture file changes
+          generateModulesFile(cosmosConfig);
+        }, 50)
+      );
+  });
+}
+
+function getNormalizedIgnores({ fileMatchIgnore, exclude }) {
+  return Array.isArray(exclude)
+    ? [fileMatchIgnore, ...exclude]
+    : [fileMatchIgnore, exclude];
+}

packages/react-cosmos/src/server/web/webpack/extend-webpack-config.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { resolve, join } from 'path';
-import omit from 'lodash.omit';
+import { omit } from 'lodash';
 import { getCosmosConfig } from 'react-cosmos-config';
 
 import type { Config } from 'react-cosmos-flow/config';