[addon webloader] Extras/webloader

Tohle je trochu long-shot, ale zkusils přidat složku s php5ts.dll do PATH?

@**enumag**: To mám :)

Řešením je, toto přidat do apache konfigurace, alespon mě to funguje.

<IfModule mpm_winnt_module>
  ThreadStackSize 8388608
</IfModule>

Libi se mi zpusob pouziti jaky je uvedeny na githubu pomoci extension: https://github.com/…ek/WebLoader

Nemuzu ale prijit na to, jak pouzit filtry pro less a minify pres config stejne jak je tam wlCssFilter, muzete nekdo poradit?

A dalsi otazka, co je lepsi/cistejsi zpusob? Vytvorit si compiler v configu a pak se na nej jen odkazat v tovarnicce na komponentu, nebo vse definovat v tovarnicce (viz 1. priklad na githubu)?

Predem diky za rady.

Takze config by pak mohl vypadat takto?

services:
   wlCssFilter: WebLoader\Filter\CssUrlsFilter(%wwwDir%)
   cssMinFilter: CssMinFilter
   lessFilter: LessFilter

webloader:
    css:
        default:
            files:
                - style.css
                - {files: ["*.css", "*.less"], from: %appDir%/presenters} # Nette\Utils\Finder support
            filters:
                - @wlCssFilter
                - @cssMinFilter
                - @lessFilter

A webloader se postara sam o predani $code do filtru?

Edit: jeste me napada, neni zbytecne vytvaret service kdyz ten filtr nikde nez v CSS loaderu nepouziju? Neslo by to i takto?:

filters:
    - @wlCssFilter #nazev service
    - CssMinFilter #nazev tridy
    - LessFilter #nazev tridy

Edit 2: Tak uz mi to frci :) prvni ukazka v tomhle prispevku funguje, druha ne, protoze jsem prisel na to ze tridy se musi instancovat a ne volat staticky.

Editoval Lexi (8. 2. 2013 15:22)

Zajímavý dotaz. Určitě jednoduše použít inject nejde, protože webloader extension vytváří více služeb, které mají stejnou třídu. Takže nefunguje autowiring. Pokud jde do presenteru bez úpravy presenter factory procpat služba bez autowiringu, tak by se šlo obejít bez contextu, ale mám obavu že to nejde.

Zkusil jsem nastavit webloader dle https://github.com/…ek/WebLoader#… do master verze nette. Bohužel při zavolání $this->context->webloader u továrničky createComponentCss mi nette vyhodí

Nette\DI\MissingServiceException
Service 'webloader' not found.

Přitom v systemcontaineru nějaké služby jsou:

webloader.cssAdminCompiler no WebLoader\Compiler
webloader.cssAdminFiles no WebLoader\FileCollection
webloader.cssFrontCompiler no WebLoader\Compiler
webloader.cssFrontFiles no WebLoader\FileCollection
webloader.cssNamingConvention no WebLoader\DefaultOutputNamingConvention
webloader.jsAdminCompiler no WebLoader\Compiler
webloader.jsAdminFiles no WebLoader\FileCollection
webloader.jsFrontCompiler no WebLoader\Compiler
webloader.jsFrontFiles no WebLoader\FileCollection
webloader.jsNamingConvention no WebLoader\DefaultOutputNamingConvention
wlCssFilter yes WebLoader\Filter\CssUrlsFilter

Nene, v bootstrapu to mám, tedy doufám že je to ve správném pořadí:

$configurator->addConfig(__DIR__ . '/config/config.neon');

$configurator->onCompile[] = function ($configurator, $compiler) {
			$compiler->addExtension('dibi', new DibiNetteExtension);
		};

//Webloader
$webloaderExtension = new \WebLoader\Nette\Extension();
$webloaderExtension->install($configurator);

$container = $configurator->createContainer();

Ono to i nějaké ty service vytvoří, ale nevím jestli bych to v tom basePresenteru neměl zapsat nějak jinak:

	protected function createComponentCss() {
		return new \WebLoader\Nette\CssLoader(
				$this->context->webloader->cssFrontCompiler, // service generated by extension
				$this->template->basePath . '/webtemp'
		);
	}

protože to zdechá na tom $this->context->webloader

uf, zrušený accessory? proč zas?

media zadaná přes šablonu
Kdysi se tu objevila varianta s možností zápisu
{control css ‚web/screen.css‘=>‚screen,projection,tv‘, ‚web/print.css‘=>‚print‘}
Myslím, že to nebyl špatný nápad a docela by se to hodilo … už to je pasé, nebo je nějaká varianta podobného zápisu?

JN

Vyřešené to není. Dá se jedině buď po změně smazat vygenerované css soubory nebo místo lessového importu načítat více less souborů přímo webloaderem.

Co se týče případné úpravy WebLoaderu, nejjednodušší by bylo přidat volbu pro generování css souboru při každém requestu, která by mohla být na devu zaplá.

Ahoj, potřeboval bych poradit, jak použít wl v kompoentě. Moje představa je taková, že mám komponentu v samostatném adresáři, v ní je adresář public a v něm js, css apod.

