https://github.com/pardnchiu/RenderJS
RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods. It enhances development efficiency.
https://github.com/pardnchiu/RenderJS
chiuchingwei front-end-tools javascript-library native-api pardnchiu pardnio pardnltd pure-javascript ui-tools vanilla-javascript
Last synced: about 2 months ago
JSON representation
RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods. It enhances development efficiency.
- Host: GitHub
- URL: https://github.com/pardnchiu/RenderJS
- Owner: pardnchiu
- License: other
- Created: 2023-08-24T18:16:19.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-16T08:52:15.000Z (4 months ago)
- Last Synced: 2025-04-11T17:46:20.267Z (about 2 months ago)
- Topics: chiuchingwei, front-end-tools, javascript-library, native-api, pardnchiu, pardnio, pardnltd, pure-javascript, ui-tools, vanilla-javascript
- Language: JavaScript
- Homepage: https://renderjs.pardn.io
- Size: 5.43 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RenderJS
> [!NOTE]
> (Formerly known as PDExtension/PDRenderKit, renamed to RenderJS starting from version `2.0.0`)
> RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods.
[](https://www.npmjs.com/package/@pardnchiu/renderjs)
[](https://www.npmjs.com/package/@pardnchiu/renderjs)
[](https://www.jsdelivr.com/package/npm/@pardnchiu/renderjs)
[](https://github.com/pardnchiu/RenderJS/blob/main/README.zh.md)
## Feature
### Simplified DOM Manipulation
Achieve complex DOM operations with concise chainable syntax.
### Enhanced Querying
Quickly retrieve elements with simplified selector syntax, supporting both single and multiple element selection.
### Built-in Extensions
Predefined prototype extensions accelerate development across various scenarios.
### Plug and Play
Seamlessly integrates with existing JavaScript projects and supports modern browsers.
## Installation
### Install via npm
```shell
npm i @pardnchiu/renderjs
```
### Include via CDN
```html
```
## Overview
### Extension
- #### Before
```javascript
let section = document.createElement("section");
section.id = "#test";
document.body.appendChild(section);
let button = document.createElement("button");
button.style.width = "10rem";
button.style.height = "2rem";
button.style.backgroundColor = "steelblue";
button.style.color = "fff";
button.onclick = function(){
alert("test")
};
button.innerHTML = "test button";
section.appendChild(button);
let svg = document.createElement("span");
span.classList.add("svg");
span.setAttribute("path", "https://xxxxxx");
section.appendChild(span);
let img = document.createElement("img");
img.classList.add("lazyload");
img.dataset.src = "https://xxxxxx";
section.appendChild(img);
let input = document.createElement("input");
input.placeholder = "type";
input.type = "email";
section.appendChild(input);
```
- #### After
```javascript
document.body._child(
"section#test"._([
"button"._({
style: {
width: "10rem",
hright: "2rem",
backgroundColor: "steelblue",
color: "#fff"
}
}, [
// or "test button"
"span"._("test"),
" button"
])._click(function(){
alert("test")
}),
"span.svg:._({ path: "https://xxxxxx" }),
// No Lazy Loading => "img"._("https://xxxxxx"),
"img"._({ lazyload: "https://xxxxxx" }),
"input@email type"._()
])
);
_Listener({
svg: true, // Add SVGListener, convert span.svg to svg tag
lazyload: true // Add Lazy Listener, Lazy Loading images
});
```
- #### Get Element
- Before
```javascript
document.getElementById("test");
document.querySelector("div.test");
document.querySelectorAll("div.test");
document.querySelector("input[name='test']");
```
- After
```javascript
"test".$;
"div.test".$;
"div.test".$all;
"input[name='test']".$;
```
- #### Add Element
- Before
```html
```
- After
```Javascript
"div.test"._({
style: {
width: "5rem",
height: 80,
},
test: "test"
}, [
"button"._([
"img"._("https://xxxxxx")
])
]);
```
### Simplified Frontend Framework
> [!NOTE]
> RJS is a simplified frontend framework based on [QuickUI](https://pardn.ltd/QuickUI), designed for specific projects
> - Renders using non-vDOM technology, enhancing performance and reducing complexity.
> - Removes automatic listening and updating, giving developers manual control over update processes.
> - Introduces `renew()` function to support precise updates of data and events.
| Attribute | Description |
| --- | --- |
| `{{value}}` | Inserts text into HTML tags and automatically updates with data changes. |
| `:path` | Used with the `temp` tag to load HTML fragments from external files into the current page. |
| `:html` | Replaces the element's `innerHTML` with text. |
| `:for` | Supports formats like `item in items`, `(item, index) in items`, `(key, value) in object`. Iterates over data collections to generate corresponding HTML elements. |
| `:if`
`:else-if`
`:elif`
`:else` | Displays or hides elements based on specified conditions, enabling branching logic. |
| `:model` | Binds data to form elements (e.g., `input`), updating data automatically when input changes. |
| `:[attr]` | Sets element attributes, such as `ID`, `class`, image source, etc.
Examples: `:id`/`:class`/`:src`/`:alt`/`:href`... |
| `:[css]` | Sets element CSS, such as margin, padding, etc. Examples: `:background-color`, `:opacity`, `:margin`, `:top`, `:position`... |
| `@[event]` | Adds event listeners that trigger specified actions upon activation.
Examples: `@click`/`@input`/`@mousedown`... |
- ##### Initializing `RJS`
```JavaScript
const app = "(ComponentID)".RJS({
data: {
// Define data
},
event: {
// Define events
},
when: {
before_render: function () {
// Executes before rendering (can stop rendering)
// return false
},
rendered: function () {
// Executes after rendering
}
}
});
```
- #### Updating `RJS`
```JavaScript
app.renew({
// data: Only include data items to update; unmentioned items retain initial values.
// event: Only include event items to update; unmentioned items retain initial values.
// when: Only include lifecycle logic to update; unmentioned items retain initial logic.
});
```
### Interface
| [String](./src/interface/String.ts) | [Number](./src/interface/Number.ts) | [Array](./src/interface/Array.ts) | [**HTMLElement**](./src/interface/HTMLElement.ts) |
| :- | :- | :- | :- |
| [**Object**](./src/interface/Object.ts) | [**Map**](./src/interface/Map.js) | [**Date**](./src/interface/Date.ts) | [**HTMLFormElement**](./src/interface/HTMLFormElement.ts) |
| [**URL**](./src/interface/URL.js) | [**FormData**](./src/interface/FormData.ts) | [**File**](./src/interface/File.ts) | [**HTMLLinkElement**](./src/interface/HTMLLinkElement.ts) |
| [**Image**](./src/interface/Image.ts) | [**Element**](./src/interface/Element.ts) | [**DocumentFragment**](./src/interface/DocumentFragment.ts) | [**HTMLVideoElement**](./src/interface/HTMLVideoElement.ts) |
| [**window**](./src/interface/window.ts) |
## License
Similar to MIT License but provides obfuscated code only:
- Same as MIT: Free to use, modify and redistribute, including commercial use
- Main difference: Provides obfuscated code by default, source code available for purchase
- License terms: Must retain original copyright notice (same as MIT)
For detailed terms and conditions, please see the [Software Usage Agreement](https://github.com/pardnchiu/RenderJS/blob/main/LICENSE).
## Creator
邱敬幃 Pardn Chiu
***
©️ 2022 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)