frosty22 / composer-components
Extending Composer for support install components in Nette.
Installs: 26
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
pkg:composer/frosty22/composer-components
Requires
- php: >= 5.3.0
- nette/nette: 2.*
This package is not auto-updated.
Last update: 2025-10-21 07:28:42 UTC
README
Podpora instalace komponent - JS, CSS a obrázků pomocí composeru. Princip je triviální - komponenta je závislá na generovaném souboru composer.lock, který vždy projde při změně a podívá se po definici extra.component viz příklad níže (syntaxe je inspirovaná komplexnějším systémem Bower, pouze ho velice zjednodušuje a funguje jako triviální náhrada).
Všechny soubory komponent zkopíruje do definované složky (defaultně www/components). Dále definované soubory CSS, JS lze přes nette komponentu ComposerComponents/Control/Control vygenerovat v HTML šabloně.
Příklad rozšíření v composer
Podstatná je pouze ta část extra.component, zde je možné definovat základní složku src. Dále je zde možné definovat JavaScript soubory v scripts, poté CSS soubory vně styles, a dále související soubory, například obrázkyve files.
{
"name": "frosty22/xxx",
"type": "library",
"require": {
"php": ">= 5.3.0",
"nette/nette": "2.*"
},
"autoload": {
"psr-0": {
"XXX" : "src/"
}
},
"extra": {
"component" : {
"src" : "src/",
"scripts" : [
"js/test1.js",
"js/test2.js"
],
"styles" : [
"css/test1.css",
"css/test2.css"
],
"files" : [
"img/*"
]
}
}
}
Příklad definice komponenty
class BasePresenter extends Nette\UI\Presenter { /** @var \ComposerComponents\Control\Control $componentsControl */ protected $componentsControl; /** @param \ComposerComponents\Control\Control $componentsControl */ public function injectComponentsControl(\ComposerComponents\Control\Control $componentsControl) { $this->componentsControl = $componentsControl; } /** @return \ComposerComponents\Control\Control */ protected function createComponentComponents($name) { return $this->componentsControl; } }
Příklad v šabloně
<html> <head> {control components} </head> <body> ... </body> </html>
Vykreslí podle příkladu výše:
<html> <head> <link rel="stylesheet" type="text/css" href="/components/test1.css?1380013683" /> <link rel="stylesheet" type="text/css" href="/components/test2.css?1380013683" /> <script type="text/javascript" src="/components/test1.js?1380013683"></script> <script type="text/javascript" src="/components/test2.js?1380013683"></script> </head> <body> ... </body> </html>
Vykreslení odděleně
<html> <head> {control components:css} </head> <body> ... {control components:js} </body> </html>