PHPackages tekton/components - 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. [Utility & Helpers](/categories/utility) 4. / 5. tekton/components AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) tekton/components ================= A component system that can either work together with gulp-single-file-components or compile files on its own. 2.3.1(7y ago)0461MITPHPPHP >=7.0.0 Since Jun 18Pushed 7y ago1 watchersCompare [ Source](https://github.com/tekton-php/components)[ Packagist](https://packagist.org/packages/tekton/components)[ Docs](https://github.com/tekton-php/components)[ RSS](/packages/tekton-components/feed)WikiDiscussions master Synced 4d ago READMEChangelog (5)Dependencies (2)Versions (9)Used By (1) Tekton Components ================= [](#tekton-components) This is a PHP component library that is purposefully built modularly so that it can be easily integrated into various frameworks. Installation ------------ [](#installation) ``` composer require tekton/components ``` ### JS compiler [](#js-compiler) If you wish to compile components as part of your build process and are using a Node.js build environment you can configure [gulp-single-file-components](github.com/nsrosenqvist/gulp-single-file-components) to do this for you. Unfortunately that project is not actively maintained anymore due to the functionality being integrated into Tekton Components instead. Usage ----- [](#usage) ### Registering components [](#registering-components) The ComponentManager and ComponentCompiler can be used separately and configured to compile files in advance and load from cache, or you can configure a compiler for the ComponentManager to use automatically if a single file component file (SCF) is registered. By default the project includes filter and tag classes that can emulate the functionality of the [Vue.js component system](https://vuejs.org/v2/guide/single-file-components.html). ``` use Tekton\Components\ComponentManager; use Tekton\Components\ComponentCompiler; $cacheDir = __DIR__.'/cache'; $compiler = new ComponentCompiler($cacheDir); $compiler->registerTags('template', new TemplateTag); $compiler->registerTags('style', new StyleTag); $compiler->registerTags('script', new ScriptTag); $manager = new ComponentManager($compiler); $manager->register('button.vue'); ``` Other ways the register method accepts arguments are as follows: ``` // Register by list of components where keys are the name to register $manager->register([ 'button' => [ 'template' => 'cache/button.html', 'style' => 'cache/button.css', 'script' => 'cache/button.js', ] // ... ]); // If non-associative array is passed then it must be component files and not // array of resources. The second argument can optionally be set to specify // the base directory so that components in sub-dirs don't create naming conflicts $manager->register([ 'button.vue', // will be named "button" 'contact/button.vue' // will be named "contact.button" // ... ], __DIR__); // Register by name and component instance $manager->register('button', new Component(['template' => 'cache/button.html'])); // Register by component path and optional base path $manager->register('components/button.vue', 'components/'); // Register component by name and resources array $manager->register('button', [ 'template' => 'cache/button.html', 'style' => 'cache/button.css', 'script' => 'cache/button.js', ]); ``` You can retrieve all the components that have been compiled by the compiler in an associative array with names and resources, or if you have a directory with pre-compiled components, created externally, you can process the directory contents by matching file extensions to a map: ``` // From the compiler $components = $compiler->getComponentMap(); // Or $components = $manager->find('cache/', [ 'template' => ['html', 'php'], // Priority goes from end to beginning 'scripts' => 'js', 'style' => 'css', ]); // Passing (bool) true as the third argument registers them directly $manager->register($components); ``` If you for example only want to test for file changes in a development environment and in production want to avoid stating files and instead simply clear the cache on every release, you can set the compiler to ignore file modification time when validating the cache and so only compiles files if they haven't been compiled before. ``` $compiler->setIgnoreCacheTime(true); ``` ### Using components [](#using-components) To include a component into the page you simply call. ``` $manager->include('button'); ``` **button.vue** ``` Button $myColor: #00ff00; .button { color: $myColor; } alert('component included') ``` Doing so simply renders the template and CSS and JS need to be handled separately in your templates due to the many different ways frameworks handle assets. ``` // Combine all script files and only make one http request $cacheScripts = $cacheDir.'/components.js'; if (! file_exists($cacheScripts)) { $files = $manager->resources('script'); $combined = concat_files($files); file_put_contents($cacheScripts, $combined); } echo ''; // You can validate your combined script by comparing modification time with... $mtime = $compiler->getLastCacheUpdate(); // Or include every file separately per request and only load those that have // been included in the page foreach ($manager->includedResources('script') as $name => $script) { echo ''; } ``` ### Filters [](#filters) Filters run on the registered tags upon compilation and can use the tag attributes to determine if they are supposed to run or not (e.g. lang="scss" on the style tag). They are configured to run either pre or post the tag processes the tag content. To enable SCSS compilation for the style tag you can do this: ``` use Tekton\Components\ComponentManager; use Tekton\Components\ComponentCompiler; use Tekton\Components\Filters\ScssFilter; $styleTag = (new StyleTag)->addPostFilter(new ScssFilter); $cacheDir = __DIR__.'/cache'; $compiler = new ComponentCompiler($cacheDir); $compiler->registerTags('style', $styleTag); $manager = new ComponentManager($compiler); ``` ### Scope [](#scope) To prevent styles and scripts from clashing you can either implement your own scope filters or use the ones included. The StyleScope prefixes all the CSS rules with ".component-button" and the TemplateScope wraps the template in an element and adds the component id and "component-button" class. From within a template `$this` is always set to the component instance so you can easily access the index, name and id even if you don't use the TemplateScope filter. ``` use Tekton\Components\ComponentManager; use Tekton\Components\ComponentCompiler; use Tekton\Components\Tags\StyleTag; use Tekton\Components\Tags\ScriptTag; use Tekton\Components\Tags\TemplateTag; use Tekton\Components\Filters\StyleScope; use Tekton\Components\Filters\ScriptScope; use Tekton\Components\Filters\TemplateScope; $cacheDir = __DIR__.DS.'cache'; $compiler = new ComponentCompiler($cacheDir); $compiler->registerTags('template', (new TemplateTag)->addPostFilter(new TemplateScope)); $compiler->registerTags('style', (new StyleTag)->addPostFilter(new StyleScope)); $compiler->registerTags('script', (new ScriptTag)->addPostFilter(new ScriptScope)); $manager = new ComponentManager($compiler); ``` The template scope supports [Emmet-like](https://docs.emmet.io/) syntax (`div#myId.myclass[rel=myAttr]`) to configure the automatically created container element. It only allows container, id, class and attributes. Any of these can be excluded but they must be in that order. Multiple classes and attributes are allowed. ``` ``` Would result in... ```