Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

pdrenderkit

Package Overview
Dependencies
Maintainers
0
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pdrenderkit - npm Package Compare versions

Comparing version 1.5.2 to 1.5.3

dist/RenderJS.js

45

package.json
{
"name": "pdrenderkit",
"version": "1.5.2",
"description": "PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.",
"main": "dist/PDRenderKit.js",
"version": "1.5.3",
"description": "A lightweight frontend rendering tool focusing on real-time DOM manipulation and flexible utilities for small to medium projects.",
"main": "dist/RenderJS.js",
"scripts": {
"minify": "npx terser src/PDRenderKit.js -c -m -o dist/PDRenderKit.js --config-file terser.config.json --name-cache terser.cache.json",
"minify-w": "chokidar 'src/PDRenderKit.js' -c 'npm run minify'"
"minify": "npx terser src/RenderJS.js -c -m -o dist/RenderJS.js --config-file terser.config.json --name-cache terser.cache.json",
"minify-w": "chokidar 'src/RenderJS.js' -c 'npm run minify'"
},
"publishConfig": {
"access": "public"
},
"files": [
"dist",
"static",
"index.html",
"src/interface.ts",
"LICENSE",

@@ -20,15 +20,30 @@ "README.md"

"type": "git",
"url": "git+https://github.com/pardnchiu/PDRenderKit.git"
"url": "git+https://github.com/pardnchiu/RenderJS.git"
},
"keywords": [
"javascript-library",
"front-end-framework"
"renderjs",
"frontend-tool",
"dom-manipulation",
"lightweight",
"ui-tools",
"real-time-dom",
"flexible-development"
],
"author": "邱敬幃 Pardn Chiu",
"license": "GPL-3.0",
"author": {
"name": "邱敬幃 Pardn Chiu",
"email": "dev@pardn.io",
"url": "https://github.com/pardnchiu"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/pardnchiu/PDRenderKit/issues",
"email": "git@pardn.io"
"url": "https://github.com/pardnchiu/RenderJS/issues",
"email": "dev@pardn.io"
},
"homepage": "https://github.com/pardnchiu/PDRenderKit#readme"
"homepage": "https://github.com/pardnchiu/RenderJS#readme",
"devDependencies": {
"chokidar-cli": "3.0.0",
"terser": "5.31.3",
"sass": "1.62.0"
}
}

475

README.md

@@ -1,395 +0,40 @@

