Add support for React HMR #minor

changelog.md

@@ -1,3 +1,7 @@
+### 1.2.0
+
+- **Feature**: Add support for React dev server
+
 ### 1.1.1
 
 - **BugFix**: Don't do strict boolean checking on `did_action`

src/ViteAdapter.php

@@ -196,6 +196,28 @@ public function usePreloadTagAttributes(callable|array|false $attributes): ViteA
         return $this;
     }
 
+    /**
+     * Inject required code for React to run in dev/HMR mode
+     */
+    private function reactRefresh(): array
+    {
+        if ($this->config->useReact !== true) return [];
+
+        return [sprintf(
+            <<<'HTML'
+            <script type="module" %s>
+                import RefreshRuntime from '%s';
+                RefreshRuntime.injectIntoGlobalHook(window);
+                window.$RefreshReg$ = () => {};
+                window.$RefreshSig$ = () => (type) => type;
+                window.__vite_plugin_react_preamble_installed__ = true;
+            </script>
+        HTML,
+            "",
+            $this->hotAsset('@react-refresh')
+        )];
+    }
+
     /**
      * Generate Vite tags for an entrypoint.
      */
@@ -205,8 +227,11 @@ public function generateTags(array|string $entrypoints, string $buildDirectory =
         $buildDirectory ??= $this->buildDirectory;
 
         if ($this->isRunningHot()) {
+            $reactRefresh = $this->reactRefresh();
+
             $entrypoints = ['@vite/client', ...$entrypoints];
             $entryTags = array_map(fn ($entrypoint) => $this->makeTagForChunk($entrypoint, $this->hotAsset($entrypoint), null, null), $entrypoints);
+            $entryTags = array_merge($reactRefresh, $entryTags);
             return implode("", $entryTags);
         }
 

src/ViteConfig.php

@@ -11,6 +11,7 @@ class ViteConfig
     public string $namespace;
     public bool $footer;
     public string $entryHandle;
+    public bool $useReact;
 
     public function __construct(array $configArray)
     {
@@ -21,5 +22,6 @@ public function __construct(array $configArray)
         $this->namespace = $configArray['namespace'] ?? "";
         $this->footer = $configArray['footer'] ?? false;
         $this->entryHandle = $configArray['entryHandle'] ?? "";
+        $this->useReact = $configArray['useReact'] ?? false;
     }
 }

src/WpVite.php

@@ -39,6 +39,7 @@ public function getVite(): ViteAdapter
      *     'hotFile' => (string) Filename to use for the hotfile
      *     'dependencies' => (array) List of dependencies
      *     'admin' => (bool) Only enqueue the asset on admin pages
+     *     'react' => (bool) Use the react dev server in HMR mode
      * )
      *
      * @param array $args The configuration options
@@ -73,6 +74,7 @@ public function enqueue($args = [])
             'dependencies' => $args['dependencies'] ?? [],
             'namespace' => $args['namespace'],
             'entryHandle' => $args['entryHandle'] ?? "",
+            'useReact' => $args['react'] ?? false
         ]);
 
         $hook = isset($args['admin']) && $args['admin'] === true ? 'admin_enqueue_scripts' : 'wp_enqueue_scripts';