Download the PHP package tekton/components without Composer
On this page you can find all versions of the php package tekton/components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download tekton/components
More information about tekton/components
Files in tekton/components
Package components
Short Description A component system that can either work together with gulp-single-file-components or compile files on its own.
License MIT
Homepage https://github.com/tekton-php/components
Informations about the package 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
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 to do this for you. Unfortunately that project is not actively maintained anymore due to the functionality being integrated into Tekton Components instead.
Usage
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.
Other ways the register method accepts arguments are as follows:
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:
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.
Using components
To include a component into the page you simply call.
button.vue
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.
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:
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.
The template scope supports Emmet-like 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...
To make sure that the scripts only run once per component, or if all are compiled into one file, you want some way to control so that the component script is only executed upon inclusion. The ScriptScope filter has some extra helper methods for this. These must run after all components have been included, so either in head if you're using a template system that parses templates from the bottom up or in the footer of the body.
Now the contents of the script tag will be executed only when it's included and once per component. When it's executed this
is set to the wrapper element for the component. Name, selector (class) and id are also passed along to enable you to only process the current instance of the component if multiple ones have been included.
You can also set the attribute "singleton" on the script tag to make sure that the script is only executed once, no matter how many components are included.
Custom Renderers
In order to integrate the rendering of the component into different templating systems you will most likely need to extend the Component class (implement ComponentInterface) and change the class the ComponentManager uses to instance Components automatically.
License
MIT