add example for automating a pkg-based repo

automating-package-based-monorepos/.eslintignore

@@ -0,0 +1 @@
+node_modules

automating-package-based-monorepos/.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      },
+      "rules": {}
+    },
+    {
+      "files": "*.json",
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    }
+  ]
+}

automating-package-based-monorepos/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+*.log
+.next
+dist
+dist-ssr
+*.local
+.env
+.cache
+server/dist
+public/dist

automating-package-based-monorepos/.prettierignore

@@ -0,0 +1,3 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage

automating-package-based-monorepos/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

automating-package-based-monorepos/README.md

@@ -0,0 +1,38 @@
+# Using Nx Generators to Automate Package Scaffolding for PNPM workspaces
+
+[![package-based monorepo](https://img.shields.io/static/v1?label=Nx%20setup&message=package-based%20monorepo&color=orange)](https://nx.dev/concepts/integrated-vs-package-based#package-based-repos)
+
+Source code for the corresponding Youtube video:
+
+- Video: https://youtu.be/myqfGDWC2go
+
+## What's inside?
+
+This contains a simple example of a PNPM workspaces based monorepo (note: you can just swap it with NPM or Yarn workspace if you prefer those). The workspace contains
+
+- a single React library `ui`
+- a local [Nx Plugin](https://nx.dev/plugins/intro/getting-started#create-a-local-plugin) in the `automation` package, that comes with a generator to scaffold new React libraries following the setup of `ui`.
+
+## How to run it
+
+You can just run operations with Nx such as
+
+- building all projects: `pnpm nx run-many -t build`
+- building just a single project: `pnpm nx build ui`
+
+And you can also use the generator to scaffold new React libraries:
+
+```
+pnpm nx g automation:reactlib mynewreactlib
+```
+
+Alternatively 👇
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github.com/nrwl/nx-recipes/tree/main/automating-package-based-monorepos?file=README.md)
+
+## Learn More
+
+- [Docs: Nx Plugins](https://nx.dev/plugins/intro/getting-started)
+- [Video: Scaffold new Pkgs in a PNPM Workspaces Monorepo](https://youtu.be/myqfGDWC2go)
+- [Blog: Introduction to PNPM workspaces based monorepos](https://dev.to/nx/setup-a-monorepo-with-pnpm-workspaces-and-speed-it-up-with-nx-1eem)
+- [Video: Lightning Fast PNPM Workspaces](https://youtu.be/PwfR77oe1E8)

automating-package-based-monorepos/jest.config.ts

@@ -0,0 +1,5 @@
+import { getJestProjects } from '@nx/jest';
+
+export default {
+  projects: getJestProjects(),
+};

automating-package-based-monorepos/jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nx/jest/preset').default;
+
+module.exports = { ...nxPreset };

automating-package-based-monorepos/nx.json

@@ -0,0 +1,28 @@
+{
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": ["build"]
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"]
+    },
+    "lint": {
+      "inputs": [
+        "default",
+        "{workspaceRoot}/.eslintrc.json",
+        "{workspaceRoot}/.eslintignore"
+      ]
+    },
+    "test": {
+      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"]
+    }
+  },
+  "affected": {
+    "defaultBase": "main"
+  }
+}

automating-package-based-monorepos/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "myorg",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "e2e": "node sanity-check.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@nx/eslint-plugin": "16.3.2",
+    "@nx/jest": "16.3.2",
+    "@nx/js": "16.3.2",
+    "@nx/linter": "16.3.2",
+    "@nx/plugin": "^16.3.2",
+    "@swc-node/register": "~1.4.2",
+    "@swc/cli": "~0.1.62",
+    "@swc/core": "~1.3.51",
+    "@types/jest": "^29.4.0",
+    "@types/node": "18.7.1",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "eslint": "~8.15.0",
+    "eslint-config-prettier": "8.1.0",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
+    "jsonc-eslint-parser": "^2.1.0",
+    "nx": "16.3.2",
+    "prettier": "^2.6.2",
+    "ts-jest": "^29.1.0",
+    "ts-node": "10.9.1",
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "@nx/devkit": "16.3.2",
+    "@swc/helpers": "~0.5.0",
+    "tslib": "^2.3.0"
+  },
+  "nx": {
+    "targets": {
+      "e2e": []
+    }
+  }
+}

automating-package-based-monorepos/packages/automation/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["./package.json", "./generators.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/nx-plugin-checks": "error"
+      }
+    }
+  ]
+}

automating-package-based-monorepos/packages/automation/README.md

@@ -0,0 +1,11 @@
+# automation
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build automation` to build the library.
+
+## Running unit tests
+
+Run `nx test automation` to execute the unit tests via [Jest](https://jestjs.io).

automating-package-based-monorepos/packages/automation/generators.json

@@ -0,0 +1,9 @@
+{
+  "generators": {
+    "reactlib": {
+      "factory": "./src/generators/reactlib/generator",
+      "schema": "./src/generators/reactlib/schema.json",
+      "description": "reactlib generator"
+    }
+  }
+}

automating-package-based-monorepos/packages/automation/jest.config.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+export default {
+  displayName: 'automation',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/packages/automation',
+};

automating-package-based-monorepos/packages/automation/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "automation",
+  "version": "0.0.1",
+  "type": "commonjs",
+  "generators": "./generators.json"
+}

automating-package-based-monorepos/packages/automation/project.json

@@ -0,0 +1,66 @@
+{
+  "name": "automation",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/automation/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/automation",
+        "main": "packages/automation/src/index.ts",
+        "tsConfig": "packages/automation/tsconfig.lib.json",
+        "assets": [
+          "packages/automation/*.md",
+          {
+            "input": "./packages/automation/src",
+            "glob": "**/!(*.ts)",
+            "output": "./src"
+          },
+          {
+            "input": "./packages/automation/src",
+            "glob": "**/*.d.ts",
+            "output": "./src"
+          },
+          {
+            "input": "./packages/automation",
+            "glob": "generators.json",
+            "output": "."
+          },
+          {
+            "input": "./packages/automation",
+            "glob": "executors.json",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": [
+          "packages/automation/**/*.ts",
+          "packages/automation/package.json",
+          "packages/automation/generators.json"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/automation/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    }
+  },
+  "tags": []
+}

automating-package-based-monorepos/packages/automation/src/generators/reactlib/files/package.json.template

@@ -0,0 +1,25 @@
+{
+  "name": "@<%= scope %>/<%= name %>",
+  "version": "1.0.0",
+  "description": "<%= description %>",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0"
+  }
+}

automating-package-based-monorepos/packages/automation/src/generators/reactlib/files/src/index.ts.template

@@ -0,0 +1 @@
+// export your public modules here

automating-package-based-monorepos/packages/automation/src/generators/reactlib/files/tsconfig.json.template

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["dom", "ES2015"],
+    "module": "ESNext",
+    "target": "es6",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

automating-package-based-monorepos/packages/automation/src/generators/reactlib/files/tsup.config.ts.template

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: {
+    '.': 'src/index.ts',
+  },
+  banner: {
+    js: "'use client'",
+  },
+  format: ['cjs', 'esm'],
+  external: ['react'],
+  dts: true,
+});