PHPackages earc/dom-resource-update-engine - 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. earc/dom-resource-update-engine ActiveLibrary[Utility & Helpers](/categories/utility) earc/dom-resource-update-engine =============================== Simple yet powerful resource update engine 0.0(6y ago)083MITJavaScript Since Apr 28Pushed 5y ago1 watchersCompare [ Source](https://github.com/Koudela/eArc-dom-resource-update-engine)[ Packagist](https://packagist.org/packages/earc/dom-resource-update-engine)[ RSS](/packages/earc-dom-resource-update-engine/feed)WikiDiscussions master Synced 6d ago READMEChangelog (1)DependenciesVersions (3)Used By (0) eArc-dom-resource-update-engine =============================== [](#earc-dom-resource-update-engine) Lightweight dependency free dom update engine fo the [earc framework](https://github.com/Koudela/eArc-core). Fetching or updating server side resources on user input is a common task. Updating the dom on fetching resources as well. As parts of your app get entangled in the javascript the server side loses the single source of truth. Now one must know both to understand the app, the client and the server side of the app. Some may try to pull the whole truth to the client side and build one-page apps driven by restfull interfaces. This package empowers you to go the other way round. It gives a client side html-data-attribute based interface to you. If you use this interface well, you can write complex dynamic apps without writing a single line of javascript code. Table of contents ----------------- [](#table-of-contents) - [Install](#install) - [Bootstrap](#bootstrap) - [Configure](#configure) - [Basic usage](#basic-usage) - [The data update id](#the-data-update-id) - [The data update events](#the-data-update-events) - [The data update resources](#the-data-update-resources) - [The update directive](#the-update-directive) - [Fetching attributes](#fetching-attributes) - [Advanced usage](#advanced-usage) - [Releases](#releases) - [Release 0.0](#release-00) Install ------- [](#install) ``` $ composer require earc/router ``` Bootstrap: ---------- [](#bootstrap) Register the file `vendor/earc/dom-resource-update-engine/src/dom-resource-update-engine.js`in your asset pipeline or copy/link it to your web directory and import it in your web-page. ``` ``` Call at the last line of your pages body the `init()` function of the `domResourceUpdateEngine`. ``` // ... domResourceUpdateEngine.init(); ``` You are ready to go. Configuration ------------- [](#configuration) Most of the time you don't need to configure this package. The other cases are discussed in the [TODO](#) section. Basic usage ----------- [](#basic-usage) The dom resource update engine is based on three html-data-attributes: 1. `data-update-id` 2. `data-update-events` 3. `data-update-resources` and one json based directive ***update-directive***. The `data-update-id` provides the element identifiers for the engine. The `data-update-events` bind javascript events to pre-defined and user-defined engine actions. The `data-update-resources` attribute binds actions to resource calls. The ***update-directive*** uses the element identifiers and the pre-defined engine actions to update the dom. ### The data update id [](#the-data-update-id) The value of the `data-update-id` attribute is the identifier of the html element. You can name it whatever you like. ### The data update events [](#the-data-update-events) The syntax of the `data-update-events` attribute is a json object, containing javascript event types as property names. For example `click` or `submit` are valid property names. The properties hold objects with `data-update-ids` as property names. The values are arrays of action names. The syntax translates to an event-listener attached to the current element for every event type. If an event triggers the listener it runs the actions on the element with the corresponding `data-update-id`. You can use the `~` as abbreviated id for the current element. ``` click me! ... to run an user defined action on me. ``` Hints: 1. Please note the json notation only accepts double quotes. 2. The eventlisters are attached as soon as `init()` is called or after their html-fragment is added to the dom. ### The data update resources [](#the-data-update-resources) `data-update-resources` are json objects as well. The property names are urls that will be called. The values are arrays naming the actions that triggers the url call. There are two actions that have a special meaning for the `data-update-resources`notation. 1. `load` triggers one call as soon as the event-listeners are attached. 2. If `submit` is run on a form element the forms' data is send using the method of the form. ``` // ... submit it! ``` Hints: 1. The javascript `load` *event* does **not** trigger the `load` *action*. Neither does the `load` *action* trigger the `load` *event*. 2. The javascript `submit` *event* does **not** trigger the `submit` *action*. Neither does the `submit` *action* trigger the `submit` *event*. 3. If you listen to the `submit` *event* `preventDefault()` is called upon it, preventing the form from being submitted regularly. The update directive -------------------- [](#the-update-directive) The server called by the data update resource has a response. The response has to be a json object. The parameter names are `data-upload-ids`. The values are objects with parameter names referencing on of the following pre-defined actions: - `replace`: Replaces the element by the value interpreted as html. - `update`: Replaces the children of the element by the value interpreted as html. - `delete`: Deletes the element. - `beforebegin`: Inserts the value interpreted as html before the element. - `afterbegin`: Inserts the value interpreted as html before the first child. - `beforeend`: Inserts the value interpreted as html after the last child. - `afterend`: Inserts the value interpreted as html after the element. ``` { "data-update-id-of-the-elment": { "update": "This divs will replace the children..."}] ``` There are two special elements that are bound to one special action: ``` { "console": { "log": "This string will be printed to the console."}, "error": { "throw": "An error will be thrown. This is its message."}, "an-element": { "replace": "an-element will not be replaced as the error kills the script" } } ``` Fetching attributes ------------------- [](#fetching-attributes) To be able to send data without forms `data-update-resources` can fetch attributes. Use the hash `#` to replace an url segment with an attribute of the same element followed by the attributes name. To fetch the content of the attribute of another element prefix the hash with the elements' html id additionally. ``` ... ``` Hints: 1. The url part replaced by the attributes content has to start and end with a slash or has to be the last part of an url starting with a slash. 2. If the attribute is empty or does not exist the part of the url is replaced by the *string* `null`. TODO Advanced usage documentation: ---------------------------------- [](#todo-advanced-usage-documentation) UPDATE-DIRECTIVE: { "Tmpl:Instance::ID|~": { action: "\[HTML\]"|<|>}, ... } data-update-events="{ click: { "Tmpl:Instance:ID"|~ : \[action1, action2, ...\]|\*, ...}, ...}" data-update-filter="\[action1, action2\]" data-update-id="Tmpl:Instance::ID" data-update-resources="{ "URL"|"URL/elm-id#attrName/#otherAttr": \[action1, action2\]|\*,...}" data-update-directives="UPDATE-DIRECTIVE" ID-MAPPING: { "oldId" : { action|\* : { id: "newId", action: "newAction" }}} ### Health Score 23 — LowBetter than 27% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community7 Small or concentrated contributor base Maturity47 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 Unknown Total 1 Last Release 2208d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b7308f2797252cace014cfec12c1b5978c1bf5608be78d7a188ff690192959f3?d=identicon)[Thomas Koudela](/maintainers/Thomas%20Koudela) --- Top Contributors [![Koudela](https://avatars.githubusercontent.com/u/21366492?v=4)](https://github.com/Koudela "Koudela (10 commits)") ### Embed Badge ![Health badge](/badges/earc-dom-resource-update-engine/health.svg) ``` [![Health](https://phpackages.com/badges/earc-dom-resource-update-engine/health.svg)](https://phpackages.com/packages/earc-dom-resource-update-engine) ``` ### Alternatives [mage2tv/magento-cache-clean This package has been migrated to mage-os/magento-cache-clean. Please switch over at your convenience. 5432.1M3](/packages/mage2tv-magento-cache-clean)[coderello/laravel-nova-lang Language support for Laravel Nova. 4251.2M2](/packages/coderello-laravel-nova-lang)[shetabit/visitor Laravel visitor 565578.2k8](/packages/shetabit-visitor)[p3k/emoji-detector Detect and return all emoji found in a string 1471.7M5](/packages/p3k-emoji-detector)[gpslab/geoip2 A Symfony Bundle for the Maxmind GeoIP2 API 541.5M3](/packages/gpslab-geoip2)[silverstripe/tagfield Tag field for SilverStripe 571.2M45](/packages/silverstripe-tagfield) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)