# pardnchiu/renderjs

> RenderJS by 邱敬幃 Pardn Chiu (pardnchiu): a zero-dependency JavaScript template engine with chainable DOM syntax and native prototype extensions.

Maintained by 邱敬幃 Pardn Chiu (pardnchiu), Pardn Co., Ltd. Source: https://github.com/pardnchiu/renderjs

Full text in one file: [English](https://renderjs.pardn.io/llms-full.txt) · [中文](https://renderjs.pardn.io/zh/llms-full.txt)

## Overview

- [Home](https://renderjs.pardn.io/index.md): RenderJS by 邱敬幃 Pardn Chiu (pardnchiu): a zero-dependency JavaScript template engine with chainable DOM syntax and native prototype extensions.
- [Getting Started](https://renderjs.pardn.io/getting-started.md): Install RenderJS from npm (@pardnchiu/renderjs) or a jsDelivr CDN script tag, and check the browser APIs it relies on.
- [Building DOM Elements](https://renderjs.pardn.io/getting-started-dom.md): Build real DOM elements from tag-selector strings like div.card#id and query elements with the $ and $all string getters.
- [First RJS Template](https://renderjs.pardn.io/getting-started-rjs.md): Create your first RJS template instance with data, event, and when hooks, then trigger the next render manually with renew().

## Concepts

- [Core Concepts](https://renderjs.pardn.io/core-concepts.md): How an RJS instance clones its template, runs before_render and rendered hooks, and re-renders only on an explicit renew() call.
- [Directive Parsing](https://renderjs.pardn.io/core-concepts-directives.md): The fixed order RJS applies :path, :for, :if, :model, :[attr], and @[event] directives, and how each one transforms the DOM.
- [Text Interpolation](https://renderjs.pardn.io/core-concepts-interpolation.md): How RJS resolves {{ }} text interpolation, including dot paths and the CALC, LENGTH, UPPER, LOWER, and DATE helpers.
- [Architecture](https://renderjs.pardn.io/architecture.md): Module-level overview of RenderJS: RJS core, directive parser, prototype extensions, and the lazyload/SVG listener.

## Reference

- [API Reference](https://renderjs.pardn.io/api-reference.md): Index of the native prototype extensions RenderJS adds, grouped by the constructor each page covers.
- [String](https://renderjs.pardn.io/api-reference-string.md): String.prototype extensions: build DOM from tag-selector strings, query elements, parse JSON, escape HTML, and call URL helpers.
- [Element](https://renderjs.pardn.io/api-reference-element.md): Chainable Element and DocumentFragment methods for content, classes, styles, attributes, children, traversal, and events.
- [HTMLElement & Links](https://renderjs.pardn.io/api-reference-html-element.md): HTMLElement helpers for px-aware sizing, padding, margin, and smooth scrolling, plus _go and _open navigation on links.
- [Array & Object](https://renderjs.pardn.io/api-reference-array-object.md): Array and Object prototype extensions: negative-index read/insert/remove, $sum, $shuffle, $map, and existence checks.
- [Map & Form Data](https://renderjs.pardn.io/api-reference-map-form.md): Chainable Map get/set/delete helpers and $map/$json converters for FormData and form elements.
- [URL](https://renderjs.pardn.io/api-reference-url.md): URL.prototype extensions: the $req fetch wrapper with request de-duplication, pushState history helpers, and query-string builders.
- [Global Functions](https://renderjs.pardn.io/api-reference-window.md): Global functions RenderJS adds to window: _Listener setup, $file reading, $cookie/_cookie, and document.body shortcuts.
- [Date & Number](https://renderjs.pardn.io/api-reference-date-time.md): Date getters for every date part, the $format token formatter, $gone relative time, and Number timestamp and $uniKey helpers.
- [Image, File & Video](https://renderjs.pardn.io/api-reference-media.md): Image copy, download, and canvas re-encoding, File-to-thumbnail extraction for images and video, and the video _config setup.

## Extensions

- [Listener System](https://renderjs.pardn.io/listener-system.md): How _Listener({ lazyload, svg }) sets up IntersectionObserver-based image lazyload and SVG inlining.

## 中文文件

- [首頁](https://renderjs.pardn.io/zh/index.md): RenderJS：邱敬幃 Pardn Chiu（pardnchiu）的零依賴 JS 模板引擎，具鏈式 DOM 語法與原生 prototype 擴充。
- [快速開始](https://renderjs.pardn.io/zh/getting-started.md): 從 npm（@pardnchiu/renderjs）或 jsDelivr CDN 安裝 RenderJS，並確認所需的瀏覽器 API。
- [建構 DOM 元素](https://renderjs.pardn.io/zh/getting-started-dom.md): 以 div.card#id 這類標籤選擇器字串建構真實 DOM，並用 $ 與 $all 字串 getter 查詢元素。
- [第一個 RJS 模板](https://renderjs.pardn.io/zh/getting-started-rjs.md): 建立第一個 RJS 模板實例，設定 data、event、when 鉤子，再以 renew() 手動觸發下一次渲染。
- [核心概念](https://renderjs.pardn.io/zh/core-concepts.md): RJS 實例如何複製模板、執行 before_render 與 rendered 鉤子，並只在明確呼叫 renew() 時重新渲染。
- [指令解析](https://renderjs.pardn.io/zh/core-concepts-directives.md): RJS 套用 :path、:for、:if、:model、:[attr]、@[event] 指令的固定順序，以及各指令如何改寫 DOM。
- [文字插值](https://renderjs.pardn.io/zh/core-concepts-interpolation.md): RJS 如何解析 {{ }} 文字插值，包含 dot path 與 CALC、LENGTH、UPPER、LOWER、DATE 輔助函式。
- [架構](https://renderjs.pardn.io/zh/architecture.md): RenderJS 的模組層級概覽：RJS 核心、指令解析器、Prototype 擴充與 lazyload/SVG listener。
- [API 參考](https://renderjs.pardn.io/zh/api-reference.md): RenderJS 原生 prototype 擴充的總索引，依各頁涵蓋的建構子分組。
- [String](https://renderjs.pardn.io/zh/api-reference-string.md): String.prototype 擴充：以標籤選擇器字串建構 DOM、查詢元素、解析 JSON、HTML 跳脫與 URL 工具。
- [Element](https://renderjs.pardn.io/zh/api-reference-element.md): Element 與 DocumentFragment 的鏈式方法：內容、class、樣式、屬性、子元素、走訪與事件。
- [HTML 元素與連結](https://renderjs.pardn.io/zh/api-reference-html-element.md): HTMLElement 的 px 尺寸、padding、margin 與平滑捲動工具，以及連結的 _go／_open 導覽。
- [陣列與物件](https://renderjs.pardn.io/zh/api-reference-array-object.md): Array 與 Object 的 prototype 擴充：負索引讀取／插入／刪除、$sum、$shuffle、$map 與存在判斷。
- [Map 與表單資料](https://renderjs.pardn.io/zh/api-reference-map-form.md): Map 的鏈式 get／set／delete 工具，以及 FormData 與表單元素的 $map／$json 轉換。
- [URL](https://renderjs.pardn.io/zh/api-reference-url.md): URL.prototype 擴充：可去重請求的 $req fetch 封裝、pushState 瀏覽紀錄工具與 query string 組合。
- [全域函式](https://renderjs.pardn.io/zh/api-reference-window.md): 加在 window 的全域函式：_Listener 啟用、$file 讀檔、$cookie／_cookie 與 document.body 捷徑。
- [日期與數值](https://renderjs.pardn.io/zh/api-reference-date-time.md): Date 各日期欄位 getter、$format 格式化、$gone 相對時間，以及 Number 的時間戳與 $uniKey 工具。
- [媒體與檔案](https://renderjs.pardn.io/zh/api-reference-media.md): Image 的複製、下載與 canvas 重新編碼，File 的圖片／影片縮圖擷取，以及 video 元素的 _config 設定。
- [Listener 系統](https://renderjs.pardn.io/zh/listener-system.md): _Listener({ lazyload, svg }) 如何建立基於 IntersectionObserver 的圖片延遲載入與 SVG 內嵌。

## Optional

- [Release Notes](https://renderjs.pardn.io/released/index.md): pardnchiu/renderjs changelog by version