search

timlrx / rehype-prism-plus

rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers
MIT License
177 stars 19 forks source link

How to test this plugin locally? #1

Closed Music47ell closed 3 years ago

Music47ell commented 3 years ago

I'm trying to test this plugin locally but I'm getting an error.

Current Behavior

node_modules/esbuild/lib/main.js:869:33: error: [plugin: esbuild-xdm] Cannot read property 'start' of undefined
    869 │               let result = await callback2({
        ╵                                  ^
node_modules/esbuild/lib/main.js:736:22: note: This error came from the "onLoad" callback registered here
    736 │         let promise = setup({
        ╵                       ^

Steps to Reproduce

  1. Fork the repo
  2. Run npm run build
  3. Run npm link
  4. Go to a project where you wanna use this plugin. (e.g. timlrx/tailwind-nextjs-starter-blog)
  5. Run npm link rehype-prism-plus
  6. Run npm run dev
  7. Visit any blog post and you will get the error mentioned above.

Context

I wanna see if I can implement a new feature to this plugin. The one inside the mdx-bundler branch of timlrx/tailwind-nextjs-starter-blog works fine. But as soon as I switch to the local build, I get the error.

timlrx commented 3 years ago

I actually have not tried developing it that way with npm link. When building you might need to remove "type":"module" from package.json. This was causing quite a bit of problem as next js does not support esm.

Music47ell commented 3 years ago

Thank you. That did work.

How do you develop it? Maybe your way is easier than my way.

timlrx commented 3 years ago

I just test it with rehype, but that's because I know the input and output of the unified pipeline. Might try out your method next time for a more visual development process.

Music47ell commented 3 years ago

Using my method, I get to see all the changes on the blog right away. All you need to do is run npm run build after every change you make to the plugin.

timlrx commented 3 years ago

You can set the build to watch mode to automatically build on change I believe. Will try it your way the next time!

Music47ell commented 3 years ago

I just added --watch to the build command and it worked. Thanks.