Support @vitejs/plugin-react

I'm happy to give this a go but have a couple of questions about how to approach it:

1. What method would you suggest for injecting the script? There's no current opportunity to print to the DOM from within the Vite or AssetLibrary classes as far as I can see.
2. How would you like configuration to be handled? Perhaps a new key in the vite: section of a library? Perhaps "support-plugin-react"?

It would be nice to implement this in a general way to allow for including potential similar scripts for other frameworks.
Maybe we could add a concept of devDependencies to the vite section of library definition. It could allow providing a list of other libraries like in the default 'dependencies' section, but they would be attached only when running in the vite development mode.
Then for this specific use case, in this module we could define a vite/plugin-react-refresh library that includes the script. Then in a theme/module where vite-plugin-react is used, in the library definition this library could be added to the devDependencies:

react-block:
  vite:
    enabled: true
    devDependencies:
    - vite/plugin-react-refresh
  js:
    ...

The plugin-react-refresh script will also need the current vite dev server url. Since it can be different for every theme/module passing it through drupalSettings won't really work because the script won't know which url to use. Maybe we could pass it to all devDependecies through data-vite-dev-server-url attribute then in scripts it could be fetched by accessing attributes of document.currentScript.

Does the library have to be loaded by Drupal? I have unocss devtools included in my main.js.

I am new to working with manifest.json files and browser js modules. Is it possible to declare dependencies in there?

#4: @mortona2k I reckon anything in JS will be loaded fine. The problem with @vitejs/plugin-react is it alters index.html and that isn't used when you're embedding a React app in a Drupal page.

#3: Thanks @wotnak, that approach sounds good to me. I'll see if I can find some time to give it a go on the weekend. What element would you attach data-vite-dev-server to? Would that have to be documented as a responsibility of the end user dev?

I'm also wrestling with this problem at the moment. I'd really like a way for the Vite module to be able to load a library when in dev mode so that I can add the needed preamble for @vitejs/plugin-react.

@darvanen have you had any further thoughts about how to do it?

I've got this working and added a MR so you can review. This basically does as @wotnak suggested, it adds a devDependencies option under the vite key. These library entries are then added as dependencies of the vite controlled library. It also adds the dev server url as a data attribute to those dev dependencies so that it can be fetched and used as suggested.

An example mymodule.libraries.yml file showing a deep file path for the dev server url:

reactapp.devmode:
  js:
    js/viteDevMode.js: {}

reactapp:
  vite:
    manifest: app/dist/.vite/manifest.json
    baseUrl: '/profiles/myprofile/modules/mymodule/modules/mydeepermodule/app/dist/'
    devServerUrl: 'http://host.docker.internal:5173/profiles/myprofile/modules/mymodule/modules/mydeepermodule/app'
    devDependencies:
      - mymodule/reactapp.devmode
  js:
    src/main.tsx: {}
  dependencies:
    - core/drupal
    - core/drupalSettings
    - locale/translations

The contents of js/viteDevMode.js:

const thisScript = document.currentScript;
const devServerUrl = thisScript.dataset.viteDevServer;

import(`${devServerUrl}/@react-refresh`)
  .then((RefreshRuntime) => {
    const injectIntoGlobalHook = RefreshRuntime.default.injectIntoGlobalHook;
    console.log(injectIntoGlobalHook);
    injectIntoGlobalHook(window);
    window.$RefreshReg$ = () => {};
    window.$RefreashSig$ = () => (type) => type;
    window.__vite_plugin_react_preamble_installed__ = true;
  })
  .catch(() => {
    console.log('Could not load RefreshRuntime from the vite dev server');
  });

Was also working on getting HMR working with a React app, and ran into the same issue. The functionality in the MR work well for me. @tanc the only thing I'd suggest adding is some documentation in the readme about the new devDependencies option so that people are aware of it.

Thanks @brianperry. Feel free to contribute some docs, hopefully it's fresher in your mind as you've recently done the steps so you may be better placed to write something. Even just an outline and I can help fill in the details.

Changing to needs work as it is missing documentation of the new devDependencies option.

I've added the requested documentation and marked as needs review.

Sorry I wasn't able to get to this myself, but the readme updates look good to me @tanc

No problem! Thanks for reviewing

+1 RTBC

We installed the patch, followed the readme and were up and running in no time! Thanks for the great work on this

Removing out of date tag

I've made a small fix (newline at end of readme) and merged the current HEAD and the tests are passing. It's showing as failed due to not finding artifacts to upload but it might be because the issue fork was creating before the gitlab ci fix was introduced?

Anyway, in theory it should all be fine. Any chance of wrapping this up or does it need more work?

The phpunit version in the composer.json file is conflicting with the pipeline. I'd say that's not relevant to this issue.

Released in 1.3.0 → .

Automatically closed - issue fixed for 2 weeks with no activity.