{"id":15043285,"url":"https://github.com/brandonkramer/vite-php","last_synced_at":"2026-01-13T23:45:22.444Z","repository":{"id":178315095,"uuid":"661131315","full_name":"brandonkramer/vite-php","owner":"brandonkramer","description":"A collection of back-end/PHP utilities for WordPress development with ViteJS.","archived":true,"fork":false,"pushed_at":"2024-12-17T22:27:48.000Z","size":7021,"stargazers_count":9,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T21:35:02.999Z","etag":null,"topics":["composer","composer-package","php","vite","vitejs","wordpress"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandonkramer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2023-07-01T22:19:47.000Z","updated_at":"2024-12-17T22:28:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"bbc20f89-eb67-4f6a-ba9b-68caee9ea4e5","html_url":"https://github.com/brandonkramer/vite-php","commit_stats":null,"previous_names":["wp-strap/vite-php","brandonkramer/vite-php"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/brandonkramer/vite-php","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonkramer%2Fvite-php","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonkramer%2Fvite-php/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonkramer%2Fvite-php/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonkramer%2Fvite-php/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonkramer","download_url":"https://codeload.github.com/brandonkramer/vite-php/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonkramer%2Fvite-php/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28405294,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["composer","composer-package","php","vite","vitejs","wordpress"],"created_at":"2024-09-24T20:48:48.387Z","updated_at":"2026-01-13T23:45:22.423Z","avatar_url":"https://github.com/brandonkramer.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"Project has been taken to: https://github.com/mrOttoW/vite-wordpress-php\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://vitejs.dev/\"\u003e\n    \u003cimg width=\"200\" height=\"200\" hspace=\"10\" src=\"https://vitejs.dev/logo.svg\" alt=\"vite logo\" /\u003e\n  \u003c/a\u003e\n  \u003ch1\u003eVite PHP\u003c/h1\u003e\n  \u003cp\u003e\nA library of back-end/PHP utilities for WordPress development with ViteJS.\n\nYou can read more about ViteJS on [vitejs.dev](https://vitejs.dev)\n\u003c/p\u003e\n\u003c/div\u003e\n\n## Usages\n\nInstall dependency into your project.\n```\ncomposer require wp-strap/vite\n```\n\nThis exposes some classes which are responsible for generating asset URLs from Vite's manifest.json that you can register or enqueue. It's also responsible for enabling HMR when the ViteJS dev server is running.\n\nThis package is made for:\n- https://github.com/wp-strap/wp-vite-starter \n- https://github.com/wp-strap/vite\n\nBut can be used with any ViteJS setups.\n\nThe classes follow PSR practices with interfaces, so it can be included trough OOP with dependency injection and IoC containers. It also provides a Facade class that allows you to use static methods instead to call the methods everywhere you like.\n\n\n\nExample with using the facade:\n```php\nuse WPStrap\\Vite\\Assets;\n\n// Resolves instance and registers project configurations\nAssets::register([\n    'dir' =\u003e plugin_dir_path(__FILE__), // or get_stylesheet_directory() for themes\n    'url' =\u003e plugins_url(\\basename(__DIR__)) // or get_stylesheet_directory_uri() for themes\n    'version' =\u003e '1.0.2', // Set a global version (optional)\n    'deps' =\u003e [ 'scripts' =\u003e [], 'styles' =\u003e [] ]  // Set global dependencies (optional)\n]);\n\n// Listens to ViteJS dev server and makes adjustment to make HMR work\nAssets::devServer()-\u003estart();\n\n// returns: https://your-site.com/wp-content/plugins/your-plugin/build/js/main.oi4h32d.js\nAssets::get('js/main.js') \n\n// Alternatively you can use these as well which will be more targeted to specific folders\n// and for some of the methods you don't need to write the file extension\nAssets::js('main') \nAssets::css('main') \nAssets::image('bird-on-black.jpg') \nAssets::svg('instagram') \nAssets::font('SourceSerif4Variable-Italic.ttf.woff2')\n\n// Example of enqueuing the scripts\nadd_action('wp_enqueue_scripts', function () {\n\n    // You can enqueue \u0026 register the tradtional way using global data\n    wp_enqueue_script('my-handle', Assets::js('main'), Assets::deps('scripts'), Assets::version());\n    wp_enqueue_style('my-handle', Assets::css('main'), Assets::deps('styles'), Assets::version());\n    \n    // Or use a more simple method that includes the global deps \u0026 version\n    Assets::enqueueStyle('my-handle', 'main');\n    \n    // Which also comes with some handy chained methods\n    Assets::enqueueScript('my-handle', 'main', ['another-dep'])\n        -\u003euseAsync()\n        -\u003euseAttribute('key', 'value')\n        -\u003elocalize('object_name', ['data' =\u003e 'data'])\n        -\u003eappendInline('\u003cscript\u003econsole.log(\"hello\");\u003c/script\u003e');\n});\n```\n\nExample with using instances\n```php\nuse WPStrap\\Vite\\Assets;\nuse WPStrap\\Vite\\AssetsService;\nuse WPStrap\\Vite\\DevServer;\n\n// Instantiates the Asset service and registers project configurations\n$assets = new AssetsService();\n$assets-\u003eregister([\n    'dir' =\u003e plugin_dir_path(__FILE__), // or get_stylesheet_directory() for themes\n    'url' =\u003e plugins_url(\\basename(__DIR__)) // or get_stylesheet_directory_uri() for themes\n]);\n\n// Listens to ViteJS dev server and makes adjustment to make HMR work\n(new DevServer($assets))-\u003estart();\n\n$assets-\u003eget('js/main.js'); \n$assets-\u003ejs('main') \n$assets-\u003ecss('main') \n$assets-\u003eimage('bird-on-black.jpg') \n$assets-\u003esvg('instagram') \n$assets-\u003efont('SourceSerif4Variable-Italic.ttf.woff2')\n\n// Traditional \nwp_enqueue_script('my-handle', $this-\u003eassets-\u003ejs('main'), $this-\u003eassets-\u003edeps('scripts'), $this-\u003eassets-\u003eversion());\nwp_enqueue_style('my-handle', $this-\u003eassets-\u003ecss('main'), $this-\u003eassets-\u003edeps('styles'), $this-\u003eassets-\u003eversion());\n\n// Custom methods\n$this-\u003eassets-\u003eenqueueStyle('my-handle', 'main');\n$this-\u003eassets-\u003eenqueueScript('my-handle', 'main', ['another-dep'])\n    -\u003euseAsync()\n    -\u003euseAttribute('key', 'value')\n    -\u003elocalize('object_name', ['data' =\u003e 'data'])\n    -\u003eappendInline('\u003cscript\u003econsole.log(\"hello\");\u003c/script\u003e');\n\n// You can also use the facade based on this instance.\nAssets::setFacade($assets);\nAssets::get('css/main.css');\n```\n\nExample with using instances wih functions\n```php\nuse WPStrap\\Vite\\AssetsInterface;\nuse WPStrap\\Vite\\AssetsService;\nuse WPStrap\\Vite\\DevServer;\n\nfunction assets(): AssetsInterface {\n     static $assets;\n     \n     if(!isset($assets)) {\n        $assets = (new AssetsService())-\u003eregister([\n            'dir' =\u003e plugin_dir_path(__FILE__), \n            'url' =\u003e plugins_url(\\basename(__DIR__)),\n            'version' =\u003e '1.0.0'\n        ]);\n     }\n     \n     return $assets;\n}\n\n(new DevServer(assets()))-\u003estart();\n\n\nadd_action('wp_enqueue_scripts', function () {\n\n    // Traditional\n    wp_enqueue_script('my-handle', assets()-\u003ejs('main'), assets()-\u003edeps('scripts'), assets()-\u003eversion());\n    wp_enqueue_style('my-handle', assets()-\u003ecss('main'), assets()-\u003edeps('styles'), assets()-\u003eversion());\n    \n    // Using custom methods\n    assets()-\u003eenqueueStyle('my-handle', 'main');\n    assets()-\u003eenqueueScript('my-handle', ['Main', 'main'], ['another-dep'])\n        -\u003euseAsync()\n        -\u003euseAttribute('key', 'value')\n        -\u003elocalize('object_name', ['data' =\u003e 'data'])\n        -\u003eappendInline('\u003cscript\u003econsole.log(\"hello\");\u003c/script\u003e');\n});\n```\n\nExample with using the League Container\n```php\nuse League\\Container\\Container;\nuse WPStrap\\Vite\\Assets;\nuse WPStrap\\Vite\\AssetsInterface;\nuse WPStrap\\Vite\\AssetsService;\nuse WPStrap\\Vite\\DevServer;\nuse WPStrap\\Vite\\DevServerInterface;\n\n$container = new Container();\n$container-\u003eadd(AssetsInterface::class)-\u003esetConcrete(AssetsService::class)-\u003eaddMethodCall('register', [\n    'dir' =\u003e plugin_dir_path(__FILE__), \n    'url' =\u003e plugins_url(\\basename(__DIR__)) \n]);\n$container-\u003eadd(DevServerInterface::class)-\u003esetConcrete(DevServer::class)-\u003eaddArgument(AssetsInterface::class);\n\n$assets = $container-\u003eget(AssetsInterface::class);\n$devServer = $container-\u003eget(DevServerInterface::class);\n\n$devServer-\u003estart();\n\n$assets-\u003eget('main/main.css');\n\n// You can also set a PSR container as a facade accessor\nAssets::setFacadeAccessor($container);\nAssets::get('main/main.css')\n```\n\n### DevServer\n\n`Assets::devServer()-\u003estart(3000');` OR `(new DevServer($assets))-\u003estart('3000');`\n\nThe dev server class is responsible for listening to the ViteJS dev server using CURL, checking if it's running locally on port 3000 which you can adjust using the optional param from the start() method as seen above.\n\nIf it can validate the dev server is running, it will inject viteJS scripts provided from the dev server, filter all asset urls and load source files instead (from the assets::get(), assets:css(), assets::js() etc. methods),\nand alter the script tags to make sure the source files can be loaded as modules for HMR.\n\n**This should only be run on local/dev environments.** As it's using CURL on each request, so you don't want to run this on production.\n\n### Project Example\n\nYou can find more info and a project example here: https://github.com/wp-strap/wp-vite-starter\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonkramer%2Fvite-php","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonkramer%2Fvite-php","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonkramer%2Fvite-php/lists"}