vite-plugin-php-components
v0.1.1
Published
Transpile PHP-Components to PHP calls
Downloads
515
Maintainers
donnikitosReadme
vite-plugin-php-components
A Vite plugin to transpile PHP-Components into pure PHP calls.
This plugin is intended to be used with vite-plugin-php@>=3.0.0-beta and PHP-Components
// vite.config.js
import { defineConfig } from 'vite';
import usePHP from 'vite-plugin-php';
import transpilePHPComponents from 'vite-plugin-php-components';
export default defineConfig({
plugins: [
transpilePHPComponents(), // This plugin must be defined before the vite-plugin-php call
usePHP(),
],
});What does this plugin do?
The PHP-Components package on Packagist allows you to define class based components, similar to those in React.
This plugin transpiles these HTML or React like structured components into the appropriate PHP class calls.
In the end you would have something like this in your code base:
<?/* Some *.php file */?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<layouts.Centered
label="O-la-la"
search="<?= $_GET['search']; ?>">
<a href="/">
<components.Button>
Go to home
</components.Button>
</a>
</layouts.Centered>
</body>
</html>This code will be transpiled during dev and build into code similar to this:
<?/* Some *.php file */?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<?php $c_1760322029416 = new \layouts\Centered(['label' => 'O-la-la', 'search' => $_GET['search']]); ?>
<a href="/">
<?php $c_1759963459668 = new \components\Button([]); ?>
Go to home
<?php $c_1759963459668->close(); ?>
</a>
<?php $c_1760322029416->close(); ?>
</body>
</html>Props spreading
Since version 0.0.92 you have the possibility to spread props into a component!
<components.Button
...="<?= ['type' => 'submit', 'class' => 'mx-auto']; ?>">
Noice!
</components.Button>This is especially useful if you want to pass down properties from a parent component:
<?php
namespace components;
class StyledButton extends \HTML\Component {
public function render() {
?>
<components.Button
...="<?= $this->__props__(['*', '!class']); ?>"
class="some-fancy-styling">
<?= $this->children; ?>
</components.Button>
<?php
}
}Configuration
This plugin automatically checks if you have installed PHP-Components via Packagist.
⚠️ If not: it will throw an error and stop the dev server/ build process.
You can disable this check:
transpilePHPComponents({
skipLibCheck: true,
});Support
Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.
| via Ko-Fi | Buy me a coffee | via PayPal |
| --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 
| | |