kt.js 0.1.2 → 0.2.1

package/README.md

@@ -18,6 +18,11 @@ 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
+
 ## Getting started
 
 ```bash
@@ -69,14 +74,12 @@ h('div', { class: className }, 'Styled text');
 
 ## Router
 
-KT.js includes a lightweight client-side router:
+KT.js includes a lightweight client-side router (hash-based):
 
 ```ts
 import { createRouter, div, h1 } from 'kt.js';
 
 const router = createRouter({
-  mode: 'hash', // or 'history'
-  container: document.getElementById('app'),
   routes: [
     {
       path: '/',
@@ -87,19 +90,41 @@ const router = createRouter({
       handler: (ctx) => div({}, [h1({}, `User ${ctx.params.id}`)]),
     },
   ],
+  container: document.getElementById('app'),
+  beforeEach: async (to, from) => {
+    // Navigation guard - return false to block navigation
+    console.log('navigating to:', to.path);
+    return true;
+  },
+  afterEach: (to) => {
+    // Called after successful navigation
+    document.title = to.path;
+  },
+  onError: (error) => {
+    console.error('Router error:', error);
+  },
 });
 
 router.start();
+
+// Navigate programmatically
+router.push('/user/123');
+router.push('/user/456?page=2');
+
+// Get current route
+const current = router.current();
+console.log(current?.path, current?.params, current?.query);
 ```
 
 **Features:**
 
-- Hash and History API routing
-- Dynamic route parameters
-- Query string parsing
-- Navigation guards
-- Lazy loading support
-- No dependencies
+- Hash-based routing (`#/path`)
+- Dynamic route parameters (`/user/:id`)
+- Query string parsing (`?key=value`)
+- Async navigation guards (`beforeEach`)
+- Lifecycle hooks (`afterEach`)
+- Error handling (`onError`)
+- Minimal footprint
 
 ## Notes
 

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 const createRouter: (config: RouterConfig) => {
+    start: () => void;
+    stop: () => void;
+    push: (path: string) => Promise<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.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};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kt.js",
-	"version": "0.1.2",
+	"version": "0.2.1",
 	"author": {
 		"name": "Kasukabe Tsumugi",
 		"email": "futami16237@gmail.com"