Documentation: We need better docs for how to debug changes locally for this library

[joncodo]

Problem: I want to make changes to this library and use them in my application.

Steps to reproduce:

1. Fork and clone Lexical to a folder called lexical-npm-library
2. cd lexical-npm-library
3. Then make a new react app called 'web-app`
4. Then make changes to the code in lexical. Change all instances of Export DOM to Export Foo for the UI button
5. See the changes reflected in the application

Actual: You don't see the changes

Things I have tried:

1. Use npm link

• npm link in the packages/lexical directory
• npm link lexical in the web-app
  NOTE: this works for updating the core but I want to update the react module.

Question: How are your internal devs debugging module development locally so I can contribute to this repo?

Thanks in advance!

[joncodo]

Here are some comments that might be useful from other tickets:

[joncodo]

After further debugging, I hit this error:

npm link @lexical/playground
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@lexical%2fplayground - Not found
npm ERR! 404
npm ERR! 404  '@lexical/playground@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /Users/jon/.npm/_logs/2024-02-07T20_59_34_510Z-debug-0.log

[joncodo]

I think the main process is to run npm link in all folders in the ./poackages directory. Then run all the npm link @lexical/markdown etc from the app 'that consumes lexical.

help here would be greatly appreciated :)

[joncodo]

Here is another example of someone struggling with the same thing

[joncodo]

So I had to solve this in the end with symlinks

Here is how I did it. I used a sample repo from https://codesandbox.io/p/sandbox/vigilant-kate-5tncvy?file=%2Fpackage.json as a consuming application. To do this, I had to cp public/images src/images so the project would compile with npm start

Then I cloned lexical to a parent directory

Then you need to run npm run build and make sure you have a dist folder in the lexical-clone/packages/lexical-markdown/

Then I added the symlinks to the consuming application:

ln -s ../../../lexical/packages/lexical-html html;
ln -s ../../../lexical/packages/lexical-markdown markdown;
ln -s ../../../lexical/packages/lexical-playground playground;
ln -s ../../../lexical/packages/lexical-table table;
ln -s ../../../lexical/packages/lexical-yjs yjs;
ln -s ../../../lexical/packages/lexical-clipboard clipboard;
ln -s ../../../lexical/packages/lexical-hashtag hashtag;
ln -s ../../../lexical/packages/lexical-link link;
ln -s ../../../lexical/packages/lexical-offset offset;
ln -s ../../../lexical/packages/lexical-react react;
ln -s ../../../lexical/packages/lexical-text text;
ln -s ../../../lexical/packages/lexical-code code;
ln -s ../../../lexical/packages/lexical-headless headless;
ln -s ../../../lexical/packages/lexical-list list;
ln -s ../../../lexical/packages/lexical-overview overview;
ln -s ../../../lexical/packages/lexical-rich-text rich-text;
ln -s ../../../lexical/packages/lexical-utils utils;
ln -s ../../../lexical/packages/lexical-dragon dragon;
ln -s ../../../lexical/packages/lexical-history history;
ln -s ../../../lexical/packages/lexical-mark mark;
ln -s ../../../lexical/packages/lexical-plain-text plain-text;
ln -s ../../../lexical/packages/lexical-selection selection;
ln -s ../../../lexical/packages/lexical-website website;

HERE IS THE TRICK: Then you have to add a symlink to the lexical-clone/packages/lexical-react

Cd packages/lexical-react
Mkdir node_modules/@lexical
Cd node_modules/@lexical
ln -s ../../dist/ react

This fakes a node_modules scoped package in lexical-react. This is needed if you want to compile and run all the sub modules so you can develop on a project like lexical-react.

If anyone has a better solution, I would love to hear it!