Prep Repo for Tldraw Upgrade

[mdroidian]

This will be a draft PR that is broken down into multiple smaller PRs with the goal of preparing the repo for apps/roam tldraw upgrade and to help move our repo back to a healthier state.

In this PR, the following changes have been made:

• update apps/roam package-lock.json Remove package-lock.json in apps/roam #70
• update apps/roam to React 18
  • override roamjs-components and blueprintjs
• update apps/website / package/ui to React 19
  • apply minor refactors to match React 19 types
• clean install without --legacy-peer-deps ( rm node_modules, rm package-lock, npm i to rebuild package-lock)
• move/edit tldraw patches to match new node_modules
• modify postinstall to apply root packages

Caveats

• blueprintjs components still need to be patched to allow children, this will show a type error currently
• npm ls react still shows many errors, mostly from blueprintjs. We may fork blueprintjs in the future to solve this.
• moving forward we will need to isolate packages/ui to React 19. apps/roam will not use packages/ui.
• we will also need to move any utils from packages/ui to packages/util so they can be used across apps/* (ENG-633)

Testing

Setup

To test this with your app/workflow, you can either clone to test folder or remove node_modules:

• git clone the repo to a new temp folder
• checkout eng-617-reproduce-the-idenpm-issues

OR

• remove all node_modules (from root and each app/* and package/* if they exist)

THEN

• remove root package-lock.json
• run npm i
• check your regular workflow/files for issues

Test

Let me know if after npm i

• errors are thrown
• package-lock.json shows changes from this PR's package-lock.json
• any issues in your workflow/files

Summary by CodeRabbit

• New Features

  • Added a PowerShell script to automate cleaning and reinstalling Node.js dependencies.

• Refactor

  • Updated several React components to simplify how references (refs) are handled.
  • Improved client-side loading for analytics tracking to enhance performance.
  • Streamlined async page rendering in documentation sections for better maintainability.

• Chores

  • Updated dependency versions for React, Next.js, and related type definitions across multiple packages.
  • Adjusted dependency overrides to ensure compatibility with specific React versions.
  • Cleaned up metadata in patch files for better clarity.

[linear]

ENG-617 Prep Repo for Tldraw Upgrade

[maparent]

LGTM. No error on npm install. The resulting package-lock has a tiny discrepancy, probably because I did it later. (below)
I then proceeded to do a cucumber test, to see if there were issues at this level, and no.
That is a great success!

Now, a slight concern going forward : website now uses react 19, roam uses react 18, so does it even make sense to have a packages/ui, since no ui code can be common?
OTH, packages/ui allowed us to use components pulled through shadcn, and I saw that as a nice convenience.
I wonder if it's possible to have two ui directories, with different dependencies, and possibly different shadcn components, but sharing some common ui code that abstracts over the difference? Is that even worth it? Or should we just accept the non-DRYness of ui code?

diff --git a/package-lock.json b/package-lock.json
index d498007..52e039e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24097,9 +24097,9 @@
       "peer": true
     },
     "node_modules/resend": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/resend/-/resend-4.7.0.tgz",
-      "integrity": "sha512-30IbXGBUbmDweQH2IlO53XOXX7ndjYV9xFZ8IEBiWqefqQ/qmTsgrX0Ab6MUnmobJXbpdReVv+iXGRQPubQL5Q==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/resend/-/resend-4.8.0.tgz",
+      "integrity": "sha512-R8eBOFQDO6dzRTDmaMEdpqrkmgSjPpVXt4nGfWsZdYOet0kqra0xgbvTES6HmCriZEXbmGk3e0DiGIaLFTFSHA==",
       "license": "MIT",
       "dependencies": {
         "@react-email/render": "1.1.2"

[mdroidian]

Now, a slight concern going forward : website now uses react 19, roam uses React 18 ...

Just noting that we discussed this in our Dev meeting. packages/ui will be reserved for React 19. apps/roam ui will live in apps/roam until we have another app/package that is limited to React 18, in which case we can create a packages/ui-18 (or similar).

[mdroidian]

Tested live with @sid597 on a clone of his #199 ✔

[trangdoan982]

@mdroidian there are some errors on my trial. Here's what i did:

• fetch this branch
• remove all node_modules (from root and each app/* and package/* if they exist). I made sure to check every apps and package sub-folders.
• ran npm i from root folder

Update: I also tried the other method of cloning to a separate test folder and received the same errors

The errors:

1. Quite a few npm warnings about react versioning

2. node_modules didn't get re-installed back to obsidian. Because of this, I couldn't build the plugin successfully to the Obsidian app.

3. There were changes in package-lock.json
   It doesn't seem to have any big change but removing the liscenscing in the packages

[mdroidian]

1. Quite a few npm warnings about react versioning

The warnings are expected. 👍

2. node_modules didn't get re-installed back to obsidian. Because of this, I couldn't build the plugin successfully to the Obsidian app.

This is interesting. Could you elaborate more on what you tried to do and how it was unsuccessful?

[trangdoan982]

so i just npm i from root folder. this re-added node_modules on almost all other apps/* and packages/* but obsidian.

But I realized the build error was because of a nanoid import, so after resolving that build was successful. However, the apps/obsidian folder still doesn't have node_modules within it.

[maparent]

I ran into an issue with conflicts in @types/react, @types/react-dom. I think those should be added.

[maparent]

@@ -36,19 +36,27 @@
   "overrides": {
     "@blueprintjs/core": {
       "react": "18.2.0",
-      "react-dom": "18.2.0"
+      "react-dom": "18.2.0",
+      "@types/react": "18.2.0",
+      "@types/react-dom": "18.2.0"
     },
     "@blueprintjs/datetime": {
       "react": "18.2.0",
-      "react-dom": "18.2.0"
+      "react-dom": "18.2.0",
+      "@types/react": "18.2.0",
+      "@types/react-dom": "18.2.0"
     },
     "@blueprintjs/select": {
       "react": "18.2.0",
-      "react-dom": "18.2.0"
+      "react-dom": "18.2.0",
+      "@types/react": "18.2.0",
+      "@types/react-dom": "18.2.0"
     },
     "roamjs-components": {
       "react": "18.2.0",
-      "react-dom": "18.2.0"
+      "react-dom": "18.2.0",
+      "@types/react": "18.2.0",
+      "@types/react-dom": "18.2.0"
     }
   }
 }

[mdroidian]

Can you go into more detail? What do you mean by "ran into conflicts"? Is this new behavior since the last time you ran npm i? Or something else?

[mdroidian]

@maparent roamjs-components version 0.85.2 removes the potential offending package.

EDIT, scratch that, 0.85.3

[mdroidian]

so i just npm i from root folder. this re-added node_modules on almost all other apps/* and packages/* but obsidian.

But I realized the build error was because of a nanoid import, so after resolving that build was successful. However, the apps/obsidian folder still doesn't have node_modules within it.

This should be fine. npm workspaces decide when to add the node_modules to root or apps/packages.