{"id":21044142,"url":"https://github.com/dotpipe/dotpipe","last_synced_at":"2025-12-30T03:24:00.600Z","repository":{"id":209246026,"uuid":"723552943","full_name":"dotpipe/dotPipe","owner":"dotpipe","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-04T17:01:04.000Z","size":2980,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T17:26:39.725Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dotpipe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-26T02:53:31.000Z","updated_at":"2025-03-04T17:01:08.000Z","dependencies_parsed_at":"2024-02-14T06:23:46.042Z","dependency_job_id":"68b831b0-e054-4d09-93b0-9bb950056277","html_url":"https://github.com/dotpipe/dotPipe","commit_stats":null,"previous_names":["irondocks/irondock"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotpipe%2FdotPipe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotpipe%2FdotPipe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotpipe%2FdotPipe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotpipe%2FdotPipe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dotpipe","download_url":"https://codeload.github.com/dotpipe/dotPipe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243489897,"owners_count":20299001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T14:15:43.853Z","updated_at":"2025-12-30T03:24:00.594Z","avatar_url":"https://github.com/dotpipe.png","language":"JavaScript","readme":"free photos from pngtree.com\n\nPlease drop me a donation at baboonxiv@gmail.com on Paypal.com.\nI take Bitcoin as well!\n\n**bc1qjt8je65vc245y2xq0cx8lfdq0cpvxt957ns2ac**\n\nOr ETH **0x12c35f0d64cBbf3Ea250daD1C82E93902Be5198e**\n\nOr BTC Cash: **bitcoincash:qq6qugkmnl42sm3lgymrnsdrkpgt3a24pqllt4mlsg**\n\n# dotPipe.js – Introduction \u0026 Setup\n\n## What is dotPipe.js?\n\n`dotPipe.js` is a **dynamic web component and attribute framework** that lets you build rich, interactive UIs using simple HTML tags and inline macros. Instead of writing a lot of JavaScript manually, you can use dotPipe’s **custom elements**, **universal attributes**, and **inline pipelines** to declare behaviors directly in your markup.\n\nThink of it as a **low-code toolkit for dynamic web apps**, handling AJAX, modals, carousels, forms, shopping carts, dashboards, and more.\n\n---\n\n## Key Features\n\n- **Custom tags** like `\u003cpipe\u003e`, `\u003ccart\u003e`, `\u003ccsv\u003e`, `\u003ctabs\u003e`, `\u003ccolumns\u003e`, `\u003ccheckout\u003e`, and many others.\n- **Universal attributes** (`ajax`, `insert`, `callback`, `modal`, `tool-tip`, etc.) that apply to any custom element.\n- **Inline macros**: embed tiny “pipelines” of logic directly into elements with the `inline` attribute.\n- **Shells**: scoped pipelines for isolated execution with variable merging.\n- **AJAX \u0026 JSON templates** via `modala()`.\n- **Support classes** for UI behaviors (download, redirect, plain-text, tree-view, etc.).\n- **Extendable**: call custom functions or register new verbs.\n\n---\n\n## How dotPipe.js Works\n\n1. **On DOMContentLoaded**, the framework scans the page for custom tags and attributes.\n2. Each element with `inline` is registered into the internal `dotPipe.matrix`.\n3. When triggered (click, event, or manual), the element’s inline pipeline is parsed and executed.\n4. Pipelines can:\n   - Assign \u0026 use variables (`\u0026x:123`, `!x`)\n   - Modify the DOM (`$id.innerHTML:!var`)\n   - Fetch remote data (`ajax:file.json`)\n   - Call custom JS (`call:fnName:params`)\n   - Run isolated shells (`|+target:shellName ... |-shellName`)\n\n---\n\n## Installation\n\nSimply include the script:\n\n```html\n\u003cscript src=\"./dotpipe.js\"\u003e\u003c/script\u003e\n```\n\nOptionally, include your own scripts **after dotPipe.js** so you can call them via pipelines.\n\n---\n\n## Quickstart Example\n\n```html\n\u003c!-- Output area --\u003e\n\u003cdiv id=\"status\"\u003e\u003c/div\u003e\n\n\u003c!-- Inline macro example --\u003e\n\u003cbutton id=\"helloBtn\" inline=\"|\u0026msg:Hello World|$status.innerHTML:!msg\"\u003e\n  Say Hello\n\u003c/button\u003e\n\n\u003cscript\u003e\n  // Register inline elements\n  dotPipe.register();\n\n  // Bind button click manually\n  document.getElementById('helloBtn').addEventListener('click', () =\u003e {\n    dotPipe.runInline('helloBtn');\n  });\n\u003c/script\u003e\n```\n\nWhen the button is clicked, dotPipe will:\n\n1. Store `\"Hello World\"` in variable `msg`\n2. Insert `msg` into the innerHTML of `#status`\n\nResult → `status` div shows **Hello World**.\n\n---\n\n## Best Starting Point\n\n- Always assign **unique IDs** to every custom tag and inline element.\n- Keep pipelines simple at first: one or two verbs.\n- Use the `log` verb (`|log:!var`) to debug pipeline values.\n- Build up step by step into shells and more complex macros.\n\n\n# Custom Tags Reference\n\ndotPipe.js defines multiple **custom elements** you can drop into HTML without writing JavaScript. Each tag is enhanced by dotPipe at runtime.\n\n## `\u003cpipe\u003e`\n- AJAX loader \u0026 DOM initializer. Runs automatically on DOMContentLoaded.\n- Example:\n```html\n\u003cpipe id=\"product-list\" ajax=\"products.json\" insert=\"container\"\u003e\u003c/pipe\u003e\n```\n\n## `\u003ccart\u003e` and `\u003citem\u003e`\n- Shopping cart UI. `\u003ccart\u003e` holds `\u003citem\u003e` children.\n```html\n\u003ccart id=\"main-cart\"\u003e\n  \u003citem id=\"widget-1\" name=\"Widget\" price=\"9.99\"\u003e\u003c/item\u003e\n\u003c/cart\u003e\n```\n\n## `\u003cdyn\u003e`\n- Auto event element, triggers pipelines on click.\n\n## `\u003csearch\u003e`\n- Filters content or tables.\n\n## `\u003ccsv\u003e`\n- Loads CSV into tables/cards with sorting, paging, lazy-load.\n\n## `\u003ctabs\u003e`\n- Tabbed navigation system.\n\n## `\u003clogin\u003e`\n- Login/registration forms with AJAX and custom pages.\n\n## `\u003ccheckout\u003e`\n- Checkout workflow with validation, summary.\n\n## `\u003ccarousel\u003e`\n- Slider for content/images, supports timed auto-slide.\n\n## `\u003ccolumns\u003e`\n- Multi-column layout with remote sources.\n\n## `\u003ctimed\u003e`\n- Auto-refresh content at intervals.\n\n## `\u003crefresh\u003e`\n- Refresh content manually or on interval.\n\n## `\u003corder-confirmation\u003e`\n- Shows order confirmation summary.\n\n## `\u003clnk\u003e`\n- AJAX-enabled link element.\n\n\n# Universal Attributes\n\nEvery dotPipe tag supports shared attributes for dynamic behavior.\n\n- **id**: REQUIRED, unique identifier.\n- **inline**: Pipeline string for dynamic macros.\n- **ajax**: Load remote resource.\n- **insert**: Target element ID for AJAX results.\n- **query**: Key=value pairs for requests.\n- **callback / callback-class**: JS function or grouped callback.\n- **modal**: Load JSON templates/modals.\n- **file / directory**: File download attributes.\n- **set / get / delete**: Manipulate element attributes.\n- **x-toggle**: Toggle classes.\n- **tool-tip / modal-tip**: Tooltips and JSON tooltips.\n- **copy / remove / display**: Content utilities.\n- **headers**: Custom HTTP headers.\n- **form-class / action-class**: Group forms or triggers.\n- **event**: Events to bind to element.\n- **sources**: File list (carousel/cards).\n- **tab**: Tab configuration.\n- **login-page / registration-page / css-page**: Login-specific.\n- **validate**: Checkout validation mode.\n- **pages / count / percents / height / width**: Columns config.\n- **delay / interval / file-order / file-index / mode**: Timed + carousel attributes.\n- **turn / turn-index / boxes**: Carousel rotation.\n- **sort / page-size / lazy-load**: CSV options.\n\nEach can be combined in markup to build rich behaviors.\n\n\n# Inline Macros \u0026 Pipelines\n\nInline macros are defined with the `inline` attribute.\n\n## Syntax\n\n- `|verb:param1:param2` → call verb with params\n- `\u0026var:value` → store variable\n- `!var` → use variable\n- `nop:var` → store last result\n- `$id.innerHTML:!var` → bind to DOM\n- `#var:id.prop` → read from element\n- `@id.prop:var` → reference property\n- `%func:[args]` → call JS function\n- `call:fnName:params` → invoke function\n\n## Example\n```html\n\u003cdiv id=\"example\" inline=\"|\u0026msg:Hello|$output.innerHTML:!msg\"\u003e\u003c/div\u003e\n\u003cdiv id=\"output\"\u003e\u003c/div\u003e\n```\n\n\n# Shells (Scoped Pipelines)\n\nShells isolate pipelines for complex flows.\n\n- `|+targetId:shellName` → open shell\n- `|-shellName` → close shell\n\nVariables inside shells do not leak until merge on close.\n\n### Example\n```html\n\u003cdiv id=\"out\"\u003e\u003c/div\u003e\n\u003cbutton inline=\"\n  |+out:timer\n  |\u0026msg:inside\n  |$out.innerHTML:!msg\n  |-timer\n\"\u003eRun Shell\u003c/button\u003e\n```\n\n\n# Built-in Verbs\n\n- **log:value** → console.log\n- **ajax:url:method** → fetch resource\n- **modala:url:target** → fetch JSON and render\n- **exc:this/var** → push element/variable into pipeline\n- **nop:var** → pass value\n- **call:fnName:params** → run custom/global function\n\nYou can extend dotPipe by adding new verbs to `dotPipe.verbs`.\n\n\n# System Flow \u0026 Lifecycle\n\n1. On DOMContentLoaded → `domContentLoad()` initializes custom tags.\n2. `dotPipe.register()` scans elements with inline macros.\n3. Inline macros parsed → `runInline(id)` executes pipelines.\n4. Shells are handled by `runShellOpen`, `runShellClose`, `runShell`.\n5. AJAX handled by `pipes()` and `modala()` functions.\n\n\n# Component Guides\n\n## Columns Component\n- Attributes: `pages`, `count`, `percents`, `height`, `width`\n- API: `columnsComponent.refreshColumn`, `updateColumnContent`, `loadColumnPage`\n\n## Refresh Component\n- `\u003crefresh\u003e` auto/manual reload buttons\n- API: `refreshComponent.refreshTarget`, `refreshTargets`\n\n## Checkout\n- Validates and renders checkout forms.\n\n## Carousel\n- Sources, delay, boxes attributes for auto-rotating content.\n\n## Search/CSV\n- Loads CSV, supports sorting, paging, lazy loading.\n\n\n# Support Classes\n\nClasses that modify behavior of tags.\n\n- **download**: enable file download\n- **redirect**: navigate after AJAX\n- **plain-text / plain-html / json / strict-json**\n- **tree-view**: render JSON as tree\n- **incrIndex / decrIndex**: carousel index helpers\n- **modala-multi-first/last**\n- **clear-node**\n- **time-active / time-inactive**\n- **disabled / multiple**\n- **mouse / mouse-insert**\n- **carousel-step-left/right / carousel-slide-left/right**\n\n\n# Best Practices\n\n- Always use unique IDs.\n- Chain operators with `|`.\n- Debug pipelines with `|log:!var`.\n- Keep shells isolated for async tasks.\n- Use callback functions for AJAX.\n- Secure apps: CSP nonce auto-applied to scripts/styles.\n\n\n# Examples \u0026 Recipes\n\n## Dynamic Shopping Cart\n```html\n\u003ccart id=\"cart\"\u003e\n  \u003citem id=\"prod1\" name=\"Widget\" price=\"10\"\u003e\u003c/item\u003e\n\u003c/cart\u003e\n```\n\n## Load JSON Modal\n```html\n\u003cbutton inline=\"|modala:data.json:target\"\u003eLoad\u003c/button\u003e\n```\n\n## Tabs with AJAX\n```html\n\u003ctabs id=\"mainTabs\" tab=\"Home:home:home.html;About:about:about.html\"\u003e\u003c/tabs\u003e\n```\n\n## Auto-refresh Dashboard\n```html\n\u003crefresh id=\"refresh1\" target=\"stats:stats.html\" interval=\"30\"\u003eRefresh\u003c/refresh\u003e\n```\n\n## Custom Function Call\n```html\n\u003cbutton id=\"btn\" inline=\"|\u0026n:42|call:process:!n\"\u003eRun\u003c/button\u003e\n\u003cscript\u003e\nfunction process(val){ alert(val); }\n\u003c/script\u003e\n```\n\n# DotPipe Inline Macro System\n\nDotPipe is a lightweight, declarative inline-macro engine for HTML.\nIt allows you to manipulate the DOM, update variables, bind styles/attributes, run logic, and perform slice-indexing on class lists — all from a single `inline=\"...\"` attribute.\n\nNo external frameworks required.\n\n---\n\n## ✨ Features\n\n* **Inline variables** (`|\u0026name:value|`, `!name`)\n* **DOM bindings by id/class** (`#id.prop:val`, `.class[n].prop:val`)\n* **Full index expressions** (`[n]`, `[]`, `[a,b]`, `[start:count]`, `[start:end:step]`, `[-n]`, etc.)\n* **Style \u0026 class manipulation**\n* **Chained operations** (`op1;op2;op3`)\n* **Scoped shells** (`|+target:scopeName` / `|-scopeName`)\n* **Negative indexing \u0026 clamped ranges**\n* **Declarative, readable, framework-free**\n\n---\n\n# 1. Inline Macro Syntax\n\nEach operation begins with a pipe (`|`) inside an element's `inline` attribute.\n\n```html\n\u003cdiv inline=\"|operation1|operation2|...\"\u003e\u003c/div\u003e\n```\n\nMacros can declare variables, reference variables, target DOM elements, style them, update attributes, etc.\n\n---\n\n# 2. Variables\n\n### Declare a variable\n\n```\n|\u0026varname:value|\n```\n\n### Substitute a variable\n\n```\n!varname\n```\n\n### Example\n\n```html\n\u003cdiv inline=\"|\u0026msg:Hello World|#title.innerText:!msg\"\u003e\u003c/div\u003e\n```\n\n---\n\n# 3. Targeting DOM Elements\n\nDotPipe uses prefix operators for selecting DOM nodes:\n\n| Prefix | Meaning                  |\n| ------ | ------------------------ |\n| `#`    | Select element by ID     |\n| `.`    | Select elements by class |\n\nProperty to assign follows a dot:\n\n```\n#id.property:value\n.class[n].property:value\n```\n\n---\n\n# 4. Index Expressions\n\nIndexes are placed in square brackets after the class name:\n\n| Form            | Meaning                                          |\n| --------------- | ------------------------------------------------ |\n| `.box[0]`       | First element                                    |\n| `.box[2]`       | Third element                                    |\n| `.box[]`        | All elements                                     |\n| `.box[0,3]`     | Elements 0 and 3                                 |\n| `.box[0:3]`     | 3 items starting at index 0 → indices 0,1,2      |\n| `.box[0:6:2]`   | Indices 0,2,4                                    |\n| `.box[-1]`      | Last element                                     |\n| `.box[-2]`      | Last two elements                                |\n| `.box[-2:1]`    | 1 element starting from second-to-last           |\n| `.box[-6:-1:2]` | Every 2nd element between those relative indices |\n\n### Notes\n\n* Negative indices are relative to the end (`-1` = last, `-2` = next-to-last).\n* `[start:count]` is different from `[start:end]`:\n\n  * `[0:2]` = 2 items → indices 0 and 1.\n* Ranges are clamped to list length.\n\n---\n\n# 5. Supported Properties\n\n### Content\n\n```\ninnerText\ninnerHTML\n```\n\n### Element properties\n\n```\nvalue\nchecked\ndisabled\nsrc\nhref\n```\n\n### Class operations\n\n```\nclassList.add\nclassList.remove\nclassList.toggle\n```\n\n### Styling\n\n```\nstyle.\u003ccssProperty\u003e\n```\n\nExamples:\n\n```\n#box.style.background:red\n.card[].style.color:#0af\n```\n\n---\n\n# 6. Variable-Driven Operations\n\nSince property values can include `!varname`:\n\n```html\n\u003cdiv inline=\"|\u0026c:#ff0|.highlight[].style.color:!c\"\u003e\u003c/div\u003e\n```\n\n---\n\n# 7. Chaining Operations\n\nChain multiple instructions with semicolons:\n\n```html\n\u003cdiv inline=\"|\u0026msg:Hello|.title[0].innerText:!msg;.title[].style.color:blue\"\u003e\u003c/div\u003e\n```\n\n---\n\n# 8. Shells (Scoped Execution)\n\nShells create temporary variable scopes.\n\n### Open a shell\n\n```\n|+targetId:shellName\n```\n\n### Close a shell\n\n```\n|-shellName\n```\n\n### Example\n\n```html\n\u003cdiv inline=\"\n  |+sidebar:tick\n  |\u0026msg:Scoped\n  |.note[].innerText:!msg\n  |-tick\n  |.note[0].innerText:Global\n\"\u003e\u003c/div\u003e\n```\n\n---\n\n# 9. Complete Examples\n\n### Basic variable \u0026 ID assignment\n\n```html\n\u003cdiv inline=\"|\u0026msg:Rustic ain't it?|#status.innerText:!msg\"\u003e\u003c/div\u003e\n```\n\n### Target the second `.title`\n\n```html\n\u003cdiv inline=\".title[1].innerText:Hello\"\u003e\u003c/div\u003e\n```\n\n### Set style on all elements of a class\n\n```html\n\u003cdiv inline=\".badge[].style.color:blue\"\u003e\u003c/div\u003e\n```\n\n### Multiple, precise targets\n\n```html\n\u003cdiv inline=\".item[0,3,5].style.color:purple\"\u003e\u003c/div\u003e\n```\n\n### Slices \u0026 steps\n\n```html\n\u003cdiv inline=\".card[0:4].classList.add:featured\"\u003e\u003c/div\u003e       \u003c!-- first four --\u003e\n\u003cdiv inline=\".card[1:5:2].style.border:1px solid #333\"\u003e\u003c/div\u003e \u003c!-- indices 1,3 --\u003e\n\u003cdiv inline=\".card[-2].style.opacity:0.8\"\u003e\u003c/div\u003e              \u003c!-- last two --\u003e\n```\n\n### Mixed chain with variables\n\n```html\n\u003cdiv inline=\"\n  |\u0026color:#0af\n  |.badge[0].style.background:!color\n  |.badge[2].classList.add:active\n  |.badge[].style.color:white\n\"\u003e\u003c/div\u003e\n```\n\n---\n\n# 10. Attribute Binding\n\nAttributes can be set directly:\n\n```html\n#avatar[src]:!imageURL\n#panel[data-mode]:edit\n```\n\nExamples:\n\n```html\n\u003cdiv inline=\"|\u0026name:Sam|#card[data-user]:!name\"\u003e\u003c/div\u003e\n```\n\n---\n\n# 11. Special Notes on Behavior\n\n### Order matters\n\nLater operations can override earlier ones.\n\n### Variables are evaluated before assignment\n\nSo:\n\n```\n|\u0026a:10|\u0026b:!a|\n```\n\nstores `b = 10`.\n\n### All index expressions are clamped\n\ne.g., requesting `.card[200]` simply yields an empty set.\n\n---\n\n# 12. Quick Reference\n\n```\nVariables\n  |\u0026name:value|      Declare\n  !name              Substitute\n\nTargets\n  #id.prop:val\n  .class[n].prop:val\n  .class[].prop:val\n  .class[a,b].prop:val\n  .class[start:count].prop:val\n  .class[start:end:step].prop:val\n  .class[-n].prop:val\n\nProperties\n  innerText, innerHTML\n  style.\u003cprop\u003e\n  classList.add/remove/toggle\n  value, checked, disabled, src, href, etc.\n\nChaining\n  op1;op2;op3\n\nShells\n  |+targetId:shellName\n  |-shellName\n```\n\n---\n\n# 13. Implementation Notes\n\nDotPipe’s inline processor (`runInline`) does the following:\n\n1. **Extracts variables** declared with `|\u0026name:value|`.\n2. **Substitutes variables** (replacing `!name` with values).\n3. **Parses DOM operations** using:\n\n   ```\n   ([#.][\\w-]+)(?:\\[(.*?)\\])?\\.(.+?):(.+)\n   ```\n4. **Resolves index expressions**:\n\n   * single, multiple, empty, slice, range, step, negative\n   * clamps indices to collection length\n5. **Targets elements**:\n\n   * `#id` → document.getElementById\n   * `.class[...]` → elements via classQuery\n6. **Assigns property**:\n\n   * `innerText`, `innerHTML`\n   * `.style.\u003cprop\u003e`\n   * `.classList.add/remove/toggle`\n   * generic property/mutation\n7. **Applies chained operations** in sequence.\n8. **Handles shells** by stacking and restoring dpVars.\n\n---\n\n# 14. Example: Everything Combined\n\n```html\n\u003cdiv inline=\"\n  |\u0026username:Anthony\n  |\u0026color:#36f\n  |.card[0].innerText:!username\n  |.card[0].style.background:!color\n  |.card[1,2].classList.add:highlight\n  |.card[].style.color:white\n  |.card[-1].style.opacity:0.75\n\"\u003e\u003c/div\u003e\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotpipe%2Fdotpipe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdotpipe%2Fdotpipe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotpipe%2Fdotpipe/lists"}