kt.js 0.2.0 → 0.3.0

package/README.md

@@ -1,14 +1,13 @@
 # KT.js
 
 [![npm version](https://img.shields.io/npm/v/kt.js.svg)](https://www.npmjs.com/package/kt.js)
-
 [![license](https://img.shields.io/github/license/baendlorel/kt.js.svg)](https://github.com/baendlorel/kt.js/blob/main/LICENSE)
 
 [CHANGLOG✨](CHANGELOG.md)
 
 > Note: This framework is still under development. APIs, type declarations, and other parts **may change frequently**. If you use it, please watch for updates in the near future. Feel free to mail me if you have any questions!
 
-KT.js is a tiny(1.3KB runtime without alias helpers and 0.68kb gzipped) DOM utility focused on direct DOM manipulation. It favors not forcing re-renders and aims to keep DOM updates to the absolute minimum for maximum performance.
+KT.js is a tiny DOM utility focused on direct DOM manipulation. It favors not forcing re-renders and aims to keep DOM updates to the absolute minimum for maximum performance.
 
 For more awesome packages, check out [my homepage💛](https://baendlorel.github.io/?repoType=npm)
 
@@ -18,8 +17,35 @@ As a web framework, repeatedly creating a large number of variables and objects
 
 KT.js follows one rule: full controll of dom and avoid unless repainting.
 
+## Current Core Features
+
+- `h` function and its aliases
+- Router
+  - Automatically adapts to environment: uses async navigation guards when `Promise` is available, falls back to synchronous mode otherwise
+- **Full ES5 compatibility** - works in IE9+ and other legacy browsers
+  - Transpiled to ES5 with no modern syntax
+  - Optional minimal Promise polyfill included for older environments
+
 ## Getting started
 
+### Using IIFE (direct browser usage)
+
+KT.js provides an IIFE build that can be included directly in HTML:
+
+```html
+<script src="https://unpkg.com/kt.js@0.3.0/dist/index.iife.js"></script>
+<script>
+  // KT is available globally
+  const { h, div } = KT;
+  const app = div('container', 'Hello World');
+  document.body.appendChild(app);
+</script>
+```
+
+### Using ES Modules
+
+Install via package managers:
+
 ```bash
 npm install kt.js
 # or
@@ -116,11 +142,34 @@ console.log(current?.path, current?.params, current?.query);
 - Hash-based routing (`#/path`)
 - Dynamic route parameters (`/user/:id`)
 - Query string parsing (`?key=value`)
-- Async navigation guards (`beforeEach`)
+- Async navigation guards (`beforeEach`) - automatically disabled in non-Promise environments
 - Lifecycle hooks (`afterEach`)
 - Error handling (`onError`)
 - Minimal footprint
 
+## Browser Compatibility
+
+KT.js is transpiled to ES5 and works in all modern browsers as well as legacy browsers including IE9+.
+
+### Promise Polyfill
+
+For environments without native `Promise` support (like IE11 and below), KT.js provides a minimal Promise polyfill:
+
+```html
+<!-- Load the Promise polyfill before KT.js -->
+<script src="https://unpkg.com/kt.js@0.3.0/dist/promise-polyfill.js"></script>
+<script src="https://unpkg.com/kt.js@0.3.0/dist/index.iife.js"></script>
+```
+
+Or when using module bundlers:
+
+```js
+import 'kt.js/dist/promise-polyfill';
+import { h, div, createRouter } from 'kt.js';
+```
+
+**Note:** The Router will work without Promise support, but navigation guards (`beforeEach`) will run synchronously and cannot use async/await patterns.
+
 ## Notes
 
 - `call`, `apply` on `Function.prototype` is trusted.

package/dist/index.d.ts

@@ -70,4 +70,36 @@ declare const img: (attr?: RawAttr, content?: RawContent) => HTMLImageElement;
  */
 declare function h<T extends HTMLTag>(tag: T, attr?: RawAttr, content?: RawContent): HTMLElementTagNameMap[T];
 
-export { a, btn, div, form, h, h1, h2, h3, h4, h5, h6, img, input, label, li, ol, option, p, select, span, table, tbody, td, th, thead, tr, ul };
+// Minimal router types
+
+interface RouteContext {
+  params: Record<string, string>;
+  query: Record<string, string>;
+  path: string;
+  meta?: Record<string, any>;
+}
+
+type RouteHandler = (ctx: RouteContext) => HTMLElement | void | Promise<HTMLElement | void>;
+
+interface RouteConfig {
+  path: string;
+  handler: RouteHandler;
+  meta?: Record<string, any>;
+}
+
+interface RouterConfig {
+  routes: RouteConfig[];
+  container?: HTMLElement;
+  beforeEach?: (to: RouteContext, from: RouteContext | null) => boolean | Promise<boolean>;
+  afterEach?: (to: RouteContext) => void;
+  onError?: (error: Error) => void;
+}
+
+declare function createRouter(config: RouterConfig): {
+    start: () => void;
+    stop: () => void;
+    push: (path: string) => void;
+    current: () => RouteContext | null;
+};
+
+export { a, btn, createRouter, div, form, h, h1, h2, h3, h4, h5, h6, img, input, label, li, ol, option, p, select, span, table, tbody, td, th, thead, tr, ul };

package/dist/index.iife.js

@@ -0,0 +1 @@
+var kt=function(n){"use strict";var t=document.createElement,e=document.createTextNode,r=document.createDocumentFragment,o=function(n){return void 0===n&&(n=""),e.call(document,n)},u=HTMLElement.prototype.addEventListener,i=HTMLElement.prototype.setAttribute,a=HTMLElement.prototype.appendChild,f="function"==typeof HTMLElement.prototype.append?HTMLElement.prototype.append:function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];if(n.length<50)for(var e=0;e<n.length;e++){"string"==typeof(i=n[e])?a.call(this,o(i)):a.call(this,i)}else{var u=r.call(document);for(e=0;e<n.length;e++){var i;"string"==typeof(i=n[e])?a.call(u,o(i)):a.call(u,i)}a.call(this,u)}},c=Array.isArray,d=Object.keys,l=Promise.resolve,v=Promise.reject,s=function(n){throw new Error("Kt.js:".concat(n))};function p(n,t,e){t in n?n[t]=!!e:i.call(n,t,e)}function m(n,t,e){t in n?n[t]=e:i.call(n,t,e)}var h={checked:p,selected:p,value:m,valueAsDate:m,valueAsNumber:m,defaultValue:m,defaultChecked:p,defaultSelected:p,disabled:p,readOnly:p,multiple:p,required:p,autofocus:p,open:p,controls:p,autoplay:p,loop:p,muted:p,defer:p,async:p,hidden:function(n,t,e){n.hidden=!!e}},y=function(n,t,e){return i.call(n,t,e)};function w(n,t){"string"==typeof t?n.className=t:"object"==typeof t&&null!==t?function(n,t){var e=t.class,r=t.style;if(void 0!==e&&(n.className=e,delete t.class),void 0!==r){if("string"==typeof r)i.call(n,"style",r);else for(var o in n.style)n.style[o]=r[o];delete t.style}for(var a=d(t),f=a.length-1;f>=0;f--){var c=t[o=a[f]];"function"!=typeof c?(h[o]||y)(n,o,c):u.call(n,o,c)}void 0!==e&&(t.style=e),void 0!==r&&(t.style=r)}(n,t):s("applyAttr attr must be an object.")}function g(n,e,r){void 0===e&&(e=""),void 0===r&&(r=""),"string"!=typeof n&&s("h tagName must be a string.");var o,u=(o=n,t.call(document,o));return w(u,e),function(n,t){c(t)?f.apply(n,t):f.call(n,t)}(u,r),u}var b=function(n){return function(t,e){return g(n,t,e)}},E=b("div"),H=b("span"),L=b("label"),M=b("p"),R=b("h1"),T=b("h2"),j=b("h3"),k=b("h4"),A=b("h5"),q=b("h6"),C=b("ul"),N=b("ol"),P=b("li"),I=b("button"),O=b("form"),U=b("input"),x=b("select"),D=b("option"),K=b("table"),S=b("thead"),V=b("tbody"),$=b("tr"),z=b("th"),B=b("td"),F=b("a"),G=b("img"),J=function(){return!0};return n.a=F,n.btn=I,n.createRouter=function(n){var t=n.routes,e=n.container,r=n.beforeEach,o=void 0===r?J:r,u=n.afterEach,i=void 0===u?J:u,a=n.onError,f=void 0===a?console.error:a,c=null,d=t.map(function(n){var t=[],e=n.path.replace(/\/:([^/]+)/g,function(n,e){return t.push(e),"/([^/]+)"});return{route:n,pattern:new RegExp("^".concat(e,"$")),names:t}}),s=function(n){for(var t=0;t<d.length;t++){var e=d[t],r=e.route,o=e.pattern,u=e.names,i=n.match(o);if(i){for(var a={},f=0;f<u.length;f++)a[u[f]]=i[f+1];return{route:r,params:a}}}return null},p=function(n){var t={};if(!n)return t;for(var e=(0===n.indexOf("?")?n.slice(1):n).split("&"),r=0;r<e.length;r++){var o=e[r].split("="),u=o[0];u&&(t[decodeURIComponent(u)]=decodeURIComponent(o[1]||""))}return t},m="undefined"!=typeof Promise?function(n){var t=n.split("?"),r=t[0],u=t[1],a=p(u||""),d=s(r);if(!d){var m=new Error("Route not found: ".concat(r));return f(m),v(m)}var h={params:d.params,query:a,path:r,meta:d.route.meta};return l(o(h,c)).then(function(n){return n?(window.location.hash=u?"".concat(r,"?").concat(u):r,d.route.handler(h)):v(new Error("Navigation blocked by guard"))}).then(function(n){e&&n&&(e.innerHTML="",e.appendChild(n)),i(c=h)}).catch(function(n){return f(n),v(n)})}:function(n){var t=n.split("?"),r=t[0],u=t[1],a=p(u||""),d=s(r);if(d){var l={params:d.params,query:a,path:r,meta:d.route.meta};try{if(!o(l,c))return;window.location.hash=u?"".concat(r,"?").concat(u):r;var v=d.route.handler(l);e&&v&&"function"!=typeof v.then&&(e.innerHTML="",e.appendChild(v)),i(c=l)}catch(n){f(n)}}else f(new Error("Route not found: ".concat(r)))},h=function(){return m(window.location.hash.slice(1)||"/")};return{start:function(){window.addEventListener("hashchange",h),h()},stop:function(){return window.removeEventListener("hashchange",h)},push:function(n){return m(n)},current:function(){return c}}},n.div=E,n.form=O,n.h=g,n.h1=R,n.h2=T,n.h3=j,n.h4=k,n.h5=A,n.h6=q,n.img=G,n.input=U,n.label=L,n.li=P,n.ol=N,n.option=D,n.p=M,n.select=x,n.span=H,n.table=K,n.tbody=V,n.td=B,n.th=z,n.thead=S,n.tr=$,n.ul=C,n}({});

package/dist/index.mjs

@@ -1 +1 @@
-const t=document.createElement,e=HTMLElement.prototype.append,n=HTMLElement.prototype.addEventListener,o=HTMLElement.prototype.setAttribute,l=Array.isArray,a=Object.keys,c=Object.assign,d=t=>{throw new Error("Kt.js:"+t)},i=(t,e,n)=>{e in t?t[e]=!!n:o.call(t,e,n)},u=(t,e,n)=>{e in t?t[e]=n:o.call(t,e,n)},r={checked:i,selected:i,value:u,valueAsDate:u,valueAsNumber:u,defaultValue:u,defaultChecked:i,defaultSelected:i,disabled:i,readOnly:i,multiple:i,required:i,autofocus:i,open:i,controls:i,autoplay:i,loop:i,muted:i,defer:i,async:i,hidden:(t,e,n)=>t.hidden=!!n},s=(t,e,n)=>o.call(t,e,n);function f(t,e){"string"==typeof e?t.className=e:"object"==typeof e&&null!==e?function(t,e){const l=e.class,d=e.style;void 0!==l&&(t.className=l,delete e.class),void 0!==d&&("string"==typeof d?o.call(t,"style",d):c(t.style,d),delete e.style);const i=a(e);for(let o=i.length-1;o>=0;o--){const l=i[o],a=e[l];"function"!=typeof a?(r[l]||s)(t,l,a):n.call(t,l,a)}void 0!==l&&(e.style=l),void 0!==d&&(e.style=d)}(t,e):d("applyAttr attr must be an object.")}function p(n,o="",a=""){"string"!=typeof n&&d("h tagName must be a string.");const c=(i=n,t.call(document,i));var i;return f(c,o),function(t,n){"string"==typeof n?t.textContent=n:l(n)?e.apply(t,n):n instanceof HTMLElement?e.call(t,n):d("applyContent invalid content.")}(c,a),c}const m=t=>(e,n)=>p(t,e,n),y=m("div"),h=m("span"),b=m("label"),v=m("p"),g=m("h1"),j=m("h2"),E=m("h3"),A=m("h4"),H=m("h5"),L=m("h6"),M=m("ul"),T=m("ol"),O=m("li"),k=m("button"),w=m("form"),C=m("input"),N=m("select"),q=m("option"),x=m("table"),D=m("thead"),K=m("tbody"),S=m("tr"),V=m("th"),z=m("td"),B=m("a"),F=m("img");export{B as a,k as btn,y as div,w as form,p as h,g as h1,j as h2,E as h3,A as h4,H as h5,L as h6,F as img,C as input,b as label,O as li,T as ol,q as option,v as p,N as select,h as span,x as table,K as tbody,z as td,V as th,D as thead,S as tr,M as ul};
+var n=document.createElement,t=document.createTextNode,e=document.createDocumentFragment,r=function(n){return void 0===n&&(n=""),t.call(document,n)},o=HTMLElement.prototype.addEventListener,u=HTMLElement.prototype.setAttribute,i=HTMLElement.prototype.appendChild,a="function"==typeof HTMLElement.prototype.append?HTMLElement.prototype.append:function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];if(n.length<50)for(var o=0;o<n.length;o++){"string"==typeof(a=n[o])?i.call(this,r(a)):i.call(this,a)}else{var u=e.call(document);for(o=0;o<n.length;o++){var a;"string"==typeof(a=n[o])?i.call(u,r(a)):i.call(u,a)}i.call(this,u)}},f=Array.isArray,c=Object.keys,d=Promise.resolve,l=Promise.reject,v=function(n){throw new Error("Kt.js:".concat(n))};function s(n,t,e){t in n?n[t]=!!e:u.call(n,t,e)}function p(n,t,e){t in n?n[t]=e:u.call(n,t,e)}var m={checked:s,selected:s,value:p,valueAsDate:p,valueAsNumber:p,defaultValue:p,defaultChecked:s,defaultSelected:s,disabled:s,readOnly:s,multiple:s,required:s,autofocus:s,open:s,controls:s,autoplay:s,loop:s,muted:s,defer:s,async:s,hidden:function(n,t,e){n.hidden=!!e}},h=function(n,t,e){return u.call(n,t,e)};function y(n,t){"string"==typeof t?n.className=t:"object"==typeof t&&null!==t?function(n,t){var e=t.class,r=t.style;if(void 0!==e&&(n.className=e,delete t.class),void 0!==r){if("string"==typeof r)u.call(n,"style",r);else for(var i in n.style)n.style[i]=r[i];delete t.style}for(var a=c(t),f=a.length-1;f>=0;f--){var d=t[i=a[f]];"function"!=typeof d?(m[i]||h)(n,i,d):o.call(n,i,d)}void 0!==e&&(t.style=e),void 0!==r&&(t.style=r)}(n,t):v("applyAttr attr must be an object.")}function w(t,e,r){void 0===e&&(e=""),void 0===r&&(r=""),"string"!=typeof t&&v("h tagName must be a string.");var o,u=(o=t,n.call(document,o));return y(u,e),function(n,t){f(t)?a.apply(n,t):a.call(n,t)}(u,r),u}var g=function(n){return function(t,e){return w(n,t,e)}},b=g("div"),E=g("span"),H=g("label"),L=g("p"),M=g("h1"),R=g("h2"),T=g("h3"),j=g("h4"),A=g("h5"),k=g("h6"),q=g("ul"),C=g("ol"),N=g("li"),P=g("button"),x=g("form"),I=g("input"),O=g("select"),U=g("option"),D=g("table"),K=g("thead"),S=g("tbody"),V=g("tr"),$=g("th"),z=g("td"),B=g("a"),F=g("img"),G=function(){return!0};function J(n){var t=n.routes,e=n.container,r=n.beforeEach,o=void 0===r?G:r,u=n.afterEach,i=void 0===u?G:u,a=n.onError,f=void 0===a?console.error:a,c=null,v=t.map(function(n){var t=[],e=n.path.replace(/\/:([^/]+)/g,function(n,e){return t.push(e),"/([^/]+)"});return{route:n,pattern:new RegExp("^".concat(e,"$")),names:t}}),s=function(n){for(var t=0;t<v.length;t++){var e=v[t],r=e.route,o=e.pattern,u=e.names,i=n.match(o);if(i){for(var a={},f=0;f<u.length;f++)a[u[f]]=i[f+1];return{route:r,params:a}}}return null},p=function(n){var t={};if(!n)return t;for(var e=(0===n.indexOf("?")?n.slice(1):n).split("&"),r=0;r<e.length;r++){var o=e[r].split("="),u=o[0];u&&(t[decodeURIComponent(u)]=decodeURIComponent(o[1]||""))}return t},m="undefined"!=typeof Promise?function(n){var t=n.split("?"),r=t[0],u=t[1],a=p(u||""),v=s(r);if(!v){var m=new Error("Route not found: ".concat(r));return f(m),l(m)}var h={params:v.params,query:a,path:r,meta:v.route.meta};return d(o(h,c)).then(function(n){return n?(window.location.hash=u?"".concat(r,"?").concat(u):r,v.route.handler(h)):l(new Error("Navigation blocked by guard"))}).then(function(n){e&&n&&(e.innerHTML="",e.appendChild(n)),i(c=h)}).catch(function(n){return f(n),l(n)})}:function(n){var t=n.split("?"),r=t[0],u=t[1],a=p(u||""),d=s(r);if(d){var l={params:d.params,query:a,path:r,meta:d.route.meta};try{if(!o(l,c))return;window.location.hash=u?"".concat(r,"?").concat(u):r;var v=d.route.handler(l);e&&v&&"function"!=typeof v.then&&(e.innerHTML="",e.appendChild(v)),i(c=l)}catch(n){f(n)}}else f(new Error("Route not found: ".concat(r)))},h=function(){return m(window.location.hash.slice(1)||"/")};return{start:function(){window.addEventListener("hashchange",h),h()},stop:function(){return window.removeEventListener("hashchange",h)},push:function(n){return m(n)},current:function(){return c}}}export{B as a,P as btn,J as createRouter,b as div,x as form,w as h,M as h1,R as h2,T as h3,j as h4,A as h5,k as h6,F as img,I as input,H as label,N as li,C as ol,U as option,L as p,O as select,E as span,D as table,S as tbody,z as td,$ as th,K as thead,V as tr,q as ul};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kt.js",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"author": {
 		"name": "Kasukabe Tsumugi",
 		"email": "futami16237@gmail.com"
@@ -59,7 +59,6 @@
 		"rollup-plugin-const-enum": "^1.1.4",
 		"rollup-plugin-dts": "^6.2.3",
 		"rollup-plugin-func-macro": "^1.1.1",
-		"tinyrainbow": "^3.0.3",
 		"tslib": "^2.8.1",
 		"typescript": "^5.9.2",
 		"vitest": "^3.2.4"