vite-wp-react

@wpsocio/vite-wp-react

Set of tools to develop WordPress plugins and themes using React and Vite. It can be used along with WPSocio\WPUtils\ViteWPReactAssets from wpsocio/wp-utils composer package.

Installation

npm install --save-dev @wpsocio/vite-wp-react

yarn add --dev @wpsocio/vite-wp-react

pnpm add -D @wpsocio/vite-wp-react

Usage

// vite.config.ts
import { createViteConfig } from "@wpsocio/vite-wp-react/config";
import { defineConfig } from "vite";

export default defineConfig(
  createViteConfig({
    input: {
      settings: "js/settings/index.tsx",
      "block-editor": "js/block-editor/index.tsx",
    },
    outDir: "src/assets/build",
    makePot: {
      output: "src/languages/js-translations.pot",
    },
  })
);

Or use the vite plugin:

// vite.config.ts
import viteWpReact from "@wpsocio/vite-wp-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    viteWpReact(
      {
        input: {
          settings: "js/settings/index.tsx",
          "block-editor": "js/block-editor/index.tsx",
        },
        outDir: "src/assets/build",
        assetsDir: "dist",
      },
      {
        extractWpDependencies: true,
        externalizeWpPackages: true,
        enableReact: true,
        makePot: {
          output: "src/languages/js-translations.pot",
        },
      }
    ),
  ],
});

You can also use the plugins separately.