{"id":18861646,"url":"https://github.com/pardnchiu/RenderJS","last_synced_at":"2025-04-14T13:31:35.451Z","repository":{"id":190469262,"uuid":"682695003","full_name":"pardnchiu/RenderJS","owner":"pardnchiu","description":"RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods. It enhances development efficiency.","archived":false,"fork":false,"pushed_at":"2025-02-16T08:52:15.000Z","size":5695,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T17:46:20.267Z","etag":null,"topics":["chiuchingwei","front-end-tools","javascript-library","native-api","pardnchiu","pardnio","pardnltd","pure-javascript","ui-tools","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://renderjs.pardn.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pardnchiu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-08-24T18:16:19.000Z","updated_at":"2025-02-16T08:52:18.000Z","dependencies_parsed_at":"2023-09-24T06:38:54.034Z","dependency_job_id":"83f2cb4c-f280-4964-8038-cb1e12f13f75","html_url":"https://github.com/pardnchiu/RenderJS","commit_stats":null,"previous_names":["pardnchiu/pdextension","pardnchiu/pdrenderkit","pardnchiu/renderjs"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FRenderJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FRenderJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FRenderJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FRenderJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pardnchiu","download_url":"https://codeload.github.com/pardnchiu/RenderJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248882000,"owners_count":21176955,"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":["chiuchingwei","front-end-tools","javascript-library","native-api","pardnchiu","pardnio","pardnltd","pure-javascript","ui-tools","vanilla-javascript"],"created_at":"2024-11-08T04:30:38.391Z","updated_at":"2025-04-14T13:31:35.438Z","avatar_url":"https://github.com/pardnchiu.png","language":"JavaScript","readme":"\u003cimg src=\"https://renderjs.pardn.io/static/image/logo.png\" width=80\u003e\n\n# RenderJS\n\n\u003e [!NOTE]\n\u003e (Formerly known as PDExtension/PDRenderKit, renamed to RenderJS starting from version `2.0.0`)\n\n\u003e RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods.\n\n![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) \n![size](https://img.shields.io/github/size/pardnchiu/RenderJS/dist%2FRenderJS.js)\u003cbr\u003e\n[![npm](https://img.shields.io/npm/v/@pardnchiu/renderjs)](https://www.npmjs.com/package/@pardnchiu/renderjs)\n[![download](https://img.shields.io/npm/dm/@pardnchiu/renderjs)](https://www.npmjs.com/package/@pardnchiu/renderjs)\n[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/renderjs)](https://www.jsdelivr.com/package/npm/@pardnchiu/renderjs)\u003cbr\u003e\n[![](https://img.shields.io/badge/查閱-中文版本-ffffff)](https://github.com/pardnchiu/RenderJS/blob/main/README.zh.md)\n\n## Feature\n\n### Simplified DOM Manipulation\n\nAchieve complex DOM operations with concise chainable syntax.\n\n### Enhanced Querying\n\nQuickly retrieve elements with simplified selector syntax, supporting both single and multiple element selection.\n\n### Built-in Extensions \n\nPredefined prototype extensions accelerate development across various scenarios.\n\n### Plug and Play \n\nSeamlessly integrates with existing JavaScript projects and supports modern browsers.\n\n## Installation\n\n### Install via npm\n\n```shell\nnpm i @pardnchiu/renderjs\n```\n\n### Include via CDN\n\n```html\n\u003c!-- Version 2.0.0 and above --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Version 1.5.2 and below --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js\"\u003e\u003c/script\u003e\n```\n\n## Overview\n\n### Extension\n\n- #### Before\n    ```javascript\n    let section = document.createElement(\"section\");\n    section.id = \"#test\";\n    document.body.appendChild(section);\n\n    let button = document.createElement(\"button\");\n    button.style.width = \"10rem\";\n    button.style.height = \"2rem\";\n    button.style.backgroundColor = \"steelblue\";\n    button.style.color = \"fff\";\n    button.onclick = function(){\n        alert(\"test\")\n    };\n    button.innerHTML = \"\u003cspan\u003etest\u003c/span\u003e button\";\n    section.appendChild(button);\n\n    let svg = document.createElement(\"span\");\n    span.classList.add(\"svg\");\n    span.setAttribute(\"path\", \"https://xxxxxx\");\n    section.appendChild(span);\n\n    let img = document.createElement(\"img\");\n    img.classList.add(\"lazyload\");\n    img.dataset.src = \"https://xxxxxx\";\n    section.appendChild(img);\n\n    let input = document.createElement(\"input\");\n    input.placeholder = \"type\";\n    input.type = \"email\";\n    section.appendChild(input);\n    ```\n- #### After\n    ```javascript\n    document.body._child(\n        \"section#test\"._([\n            \"button\"._({\n                style: {\n                    width: \"10rem\",\n                    hright: \"2rem\",\n                    backgroundColor: \"steelblue\",\n                    color: \"#fff\"\n                }\n            }, [\n                // or \"\u003cspan\u003etest\u003c/span\u003e button\"\n                \"span\"._(\"test\"),\n                \" button\"\n            ])._click(function(){\n                alert(\"test\")\n            }),\n            \"span.svg:._({ path: \"https://xxxxxx\" }),\n            // No Lazy Loading =\u003e \"img\"._(\"https://xxxxxx\"),\n            \"img\"._({ lazyload: \"https://xxxxxx\" }),\n            \"input@email type\"._()\n        ])\n    );\n\n    _Listener({\n        svg: true,     // Add SVGListener, convert span.svg to svg tag\n        lazyload: true // Add Lazy Listener, Lazy Loading images\n    });\n    ```\n- #### Get Element\n    - Before\n        ```javascript\n        document.getElementById(\"test\");\n        document.querySelector(\"div.test\");\n        document.querySelectorAll(\"div.test\");\n        document.querySelector(\"input[name='test']\");\n        ```\n    - After\n        ```javascript\n        \"test\".$;\n        \"div.test\".$;\n        \"div.test\".$all;\n        \"input[name='test']\".$;\n        ```\n- #### Add Element\n    - Before\n        ```html\n        \u003cdiv class=\"test\" style=\"width: 5rem; height: 80px;\" test=\"test\"\u003e\n            \u003cbutton\u003e\n                \u003cimg src=\"https://xxxxxx\"\u003e\n            \u003c/button\u003e\n        \u003c/div\u003e\n        ```\n    - After\n        ```Javascript\n        \"div.test\"._({\n            style: {\n                width: \"5rem\",\n                height: 80,\n            },\n            test: \"test\"\n        }, [\n            \"button\"._([\n                \"img\"._(\"https://xxxxxx\")\n            ])\n        ]);\n        ```\n\n\n### Simplified Frontend Framework\n\n\u003e [!NOTE]\n\u003e RJS is a simplified frontend framework based on [QuickUI](https://pardn.ltd/QuickUI), designed for specific projects\n\u003e - Renders using non-vDOM technology, enhancing performance and reducing complexity.\n\u003e - Removes automatic listening and updating, giving developers manual control over update processes.\n\u003e - Introduces `renew()` function to support precise updates of data and events.\n\n| Attribute | Description |\n| --- | --- |\n| `{{value}}` | Inserts text into HTML tags and automatically updates with data changes. |\n| `:path` | Used with the `temp` tag to load HTML fragments from external files into the current page. |\n| `:html` | Replaces the element's `innerHTML` with text. |\n| `:for` | Supports formats like `item in items`, `(item, index) in items`, `(key, value) in object`. Iterates over data collections to generate corresponding HTML elements. |\n| `:if`\u003cbr\u003e`:else-if`\u003cbr\u003e`:elif`\u003cbr\u003e`:else` | Displays or hides elements based on specified conditions, enabling branching logic. |\n| `:model` | Binds data to form elements (e.g., `input`), updating data automatically when input changes. |\n| `:[attr]` | Sets element attributes, such as `ID`, `class`, image source, etc.\u003cbr\u003eExamples: `:id`/`:class`/`:src`/`:alt`/`:href`... |\n| `:[css]` | Sets element CSS, such as margin, padding, etc. Examples: `:background-color`, `:opacity`, `:margin`, `:top`, `:position`... |\n| `@[event]` | Adds event listeners that trigger specified actions upon activation.\u003cbr\u003eExamples: `@click`/`@input`/`@mousedown`... |\n\n- ##### Initializing `RJS`\n    ```JavaScript\n    const app = \"(ComponentID)\".RJS({\n        data: {\n            // Define data\n        },\n        event: {\n            // Define events\n        },\n        when: {\n            before_render: function () {\n                // Executes before rendering (can stop rendering)\n                // return false \n            },\n            rendered: function () {\n                // Executes after rendering\n            }\n        }\n    });\n    ```\n- #### Updating `RJS`\n    ```JavaScript\n    app.renew({\n        // data: Only include data items to update; unmentioned items retain initial values.\n        // event: Only include event items to update; unmentioned items retain initial values.\n        // when: Only include lifecycle logic to update; unmentioned items retain initial logic.\n    });\n    ```\n\n### Interface\n\n| [String](./src/interface/String.ts) | [Number](./src/interface/Number.ts) | [Array](./src/interface/Array.ts) | [**HTMLElement**](./src/interface/HTMLElement.ts) |\n| :- | :- | :- | :- |\n| [**Object**](./src/interface/Object.ts) | [**Map**](./src/interface/Map.js) | [**Date**](./src/interface/Date.ts) | [**HTMLFormElement**](./src/interface/HTMLFormElement.ts) |\n| [**URL**](./src/interface/URL.js) | [**FormData**](./src/interface/FormData.ts) | [**File**](./src/interface/File.ts) | [**HTMLLinkElement**](./src/interface/HTMLLinkElement.ts) |\n| [**Image**](./src/interface/Image.ts) | [**Element**](./src/interface/Element.ts) | [**DocumentFragment**](./src/interface/DocumentFragment.ts) | [**HTMLVideoElement**](./src/interface/HTMLVideoElement.ts) |\n| [**window**](./src/interface/window.ts) |\n\n## License\n\nSimilar to MIT License but provides obfuscated code only:\n- Same as MIT: Free to use, modify and redistribute, including commercial use \n- Main difference: Provides obfuscated code by default, source code available for purchase\n- License terms: Must retain original copyright notice (same as MIT)\n\nFor detailed terms and conditions, please see the [Software Usage Agreement](https://github.com/pardnchiu/RenderJS/blob/main/LICENSE).\n\n## Creator\n\n\u003cimg src=\"https://avatars.githubusercontent.com/u/25631760\" align=\"left\" width=\"96\" height=\"96\" style=\"margin-right: 0.5rem;\"\u003e\n\n\u003ch4 style=\"padding-top: 0\"\u003e邱敬幃 Pardn Chiu\u003c/h4\u003e\n\n\u003ca href=\"mailto:dev@pardn.io\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://pardn.io/image/email.svg\" width=\"48\" height=\"48\"\u003e\n\u003c/a\u003e \u003ca href=\"https://linkedin.com/in/pardnchiu\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://pardn.io/image/linkedin.svg\" width=\"48\" height=\"48\"\u003e\n\u003c/a\u003e\n\n***\n\n©️ 2022 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpardnchiu%2FRenderJS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpardnchiu%2FRenderJS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpardnchiu%2FRenderJS/lists"}