chore: use preconstruct to manage monorepo #37

with-heart · 2021-03-05T18:18:12Z

This PR makes a few changes to the project in order to use preconstruct for managing the monorepo. preconstruct simplifies a few things that are typically painful in a monorepo, and I wish we were using this for Chakra, so I thought I'd propose it early here.

Changes

Moved some dependencies around
- react/react-dom should exist in individual packages and not the base package.json
- Base package.json is just a umbrella for the other packages and has no distinction between deps/devDeps, so we can just install all base packages as regular deps
Added preconstruct
- Configured to automatically link packages on yarn install
- Responsible only for building and linking thunderstore-components atm
  - Adding new packages in the future is as simple as creating a new package, adding to preconstruct.packages in package.json, and running preconstruct init
- Added @preconstruct/next plugin in next.config.js so next build/dev commands work the same regardless of whether we're using local dev link or prod build

What `preconstruct` handles

Local package links

Normally with a monorepo, you link packages for local dev, but the consumed package needs to be rebuilt anytime it changes in order for those changes to make it to consuming packages (like nextjs for example). This is a real hassle and requires using watch, which can be annoying if you have more than one consumed package you're working on at once.

preconstruct dev analyzes the project to link packages in the right way, and also generates a shim dist for each package it's responsible for that just points to the source folder, so there's no need to build the package for local dev work.

Build process

preconstruct build handles the build process for all packages we make it responsible for, using a sane rollup config and babel. This takes a significant amount of effort out of the build configuration process, as we can simply install the babel plugins/presets/transforms we want to use and allow preconstruct to handle the rest. Adding new buildable packages requires no additional effort.

Since the base package isn't built or published, there's no distinction between dependencies and devDependencies. We can just put everything under `dependencies`.

These deps belong in the individual packages rather than the base `package.json`. If we have conflicting versions in the future, we can use the `resolutions` field to fix that.

with-heart · 2021-03-05T18:19:50Z

.eslintrc.json

+  "overrides": [
+    {
+      "files": "*.js",
+      // rule overrides for js config files (next.config.js, etc.)
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off"
+      }
+    }
+  ]


Allows us to use require statements in .js files, which I imagine will mostly be configuration files for this project.

nihaals

I think we should have some developer documentation as based on just looking at the diff I wasn't confident on how to actually have the same setup I had before (running Next.js' dev server and have the components auto build). After reading #37 (comment), I guessed just doing cd nextjs and yarn run dev but this didn't work (after modifying PackageUpload.tsx, the change was not reflected).

nihaals · 2021-03-06T14:39:12Z

README.md

+- [`preconstruct`](https://preconstruct.tools/) tool takes a lot of the pain
+  out of managing a monorepo
+  - code behaves the same in dev as it will in production


This feels a bit 3rd person/an extract from the docs instead of more of a guide/explanation of how the tool works with/is used in the repo

nihaals · 2021-03-06T14:45:21Z

thunderstore-components/package.json

+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",


Why doesn't this need to be part of nextjs?

nihaals · 2021-03-06T14:48:44Z

README.md

+- [`preconstruct`](https://preconstruct.tools/) tool takes a lot of the pain
+  out of managing a monorepo
+  - code behaves the same in dev as it will in production
+  - packages linked locally via `preconstruct dev` (runs automatically in
+    `postinstall` hook) without needing to manually build anything
+  - `nextjs` workspace uses `@preconstruct/next` plugin to integrate


Maybe this could include some documentation on exactly how to setup the project from after git clone which includes how to start the Next.js dev server and having the components automatically compiled (this might change with #28 or at least how important knowing how to start Next.js is but having the commands for the typical running dev environments would help, e.g. components and storybook, components and Next.js, just Next.js (if that's even useful)).

nihaals · 2021-03-06T14:56:42Z

README.md

+  - packages linked locally via `preconstruct dev` (runs automatically in
+    `postinstall` hook) without needing to manually build anything


runs automatically in postinstall hook

From preconstruct's docs:

If you're in a monorepo, you should also run yarn preconstruct dev and add it to a postinstall script("postinstall": "preconstruct dev") that runs preconstruct dev so that you can import your code without having to rebuild your project every time in changes.

Where is this actually setup?

Basically the changes done here are the results of following this tutorial: https://monorepo.guide/getting-started . Additionally some changes are from an earlier pr (#37), which was also about setting up Preconstruct. * Add Preconstruct as dependency * Setup Babel and ESLint * Rename workspaces to use the structure used in the tutorial. I don't know if this is some convention oslt, but it seems like a nice, clear structure for the repo * Add a script for using Preconstruct, and a postinstall hook to run it automatically while devving (see root package.json) * Move all devDependencies to dependencies on root package.json. This was recommended by Preconstruct, but I can't quite recall why

with-heart added 4 commits March 5, 2021 12:47

chore(deps): move all base deps to dependencies

70d37ae

Since the base package isn't built or published, there's no distinction between dependencies and devDependencies. We can just put everything under `dependencies`.

chore(deps): move react deps into thunderstore-components pkg

ae88e9a

These deps belong in the individual packages rather than the base `package.json`. If we have conflicting versions in the future, we can use the `resolutions` field to fix that.

chore: add preconstruct

98486a5

chore(lint): enable require in js files

5093ff3

with-heart commented Mar 5, 2021

View reviewed changes

chore: run preconstruct dev on prepare

53b5737

nihaals mentioned this pull request Mar 6, 2021

Add more CI #33

Open

7 tasks

nihaals self-requested a review March 6, 2021 14:51

nihaals requested changes Mar 6, 2021

View reviewed changes

anttimaki mentioned this pull request Nov 29, 2021

Use Preconstruct to manage monorepo #285

Merged

anttimaki closed this in #285 Nov 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: use preconstruct to manage monorepo #37

chore: use preconstruct to manage monorepo #37

with-heart commented Mar 5, 2021

with-heart Mar 5, 2021

nihaals left a comment

nihaals Mar 6, 2021

nihaals Mar 6, 2021 •

edited

Loading

nihaals Mar 6, 2021

nihaals Mar 6, 2021

		- packages linked locally via `preconstruct dev` (runs automatically in
		`postinstall` hook) without needing to manually build anything

chore: use preconstruct to manage monorepo #37

chore: use preconstruct to manage monorepo #37

Conversation

with-heart commented Mar 5, 2021

Changes

What preconstruct handles

Local package links

Build process

with-heart Mar 5, 2021

Choose a reason for hiding this comment

nihaals left a comment

Choose a reason for hiding this comment

nihaals Mar 6, 2021

Choose a reason for hiding this comment

nihaals Mar 6, 2021 • edited Loading

Choose a reason for hiding this comment

nihaals Mar 6, 2021

Choose a reason for hiding this comment

nihaals Mar 6, 2021

Choose a reason for hiding this comment

What `preconstruct` handles

nihaals Mar 6, 2021 •

edited

Loading