kt.js 0.3.2 → 0.4.1
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 +33 -7
- package/dist/index.d.ts +7 -1
- package/dist/index.iife.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,12 +19,13 @@ KT.js follows one rule: full controll of dom and avoid unless repainting.
|
|
|
19
19
|
|
|
20
20
|
## Current Core Features
|
|
21
21
|
|
|
22
|
-
-
|
|
23
|
-
- Router
|
|
24
|
-
-
|
|
25
|
-
- **Full ES5 compatibility
|
|
22
|
+
- **`h` function**: and its aliases
|
|
23
|
+
- **Router**:
|
|
24
|
+
- Auto-adapt to environment: uses async navigation guards when `Promise` is available, falls back to synchronous mode otherwise
|
|
25
|
+
- **Full ES5 compatibility**: works in IE9+ and other legacy browsers
|
|
26
26
|
- Transpiled to ES5 with no modern syntax
|
|
27
27
|
- Optional minimal Promise polyfill included for older environments
|
|
28
|
+
- **ktnull**: a special value representing "null", used for filtering. Since native DOM APIs do not ignore `undefined` or `null`, this feature is provided to maintain native behavior while enhancing usability.
|
|
28
29
|
|
|
29
30
|
## Getting started
|
|
30
31
|
|
|
@@ -147,6 +148,33 @@ console.log(current?.path, current?.params, current?.query);
|
|
|
147
148
|
- Error handling (`onError`)
|
|
148
149
|
- Minimal footprint
|
|
149
150
|
|
|
151
|
+
## `ktnull`
|
|
152
|
+
|
|
153
|
+
`ktnull` is an internal falsy value. It is assigned by `Object.freeze(Object.create(null))`.
|
|
154
|
+
It is used for filtering, you can do like this:
|
|
155
|
+
|
|
156
|
+
> Since `ktnull` is an empty object, it can be used on the 2nd argument position of `h` or the 1st position of `div`, representing attributes.
|
|
157
|
+
|
|
158
|
+
```ts
|
|
159
|
+
import { div, ktnull } from 'kt.js';
|
|
160
|
+
const list = div(ktnull, [
|
|
161
|
+
div(ktnull, 'Item 1'),
|
|
162
|
+
someCondition ? div(ktnull, 'item 1.5') : ktnull,
|
|
163
|
+
div(ktnull, 'Item 2'),
|
|
164
|
+
undefined,
|
|
165
|
+
]);
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
Then it will create:
|
|
169
|
+
|
|
170
|
+
```html
|
|
171
|
+
<div>
|
|
172
|
+
<div>Item 1</div>
|
|
173
|
+
<div>Item 2</div>
|
|
174
|
+
undefined
|
|
175
|
+
</div>
|
|
176
|
+
```
|
|
177
|
+
|
|
150
178
|
## Browser Compatibility
|
|
151
179
|
|
|
152
180
|
KT.js is transpiled to ES5 and works in all modern browsers as well as legacy browsers including IE9+.
|
|
@@ -156,15 +184,13 @@ KT.js is transpiled to ES5 and works in all modern browsers as well as legacy br
|
|
|
156
184
|
For environments without native `Promise` support (like IE11 and below), KT.js provides a minimal Promise polyfill:
|
|
157
185
|
|
|
158
186
|
```html
|
|
159
|
-
<!-- Load the Promise polyfill before KT.js -->
|
|
160
|
-
<script src="https://unpkg.com/kt.js@0.3.0/dist/promise-polyfill.js"></script>
|
|
161
187
|
<script src="https://unpkg.com/kt.js@0.3.0/dist/index.iife.js"></script>
|
|
162
188
|
```
|
|
163
189
|
|
|
164
190
|
Or when using module bundlers:
|
|
165
191
|
|
|
166
192
|
```js
|
|
167
|
-
import '
|
|
193
|
+
import 'some promise polyfill'; // Will fallback to sync version if Promise is not available
|
|
168
194
|
import { h, div, createRouter } from 'kt.js';
|
|
169
195
|
```
|
|
170
196
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This is a `falsy` value used to indicate "no node" in `h` function.
|
|
3
|
+
* - We use `Object.create(null)` because it is guaranteed to be unique and no need for polyfill of `symbol`.
|
|
4
|
+
*/
|
|
5
|
+
declare const ktnull: any;
|
|
6
|
+
|
|
1
7
|
type otherstring = string & {};
|
|
2
8
|
|
|
3
9
|
/**
|
|
@@ -102,4 +108,4 @@ declare function createRouter(config: RouterConfig): {
|
|
|
102
108
|
current: () => RouteContext | null;
|
|
103
109
|
};
|
|
104
110
|
|
|
105
|
-
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 };
|
|
111
|
+
export { a, btn, createRouter, div, form, h, h1, h2, h3, h4, h5, h6, img, input, ktnull, label, li, ol, option, p, select, span, table, tbody, td, th, thead, tr, ul };
|
package/dist/index.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var kt=function(n){"use strict";var t=document.createElement,
|
|
1
|
+
var kt=function(n){"use strict";var t=Object.freeze(Object.create(null)),e=Array.isArray,r=Array.prototype.filter,o=Object.keys,u=function(){return{}},i="undefined"==typeof Promise?u:Promise.resolve,a="undefined"==typeof Promise?u:Promise.reject,f=document.createElement,c=document.createTextNode,d=document.createDocumentFragment,l=function(n){return void 0===n&&(n=""),c.call(document,n)},s=HTMLElement.prototype.addEventListener,v=HTMLElement.prototype.setAttribute,p=HTMLElement.prototype.appendChild,m=HTMLElement.prototype.append,h="function"==typeof m?function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];return m.apply(this,r.call(n,function(n){return n!==t}))}:function(){for(var n=[],e=0;e<arguments.length;e++)n[e]=arguments[e];if(n.length<50)for(var r=0;r<n.length;r++){"string"==typeof(u=n[r])?p.call(this,l(u)):u!==t&&p.call(this,u)}else{var o=d.call(document);for(r=0;r<n.length;r++){var u;"string"==typeof(u=n[r])?p.call(o,l(u)):u!==t&&p.call(o,u)}p.call(this,o)}},y=function(n){throw new Error("Kt.js:".concat(n))};function w(n,t,e){t in n?n[t]=!!e:v.call(n,t,e)}function b(n,t,e){t in n?n[t]=e:v.call(n,t,e)}var g={checked:w,selected:w,value:b,valueAsDate:b,valueAsNumber:b,defaultValue:b,defaultChecked:w,defaultSelected:w,disabled:w,readOnly:w,multiple:w,required:w,autofocus:w,open:w,controls:w,autoplay:w,loop:w,muted:w,defer:w,async:w,hidden:function(n,t,e){n.hidden=!!e}},E=function(n,t,e){return v.call(n,t,e)};function j(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)v.call(n,"style",r);else for(var u in n.style)n.style[u]=r[u];delete t.style}for(var i=o(t),a=i.length-1;a>=0;a--){var f=t[u=i[a]];"function"!=typeof f?(g[u]||E)(n,u,f):s.call(n,u,f)}void 0!==e&&(t.style=e),void 0!==r&&(t.style=r)}(n,t):y("applyAttr attr must be an object.")}function A(n,t,r){void 0===t&&(t=""),void 0===r&&(r=""),"string"!=typeof n&&y("h tagName must be a string.");var o,u=(o=n,f.call(document,o));return j(u,t),function(n,t){e(t)?h.apply(n,t):h.call(n,t)}(u,r),u}var P=function(n){return function(t,e){return A(n,t,e)}},R=P("div"),k=P("span"),H=P("label"),L=P("p"),M=P("h1"),O=P("h2"),T=P("h3"),q=P("h4"),C=P("h5"),N=P("h6"),I=P("ul"),U=P("ol"),x=P("li"),D=P("button"),K=P("form"),S=P("input"),V=P("select"),$=P("option"),z=P("table"),B=P("thead"),F=P("tbody"),G=P("tr"),J=P("th"),Q=P("td"),W=P("a"),X=P("img"),Y=function(){return!0};return n.a=W,n.btn=D,n.createRouter=function(n){var t=n.routes,e=n.container,r=n.beforeEach,o=void 0===r?Y:r,u=n.afterEach,f=void 0===u?Y:u,c=n.onError,d=void 0===c?console.error:c,l=null,s=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}}),v=function(n){for(var t=0;t<s.length;t++){var e=s[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],c=p(u||""),s=v(r);if(!s){var m=new Error("Route not found: ".concat(r));return d(m),a(m)}var h={params:s.params,query:c,path:r,meta:s.route.meta};return i(o(h,l)).then(function(n){return n?(window.location.hash=u?"".concat(r,"?").concat(u):r,s.route.handler(h)):a(new Error("Navigation blocked by guard"))}).then(function(n){e&&n&&(e.innerHTML="",e.appendChild(n)),f(l=h)}).catch(function(n){return d(n),a(n)})}:function(n){var t=n.split("?"),r=t[0],u=t[1],i=p(u||""),a=v(r);if(a){var c={params:a.params,query:i,path:r,meta:a.route.meta};try{if(!o(c,l))return;window.location.hash=u?"".concat(r,"?").concat(u):r;var s=a.route.handler(c);e&&s&&"function"!=typeof s.then&&(e.innerHTML="",e.appendChild(s)),f(l=c)}catch(n){d(n)}}else d(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 l}}},n.div=R,n.form=K,n.h=A,n.h1=M,n.h2=O,n.h3=T,n.h4=q,n.h5=C,n.h6=N,n.img=X,n.input=S,n.ktnull=t,n.label=H,n.li=x,n.ol=U,n.option=$,n.p=L,n.select=V,n.span=k,n.table=z,n.tbody=F,n.td=Q,n.th=J,n.thead=B,n.tr=G,n.ul=I,n}({});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var n=document.createElement,
|
|
1
|
+
var n=Object.freeze(Object.create(null)),t=Array.isArray,e=Array.prototype.filter,r=Object.keys,o=function(){return{}},u="undefined"==typeof Promise?o:Promise.resolve,i="undefined"==typeof Promise?o:Promise.reject,a=document.createElement,f=document.createTextNode,c=document.createDocumentFragment,d=function(n){return void 0===n&&(n=""),f.call(document,n)},l=HTMLElement.prototype.addEventListener,v=HTMLElement.prototype.setAttribute,s=HTMLElement.prototype.appendChild,p=HTMLElement.prototype.append,m="function"==typeof p?function(){for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];return p.apply(this,e.call(t,function(t){return t!==n}))}:function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];if(t.length<50)for(var r=0;r<t.length;r++){"string"==typeof(u=t[r])?s.call(this,d(u)):u!==n&&s.call(this,u)}else{var o=c.call(document);for(r=0;r<t.length;r++){var u;"string"==typeof(u=t[r])?s.call(o,d(u)):u!==n&&s.call(o,u)}s.call(this,o)}},h=function(n){throw new Error("Kt.js:".concat(n))};function y(n,t,e){t in n?n[t]=!!e:v.call(n,t,e)}function w(n,t,e){t in n?n[t]=e:v.call(n,t,e)}var b={checked:y,selected:y,value:w,valueAsDate:w,valueAsNumber:w,defaultValue:w,defaultChecked:y,defaultSelected:y,disabled:y,readOnly:y,multiple:y,required:y,autofocus:y,open:y,controls:y,autoplay:y,loop:y,muted:y,defer:y,async:y,hidden:function(n,t,e){n.hidden=!!e}},g=function(n,t,e){return v.call(n,t,e)};function E(n,t){"string"==typeof t?n.className=t:"object"==typeof t&&null!==t?function(n,t){var e=t.class,o=t.style;if(void 0!==e&&(n.className=e,delete t.class),void 0!==o){if("string"==typeof o)v.call(n,"style",o);else for(var u in n.style)n.style[u]=o[u];delete t.style}for(var i=r(t),a=i.length-1;a>=0;a--){var f=t[u=i[a]];"function"!=typeof f?(b[u]||g)(n,u,f):l.call(n,u,f)}void 0!==e&&(t.style=e),void 0!==o&&(t.style=o)}(n,t):h("applyAttr attr must be an object.")}function j(n,e,r){void 0===e&&(e=""),void 0===r&&(r=""),"string"!=typeof n&&h("h tagName must be a string.");var o,u=(o=n,a.call(document,o));return E(u,e),function(n,e){t(e)?m.apply(n,e):m.call(n,e)}(u,r),u}var A=function(n){return function(t,e){return j(n,t,e)}},P=A("div"),R=A("span"),H=A("label"),L=A("p"),M=A("h1"),O=A("h2"),T=A("h3"),k=A("h4"),q=A("h5"),C=A("h6"),N=A("ul"),x=A("ol"),I=A("li"),U=A("button"),D=A("form"),K=A("input"),S=A("select"),V=A("option"),$=A("table"),z=A("thead"),B=A("tbody"),F=A("tr"),G=A("th"),J=A("td"),Q=A("a"),W=A("img"),X=function(){return!0};function Y(n){var t=n.routes,e=n.container,r=n.beforeEach,o=void 0===r?X:r,a=n.afterEach,f=void 0===a?X:a,c=n.onError,d=void 0===c?console.error:c,l=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],a=t[1],c=p(a||""),v=s(r);if(!v){var m=new Error("Route not found: ".concat(r));return d(m),i(m)}var h={params:v.params,query:c,path:r,meta:v.route.meta};return u(o(h,l)).then(function(n){return n?(window.location.hash=a?"".concat(r,"?").concat(a):r,v.route.handler(h)):i(new Error("Navigation blocked by guard"))}).then(function(n){e&&n&&(e.innerHTML="",e.appendChild(n)),f(l=h)}).catch(function(n){return d(n),i(n)})}:function(n){var t=n.split("?"),r=t[0],u=t[1],i=p(u||""),a=s(r);if(a){var c={params:a.params,query:i,path:r,meta:a.route.meta};try{if(!o(c,l))return;window.location.hash=u?"".concat(r,"?").concat(u):r;var v=a.route.handler(c);e&&v&&"function"!=typeof v.then&&(e.innerHTML="",e.appendChild(v)),f(l=c)}catch(n){d(n)}}else d(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 l}}}export{Q as a,U as btn,Y as createRouter,P as div,D as form,j as h,M as h1,O as h2,T as h3,k as h4,q as h5,C as h6,W as img,K as input,n as ktnull,H as label,I as li,x as ol,V as option,L as p,S as select,R as span,$ as table,B as tbody,J as td,G as th,z as thead,F as tr,N as ul};
|