kt.js 0.2.1 → 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)
 
@@ -22,9 +21,31 @@ KT.js follows one rule: full controll of dom and avoid unless repainting.
 
 - `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
@@ -121,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

@@ -95,10 +95,10 @@ interface RouterConfig {
   onError?: (error: Error) => void;
 }
 
-declare const createRouter: (config: RouterConfig) => {
+declare function createRouter(config: RouterConfig): {
     start: () => void;
     stop: () => void;
-    push: (path: string) => Promise<void>;
+    push: (path: string) => void;
     current: () => RouteContext | null;
 };
 

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