{"id":15896228,"url":"https://github.com/kucrut/vite-for-wp","last_synced_at":"2025-05-15T03:03:13.527Z","repository":{"id":57660477,"uuid":"524206476","full_name":"kucrut/vite-for-wp","owner":"kucrut","description":"Vite integration for WordPress plugins and themes development.","archived":false,"fork":false,"pushed_at":"2025-04-23T11:49:28.000Z","size":968,"stargazers_count":287,"open_issues_count":14,"forks_count":33,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-13T23:51:15.851Z","etag":null,"topics":["vite","wordpress"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kucrut.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-12T19:44:25.000Z","updated_at":"2025-05-05T17:52:14.000Z","dependencies_parsed_at":"2023-10-15T11:58:43.652Z","dependency_job_id":"0e6cd767-8a31-4fd7-8d3c-b3ae13adb088","html_url":"https://github.com/kucrut/vite-for-wp","commit_stats":{"total_commits":298,"total_committers":7,"mean_commits":42.57142857142857,"dds":0.09395973154362414,"last_synced_commit":"df5a0a7f8aae1eed2d03a3fa4d33f5b6a5fb484a"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kucrut%2Fvite-for-wp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kucrut%2Fvite-for-wp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kucrut%2Fvite-for-wp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kucrut%2Fvite-for-wp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kucrut","download_url":"https://codeload.github.com/kucrut/vite-for-wp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264737,"owners_count":22041791,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vite","wordpress"],"created_at":"2024-10-06T09:07:03.455Z","updated_at":"2025-05-15T03:03:13.484Z","avatar_url":"https://github.com/kucrut.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite for WordPress\n\n[Vite](https://vitejs.dev) integration for WordPress plugins and themes development.\n\n## Usage\n\nLet's assume we have this plugin files structure:\n\n```\nmy-plugin/\n├ js/\n| └ src/\n|   └ main.ts\n├ package.json\n├ plugin.php\n└ vite.config.js\n```\n\n### JavaScript\n\nAdd JS dependencies:\n\n```sh\nnpm add -D vite @kucrut/vite-for-wp\n```\n\nCreate `vite.config.js`:\n\n```js\nimport { v4wp } from '@kucrut/vite-for-wp';\n\nexport default {\n\tplugins: [\n\t\tv4wp( {\n\t\t\tinput: 'js/src/main.ts', // Optional, defaults to 'src/main.js'.\n\t\t\toutDir: 'js/dist', // Optional, defaults to 'dist'.\n\t\t} ),\n\t],\n};\n```\n\nFor multiple entrypoints, pass an object as the first parameter:\n\n```js\n// vite.config.js\nimport { v4wp } from '@kucrut/vite-for-wp';\n\nexport default {\n\tplugins: [\n\t\tv4wp( {\n\t\t\tinput: {\n\t\t\t\tmain: 'js/src/main.ts',\n\t\t\t\textra: 'js/src/extra.ts',\n\t\t\t},\n\t\t\toutDir: 'js/dist',\n\t\t} ),\n\t],\n};\n```\n\nRefer to Rollup documentation on how to set entrypoints: https://rollupjs.org/configuration-options/#input\n\nFeel free to [customise the configuration](https://vitejs.dev/config/) to add plugins, use https, etc:\n\n```js\n// vite.config.js\nimport { readFileSync } from 'node:fs';\nimport { v4wp } from '@kucrut/vite-for-wp';\nimport react from '@vitejs/plugin-react';\n\nexport default {\n\tplugins: [ v4wp( { input: 'js/src/main.ts', outDir: 'js/dist' } ), react() ],\n\tserver: {\n\t\thost: 'mydomain.com',\n\t\thttps: {\n\t\t\tcert: readFileSync( 'path/to/cert.pem' ),\n\t\t\tkey: readFileSync( 'path/to/key.pem' ),\n\t\t},\n\t},\n};\n```\n\nLastly, add `dev` and `build` scripts to your `package.json`:\n\n```json\n{\n\t\"scripts\": {\n\t\t\"build\": \"vite build\",\n\t\t\"dev\": \"vite\"\n\t}\n}\n```\n\n### PHP\n\nAdd the composer dependency:\n\n```sh\ncomposer require kucrut/vite-for-wp\n```\n\nIf your plugin/theme doesn't use composer, feel free to copy [the main file](https://github.com/kucrut/vite-for-wp/blob/main/vite-for-wp.php) and require it.\n\nEnqueue the script:\n\n```php\n\u003c?php\n\nuse Kucrut\\Vite;\n\nadd_action( 'wp_enqueue_scripts', function (): void {\n\tVite\\enqueue_asset(\n\t\t__DIR__ . '/js/dist',\n\t\t'js/src/main.ts',\n\t\t[\n\t\t\t'handle' =\u003e 'my-script-handle',\n\t\t\t'dependencies' =\u003e [ 'wp-components', 'some-registered-script-handle' ], // Optional script dependencies. Defaults to empty array.\n\t\t\t'css-dependencies' =\u003e [ 'wp-components', 'some-registered-style-handle' ], // Optional style dependencies. Defaults to empty array.\n\t\t\t'css-media' =\u003e 'all', // Optional.\n\t\t\t'css-only' =\u003e false, // Optional. Set to true to only load style assets in production mode.\n\t\t\t'in-footer' =\u003e true, // Optional. Defaults to false.\n\t\t]\n\t);\n} );\n```\n\nNote that each entrypoint needs to be enqueued separately, ie. if you have multiple entrypoints, you'll need to call `Vite\\enqueue_asset()` for each and every one of them.\n\nTo only register the asset, use `Vite\\register_asset()`. It accepts same parameters as `Vite\\enqueue_asset()` and returns an array of scripts and styles handles that you can enqueue later using `wp_enqueue_script()` and `wp_enqueue_style()`. Please note that style assets are only registered in production mode because in development mode, they will be automatically loaded by Vite.\n\nYou can now run `npm run dev` when developing your plugin/theme and run `npm run build` to build the production assets.\n\n## Notes\n\n### External Dependencies\n\nIf your package depends on one or more scripts registered by WordPress (eg. `jquery`, `react`, `@wordpress/i18n`, etc.) and you want to exclude them from the final build, add `wp_scripts()` to the list of Vite's plugins. But first, install the required dependencies:\n\n```sh\nnpm add -D rollup-plugin-external-globals vite-plugin-external\n```\n\nFor example, to externalise `react` and `react-dom` packages:\n\n```js\n// vite.config.js\nimport { v4wp } from '@kucrut/vite-for-wp';\nimport { wp_scripts } from '@kucrut/vite-for-wp/plugins';\nimport react from '@vitejs/plugin-react';\n\nexport default {\n\tplugins: [\n\t\tv4wp( {\n\t\t\tinput: 'js/src/main.jsx',\n\t\t\toutDir: 'js/dist',\n\t\t} ),\n\t\twp_scripts(),\n\t\treact(),\n\t],\n};\n```\n\n**Special Notes for React**\n\n-   `react` and `react-dom` packages still need to be installed as your package's dev dependencies as they're used by `@vitejs/plugin-react`.\n-   `react` and `react-dom` should be added to the `dependencies` array when enqueueing the script (see example above).\n\n## Example plugins\n\n-   React: https://github.com/kucrut/vite-for-wp-example-react\n-   Svelte: https://github.com/kucrut/vite-for-wp-example-svelte\n-   Vanilla JS: https://github.com/kucrut/vite-for-wp-example-vanilla-js\n-   Vue: https://github.com/kucrut/vite-for-wp-example-vue\n\n## Limitations\n\nCurrently, this package doesn't provide HMR support for building editor blocks yet.\n\n## License\n\n[GPL v2](https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkucrut%2Fvite-for-wp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkucrut%2Fvite-for-wp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkucrut%2Fvite-for-wp/lists"}