PHPackages velt/ui - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. velt/ui ActiveLibrary[Framework](/categories/framework) velt/ui ======= Declarative UI components and renderers for the Velt framework. v0.0.2(3w ago)04↑2900%4[2 issues](https://github.com/Velt-PHP/velt-ui/issues)MITPHPPHP ^8.2 Since May 25Pushed yesterdayCompare [ Source](https://github.com/Velt-PHP/velt-ui)[ Packagist](https://packagist.org/packages/velt/ui)[ RSS](/packages/velt-ui/feed)WikiDiscussions main Synced today READMEChangelog (2)Dependencies (4)Versions (3)Used By (0) Sous-module 04 - UI Rendering ============================= [](#sous-module-04---ui-rendering) Documentation complete : [docs/README.md](docs/README.md) Integration kernel : [docs/KERNEL\_INTEGRATION.md](docs/KERNEL_INTEGRATION.md) Connexion locale faite avec le kernel : [docs/KERNEL\_CONNECTION\_DONE.md](docs/KERNEL_CONNECTION_DONE.md) Issue a creer cote kernel : [docs/ISSUE\_KERNEL\_UI\_CONNECTION.md](docs/ISSUE_KERNEL_UI_CONNECTION.md) Guide de contribution : [CONTRIBUTING.md](CONTRIBUTING.md) Politique de securite : [SECURITY.md](SECURITY.md) Mission ------- [](#mission) Ce sous-module est le coeur distinctif de Velt. Il fournit la syntaxe declarative officielle en PHP, construit un arbre UI en memoire, puis le rend soit en HTML pour le Web, soit en JSON pour la preview mobile. Apres audit, UI doit expliciter ses contrats internes. `Page::make()` est une tres bonne base, mais le moteur doit definir `ComponentInterface`, `RendererInterface` et une strategie de serialisation stable pour eviter que WebRenderer, JsonRenderer et Preview deviennent couples a des details internes. Perimetre --------- [](#perimetre) Inclus : - `Page` - composants `Text`, `Button`, `Card`, `Form`, `Input`, `Link`, `Alert` - `ComponentInterface` - `RendererInterface` - `ViewInterface` ou contrat equivalent pour les pages chargees ; - props chainables ; - rendu HTML MVP ; - rendu JSON MVP ; - schema JSON versionne ; - escaping HTML obligatoire ; - tests snapshot simples. Exclus : - compilation type React/Svelte ; - Tailwind runtime ; - etat interactif avance ; - hot reload. Comment tester sans HTTP ou Preview ----------------------------------- [](#comment-tester-sans-http-ou-preview) UI doit etre testable comme une bibliotheque pure. - Une page est instanciee directement en PHP et comparee avec `toArray()`. - Le HTML est teste par snapshots ou assertions DOM simples, sans lancer de serveur HTTP. - Le JSON preview est teste avec `json_decode()` et assertions sur `screen`, `schemaVersion` et `components`. - `ViewFactory` charge des fichiers `.velt.php` depuis un dossier temporaire. - CSRF ne doit pas generer un vrai token dans UI. UI marque seulement l'intention `csrf: true`; HTTP/session transforme cette intention en champ reel. - Les composants echappent les textes et attributs dangereux dans le renderer HTML. L'integration avec `Velt/http` est testee plus tard par le sous-module 07. UI ne doit pas dependre de `Request` ou `Response`. Mapping HTML MVP ---------------- [](#mapping-html-mvp) `WebRenderer` transforme une `Page` en document HTML complet par defaut, ou en fragment avec `render($page, ['document' => false])`. ComposantHTML rendu`Page```, ``, ``, metas, ```Card````Text```, ``, ``, etc. selon `as()``Alert````Form````Input``` + ```Button````Link```Les textes et attributs sont echappes avec `htmlspecialchars`. Les classes CSS declarees via `class()` sont rendues telles quelles apres escaping. `meta.title` devient `` et les autres metas scalaires deviennent des balises ``. `Form::csrf()` marque seulement l'intention CSRF. Sans contrat HTTP/session fourni au renderer, aucun champ `_token` n'est genere afin d'eviter un faux token silencieux. Quand l'integration HTTP est disponible, elle peut etre deleguee au constructeur : ``` $renderer = new WebRenderer( fn (array $form): string => '' ); ``` Schema JSON Preview ------------------- [](#schema-json-preview) `JsonRenderer` produit le contrat public consomme par Preview. Ce format ne contient pas de HTML et reste separe de l'arbre interne retourne par `Page::toArray()`. ``` { "schemaVersion": 1, "screen": "Connexion", "layout": "auth", "meta": { "title": "Connexion - Velt App" }, "components": [] } ``` Vocabulaire commun UI et Preview : - `schemaVersion` : version du contrat JSON preview. - `screen` : nom de l'ecran, derive du titre de la page. - `layout` : intention de layout declaree par la page. - `meta` : donnees descriptives de la page. - `components` : arbre de composants serialise. - `props` : intentions logiques du composant, par exemple `class`, `variant`, `type`, `required`, `csrf`, `showIf`. - `children` : composants enfants. Intentions importantes : - `class` est conserve comme intention de style et rendu en HTML apres escaping. - `variant` est conserve comme intention logique ; Velt UI ne decide pas du design final. - `type` est conserve comme intention de comportement pour `Button` et `Input`. - `required` est conserve comme intention de validation et rendu en attribut HTML. - `csrf` est conserve comme intention de securite ; Velt UI ne genere pas de faux token. - `showIf` est conserve comme intention logique et n'est pas evalue dans le Module 1. Les composants MVP sont serialises avec des types stables pour Preview : `Card`, `Text`, `Alert`, `Form`, `Input`, `Button`, `Link`. Chargement des vues ------------------- [](#chargement-des-vues) `ViewFactory` charge des fichiers declaratifs `.velt.php` depuis une racine configurable. Le nom logique `auth.login` pointe vers `auth/login.velt.php`. ``` use Velt\Ui\View\ViewFactory; $views = new ViewFactory(__DIR__ . '/resources/views'); $page = $views->make('auth.login'); ``` Un fichier de vue doit retourner une instance de `Velt\Ui\Page`. Les noms contenant des segments dangereux comme `../` sont refuses et une vue absente leve `ViewNotFoundException`. Contrats publics ---------------- [](#contrats-publics) Les contrats du Module 1 sont volontairement courts : - `ComponentInterface` expose type, props, contenu, enfants et serialisation interne. - `ViewInterface` decrit une page declarative serialisable. - `RendererInterface` definit `render(Page $page, array $options = []): string`. Les renderers utilisent ces contrats et les methodes publiques. Les details internes des classes concretes restent hors contrat. Cache UI Module 1 ----------------- [](#cache-ui-module-1) Le Module 1 ne compile pas les vues et n'ajoute pas de cache complexe. La direction retenue est de rendre cacheables trois niveaux plus tard : - page chargee depuis `.velt.php` ; - arbre serialise interne ; - sorties rendues, HTML ou JSON preview. Invalidations simples prevues : - fichier `.velt.php` modifie : invalider la page chargee, l'arbre et les rendus ; - debug mode : preferer une lecture directe sans cache persistant ; - production mode : autoriser un cache explicite avec invalidation par date de modification ou cle de version. Sujets reportes hors Module 1 : hydration, hot reload, build assets, compilation avancee, analyse statique des templates et cache distribue. Issues ------ [](#issues) - [Issue 01 - Creer Page et composants UI](issues/01-creer-page-composants-ui.md) - [Issue 02 - Implementer WebRenderer HTML](issues/02-implementer-web-renderer-html.md) - [Issue 03 - Implementer JsonRenderer preview](issues/03-implementer-json-renderer-preview.md) - [Issue 04 - Ajouter ViewFactory et chargement des pages Velt](issues/04-ajouter-viewfactory-chargement-pages-velt.md) - [Issue 05 - Definir contrats Component Renderer View](issues/05-definir-contrats-component-renderer-view.md) - [Issue 06 - Cadrer cache compilation et schema UI](issues/06-cadrer-cache-compilation-schema-ui.md) Exemple officiel (Issue 01) --------------------------- [](#exemple-officiel-issue-01) ``` use Velt\Ui\Page; use Velt\Ui\Components\Card; use Velt\Ui\Components\Text; use Velt\Ui\Components\Button; use Velt\Ui\Components\Form; use Velt\Ui\Components\Input; $page = Page::make('Connexion') ->layout('auth') ->meta(['title' => 'Connexion - Velt App']) ->add( Card::make()->class('p-8')->add( Text::make('Connexion')->as('h1') )->add( Form::make() ->method('POST') ->action('/login') ->csrf() ->add( Input::make('email', 'Email') ->type('email') ->required() ->placeholder('Entrez votre email') )->add( Input::make('password', 'Mot de passe') ->type('password') ->required() ->placeholder('Entrez votre mot de passe') )->add( Button::make('Se connecter') ->type('submit') ->variant('primary') ->class('w-full') ) ) ); // Sérialiser en tableau $data = $page->toArray(); // Sérialiser en JSON $json = $page->toJson(); ``` ### Health Score 39 — LowBetter than 85% of packages Maintenance98 Actively maintained with recent releases Popularity7 Limited adoption so far Community11 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 60% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 25d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/233258904?v=4)[Kaluba sierra](/maintainers/skylore300-hash)[@skylore300-hash](https://github.com/skylore300-hash) --- Top Contributors [![2MJ-DEV](https://avatars.githubusercontent.com/u/146131402?v=4)](https://github.com/2MJ-DEV "2MJ-DEV (6 commits)")[![KeranTyrinthe](https://avatars.githubusercontent.com/u/177726053?v=4)](https://github.com/KeranTyrinthe "KeranTyrinthe (3 commits)")[![skylore300-hash](https://avatars.githubusercontent.com/u/233258904?v=4)](https://github.com/skylore300-hash "skylore300-hash (1 commits)") ### Code Quality TestsPHPUnit Static AnalysisPHPStan Code StylePHP CS Fixer Type Coverage Yes ### Embed Badge ![Health badge](/badges/velt-ui/health.svg) ``` [![Health](https://phpackages.com/badges/velt-ui/health.svg)](https://phpackages.com/packages/velt-ui) ``` ### Alternatives [laravel/socialite Laravel wrapper around OAuth 1 & OAuth 2 libraries. 5.7k104.3M828](/packages/laravel-socialite)[laravel/dusk Laravel Dusk provides simple end-to-end testing and browser automation. 1.9k38.6M289](/packages/laravel-dusk)[pinguo/php-msf Pinguo Micro Service Framework For PHP 1.7k4.2k](/packages/pinguo-php-msf)[nineinchnick/edatatables Grid widget for the Yii Framework, wrapper for the DataTables jQuery plugin 173.2k](/packages/nineinchnick-edatatables)[link-cloud/fast-hyperf LinkCloud Fast Hyperf 241.2k1](/packages/link-cloud-fast-hyperf) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)