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ě.
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/*"
]
}
}
}
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;
}
}<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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent