Please drop me a donation at [email protected] on Paypal.com. I take Bitcoin as well!

bc1qjt8je65vc245y2xq0cx8lfdq0cpvxt957ns2ac

Or ETH 0x12c35f0d64cBbf3Ea250daD1C82E93902Be5198e

Or BTC Cash: bitcoincash:qq6qugkmnl42sm3lgymrnsdrkpgt3a24pqllt4mlsg

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.

Think of it as a low-code toolkit for dynamic web apps, handling AJAX, modals, carousels, forms, shopping carts, dashboards, and more.

• Custom tags like <pipe>, <cart>, <csv>, <tabs>, <columns>, <checkout>, and many others.
• Universal attributes (ajax, insert, callback, modal, tool-tip, etc.) that apply to any custom element.
• Inline macros: embed tiny “pipelines” of logic directly into elements with the inline attribute.
• Shells: scoped pipelines for isolated execution with variable merging.
• AJAX & JSON templates via modala().
• Support classes for UI behaviors (download, redirect, plain-text, tree-view, etc.).
• Extendable: call custom functions or register new verbs.

1. On DOMContentLoaded, the framework scans the page for custom tags and attributes.
2. Each element with inline is registered into the internal dotPipe.matrix.
3. When triggered (click, event, or manual), the element’s inline pipeline is parsed and executed.
4. Pipelines can:
   • Assign & use variables (&x:123, !x)
   • Modify the DOM ($id.innerHTML:!var)
   • Fetch remote data (ajax:file.json)
   • Call custom JS (call:fnName:params)
   • Run isolated shells (|+target:shellName ... |-shellName)

Simply include the script:

<script src="./dotpipe.js"></script>

Optionally, include your own scripts after dotPipe.js so you can call them via pipelines.

<!-- Output area -->
<div id="status"></div>

<!-- Inline macro example -->
<button id="helloBtn" inline="|&msg:Hello World|$status.innerHTML:!msg">
  Say Hello
</button>

<script>
  // Register inline elements
  dotPipe.register();

  // Bind button click manually
  document.getElementById('helloBtn').addEventListener('click', () => {
    dotPipe.runInline('helloBtn');
  });
</script>

When the button is clicked, dotPipe will:

1. Store "Hello World" in variable msg
2. Insert msg into the innerHTML of #status

Result → status div shows Hello World.

• Always assign unique IDs to every custom tag and inline element.
• Keep pipelines simple at first: one or two verbs.
• Use the log verb (|log:!var) to debug pipeline values.
• Build up step by step into shells and more complex macros.

dotPipe.js defines multiple custom elements you can drop into HTML without writing JavaScript. Each tag is enhanced by dotPipe at runtime.

• AJAX loader & DOM initializer. Runs automatically on DOMContentLoaded.
• Example:

<pipe id="product-list" ajax="products.json" insert="container"></pipe>

• Shopping cart UI. <cart> holds <item> children.

<cart id="main-cart">
  <item id="widget-1" name="Widget" price="9.99"></item>
</cart>

• Auto event element, triggers pipelines on click.

• Filters content or tables.

• Loads CSV into tables/cards with sorting, paging, lazy-load.

• Tabbed navigation system.

• Login/registration forms with AJAX and custom pages.

• Checkout workflow with validation, summary.

• Slider for content/images, supports timed auto-slide.

• Multi-column layout with remote sources.

• Auto-refresh content at intervals.

• Refresh content manually or on interval.

• Shows order confirmation summary.

• AJAX-enabled link element.

Every dotPipe tag supports shared attributes for dynamic behavior.

• id: REQUIRED, unique identifier.
• inline: Pipeline string for dynamic macros.
• ajax: Load remote resource.
• insert: Target element ID for AJAX results.
• query: Key=value pairs for requests.
• callback / callback-class: JS function or grouped callback.
• modal: Load JSON templates/modals.
• file / directory: File download attributes.
• set / get / delete: Manipulate element attributes.
• x-toggle: Toggle classes.
• tool-tip / modal-tip: Tooltips and JSON tooltips.
• copy / remove / display: Content utilities.
• headers: Custom HTTP headers.
• form-class / action-class: Group forms or triggers.
• event: Events to bind to element.
• sources: File list (carousel/cards).
• tab: Tab configuration.
• login-page / registration-page / css-page: Login-specific.
• validate: Checkout validation mode.
• pages / count / percents / height / width: Columns config.
• delay / interval / file-order / file-index / mode: Timed + carousel attributes.
• turn / turn-index / boxes: Carousel rotation.
• sort / page-size / lazy-load: CSV options.

Each can be combined in markup to build rich behaviors.

Inline macros are defined with the inline attribute.

• |verb:param1:param2 → call verb with params
• &var:value → store variable
• !var → use variable
• nop:var → store last result
• $id.innerHTML:!var → bind to DOM
• #var:id.prop → read from element
• @id.prop:var → reference property
• %func:[args] → call JS function
• call:fnName:params → invoke function

<div id="example" inline="|&msg:Hello|$output.innerHTML:!msg"></div>
<div id="output"></div>

Shells isolate pipelines for complex flows.

• |+targetId:shellName → open shell
• |-shellName → close shell

Variables inside shells do not leak until merge on close.

<div id="out"></div>
<button inline="
  |+out:timer
  |&msg:inside
  |$out.innerHTML:!msg
  |-timer
">Run Shell</button>

• log:value → console.log
• ajax:url:method → fetch resource
• modala:url:target → fetch JSON and render
• exc:this/var → push element/variable into pipeline
• nop:var → pass value
• call:fnName:params → run custom/global function

You can extend dotPipe by adding new verbs to dotPipe.verbs.

1. On DOMContentLoaded → domContentLoad() initializes custom tags.
2. dotPipe.register() scans elements with inline macros.
3. Inline macros parsed → runInline(id) executes pipelines.
4. Shells are handled by runShellOpen, runShellClose, runShell.
5. AJAX handled by pipes() and modala() functions.

• Attributes: pages, count, percents, height, width
• API: columnsComponent.refreshColumn, updateColumnContent, loadColumnPage

• <refresh> auto/manual reload buttons
• API: refreshComponent.refreshTarget, refreshTargets

• Validates and renders checkout forms.

• Sources, delay, boxes attributes for auto-rotating content.

• Loads CSV, supports sorting, paging, lazy loading.

Classes that modify behavior of tags.

• download: enable file download
• redirect: navigate after AJAX
• plain-text / plain-html / json / strict-json
• tree-view: render JSON as tree
• incrIndex / decrIndex: carousel index helpers
• modala-multi-first/last
• clear-node
• time-active / time-inactive
• disabled / multiple
• mouse / mouse-insert
• carousel-step-left/right / carousel-slide-left/right

• Always use unique IDs.
• Chain operators with |.
• Debug pipelines with |log:!var.
• Keep shells isolated for async tasks.
• Use callback functions for AJAX.
• Secure apps: CSP nonce auto-applied to scripts/styles.

<cart id="cart">
  <item id="prod1" name="Widget" price="10"></item>
</cart>

<button inline="|modala:data.json:target">Load</button>

<tabs id="mainTabs" tab="Home:home:home.html;About:about:about.html"></tabs>

<refresh id="refresh1" target="stats:stats.html" interval="30">Refresh</refresh>

<button id="btn" inline="|&n:42|call:process:!n">Run</button>
<script>
function process(val){ alert(val); }
</script>