@ktjs/shortcuts 0.32.3 β 0.32.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -130
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,144 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# KT.js
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/kt.js)
|
|
4
|
+
[](https://www.npmjs.com/package/kt.js)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
<p align="center">
|
|
8
|
+
<a href="https://baendlorel.github.io/kt.js/">
|
|
9
|
+
<img src="https://raw.githubusercontent.com/baendlorel/kt.js/refs/heads/main/assets/ktjs-0.0.1.svg" width="240px" alt="KT.js logo" />
|
|
10
|
+
</a>
|
|
11
|
+
</p>
|
|
6
12
|
|
|
7
|
-
>
|
|
13
|
+
<p align="center"><strong>Visit KT.js: <a href="https://baendlorel.github.io/kt.js/">https://baendlorel.github.io/kt.js/</a></strong></p>
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
## Recent Updates
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
1. Special refs for `Array`, `Set`, `Map`, `WeakMap`, `WeakSet`, `Date` to better track mutations.
|
|
18
|
+
- e.g. `const a = ref.array([1, 2])`, then we can call `a.push(3)` to make a reactive change instead of `a.value.push(3)`.
|
|
19
|
+
2. Fixed issues of `svg` and `mathml` elements.
|
|
12
20
|
|
|
13
|
-
##
|
|
21
|
+
## Community
|
|
14
22
|
|
|
15
|
-
|
|
23
|
+
- QQ Group: `1070434849`
|
|
24
|
+
- Telegram: https://t.me/kt_js
|
|
16
25
|
|
|
17
|
-
##
|
|
26
|
+
## Introduction
|
|
18
27
|
|
|
19
|
-
|
|
20
|
-
- `div`, `span`, `button`, `input`, `a`, etc.
|
|
21
|
-
- Same signature as `h` function but without the tag name
|
|
22
|
-
- Full TypeScript support with proper return types
|
|
23
|
-
- **Form Helpers**: Shortcuts for form elements with better ergonomics
|
|
24
|
-
- Pre-configured form controls
|
|
25
|
-
- Input type helpers
|
|
26
|
-
- **Layout Helpers**: Common layout patterns and containers
|
|
27
|
-
- **`withDefaults`**: Create element factories with default properties
|
|
28
|
-
- Works with both `h` function and shortcut functions
|
|
29
|
-
- Supports nested defaults (defaults on top of defaults)
|
|
30
|
-
- Full type inference for all properties
|
|
28
|
+
kt.js is a simple framework with a tiny runtime that renders real DOM directly (no virtual DOM), uses explicit reactivity variables and gives you manual control over refs, bindings, and redraw timing.
|
|
31
29
|
|
|
32
|
-
|
|
30
|
+
KT.js focuses on one principle: keep direct control of the DOM and avoid unnecessary repainting.
|
|
33
31
|
|
|
34
|
-
|
|
32
|
+
## Quick Start
|
|
35
33
|
|
|
36
34
|
```bash
|
|
37
|
-
pnpm
|
|
35
|
+
pnpm create kt.js my-app
|
|
36
|
+
cd my-app
|
|
37
|
+
pnpm install
|
|
38
|
+
pnpm dev
|
|
38
39
|
```
|
|
39
|
-
|
|
40
|
-
## Basic Usage
|
|
41
|
-
|
|
42
|
-
### Element Shortcuts
|
|
43
|
-
|
|
44
|
-
```typescript
|
|
45
|
-
import { div, span, btn, input, h1, p } from '@ktjs/shortcuts';
|
|
46
|
-
|
|
47
|
-
// Instead of h('div', ...)
|
|
48
|
-
const container = div({ class: 'container' }, [
|
|
49
|
-
h1({}, 'Title'),
|
|
50
|
-
p({}, 'Description'),
|
|
51
|
-
btn({ '@click': () => alert('Hi') }, 'Click me'),
|
|
52
|
-
]);
|
|
53
|
-
|
|
54
|
-
// Form elements
|
|
55
|
-
const form = div('form-wrapper', [
|
|
56
|
-
input({ type: 'text', placeholder: 'Name' }),
|
|
57
|
-
input({ type: 'email', placeholder: 'Email' }),
|
|
58
|
-
btn({ type: 'submit' }, 'Submit'),
|
|
59
|
-
]);
|
|
60
|
-
|
|
61
|
-
// Quick elements with just content
|
|
62
|
-
const title = h1('Welcome');
|
|
63
|
-
const text = span('Hello World');
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### Available Element Shortcuts
|
|
67
|
-
|
|
68
|
-
The following shortcuts are exported from `common.ts`:
|
|
69
|
-
|
|
70
|
-
**Basic**: `div`, `span`, `label`, `a`, `img`
|
|
71
|
-
|
|
72
|
-
**Text**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`
|
|
73
|
-
|
|
74
|
-
**Forms**: `form`, `input`, `button`, `select`, `option`
|
|
75
|
-
|
|
76
|
-
**Lists**: `ul`, `ol`, `li`
|
|
77
|
-
|
|
78
|
-
**Tables**: `table`, `thead`, `tbody`, `tr`, `th`, `td`
|
|
79
|
-
|
|
80
|
-
Each function has the signature:
|
|
81
|
-
|
|
82
|
-
```typescript
|
|
83
|
-
function element(attributes?: KAttribute, content?: KContent): HTMLElement;
|
|
84
|
-
function element(className: string, content?: KContent): HTMLElement;
|
|
85
|
-
function element(content: KContent): HTMLElement;
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
## API Reference
|
|
89
|
-
|
|
90
|
-
## Common Patterns
|
|
91
|
-
|
|
92
|
-
### Component Composition
|
|
93
|
-
|
|
94
|
-
```typescript
|
|
95
|
-
import { div, button, input } from '@ktjs/shortcuts';
|
|
96
|
-
|
|
97
|
-
// Create reusable components
|
|
98
|
-
const createCard = (title: string, content: string) => {
|
|
99
|
-
return div('card', [div('card-title', title), div('card-content', content)]);
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
// Use throughout your app
|
|
103
|
-
const ui = div('app', [createCard('Profile', 'User profile'), createCard('Settings', 'Settings')]);
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### Form Builders
|
|
107
|
-
|
|
108
|
-
```typescript
|
|
109
|
-
import { input, button, div } from '@ktjs/shortcuts';
|
|
110
|
-
|
|
111
|
-
const createTextInput = (placeholder: string, name: string) => {
|
|
112
|
-
return input({ type: 'text', class: 'form-control', placeholder, name });
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
const createSubmitButton = (text: string) => {
|
|
116
|
-
return btn({ type: 'submit', class: 'btn-primary' }, text);
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
const loginForm = div('login-form', [
|
|
120
|
-
createTextInput('Username', 'username'),
|
|
121
|
-
createTextInput('Password', 'password'),
|
|
122
|
-
createSubmitButton('Login'),
|
|
123
|
-
]);
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
## Type System
|
|
127
|
-
|
|
128
|
-
The package includes comprehensive TypeScript definitions with:
|
|
129
|
-
|
|
130
|
-
- Proper element type inference for all shortcuts
|
|
131
|
-
- Attribute and content type checking
|
|
132
|
-
- Event handler type hints
|
|
133
|
-
- Support for conditional types in `withDefaults`
|
|
134
|
-
|
|
135
|
-
## Performance
|
|
136
|
-
|
|
137
|
-
- All shortcut functions are thin wrappers around the `h` function
|
|
138
|
-
- Zero runtime overhead after bundling with tree-shaking
|
|
139
|
-
- `withDefaults` creates minimal closure overhead
|
|
140
|
-
- Native method caching inherited from `@ktjs/core`
|
|
141
|
-
|
|
142
|
-
## License
|
|
143
|
-
|
|
144
|
-
MIT
|
package/package.json
CHANGED