V šabloně komponenty bych pak chtěl použít např {control js 'public/nejakyscript.js'}

Mám zprovozněný webloader jako extension, konstruktorem si ho předám do komponenty kde budu mít továrničku například.:

public function createComponentJs() {
	// return $this->webloader->
}

Netuším ale co by měla vrátit, případně jak teď v té továrničce přidám ještě vlastní js soubory.
Případně jak používáte wl v komponentách vy? Všude se tu píše jen o presenterech nebo jsem našel továrny, kde vytvoří JavaScriptLoader, ale nikde jsem neviděl použití v komponentě.

Díky.

Asi bych to mohl použít jak popisuješ, ale spousta css a js se budou tahat naprosto zbytečně. Mám CMS se spoustou komponent a většina z nich má vlastní scripty, případně css.
Na webu, kde se CMS použije je ale použita třeba jen jedna z 30-ti komponent, tedy je naprosto zbytečné tahat ostatní soubory.
A nechci definovat u každého webu zvlášť css,js soubory, které má webloader zpracovávat. Přijde mi čistší nadefinovat továrničky komponent v neonu a o nějaké css,js se vůbec nestarat.

Ve WebLoaderu jsou dva typy filtrů – filters a fileFilters. FileFilters se volají na každý soubor zvlášť. CssUrlsFilter je tedy potřeba registrovat jako fileFilter.

Zdravím,

díky za supr komponentu. Teď jsem narazil na takový problém a nemůžu přijít na to jak to vyřešit.

Mám soubory:

app\FrontModule\less\first.less

@import "../../theme"

p {
	...
}

app\AdminModule\less\second.less

@import "../../theme"

h1 {
	...
}

app\theme.less

@import "../libs/twitter/bootstrap/less/bootsrap"

.hero-unit {
	...
}

libs\twitter\bootstrap\less\bootstrap.less

Co chci udělat je, že v theme.less naimportuju Bootstrap a přepíšu nějaké hodnoty. V souborech first.less a second.less pak chci importovat theme.less a používat proměnné z něj. Jenže narážím na problém. Pokud to takhle zapíšu a v configu dám, že chci kompilovat first.less a second.less, tak mi to zkompiluje bootstrap dvakrát. Což u takhle velké knihovny bolí.

Jak tohle řešíte vy?

Ahoj,
zkoušel někdo tento dobře vypadající addon na dev Nette?
Podle composer.json vyžaduje stabilní verzi 2.0.* a to podle packagist i pro dev verzi webloaderu.
Případně plánujete podporu i pro Nette 2.1.*?

Zdravim, chtel bych pouzivat nezkompilovane .less soubory TB, tak abych v mem screen.less mohl pouzivat mixins a classy z bootstrapu, nejak takhle:

@import 'bootstrap/bootstrap.less';
.someObject {
	.pull-right;
	.text-center;
	.well;
}

Nejak se mi ale nedari. Jaky pro toto pouzivate postup vy? Mam kompilovat vsechny soubory less, nebo pouze screen.less?

Pouzivam adresarovou strukturu:

CSS/screen.less
CSS/bootstrap/bootstrap.less
CSS/bootstrap/xxx.less

Webloader mam v bootstrap.php zaregistrovany jako extension

	webloader:
		css:
			default:
				remoteFiles:
					- 'xxx'
				files:
					- {files: ["*.css", "*.less"], exclude: "*print*", from: %wwwDir%/css}
				filters:
					- @wlCssFilter
				fileFilters:
					- @lessFilter

Zkousel jsem u files menit „from“ na „in“ aby finder neprochazel rekurzivne vsechny slozky, ale pouze screen.less

Tovarnicka:

	// $this->webloader = $this->context->webloader;
	public function createComponentCss(){
		return new \WebLoader\Nette\CssLoader(
			$this->webloader->cssDefaultCompiler,
			$this->template->basePath . '/webtemp'
		);
	}

Predem diky za vase rady jak na to.

Editoval Lexi (15. 7. 2013 12:58)

Nikdo nevi jak na ten TB s less? :)

Dobrý den,
mohl bych se prosím vás zeptat, jestli je nějak možné používat filtry jenom pro určité soubory?

Díky Honzo. Prosím tě, nemohl by jsi mi napsat přesněji, jak se používá ten fileFilter? Já vůbec netuším jaký třetí argument, když u normálního filtru používám jenom jeden. Zkoušel jsem to neúspěšně třeba takto:

public function createComponentCss()
{
	$files = new \WebLoader\FileCollection(__DIR__ . '/../../www/css');
	$files->addFiles(array(
		'bootstrap.min.css',
 		'lightview.css',
		'screen.css'
	));

	$compiler = \WebLoader\Compiler::createCssCompiler($files, __DIR__ . '/../../www/webtemp');

	$compiler->addFileFilter(array('lightview.css', 'screen.css'), function ($code) {
     		return cssmin::minify($code);
	});

	return new \WebLoader\Nette\CssLoader($compiler, $this->template->basePath . '/webtemp');
	$control->setMedia('screen');

	return $control;
}

