WIP: Improve monorepo support

src/constants.ts

@@ -1,3 +1,5 @@
+import * as fs from 'fs-extra';
+import path from 'path';
 import { resolveApp } from './utils';
 
 export const paths = {
@@ -7,3 +9,17 @@ export const paths = {
   appSrc: resolveApp('src'),
   appDist: resolveApp('dist'),
 };
+
+export const templates = [
+  ...new Set(
+    fs
+      .readdirSync(path.resolve(__dirname, '../templates'))
+      .map(template => template.replace(/-monorepo$/, ''))
+  ),
+];
+
+export const monorepos = fs
+  .readdirSync(path.resolve(__dirname, '../templates'))
+  .filter(template => template.endsWith('-monorepo'));
+
+export const structures = ['basic', 'monorepo'];

src/index.ts

@@ -20,12 +20,12 @@ import path from 'path';
 import mkdirp from 'mkdirp';
 import execa from 'execa';
 import ora from 'ora';
-import { paths } from './constants';
+import { paths, templates, structures, monorepos } from './constants';
 import * as Messages from './messages';
 import { createRollupConfig } from './createRollupConfig';
 import { createJestConfig } from './createJestConfig';
-import { resolveApp, safePackageName, clearConsole } from './utils';
-import * as Output from './output';
+import { resolveApp, safePackageName, clearConsole, templateIsReact, templateIsMonorepo, } from './utils';
+
 import { concatAllArray } from 'jpjs';
 import getInstallCmd from './getInstallCmd';
 import getInstallArgs from './getInstallArgs';
@@ -132,7 +132,8 @@ prog
 `)
     );
     const bootSpinner = ora(`Creating ${chalk.bold.green(pkg)}...`);
-    let template;
+    let template!: string;
+    let cmd!: string;
     // Helper fn to prompt the user for a different
     // folder name if one already exists
     async function getProjectPath(projectPath: string): Promise<string> {
@@ -162,10 +163,24 @@ prog
 
       const prompt = new Select({
         message: 'Choose a template',
-        choices: ['basic', 'react'],
+        choices: templates,
       });
 
       template = await prompt.run();
+
+      if (monorepos.some(monorepo => monorepo.startsWith(template))) {
+        const prompt = new Select({
+          message: 'Choose a project structure',
+          choices: structures,
+          result: (structure: string) =>
+            structure === 'monorepo' ? `-monorepo` : '',
+        });
+        const suffix = await prompt.run();
+        template = `${template}${suffix}`;
+      }
+
+      cmd = templateIsMonorepo(template) ? 'lerna run' : 'tsdx';
+
       bootSpinner.start();
       // copy the template
       await fs.copy(
@@ -191,11 +206,13 @@ prog
         typings: 'dist/index.d.ts',
         files: ['dist'],
         scripts: {
-          start: 'tsdx watch',
-          build: 'tsdx build',
-          test: template === 'react' ? 'tsdx test --env=jsdom' : 'tsdx test',
+          start: `${cmd} watch`,
+          build: `${cmd} build`,
+          test: templateIsReact(template)
+            ? 'tsdx test --env=jsdom'
+            : 'tsdx test',
         },
-        peerDependencies: template === 'react' ? { react: '>=16' } : {},
+        peerDependencies: templateIsReact(template) ? { react: '>=16' } : {},
         husky: {
           hooks: {
             'pre-commit': 'pretty-quick --staged',
@@ -227,7 +244,7 @@ prog
       'typescript',
     ].sort();
 
-    if (template === 'react') {
+    if (templateIsReact(template)) {
       deps = [
         ...deps,
         '@types/react',
@@ -237,6 +254,10 @@ prog
       ].sort();
     }
 
+    if (templateIsMonorepo(template)) {
+      deps = [...deps, 'lerna'].sort();
+    }
+
     const installSpinner = ora(Messages.installing(deps)).start();
     try {
       const cmd = getInstallCmd();

src/utils.ts

@@ -19,6 +19,10 @@ export const safePackageName = (name: string) =>
 export const external = (id: string) =>
   !id.startsWith('.') && !path.isAbsolute(id);
 
+export const templateIsReact = (template: string) => template.includes('react');
+export const templateIsMonorepo = (template: string) =>
+  template.endsWith('-monorepo');
+
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 export const appDirectory = fs.realpathSync(process.cwd());

templates/react-monorepo/README.md

@@ -0,0 +1,148 @@
+# TSDX React User Guide
+
+Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
+
+> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
+
+> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
+
+## Commands
+
+TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
+
+The recommended workflow is to run TSDX in one terminal:
+
+```
+npm start # or yarn start
+```
+
+This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
+
+Then run the example inside another:
+
+```
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).
+
+To do a one-off build, use `npm run build` or `yarn build`.
+
+To run tests, use `npm test` or `yarn test`.
+
+## Configuration
+
+Code quality is [set up for you](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+
+### Jest
+
+Jest tests are set up to run with `npm test` or `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
+
+#### Setup Files
+
+This is the folder structure we set up for you:
+
+```
+/example
+  index.html
+  index.tsx       # test your component here in a demo app
+  package.json
+  tsconfig.json
+/src
+  index.tsx       # EDIT THIS
+/test
+  blah.test.tsx   # EDIT THIS
+.gitignore
+package.json
+README.md         # EDIT THIS
+tsconfig.json
+```
+
+#### React Testing Library
+
+We do not set up `react-testing-library` for you yet, we welcome contributions and documentation on this.
+
+### Rollup
+
+TSDX uses [Rollup v1.x](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
+
+### TypeScript
+
+`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
+
+## Continuous Integration
+
+### Travis
+
+_to be completed_
+
+### Circle
+
+_to be completed_
+
+## Optimizations
+
+Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
+
+```js
+// ./types/index.d.ts
+declare var __DEV__: boolean;
+
+// inside your code...
+if (__DEV__) {
+  console.log('foo');
+}
+```
+
+You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
+
+## Module Formats
+
+CJS, ESModules, and UMD module formats are supported.
+
+The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
+
+## Using the Playground
+
+```
+cd example
+npm i # or yarn to install dependencies
+npm start # or yarn start
+```
+
+The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**!
+
+## Named Exports
+
+Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
+
+## Including Styles
+
+There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
+
+For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
+
+## Publishing to NPM
+
+We recommend using https://github.com/sindresorhus/np.
+
+## Usage with Lerna
+
+When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
+
+The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
+
+Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
+
+```diff
+   "alias": {
+-    "react": "../node_modules/react",
+-    "react-dom": "../node_modules/react-dom"
++    "react": "../../../node_modules/react",
++    "react-dom": "../../../node_modules/react-dom"
+   },
+```
+
+An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)

