@ktjs/vite-plugin-ktjsx 0.4.5 → 0.4.6

package/README.md

@@ -1,32 +1,71 @@
-# vite-plugin-ktjsx
+# KT.js
 
-light, manual‑control web framework that creates real DOM elements with built‑in reactive state management.
-
-[![npm version](https://img.shields.io/npm/v/vite-plugin-ktjsx.svg)](https://www.npmjs.com/package/vite-plugin-ktjsx)
-[![npm downloads](https://img.shields.io/npm/dm/vite-plugin-ktjsx.svg)](https://www.npmjs.com/package/vite-plugin-ktjsx)
+[![npm version](https://img.shields.io/npm/v/kt.js.svg)](https://www.npmjs.com/package/kt.js)
+[![npm downloads](https://img.shields.io/npm/dm/kt.js.svg)](https://www.npmjs.com/package/kt.js)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-`@ktjs/vite-plugin-ktjsx` applies KT.js JSX transforms in Vite.
+<p align="center">
+  <a href="https://baendlorel.github.io/kt.js/">
+    <img src="https://raw.githubusercontent.com/baendlorel/kt.js/refs/heads/main/assets/ktjs-0.0.1.svg" width="240px" alt="KT.js logo" />
+  </a>
+</p>
+
+<p align="center"><strong>Visit KT.js: <a href="https://baendlorel.github.io/kt.js/">https://baendlorel.github.io/kt.js/</a></strong></p>
+
+> kt.js is still under development, so there might be some breaking changes. Note the Update Log below
+
+## Recent Updates
+
+1. `ref.value` remains the standard read API, and it can also replace the whole outer value with `ref.value = nextValue`.
+2. `ref.draft` is the deep-mutation entry for nested objects, arrays, `Map` / `Set`, and custom mutable objects.
+3. `ref.draft` itself is not assignable; mutate nested fields or call mutating methods on the returned object instead.
+4. `addOnChange((newValue, oldValue) => ...)` keeps `oldValue` as the previous reference, not a deep snapshot.
+
+## Community
+
+- QQ Group: `1070434849`
+- Telegram: https://t.me/kt_js
 
-It reuses the shared `@ktjs/transformer` core (also used by `@ktjs/babel-plugin-ktjsx`), so behavior is the same:
+## Introduction
 
-- mark SVG / MathML subtrees with KT.js namespace flags
-- compile adjacent `k-if` + `k-else` siblings into `KTConditional(...)`
-- warn and leave `k-else-if` unchanged (currently unsupported)
+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.
 
-Basic usage:
+KT.js focuses on one principle: keep direct control of the DOM and avoid unnecessary repainting.
+
+## Reactive Contract
 
 ```ts
-import { defineConfig } from 'vite';
-import ktjsx from '@ktjs/vite-plugin-ktjsx';
+const user = ref({ profile: { name: 'John' }, tags: ['new'] });
+
+console.log(user.value.profile.name); // read
 
-export default defineConfig({
-  plugins: [ktjsx()],
-});
+user.value = {
+  ...user.value,
+  profile: { ...user.value.profile, name: 'Jane' },
+  tags: [...user.value.tags],
+}; // replace the whole outer value
+
+user.draft.profile.name = 'Jane'; // deep write
+user.draft.tags.push('active'); // array / map / set / custom-object style mutation
 ```
 
-Options:
+Rules:
+
+- Read with `.value`.
+- Replace the whole outer value with `.value = nextValue`.
+- Use `.draft` for deep mutations on nested objects, arrays, `Map` / `Set`, or other mutable instances.
+- Do not assign to `.draft` itself; mutate inside it.
+- `computed` stays read-only and is consumed through `.value`.
+- `oldValue` in change listeners is the previous reference only, not a deep-cloned snapshot.
+- Correctness is expected to come from the transformer and TypeScript checks; runtime hot paths stay minimal on purpose.
 
-- `include` - custom file matcher (`RegExp` or predicate function)
-- `exclude` - files to skip (`RegExp` or predicate function)
-- `babelConfig` - additional Babel transform options
+This is an explicit contract, closer to a Rust-style model than permissive runtime magic: unclear code should fail early.
+
+## Quick Start
+
+```bash
+pnpm create kt.js my-app
+cd my-app
+pnpm install
+pnpm dev
+```

package/dist/index.mjs

@@ -1,53 +1,25 @@
-import { transformWithKTjsx } from '@ktjs/transformer';
+import { transformWithKTjsx } from "@ktjs/transformer";
+
+const DEFAULT_INCLUDE_RE = /\.[cm]?[jt]sx$/, NODE_MODULES_RE = /\/node_modules\//, QUERY_RE = /\?.*$/, matchFilter = (filter, id) => !!filter && ("function" == typeof filter ? filter(id) : (filter.lastIndex = 0, 
+filter.test(id)));
 
-const DEFAULT_INCLUDE_RE = /\.[cm]?[jt]sx$/;
-const NODE_MODULES_RE = /\/node_modules\//;
-const QUERY_RE = /\?.*$/;
-const stripQuery = (id) => id.replace(QUERY_RE, '');
-const matchFilter = (filter, id) => {
-    if (!filter) {
-        return false;
-    }
-    if (typeof filter === 'function') {
-        return filter(id);
-    }
-    filter.lastIndex = 0;
-    return filter.test(id);
-};
-const shouldTransform = (id, include, exclude) => {
-    if (id.startsWith('\0') || NODE_MODULES_RE.test(id)) {
-        return false;
-    }
-    if (exclude && matchFilter(exclude, id)) {
-        return false;
-    }
-    if (include) {
-        return matchFilter(include, id);
-    }
-    return DEFAULT_INCLUDE_RE.test(id);
-};
 function viteKTjsx(options = {}) {
     return {
-        name: 'ktjs:vite-plugin-ktjsx',
-        enforce: 'pre',
+        name: "ktjs:vite-plugin-ktjsx",
+        enforce: "pre",
         async transform(code, id) {
-            const cleanId = stripQuery(id);
-            if (!shouldTransform(cleanId, options.include, options.exclude)) {
-                return null;
-            }
+            const cleanId = (id => id.replace(QUERY_RE, ""))(id);
+            if (!((id, include, exclude) => !id.startsWith("\0") && !NODE_MODULES_RE.test(id) && (!exclude || !matchFilter(exclude, id)) && (include ? matchFilter(include, id) : DEFAULT_INCLUDE_RE.test(id)))(cleanId, options.include, options.exclude)) return null;
             const result = await transformWithKTjsx(code, {
                 filename: cleanId,
                 sourceFileName: cleanId,
-                ...options.babelConfig,
+                ...options.babelConfig
             });
-            if (!result?.code) {
-                return null;
-            }
-            return {
+            return result?.code ? {
                 code: result.code,
-                map: result.map ?? null,
-            };
-        },
+                map: result.map ?? null
+            } : null;
+        }
     };
 }
 

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/index.ts"],"sourcesContent":["import type { Plugin } from 'vite';\nimport { transformWithKTjsx, type KTjsxTransformOptions } from '@ktjs/transformer';\n\ntype Filter = RegExp | ((id: string) => boolean);\n\nexport interface ViteKTjsxOptions {\n  include?: Filter;\n  exclude?: Filter;\n  babelConfig?: Record<string, unknown>;\n}\n\nconst DEFAULT_INCLUDE_RE = /\\.[cm]?[jt]sx$/;\nconst NODE_MODULES_RE = /\\/node_modules\\//;\nconst QUERY_RE = /\\?.*$/;\ntype InternalTransformOptions = Omit<KTjsxTransformOptions, 'filename' | 'sourceFileName'>;\n\nconst stripQuery = (id: string) => id.replace(QUERY_RE, '');\n\nconst matchFilter = (filter: Filter | undefined, id: string): boolean => {\n  if (!filter) {\n    return false;\n  }\n\n  if (typeof filter === 'function') {\n    return filter(id);\n  }\n\n  filter.lastIndex = 0;\n  return filter.test(id);\n};\n\nconst shouldTransform = (id: string, include?: Filter, exclude?: Filter): boolean => {\n  if (id.startsWith('\\0') || NODE_MODULES_RE.test(id)) {\n    return false;\n  }\n\n  if (exclude && matchFilter(exclude, id)) {\n    return false;\n  }\n\n  if (include) {\n    return matchFilter(include, id);\n  }\n\n  return DEFAULT_INCLUDE_RE.test(id);\n};\n\nexport function viteKTjsx(options: ViteKTjsxOptions = {}): Plugin {\n  return {\n    name: 'ktjs:vite-plugin-ktjsx',\n    enforce: 'pre',\n    async transform(code, id) {\n      const cleanId = stripQuery(id);\n      if (!shouldTransform(cleanId, options.include, options.exclude)) {\n        return null;\n      }\n\n      const result = await transformWithKTjsx(code, {\n        filename: cleanId,\n        sourceFileName: cleanId,\n        ...(options.babelConfig as InternalTransformOptions),\n      });\n\n      if (!result?.code) {\n        return null;\n      }\n\n      return {\n        code: result.code,\n        map: result.map ?? null,\n      };\n    },\n  };\n}\n\nexport default viteKTjsx;\n"],"names":[],"mappings":";;AAWA,MAAM,kBAAkB,GAAG,gBAAgB;AAC3C,MAAM,eAAe,GAAG,kBAAkB;AAC1C,MAAM,QAAQ,GAAG,OAAO;AAGxB,MAAM,UAAU,GAAG,CAAC,EAAU,KAAK,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;AAE3D,MAAM,WAAW,GAAG,CAAC,MAA0B,EAAE,EAAU,KAAa;IACtE,IAAI,CAAC,MAAM,EAAE;AACX,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE;AAChC,QAAA,OAAO,MAAM,CAAC,EAAE,CAAC;IACnB;AAEA,IAAA,MAAM,CAAC,SAAS,GAAG,CAAC;AACpB,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,CAAC;AAED,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,OAAgB,KAAa;AAClF,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnD,QAAA,OAAO,KAAK;IACd;IAEA,IAAI,OAAO,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,KAAK;IACd;IAEA,IAAI,OAAO,EAAE;AACX,QAAA,OAAO,WAAW,CAAC,OAAO,EAAE,EAAE,CAAC;IACjC;AAEA,IAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC;AACpC,CAAC;AAEK,SAAU,SAAS,CAAC,OAAA,GAA4B,EAAE,EAAA;IACtD,OAAO;AACL,QAAA,IAAI,EAAE,wBAAwB;AAC9B,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,MAAM,SAAS,CAAC,IAAI,EAAE,EAAE,EAAA;AACtB,YAAA,MAAM,OAAO,GAAG,UAAU,CAAC,EAAE,CAAC;AAC9B,YAAA,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE;AAC/D,gBAAA,OAAO,IAAI;YACb;AAEA,YAAA,MAAM,MAAM,GAAG,MAAM,kBAAkB,CAAC,IAAI,EAAE;AAC5C,gBAAA,QAAQ,EAAE,OAAO;AACjB,gBAAA,cAAc,EAAE,OAAO;gBACvB,GAAI,OAAO,CAAC,WAAwC;AACrD,aAAA,CAAC;AAEF,YAAA,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE;AACjB,gBAAA,OAAO,IAAI;YACb;YAEA,OAAO;gBACL,IAAI,EAAE,MAAM,CAAC,IAAI;AACjB,gBAAA,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,IAAI;aACxB;QACH,CAAC;KACF;AACH;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/index.ts"],"sourcesContent":["import type { Plugin } from 'vite';\nimport { transformWithKTjsx, type KTjsxTransformOptions } from '@ktjs/transformer';\n\ntype Filter = RegExp | ((id: string) => boolean);\n\nexport interface ViteKTjsxOptions {\n  include?: Filter;\n  exclude?: Filter;\n  babelConfig?: Record<string, unknown>;\n}\n\nconst DEFAULT_INCLUDE_RE = /\\.[cm]?[jt]sx$/;\nconst NODE_MODULES_RE = /\\/node_modules\\//;\nconst QUERY_RE = /\\?.*$/;\ntype InternalTransformOptions = Omit<KTjsxTransformOptions, 'filename' | 'sourceFileName'>;\n\nconst stripQuery = (id: string) => id.replace(QUERY_RE, '');\n\nconst matchFilter = (filter: Filter | undefined, id: string): boolean => {\n  if (!filter) {\n    return false;\n  }\n\n  if (typeof filter === 'function') {\n    return filter(id);\n  }\n\n  filter.lastIndex = 0;\n  return filter.test(id);\n};\n\nconst shouldTransform = (id: string, include?: Filter, exclude?: Filter): boolean => {\n  if (id.startsWith('\\0') || NODE_MODULES_RE.test(id)) {\n    return false;\n  }\n\n  if (exclude && matchFilter(exclude, id)) {\n    return false;\n  }\n\n  if (include) {\n    return matchFilter(include, id);\n  }\n\n  return DEFAULT_INCLUDE_RE.test(id);\n};\n\nexport function viteKTjsx(options: ViteKTjsxOptions = {}): Plugin {\n  return {\n    name: 'ktjs:vite-plugin-ktjsx',\n    enforce: 'pre',\n    async transform(code, id) {\n      const cleanId = stripQuery(id);\n      if (!shouldTransform(cleanId, options.include, options.exclude)) {\n        return null;\n      }\n\n      const result = await transformWithKTjsx(code, {\n        filename: cleanId,\n        sourceFileName: cleanId,\n        ...(options.babelConfig as InternalTransformOptions),\n      });\n\n      if (!result?.code) {\n        return null;\n      }\n\n      return {\n        code: result.code,\n        map: result.map ?? null,\n      };\n    },\n  };\n}\n\nexport default viteKTjsx;\n"],"names":["DEFAULT_INCLUDE_RE","NODE_MODULES_RE","QUERY_RE","matchFilter","filter","id","lastIndex","test","viteKTjsx","options","name","enforce","transform","code","cleanId","replace","stripQuery","include","exclude","startsWith","shouldTransform","result","transformWithKTjsx","filename","sourceFileName","babelConfig","map"],"mappings":";;AAWA,MAAMA,qBAAqB,kBACrBC,kBAAkB,oBAClBC,WAAW,SAKXC,cAAc,CAACC,QAA4BC,SAC1CD,WAIiB,qBAAXA,SACFA,OAAOC,OAGhBD,OAAOE,YAAY;AACZF,OAAOG,KAAKF;;AAmBf,SAAUG,UAAUC,UAA4B;IACpD,OAAO;QACLC,MAAM;QACNC,SAAS;QACT,eAAMC,CAAUC,MAAMR;YACpB,MAAMS,UApCO,CAACT,MAAeA,GAAGU,QAAQb,UAAU,IAoClCc,CAAWX;YAC3B,KAtBkB,EAACA,IAAYY,SAAkBC,aACjDb,GAAGc,WAAW,UAASlB,gBAAgBM,KAAKF,SAI5Ca,YAAWf,YAAYe,SAASb,SAIhCY,UACKd,YAAYc,SAASZ,MAGvBL,mBAAmBO,KAAKF,KAStBe,CAAgBN,SAASL,QAAQQ,SAASR,QAAQS,UACrD,OAAO;YAGT,MAAMG,eAAeC,mBAAmBT,MAAM;gBAC5CU,UAAUT;gBACVU,gBAAgBV;mBACZL,QAAQgB;;YAGd,OAAKJ,QAAQR,OAIN;gBACLA,MAAMQ,OAAOR;gBACba,KAAKL,OAAOK,OAAO;gBALZ;AAOX;;AAEJ;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/vite-plugin-ktjsx",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Vite plugin that applies KT.js JSX transforms.",
   "description_zh": "用于应用 KT.js JSX 转换的 Vite 插件。",
   "type": "module",