ks-fwork 3.0.3 → 3.0.5
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/dist/ks-fwork.js +60 -61
- package/package.json +1 -1
- package/src/mount-dom.js +2 -1
package/dist/ks-fwork.js
CHANGED
|
@@ -238,40 +238,6 @@ function removeFragmentNode(vNode) {
|
|
|
238
238
|
children.forEach(destroyDOM);
|
|
239
239
|
}
|
|
240
240
|
|
|
241
|
-
class Dispatcher {
|
|
242
|
-
#handlersByCommand = new Map();
|
|
243
|
-
#afterHandlers = [];
|
|
244
|
-
subscribe(commandName, handler) {
|
|
245
|
-
if (!this.#handlersByCommand.has(commandName)) {
|
|
246
|
-
this.#handlersByCommand.set(commandName, []);
|
|
247
|
-
}
|
|
248
|
-
const handlers = this.#handlersByCommand.get(commandName);
|
|
249
|
-
if (handlers.includes(handler)) {
|
|
250
|
-
return () => {}
|
|
251
|
-
}
|
|
252
|
-
handlers.push(handler);
|
|
253
|
-
return () => {
|
|
254
|
-
const index = handlers.indexOf(handler);
|
|
255
|
-
handlers.splice(index, 1);
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
afterEveryCommand(handler) {
|
|
259
|
-
this.#afterHandlers.push(handler);
|
|
260
|
-
return () => {
|
|
261
|
-
const index = this.#afterHandlers.indexOf(handler);
|
|
262
|
-
this.#afterHandlers.splice(index, 1);
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
dispatch(commandName, payload) {
|
|
266
|
-
if (this.#handlersByCommand.has(commandName)) {
|
|
267
|
-
this.#handlersByCommand.get(commandName).forEach((handler) => handler(payload));
|
|
268
|
-
} else {
|
|
269
|
-
console.warn(`No handlers for command: ${commandName}`);
|
|
270
|
-
}
|
|
271
|
-
this.#afterHandlers.forEach((handler) => handler());
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
|
|
275
241
|
function setAttributes(el, attrs) {
|
|
276
242
|
const { class: className, style, ...otherAttrs } = attrs;
|
|
277
243
|
if (className) {
|
|
@@ -337,6 +303,7 @@ function mountDOM(vNode, parentEl, index, hostComponent = null) {
|
|
|
337
303
|
}
|
|
338
304
|
case DOM_TYPES.COMPONENT: {
|
|
339
305
|
createComponentNode(vNode, parentEl, index, hostComponent);
|
|
306
|
+
break;
|
|
340
307
|
}
|
|
341
308
|
default: {
|
|
342
309
|
throw new Error(`Can't mount virtual node of type: ${vNode.type}`);
|
|
@@ -393,6 +360,31 @@ function insert(el, parentEl, index) {
|
|
|
393
360
|
}
|
|
394
361
|
}
|
|
395
362
|
|
|
363
|
+
function createApp(RootComponent, props = {}) {
|
|
364
|
+
let parentEl = null;
|
|
365
|
+
let rootNode = null;
|
|
366
|
+
let isMounted = false;
|
|
367
|
+
function reset() {
|
|
368
|
+
parentEl = null;
|
|
369
|
+
rootNode = null;
|
|
370
|
+
isMounted = false;
|
|
371
|
+
}
|
|
372
|
+
return {
|
|
373
|
+
mount(_parentEl) {
|
|
374
|
+
if (isMounted) throw new Error('The application is already mounted');
|
|
375
|
+
parentEl = _parentEl;
|
|
376
|
+
rootNode = h(RootComponent, props);
|
|
377
|
+
mountDOM(rootNode, parentEl);
|
|
378
|
+
isMounted = true;
|
|
379
|
+
},
|
|
380
|
+
unmount() {
|
|
381
|
+
if (!isMounted) throw new Error('The application is not mounted');
|
|
382
|
+
destroyDOM(rootNode);
|
|
383
|
+
reset();
|
|
384
|
+
},
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
|
|
396
388
|
function areNodesEqual(nodeOne, nodeTwo) {
|
|
397
389
|
if (nodeOne.type !== nodeTwo.type) return false;
|
|
398
390
|
if (nodeOne.type === DOM_TYPES.ELEMENT) {
|
|
@@ -572,33 +564,6 @@ function patchChildren(oldVNode, newVNode, hostComponent) {
|
|
|
572
564
|
}
|
|
573
565
|
}
|
|
574
566
|
|
|
575
|
-
function createApp(RootComponent, props = {}) {
|
|
576
|
-
let parentEl = null;
|
|
577
|
-
let rootNode = null;
|
|
578
|
-
let isMounted = false;
|
|
579
|
-
const dispatcher = new Dispatcher();
|
|
580
|
-
[dispatcher.afterEveryCommand(renderApp)];
|
|
581
|
-
function reset() {
|
|
582
|
-
parentEl = null;
|
|
583
|
-
rootNode = null;
|
|
584
|
-
isMounted = false;
|
|
585
|
-
}
|
|
586
|
-
return {
|
|
587
|
-
mount(_parentEl) {
|
|
588
|
-
if (isMounted) throw new Error('The application is already mounted');
|
|
589
|
-
parentEl = _parentEl;
|
|
590
|
-
rootNode = h(RootComponent, props);
|
|
591
|
-
mountDOM(rootNode, parentEl);
|
|
592
|
-
isMounted = true;
|
|
593
|
-
},
|
|
594
|
-
unmount() {
|
|
595
|
-
if (!isMounted) throw new Error('The application is not mounted');
|
|
596
|
-
destroyDOM(rootNode);
|
|
597
|
-
reset();
|
|
598
|
-
},
|
|
599
|
-
}
|
|
600
|
-
}
|
|
601
|
-
|
|
602
567
|
function getDefaultExportFromCjs (x) {
|
|
603
568
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
604
569
|
}
|
|
@@ -642,6 +607,40 @@ function requireFastDeepEqual () {
|
|
|
642
607
|
var fastDeepEqualExports = requireFastDeepEqual();
|
|
643
608
|
var equal = /*@__PURE__*/getDefaultExportFromCjs(fastDeepEqualExports);
|
|
644
609
|
|
|
610
|
+
class Dispatcher {
|
|
611
|
+
#handlersByCommand = new Map();
|
|
612
|
+
#afterHandlers = [];
|
|
613
|
+
subscribe(commandName, handler) {
|
|
614
|
+
if (!this.#handlersByCommand.has(commandName)) {
|
|
615
|
+
this.#handlersByCommand.set(commandName, []);
|
|
616
|
+
}
|
|
617
|
+
const handlers = this.#handlersByCommand.get(commandName);
|
|
618
|
+
if (handlers.includes(handler)) {
|
|
619
|
+
return () => {}
|
|
620
|
+
}
|
|
621
|
+
handlers.push(handler);
|
|
622
|
+
return () => {
|
|
623
|
+
const index = handlers.indexOf(handler);
|
|
624
|
+
handlers.splice(index, 1);
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
afterEveryCommand(handler) {
|
|
628
|
+
this.#afterHandlers.push(handler);
|
|
629
|
+
return () => {
|
|
630
|
+
const index = this.#afterHandlers.indexOf(handler);
|
|
631
|
+
this.#afterHandlers.splice(index, 1);
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
dispatch(commandName, payload) {
|
|
635
|
+
if (this.#handlersByCommand.has(commandName)) {
|
|
636
|
+
this.#handlersByCommand.get(commandName).forEach((handler) => handler(payload));
|
|
637
|
+
} else {
|
|
638
|
+
console.warn(`No handlers for command: ${commandName}`);
|
|
639
|
+
}
|
|
640
|
+
this.#afterHandlers.forEach((handler) => handler());
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
|
|
645
644
|
function defineComponent({ render, state, ...methods }) {
|
|
646
645
|
class Component {
|
|
647
646
|
#isMounted = false;
|
package/package.json
CHANGED
package/src/mount-dom.js
CHANGED
|
@@ -4,7 +4,7 @@ import { addEventListeners } from "./events.js";
|
|
|
4
4
|
import { extractPropsAndEvents } from "./utils/props.js";
|
|
5
5
|
|
|
6
6
|
// Recursively mount a virtual node (and its subtree) into a real parent DOM element.
|
|
7
|
-
export function mountDOM(vNode, parentEl, index
|
|
7
|
+
export function mountDOM(vNode, parentEl, index, hostComponent = null) {
|
|
8
8
|
switch (vNode.type) {
|
|
9
9
|
case DOM_TYPES.TEXT: {
|
|
10
10
|
createTextNode(vNode, parentEl, index);
|
|
@@ -23,6 +23,7 @@ export function mountDOM(vNode, parentEl, index = undefined, hostComponent = nul
|
|
|
23
23
|
|
|
24
24
|
case DOM_TYPES.COMPONENT: {
|
|
25
25
|
createComponentNode(vNode, parentEl, index, hostComponent);
|
|
26
|
+
break;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
default: {
|