1. Go to this page and download the library: Download tekton/components library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
tekton / components example snippets
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');
// 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',
]);
// 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);
$compiler->setIgnoreCacheTime(true);
$manager->
// 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 '<script src="'.$cacheScripts.'"></script>';
// You can validate your combined script by comparing modification time with...
$mtime = $compiler->getLastCacheUpdate();
// Or
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);
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);
// Either set it when creating the ComponentManager
$manager = new ComponentManager($compiler, MyCustomComponent::class);
// Or after
$manager->setComponentClass(MyCustomComponent::class);
html
<template lang="php">
<div class="button">
if (true):
html
<section id="<?= $this->getId()
Loading please wait ...
Before you can download the PHP files, the dependencies should be resolved. This can take some minutes. Please be patient.