@ktjs/babel-plugin-ktjsx 0.4.5 → 0.4.6
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 +53 -35
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,53 +1,71 @@
|
|
|
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
|
-
|
|
8
|
-
- validate directive combinations (`k-if` + `k-else`, and `k-for` mixed with conditional directives)
|
|
9
|
-
- transform `k-for` into `source.map(...)` and remove `k-for` / `k-key` attributes
|
|
10
|
-
- compile adjacent `k-if` + `k-else` siblings into `KTConditional(...)`
|
|
11
|
-
- warn and leave `k-else-if` unchanged (currently unsupported)
|
|
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>
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
> kt.js is still under development, so there might be some breaking changes. Note the Update Log below
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
pnpm add -D @ktjs/babel-plugin-ktjsx @babel/core
|
|
17
|
-
```
|
|
17
|
+
## Recent Updates
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
1. `ref.value` remains the standard read API, and it can also replace the whole outer value with `ref.value = nextValue`.
|
|
20
|
+
2. `ref.draft` is the deep-mutation entry for nested objects, arrays, `Map` / `Set`, and custom mutable objects.
|
|
21
|
+
3. `ref.draft` itself is not assignable; mutate nested fields or call mutating methods on the returned object instead.
|
|
22
|
+
4. `addOnChange((newValue, oldValue) => ...)` keeps `oldValue` as the previous reference, not a deep snapshot.
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
// babel.config.mjs
|
|
23
|
-
import ktjsx from '@ktjs/babel-plugin-ktjsx';
|
|
24
|
+
## Community
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
};
|
|
28
|
-
```
|
|
26
|
+
- QQ Group: `1070434849`
|
|
27
|
+
- Telegram: https://t.me/kt_js
|
|
29
28
|
|
|
30
|
-
##
|
|
29
|
+
## Introduction
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
// babel.config.cjs
|
|
34
|
-
const { default: ktjsx } = require('@ktjs/babel-plugin-ktjsx');
|
|
31
|
+
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.
|
|
35
32
|
|
|
36
|
-
|
|
37
|
-
plugins: [ktjsx],
|
|
38
|
-
};
|
|
39
|
-
```
|
|
33
|
+
KT.js focuses on one principle: keep direct control of the DOM and avoid unnecessary repainting.
|
|
40
34
|
|
|
41
|
-
##
|
|
35
|
+
## Reactive Contract
|
|
42
36
|
|
|
43
37
|
```ts
|
|
44
|
-
|
|
38
|
+
const user = ref({ profile: { name: 'John' }, tags: ['new'] });
|
|
39
|
+
|
|
40
|
+
console.log(user.value.profile.name); // read
|
|
41
|
+
|
|
42
|
+
user.value = {
|
|
43
|
+
...user.value,
|
|
44
|
+
profile: { ...user.value.profile, name: 'Jane' },
|
|
45
|
+
tags: [...user.value.tags],
|
|
46
|
+
}; // replace the whole outer value
|
|
47
|
+
|
|
48
|
+
user.draft.profile.name = 'Jane'; // deep write
|
|
49
|
+
user.draft.tags.push('active'); // array / map / set / custom-object style mutation
|
|
45
50
|
```
|
|
46
51
|
|
|
47
|
-
|
|
48
|
-
|
|
52
|
+
Rules:
|
|
53
|
+
|
|
54
|
+
- Read with `.value`.
|
|
55
|
+
- Replace the whole outer value with `.value = nextValue`.
|
|
56
|
+
- Use `.draft` for deep mutations on nested objects, arrays, `Map` / `Set`, or other mutable instances.
|
|
57
|
+
- Do not assign to `.draft` itself; mutate inside it.
|
|
58
|
+
- `computed` stays read-only and is consumed through `.value`.
|
|
59
|
+
- `oldValue` in change listeners is the previous reference only, not a deep-cloned snapshot.
|
|
60
|
+
- Correctness is expected to come from the transformer and TypeScript checks; runtime hot paths stay minimal on purpose.
|
|
61
|
+
|
|
62
|
+
This is an explicit contract, closer to a Rust-style model than permissive runtime magic: unclear code should fail early.
|
|
49
63
|
|
|
50
|
-
##
|
|
64
|
+
## Quick Start
|
|
51
65
|
|
|
52
|
-
|
|
53
|
-
|
|
66
|
+
```bash
|
|
67
|
+
pnpm create kt.js my-app
|
|
68
|
+
cd my-app
|
|
69
|
+
pnpm install
|
|
70
|
+
pnpm dev
|
|
71
|
+
```
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default, transformWithKTjsx, transformerKTjsx } from
|
|
1
|
+
export { default, transformWithKTjsx, transformerKTjsx } from "@ktjs/transformer";
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|