piral-million 0.15.0-beta.4579 → 0.15.0-beta.4633
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 +3 -3
- package/convert.d.ts +2 -2
- package/esm/converter.d.ts +2 -8
- package/esm/converter.js +6 -11
- package/esm/converter.js.map +1 -1
- package/esm/extension.d.ts +1 -2
- package/esm/extension.js +2 -44
- package/esm/extension.js.map +1 -1
- package/esm/mount.d.ts +2 -4
- package/esm/mount.js +5 -10
- package/esm/mount.js.map +1 -1
- package/lib/converter.d.ts +2 -8
- package/lib/converter.js +5 -10
- package/lib/converter.js.map +1 -1
- package/lib/extension.d.ts +1 -2
- package/lib/extension.js +3 -45
- package/lib/extension.js.map +1 -1
- package/lib/mount.d.ts +2 -4
- package/lib/mount.js +7 -13
- package/lib/mount.js.map +1 -1
- package/package.json +3 -3
- package/src/converter.ts +8 -20
- package/src/extension.ts +2 -51
- package/src/mount.ts +7 -18
package/README.md
CHANGED
|
@@ -62,7 +62,6 @@ export function setup(piral: PiletApi) {
|
|
|
62
62
|
Using Million with Piral is as simple as installing `piral-million` and `million`.
|
|
63
63
|
|
|
64
64
|
```ts
|
|
65
|
-
import 'million';
|
|
66
65
|
import { createMillionApi } from 'piral-million';
|
|
67
66
|
```
|
|
68
67
|
|
|
@@ -76,13 +75,14 @@ const instance = createInstance({
|
|
|
76
75
|
});
|
|
77
76
|
```
|
|
78
77
|
|
|
79
|
-
The `million` package should be shared with the pilets via the *package.json*:
|
|
78
|
+
The `million` package and its `million/react` module should be shared with the pilets via the *package.json*:
|
|
80
79
|
|
|
81
80
|
```json
|
|
82
81
|
{
|
|
83
82
|
"pilets": {
|
|
84
83
|
"externals": [
|
|
85
|
-
"million"
|
|
84
|
+
"million",
|
|
85
|
+
"million/react"
|
|
86
86
|
]
|
|
87
87
|
}
|
|
88
88
|
}
|
package/convert.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export interface MillionConverter {
|
|
|
12
12
|
}
|
|
13
13
|
export declare function createMillionConverter(...params: Parameters<typeof createConverter>): {
|
|
14
14
|
from: MillionConverter;
|
|
15
|
-
Extension: (props: any) =>
|
|
15
|
+
Extension: (props: any) => any;
|
|
16
16
|
};
|
|
17
|
-
declare const fromMillion: MillionConverter, MillionExtension: (props: any) =>
|
|
17
|
+
declare const fromMillion: MillionConverter, MillionExtension: (props: any) => any;
|
|
18
18
|
export { fromMillion, MillionExtension };
|
package/esm/converter.d.ts
CHANGED
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import type { ForeignComponent, BaseComponentProps } from 'piral-core';
|
|
2
|
-
import type { VNode } from 'million';
|
|
3
2
|
export interface MillionConverterOptions {
|
|
4
|
-
/**
|
|
5
|
-
* Defines the name of the root element.
|
|
6
|
-
* @default slot
|
|
7
|
-
*/
|
|
8
|
-
rootName?: string;
|
|
9
3
|
}
|
|
10
4
|
export declare function createConverter(config?: MillionConverterOptions): {
|
|
11
|
-
<TProps extends BaseComponentProps>(root:
|
|
12
|
-
Extension: (props: import("piral-core").ExtensionSlotProps<string>) =>
|
|
5
|
+
<TProps extends BaseComponentProps>(root: any): ForeignComponent<TProps>;
|
|
6
|
+
Extension: (props: import("piral-core").ExtensionSlotProps<string>) => import("million/dist/types-9663cfda").a;
|
|
13
7
|
};
|
package/esm/converter.js
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
|
-
import { mountMillion,
|
|
2
|
-
import {
|
|
1
|
+
import { mountMillion, unmountMillion } from './mount';
|
|
2
|
+
import { Extension } from './extension';
|
|
3
3
|
export function createConverter(config = {}) {
|
|
4
|
-
const { rootName = 'slot' } = config;
|
|
5
|
-
const Extension = createExtension(rootName);
|
|
6
4
|
const convert = (root) => ({
|
|
7
|
-
mount(el, props
|
|
8
|
-
|
|
5
|
+
mount(el, props) {
|
|
6
|
+
mountMillion(el, root, props);
|
|
9
7
|
},
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
},
|
|
13
|
-
unmount(el, locals) {
|
|
14
|
-
unmountMillion(el, locals.node);
|
|
8
|
+
unmount(el) {
|
|
9
|
+
unmountMillion(el);
|
|
15
10
|
},
|
|
16
11
|
});
|
|
17
12
|
convert.Extension = Extension;
|
package/esm/converter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC,MAAM,UAAU,eAAe,CAAC,SAAkC,EAAE;IAClE,MAAM,OAAO,GAAG,CAAoC,IAAS,EAA4B,EAAE,CAAC,CAAC;QAC3F,KAAK,CAAC,EAAE,EAAE,KAAK;YACb,YAAY,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,CAAC,EAAE;YACR,cAAc,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC"}
|
package/esm/extension.d.ts
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { VNode } from 'million';
|
|
2
1
|
import type { ExtensionSlotProps } from 'piral-core';
|
|
3
|
-
export declare
|
|
2
|
+
export declare const Extension: (props: ExtensionSlotProps<string>) => import("million/dist/types-9663cfda").a;
|
package/esm/extension.js
CHANGED
|
@@ -1,45 +1,3 @@
|
|
|
1
|
-
import { m
|
|
2
|
-
|
|
3
|
-
for (const i in a) {
|
|
4
|
-
if (!(i in b)) {
|
|
5
|
-
return false;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
for (const i in b) {
|
|
9
|
-
if (!compare(a[i], b[i])) {
|
|
10
|
-
return false;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
return true;
|
|
14
|
-
}
|
|
15
|
-
function compare(a, b) {
|
|
16
|
-
if (a !== b) {
|
|
17
|
-
const ta = typeof a;
|
|
18
|
-
const tb = typeof b;
|
|
19
|
-
if (ta === tb && ta === 'object' && a && b) {
|
|
20
|
-
return compareObjects(a, b);
|
|
21
|
-
}
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
return true;
|
|
25
|
-
}
|
|
26
|
-
export function createExtension(rootName) {
|
|
27
|
-
return (props) => {
|
|
28
|
-
return m(rootName, props, _, _, _, {
|
|
29
|
-
create(node) {
|
|
30
|
-
const { piral } = props;
|
|
31
|
-
node.textContent = '';
|
|
32
|
-
node.childNodes.forEach((n) => node.removeChild(n));
|
|
33
|
-
piral.renderHtmlExtension(node, this.props);
|
|
34
|
-
return true;
|
|
35
|
-
},
|
|
36
|
-
update(node, newNode, oldNode) {
|
|
37
|
-
if (!compare(newNode.props, oldNode.props)) {
|
|
38
|
-
//TODO render extension
|
|
39
|
-
}
|
|
40
|
-
return true;
|
|
41
|
-
},
|
|
42
|
-
});
|
|
43
|
-
};
|
|
44
|
-
}
|
|
1
|
+
import { m } from 'million';
|
|
2
|
+
export const Extension = (props) => m('piral-extension', props);
|
|
45
3
|
//# sourceMappingURL=extension.js.map
|
package/esm/extension.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC;AAE5B,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAyB,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC"}
|
package/esm/mount.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { VNode } from 'million';
|
|
2
1
|
import type { BaseComponentProps } from 'piral-core';
|
|
3
|
-
export declare function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root:
|
|
4
|
-
export declare function
|
|
5
|
-
export declare function unmountMillion(el: HTMLElement, oldNode: VNode): void;
|
|
2
|
+
export declare function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root: any, props: T): void;
|
|
3
|
+
export declare function unmountMillion(el: HTMLElement): void;
|
package/esm/mount.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
import { render,
|
|
1
|
+
import { render, createElement } from 'million/react';
|
|
2
2
|
export function mountMillion(el, root, props) {
|
|
3
|
+
const m = createElement;
|
|
3
4
|
const node = m(root, props);
|
|
4
|
-
render(
|
|
5
|
-
return node;
|
|
5
|
+
render(node, el);
|
|
6
6
|
}
|
|
7
|
-
export function
|
|
8
|
-
|
|
9
|
-
render(el, newNode, oldNode);
|
|
10
|
-
return newNode;
|
|
11
|
-
}
|
|
12
|
-
export function unmountMillion(el, oldNode) {
|
|
13
|
-
render(el, '', oldNode);
|
|
7
|
+
export function unmountMillion(el) {
|
|
8
|
+
render('', el);
|
|
14
9
|
}
|
|
15
10
|
//# sourceMappingURL=mount.js.map
|
package/esm/mount.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEtD,MAAM,UAAU,YAAY,CAA+B,EAAe,EAAE,IAAS,EAAE,KAAQ;IAC7F,MAAM,CAAC,GAAG,aAAoB,CAAC;IAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC5B,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAe;IAC5C,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AACjB,CAAC"}
|
package/lib/converter.d.ts
CHANGED
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import type { ForeignComponent, BaseComponentProps } from 'piral-core';
|
|
2
|
-
import type { VNode } from 'million';
|
|
3
2
|
export interface MillionConverterOptions {
|
|
4
|
-
/**
|
|
5
|
-
* Defines the name of the root element.
|
|
6
|
-
* @default slot
|
|
7
|
-
*/
|
|
8
|
-
rootName?: string;
|
|
9
3
|
}
|
|
10
4
|
export declare function createConverter(config?: MillionConverterOptions): {
|
|
11
|
-
<TProps extends BaseComponentProps>(root:
|
|
12
|
-
Extension: (props: import("piral-core").ExtensionSlotProps<string>) =>
|
|
5
|
+
<TProps extends BaseComponentProps>(root: any): ForeignComponent<TProps>;
|
|
6
|
+
Extension: (props: import("piral-core").ExtensionSlotProps<string>) => import("million/dist/types-9663cfda").a;
|
|
13
7
|
};
|
package/lib/converter.js
CHANGED
|
@@ -4,20 +4,15 @@ exports.createConverter = void 0;
|
|
|
4
4
|
const mount_1 = require("./mount");
|
|
5
5
|
const extension_1 = require("./extension");
|
|
6
6
|
function createConverter(config = {}) {
|
|
7
|
-
const { rootName = 'slot' } = config;
|
|
8
|
-
const Extension = (0, extension_1.createExtension)(rootName);
|
|
9
7
|
const convert = (root) => ({
|
|
10
|
-
mount(el, props
|
|
11
|
-
|
|
8
|
+
mount(el, props) {
|
|
9
|
+
(0, mount_1.mountMillion)(el, root, props);
|
|
12
10
|
},
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
},
|
|
16
|
-
unmount(el, locals) {
|
|
17
|
-
(0, mount_1.unmountMillion)(el, locals.node);
|
|
11
|
+
unmount(el) {
|
|
12
|
+
(0, mount_1.unmountMillion)(el);
|
|
18
13
|
},
|
|
19
14
|
});
|
|
20
|
-
convert.Extension = Extension;
|
|
15
|
+
convert.Extension = extension_1.Extension;
|
|
21
16
|
return convert;
|
|
22
17
|
}
|
|
23
18
|
exports.createConverter = createConverter;
|
package/lib/converter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"converter.js","sourceRoot":"","sources":["../src/converter.ts"],"names":[],"mappings":";;;AACA,mCAAuD;AACvD,2CAAwC;AAIxC,SAAgB,eAAe,CAAC,SAAkC,EAAE;IAClE,MAAM,OAAO,GAAG,CAAoC,IAAS,EAA4B,EAAE,CAAC,CAAC;QAC3F,KAAK,CAAC,EAAE,EAAE,KAAK;YACb,IAAA,oBAAY,EAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,CAAC,EAAE;YACR,IAAA,sBAAc,EAAC,EAAE,CAAC,CAAC;QACrB,CAAC;KACF,CAAC,CAAC;IACH,OAAO,CAAC,SAAS,GAAG,qBAAS,CAAC;IAC9B,OAAO,OAAO,CAAC;AACjB,CAAC;AAXD,0CAWC"}
|
package/lib/extension.d.ts
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
import { VNode } from 'million';
|
|
2
1
|
import type { ExtensionSlotProps } from 'piral-core';
|
|
3
|
-
export declare
|
|
2
|
+
export declare const Extension: (props: ExtensionSlotProps<string>) => import("million/dist/types-9663cfda").a;
|
package/lib/extension.js
CHANGED
|
@@ -1,49 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.Extension = void 0;
|
|
4
4
|
const million_1 = require("million");
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
if (!(i in b)) {
|
|
8
|
-
return false;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
for (const i in b) {
|
|
12
|
-
if (!compare(a[i], b[i])) {
|
|
13
|
-
return false;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
return true;
|
|
17
|
-
}
|
|
18
|
-
function compare(a, b) {
|
|
19
|
-
if (a !== b) {
|
|
20
|
-
const ta = typeof a;
|
|
21
|
-
const tb = typeof b;
|
|
22
|
-
if (ta === tb && ta === 'object' && a && b) {
|
|
23
|
-
return compareObjects(a, b);
|
|
24
|
-
}
|
|
25
|
-
return false;
|
|
26
|
-
}
|
|
27
|
-
return true;
|
|
28
|
-
}
|
|
29
|
-
function createExtension(rootName) {
|
|
30
|
-
return (props) => {
|
|
31
|
-
return (0, million_1.m)(rootName, props, million_1._, million_1._, million_1._, {
|
|
32
|
-
create(node) {
|
|
33
|
-
const { piral } = props;
|
|
34
|
-
node.textContent = '';
|
|
35
|
-
node.childNodes.forEach((n) => node.removeChild(n));
|
|
36
|
-
piral.renderHtmlExtension(node, this.props);
|
|
37
|
-
return true;
|
|
38
|
-
},
|
|
39
|
-
update(node, newNode, oldNode) {
|
|
40
|
-
if (!compare(newNode.props, oldNode.props)) {
|
|
41
|
-
//TODO render extension
|
|
42
|
-
}
|
|
43
|
-
return true;
|
|
44
|
-
},
|
|
45
|
-
});
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
exports.createExtension = createExtension;
|
|
5
|
+
const Extension = (props) => (0, million_1.m)('piral-extension', props);
|
|
6
|
+
exports.Extension = Extension;
|
|
49
7
|
//# sourceMappingURL=extension.js.map
|
package/lib/extension.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":";;;AACA,qCAA4B;AAErB,MAAM,SAAS,GAAG,CAAC,KAAyB,EAAE,EAAE,CAAC,IAAA,WAAC,EAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAAvE,QAAA,SAAS,aAA8D"}
|
package/lib/mount.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { VNode } from 'million';
|
|
2
1
|
import type { BaseComponentProps } from 'piral-core';
|
|
3
|
-
export declare function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root:
|
|
4
|
-
export declare function
|
|
5
|
-
export declare function unmountMillion(el: HTMLElement, oldNode: VNode): void;
|
|
2
|
+
export declare function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root: any, props: T): void;
|
|
3
|
+
export declare function unmountMillion(el: HTMLElement): void;
|
package/lib/mount.js
CHANGED
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.unmountMillion = exports.
|
|
4
|
-
const
|
|
3
|
+
exports.unmountMillion = exports.mountMillion = void 0;
|
|
4
|
+
const react_1 = require("million/react");
|
|
5
5
|
function mountMillion(el, root, props) {
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
const m = react_1.createElement;
|
|
7
|
+
const node = m(root, props);
|
|
8
|
+
(0, react_1.render)(node, el);
|
|
9
9
|
}
|
|
10
10
|
exports.mountMillion = mountMillion;
|
|
11
|
-
function
|
|
12
|
-
|
|
13
|
-
(0, million_1.render)(el, newNode, oldNode);
|
|
14
|
-
return newNode;
|
|
15
|
-
}
|
|
16
|
-
exports.updateMillion = updateMillion;
|
|
17
|
-
function unmountMillion(el, oldNode) {
|
|
18
|
-
(0, million_1.render)(el, '', oldNode);
|
|
11
|
+
function unmountMillion(el) {
|
|
12
|
+
(0, react_1.render)('', el);
|
|
19
13
|
}
|
|
20
14
|
exports.unmountMillion = unmountMillion;
|
|
21
15
|
//# sourceMappingURL=mount.js.map
|
package/lib/mount.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":";;;AACA,yCAAsD;AAEtD,SAAgB,YAAY,CAA+B,EAAe,EAAE,IAAS,EAAE,KAAQ;IAC7F,MAAM,CAAC,GAAG,qBAAoB,CAAC;IAC/B,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC5B,IAAA,cAAM,EAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnB,CAAC;AAJD,oCAIC;AAED,SAAgB,cAAc,CAAC,EAAe;IAC5C,IAAA,cAAM,EAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AACjB,CAAC;AAFD,wCAEC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-million",
|
|
3
|
-
"version": "0.15.0-beta.
|
|
3
|
+
"version": "0.15.0-beta.4633",
|
|
4
4
|
"description": "Plugin for integrating Million components in Piral.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"piral",
|
|
@@ -65,10 +65,10 @@
|
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
67
|
"million": "^1.12.0",
|
|
68
|
-
"piral-core": "0.15.0-beta.
|
|
68
|
+
"piral-core": "0.15.0-beta.4633"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"million": "^1.0.0"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "96b950f26e9673595f68518103508dfc76001761"
|
|
74
74
|
}
|
package/src/converter.ts
CHANGED
|
@@ -1,28 +1,16 @@
|
|
|
1
1
|
import type { ForeignComponent, BaseComponentProps } from 'piral-core';
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { createExtension } from './extension';
|
|
2
|
+
import { mountMillion, unmountMillion } from './mount';
|
|
3
|
+
import { Extension } from './extension';
|
|
5
4
|
|
|
6
|
-
export interface MillionConverterOptions {
|
|
7
|
-
/**
|
|
8
|
-
* Defines the name of the root element.
|
|
9
|
-
* @default slot
|
|
10
|
-
*/
|
|
11
|
-
rootName?: string;
|
|
12
|
-
}
|
|
5
|
+
export interface MillionConverterOptions {}
|
|
13
6
|
|
|
14
7
|
export function createConverter(config: MillionConverterOptions = {}) {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
mount(el, props, ctx, locals) {
|
|
19
|
-
locals.node = mountMillion(el, root, props);
|
|
20
|
-
},
|
|
21
|
-
update(el, props, ctx, locals) {
|
|
22
|
-
locals.node = updateMillion(el, root, props, locals.node);
|
|
8
|
+
const convert = <TProps extends BaseComponentProps>(root: any): ForeignComponent<TProps> => ({
|
|
9
|
+
mount(el, props) {
|
|
10
|
+
mountMillion(el, root, props);
|
|
23
11
|
},
|
|
24
|
-
unmount(el
|
|
25
|
-
unmountMillion(el
|
|
12
|
+
unmount(el) {
|
|
13
|
+
unmountMillion(el);
|
|
26
14
|
},
|
|
27
15
|
});
|
|
28
16
|
convert.Extension = Extension;
|
package/src/extension.ts
CHANGED
|
@@ -1,53 +1,4 @@
|
|
|
1
|
-
import { m, VNode, _ } from 'million';
|
|
2
1
|
import type { ExtensionSlotProps } from 'piral-core';
|
|
2
|
+
import { m } from 'million';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
for (const i in a) {
|
|
6
|
-
if (!(i in b)) {
|
|
7
|
-
return false;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
for (const i in b) {
|
|
12
|
-
if (!compare(a[i], b[i])) {
|
|
13
|
-
return false;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return true;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function compare<T>(a: T, b: T) {
|
|
21
|
-
if (a !== b) {
|
|
22
|
-
const ta = typeof a;
|
|
23
|
-
const tb = typeof b;
|
|
24
|
-
|
|
25
|
-
if (ta === tb && ta === 'object' && a && b) {
|
|
26
|
-
return compareObjects(a, b);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return true;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export function createExtension(rootName: string): (props: ExtensionSlotProps) => VNode {
|
|
36
|
-
return (props) => {
|
|
37
|
-
return m(rootName, props, _, _, _, {
|
|
38
|
-
create(node) {
|
|
39
|
-
const { piral } = props as any;
|
|
40
|
-
node.textContent = '';
|
|
41
|
-
node.childNodes.forEach((n) => node.removeChild(n));
|
|
42
|
-
piral.renderHtmlExtension(node, this.props);
|
|
43
|
-
return true;
|
|
44
|
-
},
|
|
45
|
-
update(node, newNode, oldNode) {
|
|
46
|
-
if (!compare((newNode as any).props, (oldNode as any).props)) {
|
|
47
|
-
//TODO render extension
|
|
48
|
-
}
|
|
49
|
-
return true;
|
|
50
|
-
},
|
|
51
|
-
});
|
|
52
|
-
};
|
|
53
|
-
}
|
|
4
|
+
export const Extension = (props: ExtensionSlotProps) => m('piral-extension', props);
|
package/src/mount.ts
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
|
-
import { render, m, VNode } from 'million';
|
|
2
1
|
import type { BaseComponentProps } from 'piral-core';
|
|
2
|
+
import { render, createElement } from 'million/react';
|
|
3
3
|
|
|
4
|
-
export function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root:
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
export function mountMillion<T extends BaseComponentProps>(el: HTMLElement, root: any, props: T) {
|
|
5
|
+
const m = createElement as any;
|
|
6
|
+
const node = m(root, props);
|
|
7
|
+
render(node, el);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
export function
|
|
11
|
-
el
|
|
12
|
-
root: (props: T) => VNode,
|
|
13
|
-
props: T,
|
|
14
|
-
oldNode: VNode,
|
|
15
|
-
) {
|
|
16
|
-
const newNode = m(root as any, props);
|
|
17
|
-
render(el, newNode, oldNode);
|
|
18
|
-
return newNode;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export function unmountMillion(el: HTMLElement, oldNode: VNode) {
|
|
22
|
-
render(el, '', oldNode);
|
|
10
|
+
export function unmountMillion(el: HTMLElement) {
|
|
11
|
+
render('', el);
|
|
23
12
|
}
|