Ads Monorepo Examples

Purpose

  • Demo best practice for consuming apps
  • Act as integration tests for monorepo packages

Requirements

  • Maintainability
  • Performance
  • Single entrypoint
examples
├── lib
│  └── utils.js
├── public
│  ├── display
│  ├── moat-integration
│  ├── partner-content
│  ├── permutive
│  └── index.html
├── scripts
│  └── demo.sh
├── package.json
├── README.md
└── vite.config.js
public/partner-content
├── display
│  ├── demo.js
│  └── index.html
├── no-lib
│  ├── ad.json
│  ├── demo.js
│  ├── index.html
│  └── style.css
└── o-ads
   ├── demo.js
   └── index.html

https://www.cypress.io/

examples
├── lib
│  └── utils.js
├── public
│  ├── display
│  ├── moat-integration
│  ├── partner-content
│  ├── permutive
│  └── index.html
├── scripts
│  └── demo.sh
├── package.json
├── README.md
└── vite.config.js

https://vitejs.dev

  • Stable
  • Widely adopted
  • Blazing Lightning fast HMR
  • Built on Rollup
  • Uses ESBuild
  • Has a library mode

🤔

What if we used
Vite to publish
our Monorepo?

partner-content
├── dist
│  ├── ads-partner-content.es.js
│  └── ads-partner-content.umd.js
├── node_modules
├── src
│  ├── get
│  ├── init
│  ├── track
│  ├── utils
│  └── index.js
├── babel.config.js
├── package.json
├── README.md
└── vite.config.js
// vite.config.js

import path from "path";

export default {
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.js"),
      name:"AdsPartnerContent"
    }
  },
};
// babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};
{
  "name": "@financial-times/ads-partner-content",
  "files": [
    "dist"
  ],
  "main": "./dist/ads-partner-content.umd.js",
  "module": "./dist/ads-partner-content.es.js",
  "exports": {
    ".": {
      "import": "./dist/ads-partner-content.es.js",
      "require": "./dist/ads-partner-content.umd.js"
    }
  },
  dependencies: {...},
  devDependencies: {...},
  "scripts": {
    "clean": "rm -rf ./dist",
    "build": "npm run clean && vite build",
    "dev": "vite",
    "test": "jest --colors"
  }
};

Project Standards

  • ESM everywhere
  • Minimise reliance on Babel
  • Consistent file layout
  • Minimal package.json

 

Code Standards

  • Prefer named exports
  • Named function declarations over arrow fns

After

291Mb

50s

Before

1.8Gb

4m56s

Made with Slides.com