Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pardnchiu/pdrenderkit
A lightweight front-end framework designed to separate the front-end user interface from data logic. 一個輕量級的前端框架，分離前端使用者介面與資料邏輯。
https://github.com/pardnchiu/pdrenderkit
front-end-framework javascript-library
Last synced: about 2 months ago
JSON representation
A lightweight front-end framework designed to separate the front-end user interface from data logic. 一個輕量級的前端框架，分離前端使用者介面與資料邏輯。
- Host: GitHub
- URL: https://github.com/pardnchiu/pdrenderkit
- Owner: pardnchiu
- License: gpl-3.0
- Created: 2023-08-24T18:16:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-12T16:49:23.000Z (3 months ago)
- Last Synced: 2024-10-12T20:36:48.178Z (3 months ago)
- Topics: front-end-framework, javascript-library
- Language: JavaScript
- Homepage: https://pardnchiu.github.io/PDRenderKit/
- Size: 5.03 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PDRenderKit (JavaScript Library)
  
  
[](https://github.com/pardnchiu/PDRenderKit/blob/main/README.zh.md)
PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.
Improving code maintainability and readability while reducing development complexity.
## Feature
- ### Separation of UI and Data Logic:
Segregates front-end presentation from data logic, creating a clearer structure and simplifying maintenance tasks.
- ### Reduction of Repetitive Code:
Provides tools and utilities to minimize repetitive code sections, improving code conciseness.
- ### Improved Code Readability:
Modular design enhances code readability, making it easier to understand and collaborate on.
- ### Data Change Monitoring:
Automatically updates the user interface in real-time based on data changes, reducing manual DOM manipulation steps.
- ### 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
邱敬幃 Pardn Chiu
[](mailto:[email protected]) [](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
```
- #### Or Include via `cdn.jsdelivr.new`
```HTML
```
- #### 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>"
}
});
```
- Result
```html
path heading
path content
innerHtml
```
- ##### `:for`
- index.html
```html
- {{ item }} {{ CALC(index + 1) }}
const app = new PD({
id: "app",
data: {
ary: ["test1", "test2", "test3"]
}
});
```
- Result
```html
```
- ##### Nested `:for` Loop
- index.html
```html
-
{{ key }}: {{ val.name }}
-
{{ item.name }}
-
{{ CALC(index1 + 1) }}. {{ item1.name }} - ${{ item1.price }}
-
-
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 }
]
}
]
}
}
}
});
```
- Result
```html
- food: Food
- Snacks
- 1. Potato Chips - $10
- 2. Chocolate - $8
- Beverages
- 1. Juice - $5
- 2. Tea - $3
- Snacks
- home: Home
- Furniture
- 1. Sofa - $300
- 2. Table - $150
- Decorations
- 1. Picture Frame - $20
- 2. Vase - $15
- Furniture
```
- ##### `:if`
- index.html
```html
{{ title }} {{ heading }}
{{ title }} {{ heading }}
{{ title }} {{ heading }}
{{ title }} {{ heading }}
const app = new PD({
id: "app",
data: {
heading: [Number|null],
isH2: [Boolean|null],
title: "test"
}
});
```
- Result: `heading = 1`
```html
test 1
```
- Result: `heading = null && isH2 = true`
```html
test
```
- Result: `heading = 3 && isH2 = null`
```html
test 3
```
- Result: `heading = null && isH2 = null`
```html
test
```
- ##### `@event`
- index.html
```html
test
const app = new PD({
id: "app",
event: {
test: function(e){
alert(e.target.innerText + " clicked");
}
}
});
```
- ##### 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
Total: {{ LENGTH(array) }}
const app = new PD({
id: "app",
data: {
array: [1, 2, 3, 4]
}
});
```
- result
```HTML
Total: 4
```
- ###### `CALC()`:
- index.html
```HTML
calc: {{ CALC(num * 10) }}
const app = new PD({
id: "app",
data: {
num: 1
}
});
```
- result
```HTML
calc: 10
```
- ###### `UPPER()` / `LOWER()`
- index.html
```HTML
{{ UPPER(test1) }} {{ LOWER(test2) }}
const app = new PD({
id: "app",
data: {
test1: "upper",
test2: "LOWER"
}
});
```
- result
```HTML
UPPER lower
```
- ###### `DATE(num, format)`:
- index.html
```HTML
{{ DATE(now, YYYY-MM-DD hh:mm:ss) }}
const app = new PD({
id: "app",
data: {
now: Math.floor(Date.now() / 1000)
}
});
```
- result
```HTML
2024-08-17 03:40:47
```
- ##### 渲染完成 / Rendering completed
```html
const app = new PD({
id: "app",
next: function () {
console.log("Rendering completed");
}
});
```
### 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")
])
]);
```
***
*All translations powered by ChatGPT*
***
©️ 2023 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)