Díky moc, funguje bezvadně.

@martinit: Vyrobil jsem si model \Model\Webloader (nevím zda se neblížím moc nějakému Service Locatoru, ale spravuje mi Front i Back a mohu mu přidat i jiné srandy) a vytvářím ho pomocí továrniček a má předané z Neonu závislosti:

Neon:

	frontWebloader:
		implement: Model\IFrontWebloader
		setup:
			- setCssCompiler(@webloader.cssFrontCompiler)
			- setJsCompiler(@webloader.jsFrontCompiler)

	backWebloader:
		implement: Model\IBackWebloader
		setup:
			- setCssCompiler(@webloader.cssBackCompiler)
			- setJsCompiler(@webloader.jsBackCompiler)

Webloader:

<?php

namespace Model;

use WebLoader\Nette\CssLoader;
use WebLoader\Nette\JavaScriptLoader;

class Webloader extends \Nette\Object
{
    private $jsCompiler;
    private $cssCompiler;

    public function setJsCompiler($jsCompiler){
        $this->jsCompiler = $jsCompiler;
    }

    public function setCssCompiler($cssCompiler){
        $this->cssCompiler = $cssCompiler;
    }

    public function getCss($path)
    {
        return new CssLoader($this->cssCompiler, $path);
    }

    public function getJs($path)
    {
        return new JavaScriptLoader($this->jsCompiler, $path);
    }
}

interface IFrontWebloader
{
    /** @return \Model\Webloader */
    function create();
}

interface IBackWebloader
{
    /** @return \Model\Webloader */
    function create();
}

:)
Je to Good practice || Bad practice?

@martinit:
Ach jo, ale já měl dojem, že to tak přesně mám. Mohu použít i 6 webloaderu nebo 10 a vše definuju jen v neonu a předávam přez jediný objekt, který si továrničkou vyrobím $webloader->create();.

Tohle mam jen v Presentru a dalo by se to definovat i podle modulu, tak aby se psaní ještě více zkrátilo.

Namespace by se mohl menovat /** @var Webloader\Nette\Instances */ ale injecotval by se pomoci Interface

Edit: toto je příklad jen pro Front to samé stačí použít i pro Backend či další stov… podobných, a možná si je pak můžeš i doplňovat, možná by stálo za úvahu vyhodit i ten self::WEBTEMP a přenechat ho objektu, který jsi pojmenoval Webloader\Nette\Instances a já ho pojmenovávám Model\Webloader

Front\DefaultPresenter:

	public function injectWebloader(\Model\IFrontWebloader $webloader)
	{
		$this->webloader = $webloader->create();
	}

	/**
	 * @return \WebLoader\Nette\CssLoader
	 */
	protected function createComponentCss()
	{
		return $this->webloader->getCss($this->template->basePath . '/' . self::WEBTEMP);
	}

	/**
	 * @return \WebLoader\Nette\JavaScriptLoader
	 */
	protected function createComponentJs()
	{
		return $this->webloader->getJs($this->template->basePath . '/' . self::WEBTEMP);
	}

a v neonu mam toto:

factories:
	frontWebloader:
		implement: Model\IFrontWebloader
		setup:
			- addCssCompiler(@webloader.cssFrontCompiler)
			- addJsCompiler(@webloader.jsFrontCompiler)

	backWebloader:
		implement: Model\IBackWebloader
		setup:
			- addCssCompiler(@webloader.cssBackCompiler)
			- addJsCompiler(@webloader.jsBackCompiler)

webloader:
	css:
		back:
			remoteFiles:
				- %assets.bootstrap-css%
				- %assets.jquery-ui-smoothness%
			files:
				- back.css
		front:
			remoteFiles:
				- %assets.bootstrap-css%
				- %assets.jquery-ui-smoothness%
			files:
				- front.css
	js:
		back:
			remoteFiles:
				- %assets.jquery%
				- %assets.jquery-ui%
				- %assets.bootstrap-js%
			files:
				- %assets.netteforms%
				- %wwwDir%/js/nette.ajax.js/nette.ajax.js
				- %wwwDir%/js/nette.ajax.js/working.ajax.js
				- %wwwDir%/js/nette.ajax.js/confirm.ajax.js
				- %wwwDir%/js/back.js
		front:
			remoteFiles:
				- %assets.jquery%
			files:
				- %assets.netteforms%

Editoval jenicek (14. 11. 2013 12:47)

romiix.org: Asi ano, jen je to skoro totéž ne? Stejně v layoutu napíšu {control css} {control js} a nic víc.

Edit: na ten doplněk Header mrknu vypadá dost zajímavě.

Editoval jenicek (14. 11. 2013 12:53)

romiix.org: Aha tak to pardón. :)

@**jenicek**: No to já právě nevim :) Zas tak dobře na tom s php nejsu. Nechce se mi šahat na $this->context, ale zároven nehci psát pro každou instanci interface.