Introduce complexity

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "airbnb-base",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "settings": {
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+}

.gitignore

@@ -26,4 +26,4 @@ build
 
 tmp
 
-tsconfig.tsbuildinfo
+*.tsbuildinfo

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package.json

@@ -9,15 +9,26 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "lerna run build --parallel",
+    "build:leaf": "lerna run build --scope @mono/api --scope @mono/react-app --scope @mono/app --parallel",
+    "build": "lerna run build --scope @mono/shared && lerna run build --scope @mono/comps && yarn build:leaf",
     "start:api": "lerna run start --scope=@mono/api --stream",
     "start:app": "lerna run start --scope=@mono/app --stream",
-    "start:react": "lerna run start --scope=@mono/react-app --scope=@mono/shared --parallel",
-    "start": "lerna run start --scope=@mono/api --scope=@mono/app --scope=@mono/react-app --scope=@mono/shared --parallel"
+    "start:react": "lerna run start --scope=@mono/react-app --scope=@mono/shared --scope=@mono/comps --parallel",
+    "start": "lerna run start --scope=@mono/api --scope=@mono/app --scope=@mono/react-app --scope=@mono/shared --scope=@mono/comps --parallel",
+    "clean": "lerna run clean --parallel",
+    "test": "CI=1 lerna run test --parallel"
   },
   "private": true,
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "2.11.0",
+    "@typescript-eslint/parser": "2.11.0",
+    "eslint": "6.7.2",
+    "eslint-config-airbnb-base": "14.0.0",
+    "eslint-config-prettier": "6.7.0",
+    "eslint-plugin-import": "2.19.1",
+    "eslint-plugin-prettier": "3.1.1",
     "lerna": "^3.19.0",
+    "prettier": "1.19.1",
     "typescript": "^3.7.3"
   }
 }

packages/api/package.json

@@ -9,6 +9,8 @@
   },
   "scripts": {
     "build": "tsc --build --preserveWatchOutput",
-    "start": "yarn build --watch"
+    "start": "node dist/index.js",
+    "build:watch": "yarn build --watch",
+    "clean": "rm -rf dist *.tsbuildinfo"
   }
 }

packages/api/src/index.ts

@@ -1 +1,7 @@
-export const API = true
+import { sum } from '@mono/shared';
+
+export const API = true;
+
+const port = sum(3000, 1);
+
+console.log(`Would listen on port ${port}...`);

packages/app/jest.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
+  },
+  globals: {
+    'ts-jest': {
+      tsConfig: {
+        importHelpers: true,
+        allowJs: true,
+      },
+    },
+  },
+};

packages/app/package.json

@@ -9,6 +9,8 @@
   },
   "scripts": {
     "build": "tsc --build --preserveWatchOutput",
-    "start": "yarn build --watch"
+    "start": "yarn build --watch",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "test": "jest"
   }
 }

packages/app/src/index.test.ts

@@ -0,0 +1,9 @@
+import { times } from './index';
+
+describe('math', () => {
+  describe('times', () => {
+    it('should return 12 for 3*4', () => {
+      expect(times(3, 4)).toBe(12);
+    });
+  });
+});

packages/app/src/index.ts

@@ -1,5 +1,15 @@
-import { SHARED_CONFIG } from '@mono/shared'
+import { SHARED_CONFIG } from '@mono/shared';
 
-const APP = true
+const APP = true;
 
-console.log(SHARED_CONFIG)
+console.log(SHARED_CONFIG);
+
+export function times(a: number, b: number): number {
+  let result = 0;
+
+  for (let i = 0; i < b; i++) {
+    result = result + a;
+  }
+
+  return result;
+}

packages/comps/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@mono/comps",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "dependencies": {
+    "@mono/shared": "*"
+  },
+  "scripts": {
+    "build": "tsc --build tsconfig-build.json --preserveWatchOutput",
+    "start": "yarn build --watch",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "test": "react-scripts test"
+  }
+}

