mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-13 09:41:57 +00:00
feat: 🎸 按 826 对齐结论调整出码和数据源引擎
This commit is contained in:
牧毅
parent
94bd602d09
commit
b9a562eeab
@ -59,11 +59,16 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -87,12 +92,9 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -106,34 +108,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
|
||||
});
|
||||
|
||||
next.chunks.push({
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: CLASS_DEFINE_CHUNK_NAME.InsVar,
|
||||
content: `
|
||||
_i18n = this._createI18nDelegate();
|
||||
`,
|
||||
linkAfter: [CLASS_DEFINE_CHUNK_NAME.Start],
|
||||
});
|
||||
|
||||
next.chunks.push({
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: CLASS_DEFINE_CHUNK_NAME.InsPrivateMethod,
|
||||
content: `
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
`,
|
||||
linkAfter: [RAX_CHUNK_NAME.ClassRenderEnd],
|
||||
});
|
||||
return next;
|
||||
};
|
||||
return plugin;
|
||||
|
||||
@ -126,7 +126,11 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
|
||||
type: ChunkType.STRING,
|
||||
fileType: cfg.fileType,
|
||||
name: RAX_CHUNK_NAME.ClassRenderPre,
|
||||
content: `const __$$context = this._context;`,
|
||||
// TODO: setState, dataSourceMap, reloadDataSource, utils, i18n, i18nFormat, getLocale, setLocale 这些在 Rax 的编译模式下不能在视图中直接访问，需要转化成 this.xxx
|
||||
content: `
|
||||
const __$$context = this._context;
|
||||
const { state, setState, dataSourceMap, reloadDataSource, utils, constants, i18n, i18nFormat, getLocale, setLocale } = __$$context;
|
||||
`,
|
||||
linkAfter: [RAX_CHUNK_NAME.ClassRenderBegin],
|
||||
});
|
||||
|
||||
|
||||
@ -35,6 +35,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
dependencies: {
|
||||
'@ali/lowcode-datasource-engine': '^0.1.0',
|
||||
'universal-env': '^3.2.0',
|
||||
'intl-messageformat': '^9.3.6',
|
||||
rax: '^1.1.0',
|
||||
'rax-app': '^2.0.0',
|
||||
'rax-document': '^0.1.0',
|
||||
|
||||
@ -24,6 +24,8 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
fileType: FileType.JS,
|
||||
name: COMMON_CHUNK_NAME.FileMainContent,
|
||||
content: `
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
|
||||
const i18nConfig = ${i18nStr};
|
||||
|
||||
let locale = 'en-US';
|
||||
@ -34,7 +36,23 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
locale = target;
|
||||
};
|
||||
|
||||
const i18n = key => i18nConfig && i18nConfig[locale] && i18nConfig[locale][key] || '';
|
||||
const i18nFormat = ({ id, defaultMessage }, variables) => {
|
||||
const msg = i18nConfig && i18nConfig[locale] && i18nConfig[locale][id] || defaultMessage;
|
||||
if (msg == null) {
|
||||
console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
|
||||
return \`\${id}\`;
|
||||
}
|
||||
|
||||
if (!variables || !variables.length) {
|
||||
return msg;
|
||||
}
|
||||
|
||||
return new IntlMessageFormat(msg, locale).format(variables);
|
||||
}
|
||||
|
||||
const i18n = id => {
|
||||
return i18nFormat({ id });
|
||||
};
|
||||
`,
|
||||
linkAfter: [
|
||||
COMMON_CHUNK_NAME.ExternalDepsImport,
|
||||
@ -54,6 +72,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
|
||||
getLocale,
|
||||
setLocale,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
};
|
||||
`,
|
||||
linkAfter: [
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ali/lowcode-datasource-engine": "^0.1.0",
|
||||
"universal-env": "^3.2.0",
|
||||
"intl-messageformat": "^9.3.6",
|
||||
"rax": "^1.1.0",
|
||||
"rax-app": "^2.0.0",
|
||||
"rax-document": "^0.1.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
|
||||
const i18nConfig = {};
|
||||
|
||||
let locale = 'en-US';
|
||||
@ -8,6 +10,22 @@ const setLocale = (target) => {
|
||||
locale = target;
|
||||
};
|
||||
|
||||
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
|
||||
const i18nFormat = ({ id, defaultMessage }, variables) => {
|
||||
const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
|
||||
if (msg == null) {
|
||||
console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
|
||||
return `${id}`;
|
||||
}
|
||||
|
||||
export { getLocale, setLocale, i18n };
|
||||
if (!variables || !variables.length) {
|
||||
return msg;
|
||||
}
|
||||
|
||||
return new IntlMessageFormat(msg, locale).format(variables);
|
||||
};
|
||||
|
||||
const i18n = (id) => {
|
||||
return i18nFormat({ id });
|
||||
};
|
||||
|
||||
export { getLocale, setLocale, i18n, i18nFormat };
|
||||
|
||||
@ -24,8 +24,6 @@ class Home$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
|
||||
|
||||
@ -39,6 +37,18 @@ class Home$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
@ -50,11 +60,16 @@ class Home$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -78,12 +93,9 @@ class Home$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -94,17 +106,6 @@ class Home$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return { list: [] };
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ali/lowcode-datasource-engine": "^0.1.0",
|
||||
"universal-env": "^3.2.0",
|
||||
"intl-messageformat": "^9.3.6",
|
||||
"rax": "^1.1.0",
|
||||
"rax-app": "^2.0.0",
|
||||
"rax-document": "^0.1.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
|
||||
const i18nConfig = {};
|
||||
|
||||
let locale = 'en-US';
|
||||
@ -8,6 +10,22 @@ const setLocale = (target) => {
|
||||
locale = target;
|
||||
};
|
||||
|
||||
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
|
||||
const i18nFormat = ({ id, defaultMessage }, variables) => {
|
||||
const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
|
||||
if (msg == null) {
|
||||
console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
|
||||
return `${id}`;
|
||||
}
|
||||
|
||||
export { getLocale, setLocale, i18n };
|
||||
if (!variables || !variables.length) {
|
||||
return msg;
|
||||
}
|
||||
|
||||
return new IntlMessageFormat(msg, locale).format(variables);
|
||||
};
|
||||
|
||||
const i18n = (id) => {
|
||||
return i18nFormat({ id });
|
||||
};
|
||||
|
||||
export { getLocale, setLocale, i18n, i18nFormat };
|
||||
|
||||
@ -47,8 +47,6 @@ class Home$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, {
|
||||
runtimeConfig: true,
|
||||
@ -74,6 +72,18 @@ class Home$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<View>
|
||||
@ -147,11 +157,16 @@ class Home$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -175,12 +190,9 @@ class Home$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -191,17 +203,6 @@ class Home$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return {
|
||||
|
||||
@ -348,10 +348,9 @@
|
||||
main: '/clone',
|
||||
},
|
||||
},
|
||||
// 支持 TNPM
|
||||
{
|
||||
name: 'Toast',
|
||||
type: 'tnpm',
|
||||
type: 'npm',
|
||||
content: {
|
||||
package: 'universal-toast',
|
||||
version: '^1.2.0',
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ali/lowcode-datasource-engine": "^0.1.0",
|
||||
"universal-env": "^3.2.0",
|
||||
"intl-messageformat": "^9.3.6",
|
||||
"rax": "^1.1.0",
|
||||
"rax-app": "^2.0.0",
|
||||
"rax-document": "^0.1.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
|
||||
const i18nConfig = {};
|
||||
|
||||
let locale = 'en-US';
|
||||
@ -8,6 +10,22 @@ const setLocale = (target) => {
|
||||
locale = target;
|
||||
};
|
||||
|
||||
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
|
||||
const i18nFormat = ({ id, defaultMessage }, variables) => {
|
||||
const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
|
||||
if (msg == null) {
|
||||
console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
|
||||
return `${id}`;
|
||||
}
|
||||
|
||||
export { getLocale, setLocale, i18n };
|
||||
if (!variables || !variables.length) {
|
||||
return msg;
|
||||
}
|
||||
|
||||
return new IntlMessageFormat(msg, locale).format(variables);
|
||||
};
|
||||
|
||||
const i18n = (id) => {
|
||||
return i18nFormat({ id });
|
||||
};
|
||||
|
||||
export { getLocale, setLocale, i18n, i18nFormat };
|
||||
|
||||
@ -30,8 +30,6 @@ class Detail$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
|
||||
|
||||
@ -45,6 +43,18 @@ class Detail$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<View>
|
||||
@ -61,11 +71,16 @@ class Detail$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -89,12 +104,9 @@ class Detail$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -105,17 +117,6 @@ class Detail$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return { list: [] };
|
||||
|
||||
@ -30,8 +30,6 @@ class Home$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
|
||||
|
||||
@ -45,6 +43,18 @@ class Home$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<View>
|
||||
@ -61,11 +71,16 @@ class Home$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -89,12 +104,9 @@ class Home$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -105,17 +117,6 @@ class Home$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return { list: [] };
|
||||
|
||||
@ -30,8 +30,6 @@ class List$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
|
||||
|
||||
@ -45,6 +43,18 @@ class List$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<View>
|
||||
@ -64,11 +74,16 @@ class List$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -92,12 +107,9 @@ class List$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -108,17 +120,6 @@ class List$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return { list: [] };
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ali/lowcode-datasource-engine": "^0.1.0",
|
||||
"universal-env": "^3.2.0",
|
||||
"intl-messageformat": "^9.3.6",
|
||||
"rax": "^1.1.0",
|
||||
"rax-app": "^2.0.0",
|
||||
"rax-document": "^0.1.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
|
||||
const i18nConfig = {};
|
||||
|
||||
let locale = 'en-US';
|
||||
@ -8,6 +10,22 @@ const setLocale = (target) => {
|
||||
locale = target;
|
||||
};
|
||||
|
||||
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
|
||||
const i18nFormat = ({ id, defaultMessage }, variables) => {
|
||||
const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
|
||||
if (msg == null) {
|
||||
console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
|
||||
return `${id}`;
|
||||
}
|
||||
|
||||
export { getLocale, setLocale, i18n };
|
||||
if (!variables || !variables.length) {
|
||||
return msg;
|
||||
}
|
||||
|
||||
return new IntlMessageFormat(msg, locale).format(variables);
|
||||
};
|
||||
|
||||
const i18n = (id) => {
|
||||
return i18nFormat({ id });
|
||||
};
|
||||
|
||||
export { getLocale, setLocale, i18n, i18nFormat };
|
||||
|
||||
@ -30,8 +30,6 @@ class Home$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
|
||||
|
||||
@ -45,6 +43,18 @@ class Home$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<View>
|
||||
@ -58,11 +68,16 @@ class Home$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -86,12 +101,9 @@ class Home$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -102,17 +114,6 @@ class Home$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return { list: [] };
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@ali/lowcode-datasource-engine": "^0.1.0",
|
||||
"universal-env": "^3.2.0",
|
||||
"intl-messageformat": "^9.3.6",
|
||||
"rax": "^1.1.0",
|
||||
"rax-app": "^2.0.0",
|
||||
"rax-document": "^0.1.0",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
|
||||
const i18nConfig = {
|
||||
'zh-CN': {
|
||||
'hello-world': '你好，世界！',
|
||||
@ -15,6 +17,22 @@ const setLocale = (target) => {
|
||||
locale = target;
|
||||
};
|
||||
|
||||
const i18n = (key) => (i18nConfig && i18nConfig[locale] && i18nConfig[locale][key]) || '';
|
||||
const i18nFormat = ({ id, defaultMessage }, variables) => {
|
||||
const msg = (i18nConfig && i18nConfig[locale] && i18nConfig[locale][id]) || defaultMessage;
|
||||
if (msg == null) {
|
||||
console.warn('[i18n]: unknown message id: %o (locale=%o)', id, locale);
|
||||
return `${id}`;
|
||||
}
|
||||
|
||||
export { getLocale, setLocale, i18n };
|
||||
if (!variables || !variables.length) {
|
||||
return msg;
|
||||
}
|
||||
|
||||
return new IntlMessageFormat(msg, locale).format(variables);
|
||||
};
|
||||
|
||||
const i18n = (id) => {
|
||||
return i18nFormat({ id });
|
||||
};
|
||||
|
||||
export { getLocale, setLocale, i18n, i18nFormat };
|
||||
|
||||
@ -24,8 +24,6 @@ class Home$$Page extends Component {
|
||||
|
||||
_context = this._createContext();
|
||||
|
||||
_i18n = this._createI18nDelegate();
|
||||
|
||||
_dataSourceConfig = this._defineDataSourceConfig();
|
||||
_dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this._context, { runtimeConfig: true });
|
||||
|
||||
@ -39,6 +37,18 @@ class Home$$Page extends Component {
|
||||
|
||||
render() {
|
||||
const __$$context = this._context;
|
||||
const {
|
||||
state,
|
||||
setState,
|
||||
dataSourceMap,
|
||||
reloadDataSource,
|
||||
utils,
|
||||
constants,
|
||||
i18n,
|
||||
i18nFormat,
|
||||
getLocale,
|
||||
setLocale,
|
||||
} = __$$context;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
@ -56,11 +66,16 @@ class Home$$Page extends Component {
|
||||
_createContext() {
|
||||
const self = this;
|
||||
|
||||
// 保存下最新的状态，这样 setState 可以搞成同步一样的了
|
||||
self._latestState = self.state;
|
||||
|
||||
const context = {
|
||||
get state() {
|
||||
return self.state;
|
||||
// 这里直接获取最新的 state，从而能避免一些 React/Rax 这样的框架因为异步 setState 而导致的一些问题
|
||||
return self._latestState;
|
||||
},
|
||||
setState(newState) {
|
||||
self._latestState = { ...self._latestState, ...newState };
|
||||
self.setState(newState);
|
||||
},
|
||||
get dataSourceMap() {
|
||||
@ -84,12 +99,9 @@ class Home$$Page extends Component {
|
||||
get constants() {
|
||||
return __$$constants;
|
||||
},
|
||||
get i18n() {
|
||||
return self._i18n;
|
||||
},
|
||||
getLocale() {
|
||||
return __$$i18n.getLocale();
|
||||
},
|
||||
i18n: __$$i18n.i18n,
|
||||
i18nFormat: __$$i18n.i18nFormat,
|
||||
getLocale: __$$i18n.getLocale,
|
||||
setLocale(locale) {
|
||||
__$$i18n.setLocale(locale);
|
||||
self.forceUpdate();
|
||||
@ -100,17 +112,6 @@ class Home$$Page extends Component {
|
||||
return context;
|
||||
}
|
||||
|
||||
_createI18nDelegate() {
|
||||
return new Proxy(
|
||||
{},
|
||||
{
|
||||
get(target, prop) {
|
||||
return __$$i18n.i18n(prop);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
_defineDataSourceConfig() {
|
||||
const __$$context = this._context;
|
||||
return { list: [] };
|
||||
|
||||
@ -17,8 +17,7 @@ export class DataSourceEngine implements IDataSourceEngine {
|
||||
) {
|
||||
_dataSourceConfig.list?.forEach((ds) => {
|
||||
// 确保数据源都有处理器
|
||||
const requestHandler =
|
||||
ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
|
||||
const requestHandler = ds.requestHandler || _options?.requestHandlersMap?.[ds.type];
|
||||
if (!requestHandler) {
|
||||
throw new Error(`No request handler for "${ds.type}" data source`);
|
||||
}
|
||||
@ -51,12 +50,8 @@ export class DataSourceEngine implements IDataSourceEngine {
|
||||
}
|
||||
}
|
||||
|
||||
await sleep(0); // TODO: 如何优雅地解决 setState 的异步问题？
|
||||
|
||||
// 然后是所有其他的
|
||||
const remainDataSourceConfigList = allDataSourceConfigList.filter(
|
||||
(x) => x.type !== 'urlParams',
|
||||
);
|
||||
const remainDataSourceConfigList = allDataSourceConfigList.filter((x) => x.type !== 'urlParams');
|
||||
|
||||
// 先发起异步的
|
||||
const asyncLoadings: Array<Promise<unknown>> = [];
|
||||
@ -65,9 +60,7 @@ export class DataSourceEngine implements IDataSourceEngine {
|
||||
const options = getValue(ds.options);
|
||||
if (options && !options.isSync) {
|
||||
this._dataSourceMap[ds.id].setOptions(options);
|
||||
asyncLoadings.push(
|
||||
this._dataSourceMap[ds.id].load(options?.params).catch(() => {}),
|
||||
);
|
||||
asyncLoadings.push(this._dataSourceMap[ds.id].load(options?.params).catch(() => {}));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -106,18 +99,12 @@ export class DataSourceEngine implements IDataSourceEngine {
|
||||
}
|
||||
}
|
||||
|
||||
export const create: IDataSourceEngineFactory['create'] = (
|
||||
dataSourceConfig,
|
||||
runtimeContext,
|
||||
options,
|
||||
) => {
|
||||
export const create: IDataSourceEngineFactory['create'] = (dataSourceConfig, runtimeContext, options) => {
|
||||
return new DataSourceEngine(dataSourceConfig, runtimeContext, options);
|
||||
};
|
||||
|
||||
function getValue<T>(valueOrValueGetter: T | (() => T)): T;
|
||||
function getValue<T extends boolean>(
|
||||
valueOrValueGetter: T | (() => T),
|
||||
): T | undefined {
|
||||
function getValue<T extends boolean>(valueOrValueGetter: T | (() => T)): T | undefined {
|
||||
if (typeof valueOrValueGetter === 'function') {
|
||||
try {
|
||||
return valueOrValueGetter();
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import {
|
||||
DataSourceOptions,
|
||||
IRuntimeDataSource,
|
||||
RequestHandler,
|
||||
RuntimeDataSourceStatus,
|
||||
} from '../types';
|
||||
import { DataSourceOptions, IRuntimeDataSource, RequestHandler, RuntimeDataSourceStatus } from '../types';
|
||||
import { DataSourceResponse } from '../types/DataSourceResponse';
|
||||
|
||||
export class RuntimeDataSource<
|
||||
TParams extends Record<string, unknown> = Record<string, unknown>,
|
||||
@ -19,13 +15,10 @@ export class RuntimeDataSource<
|
||||
private _id: string,
|
||||
private _type: string,
|
||||
private _initialOptions: DataSourceOptions<TParams>,
|
||||
private _requestHandler: RequestHandler<
|
||||
DataSourceOptions<TParams>,
|
||||
TRequestResult
|
||||
>,
|
||||
private _requestHandler: RequestHandler<DataSourceOptions<TParams>, DataSourceResponse<TRequestResult>>,
|
||||
private _dataHandler:
|
||||
| ((
|
||||
data: TRequestResult | undefined,
|
||||
data: DataSourceResponse<TRequestResult> | undefined,
|
||||
error: unknown | undefined,
|
||||
) => TResultData | Promise<TResultData>)
|
||||
| undefined,
|
||||
@ -79,11 +72,11 @@ export class RuntimeDataSource<
|
||||
|
||||
private async _request(options: DataSourceOptions<TParams>) {
|
||||
try {
|
||||
const reqResult = await this._requestHandler(options);
|
||||
const response = await this._requestHandler(options);
|
||||
|
||||
const data = this._dataHandler
|
||||
? await this._dataHandler(reqResult, undefined)
|
||||
: ((reqResult as unknown) as TResultData);
|
||||
? await this._dataHandler(response, undefined)
|
||||
: ((response.data as unknown) as TResultData);
|
||||
|
||||
return data;
|
||||
} catch (err) {
|
||||
|
||||
@ -18,7 +18,7 @@ const fetchHandler: RequestHandler = async ({
|
||||
|
||||
const res = await request(reqOptions as RequestOptions);
|
||||
|
||||
return res.data;
|
||||
return res;
|
||||
};
|
||||
|
||||
export default fetchHandler;
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
import mtop from '@ali/universal-mtop';
|
||||
import { RequestHandler } from '../types';
|
||||
|
||||
const mtopHandler: RequestHandler = async ({ data, params, ...options }) => {
|
||||
const mtopHandler: RequestHandler = async (options) => {
|
||||
const { api, uri, data, params, type, method, ...otherOptions } = options;
|
||||
const reqOptions = {
|
||||
...options,
|
||||
...otherOptions,
|
||||
api: api || uri,
|
||||
data: data || params,
|
||||
type: type || method,
|
||||
};
|
||||
|
||||
const res = await mtop(reqOptions);
|
||||
|
||||
return res.data;
|
||||
return res;
|
||||
};
|
||||
|
||||
export default mtopHandler;
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
import qs from 'query-string';
|
||||
import { RequestHandler } from '../types';
|
||||
|
||||
export default function urlParamsHandler({
|
||||
search,
|
||||
}: {
|
||||
search: string | Record<string, unknown>;
|
||||
}): RequestHandler {
|
||||
export default function urlParamsHandler({ search }: { search: string | Record<string, unknown> }): RequestHandler {
|
||||
const urlParams = typeof search === 'string' ? qs.parse(search) : search;
|
||||
|
||||
return async () => {
|
||||
return urlParams;
|
||||
return {
|
||||
data: urlParams,
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export type DataSourceResponse<TData = unknown> = {
|
||||
data: TData;
|
||||
};
|
||||
@ -1,6 +1,7 @@
|
||||
import { DataSourceOptions } from './DataSourceOptions';
|
||||
import { DataSourceResponse } from './DataSourceResponse';
|
||||
|
||||
export type RequestHandler<
|
||||
TOptions extends DataSourceOptions = DataSourceOptions,
|
||||
TResult = unknown
|
||||
TResult extends DataSourceResponse = DataSourceResponse
|
||||
> = (options: TOptions) => Promise<TResult>;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user