wp-blocks / vite-block

Vite Block is an experimental WordPress block development repository that explores the usage of Vite as a replacement for webpack, leveraging its advantages in ES module (ESM) support, faster build times, and efficient development workflows.

Vite Block for Wordpress

Vite Block is an experimental WordPress block development repository that explores the usage of Vite as a replacement for webpack, leveraging its advantages in ES module (ESM) support, faster build times, and efficient development workflows.

Installation

To get started, clone this repository and navigate to the project directory.

git clone https://github.com/your-username/vite-block.git
cd vite-block

Install the dependencies using npm:

npm install

Scripts

• npm run packages-update: Update WordPress packages using wp-scripts.
• npm start: Build the project with TypeScript and Vite, watching for changes.
• npm run build: Build the project with TypeScript and Vite.
• npm run dev: Run the development server with Vite.
• npm run lint: Lint the project using ESLint.
• npm run wp-env:start: Start the WordPress development environment.
• npm run wp-env:stop: Stop the WordPress development environment.
• npm run wp-env:destroy: Destroy the WordPress development environment.
• npm run plugin-zip: Package the plugin for distribution.

DevDependencies

• @types/node: TypeScript definitions for Node.js.
• @types/react and @types/react-dom: TypeScript definitions for React.
• @types/wordpress__block-editor and @types/wordpress__blocks: TypeScript definitions for WordPress block editor and blocks.
• @typescript-eslint/eslint-plugin and @typescript-eslint/parser: ESLint plugin and parser for TypeScript.
• @vitejs/plugin-react: Vite plugin for React.
• @wordpress/block-editor and @wordpress/blocks: WordPress block editor and blocks packages.
• eslint, eslint-plugin-react-hooks, eslint-plugin-react-refresh: ESLint and plugins for React linting.
• sass: Sass compiler.
• terser: JavaScript minifier.
• typescript: TypeScript compiler.
• vite: Vite bundler for faster development.
• vitest: Test runner for Vite.

Development Workflow

1. Run npm start to start the development server.
2. Develop your WordPress blocks using Vite's fast development environment.
3. Test and lint your code using npm run dev and npm run lint.
4. Package your plugin for distribution using npm run plugin-zip.

Contributing

Feel free to contribute to this experimental project by opening issues, suggesting enhancements, or submitting pull requests. Your feedback and contributions are highly appreciated.

License

This project is licensed under the GPL-2.0-or-later license. See the LICENSE.md file for details.

Thank you for checking out Vite Block! Happy coding!

<script type="module" src="http://localhost:5173/@vite/client"></script> <script type="module" src="http://localhost:5173/main.js"></script>`

and this has to be appended before the above scripts <script type="module"> import RefreshRuntime from 'http://localhost:5173/@react-refresh' RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.__vite_plugin_react_preamble_installed__ = true </script> -->

vite-block's Issues

entry points are automatically collected from block.json files

Hot Module Replacement integration should work

https://vitejs.dev/guide/why.html#why-vite

users can provide their own config overrides

NPM Dependency Resolving and Pre-Bundling
Hot Module Replacement
TypeScript
CSS
PostCSS
CSS Modules
CSS Pre-processors
Lightning CSS
WebAssembly
Build Optimizations
CSS Code Splitting
Preload Directives Generation
Async Chunk Loading Optimizations

Replace webpack by maintaining the functionality that is currently present

From a conversation this morning on slack with @gziolo where he was telling me that actually wp-scripts does (also) this:

• #2
  • image
  • fonts handling
• #4
  • CSS processing, including PostCSS, SASS, CSS modules,
  • Minification
• #8
• #9
• #5
• #6

Some things are already there but I keep it as a checklist of the main features

ref. https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/webpack.config.js

Dependencies and modules

as replacement for this

https://github.com/WordPress/gutenberg/tree/d8ef7d615049afa5c6903530c8099ca7b69073c7/packages/dependency-extraction-webpack-plugin

Copy files

We need a plugin to copy the files (**.*.php and block.json) from the src folder to the dist folder.

Below the fragment of code used for webpack in wp-script about copy php files (the root is the src directory)

https://github.com/WordPress/gutenberg/blob/e079d899a584b104370dc8f0347200b4e9d6b330/packages/scripts/config/webpack.config.js#L363C1-L375C7

i18n

• JS minification needs to ensure that i18n helpers get preserved

  mangle: {
    reserved: ['_n','_x','_nx','__','_e'],
  },

• if possibile generate the pot file (js and php)
  we are workin on https://github.com/wp-blocks/makePot (cc @johnhooks)