diff --git a/console/asset-compilation-mix.md b/console/asset-compilation-mix.md index 3a57b623..fd5d11cb 100644 --- a/console/asset-compilation-mix.md +++ b/console/asset-compilation-mix.md @@ -30,7 +30,8 @@ php artisan mix:create [--tailwind] [--vue] By default, the `mix:create` command will only generate the basic `winter.mix.js` config file. If you would like Winter to pre-configure your package for a certain library / asset bundle, you can provide any of the following flags: - `--tailwind` will configure your package for [tailwindcss](https://tailwindcss.com/) -- `--vue` will configure your package for [vue.js](https://vuejs.org/) +- `--vue` will configure your package for [Vue.js](https://vuejs.org/) +- `--react` will configure your package for [React](https://react.dev/) - Other custom bundles can be [registered by third party plugins](asset-compilation#supported-toolset-bundles) For example, the following with configure the plugin `Acme.Example` with tailwind and create `plugins/acme/example/assets/src/acme-example.css` with a tailwind setup. diff --git a/console/asset-compilation-vite.md b/console/asset-compilation-vite.md index 0e3fcda0..aafaed52 100644 --- a/console/asset-compilation-vite.md +++ b/console/asset-compilation-vite.md @@ -21,7 +21,8 @@ php artisan vite:create [--tailwind] [--vue] By default, the `vite:create` command will only generate the basic `vite.config.mjs` config file. If you would like Winter to pre-configure your package for a certain library / asset bundle, you can provide any of the following flags. - `--tailwind` will configure your package for [tailwindcss](https://tailwindcss.com/) -- `--vue` will configure your package for [vue.js](https://vuejs.org/) +- `--vue` will configure your package for [Vue.js](https://vuejs.org/) +- `--react` will configure your package for [React](https://react.dev/) - Other custom bundles can be [registered by third party plugins](asset-compilation#supported-toolset-bundles) For example, the following with configure the plugin `Acme.Example` with tailwind and create `plugins/acme/example/assets/src/acme-example.css` with a tailwind setup. @@ -68,6 +69,25 @@ The helper function takes 2 arguments, the first is a `array|string` of entry pa $this->addVite(['assets/css/example.css']); ``` +### Using hot file reloading (`vite:watch`) with React + +If you want to use hot reloading with React then you'll need to also include the [React refresh tag](https://laravel.com/docs/9.x/vite#react) prior to your scripts being loaded: + +- In `twig`: + + ```twig + {{ viteReactRefresh('theme-example') }} + {{ vite(['assets/src/js/theme-example.js'], 'theme-example') }} + ``` + +- In `php`: + + ```php + \System\Classes\Vite::reactRefreshTag('theme-example'); + ``` + +>**NOTE:** If you are seeing `App.jsx:1 Uncaught (in promise) Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201 at App.jsx:1:26` in your developer console when running `artisan vite:watch packageName` then you are missing the React refresh tag listed above. + ## Commands ### Install Node dependencies