@blocklet/pages-kit 0.2.222 → 0.2.224
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/lib/cjs/api/call.js +3 -8
- package/lib/cjs/api/pages-kit.js +2 -11
- package/lib/cjs/builtin/react-wrap-balancer.js +17 -0
- package/lib/cjs/components/CustomComponentRenderer/index.js +28 -169
- package/lib/cjs/components/CustomComponentRenderer/state.js +203 -0
- package/lib/cjs/types/api.js +6 -0
- package/lib/cjs/utils/inject-global-components.js +2 -0
- package/lib/cjs/utils/preload.js +23 -18
- package/lib/esm/api/call.js +3 -8
- package/lib/esm/api/pages-kit.js +2 -11
- package/lib/esm/builtin/react-wrap-balancer.js +1 -0
- package/lib/esm/components/CustomComponentRenderer/index.js +27 -157
- package/lib/esm/components/CustomComponentRenderer/state.js +175 -0
- package/lib/esm/types/api.js +5 -1
- package/lib/esm/utils/inject-global-components.js +2 -0
- package/lib/esm/utils/preload.js +24 -19
- package/lib/types/api/call.d.ts +2 -2
- package/lib/types/api/pages-kit.d.ts +2 -2
- package/lib/types/builtin/react-wrap-balancer.d.ts +1 -0
- package/lib/types/components/CustomComponentRenderer/index.d.ts +12 -5
- package/lib/types/components/CustomComponentRenderer/state.d.ts +150 -0
- package/lib/types/types/api.d.ts +36 -15
- package/lib/types/types/preload.d.ts +8 -2
- package/lib/types/utils/preload.d.ts +2 -2
- package/package.json +8 -7
- package/lib/cjs/utils/preload-client.js +0 -51
- package/lib/esm/utils/preload-client.js +0 -47
- package/lib/types/utils/preload-client.d.ts +0 -8
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
import { CustomComponent, PreloadComponentsInput } from '../../types';
|
|
3
|
+
import { PreloadComponentsState } from '../../types/preload';
|
|
4
|
+
import type { CustomComponentRendererProps } from '.';
|
|
5
|
+
export interface CustomComponentStates {
|
|
6
|
+
state: PreloadComponentsState;
|
|
7
|
+
getComponent(options: {
|
|
8
|
+
locale: string;
|
|
9
|
+
instanceId?: string;
|
|
10
|
+
componentId: string;
|
|
11
|
+
}): {
|
|
12
|
+
component: CustomComponent;
|
|
13
|
+
Component: ComponentType;
|
|
14
|
+
props?: {
|
|
15
|
+
[key: string]: any;
|
|
16
|
+
};
|
|
17
|
+
} | null;
|
|
18
|
+
loadComponents(input: Pick<PreloadComponentsInput, 'mode' | 'locale' | 'instances'>): Promise<void>;
|
|
19
|
+
}
|
|
20
|
+
export declare const customComponentStates: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<CustomComponentStates>, "setState"> & {
|
|
21
|
+
setState(nextStateOrUpdater: CustomComponentStates | Partial<CustomComponentStates> | ((state: {
|
|
22
|
+
state: {
|
|
23
|
+
config: {
|
|
24
|
+
defaultLocale?: string | undefined;
|
|
25
|
+
supportedLocales?: {
|
|
26
|
+
locale: string;
|
|
27
|
+
}[] | undefined;
|
|
28
|
+
};
|
|
29
|
+
components: {
|
|
30
|
+
[x: string]: {
|
|
31
|
+
componentModuleGlobalVariable?: string | undefined;
|
|
32
|
+
component: {
|
|
33
|
+
id: string;
|
|
34
|
+
createdAt: string;
|
|
35
|
+
updatedAt: string;
|
|
36
|
+
name?: string | undefined;
|
|
37
|
+
renderer?: {
|
|
38
|
+
type: "web-component";
|
|
39
|
+
script?: string | undefined;
|
|
40
|
+
} | {
|
|
41
|
+
type: "react-component";
|
|
42
|
+
script?: string | undefined;
|
|
43
|
+
} | {
|
|
44
|
+
type: "component";
|
|
45
|
+
componentId?: string | undefined;
|
|
46
|
+
properties?: {
|
|
47
|
+
[x: string]: {
|
|
48
|
+
locales?: {
|
|
49
|
+
[x: string]: {
|
|
50
|
+
value?: any;
|
|
51
|
+
};
|
|
52
|
+
} | undefined;
|
|
53
|
+
};
|
|
54
|
+
} | undefined;
|
|
55
|
+
} | undefined;
|
|
56
|
+
properties?: {
|
|
57
|
+
[x: string]: {
|
|
58
|
+
index: number;
|
|
59
|
+
data: {
|
|
60
|
+
type: "number" | "boolean" | "json" | "url";
|
|
61
|
+
id: string;
|
|
62
|
+
key?: string | undefined;
|
|
63
|
+
locales?: {
|
|
64
|
+
[x: string]: {
|
|
65
|
+
name?: string | undefined;
|
|
66
|
+
defaultValue?: any;
|
|
67
|
+
};
|
|
68
|
+
} | undefined;
|
|
69
|
+
} | {
|
|
70
|
+
type: "custom";
|
|
71
|
+
componentId?: string | undefined;
|
|
72
|
+
id: string;
|
|
73
|
+
key?: string | undefined;
|
|
74
|
+
locales?: {
|
|
75
|
+
[x: string]: {
|
|
76
|
+
name?: string | undefined;
|
|
77
|
+
defaultValue?: any;
|
|
78
|
+
};
|
|
79
|
+
} | undefined;
|
|
80
|
+
} | {
|
|
81
|
+
type?: "string" | undefined;
|
|
82
|
+
multiline?: boolean | undefined;
|
|
83
|
+
id: string;
|
|
84
|
+
key?: string | undefined;
|
|
85
|
+
locales?: {
|
|
86
|
+
[x: string]: {
|
|
87
|
+
name?: string | undefined;
|
|
88
|
+
defaultValue?: any;
|
|
89
|
+
};
|
|
90
|
+
} | undefined;
|
|
91
|
+
} | {
|
|
92
|
+
type: "component";
|
|
93
|
+
componentId?: string | undefined;
|
|
94
|
+
locales?: {
|
|
95
|
+
[x: string]: {
|
|
96
|
+
name?: undefined;
|
|
97
|
+
defaultValue?: {
|
|
98
|
+
componentId?: string | undefined;
|
|
99
|
+
properties: any;
|
|
100
|
+
} | undefined;
|
|
101
|
+
};
|
|
102
|
+
} | undefined;
|
|
103
|
+
id: string;
|
|
104
|
+
key?: string | undefined;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
} | undefined;
|
|
108
|
+
};
|
|
109
|
+
Component?: ComponentType | undefined;
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
instances: {
|
|
113
|
+
[x: string]: {
|
|
114
|
+
componentId: string;
|
|
115
|
+
locales?: {
|
|
116
|
+
[x: string]: {
|
|
117
|
+
props?: {
|
|
118
|
+
[x: string]: any;
|
|
119
|
+
} | undefined;
|
|
120
|
+
};
|
|
121
|
+
} | undefined;
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
};
|
|
125
|
+
getComponent: (options: {
|
|
126
|
+
locale: string;
|
|
127
|
+
instanceId?: string;
|
|
128
|
+
componentId: string;
|
|
129
|
+
}) => {
|
|
130
|
+
component: CustomComponent;
|
|
131
|
+
Component: ComponentType;
|
|
132
|
+
props?: {
|
|
133
|
+
[key: string]: any;
|
|
134
|
+
} | undefined;
|
|
135
|
+
} | null;
|
|
136
|
+
loadComponents: (input: Pick<PreloadComponentsInput, 'mode' | 'locale' | 'instances'>) => Promise<void>;
|
|
137
|
+
}) => void), shouldReplace?: boolean | undefined): void;
|
|
138
|
+
}>;
|
|
139
|
+
export declare function usePreloadComponent({ instanceId, componentId, properties: parameters, locale: requestLocale, dev: { mode }, }: CustomComponentRendererProps): {
|
|
140
|
+
Component: ComponentType<any>;
|
|
141
|
+
props?: {
|
|
142
|
+
[key: string]: any;
|
|
143
|
+
};
|
|
144
|
+
} | null;
|
|
145
|
+
export declare function useTranspileComponent({ componentId, locale, properties, dev: { defaultLocale, components }, }: CustomComponentRendererProps): {
|
|
146
|
+
Component: ComponentType;
|
|
147
|
+
props: {
|
|
148
|
+
[key: string]: any;
|
|
149
|
+
};
|
|
150
|
+
} | null;
|
package/lib/types/types/api.d.ts
CHANGED
|
@@ -1,35 +1,56 @@
|
|
|
1
1
|
import { CustomComponent } from './core';
|
|
2
2
|
import { StateMode } from './state';
|
|
3
|
-
export interface
|
|
3
|
+
export interface PreloadComponentsInput {
|
|
4
4
|
locale?: string;
|
|
5
5
|
mode?: StateMode;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
module: PreloadComponentScriptModule;
|
|
7
|
+
instances: {
|
|
8
|
+
id: string;
|
|
9
|
+
component: {
|
|
10
|
+
id: string;
|
|
11
|
+
} | {
|
|
12
|
+
name: string;
|
|
13
|
+
};
|
|
14
|
+
properties?: {
|
|
15
|
+
[propertyId: string]: {
|
|
16
|
+
value: any;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
}[];
|
|
20
|
+
}
|
|
21
|
+
export declare enum PreloadComponentScriptModule {
|
|
22
|
+
UMD_FN = "umd_fn",
|
|
23
|
+
ESM = "esm"
|
|
8
24
|
}
|
|
9
25
|
export interface PreloadComponentsResult {
|
|
10
26
|
config: {
|
|
11
27
|
defaultLocale: string;
|
|
28
|
+
supportedLocales: {
|
|
29
|
+
locale: string;
|
|
30
|
+
}[];
|
|
12
31
|
};
|
|
13
32
|
components: {
|
|
14
33
|
[componentId: string]: {
|
|
15
34
|
component: CustomComponent;
|
|
16
35
|
script: {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
36
|
+
module: PreloadComponentScriptModule.UMD_FN;
|
|
37
|
+
script: string;
|
|
38
|
+
moduleName: string;
|
|
39
|
+
} | {
|
|
40
|
+
module: PreloadComponentScriptModule.ESM;
|
|
41
|
+
script: string;
|
|
21
42
|
};
|
|
22
43
|
};
|
|
23
44
|
};
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
45
|
+
instances: {
|
|
46
|
+
id: string;
|
|
47
|
+
componentId: string;
|
|
48
|
+
locales?: {
|
|
49
|
+
[locale: string]: {
|
|
50
|
+
props?: {
|
|
51
|
+
[key: string]: any;
|
|
31
52
|
};
|
|
32
53
|
};
|
|
33
54
|
};
|
|
34
|
-
};
|
|
55
|
+
}[];
|
|
35
56
|
}
|
|
@@ -1,18 +1,24 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
1
2
|
import { CustomComponent } from './core';
|
|
2
3
|
export declare const PreloadComponentsStateGlobalVariableName = "__PAGES_KIT_PRELOAD_CUSTOM_COMPONENTS_STATE__";
|
|
3
4
|
export interface PreloadComponent {
|
|
4
|
-
|
|
5
|
+
componentModuleGlobalVariable?: string;
|
|
5
6
|
component: CustomComponent;
|
|
7
|
+
Component?: ComponentType;
|
|
6
8
|
}
|
|
7
9
|
export interface PreloadComponentsState {
|
|
8
10
|
config: {
|
|
9
11
|
defaultLocale?: string;
|
|
12
|
+
supportedLocales?: {
|
|
13
|
+
locale: string;
|
|
14
|
+
}[];
|
|
10
15
|
};
|
|
11
16
|
components: {
|
|
12
17
|
[componentId: string]: PreloadComponent;
|
|
13
18
|
};
|
|
14
|
-
|
|
19
|
+
instances: {
|
|
15
20
|
[instanceId: string]: {
|
|
21
|
+
componentId: string;
|
|
16
22
|
locales?: {
|
|
17
23
|
[locale: string]: {
|
|
18
24
|
props?: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { PreloadComponentsResult } from '../types';
|
|
2
|
-
export declare function injectPreloadComponents(
|
|
2
|
+
export declare function injectPreloadComponents(data: PreloadComponentsResult): {
|
|
3
3
|
html: string;
|
|
4
|
-
}
|
|
4
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/pages-kit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.224",
|
|
4
4
|
"description": "Pages Kit components and utils",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -101,7 +101,8 @@
|
|
|
101
101
|
"nanoid": "^3.3.7",
|
|
102
102
|
"react-error-boundary": "^4.0.12",
|
|
103
103
|
"react-frame-component": "^5.2.6",
|
|
104
|
-
"react-hook-form": "^7.
|
|
104
|
+
"react-hook-form": "^7.50.0",
|
|
105
|
+
"react-wrap-balancer": "^1.1.0",
|
|
105
106
|
"typescript": "^5.3.3",
|
|
106
107
|
"ufo": "^1.3.2",
|
|
107
108
|
"zustand": "^4.5.0"
|
|
@@ -120,17 +121,17 @@
|
|
|
120
121
|
"react-router-dom": "^6.16.0"
|
|
121
122
|
},
|
|
122
123
|
"devDependencies": {
|
|
123
|
-
"@arcblock/ux": "^2.9.
|
|
124
|
+
"@arcblock/ux": "^2.9.23",
|
|
124
125
|
"@emotion/cache": "^11.11.0",
|
|
125
126
|
"@emotion/css": "^11.11.2",
|
|
126
127
|
"@emotion/react": "^11.11.3",
|
|
127
|
-
"@mui/icons-material": "^5.15.
|
|
128
|
-
"@mui/lab": "^5.0.0-alpha.
|
|
129
|
-
"@mui/material": "^5.15.
|
|
128
|
+
"@mui/icons-material": "^5.15.7",
|
|
129
|
+
"@mui/lab": "^5.0.0-alpha.163",
|
|
130
|
+
"@mui/material": "^5.15.7",
|
|
130
131
|
"@types/lodash": "^4.14.202",
|
|
131
132
|
"@types/mustache": "^4.2.5",
|
|
132
133
|
"@types/node-fetch": "^2.6.11",
|
|
133
|
-
"@types/react": "^18.2.
|
|
134
|
+
"@types/react": "^18.2.50",
|
|
134
135
|
"axios": "^1.6.7",
|
|
135
136
|
"npm-run-all": "^4.1.5",
|
|
136
137
|
"react": "^18.2.0",
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
-
});
|
|
10
|
-
};
|
|
11
|
-
var _a;
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
exports.loadAndInjectComponents = exports.PRELOAD_COMPONENTS_STATE = void 0;
|
|
14
|
-
const api_1 = require("../api");
|
|
15
|
-
const preload_1 = require("../types/preload");
|
|
16
|
-
(_a = window[preload_1.PreloadComponentsStateGlobalVariableName]) !== null && _a !== void 0 ? _a : (window[preload_1.PreloadComponentsStateGlobalVariableName] = {
|
|
17
|
-
config: {},
|
|
18
|
-
components: {},
|
|
19
|
-
props: {},
|
|
20
|
-
});
|
|
21
|
-
exports.PRELOAD_COMPONENTS_STATE = window[preload_1.PreloadComponentsStateGlobalVariableName];
|
|
22
|
-
function loadAndInjectComponents({ mode, name, locale, }) {
|
|
23
|
-
var _a, _b, _c, _d, _e, _f;
|
|
24
|
-
var _g, _h, _j;
|
|
25
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
26
|
-
const { components, props } = exports.PRELOAD_COMPONENTS_STATE;
|
|
27
|
-
const c = Object.values(components).find((i) => !!i.component.name && i.component.name.toLowerCase() === name.toLowerCase());
|
|
28
|
-
if (c && props[c.component.id]) {
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
const result = yield (0, api_1.preloadComponents)({ mode, name, locale });
|
|
32
|
-
const componentId = Object.keys(result.props)[0];
|
|
33
|
-
for (const i of Object.values(result.components)) {
|
|
34
|
-
if (!window[i.script.umd.moduleName]) {
|
|
35
|
-
const script = document.createElement('script');
|
|
36
|
-
script.textContent = i.script.umd.script;
|
|
37
|
-
document.body.appendChild(script);
|
|
38
|
-
}
|
|
39
|
-
exports.PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
|
|
40
|
-
preloadComponentModuleName: i.script.umd.moduleName,
|
|
41
|
-
component: i.component,
|
|
42
|
-
};
|
|
43
|
-
}
|
|
44
|
-
(_a = (_g = exports.PRELOAD_COMPONENTS_STATE.props)[componentId]) !== null && _a !== void 0 ? _a : (_g[componentId] = {});
|
|
45
|
-
(_b = (_h = exports.PRELOAD_COMPONENTS_STATE.props[componentId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
|
|
46
|
-
(_c = (_j = exports.PRELOAD_COMPONENTS_STATE.props[componentId].locales)[locale]) !== null && _c !== void 0 ? _c : (_j[locale] = {});
|
|
47
|
-
exports.PRELOAD_COMPONENTS_STATE.props[componentId].locales[locale].props =
|
|
48
|
-
(_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
exports.loadAndInjectComponents = loadAndInjectComponents;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
var _a;
|
|
11
|
-
import { preloadComponents } from '../api';
|
|
12
|
-
import { PreloadComponentsStateGlobalVariableName } from '../types/preload';
|
|
13
|
-
(_a = window[PreloadComponentsStateGlobalVariableName]) !== null && _a !== void 0 ? _a : (window[PreloadComponentsStateGlobalVariableName] = {
|
|
14
|
-
config: {},
|
|
15
|
-
components: {},
|
|
16
|
-
props: {},
|
|
17
|
-
});
|
|
18
|
-
export const PRELOAD_COMPONENTS_STATE = window[PreloadComponentsStateGlobalVariableName];
|
|
19
|
-
export function loadAndInjectComponents({ mode, name, locale, }) {
|
|
20
|
-
var _a, _b, _c, _d, _e, _f;
|
|
21
|
-
var _g, _h, _j;
|
|
22
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
23
|
-
const { components, props } = PRELOAD_COMPONENTS_STATE;
|
|
24
|
-
const c = Object.values(components).find((i) => !!i.component.name && i.component.name.toLowerCase() === name.toLowerCase());
|
|
25
|
-
if (c && props[c.component.id]) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
const result = yield preloadComponents({ mode, name, locale });
|
|
29
|
-
const componentId = Object.keys(result.props)[0];
|
|
30
|
-
for (const i of Object.values(result.components)) {
|
|
31
|
-
if (!window[i.script.umd.moduleName]) {
|
|
32
|
-
const script = document.createElement('script');
|
|
33
|
-
script.textContent = i.script.umd.script;
|
|
34
|
-
document.body.appendChild(script);
|
|
35
|
-
}
|
|
36
|
-
PRELOAD_COMPONENTS_STATE.components[i.component.id] = {
|
|
37
|
-
preloadComponentModuleName: i.script.umd.moduleName,
|
|
38
|
-
component: i.component,
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
(_a = (_g = PRELOAD_COMPONENTS_STATE.props)[componentId]) !== null && _a !== void 0 ? _a : (_g[componentId] = {});
|
|
42
|
-
(_b = (_h = PRELOAD_COMPONENTS_STATE.props[componentId]).locales) !== null && _b !== void 0 ? _b : (_h.locales = {});
|
|
43
|
-
(_c = (_j = PRELOAD_COMPONENTS_STATE.props[componentId].locales)[locale]) !== null && _c !== void 0 ? _c : (_j[locale] = {});
|
|
44
|
-
PRELOAD_COMPONENTS_STATE.props[componentId].locales[locale].props =
|
|
45
|
-
(_f = (_e = (_d = result.props[componentId]) === null || _d === void 0 ? void 0 : _d.locales) === null || _e === void 0 ? void 0 : _e[locale]) === null || _f === void 0 ? void 0 : _f.props;
|
|
46
|
-
});
|
|
47
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { StateMode } from '../types';
|
|
2
|
-
import { PreloadComponentsState } from '../types/preload';
|
|
3
|
-
export declare const PRELOAD_COMPONENTS_STATE: PreloadComponentsState;
|
|
4
|
-
export declare function loadAndInjectComponents({ mode, name, locale, }: {
|
|
5
|
-
mode?: StateMode;
|
|
6
|
-
name: string;
|
|
7
|
-
locale: string;
|
|
8
|
-
}): Promise<void>;
|