PHPackages                             ekowabaka/tico-v - 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. ekowabaka/tico-v

ActiveLibrary[Utility & Helpers](/categories/utility)

ekowabaka/tico-v
================

A simple frontend tool

v0.4.2(1y ago)0111[1 issues](https://github.com/ekowabaka/tico-v/issues)MITJavaScriptCI passing

Since Sep 15Pushed 1y ago2 watchersCompare

[ Source](https://github.com/ekowabaka/tico-v)[ Packagist](https://packagist.org/packages/ekowabaka/tico-v)[ RSS](/packages/ekowabaka-tico-v/feed)WikiDiscussions main Synced 2mo ago

READMEChangelogDependenciesVersions (12)Used By (0)

TiCo-v
======

[](#tico-v)

tiCo-v provides a lightweight solution for templating and one-way data-binding in JavaScript. Built on top of ES6 proxies, tiCo-v provides a very thin layer of code that relies exclusively on proxy traps to update DOM elements when bound objects are updated.

Installation
------------

[](#installation)

tiCo-v has no dependencies and is quite easy to install. Currently, the only supported package managers are `npm` and `composer`. If you do not use any of these, you can always download the current version of the script and use it directly as you desire.

For `npm` ...

```
npm install tico-v

```

For `composer` ...

```
composer require ekowabaka/tico-v

```

You might also consider direct inclusion as follows

```

```

Writing Templates
-----------------

[](#writing-templates)

Templates for tiCo-v are written directly into the HTML markup of your the page. Variables to be replaced by later bindings are written with the mustache/handlebars style variable placeholder (and that's where any similarities with those end). In fact, the feature set of tiCo-v is so small it call be summarised with one example.

```

        {{firstname}}
        {{lastname}}

            {{time}}
            {{update}}
            This update is {{verified?"":"not"}} verified

    There are currently no updates

```

### Text Substitutions

[](#text-substitutions)

Text substitutions are primarily performed with the `?` operator. This operator can operate in a coalescing or tenary mode, depending on the syntax. From the example, we should see that text substitutions are performed with variables specified in curly braces (e.g. `{{variable}}`). Conditional substitution can be made with the "`?`" operator, which acts as some form of truthy coalescing. So, `{{variable1 ? variable2}}` implies the value of `variable1` will be displayed if it is truthy instead of the value of `variable2`, which will displayed irrespective of its value.

Conditional substitutions can also involve literal text such as `{{truth ? "when true" : "when false"}}`. In this case, the text `when true` is substituted if the variable `truth` is truthy and `when false` is displayed when it's false. For literal substitutions, the second literal to be displayed on a false value can be omitted and it's automatically replaced with an empty string.

### Special tv attributes

[](#special-tv-attributes)

Prefixing any attribute with `tv-value-` causes that attribute to be later added with its value parsed for text substitutions. For example adding the attribute `tv-value-src='{{avater_img?"default-avatar.png"}}'` to an `img` tag will cause tiCo-v to add an `src` attribute whose value is based on the evaluation of the substitution `{{avater_img?"default-avatar.png"}}`.

You can hide and show DOM nodes using the `tv-true` and `tv-not-true` attributes. A DOM node with the `tv-true` attribute will be visible if the variable represented by the value of the attribute is truthy. Likewise, a DOM node with `tv-not-true` will be visible only when the value of the variable is false.

The `tv-foreach` attribute helps with repeating nodes.

Binding Variables
-----------------

[](#binding-variables)

To bind an object to a template such as the one above, you can use:

```
let view = tv.bind("#profile");
view.data = {
    firstname: "Kofi",
    lastname: "Manu",
    avatar: "09348534ea87e.png",
    updates: [
        {time: "2018-05-06 02:00:00 +005", update: "Something to talk about"},
        {time: "2018-05-06 02:10:00 +005", update: "Another thing to make noise about"},
    ]
}
```

And that's it!

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance44

Moderate activity, may be stable

Popularity10

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~293 days

Recently: every ~30 days

Total

9

Last Release

446d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5f1786d9e3b51cbf4cb91ad00a4d4e02cd284f5485c850d34dca9debcd893390?d=identicon)[ekowabaka](/maintainers/ekowabaka)

---

Top Contributors

[![ekowabaka](https://avatars.githubusercontent.com/u/142054?v=4)](https://github.com/ekowabaka "ekowabaka (76 commits)")

### Embed Badge

![Health badge](/badges/ekowabaka-tico-v/health.svg)

```
[![Health](https://phpackages.com/badges/ekowabaka-tico-v/health.svg)](https://phpackages.com/packages/ekowabaka-tico-v)
```

###  Alternatives

[yangm97/elementor-pro

It’s about time for a live page builder, with no limits of design. A page builder that delivers high-end page designs and advanced capabilities, never before seen on WordPress. It’s time for Elementor Page Builder.

5013.5k](/packages/yangm97-elementor-pro)[heartsentwined/zf2-cron

ZF2 cron module

606.8k](/packages/heartsentwined-zf2-cron)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)