templates/react-monorepo/examples/basic/index.html

@@ -0,0 +1,13 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

templates/react-monorepo/examples/basic/index.tsx

@@ -0,0 +1,14 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Thing } from 'core';
+
+const App = () => {
+  return (
+    <div>
+      <Thing />
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));

templates/react-monorepo/examples/basic/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../../node_modules/react",
+    "react-dom": "../../node_modules/react-dom",
+    "core": "../../packages/core"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.15",
+    "@types/react-dom": "^16.8.4",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
+  }
+}

templates/react-monorepo/examples/basic/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": false,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "baseUrl": ".",
+    "types": ["node"]
+  }
+}

templates/react-monorepo/gitignore

@@ -0,0 +1,8 @@
+*.log
+.DS_Store
+node_modules
+.cache
+.rts2_cache_cjs
+.rts2_cache_es
+.rts2_cache_umd
+dist

templates/react-monorepo/lerna.json

@@ -0,0 +1,4 @@
+{
+  "packages": ["packages/*"],
+  "version": "0.1.0"
+}

templates/react-monorepo/packages/core/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "core",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "umd:main": "dist/core.umd.production.js",
+  "module": "dist/core.es.production.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build"
+  }
+}

templates/react-monorepo/packages/core/src/index.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+// Delete me
+export const Thing = () => {
+  return <div>the snozzberries taste like snozzberries</div>;
+};

templates/react-monorepo/packages/core/test/blah.test.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Thing } from '../src';
+
+describe('it', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<Thing />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+});