
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
pdrenderkit
Advanced tools
PDRenderKit contains a lightweight front-end framework designed to separate the front-end user interface and data logic.
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.
Segregates front-end presentation from data logic, creating a clearer structure and simplifying maintenance tasks.
Provides tools and utilities to minimize repetitive code sections, improving code conciseness.
Modular design enhances code readability, making it easier to understand and collaborate on.
Automatically updates the user interface in real-time based on data changes, reducing manual DOM manipulation steps.
Reduces manual DOM manipulation, allowing you to focus more on the core logic of your application.
Ensuring full functionality with minimal impact on your website's speed.
This source code project is licensed under the GPL-3.0 license.
npm install pdrenderkit
cdn.jsdelivr.new
<script src="https://cdn.jsdelivr.net/gh/pardnchiu/PDRenderKit@[VERSION]/dist/PDRenderKit.js" copyright="Pardn Ltd">
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. Iterate through a data collection and generate corresponding HTML elements for repetitive data display. |
:if :else-if :else | 根據指定條件顯示或隱藏元素,為實現分支邏輯添加多種選項。 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. For example: :id/:class/:src/:alt/:href... |
@[event] | Add event listeners to execute specified actions when events are triggered. 例如:@click/@input/@mousedown... For example: @click/@input/@mousedown... |
:@[event] | Set event handlers for individual elements within a loop, allowing different event handling for each element. |
:path
/ :html
:path
.
<h1>path heading</h1>
<p>path content</p>
<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>
<body id="app">
<h1>path heading</h1>
<p>path content</p>
<section>
<b>innerHtml</b>
</section>
</body>
:for
<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>
<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
Loop<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>
<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
<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>
heading = 1
<body id="app">
<h1>test 1</h1>
</body>
heading = null && isH2 = true
<body id="app">
<h2>test </h2>
</body>
heading = 3 && isH2 = null
<body id="app">
<h3>test 3</h3>
</body>
heading = null && isH2 = null
<body id="app">
<h4>test </h4>
</body>
@event
<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()
:<body id="app">
<p>Total: {{ LENGTH(array) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
array: [1, 2, 3, 4]
}
});
</script>
<body id="app">
<p>Total: 4</p>
</body>
CALC()
:<body id="app">
<p>calc: {{ CALC(num * 10) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
num: 1
}
});
</script>
<body id="app">
<p>calc: 10</p>
</body>
UPPER()
/ LOWER()
<body id="app">
<p>{{ UPPER(test1) }} {{ LOWER(test2) }}</p>
</body>
<script>
const app = new PD({
id: "app",
data: {
test1: "upper",
test2: "LOWER"
}
});
</script>
<body id="app">
<p>UPPER lower</p>
</body>
DATE(num, format)
:<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>
<body id="app">
<p>2024-08-17 03:40:47</p>
</body>
<body id="app"></body>
<script>
const app = new PD({
id: "app",
next: function () {
console.log("Rendering completed");
}
});
</script>
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 = "<span>test</span> 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);
document.body._child(
"section#test"._([
"button"._({
style: {
width: "10rem",
hright: "2rem",
backgroundColor: "steelblue",
color: "#fff"
}
}, [
// or "<span>test</span> 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
});
document.getElementById("test");
document.querySelector("div.test");
document.querySelectorAll("div.test");
document.querySelector("input[name='test']");
"#test".$;
"div.test".$;
"div.test".$all;
"input[name='test']".$;
<div class="test" style="width: 5rem; height: 80px;" test="test">
<button>
<img src="https://xxxxxx">
</button>
</div>
"div.test"._({
style: {
width: "5rem",
height: 80,
},
test: "test"
}, [
"button"._([
"img"._("https://xxxxxx")
])
]);
All translations powered by ChatGPT
©️ 2023 邱敬幃 Pardn Chiu
FAQs
A lightweight frontend rendering tool focusing on real-time DOM manipulation and flexible utilities for small to medium projects.
The npm package pdrenderkit receives a total of 14 weekly downloads. As such, pdrenderkit popularity was classified as not popular.
We found that pdrenderkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.