packages/comps/src/CompOne.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CompOne } from './CompOne';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<CompOne />);
+  const linkElement = getByText(/3/i);
+  expect(linkElement).toBeInTheDocument();
+});

packages/comps/src/CompOne.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { sum } from '@mono/shared';
+
+export enum MyEnum {
+  A,
+  B,
+  C,
+}
+
+export const CompOne: React.FC = () => {
+  return <div>CompOne: 1+2={sum(1, 2)}</div>;
+};

packages/comps/src/index.ts

@@ -0,0 +1 @@
+export * from './CompOne';

packages/comps/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

packages/comps/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

packages/comps/tsconfig-build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react"
+  }
+}

packages/comps/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "./src"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "jsx": "react",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}

packages/react-app/package.json

@@ -5,9 +5,13 @@
   "dependencies": {
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "@mono/shared": "*"
+    "@mono/shared": "*",
+    "@mono/comps": "*"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
@@ -19,7 +23,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "clean": "rm -rf dist *.tsbuildinfo"
   },
   "eslintConfig": {
     "extends": "react-app"

packages/react-app/src/App.tsx

@@ -1,7 +1,17 @@
-import React from 'react'
-import logo from './logo.svg'
-import './App.css'
-import { SHARED_CONFIG } from '@mono/shared'
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { SHARED_CONFIG, DummyShared } from '@mono/shared';
+import { CompOne } from '@mono/comps';
+import { LegacyComp } from './LegacyComp';
+
+enum Dummy1 {
+  A,
+  B,
+}
+
+const a: Dummy1 = Dummy1.A;
+const b: DummyShared = DummyShared.chair;
 
 const App: React.FC = () => {
   return (
@@ -18,9 +28,11 @@ const App: React.FC = () => {
           Learn React
         </a>
         <p>Is shared: {SHARED_CONFIG.SHARED}</p>
+        <CompOne />
+        <LegacyComp />
       </header>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

packages/react-app/src/LegacyComp.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const LegacyComp = () => <div>Legacy</div>;

packages/react-app/tsconfig.json

@@ -3,6 +3,9 @@
   "references": [
     {
       "path": "../shared"
+    },
+    {
+      "path": "../comps"
     }
   ],
   "include": ["src"],

packages/shared/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+};

packages/shared/package.json

@@ -6,6 +6,11 @@
   "license": "MIT",
   "scripts": {
     "build": "tsc --build --preserveWatchOutput",
-    "start": "yarn build --watch"
+    "start": "yarn build --watch",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "test": "jest"
+  },
+  "dependencies": {
+    "ts-jest": "24.2.0"
   }
 }

packages/shared/src/index.ts

@@ -1,5 +1,12 @@
+export enum DummyShared {
+  chair,
+  table,
+}
+
 export const SHARED_CONFIG = {
   DUMMY: true,
   SHARED: 'of course',
-  MONO: 'REPO'
-}
+  MONO: 'REPO',
+};
+
+export * from './math';

packages/shared/src/math.test.ts

@@ -0,0 +1,9 @@
+import { sum } from './math';
+
+describe('math', () => {
+  describe('sum', () => {
+    it('should return 3 for 1+2', () => {
+      expect(sum(1, 2)).toBe(3);
+    });
+  });
+});

packages/shared/src/math.ts

@@ -0,0 +1,3 @@
+export function sum(a: number, b: number): number {
+  return a + b;
+}

tsconfig.base.json

@@ -5,11 +5,12 @@
     "sourceMap": true,
     "esModuleInterop": true,
     "strict": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "target": "es6",
     "jsx": "preserve",
-    "lib": ["es6"]
+    "lib": ["es6"],
+    "skipLibCheck": true
   },
   "exclude": ["node_modules"]
 }

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.base.json",
   "references": [
     { "path": "packages/shared" },
+    { "path": "packages/comps" },
     { "path": "packages/app" },
     { "path": "packages/api" },
     { "path": "packages/react-app" }