Jamie Kyle jamiebuilds

High-level file system organization for company-wide monorepo

The following are some high level options for organizing a company-wide monorepo.

This is assuming use of a multi-package system like Yarn, Bolt, or Lerna.

Option 1: Flat

Keep all of the packages at the top level so that you don't have to navigate deep into folders to find the package you are looking for. It's always one cd package-name away. It does mean that you have to name folders carefully so that related ones get grouped together.

/my-website/
- package.json
- /src/
  - /pages/
    - index.html
    - about.html
  - /assets/
    - site.css
    - site.js
service-worker.js

/my-website/
  package.json
  /src/
    /pages/
      index.html
      about.html
    /assets/
      site.css
 site.js

Symbols

Syntax

let obj = {
  [Symbol('foo')]: 'hello!',
};

class Obj {

[CODEOWNERS] Extension

*                 @defunkt
*.js              @octocat @github/js   min=2
docs/*            [email protected]      review=optional min=0
CODEOWNERS        [email protected]        review=required

[block]
 * @defunkt

stylable-components

CSS for Components

Example

/* Counter.css */
@import Button from './Button.css';

Namespaces

Note: This borrows a lot from TypeScript.

Basic

Input

namespace MyNamespace {

Synchronous module inspection

This document describes the challenges presented by import() and how they could be addressed.

Problem

If you're starting up an app with multiple modules already loaded, using import() prevents you from gaining access to them synchronously.

Package source:

// math-pkg/src/index.js
export pow from './pow';
export square from './square';

// math-pkg/src/pow.js
export default function pow(x, n) {
 return Math.pow(x, n);

	// @flow
	import React from 'react';
	import { Container, Subscribe } from 'unstated';

	function formatPrice(price: number) {
	return `$${Math.round(price * 100) / 100} USD`;
	}

	class CartItem {
	constructor(name: string, price: number) {