vitkon

Mono Repository Tool Comparison

For Web Client / Front End Projects

(That Probably Use HTML, CSS, and JS)

I made a list of 20 things I might want out of a monorepo tool for a Design System to use as a basis for comparing some of the options including Lerna, Northbrook, and Rush.

⚠️ Northbrook's author says the project is pretty dead and now uses Lerna.

Qualifications Wanted

vitkon

/* Fluid typography with 16-24px font size range based on the width of the viewport */
/* reference - https://css-tricks.com/snippets/css/fluid-typography/ */

:root {
  --min-content-width: 320;
  --max-content-width: 1600;
  
  --min-font-size: 16;
  --max-font-size: 24;
}

vitkon

import * as React from 'react';
import { shallow } from 'enzyme';

import App from '../App';

describe('App', () => {
    it('should exist', () => {
        expect(App).toBeDefined();
    });

vitkon

import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

vitkon

{
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "setupTestFrameworkScriptFile": "./setupTests.ts",
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleNameMapper": {
      "\\.(css|jpg|png|svg)$": "<rootDir>/node_modules/jest-css-modules"
    },

vitkon

import * as React from 'react';
import * as styles from './App.module.css';

const App: React.SFC<{}> = () => <div>
    <h1 className={styles.heading}>My App</h1>
</div>;

export default App;

vitkon

.heading {
  color: purple
}

vitkon

import * as React from 'react';

const App: React.SFC<{}> = () => <div>
    <h1>My App</h1>
</div>;

export default App;

vitkon

{
  "compilerOptions": {
    "target": "esnext",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "jsx": "react"
  }
}

vitkon

module.exports = {
  presets: [
    require('poi-preset-react')(),
    require('poi-preset-typescript')()
  ]
}