# PDRenderKit (JavaScript Library)
# RenderJS
![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![](https://img.shields.io/github/license/pardnchiu/PDRenderKit?color=44bb44) ![](https://img.shields.io/badge/creator-Pardn%20Chiu-4444bb)<br>
![](https://img.shields.io/github/v/release/pardnchiu/PDRenderKit?color=bbbb44) ![](https://img.shields.io/npm/v/pdrenderkit?color=44bbbb) ![](https://img.shields.io/github/size/pardnchiu/PDRenderKit/dist%2FPDRenderKit.js?color=bb44bb)<br>
[![](https://img.shields.io/badge/點擊查看-中文版本-ffffff)](https://github.com/pardnchiu/PDRenderKit/blob/main/README.zh.md)
*(Formerly known as PDRenderKit, renamed to RenderJS starting from version 2.0.0)*
PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.<br>
Improving code maintainability and readability while reducing development complexity.
![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
![size](https://img.shields.io/github/size/pardnchiu/RenderJS/dist%RenderJS.js)
![license](https://img.shields.io/github/license/pardnchiu/RenderJS)<br>
[![npm](https://img.shields.io/npm/v/pdrenderkit)](https://www.npmjs.com/package/pdrenderkit)
[![download](https://img.shields.io/npm/dm/pdrenderkit)](https://www.npmjs.com/package/pdrenderkit)
[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/pdrenderkit)](https://www.jsdelivr.com/package/npm/pdrenderkit)<br>
[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/QuickUI/blob/main/README.en.md)
> RenderJS is a lightweight tool focusing on extending JavaScript native object prototypes, providing powerful DOM manipulation and data processing methods. It minimizes repetitive code and enhances development efficiency.
## Feature
- ### Separation of UI and Data Logic:
Segregates front-end presentation from data logic, creating a clearer structure and simplifying maintenance tasks.
- **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.
- ### Reduction of Repetitive Code:
Provides tools and utilities to minimize repetitive code sections, improving code conciseness.
## Installation
- ### Improved Code Readability:
Modular design enhances code readability, making it easier to understand and collaborate on.
- Install from npm
```bash
npm i @pardnchiu/renderjs
```
- ### Data Change Monitoring:
Automatically updates the user interface in real-time based on data changes, reducing manual DOM manipulation steps.
- Or include via CDN
```html
<!-- Version 2.0.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js"></script>
- ### Automatic Rendering:
Reduces manual DOM manipulation, allowing you to focus more on the core logic of your application.
- ### Lightweight:
Ensuring full functionality with minimal impact on your website's speed.
### Creator
<img src="https://pardn.io/image/head-s.jpg" align="left" style="float: left; margin-right: 0.5rem; width: 96px; height: 96px;" />
<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
[![](https://pardn.io/image/mail.svg)](mailto:mail@pardn.ltd) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu)
### License
This source code project is licensed under the [GPL-3.0](https://github.com/pardnchiu/PDRenderKit/blob/main/LICENSE) license.
### How to use
- #### Directly Download the Package
```Shell
npm install pdrenderkit
<!-- Version 1.5.2 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js"></script>
```
- #### Or Include via `cdn.jsdelivr.new`
```HTML
<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd">
```
## Overview
- #### PD (formerly named $dom)
Auto Rendering: Load auto-rendering and automatically render data changes after detection.
| tag | description |
| --- | --- |
| {{value}} | Insert text into HTML tag and update the value based on data changes. |
| :path | Load HTML fragments from external files into the current page. |
| :html | Replace innerHTML of an element with text. |
| :for | Supports item in items, (item, index) in items, (key, value) in object.<br>Iterate through a data collection and generate corresponding HTML elements for repetitive data display. |
| :if<br>:else-if<br>:else | 根據指定條件顯示或隱藏元素，為實現分支邏輯添加多種選項。<br>Show or hide elements based on specified conditions, adding multiple options for implementing branching logic. |
| :model | Bind data to form elements (e.g., input), automatically updating the data when input changes. |
| :hide | Hides elements, conditionally displaying them based on specific criteria. |
| :once | Executes the binding or operation only once. |
| :[attr] | Set element attributes such as ID, class, image source, etc.<br>For example: :id/:class/:src/:alt/:href... |
| @[event] | Add event listeners to execute specified actions when events are triggered.<br>例如：@click/@input/@mousedown...<br>For example: @click/@input/@mousedown... |
| :@[event] | Set event handlers for individual elements within a loop, allowing different event handling for each element. |
- ##### `:path` / `:html`
*Make sure to disable local file restrictions in your browser or use a live server when you are testing `:path`.*
- test.html
```html
<h1>path heading</h1>
<p>path content</p>
```
- index.html
```html
<body id="app">
<section :path="./test.html"></section>
<section :html="html"></section>
</body>
<script>
const app = new PD({
id: "app",
data: {
html: "<b>innerHtml</b>"
}
});
</script>
```
- Result
```html
<body id="app">
<h1>path heading</h1>
<p>path content</p>
<section>
<b>innerHtml</b>
</section>
</body>
```
- ##### `:for`
- index.html
```html
<body id="app">
<ul>
<li :for="(item, index) in ary" :id="item" :index="index">{{ item }} {{ CALC(index + 1) }}</li>
</ul>
</body>
<script>
const app = new PD({
id: "app",
data: {
ary: ["test1", "test2", "test3"]
}
});
</script>
```
- Result
```html
<body id="app">
<li id="test1" index="0">test1 1</li>
<li id="test2" index="1">test2 2</li>
<li id="test3" index="2">test3 3</li>
</body>
```
- ##### Nested `:for` Loop
- index.html
```html
<body id="app">
<ul>
<li :for="(key, val) in obj">
{{ key }}: {{ val.name }}
<ul>
<li :for="item in val.ary">
{{ item.name }}
<ul>
<li :for="(item1, index1) in item.ary1">
{{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
<script>
const app = new PD({
id: "app",
data: {
obj: {
food: {
name: "Food",
ary: [
{
name: 'Snacks',
ary1: [
{ name: 'Potato Chips', price: 10 },
{ name: 'Chocolate', price: 8 }
]
},
{
name: 'Beverages',
ary1: [
{ name: 'Juice', price: 5 },
{ name: 'Tea', price: 3 }
]
}
]
},
home: {
name: 'Home',
ary: [
{
name: 'Furniture',
ary1: [
{ name: 'Sofa', price: 300 },
{ name: 'Table', price: 150 }
]
},
{
name: 'Decorations',
ary1: [
{ name: 'Picture Frame', price: 20 },
{ name: 'Vase', price: 15 }
]
}
]
}
}
}
});
</script>
```
- Result
```html
<body id="app">
<ul>
<li>food: Food
<ul>
<li>Snacks
<ul>
<li>1. Potato Chips - $10</li>
<li>2. Chocolate - $8</li>
</ul>
</li>
<li>Beverages
<ul>
<li>1. Juice - $5</li>
<li>2. Tea - $3</li>
</ul>
</li>
</ul>
</li>
<li>home: Home
<ul>
<li>Furniture
<ul>
<li>1. Sofa - $300</li>
<li>2. Table - $150</li>
</ul>
</li>
<li>Decorations
<ul>
<li>1. Picture Frame - $20</li>
<li>2. Vase - $15</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
```
- ##### `:if`
- index.html
```html
<body id="app">
<h1 :if="heading == 1">{{ title }} {{ heading }}</h1>
<h2 :else-if="isH2">{{ title }} {{ heading }}</h2>
<h3 :else-if="heading == 3">{{ title }} {{ heading }}</h3>
<h4 :else>{{ title }} {{ heading }}</h4>
</body>
<script>
const app = new PD({
id: "app",
data: {
heading: [Number|null],
isH2: [Boolean|null],
title: "test"
}
});
</script>
```
- Result: `heading = 1`
```html
<body id="app">
<h1>test 1</h1>
</body>
```
- Result: `heading = null && isH2 = true`
```html
<body id="app">
<h2>test </h2>
</body>
```
- Result: `heading = 3 && isH2 = null`
```html
<body id="app">
<h3>test 3</h3>
</body>
```
- Result: `heading = null && isH2 = null`
```html
<body id="app">
<h4>test </h4>
</body>
```
- ##### `@event`
- index.html
```html
<body id="app">
<button @click="test">test</button>
</body>
<script>
const app = new PD({
id: "app",
event: {
test: function(e){
alert(e.target.innerText + " clicked");
}
}
});
</script>
```
- ##### More Attributes
`:padding`, `:margin`, `:border`, `:border-radius`, `:outline`, `:box-sahdow`, `:bg-image`, `:bg-attachment`, `:bg-blend-mode`, `:bg-clip`, `:bg-origin`, `:bg-position`, `:bg-position-x`, `:bg-position-y`, `:bg-repeat`, `:bg-size`, `:bg-color`, `:color`
- ##### Function
- ###### `LENGTH()`:
- index.html
```HTML
<body id="app">
<p>Total: {{ LENGTH(array) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
array: [1, 2, 3, 4]
}
});
</script>
```
- result
```HTML
<body id="app">
<p>Total: 4</p>
</body>
```
- ###### `CALC()`:
- index.html
```HTML
<body id="app">
<p>calc: {{ CALC(num * 10) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
num: 1
}
});
</script>
```
- result
```HTML
<body id="app">
<p>calc: 10</p>
</body>
```
- ###### `UPPER()` / `LOWER()`
- index.html
```HTML
<body id="app">
<p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
test1: "upper",
test2: "LOWER"
}
});
</script>
```
- result
```HTML
<body id="app">
<p>UPPER lower</p>
</body>
```
- ###### `DATE(num, format)`:
- index.html
```HTML
<body id="app">
<p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
now: Math.floor(Date.now() / 1000)
}
});
</script>
```
- result
```HTML
<body id="app">
<p>2024-08-17 03:40:47</p>
</body>
```
- ##### 渲染完成 / Rendering completed
```html
<body id="app"></body>
<script>
const app = new PD({
id: "app",
next: function () {
console.log("Rendering completed");
}
});
</script>
```
### Extension

@@ -470,3 +115,3 @@

```javascript
"#test".$;
"test".$;
"div.test".$;

@@ -501,9 +146,67 @@ "div.test".$all;

***
*All translations powered by ChatGPT*
### 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`<br>`:else-if`<br>`:elif`<br>`: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.<br>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.<br>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.
});
```
## Creator
<img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />
<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
[![](https://pardn.io/image/mail.svg)](mailto:dev@pardn.io) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu)
## License
This source code project is licensed under the [MIT](https://github.com/pardnchiu/RenderJS/blob/main/LICENSE) license.
***
©️ 2023 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
©️ 2022 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)

475

README.zh.md

@@ -1,395 +0,41 @@

# PDRenderKit (JavaScript Library)
# RenderJS
![](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) ![](https://img.shields.io/github/license/pardnchiu/PDRenderKit?color=44bb44) ![](https://img.shields.io/badge/creator-Pardn%20Chiu-4444bb)<br>
![](https://img.shields.io/github/v/release/pardnchiu/PDRenderKit?color=bbbb44) ![](https://img.shields.io/npm/v/pdrenderkit?color=44bbbb) ![](https://img.shields.io/github/size/pardnchiu/PDRenderKit/dist%2FPDRenderKit.js?color=bb44bb)<br>
[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/PDRenderKit/blob/main/README.md)
*(原名：PDRenderKit，自 `2.0.0` 版本起更名為 RenderJS)*
PDRenderKit 是一個輕量化的前端框架，用於分離前端介面和資料邏輯<br>
提高代碼的可維護性和可讀性，同時減少開發複雜度。
![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444)
![size](https://img.shields.io/github/size/pardnchiu/RenderJS/dist%RenderJS.js)
![license](https://img.shields.io/github/license/pardnchiu/RenderJS)<br>
[![npm](https://img.shields.io/npm/v/pdrenderkit)](https://www.npmjs.com/package/pdrenderkit)
[![download](https://img.shields.io/npm/dm/pdrenderkit)](https://www.npmjs.com/package/pdrenderkit)
[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/pdrenderkit)](https://www.jsdelivr.com/package/npm/pdrenderkit)<br>
[![](https://img.shields.io/badge/read-English%20Version-ffffff)](https://github.com/pardnchiu/QuickUI/blob/main/README.en.md)
## Feature
- ### UI 和資料邏輯分離
將前端介面與資料邏輯分開，創建更清晰的結構，簡化維護工作。
> RenderJS 是一個專注於 JavaScript 原生物件 prototype 擴展的輕量工具，提供強大的 DOM 操作能力與資料處理方法，減少重複代碼，提升開發效率。
- ### 減少重複代碼
減少重複的代碼段，提高代碼簡潔性。
## 特點
- ### 提高代碼可讀性
模組化設計提升代碼可讀性，使其更易於理解和協作。
- **DOM 操作簡化**：使用簡潔的鏈式語法，輕鬆完成複雜的 DOM 操作。
- **增強查詢功能**：透過簡化選擇器語法，快速獲取元素，支援單一與多元素選取。
- **預設多項擴展**：預設多項 prototype 擴展，加速各種場景的開發。
- **即插即用**：與現有 JavaScript 程式無縫整合，支持現代瀏覽器。
- ### 監控資料變更
基於資料變更自動更新用戶介面，減少手動 DOM 操作步驟。
## 安裝方式
- ### 自動渲染
減少手動 DOM 操作，專注於應用的邏輯。
- 從 npm 安裝
```bash
npm i @pardnchiu/renderjs
```
- ### 輕量化
保證全功能的同時，最小化對網站速度的影響。
- 從 CDN 引入
```html
<!-- Version 2.0.0 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/renderjs@[VERSION]/dist/RenderJS.js"></script>
### 創建者
<img src="https://pardn.io/image/head-s.jpg" align="left" style="float: left; margin-right: 0.5rem; width: 96px; height: 96px;" />
<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
[![](https://pardn.io/image/mail.svg)](mailto:mail@pardn.ltd) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu)
### 許可證
此源代碼專案已根據 [GPL-3.0](https://github.com/pardnchiu/PDRenderKit/blob/main/LICENSE) 許可證授權。
### 使用方法
- #### 直接下載套件
```Shell
npm install pdrenderkit
<!-- Version 1.5.2 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdrenderkit@[VERSION]/dist/PDRenderKit.js"></script>
```
- #### 或通過 `cdn.jsdelivr.new` 引入
```HTML
<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd">
```
## 功能介紹
- #### PD (formerly named $dom)
自動渲染：加載自動渲染並在檢測到資料變更後自動渲染。
| tag | description |
| --- | --- |
| {{value}} | 將文字插入到 HTML 標籤中，並根據資料變更更新值。 |
| :path | 將外部文件中的 HTML 片段加載到當前頁面。 |
| :html | 使用文字替換元素的 innerHTML。 |
| :for | 支持 item in items、(item, index) in items、(key, value) in object。<br>遍歷數據集合，為重複數據顯示生成相應的 HTML 元素。 |
| :if<br>:else-if<br>:else | 根據指定條件顯示或隱藏元素，為實現分支邏輯添加多種選項。 |
| :model | 將資料綁定到表單元素（如 input），當輸入更改時自動更新資料。 |
| :hide | 隱藏元素，根據特定條件顯示它們。 |
| :once | 只執行一次綁定或操作。 |
| :[attr] | 設定元素屬性，例如 ID、class、圖像來源等。<br>例如：:id/:class/:src/:alt/:href... |
| @[event] | 添加事件監聽器，當事件觸發時執行指定操作。<br>例如：@click/@input/@mousedown... |
| :@[event] | 為迴圈內的單個元素設置事件處理程序，允許為每個元素設置不同的事件處理。 |
- ##### `:path` / `:html`
*確保在測試 `:path` 時禁用瀏覽器中的本地文件限制或使用實時服務器。*
- test.html
```html
<h1>path heading</h1>
<p>path content</p>
```
- index.html
```html
<body id="app">
<section :path="./test.html"></section>
<section :html="html"></section>
</body>
<script>
const app = new PD({
id: "app",
data: {
html: "<b>innerHtml</b>"
}
});
</script>
```
- Result
```html
<body id="app">
<h1>path heading</h1>
<p>path content</p>
<section>
<b>innerHtml</b>
</section>
</body>
```
- ##### `:for`
- index.html
```html
<body id="app">
<ul>
<li :for="(item, index) in ary" :id="item" :index="index">{{ item }} {{ CALC(index + 1) }}</li>
</ul>
</body>
<script>
const app = new PD({
id: "app",
data: {
ary: ["test1", "test2", "test3"]
}
});
</script>
```
- Result
```html
<body id="app">
<li id="test1" index="0">test1 1</li>
<li id="test2" index="1">test2 2</li>
<li id="test3" index="2">test3 3</li>
</body>
```
- ##### 嵌套 `:for` 迴圈
- index.html
```html
<body id="app">
<ul>
<li :for="(key, val) in obj">
{{ key }}: {{ val.name }}
<ul>
<li :for="item in val.ary">
{{ item.name }}
<ul>
<li :for="(item1, index1) in item.ary1">
{{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
<script>
const app = new PD({
id: "app",
data: {
obj: {
food: {
name: "Food",
ary: [
{
name: 'Snacks',
ary1: [
{ name: 'Potato Chips', price: 10 },
{ name: 'Chocolate', price: 8 }
]
},
{
name: 'Beverages',
ary1: [
{ name: 'Juice', price: 5 },
{ name: 'Tea', price: 3 }
]
}
]
},
home: {
name: 'Home',
ary: [
{
name: 'Furniture',
ary1: [
{ name: 'Sofa', price: 300 },
{ name: 'Table', price: 150 }
]
},
{
name: 'Decorations',
ary1: [
{ name: 'Picture Frame', price: 20 },
{ name: 'Vase', price: 15 }
]
}
]
}
}
}
});
</script>
```
- Result
```html
<body id="app">
<ul>
<li>food: Food
<ul>
<li>Snacks
<ul>
<li>1. Potato Chips - $10</li>
<li>2. Chocolate - $8</li>
</ul>
</li>
<li>Beverages
<ul>
<li>1. Juice - $5</li>
<li>2. Tea - $3</li>
</ul>
</li>
</ul>
</li>
<li>home: Home
<ul>
<li>Furniture
<ul>
<li>1. Sofa - $300</li>
<li>2. Table - $150</li>
</ul>
</li>
<li>Decorations
<ul>
<li>1. Picture Frame - $20</li>
<li>2. Vase - $15</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
```
- ##### `:if`
- index.html
```html
<body id="app">
<h1 :if="heading == 1">{{ title }} {{ heading }}</h1>
<h2 :else-if="isH2">{{ title }} {{ heading }}</h2>
<h3 :else-if="heading == 3">{{ title }} {{ heading }}</h3>
<h4 :else>{{ title }} {{ heading }}</h4>
</body>
<script>
const app = new PD({
id: "app",
data: {
heading: [Number|null],
isH2: [Boolean|null],
title: "test"
}
});
</script>
```
- Result: `heading = 1`
```html
<body id="app">
<h1>test 1</h1>
</body>
```
- Result: `heading = null && isH2 = true`
```html
<body id="app">
<h2>test </h2>
</body>
```
- Result: `heading = 3 && isH2 = null`
```html
<body id="app">
<h3>test 3</h3>
</body>
```
- Result: `heading = null && isH2 = null`
```html
<body id="app">
<h4>test </h4>
</body>
```
- ##### `@event`
- index.html
```html
<body id="app">
<button @click="test">test</button>
</body>
<script>
const app = new PD({
id: "app",
event: {
test: function(e){
alert(e.target.innerText + " clicked");
}
}
});
</script>
```
- ##### 更多屬性
`:padding`, `:margin`, `:border`, `:border-radius`, `:outline`, `:box-sahdow`, `:bg-image`, `:bg-attachment`, `:bg-blend-mode`, `:bg-clip`, `:bg-origin`, `:bg-position`, `:bg-position-x`, `:bg-position-y`, `:bg-repeat`, `:bg-size`, `:bg-color`, `:color`
- ##### 函式
- ###### `LENGTH()`:
- index.html
```HTML
<body id="app">
<p>Total: {{ LENGTH(array) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
array: [1, 2, 3, 4]
}
});
</script>
```
- result
```HTML
<body id="app">
<p>Total: 4</p>
</body>
```
- ###### `CALC()`:
- index.html
```HTML
<body id="app">
<p>calc: {{ CALC(num * 10) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
num: 1
}
});
</script>
```
- result
```HTML
<body id="app">
<p>calc: 10</p>
</body>
```
- ###### `UPPER()` / `LOWER()`
- index.html
```HTML
<body id="app">
<p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
test1: "upper",
test2: "LOWER"
}
});
</script>
```
- result
```HTML
<body id="app">
<p>UPPER lower</p>
</body>
```
- ###### `DATE(num, format)`:
- index.html
```HTML
<body id="app">
<p>{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
now: Math.floor(Date.now() / 1000)
}
});
</script>
```
- result
```HTML
<body id="app">
<p>2024-08-17 03:40:47</p>
</body>
```
- ##### 渲染完成
```html
<body id="app"></body>
<script>
const app = new PD({
id: "app",
next: function () {
console.log("Rendering completed");
}
});
</script>
```
### 擴展

@@ -459,3 +105,3 @@

```
- #### 獲取元素

@@ -471,3 +117,3 @@ - Before

```javascript
"#test".$;
"test".$;
"div.test".$;

@@ -502,5 +148,66 @@ "div.test".$all;

### 簡化版前端框架
> [!NOTE]
> **RJS 是基於 [QuickUI](https://pardn.ltd/QuickUI) 的簡化版前端框架**，專為特定專案設計。<br>
> - 使用非 vDOM 技術進行渲染，提升效能並降低複雜性。
> - 移除自動監聽與自動更新功能，由開發者手動控制更新流程。
> - 新增 `renew()` 函式，支援資料與事件的精確更新。
- #### 可用屬性
| tag | description |
| --- | --- |
| {{value}} | 將文字插入到 HTML 標籤中，並根據資料變更更新值。 |
| :path | 將外部文件中的 HTML 片段加載到當前頁面。 |
| :html | 使用文字替換元素的 innerHTML。 |
| :for | 支持 item in items、(item, index) in items、(key, value) in object。<br>遍歷數據集合，為重複數據顯示生成相應的 HTML 元素。 |
| :if<br>:else-if<br>:el-if<br>:else | 根據指定條件顯示或隱藏元素，為實現分支邏輯添加多種選項。 |
| :model | 將資料綁定到表單元素（如 input），當輸入更改時自動更新資料。 |
| :[attr] | 設定元素屬性，例如 ID、class、圖像來源等。<br>例如：:id/:class/:src/:alt/:href... |
| :[css] | |
| @[event] | 添加事件監聽器，當事件觸發時執行指定操作。<br>例如：@click/@input/@mousedown... |
- #### 初始化 `RJS`
```JavaScript
const app = "(元件ID)".RJS({
data: {
// 定義資料
},
event: {
// 定義事件
},
when: {
before_render: function () {
// 在渲染前執行（可停止渲染）
// return false
},
rendered: function () {
// 渲染完成後執行
}
}
});
```
- #### 更新 `RJS`
```JavaScript
app.renew({
// data: 僅填寫需要更新的資料項目，未填部分將保留初始化時的資料。
// event: 僅填寫需要更新的事件項目，未填部分將保留初始化時的事件。
// when: 僅填寫需要更新的生命周期邏輯，未填部分將保留初始化時的邏輯。
});
```
## 開發者
<img src="https://avatars.githubusercontent.com/u/25631760" align="left" width="96" height="96" style="margin-right: 0.5rem;" />
<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>
[![](https://pardn.io/image/mail.svg)](mailto:dev@pardn.io) [![](https://skillicons.dev/icons?i=linkedin)](https://linkedin.com/in/pardnchiu)
## 授權條款
本專案依據 [MIT](https://github.com/pardnchiu/RenderJS/blob/main/LICENSE) 授權使用。
***
©️ 2023 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
©️ 2022 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)
dist/PDRenderKit.js
index.html
src/interface.ts
static/image/404.svg
static/js/index.js
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc