mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-06 18:37:07 +00:00
Merge branch 'feat/rax-simulator-renderer' into release/0.9.0
This commit is contained in:
荣彬
commit
201ff9925b
@ -16,7 +16,7 @@
|
|||||||
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
|
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
|
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
|
||||||
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
|
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/rax@1.1.3/dist/rax.js"></script>
|
||||||
<link rel="stylesheet" href="/css/editor-preset-vision.css" />
|
<link rel="stylesheet" href="/css/editor-preset-vision.css" />
|
||||||
<script>
|
<script>
|
||||||
window.pageConfig = {
|
window.pageConfig = {
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
"props": {},
|
"props": {},
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
"componentName": "View",
|
"componentName": "Container",
|
||||||
"props": {},
|
"props": {},
|
||||||
"children": [
|
"children": [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,83 +1,367 @@
|
|||||||
{
|
{
|
||||||
"version": "1.0.0",
|
"externals": [
|
||||||
"externals": [],
|
|
||||||
"componentDependencies": [{
|
|
||||||
"prototypeConfigsUrl": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/proto.c0b2ef2.js"],
|
|
||||||
"prototypeViewsUrl": null,
|
|
||||||
"alias": "",
|
|
||||||
"library": "AliVcDiv",
|
|
||||||
"urls": [
|
|
||||||
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.css",
|
|
||||||
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.4/view.c0b2ef2.js"
|
|
||||||
],
|
|
||||||
"components": null,
|
|
||||||
"packageName": "@ali/vc-deep-mobile",
|
|
||||||
"version": "1.0.1"
|
|
||||||
}],
|
|
||||||
"packages": [
|
|
||||||
{
|
{
|
||||||
"title": "view",
|
"urls": ["//g.alicdn.com/platform/c/react/16.5.2/react.min.js"],
|
||||||
"package": "rax-view",
|
"library": "React",
|
||||||
"version": "1.19.18",
|
"name": "react",
|
||||||
"urls": ["https://cdn.jsdelivr.net/npm/rax-view@1.1.2/build/index.js"],
|
"version": "16.5.2"
|
||||||
"library": "View"
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "view",
|
"urls": ["//g.alicdn.com/platform/c/react-dom/16.5.2/react-dom.min.js"],
|
||||||
"package": "rax-text",
|
"library": "ReactDOM",
|
||||||
"version": "1.19.18",
|
"name": "react-dom",
|
||||||
"urls": ["https://cdn.jsdelivr.net/npm/rax-text@1.3.1/build/index.js"],
|
"version": "16.12.0"
|
||||||
"library": "Text"
|
},
|
||||||
|
{
|
||||||
|
"urls": ["//g.alicdn.com/platform/c/prop-types/15.6.2/prop-types.js"],
|
||||||
|
"library": "PropTypes",
|
||||||
|
"name": "prop-types",
|
||||||
|
"version": "15.6.2"
|
||||||
|
},
|
||||||
|
{ "library": "ReactRouter", "name": "react-router" },
|
||||||
|
{ "library": "ReactRouterDOM", "name": "react-router-dom" },
|
||||||
|
{ "library": "Babel", "name": "babel-standalone" },
|
||||||
|
{ "library": "Recore", "name": "@ali/recore" },
|
||||||
|
{
|
||||||
|
"urls": ["https://g.alicdn.com/code/lib/moment.js/2.24.0/moment-with-locales.min.js"],
|
||||||
|
"library": "moment",
|
||||||
|
"name": "moment",
|
||||||
|
"version": "2.24.0"
|
||||||
|
},
|
||||||
|
{ "library": "VisualEngine", "name": "engine" },
|
||||||
|
{ "library": "VisualEngine", "name": "visualengine" },
|
||||||
|
{ "library": "VisualEngine", "name": "@ali/visualengine" },
|
||||||
|
{ "library": "VisualEngineUtils", "name": "engine-utils" },
|
||||||
|
{ "library": "VisualEngineUtils", "name": "@ali/visualengine-utils" },
|
||||||
|
{ "library": "VisualEngine.ui.Popup", "name": "@ali/ve-popups" },
|
||||||
|
{ "library": "VisualEngineUtils.FieldControl", "name": "@ali/ve-field" },
|
||||||
|
{ "library": "VisualEngineUtils.BoolControl", "name": "@ali/ve-bool-control" },
|
||||||
|
{ "library": "VisualEngineUtils.ChoiceControl", "name": "@ali/ve-choice-control" },
|
||||||
|
{ "library": "VisualEngineUtils.ColorControl", "name": "@ali/ve-color-control" },
|
||||||
|
{ "library": "VisualEngineUtils.DateControl", "name": "@ali/ve-date-control" },
|
||||||
|
{ "library": "VisualEngineUtils.I18nControl", "name": "@ali/ve-i18n-control" },
|
||||||
|
{ "library": "VisualEngineUtils.NumberControl", "name": "@ali/ve-number-control" },
|
||||||
|
{ "library": "VisualEngineUtils.SelectControl", "name": "@ali/ve-select-control" },
|
||||||
|
{ "library": "VisualEngineUtils.SortableControl", "name": "@ali/ve-sortable" },
|
||||||
|
{ "library": "VisualEngineUtils.TextControl", "name": "@ali/ve-text-control" },
|
||||||
|
{ "library": "VisualEngineUtils.ImageControl", "name": "@ali/ve-image-control" },
|
||||||
|
{ "library": "VisualEngineUtils.SearchControl", "name": "@ali/ve-search-control" },
|
||||||
|
{ "library": "VisualEngineUtils.BoolSetter", "name": "@ali/vs-bool" },
|
||||||
|
{ "library": "VisualEngineUtils.ChoiceSetter", "name": "@ali/vs-choice" },
|
||||||
|
{ "library": "VisualEngineUtils.CodeSetter", "name": "@ali/vs-code" },
|
||||||
|
{ "library": "VisualEngineUtils.ColorSetter", "name": "@ali/vs-color" },
|
||||||
|
{ "library": "VisualEngineUtils.DateSetter", "name": "@ali/vs-date" },
|
||||||
|
{ "library": "VisualEngineUtils.I18nSetter", "name": "@ali/vs-i18n" },
|
||||||
|
{ "library": "VisualEngineUtils.JsonSetter", "name": "@ali/vs-json" },
|
||||||
|
{ "library": "VisualEngineUtils.ListSetter", "name": "@ali/vs-list" },
|
||||||
|
{ "library": "VisualEngineUtils.NumberSetter", "name": "@ali/vs-number" },
|
||||||
|
{ "library": "VisualEngineUtils.OptionsSetter", "name": "@ali/vs-options" },
|
||||||
|
{ "library": "VisualEngineUtils.SelectSetter", "name": "@ali/vs-select" },
|
||||||
|
{ "library": "VisualEngineUtils.TextSetter", "name": "@ali/vs-text" },
|
||||||
|
{ "library": "VisualEngineUtils.ValidationSetter", "name": "@ali/vs-validation" },
|
||||||
|
{ "library": "VisualEngineUtils.ImageSetter", "name": "@ali/vs-image" },
|
||||||
|
{ "library": "VisualEngineUtils.StyleSetter", "name": "@ali/vs-style" },
|
||||||
|
{ "library": "VisualEngineUtils.EventSetter", "name": "@ali/vs-event" },
|
||||||
|
{ "library": "RenderEngine", "name": "@ali/render-engine" },
|
||||||
|
{ "library": "Highcharts", "name": "highcharts" },
|
||||||
|
{ "library": "Object", "name": "highcharts-more" },
|
||||||
|
{ "library": "Highcharts && window.Highcharts.map", "name": "highcharts/highmaps" },
|
||||||
|
{ "library": "jQuery", "name": "$" },
|
||||||
|
{ "library": "jQuery", "name": "jquery" },
|
||||||
|
{ "library": "_", "name": "lodash" },
|
||||||
|
{ "library": "nattyFetch", "name": "natty-fetch" },
|
||||||
|
{ "library": "nattyFetch", "name": "natty-fetch/dist/natty-fetch.pc" },
|
||||||
|
{ "library": "nattyFetch", "name": "natty-fetch/dist/natty-fetch" },
|
||||||
|
{ "library": "nattyStorage", "name": "natty-storage" },
|
||||||
|
{ "library": "Rax", "name": "rax" },
|
||||||
|
{
|
||||||
|
"urls": ["https://g.alicdn.com/ib-fe/ib-vendor/mx/gl.js"],
|
||||||
|
"library": "mapboxgl",
|
||||||
|
"name": "@ali/ib-mapbox",
|
||||||
|
"version": "1.0.0"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"components": [{
|
"appKey": "template_deep_mobile",
|
||||||
"componentName": "Page",
|
"systemType": "",
|
||||||
"title": "页面",
|
"componentDependencies": [
|
||||||
"configure": {
|
{
|
||||||
"events": {
|
"prototypeViewsUrl": null,
|
||||||
"supportedLifecycles": [{
|
"prototypeUrls": {
|
||||||
"description": "初始化时",
|
"default": [
|
||||||
"name": "constructor"
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.c94ee38.css",
|
||||||
}, {
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.bf61331.js"
|
||||||
"description": "装载后",
|
]
|
||||||
"name": "componentDidMount"
|
|
||||||
}, {
|
|
||||||
"description": "更新时",
|
|
||||||
"name": "componentDidMount"
|
|
||||||
}, {
|
|
||||||
"description": "卸载时",
|
|
||||||
"name": "componentWillUnmount"
|
|
||||||
}]
|
|
||||||
},
|
},
|
||||||
"component": {
|
"prototypeConfigsUrl": [
|
||||||
"isContainer": true
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.c94ee38.css",
|
||||||
}
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/proto.bf61331.js"
|
||||||
}
|
],
|
||||||
},{
|
"alias": "",
|
||||||
"componentName": "View",
|
"urls": [
|
||||||
"npm": {
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/view.5030228.css",
|
||||||
"package": "rax-view",
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-rax-page/4.0.4/view.6186d2f.js"
|
||||||
"destructuring": true,
|
],
|
||||||
"exportName": "View"
|
"library": "AliVcRaxPage",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vc-rax-page",
|
||||||
|
"version": "4.0.4"
|
||||||
},
|
},
|
||||||
"title": "视图",
|
{
|
||||||
"configure": {
|
"prototypeViewsUrl": null,
|
||||||
"component": {
|
"prototypeUrls": {
|
||||||
"isContainer": true
|
"default": [
|
||||||
}
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.798dd4e.css",
|
||||||
}
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.78c100c.js"
|
||||||
},{
|
]
|
||||||
"componentName": "Text",
|
},
|
||||||
"npm": {
|
"prototypeConfigsUrl": [
|
||||||
"package": "rax-text",
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.798dd4e.css",
|
||||||
"destructuring": true,
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/proto.78c100c.js"
|
||||||
"exportName": "Text"
|
],
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/view.23d106a.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile-open-button/1.0.5/view.314cec4.js"
|
||||||
|
],
|
||||||
|
"library": "AliVcDeepMobileOpenButton",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vc-deep-mobile-open-button",
|
||||||
|
"version": "1.0.5"
|
||||||
},
|
},
|
||||||
"title": "文本",
|
{
|
||||||
"configure": {
|
"prototypeViewsUrl": null,
|
||||||
"component": {
|
"prototypeUrls": {
|
||||||
"isContainer": true
|
"default": [
|
||||||
}
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.bb4ec38.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.ed31eab.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"prototypeConfigsUrl": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.bb4ec38.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/proto.ed31eab.js"
|
||||||
|
],
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.f2b6dde.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.46f546f.js",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.mobile.f2b6dde.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep-mobile/2.0.1-beta.5/view.mobile.6b901e9.js"
|
||||||
|
],
|
||||||
|
"library": "AliVcDeepMobile",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vc-deep-mobile",
|
||||||
|
"version": "2.0.1-beta.5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": {
|
||||||
|
"default": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/proto.55a6360.js"]
|
||||||
|
},
|
||||||
|
"prototypeConfigsUrl": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/proto.55a6360.js"
|
||||||
|
],
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/view.0e43387.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-component/1.1.1/view.4ea485d.js"
|
||||||
|
],
|
||||||
|
"library": "AliVcComponent",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vc-component",
|
||||||
|
"version": "1.1.1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": {
|
||||||
|
"default": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.1cca36a.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.a3ca779.js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"prototypeConfigsUrl": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.1cca36a.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/proto.a3ca779.js"
|
||||||
|
],
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-block-wrapper/1.0.6/view.54ba1c5.js"],
|
||||||
|
"library": "AliVcBlockWrapper",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vc-block-wrapper",
|
||||||
|
"version": "1.0.6"
|
||||||
}
|
}
|
||||||
}]
|
],
|
||||||
|
"utilsDependencies": [
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-toolkit/1.0.8/main.e3b517b.js"],
|
||||||
|
"library": "AliVuToolkit",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-toolkit",
|
||||||
|
"version": "1.0.8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-fusion-miniapp/2.0.0/main.a9303b0.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-fusion-miniapp/2.0.0/main.0a9dcbf.js"
|
||||||
|
],
|
||||||
|
"library": "AliVuFusionMiniapp",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-fusion-miniapp",
|
||||||
|
"version": "2.0.0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-legao-builtin/1.4.0-beta.5/main.ce04344.js"],
|
||||||
|
"library": "AliVuLegaoBuiltin",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-legao-builtin",
|
||||||
|
"version": "1.4.0-beta.5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-dataSource/1.0.4/main.f11b596.js"],
|
||||||
|
"library": "AliVuDataSource",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-dataSource",
|
||||||
|
"version": "1.0.4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-formatter/2.0.0/main.60e759a.js"],
|
||||||
|
"library": "AliVuFormatter",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-formatter",
|
||||||
|
"version": "2.0.0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router-miniapp/0.1.1/main.3d126aa.js"],
|
||||||
|
"library": "AliVuRouterMiniapp",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-router-miniapp",
|
||||||
|
"version": "0.1.1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "universal",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/deep-mobile-universal-api/1.1.2/main.0cfe8ef.js"],
|
||||||
|
"library": "AliDeepMobileUniversalApi",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/deep-mobile-universal-api",
|
||||||
|
"version": "1.1.2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router/1.2.1/main.5a856a4.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router/1.2.1/main.e896278.js"
|
||||||
|
],
|
||||||
|
"library": "AliVuRouter",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-router",
|
||||||
|
"version": "1.2.1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router-spa/1.3.13/main.bc8c738.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-router-spa/1.3.13/main.1cff595.js"
|
||||||
|
],
|
||||||
|
"library": "AliVuRouterSpa",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-router-spa",
|
||||||
|
"version": "1.3.13"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-spm/1.1.11/main.2f6a6e1.js"],
|
||||||
|
"library": "AliVuSpm",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-spm",
|
||||||
|
"version": "1.1.11"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-switch-schema/1.0.7/main.1d9ec8c.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vu-switch-schema/1.0.7/main.0e44788.js"
|
||||||
|
],
|
||||||
|
"library": "AliVuSwitchSchema",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vu-switch-schema",
|
||||||
|
"version": "1.0.7"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"otherDependencies": [
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": [
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vp-rax-vision-page/2.0.3/main.a344c97.css",
|
||||||
|
"https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vp-rax-vision-page/2.0.3/main.1b46312.js"
|
||||||
|
],
|
||||||
|
"library": "AliVpRaxVisionPage",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vp-rax-vision-page",
|
||||||
|
"version": "2.0.3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vm-router/1.0.8/main.fd43d18.js"],
|
||||||
|
"library": "AliVmRouter",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vm-router",
|
||||||
|
"version": "1.0.8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"prototypeViewsUrl": null,
|
||||||
|
"prototypeUrls": null,
|
||||||
|
"prototypeConfigsUrl": null,
|
||||||
|
"alias": "",
|
||||||
|
"urls": ["https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vm-schema-nav/1.0.0/main.427ff0d.js"],
|
||||||
|
"library": "AliVmSchemaNav",
|
||||||
|
"components": null,
|
||||||
|
"packageName": "@ali/vm-schema-nav",
|
||||||
|
"version": "1.0.0"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"lowCodeDependencies": []
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import { createElement } from 'react';
|
import { createElement } from 'react';
|
||||||
import { Button } from '@alifd/next';
|
import { Button } from '@alifd/next';
|
||||||
import Engine, { Panes, Prototype } from '@ali/visualengine';
|
import Engine, { Panes, Prototype, Editor } from '@ali/visualengine';
|
||||||
import { ActionUtil as actionUtil } from '@ali/visualengine-utils';
|
import { ActionUtil as actionUtil } from '@ali/visualengine-utils';
|
||||||
import getTrunkPane from '@ali/ve-trunk-pane';
|
import getTrunkPane from '@ali/ve-trunk-pane';
|
||||||
import DatapoolPane from '@ali/ve-datapool-pane';
|
import DatapoolPane from '@ali/ve-datapool-pane';
|
||||||
@ -102,8 +102,8 @@ context.use(HOOKS.VE_SETTING_FIELD_VARIABLE_SETTER, VariableSetter);
|
|||||||
const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
|
const externals = ['react', 'react-dom', 'prop-types', 'react-router', 'react-router-dom', '@ali/recore'];
|
||||||
|
|
||||||
async function loadAssets() {
|
async function loadAssets() {
|
||||||
// const legaoAssets = await editor.utils.get('./raxAssets.json');
|
const legaoAssets = await editor.utils.get('./raxAssets.json');
|
||||||
const legaoAssets = await editor.utils.get('./legao-assets.json');
|
// const legaoAssets = await editor.utils.get('./legao-assets.json');
|
||||||
|
|
||||||
const assets = upgradeAssetsBundle(legaoAssets);
|
const assets = upgradeAssetsBundle(legaoAssets);
|
||||||
|
|
||||||
@ -145,9 +145,12 @@ async function loadAssets() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function loadSchema() {
|
async function loadSchema() {
|
||||||
// const schema = await editor.utils.get('./rax.json');
|
const schema = await editor.utils.get('./rax.json');
|
||||||
const schema = await editor.utils.get('./schema.json');
|
// const schema = await editor.utils.get('./schema.json');
|
||||||
editor.set('schema', schema);
|
editor.set('schema', schema);
|
||||||
|
editor.set('renderEnv', 'rax');
|
||||||
|
editor.set('clientTypes', ['mobile']);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// demo
|
// demo
|
||||||
@ -515,5 +518,7 @@ async function init() {
|
|||||||
initDemoPanes();
|
initDemoPanes();
|
||||||
// initHistoryPane();
|
// initHistoryPane();
|
||||||
Engine.init();
|
Engine.init();
|
||||||
|
// Engine.Env.set('renderEnv', 'rax');
|
||||||
|
|
||||||
}
|
}
|
||||||
init();
|
init();
|
||||||
|
|||||||
@ -442,7 +442,8 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
|
|||||||
const node = nodeInst.node || this.document.rootNode;
|
const node = nodeInst.node || this.document.rootNode;
|
||||||
|
|
||||||
const rootElement = this.findDOMNodes(nodeInst.instance, node.componentMeta.rootSelector)?.find((item) =>
|
const rootElement = this.findDOMNodes(nodeInst.instance, node.componentMeta.rootSelector)?.find((item) =>
|
||||||
item.contains(targetElement),
|
// 可能是 [null];
|
||||||
|
item && item.contains(targetElement),
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
if (!rootElement) {
|
if (!rootElement) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
@ -12,12 +12,15 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "build-scripts start"
|
"start": "build-scripts start"
|
||||||
},
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"rax": "^1.1.0"
|
||||||
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ali/lowcode-runtime": "^0.8.16",
|
"@ali/lowcode-runtime": "^0.8.16",
|
||||||
"driver-universal": "^3.1.3",
|
"driver-universal": "^3.1.3",
|
||||||
"history": "^4.10.1",
|
"history": "^4.10.1",
|
||||||
"rax": "1.1.2",
|
|
||||||
"rax-use-router": "^3.0.0"
|
"rax-use-router": "^3.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@ -60,5 +60,6 @@
|
|||||||
"publishConfig": {
|
"publishConfig": {
|
||||||
"registry": "https://registry.npm.alibaba-inc.com"
|
"registry": "https://registry.npm.alibaba-inc.com"
|
||||||
},
|
},
|
||||||
"license": "MIT"
|
"license": "MIT",
|
||||||
|
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-renderer@0.1.2/build/index.html"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,4 @@
|
|||||||
import { Component } from 'rax';
|
import { Component } from 'rax';
|
||||||
import View from 'rax-view';
|
|
||||||
import Text from 'rax-text';
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
export default class VisualDom extends Component {
|
export default class VisualDom extends Component {
|
||||||
@ -12,12 +10,12 @@ export default class VisualDom extends Component {
|
|||||||
const { children, title, label, text, __componentName } = this.props;
|
const { children, title, label, text, __componentName } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="visual-dom">
|
<div className="visual-dom">
|
||||||
<View className="panel-container">
|
<div className="panel-container">
|
||||||
<Text className="title">{title || label || text || __componentName}</Text>
|
<span className="title">{title || label || text || __componentName}</span>
|
||||||
<View className="content">{children}</View>
|
<div className="content">{children}</div>
|
||||||
</View>
|
</div>
|
||||||
</View>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import { Component, createElement } from 'rax';
|
import { Component, createElement } from 'rax';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Debug from 'debug';
|
import Debug from 'debug';
|
||||||
import View from 'rax-view';
|
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import DataHelper from '../utils/dataHelper';
|
import DataHelper from '../utils/dataHelper';
|
||||||
import {
|
import {
|
||||||
@ -24,7 +23,7 @@ import {
|
|||||||
import VisualDom from '../comp/visualDom';
|
import VisualDom from '../comp/visualDom';
|
||||||
import AppContext from '../context/appContext';
|
import AppContext from '../context/appContext';
|
||||||
|
|
||||||
import CompWrapper from '../hoc/compWrapper';
|
import compWrapper from '../hoc/compWrapper';
|
||||||
|
|
||||||
const debug = Debug('engine:base');
|
const debug = Debug('engine:base');
|
||||||
const DESIGN_MODE = {
|
const DESIGN_MODE = {
|
||||||
@ -206,6 +205,7 @@ export default class BaseEngine extends Component {
|
|||||||
// parentInfo 父组件的信息，包含schema和Comp
|
// parentInfo 父组件的信息，包含schema和Comp
|
||||||
// idx 若为循环渲染的循环Index
|
// idx 若为循环渲染的循环Index
|
||||||
__createVirtualDom = (schema, self, parentInfo, idx) => {
|
__createVirtualDom = (schema, self, parentInfo, idx) => {
|
||||||
|
|
||||||
if (!schema) return null;
|
if (!schema) return null;
|
||||||
// rax text prop 兼容处理
|
// rax text prop 兼容处理
|
||||||
if (schema.componentName === 'Text') {
|
if (schema.componentName === 'Text') {
|
||||||
@ -239,7 +239,7 @@ export default class BaseEngine extends Component {
|
|||||||
return schema;
|
return schema;
|
||||||
}
|
}
|
||||||
if (!isSchema(schema)) return null;
|
if (!isSchema(schema)) return null;
|
||||||
let Comp = components[schema.componentName] || View;
|
let Comp = components[schema.componentName] || engine.getNotFoundComponent();
|
||||||
|
|
||||||
if (schema.loop !== undefined) {
|
if (schema.loop !== undefined) {
|
||||||
return this.__createLoopVirtualDom(
|
return this.__createLoopVirtualDom(
|
||||||
@ -306,7 +306,7 @@ export default class BaseEngine extends Component {
|
|||||||
});
|
});
|
||||||
// 对于可以获取到ref的组件做特殊处理
|
// 对于可以获取到ref的组件做特殊处理
|
||||||
if (!acceptsRef(Comp)) {
|
if (!acceptsRef(Comp)) {
|
||||||
Comp = CompWrapper(Comp);
|
Comp = compWrapper(Comp);
|
||||||
}
|
}
|
||||||
otherProps.ref = (ref) => {
|
otherProps.ref = (ref) => {
|
||||||
const refProps = props.ref;
|
const refProps = props.ref;
|
||||||
@ -364,9 +364,9 @@ export default class BaseEngine extends Component {
|
|||||||
if (OVERLAY_LIST.includes(schema.componentName)) {
|
if (OVERLAY_LIST.includes(schema.componentName)) {
|
||||||
const { ref, ...overlayProps } = otherProps;
|
const { ref, ...overlayProps } = otherProps;
|
||||||
return (
|
return (
|
||||||
<Div ref={ref} __designMode={engine.props.designMode}>
|
<div ref={ref} __designMode={engine.props.designMode}>
|
||||||
{renderComp({ ...props, ...overlayProps })}
|
{renderComp({ ...props, ...overlayProps })}
|
||||||
</Div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// 虚拟dom显示
|
// 虚拟dom显示
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import { Component, createElement as raxCreateElement } from 'rax';
|
import { Component, createElement } from 'rax';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Debug from 'debug';
|
import Debug from 'debug';
|
||||||
import * as isEmpty from 'lodash/isEmpty';
|
import isEmpty from 'lodash/isEmpty';
|
||||||
import findDOMNode from 'rax-find-dom-node';
|
import findDOMNode from 'rax-find-dom-node';
|
||||||
import { isFileSchema, goldlog } from '../utils';
|
import { isFileSchema, goldlog } from '../utils';
|
||||||
import AppContext from '../context/appContext';
|
import AppContext from '../context/appContext';
|
||||||
@ -11,6 +11,7 @@ import ComponentEngine from './compEngine';
|
|||||||
import BlockEngine from './blockEngine';
|
import BlockEngine from './blockEngine';
|
||||||
import TempEngine from './tempEngine';
|
import TempEngine from './tempEngine';
|
||||||
import BaseEngine from './base';
|
import BaseEngine from './base';
|
||||||
|
import compWrapper from '../hoc/compWrapper';
|
||||||
|
|
||||||
const debug = Debug('engine:entry');
|
const debug = Debug('engine:entry');
|
||||||
const ENGINE_COMPS = {
|
const ENGINE_COMPS = {
|
||||||
@ -20,18 +21,20 @@ const ENGINE_COMPS = {
|
|||||||
TempEngine,
|
TempEngine,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const raxCreateElement = createElement;
|
||||||
|
|
||||||
class FaultComponent extends Component {
|
class FaultComponent extends Component {
|
||||||
render() {
|
render() {
|
||||||
// FIXME: errorlog
|
// FIXME: errorlog
|
||||||
console.error('render error', this.props);
|
console.error('render error', this.props);
|
||||||
return <Div>RenderError</Div>;
|
return <div>RenderError</div>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class NotFoundComponent extends Component {
|
class NotFoundComponent extends Component {
|
||||||
render() {
|
render() {
|
||||||
console.error('component not found', this.props);
|
console.error('component not found', this.props);
|
||||||
return <Div {...this.props} />;
|
return <div {...this.props} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -168,9 +171,10 @@ export default class Engine extends Component {
|
|||||||
Comp = ENGINE_COMPS[`${componentName}Engine`];
|
Comp = ENGINE_COMPS[`${componentName}Engine`];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (Comp) {
|
|
||||||
return (
|
return (
|
||||||
<AppContext.Provider
|
Comp
|
||||||
|
? <AppContext.Provider
|
||||||
value={{
|
value={{
|
||||||
appHelper,
|
appHelper,
|
||||||
components: allComponents,
|
components: allComponents,
|
||||||
@ -188,9 +192,8 @@ export default class Engine extends Component {
|
|||||||
{...this.props}
|
{...this.props}
|
||||||
/>
|
/>
|
||||||
</AppContext.Provider>
|
</AppContext.Provider>
|
||||||
);
|
: null
|
||||||
}
|
);
|
||||||
return null;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { Component, createElement } from 'rax';
|
import { Component, createElement, forwardRef } from 'rax';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import AppHelper from '../utils/appHelper';
|
import AppHelper from '../utils/appHelper';
|
||||||
import { forEach, isFileSchema } from '../utils';
|
import { forEach, isFileSchema } from '../utils';
|
||||||
@ -62,7 +62,7 @@ export default function compFactory(schema, components = {}, componentsMap = {},
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const ResComp = React.forwardRef((props, ref) => <LNCompView {...props} forwardedRef={ref} />);
|
const ResComp = forwardRef((props, ref) => <LNCompView {...props} forwardedRef={ref} />);
|
||||||
forEach(schema.static, (val, key) => {
|
forEach(schema.static, (val, key) => {
|
||||||
ResComp[key] = val;
|
ResComp[key] = val;
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { createElement, Component } from 'rax';
|
import { createElement, Component } from 'rax';
|
||||||
|
|
||||||
export default function (Comp) {
|
export default function (Comp) {
|
||||||
class CompWrapper extends Component {
|
class compWrapper extends Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
@ -13,5 +13,5 @@ export default function (Comp) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return CompWrapper;
|
return compWrapper;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,12 +1,5 @@
|
|||||||
{
|
{
|
||||||
"plugins": [
|
"plugins": [
|
||||||
[
|
|
||||||
"build-plugin-rax-component",
|
|
||||||
{
|
|
||||||
"type": "rax",
|
|
||||||
"targets": ["web"]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
[
|
||||||
"build-plugin-component",
|
"build-plugin-component",
|
||||||
{
|
{
|
||||||
|
|||||||
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = ({ onGetWebpackConfig }) => {
|
||||||
|
onGetWebpackConfig((config) => {
|
||||||
|
config.performance.hints(false);
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -8,6 +8,7 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"files": [],
|
"files": [],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"build": "build-scripts build",
|
||||||
"cloud-build": "build-scripts build --skip-demo",
|
"cloud-build": "build-scripts build --skip-demo",
|
||||||
"test": "ava",
|
"test": "ava",
|
||||||
"test:snapshot": "ava --update-snapshots"
|
"test:snapshot": "ava --update-snapshots"
|
||||||
@ -22,6 +23,7 @@
|
|||||||
"@recore/obx": "^1.0.8",
|
"@recore/obx": "^1.0.8",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"driver-universal": "^3.1.3",
|
"driver-universal": "^3.1.3",
|
||||||
|
"rax-find-dom-node": "^1.0.0",
|
||||||
"lodash": "^4.17.19",
|
"lodash": "^4.17.19",
|
||||||
"react": "^16",
|
"react": "^16",
|
||||||
"react-dom": "^16.7.0"
|
"react-dom": "^16.7.0"
|
||||||
|
|||||||
@ -1,226 +0,0 @@
|
|||||||
import { Component, createElement } from 'rax';
|
|
||||||
import findDOMNode from 'rax-find-dom-node';
|
|
||||||
import { each, get, omit } from 'lodash';
|
|
||||||
import { getView, setNativeNode, createNodeStyleSheet } from '../renderUtils';
|
|
||||||
|
|
||||||
import { FaultComponent, HiddenComponent, UnknownComponent } from '../UnusualComponent';
|
|
||||||
|
|
||||||
export interface ILeaf {
|
|
||||||
leaf: any;
|
|
||||||
}
|
|
||||||
export default class Leaf extends Component<ILeaf, {}> {
|
|
||||||
static displayName = 'Leaf';
|
|
||||||
|
|
||||||
state = {
|
|
||||||
hasError: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
willDetach: any[];
|
|
||||||
|
|
||||||
styleSheet: any;
|
|
||||||
|
|
||||||
context: any;
|
|
||||||
refs: any;
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
const { leaf } = this.props;
|
|
||||||
this.willDetach = [
|
|
||||||
leaf.onPropsChange(() => {
|
|
||||||
// 强制刷新
|
|
||||||
this.setState(this.state);
|
|
||||||
}),
|
|
||||||
leaf.onChildrenChange(() => {
|
|
||||||
// 强制刷新
|
|
||||||
this.setState(this.state);
|
|
||||||
}),
|
|
||||||
leaf.onStatusChange((status: { dropping: boolean }, field: string) => {
|
|
||||||
// console.log({...status}, field)
|
|
||||||
if (status.dropping !== false) {
|
|
||||||
// 当 dropping 为 Insertion 对象时，强制渲染会出错，原因待查
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (field === 'dragging' || field === 'dropping' || field === 'pseudo' || field === 'visibility') {
|
|
||||||
// 强制刷新
|
|
||||||
this.setState(this.state);
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* while props replaced
|
|
||||||
* bind the new event on it
|
|
||||||
*/
|
|
||||||
leaf.onPropsReplace(() => {
|
|
||||||
this.willDetach[0]();
|
|
||||||
this.willDetach[0] = leaf.onPropsChange(() => {
|
|
||||||
// 强制刷新
|
|
||||||
this.setState(this.state);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.modifyDOM();
|
|
||||||
}
|
|
||||||
|
|
||||||
shouldComponentUpdate() {
|
|
||||||
// forceUpdate 的替代方案
|
|
||||||
return true;
|
|
||||||
// const pageCanRefresh = this.leaf.getPage().canRefresh();
|
|
||||||
// if (pageCanRefresh) {
|
|
||||||
// return pageCanRefresh;
|
|
||||||
// }
|
|
||||||
// const getExtProps = obj => {
|
|
||||||
// const { leaf, ...props } = obj;
|
|
||||||
// return props;
|
|
||||||
// };
|
|
||||||
// return !shallowEqual(getExtProps(this.props), getExtProps(nextProps));
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate() {
|
|
||||||
this.modifyDOM();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.willDetach) {
|
|
||||||
this.willDetach.forEach((off) => off());
|
|
||||||
}
|
|
||||||
setNativeNode(this.props.leaf, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidCatch() {
|
|
||||||
this.setState({ hasError: true }, () => {
|
|
||||||
console.log('error');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
modifyDOM() {
|
|
||||||
const shell = findDOMNode(this);
|
|
||||||
const { leaf } = this.props;
|
|
||||||
// 与 React 不同，rax 的 findDOMNode 找不到节点时，
|
|
||||||
// shell 会是 <!-- empty -->，而不是 null，
|
|
||||||
// 所以这里进行是否为注释的判断
|
|
||||||
if (shell && shell.nodeType !== window.Node.COMMENT_NODE) {
|
|
||||||
setNativeNode(leaf, shell);
|
|
||||||
if (leaf.getStatus('dragging')) {
|
|
||||||
get(shell, 'classList').add('engine-dragging');
|
|
||||||
} else {
|
|
||||||
get(shell, 'classList').remove('engine-dragging');
|
|
||||||
}
|
|
||||||
each(get(shell, 'classList'), (cls) => {
|
|
||||||
if (cls.substring(0, 8) === '-pseudo-') {
|
|
||||||
get(shell, 'classList').remove(cls);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const pseudo = leaf.getStatus('pseudo');
|
|
||||||
if (pseudo) {
|
|
||||||
get(shell, 'classList').add(`-pseudo-${pseudo}`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
setNativeNode(leaf, null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const props = omit(this.props, ['leaf']);
|
|
||||||
const { leaf } = this.props;
|
|
||||||
const componentName = leaf.getComponentName();
|
|
||||||
|
|
||||||
const View = getView(componentName);
|
|
||||||
|
|
||||||
const newProps = {
|
|
||||||
_componentName: componentName,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!View) {
|
|
||||||
return createElement(UnknownComponent, {
|
|
||||||
// _componentName: componentName,
|
|
||||||
...newProps,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
let staticProps = {
|
|
||||||
...leaf.getStaticProps(false),
|
|
||||||
...props,
|
|
||||||
_componentName: componentName,
|
|
||||||
_leaf: leaf,
|
|
||||||
componentId: leaf.getId(),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!leaf.isVisibleInPane()) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!leaf.isVisible()) {
|
|
||||||
return createElement(HiddenComponent, {
|
|
||||||
...staticProps,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.state.hasError) {
|
|
||||||
return createElement(FaultComponent, {
|
|
||||||
// _componentName: componentName,
|
|
||||||
...newProps,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.styleSheet) {
|
|
||||||
this.styleSheet.parentNode.removeChild(this.styleSheet);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.styleSheet = createNodeStyleSheet(staticProps);
|
|
||||||
|
|
||||||
if (leaf.ableToModifyChildren()) {
|
|
||||||
const children = leaf
|
|
||||||
.getChildren()
|
|
||||||
.filter((child: any) => child.getComponentName() !== 'Slot')
|
|
||||||
.map((child: any) =>
|
|
||||||
createElement(Leaf, {
|
|
||||||
key: child.getId(),
|
|
||||||
leaf: child,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
// const insertion = leaf.getStatus('dropping');
|
|
||||||
// InsertionGhost 都是React节点,用Rax渲染会报错，后面这些节点需要通过Rax组件来实现
|
|
||||||
// if (children.length < 1 && insertion && insertion.getIndex() !== null) {
|
|
||||||
|
|
||||||
// //children = [];
|
|
||||||
// children = [<InsertionGhost key="insertion" />];
|
|
||||||
// } else if (insertion && insertion.isNearEdge()) {
|
|
||||||
// if (insertion.isNearAfter()) {
|
|
||||||
// children.push(<InsertionGhost key="insertion" />);
|
|
||||||
// } else {
|
|
||||||
// children.unshift(<InsertionGhost key="insertion" />);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
staticProps = {
|
|
||||||
...staticProps,
|
|
||||||
...this.processSlots(this.props.leaf.getChildren()),
|
|
||||||
};
|
|
||||||
|
|
||||||
return createElement(
|
|
||||||
View,
|
|
||||||
{
|
|
||||||
...staticProps,
|
|
||||||
},
|
|
||||||
children,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return createElement(View, {
|
|
||||||
...staticProps,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
processSlots(children: Rax.RaxNodeArray) {
|
|
||||||
const slots: any = {};
|
|
||||||
children &&
|
|
||||||
children.length &&
|
|
||||||
children.forEach((child: any) => {
|
|
||||||
if (child.getComponentName() === 'Slot') {
|
|
||||||
slots[child.getPropValue('slotName')] = <Leaf key={child.getId()} leaf={child} />;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return slots;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
250
packages/rax-simulator-renderer/src/builtin-components/leaf.tsx
Normal file
250
packages/rax-simulator-renderer/src/builtin-components/leaf.tsx
Normal file
@ -0,0 +1,250 @@
|
|||||||
|
import { Component } from 'rax';
|
||||||
|
|
||||||
|
class Leaf extends Component {
|
||||||
|
static displayName = 'Leaf';
|
||||||
|
static componentMetadata = {
|
||||||
|
componentName: 'Leaf',
|
||||||
|
configure: {
|
||||||
|
props: [{
|
||||||
|
name: 'children',
|
||||||
|
setter: 'StringSetter',
|
||||||
|
}],
|
||||||
|
// events/className/style/general/directives
|
||||||
|
supports: false,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { children } = this.props;
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Leaf;
|
||||||
|
|
||||||
|
// import { Component, createElement } from 'rax';
|
||||||
|
// import findDOMNode from 'rax-find-dom-node';
|
||||||
|
// import { each, get, omit } from 'lodash';
|
||||||
|
// import { getView, setNativeNode, createNodeStyleSheet } from '../renderUtils';
|
||||||
|
|
||||||
|
// import { FaultComponent, HiddenComponent, UnknownComponent } from '../UnusualComponent';
|
||||||
|
|
||||||
|
// export interface ILeaf {
|
||||||
|
// leaf: any;
|
||||||
|
// }
|
||||||
|
// export default class Leaf extends Component<ILeaf, {}> {
|
||||||
|
// static displayName = 'Leaf';
|
||||||
|
|
||||||
|
// state = {
|
||||||
|
// hasError: false,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// willDetach: any[];
|
||||||
|
|
||||||
|
// styleSheet: any;
|
||||||
|
|
||||||
|
// context: any;
|
||||||
|
// refs: any;
|
||||||
|
|
||||||
|
// componentWillMount() {
|
||||||
|
// const { leaf } = this.props;
|
||||||
|
// this.willDetach = [
|
||||||
|
// leaf.onPropsChange(() => {
|
||||||
|
// // 强制刷新
|
||||||
|
// this.setState(this.state);
|
||||||
|
// }),
|
||||||
|
// leaf.onChildrenChange(() => {
|
||||||
|
// // 强制刷新
|
||||||
|
// this.setState(this.state);
|
||||||
|
// }),
|
||||||
|
// leaf.onStatusChange((status: { dropping: boolean }, field: string) => {
|
||||||
|
// // console.log({...status}, field)
|
||||||
|
// if (status.dropping !== false) {
|
||||||
|
// // 当 dropping 为 Insertion 对象时，强制渲染会出错，原因待查
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (field === 'dragging' || field === 'dropping' || field === 'pseudo' || field === 'visibility') {
|
||||||
|
// // 强制刷新
|
||||||
|
// this.setState(this.state);
|
||||||
|
// }
|
||||||
|
// }),
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * while props replaced
|
||||||
|
// * bind the new event on it
|
||||||
|
// */
|
||||||
|
// leaf.onPropsReplace(() => {
|
||||||
|
// this.willDetach[0]();
|
||||||
|
// this.willDetach[0] = leaf.onPropsChange(() => {
|
||||||
|
// // 强制刷新
|
||||||
|
// this.setState(this.state);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// componentDidMount() {
|
||||||
|
// this.modifyDOM();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// shouldComponentUpdate() {
|
||||||
|
// // forceUpdate 的替代方案
|
||||||
|
// return true;
|
||||||
|
// // const pageCanRefresh = this.leaf.getPage().canRefresh();
|
||||||
|
// // if (pageCanRefresh) {
|
||||||
|
// // return pageCanRefresh;
|
||||||
|
// // }
|
||||||
|
// // const getExtProps = obj => {
|
||||||
|
// // const { leaf, ...props } = obj;
|
||||||
|
// // return props;
|
||||||
|
// // };
|
||||||
|
// // return !shallowEqual(getExtProps(this.props), getExtProps(nextProps));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// componentDidUpdate() {
|
||||||
|
// this.modifyDOM();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// componentWillUnmount() {
|
||||||
|
// if (this.willDetach) {
|
||||||
|
// this.willDetach.forEach((off) => off());
|
||||||
|
// }
|
||||||
|
// setNativeNode(this.props.leaf, null);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// componentDidCatch() {
|
||||||
|
// this.setState({ hasError: true }, () => {
|
||||||
|
// console.log('error');
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// modifyDOM() {
|
||||||
|
// const shell = findDOMNode(this);
|
||||||
|
// const { leaf } = this.props;
|
||||||
|
// // 与 React 不同，rax 的 findDOMNode 找不到节点时，
|
||||||
|
// // shell 会是 <!-- empty -->，而不是 null，
|
||||||
|
// // 所以这里进行是否为注释的判断
|
||||||
|
// if (shell && shell.nodeType !== window.Node.COMMENT_NODE) {
|
||||||
|
// setNativeNode(leaf, shell);
|
||||||
|
// if (leaf.getStatus('dragging')) {
|
||||||
|
// get(shell, 'classList').add('engine-dragging');
|
||||||
|
// } else {
|
||||||
|
// get(shell, 'classList').remove('engine-dragging');
|
||||||
|
// }
|
||||||
|
// each(get(shell, 'classList'), (cls) => {
|
||||||
|
// if (cls.substring(0, 8) === '-pseudo-') {
|
||||||
|
// get(shell, 'classList').remove(cls);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// const pseudo = leaf.getStatus('pseudo');
|
||||||
|
// if (pseudo) {
|
||||||
|
// get(shell, 'classList').add(`-pseudo-${pseudo}`);
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// setNativeNode(leaf, null);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// render() {
|
||||||
|
// const props = omit(this.props, ['leaf']);
|
||||||
|
// const { leaf } = this.props;
|
||||||
|
// const componentName = leaf.getComponentName();
|
||||||
|
|
||||||
|
// const View = getView(componentName);
|
||||||
|
|
||||||
|
// const newProps = {
|
||||||
|
// _componentName: componentName,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// if (!View) {
|
||||||
|
// return createElement(UnknownComponent, {
|
||||||
|
// // _componentName: componentName,
|
||||||
|
// ...newProps,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let staticProps = {
|
||||||
|
// ...leaf.getStaticProps(false),
|
||||||
|
// ...props,
|
||||||
|
// _componentName: componentName,
|
||||||
|
// _leaf: leaf,
|
||||||
|
// componentId: leaf.getId(),
|
||||||
|
// };
|
||||||
|
|
||||||
|
// if (!leaf.isVisibleInPane()) {
|
||||||
|
// return null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (!leaf.isVisible()) {
|
||||||
|
// return createElement(HiddenComponent, {
|
||||||
|
// ...staticProps,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (this.state.hasError) {
|
||||||
|
// return createElement(FaultComponent, {
|
||||||
|
// // _componentName: componentName,
|
||||||
|
// ...newProps,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (this.styleSheet) {
|
||||||
|
// this.styleSheet.parentNode.removeChild(this.styleSheet);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this.styleSheet = createNodeStyleSheet(staticProps);
|
||||||
|
|
||||||
|
// if (leaf.ableToModifyChildren()) {
|
||||||
|
// const children = leaf
|
||||||
|
// .getChildren()
|
||||||
|
// .filter((child: any) => child.getComponentName() !== 'Slot')
|
||||||
|
// .map((child: any) =>
|
||||||
|
// createElement(Leaf, {
|
||||||
|
// key: child.getId(),
|
||||||
|
// leaf: child,
|
||||||
|
// }),
|
||||||
|
// );
|
||||||
|
// // const insertion = leaf.getStatus('dropping');
|
||||||
|
// // InsertionGhost 都是React节点,用Rax渲染会报错，后面这些节点需要通过Rax组件来实现
|
||||||
|
// // if (children.length < 1 && insertion && insertion.getIndex() !== null) {
|
||||||
|
|
||||||
|
// // //children = [];
|
||||||
|
// // children = [<InsertionGhost key="insertion" />];
|
||||||
|
// // } else if (insertion && insertion.isNearEdge()) {
|
||||||
|
// // if (insertion.isNearAfter()) {
|
||||||
|
// // children.push(<InsertionGhost key="insertion" />);
|
||||||
|
// // } else {
|
||||||
|
// // children.unshift(<InsertionGhost key="insertion" />);
|
||||||
|
// // }
|
||||||
|
// // }
|
||||||
|
// staticProps = {
|
||||||
|
// ...staticProps,
|
||||||
|
// ...this.processSlots(this.props.leaf.getChildren()),
|
||||||
|
// };
|
||||||
|
|
||||||
|
// return createElement(
|
||||||
|
// View,
|
||||||
|
// {
|
||||||
|
// ...staticProps,
|
||||||
|
// },
|
||||||
|
// children,
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return createElement(View, {
|
||||||
|
// ...staticProps,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// processSlots(children: Rax.RaxNodeArray) {
|
||||||
|
// const slots: any = {};
|
||||||
|
// children &&
|
||||||
|
// children.length &&
|
||||||
|
// children.forEach((child: any) => {
|
||||||
|
// if (child.getComponentName() === 'Slot') {
|
||||||
|
// slots[child.getPropValue('slotName')] = <Leaf key={child.getId()} leaf={child} />;
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// return slots;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { Component } from 'rax';
|
||||||
|
|
||||||
|
class Slot extends Component {
|
||||||
|
static displayName = 'Slot';
|
||||||
|
static componentMetadata = {
|
||||||
|
componentName: 'Slot',
|
||||||
|
configure: {
|
||||||
|
props: [{
|
||||||
|
name: '___title',
|
||||||
|
title: {
|
||||||
|
type: 'i18n',
|
||||||
|
'en-US': 'Slot Title',
|
||||||
|
'zh-CN': '插槽标题'
|
||||||
|
},
|
||||||
|
setter: 'StringSetter',
|
||||||
|
defaultValue: '插槽容器'
|
||||||
|
}, {
|
||||||
|
name: '___params',
|
||||||
|
title: {
|
||||||
|
type: 'i18n',
|
||||||
|
'en-US': 'Slot Params',
|
||||||
|
'zh-CN': '插槽入参'
|
||||||
|
},
|
||||||
|
setter: {
|
||||||
|
componentName: 'ArraySetter',
|
||||||
|
props: {
|
||||||
|
itemSetter: {
|
||||||
|
componentName: 'StringSetter',
|
||||||
|
props: {
|
||||||
|
placeholder: {
|
||||||
|
type: 'i18n',
|
||||||
|
'zh-CN': '参数名称',
|
||||||
|
'en-US': 'Argument Name'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
// events/className/style/general/directives
|
||||||
|
supports: false,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { children } = this.props;
|
||||||
|
return (
|
||||||
|
<div className="lc-container">{children}</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Slot;
|
||||||
@ -1 +1,2 @@
|
|||||||
declare module 'rax-find-dom-node';
|
declare module 'rax-find-dom-node';
|
||||||
|
declare module '@ali/lowcode-rax-renderer/lib/index';
|
||||||
|
|||||||
@ -1,210 +0,0 @@
|
|||||||
import { IObservable, IDepTreeNode, addObserver, removeObserver } from './observable/observable';
|
|
||||||
import { globalState } from './ global-state';
|
|
||||||
|
|
||||||
export enum DerivationState {
|
|
||||||
// before being run or (outside batch and not being observed)
|
|
||||||
// at this point derivation is not holding any data about dependency tree
|
|
||||||
NOT_TRACKING = -1,
|
|
||||||
// no shallow dependency changed since last computation
|
|
||||||
// won't recalculate derivation
|
|
||||||
UP_TO_DATE = 0,
|
|
||||||
// don't have to recompute on every dependency change, but only when it's needed
|
|
||||||
MYBE_DIRTY = 1,
|
|
||||||
// A shallow dependency has changed since last computation and the derivation
|
|
||||||
// will need to recompute when it's needed next.
|
|
||||||
DIRTY = 2,
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IDerivation extends IDepTreeNode {
|
|
||||||
observing: IObservable[];
|
|
||||||
dependenciesState: DerivationState;
|
|
||||||
newObserving?: null | IObservable[];
|
|
||||||
runId?: number; // Id of the current run of a derivation.
|
|
||||||
unboundDepsCount?: number; // amount of dependencies used by the derivation in this run, which has not been bound yet.
|
|
||||||
onBecomeDirty(): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class CaughtException {
|
|
||||||
constructor(public cause: any) {
|
|
||||||
// Empty
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isCaughtException(e: any): e is CaughtException {
|
|
||||||
return e instanceof CaughtException;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ModifiedValue {
|
|
||||||
ifModified(): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isModifiedValue(v: any): v is ModifiedValue {
|
|
||||||
return v.ifModified ? true : false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function shouldCompute(derivation: IDerivation): boolean {
|
|
||||||
switch (derivation.dependenciesState) {
|
|
||||||
case DerivationState.UP_TO_DATE:
|
|
||||||
return false;
|
|
||||||
case DerivationState.NOT_TRACKING:
|
|
||||||
case DerivationState.DIRTY:
|
|
||||||
return true;
|
|
||||||
case DerivationState.MYBE_DIRTY: {
|
|
||||||
const prevUntracked = untrackedStart();
|
|
||||||
const obs = derivation.observing;
|
|
||||||
const l = obs.length;
|
|
||||||
for (let i = 0; i < l; i++) {
|
|
||||||
const obj = obs[i];
|
|
||||||
if (isModifiedValue(obj)) {
|
|
||||||
obj.ifModified();
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((derivation.dependenciesState as any) === DerivationState.DIRTY) {
|
|
||||||
untrackedEnd(prevUntracked);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
changeDependenciesStateTo0(derivation);
|
|
||||||
untrackedEnd(prevUntracked);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function runDerivedFunction(derivation: IDerivation, f: (...args: any[]) => any, context?: any) {
|
|
||||||
const prevTracking = globalState.trackingDerivation;
|
|
||||||
// pre allocate array allocation + room for variation in deps
|
|
||||||
derivation.newObserving = new Array(derivation.observing.length + 100);
|
|
||||||
derivation.unboundDepsCount = 0;
|
|
||||||
derivation.runId = ++globalState.runId;
|
|
||||||
globalState.trackingDerivation = derivation;
|
|
||||||
let result;
|
|
||||||
try {
|
|
||||||
result = f.call(context);
|
|
||||||
} catch (e) {
|
|
||||||
result = new CaughtException(e);
|
|
||||||
}
|
|
||||||
globalState.trackingDerivation = prevTracking;
|
|
||||||
changeDependenciesStateTo0(derivation);
|
|
||||||
bindDependencies(derivation);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function bindDependencies(derivation: IDerivation) {
|
|
||||||
const prevObserving = derivation.observing;
|
|
||||||
const observing = (derivation.observing = derivation.newObserving!);
|
|
||||||
let lowestNewObservingDerivationState = DerivationState.UP_TO_DATE;
|
|
||||||
|
|
||||||
// Go through all new observables and check diffValue: (this list can contain duplicates):
|
|
||||||
// 0: first occurrence, change to 1 and keep it
|
|
||||||
// 1: extra occurrence, drop it
|
|
||||||
let i0 = 0;
|
|
||||||
let l = derivation.unboundDepsCount!;
|
|
||||||
for (let i = 0; i < l; i++) {
|
|
||||||
const dep = observing[i];
|
|
||||||
if (!dep.diffFlag) {
|
|
||||||
dep.diffFlag = true;
|
|
||||||
if (i0 !== i) {
|
|
||||||
observing[i0] = dep;
|
|
||||||
}
|
|
||||||
i0++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Upcast is 'safe' here, because if dep is IObservable, `dependenciesState` will be undefined,
|
|
||||||
// not hitting the condition
|
|
||||||
if (((dep as any) as IDerivation).dependenciesState > lowestNewObservingDerivationState) {
|
|
||||||
lowestNewObservingDerivationState = ((dep as any) as IDerivation).dependenciesState;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
observing.length = i0;
|
|
||||||
|
|
||||||
derivation.newObserving = null;
|
|
||||||
// Go through all old observables and check diffValue: (it is unique after last bindDependencies)
|
|
||||||
// 0: it's not in new observables, unobserve it
|
|
||||||
// 1: it keeps being observed, don't want to notify it. change to 0
|
|
||||||
l = prevObserving.length;
|
|
||||||
while (l--) {
|
|
||||||
const dep = prevObserving[l];
|
|
||||||
if (!dep.diffFlag) {
|
|
||||||
removeObserver(dep, derivation);
|
|
||||||
}
|
|
||||||
dep.diffFlag = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Go through all new observables and check diffValue: (now it should be unique)
|
|
||||||
// 0: it was set to 0 in last loop. don't need to do anything.
|
|
||||||
// 1: it wasn't observed, let's observe it. set back to 0
|
|
||||||
while (i0--) {
|
|
||||||
const dep = observing[i0];
|
|
||||||
if (dep.diffFlag) {
|
|
||||||
dep.diffFlag = false;
|
|
||||||
addObserver(dep, derivation);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Some new observed derivations may become stale during this derivation computation
|
|
||||||
// so they have had no chance to propagate staleness (#916)
|
|
||||||
if (lowestNewObservingDerivationState !== DerivationState.UP_TO_DATE) {
|
|
||||||
derivation.dependenciesState = lowestNewObservingDerivationState;
|
|
||||||
derivation.onBecomeDirty();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearObserving(derivation: IDerivation) {
|
|
||||||
const obs = derivation.observing;
|
|
||||||
derivation.observing = [];
|
|
||||||
let i = obs.length;
|
|
||||||
while (i--) {
|
|
||||||
removeObserver(obs[i], derivation);
|
|
||||||
}
|
|
||||||
|
|
||||||
derivation.dependenciesState = DerivationState.NOT_TRACKING;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function untracked<T>(action: () => T): T {
|
|
||||||
const prev = untrackedStart();
|
|
||||||
const res = action();
|
|
||||||
untrackedEnd(prev);
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function untrackedStart(): IDerivation | null {
|
|
||||||
const prev = globalState.trackingDerivation;
|
|
||||||
globalState.trackingDerivation = null;
|
|
||||||
return prev;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function untrackedEnd(prev: IDerivation | null) {
|
|
||||||
globalState.trackingDerivation = prev;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function changeDependenciesStateTo0(derivation: IDerivation) {
|
|
||||||
if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
derivation.dependenciesState = DerivationState.UP_TO_DATE;
|
|
||||||
|
|
||||||
const obs = derivation.observing;
|
|
||||||
let i = obs.length;
|
|
||||||
while (i--) {
|
|
||||||
obs[i].lowestObserverState = DerivationState.UP_TO_DATE;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setDerivationDirty(derivation: IDerivation) {
|
|
||||||
if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
|
|
||||||
derivation.onBecomeDirty();
|
|
||||||
}
|
|
||||||
derivation.dependenciesState = DerivationState.DIRTY;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setDerivationMybeDirty(derivation: IDerivation) {
|
|
||||||
if (derivation.dependenciesState === DerivationState.UP_TO_DATE) {
|
|
||||||
derivation.onBecomeDirty();
|
|
||||||
}
|
|
||||||
derivation.dependenciesState = DerivationState.MYBE_DIRTY;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function resetDerivationState(derivation: IDerivation) {
|
|
||||||
derivation.dependenciesState = DerivationState.NOT_TRACKING;
|
|
||||||
}
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
import { IDerivation } from './derivation';
|
|
||||||
import { Reaction } from './reaction';
|
|
||||||
import { IObservable } from './observable/observable';
|
|
||||||
|
|
||||||
export class Globals {
|
|
||||||
/**
|
|
||||||
* Currently running derivation
|
|
||||||
*/
|
|
||||||
trackingDerivation: IDerivation | null = null;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Are we running a computation currently? (not a reaction)
|
|
||||||
*/
|
|
||||||
computationDepth = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Each time a derivation is tracked, it is assigned a unique run-id
|
|
||||||
*/
|
|
||||||
runId = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 'guid' for general purpose. Will be persisted amongst resets.
|
|
||||||
*/
|
|
||||||
guid = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Are we in a batch block? (and how many of them)
|
|
||||||
*/
|
|
||||||
inBatch = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Observables that don't have observers anymore
|
|
||||||
*/
|
|
||||||
pendingUnobservations: IObservable[] = [];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* List of scheduled, not yet executed, reactions.
|
|
||||||
*/
|
|
||||||
pendingReactions: Reaction[] = [];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Are we currently processing reactions?
|
|
||||||
*/
|
|
||||||
isRunningReactions = false;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* disable dynamic observe
|
|
||||||
*/
|
|
||||||
dynamicObserveDisabled = false;
|
|
||||||
|
|
||||||
reset() {
|
|
||||||
this.trackingDerivation = null;
|
|
||||||
this.computationDepth = 0;
|
|
||||||
this.runId = 0;
|
|
||||||
this.guid = 0;
|
|
||||||
this.inBatch = 0;
|
|
||||||
this.pendingUnobservations = [];
|
|
||||||
this.pendingReactions = [];
|
|
||||||
this.isRunningReactions = false;
|
|
||||||
this.dynamicObserveDisabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const globalState: Globals = new Globals();
|
|
||||||
|
|
||||||
export function getGlobalState(): Globals {
|
|
||||||
return globalState;
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
const callbacks: Array<() => void> = [];
|
|
||||||
let pending = false;
|
|
||||||
|
|
||||||
function flush() {
|
|
||||||
pending = false;
|
|
||||||
const copies = callbacks.slice(0);
|
|
||||||
callbacks.length = 0;
|
|
||||||
for (const fn of copies) {
|
|
||||||
fn();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let timerFlush: () => void;
|
|
||||||
if (typeof process === 'object' && process.nextTick) {
|
|
||||||
timerFlush = () => process.nextTick(flush);
|
|
||||||
} else if (typeof Promise === 'function') {
|
|
||||||
// tslint:disable-line
|
|
||||||
const timer = Promise.resolve(); // tslint:disable-line
|
|
||||||
timerFlush = () => {
|
|
||||||
timer.then(flush);
|
|
||||||
// if (isIOS) setTimeout(noop)
|
|
||||||
};
|
|
||||||
} else if (typeof MessageChannel === 'function') {
|
|
||||||
const channel = new MessageChannel();
|
|
||||||
const port = channel.port2;
|
|
||||||
channel.port1.onmessage = flush;
|
|
||||||
timerFlush = () => {
|
|
||||||
port.postMessage(1);
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
timerFlush = () => {
|
|
||||||
setTimeout(flush, 0);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearTicks() {
|
|
||||||
callbacks.length = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function nextTick(callback?: () => void): Promise<any> {
|
|
||||||
let _resovle: () => void;
|
|
||||||
|
|
||||||
callbacks.push(() => {
|
|
||||||
callback && callback();
|
|
||||||
_resovle();
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!pending) {
|
|
||||||
pending = true;
|
|
||||||
timerFlush();
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
_resovle = resolve;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { getProxiedValue } from './proxy';
|
|
||||||
|
|
||||||
export function is(a: any, b: any) {
|
|
||||||
return getProxiedValue(a) === getProxiedValue(b);
|
|
||||||
}
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
import { isObject } from 'lodash/isObject';
|
|
||||||
import { nextId } from '../utils';
|
|
||||||
import { DerivationState, IDerivation, setDerivationDirty } from '../derivation';
|
|
||||||
import { globalState } from '../ global-state';
|
|
||||||
import Obx, { hasObx, getObx, injectObx, ObxFlag } from './obx';
|
|
||||||
|
|
||||||
export interface IDepTreeNode {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
observing: IObservable[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IObservable extends IDepTreeNode {
|
|
||||||
diffFlag?: boolean;
|
|
||||||
|
|
||||||
observers: Set<IDerivation>;
|
|
||||||
|
|
||||||
// Used to avoid redundant propagations
|
|
||||||
lowestObserverState: DerivationState;
|
|
||||||
// Used to push itself to global.pendingUnobservations at most once per batch.
|
|
||||||
isPendingUnobservation?: boolean;
|
|
||||||
|
|
||||||
// Id of the derivation *run* that last accessed this observable.
|
|
||||||
lastAccessedBy?: number;
|
|
||||||
isBeingObserved?: boolean;
|
|
||||||
onBecomeUnobserved(): void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function addObserver(observable: IObservable, node: IDerivation) {
|
|
||||||
observable.observers.add(node);
|
|
||||||
|
|
||||||
if (observable.lowestObserverState > node.dependenciesState) {
|
|
||||||
observable.lowestObserverState = node.dependenciesState;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function removeObserver(observable: IObservable, node: IDerivation) {
|
|
||||||
observable.observers.delete(node);
|
|
||||||
if (observable.observers.size === 0) {
|
|
||||||
// deleting last observer
|
|
||||||
queueForUnobservation(observable);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function queueForUnobservation(observable: IObservable) {
|
|
||||||
if (!observable.isPendingUnobservation) {
|
|
||||||
observable.isPendingUnobservation = true;
|
|
||||||
globalState.pendingUnobservations.push(observable);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function startBatch() {
|
|
||||||
globalState.inBatch++;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function endBatch() {
|
|
||||||
if (--globalState.inBatch === 0) {
|
|
||||||
// the batch is actually about to finish, all unobserving should happen here.
|
|
||||||
const list = globalState.pendingUnobservations;
|
|
||||||
for (let i = 0; i < list.length; i++) {
|
|
||||||
const observable = list[i];
|
|
||||||
observable.isPendingUnobservation = false;
|
|
||||||
if (observable.observers.size === 0) {
|
|
||||||
if (observable.isBeingObserved) {
|
|
||||||
// if this observable had reactive observers, trigger the hooks
|
|
||||||
observable.isBeingObserved = false;
|
|
||||||
observable.onBecomeUnobserved();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
globalState.pendingUnobservations = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function reportObserved(observable: IObservable): void {
|
|
||||||
const derivation = globalState.trackingDerivation;
|
|
||||||
if (!derivation) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (derivation.runId !== observable.lastAccessedBy) {
|
|
||||||
observable.lastAccessedBy = derivation.runId;
|
|
||||||
derivation.newObserving![derivation.unboundDepsCount!++] = observable;
|
|
||||||
if (!observable.isBeingObserved) {
|
|
||||||
observable.isBeingObserved = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function propagateChanged(observable: IObservable, force = false) {
|
|
||||||
if (observable.lowestObserverState === DerivationState.DIRTY && !force) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
observable.lowestObserverState = DerivationState.DIRTY;
|
|
||||||
observable.observers.forEach((d) => setDerivationDirty(d));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function propagateChangeConfirmed(observable: IObservable) {
|
|
||||||
if (observable.lowestObserverState === DerivationState.DIRTY) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
observable.lowestObserverState = DerivationState.DIRTY;
|
|
||||||
|
|
||||||
observable.observers.forEach((d) => {
|
|
||||||
if (d.dependenciesState === DerivationState.MYBE_DIRTY) {
|
|
||||||
d.dependenciesState = DerivationState.DIRTY;
|
|
||||||
} else if (d.dependenciesState === DerivationState.UP_TO_DATE) {
|
|
||||||
observable.lowestObserverState = DerivationState.UP_TO_DATE;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function propagateMaybeChanged(observable: IObservable) {
|
|
||||||
if (observable.lowestObserverState !== DerivationState.UP_TO_DATE) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
observable.lowestObserverState = DerivationState.MYBE_DIRTY;
|
|
||||||
|
|
||||||
observable.observers.forEach((d) => {
|
|
||||||
if (d.dependenciesState === DerivationState.UP_TO_DATE) {
|
|
||||||
d.dependenciesState = DerivationState.MYBE_DIRTY;
|
|
||||||
d.onBecomeDirty();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function asObservable(thing: any, obxFlag: ObxFlag): Obx | undefined {
|
|
||||||
if (!isObject(thing)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasObx(thing)) {
|
|
||||||
return getObx(thing);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Object.isExtensible(thing)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const name = (thing.constructor.name || 'ObservableObject') + '@' + nextId();
|
|
||||||
const ObxContructor = (asObservable as any).getObxContructor(thing);
|
|
||||||
const obx = ObxContructor ? new ObxContructor(name, thing, obxFlag) : null;
|
|
||||||
|
|
||||||
if (obx) {
|
|
||||||
injectObx(thing, obx);
|
|
||||||
return obx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
(asObservable as any).getObxContructor = () => Obx;
|
|
||||||
|
|
||||||
export function observeIterable(items: Iterable<any>, obxFlag: ObxFlag): void {
|
|
||||||
for (const n of items) {
|
|
||||||
asObservable(n, obxFlag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function reportPropValue(propValue: any, propFlag: ObxFlag): void {
|
|
||||||
if (propValue == null) return;
|
|
||||||
|
|
||||||
const x = propFlag > ObxFlag.REF ? asObservable(propValue, propFlag) : getObx(propValue);
|
|
||||||
|
|
||||||
if (x) {
|
|
||||||
reportObserved(x);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function reportChildValue(propValue: any, ownerFlag: ObxFlag): void {
|
|
||||||
if (propValue == null) return;
|
|
||||||
|
|
||||||
const x =
|
|
||||||
ownerFlag > ObxFlag.VAL
|
|
||||||
? asObservable(propValue, ownerFlag === ObxFlag.DEEP ? ObxFlag.DEEP : ObxFlag.VAL)
|
|
||||||
: getObx(propValue);
|
|
||||||
|
|
||||||
if (x) {
|
|
||||||
reportObserved(x);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
import { addHiddenProp } from '../utils';
|
|
||||||
import { observeIterable, reportChildValue } from './observable';
|
|
||||||
import { supportProxy, isProxied, createProxy, SYMBOL_PROXY, SYMBOL_RAW, getProxiedValue, getRawValue } from './proxy';
|
|
||||||
import Obx, { getObx, SYMBOL_OBX, ObxFlag } from './obx';
|
|
||||||
import { setPrototypeOf } from '../../utils/set-prototype-of';
|
|
||||||
|
|
||||||
export function childFlag(flag: ObxFlag) {
|
|
||||||
return flag === ObxFlag.DEEP ? ObxFlag.DEEP : ObxFlag.VAL;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isValidArrayIndex(val: any, limit: number = -1): boolean {
|
|
||||||
const n = parseFloat(String(val));
|
|
||||||
return n >= 0 && Math.floor(n) === n && isFinite(val) && (limit < 0 || n < limit);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class ObxArray extends Obx<any[]> {
|
|
||||||
constructor(name: string, target: any[], obxFlag: ObxFlag = ObxFlag.DEEP) {
|
|
||||||
super(name, target, obxFlag);
|
|
||||||
|
|
||||||
if (supportProxy) {
|
|
||||||
this.target = createProxy(target, arrayProxyTraps);
|
|
||||||
} else if (obxFlag > ObxFlag.VAL) {
|
|
||||||
observeIterable(target, childFlag(obxFlag));
|
|
||||||
}
|
|
||||||
setPrototypeOf(target, arrayMethods);
|
|
||||||
}
|
|
||||||
|
|
||||||
set(key: PropertyKey, val: any) {
|
|
||||||
const target = this.target;
|
|
||||||
if (isValidArrayIndex(key)) {
|
|
||||||
const index = Number(key);
|
|
||||||
target.length = Math.max(target.length, index);
|
|
||||||
target.splice(index, 1, val);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
super.set(key, val);
|
|
||||||
}
|
|
||||||
|
|
||||||
del(key: PropertyKey) {
|
|
||||||
if (isValidArrayIndex(key, this.target.length)) {
|
|
||||||
this.target.splice(Number(key), 1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
super.del(key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ======= patches ========
|
|
||||||
const arrayProto = Array.prototype;
|
|
||||||
const arrayMethods = Object.create(arrayProto);
|
|
||||||
|
|
||||||
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
|
|
||||||
const original = (arrayProto as any)[method];
|
|
||||||
addHiddenProp(arrayMethods, method, function mutator(this: any[], ...args: any[]) {
|
|
||||||
const obx = getObx(this) as ObxArray;
|
|
||||||
const proxied = isProxied(this);
|
|
||||||
const length = this.length;
|
|
||||||
// apply to rawTarget avoid to call Proxy.set
|
|
||||||
const result = original.apply(getRawValue(this), args);
|
|
||||||
|
|
||||||
let changed = true;
|
|
||||||
let inserted;
|
|
||||||
switch (method) {
|
|
||||||
case 'push':
|
|
||||||
case 'unshift':
|
|
||||||
inserted = args;
|
|
||||||
changed = inserted.length > 0;
|
|
||||||
break;
|
|
||||||
case 'splice':
|
|
||||||
inserted = args.slice(2);
|
|
||||||
changed = inserted.length > 0 || this.length !== length;
|
|
||||||
break;
|
|
||||||
case 'pop':
|
|
||||||
case 'shift':
|
|
||||||
changed = this.length !== length;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (!proxied && obx.obxFlag > ObxFlag.VAL) {
|
|
||||||
if (inserted && inserted.length > 0) {
|
|
||||||
observeIterable(inserted, childFlag(obx.obxFlag));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (obx && changed) {
|
|
||||||
obx.reportChange();
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const arrayProxyTraps: ProxyHandler<any[]> = {
|
|
||||||
has(rawTarget, name: PropertyKey) {
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_RAW) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return name in rawTarget;
|
|
||||||
},
|
|
||||||
get(rawTarget, name: PropertyKey) {
|
|
||||||
if (name === SYMBOL_RAW) {
|
|
||||||
return rawTarget;
|
|
||||||
}
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
|
|
||||||
return (rawTarget as any)[name];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isValidArrayIndex(name)) {
|
|
||||||
const v = rawTarget[Number(name)];
|
|
||||||
const obx = getObx(rawTarget);
|
|
||||||
if (obx) {
|
|
||||||
reportChildValue(v, obx.obxFlag);
|
|
||||||
}
|
|
||||||
return getProxiedValue(v);
|
|
||||||
}
|
|
||||||
|
|
||||||
return getProxiedValue((rawTarget as any)[name]);
|
|
||||||
},
|
|
||||||
set(rawTarget, name: PropertyKey, value: any) {
|
|
||||||
if (name === 'length') {
|
|
||||||
rawTarget[name] = value;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isValidArrayIndex(name)) {
|
|
||||||
const index = Number(name);
|
|
||||||
rawTarget.length = Math.max(rawTarget.length, index);
|
|
||||||
rawTarget.splice(index, 1, value);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
(rawTarget as any)[name] = value;
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
deleteProperty(rawTarget, name: PropertyKey) {
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in arrayMethods) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isValidArrayIndex(name)) {
|
|
||||||
rawTarget.splice(Number(name), 1);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
delete (rawTarget as any)[name];
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
preventExtensions() {
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { DecoratorTarget } from '../decorators';
|
|
||||||
import Obx from './obx';
|
|
||||||
|
|
||||||
export default class ObxInstance extends Obx<DecoratorTarget> {
|
|
||||||
set(key: PropertyKey, val: any) {
|
|
||||||
const target = this.target;
|
|
||||||
if (key in target) {
|
|
||||||
(target as any)[key] = val;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
super.set(key, val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import Obx, { ObxFlag } from './obx';
|
|
||||||
import { patchMutator, patchAccessor } from './obx-set';
|
|
||||||
import { setPrototypeOf } from '../../utils/set-prototype-of';
|
|
||||||
|
|
||||||
type MapType = Map<PropertyKey, any>;
|
|
||||||
|
|
||||||
export default class ObxMap extends Obx<MapType> {
|
|
||||||
constructor(name: string, target: MapType, obxFlag: ObxFlag = ObxFlag.DEEP) {
|
|
||||||
super(name, target, obxFlag);
|
|
||||||
|
|
||||||
setPrototypeOf(target, mapMethods);
|
|
||||||
}
|
|
||||||
|
|
||||||
has(key: PropertyKey) {
|
|
||||||
return this.target.has(key);
|
|
||||||
}
|
|
||||||
|
|
||||||
set(key: PropertyKey, val: any) {
|
|
||||||
this.target.set(key, val);
|
|
||||||
}
|
|
||||||
|
|
||||||
get(key: PropertyKey) {
|
|
||||||
return this.target.get(key);
|
|
||||||
}
|
|
||||||
|
|
||||||
del(key: PropertyKey) {
|
|
||||||
this.target.delete(key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ======= Map ========
|
|
||||||
const mapProto = Map.prototype;
|
|
||||||
const mapMethods = Object.create(mapProto);
|
|
||||||
|
|
||||||
patchMutator(['set', 'clear', 'delete'], mapProto, mapMethods);
|
|
||||||
|
|
||||||
patchAccessor(['values', 'entries', Symbol.iterator, 'forEach', 'get'], mapProto, mapMethods);
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
import { walk } from '../utils';
|
|
||||||
import { supportProxy, createProxy, getProxiedValue, SYMBOL_PROXY, SYMBOL_RAW } from './proxy';
|
|
||||||
import Obx, { getObx, SYMBOL_OBX, ObxFlag } from './obx';
|
|
||||||
import { defineObxProperty, ensureObxProperty } from './obx-property';
|
|
||||||
import { hasOwnProperty } from '../../utils/has-own-property';
|
|
||||||
|
|
||||||
function propFlag(flag: ObxFlag) {
|
|
||||||
return flag === ObxFlag.DEEP ? ObxFlag.DEEP : flag - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class ObxObject extends Obx<object> {
|
|
||||||
constructor(name: string, target: object, obxFlag: ObxFlag = ObxFlag.DEEP) {
|
|
||||||
super(name, target, obxFlag);
|
|
||||||
|
|
||||||
if (supportProxy) {
|
|
||||||
this.target = createProxy(target, objectProxyTraps);
|
|
||||||
} else if (obxFlag > ObxFlag.REF) {
|
|
||||||
walk(target as any, (obj, key, val) => {
|
|
||||||
defineObxProperty(obj, key, val, undefined, propFlag(obxFlag));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
set(key: PropertyKey, val: any) {
|
|
||||||
const target = this.target;
|
|
||||||
if (key in target && !(key in objectProto)) {
|
|
||||||
(target as any)[key] = val;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
super.set(key, val);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const objectProto = Object.prototype;
|
|
||||||
|
|
||||||
const objectProxyTraps: ProxyHandler<any> = {
|
|
||||||
has(rawTarget, name: PropertyKey) {
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_RAW) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return name in rawTarget;
|
|
||||||
},
|
|
||||||
get(rawTarget, name: PropertyKey) {
|
|
||||||
if (name === SYMBOL_RAW) {
|
|
||||||
return rawTarget;
|
|
||||||
}
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in objectProto) {
|
|
||||||
return rawTarget[name];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (hasOwnProperty(rawTarget, name)) {
|
|
||||||
const obx = getObx(rawTarget);
|
|
||||||
if (obx) {
|
|
||||||
ensureObxProperty(rawTarget, name, propFlag(obx.obxFlag));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return getProxiedValue(rawTarget[name]);
|
|
||||||
},
|
|
||||||
set(rawTarget, name: PropertyKey, value: any) {
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || name in objectProto) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!hasOwnProperty(rawTarget, name)) {
|
|
||||||
const obx = getObx(rawTarget);
|
|
||||||
if (obx) {
|
|
||||||
defineObxProperty(rawTarget, name, value, undefined, propFlag(obx.obxFlag));
|
|
||||||
obx.reportChange();
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
rawTarget[name] = value;
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
deleteProperty(rawTarget, name: PropertyKey) {
|
|
||||||
if (name === SYMBOL_OBX || name === SYMBOL_PROXY || !hasOwnProperty(rawTarget, name)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
delete rawTarget[name];
|
|
||||||
const obx = getObx(rawTarget);
|
|
||||||
if (obx) {
|
|
||||||
obx.reportChange();
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
preventExtensions() {
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,212 +0,0 @@
|
|||||||
import { globalState } from '../ global-state';
|
|
||||||
import {
|
|
||||||
untrackedStart,
|
|
||||||
untrackedEnd,
|
|
||||||
IDerivation,
|
|
||||||
DerivationState,
|
|
||||||
runDerivedFunction,
|
|
||||||
shouldCompute,
|
|
||||||
isCaughtException,
|
|
||||||
clearObserving,
|
|
||||||
setDerivationDirty,
|
|
||||||
} from '../derivation';
|
|
||||||
import {
|
|
||||||
IObservable,
|
|
||||||
reportObserved,
|
|
||||||
startBatch,
|
|
||||||
endBatch,
|
|
||||||
propagateChangeConfirmed,
|
|
||||||
propagateMaybeChanged,
|
|
||||||
reportPropValue,
|
|
||||||
} from './observable';
|
|
||||||
import { nextId } from '../utils';
|
|
||||||
import { ObxFlag, SYMBOL_OBX, getObx } from './obx';
|
|
||||||
import { getProxiedValue } from './proxy';
|
|
||||||
import { is } from './compare';
|
|
||||||
import { isPrimitive } from '../utils/is-primitive';
|
|
||||||
import { invariant } from '../utils/invariant';
|
|
||||||
import { hasOwnProperty } from '../utils/has-own-property';
|
|
||||||
|
|
||||||
function getVer(obj: any): number {
|
|
||||||
const obx = getObx(obj);
|
|
||||||
return obx ? obx.localVer : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function asNewValue(obj: object) {
|
|
||||||
const obx = getObx(obj);
|
|
||||||
if (obx) {
|
|
||||||
obx.localVer = obx.localVer + 1;
|
|
||||||
}
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
const DIRTY = Symbol('dirty');
|
|
||||||
|
|
||||||
export default class ObxProperty implements IObservable, IDerivation {
|
|
||||||
id = nextId();
|
|
||||||
observing: IObservable[] = [];
|
|
||||||
observers = new Set<IDerivation>();
|
|
||||||
dependenciesState = DerivationState.NOT_TRACKING;
|
|
||||||
lowestObserverState = DerivationState.UP_TO_DATE;
|
|
||||||
|
|
||||||
private isComputing = false;
|
|
||||||
private isRunningSetter = false;
|
|
||||||
private pending = false;
|
|
||||||
private pendingValue: any = null;
|
|
||||||
private objectVer = 0;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
public name: string,
|
|
||||||
public scope: object | null,
|
|
||||||
private getter?: (...rest: any[]) => any,
|
|
||||||
private setter?: (v: any) => void,
|
|
||||||
private value?: any,
|
|
||||||
private obxFlag: ObxFlag = ObxFlag.DEEP,
|
|
||||||
) {}
|
|
||||||
|
|
||||||
onBecomeDirty() {
|
|
||||||
propagateMaybeChanged(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
onBecomeUnobserved() {
|
|
||||||
clearObserving(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
ifModified() {
|
|
||||||
if (this.getter && shouldCompute(this)) {
|
|
||||||
startBatch();
|
|
||||||
if (this.computeValue()) {
|
|
||||||
propagateChangeConfirmed(this);
|
|
||||||
this.objectVer = getVer(this.value);
|
|
||||||
}
|
|
||||||
endBatch();
|
|
||||||
} else if (this.pending) {
|
|
||||||
this.pending = false;
|
|
||||||
const oldValue = this.value;
|
|
||||||
this.value = this.pendingValue;
|
|
||||||
if (!this.is(oldValue, this.value)) {
|
|
||||||
propagateChangeConfirmed(this);
|
|
||||||
this.objectVer = getVer(this.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private is(oldValue: any, value: any) {
|
|
||||||
return oldValue !== DIRTY && is(oldValue, value) && (isPrimitive(value) || getVer(value) === this.objectVer);
|
|
||||||
}
|
|
||||||
|
|
||||||
get() {
|
|
||||||
invariant(!this.isComputing, `Cycle detected in computation ${this.name}`, this.getter);
|
|
||||||
|
|
||||||
reportObserved(this);
|
|
||||||
|
|
||||||
this.ifModified();
|
|
||||||
const result = this.value!;
|
|
||||||
|
|
||||||
if (isCaughtException(result)) {
|
|
||||||
throw result.cause;
|
|
||||||
}
|
|
||||||
|
|
||||||
reportPropValue(result, this.obxFlag);
|
|
||||||
|
|
||||||
return getProxiedValue(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
set(value: any) {
|
|
||||||
invariant(!this.isRunningSetter, `The setter of observable value '${this.name}' is trying to update itself.`);
|
|
||||||
|
|
||||||
invariant(Boolean(this.setter || !this.getter), `Cannot assign a new value to readonly value '${this.name}'.`);
|
|
||||||
|
|
||||||
const oldValue = this.pending ? this.pendingValue : this.value;
|
|
||||||
|
|
||||||
if (!isCaughtException(oldValue) && this.is(oldValue, value)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.setter) {
|
|
||||||
this.pendingValue = value;
|
|
||||||
if (!this.pending) {
|
|
||||||
this.pending = true;
|
|
||||||
propagateMaybeChanged(this);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.isRunningSetter = true;
|
|
||||||
const prevTracking = untrackedStart();
|
|
||||||
try {
|
|
||||||
this.value = DIRTY;
|
|
||||||
this.setter!.call(this.scope, value);
|
|
||||||
} finally {
|
|
||||||
untrackedEnd(prevTracking);
|
|
||||||
}
|
|
||||||
this.isRunningSetter = false;
|
|
||||||
setDerivationDirty(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private computeValue(): boolean {
|
|
||||||
const oldValue = this.value;
|
|
||||||
this.isComputing = true;
|
|
||||||
globalState.computationDepth++;
|
|
||||||
this.value = runDerivedFunction(this, this.getter!, this.scope);
|
|
||||||
globalState.computationDepth--;
|
|
||||||
this.isComputing = false;
|
|
||||||
return isCaughtException(oldValue) || isCaughtException(this.value) || !this.is(oldValue, this.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isObxProperty(descriptor?: PropertyDescriptor) {
|
|
||||||
if (!descriptor || !descriptor.get) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return (descriptor.get as any)[SYMBOL_OBX] ? true : false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ensureObxProperty(obj: any, prop: PropertyKey, obxFlag: ObxFlag = ObxFlag.DEEP) {
|
|
||||||
const descriptor = Object.getOwnPropertyDescriptor(obj, prop);
|
|
||||||
if (!descriptor || isObxProperty(descriptor)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
defineObxProperty(obj, prop, undefined, descriptor, obxFlag);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function defineObxProperty(
|
|
||||||
obj: object,
|
|
||||||
key: PropertyKey,
|
|
||||||
val: any,
|
|
||||||
descriptor?: PropertyDescriptor,
|
|
||||||
obxFlag: ObxFlag = ObxFlag.DEEP,
|
|
||||||
): void {
|
|
||||||
if (!descriptor) {
|
|
||||||
descriptor = Object.getOwnPropertyDescriptor(obj, key);
|
|
||||||
}
|
|
||||||
if (descriptor && descriptor.configurable === false) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (val == null && descriptor && hasOwnProperty(descriptor, 'value')) {
|
|
||||||
val = descriptor.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getter = descriptor && descriptor.get;
|
|
||||||
const setter = descriptor && descriptor.set;
|
|
||||||
const property = new ObxProperty(String(key), obj, getter, setter, val, obxFlag);
|
|
||||||
const get = () => property.get();
|
|
||||||
(get as any)[SYMBOL_OBX] = property;
|
|
||||||
|
|
||||||
Object.defineProperty(obj, key, {
|
|
||||||
enumerable: true,
|
|
||||||
configurable: true,
|
|
||||||
get,
|
|
||||||
set: (newVal) => property.set(newVal),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getObxProperty(obj: object, key: PropertyKey) {
|
|
||||||
const descriptor = Object.getOwnPropertyDescriptor(obj, key);
|
|
||||||
|
|
||||||
if (!descriptor || !descriptor.get) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (descriptor.get as any)[SYMBOL_OBX] as ObxProperty;
|
|
||||||
}
|
|
||||||
@ -1,133 +0,0 @@
|
|||||||
import { addHiddenProp } from '../utils';
|
|
||||||
import Obx, { getObx, ObxFlag } from './obx';
|
|
||||||
import { reportChildValue } from './observable';
|
|
||||||
import { getProxiedValue } from './proxy';
|
|
||||||
import { setPrototypeOf } from '../../utils/set-prototype-of';
|
|
||||||
|
|
||||||
type SetType = Set<any> | WeakSet<any>;
|
|
||||||
|
|
||||||
export default class ObxSet extends Obx<SetType> {
|
|
||||||
constructor(name: string, target: SetType, obxFlag: ObxFlag = ObxFlag.DEEP) {
|
|
||||||
super(name, target, obxFlag);
|
|
||||||
|
|
||||||
setPrototypeOf(target, target instanceof Set ? setMethods : weaksetMethods);
|
|
||||||
}
|
|
||||||
|
|
||||||
has(key: PropertyKey) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
set(key: PropertyKey, val: any) {}
|
|
||||||
|
|
||||||
get(key: PropertyKey) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
del(key: PropertyKey) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isIterator(v: any): v is Iterator<any> {
|
|
||||||
return v.next ? true : false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function patchAccessor(keys: Array<string | symbol>, proto: any, methods: object): void {
|
|
||||||
keys.forEach(method => {
|
|
||||||
const original = proto[method];
|
|
||||||
addHiddenProp(methods, method, function accessor(this: any, ...args: any[]) {
|
|
||||||
const obx = getObx(this);
|
|
||||||
const flag = obx ? obx.obxFlag : ObxFlag.REF;
|
|
||||||
if (method === 'forEach') {
|
|
||||||
const fn = args[0];
|
|
||||||
const thisArg = args[0] || this;
|
|
||||||
args[0] = (v: any, a: any, c: any) => {
|
|
||||||
reportChildValue(v, flag);
|
|
||||||
return fn.call(thisArg, getProxiedValue(v), a, c);
|
|
||||||
};
|
|
||||||
return original.apply(this, args);
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = original.apply(this, args);
|
|
||||||
|
|
||||||
if (method === 'get') {
|
|
||||||
reportChildValue(result, flag);
|
|
||||||
return getProxiedValue(result);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isIterator(result)) {
|
|
||||||
const originNext = result.next;
|
|
||||||
const isMapIter = String(result) === '[object Map Iterator]';
|
|
||||||
const isEntries = method === 'entries';
|
|
||||||
let keys: string[] | null = null;
|
|
||||||
if (isEntries && !isMapIter) {
|
|
||||||
keys = ['0', '1'];
|
|
||||||
} else if (isMapIter && (isEntries || method === Symbol.iterator)) {
|
|
||||||
keys = ['1'];
|
|
||||||
}
|
|
||||||
|
|
||||||
result.next = function next() {
|
|
||||||
let n = originNext.call(this);
|
|
||||||
if (!n.done) {
|
|
||||||
if (keys) {
|
|
||||||
n.value = createResultProxy(n.value, flag, keys);
|
|
||||||
} else {
|
|
||||||
n = createResultProxy(n, flag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return n;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createResultProxy(entries: any, flag: ObxFlag, keys: any[] = ['value']) {
|
|
||||||
return new Proxy(entries, {
|
|
||||||
get(target, key) {
|
|
||||||
const v = target[key];
|
|
||||||
if (v && keys.includes(key)) {
|
|
||||||
reportChildValue(v, flag);
|
|
||||||
}
|
|
||||||
return getProxiedValue(v);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function patchMutator(keys: Array<string | symbol>, proto: any, methods: object): void {
|
|
||||||
keys.forEach(method => {
|
|
||||||
const original = proto[method];
|
|
||||||
addHiddenProp(methods, method, function mutator(this: any, ...args: any[]) {
|
|
||||||
const size = this.size;
|
|
||||||
const result = original.apply(this, args);
|
|
||||||
const obx = getObx(this);
|
|
||||||
let changed = true;
|
|
||||||
switch (method) {
|
|
||||||
case 'add':
|
|
||||||
case 'clear':
|
|
||||||
case 'delete':
|
|
||||||
changed = this.size !== size;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
// now: "set" not compare values, default changed
|
|
||||||
if (obx && changed) {
|
|
||||||
obx.reportChange();
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ======= Set ========
|
|
||||||
const setProto = Set.prototype;
|
|
||||||
const setMethods = Object.create(setProto);
|
|
||||||
|
|
||||||
patchMutator(['add', 'clear', 'delete'], setProto, setMethods);
|
|
||||||
|
|
||||||
patchAccessor(['values', 'keys', 'entries', 'forEach', Symbol.iterator], setProto, setMethods);
|
|
||||||
|
|
||||||
// ======= WeakSet ========
|
|
||||||
const weaksetProto = WeakSet.prototype;
|
|
||||||
const weaksetMethods = Object.create(weaksetProto);
|
|
||||||
|
|
||||||
patchMutator(['add', 'delete', 'clear'], weaksetProto, weaksetMethods);
|
|
||||||
@ -1,141 +0,0 @@
|
|||||||
import { walk, addHiddenFinalProp, nextId } from '../utils';
|
|
||||||
import { defineObxProperty } from './obx-property';
|
|
||||||
import { IObservable, propagateChanged, startBatch, endBatch } from './observable';
|
|
||||||
import { IDerivation, DerivationState, clearObserving } from '../derivation';
|
|
||||||
import { hasOwnProperty } from '../utils/has-own-property';
|
|
||||||
import { splitPath } from '../utils/split-path';
|
|
||||||
|
|
||||||
export enum ObxFlag {
|
|
||||||
REF = 0,
|
|
||||||
VAL = 1,
|
|
||||||
SHALLOW = 2,
|
|
||||||
DEEP = 3,
|
|
||||||
}
|
|
||||||
|
|
||||||
class Obx<T = any[] | object> implements IObservable, IDerivation {
|
|
||||||
id = nextId();
|
|
||||||
localVer = 0;
|
|
||||||
observing: IObservable[] = [];
|
|
||||||
observers = new Set<IDerivation>();
|
|
||||||
dependenciesState = DerivationState.NOT_TRACKING;
|
|
||||||
lowestObserverState = DerivationState.UP_TO_DATE;
|
|
||||||
|
|
||||||
constructor(public name: string, public target: T, public obxFlag: ObxFlag = ObxFlag.DEEP) {}
|
|
||||||
|
|
||||||
onBecomeDirty() {
|
|
||||||
propagateChanged(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
onBecomeUnobserved() {
|
|
||||||
clearObserving(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
reportChange(force = false) {
|
|
||||||
startBatch();
|
|
||||||
this.localVer++;
|
|
||||||
propagateChanged(this, force);
|
|
||||||
endBatch();
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: remove this unused function, move to utils $getAsObx
|
|
||||||
getAsObx(path: PropertyKey): Obx<T | any[] | object> | void {
|
|
||||||
if (path === '') {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
let entry = path;
|
|
||||||
let nestPath = '';
|
|
||||||
|
|
||||||
if (typeof path === 'string') {
|
|
||||||
const pathArray = splitPath(path);
|
|
||||||
|
|
||||||
if (!pathArray) {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
|
|
||||||
entry = pathArray[1];
|
|
||||||
nestPath = pathArray[2];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!entry) {
|
|
||||||
return this.get(nestPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
let ret = this.get(entry);
|
|
||||||
|
|
||||||
if (!hasObx(ret) && nestPath) {
|
|
||||||
ret = this.get(path);
|
|
||||||
}
|
|
||||||
|
|
||||||
const obx = getObx(ret);
|
|
||||||
|
|
||||||
if (obx && nestPath) {
|
|
||||||
return obx.getAsObx(nestPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
return obx;
|
|
||||||
}
|
|
||||||
|
|
||||||
has(key: PropertyKey): boolean {
|
|
||||||
if (key == null || key === '') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return key in this.target;
|
|
||||||
}
|
|
||||||
|
|
||||||
get(key?: PropertyKey): any {
|
|
||||||
if (key == null || key === '') {
|
|
||||||
return this.target;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (this.target as any)[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
set(key: PropertyKey, val: any): void {
|
|
||||||
if (this.obxFlag > ObxFlag.REF) {
|
|
||||||
defineObxProperty(this.target as any, key, val, undefined, this.obxFlag);
|
|
||||||
} else {
|
|
||||||
(this.target as any)[key] = val;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.reportChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
del(key: PropertyKey) {
|
|
||||||
if (!hasOwnProperty(this.target, key)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
delete (this.target as any)[key];
|
|
||||||
this.reportChange();
|
|
||||||
}
|
|
||||||
|
|
||||||
extend(properties: object) {
|
|
||||||
startBatch();
|
|
||||||
walk(properties, (_, key, val) => this.set(key, val));
|
|
||||||
endBatch();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Obx;
|
|
||||||
|
|
||||||
export const SYMBOL_OBX = Symbol.for('obx');
|
|
||||||
export function injectObx(obj: any[] | object, obx: Obx): void {
|
|
||||||
addHiddenFinalProp(obj, SYMBOL_OBX, obx);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getObx(obj: any): Obx | undefined {
|
|
||||||
return obj ? (obj as any)[SYMBOL_OBX] : undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function hasObx(obj: any[] | object): boolean {
|
|
||||||
return hasOwnProperty(obj, SYMBOL_OBX) && (obj as any)[SYMBOL_OBX] instanceof Obx;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function reportChange(obj: any, force = false) {
|
|
||||||
const obx = getObx(obj);
|
|
||||||
if (obx) {
|
|
||||||
obx.reportChange(force);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { addHiddenFinalProp } from '../utils';
|
|
||||||
|
|
||||||
export const SYMBOL_PROXY = Symbol.for('proxy');
|
|
||||||
export const SYMBOL_RAW = Symbol.for('raw');
|
|
||||||
export interface Proxied<T> {
|
|
||||||
[SYMBOL_PROXY]: T;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isProxied<T>(target: T): target is T & Proxied<T> {
|
|
||||||
return SYMBOL_PROXY in target;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getProxy<T>(target: T & Proxied<T>) {
|
|
||||||
return target[SYMBOL_PROXY];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function setProxy(target: object, proxy: object) {
|
|
||||||
addHiddenFinalProp(target, SYMBOL_PROXY, proxy);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getProxiedValue(target: any) {
|
|
||||||
return (target && getProxy(target)) || target;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getRawValue(target: any) {
|
|
||||||
return (target && target[SYMBOL_RAW]) || target;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const supportProxy = 'Proxy' in global;
|
|
||||||
|
|
||||||
export function createProxy<T extends object>(target: T, taps: ProxyHandler<T>) {
|
|
||||||
if (isProxied(target)) {
|
|
||||||
return getProxy(target);
|
|
||||||
}
|
|
||||||
|
|
||||||
const proxy = new Proxy(target, taps);
|
|
||||||
setProxy(target, proxy);
|
|
||||||
|
|
||||||
return proxy;
|
|
||||||
}
|
|
||||||
@ -1,149 +0,0 @@
|
|||||||
import { FunctionComponent, ComponentType } from 'react';
|
|
||||||
import { Component } from 'rax';
|
|
||||||
import { Reaction } from './reaction';
|
|
||||||
import { shallowEqual } from './utils';
|
|
||||||
|
|
||||||
const SYMBOL_REACTION = Symbol('__obxReaction');
|
|
||||||
const SYMBOL_ISUNMOUNTED = Symbol('__obxIsUnmounted');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ReactiveMixin
|
|
||||||
*/
|
|
||||||
function defaultComponentWillUnmount(this: any) {
|
|
||||||
this.render[SYMBOL_REACTION] && this.render[SYMBOL_REACTION].sleep();
|
|
||||||
this[SYMBOL_ISUNMOUNTED] = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function defaultShouldComponentUpdate(this: any, nextProps: any, nextState: any) {
|
|
||||||
if (this.state !== nextState) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return !shallowEqual(this.props, nextProps);
|
|
||||||
}
|
|
||||||
|
|
||||||
// function shouldConstruct(C: any) {
|
|
||||||
// const prototype = C.prototype;
|
|
||||||
// return !!(prototype && prototype.isReactComponent);
|
|
||||||
// }
|
|
||||||
|
|
||||||
function shouldConstruct(C: any) {
|
|
||||||
const prototype = C.prototype;
|
|
||||||
return !!(prototype && prototype.constructor);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isFunctionComponent<T = any>(type: Function): type is FunctionComponent<T> {
|
|
||||||
return !shouldConstruct(type);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getReaction(target: Component): Reaction | undefined {
|
|
||||||
return (target.render as any)[SYMBOL_REACTION];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Observer function / decorator
|
|
||||||
*/
|
|
||||||
export function observer<T extends ComponentType<any>>(target: T): T {
|
|
||||||
if (!target) {
|
|
||||||
throw new Error('Please pass a valid component to "observer"');
|
|
||||||
}
|
|
||||||
if (typeof target !== 'function') {
|
|
||||||
throw new Error('obx observer: needs to be a react class constructor or stateless function components');
|
|
||||||
}
|
|
||||||
|
|
||||||
let componentClass: any = target;
|
|
||||||
|
|
||||||
if (isFunctionComponent(target)) {
|
|
||||||
componentClass = class extends Component {
|
|
||||||
static displayName = componentClass.displayName || componentClass.name;
|
|
||||||
static contextTypes = componentClass.contextTypes;
|
|
||||||
static propTypes = componentClass.propTypes;
|
|
||||||
static defaultProps = componentClass.defaultProps;
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return target.call(this, this.props, this.context);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const proto = componentClass.prototype || componentClass;
|
|
||||||
mixinLifecycleEvents(proto);
|
|
||||||
componentClass.isObxReactObserver = true;
|
|
||||||
const baseRender = proto.render;
|
|
||||||
proto.render = function() {
|
|
||||||
return makeComponentReactive.call(this, baseRender);
|
|
||||||
};
|
|
||||||
return componentClass;
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeComponentReactive(this: any, render: any) {
|
|
||||||
function reactiveRender() {
|
|
||||||
isRenderingPending = false;
|
|
||||||
let exception = undefined;
|
|
||||||
let rendering = undefined;
|
|
||||||
reaction.track(() => {
|
|
||||||
try {
|
|
||||||
rendering = baseRender();
|
|
||||||
} catch (e) {
|
|
||||||
exception = e;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (exception) {
|
|
||||||
throw exception;
|
|
||||||
}
|
|
||||||
return rendering || baseRender();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate friendly name for debugging
|
|
||||||
const initialName =
|
|
||||||
this.displayName ||
|
|
||||||
this.name ||
|
|
||||||
(this.constructor && (this.constructor.displayName || this.constructor.name)) ||
|
|
||||||
'<component>';
|
|
||||||
|
|
||||||
const rootNodeID = (this._reactInternalFiber && this._reactInternalFiber._debugID) || '*';
|
|
||||||
|
|
||||||
// wire up reactive render
|
|
||||||
const baseRender = render.bind(this);
|
|
||||||
let isRenderingPending = false;
|
|
||||||
const reaction = new Reaction(
|
|
||||||
`${initialName}#${rootNodeID}.render()`,
|
|
||||||
() => {
|
|
||||||
if (!isRenderingPending) {
|
|
||||||
isRenderingPending = true;
|
|
||||||
if (typeof this.componentWillReact === 'function') {
|
|
||||||
this.componentWillReact();
|
|
||||||
}
|
|
||||||
if (this[SYMBOL_ISUNMOUNTED] !== true) {
|
|
||||||
let hasError = true;
|
|
||||||
try {
|
|
||||||
Component.prototype.forceUpdate.call(this);
|
|
||||||
hasError = false;
|
|
||||||
} finally {
|
|
||||||
if (hasError) reaction.sleep();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
this.$level || 0,
|
|
||||||
);
|
|
||||||
|
|
||||||
(reactiveRender as any)[SYMBOL_REACTION] = reaction;
|
|
||||||
this.render = reactiveRender;
|
|
||||||
return reactiveRender.call(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
function mixinLifecycleEvents(target: any) {
|
|
||||||
if (!target.componentWillUnmount) {
|
|
||||||
target.componentWillUnmount = defaultComponentWillUnmount;
|
|
||||||
} else {
|
|
||||||
const originFunc = target.componentWillUnmount;
|
|
||||||
target.componentWillUnmount = function(this: any) {
|
|
||||||
originFunc.call(this);
|
|
||||||
defaultComponentWillUnmount.call(this);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!target.shouldComponentUpdate) {
|
|
||||||
target.shouldComponentUpdate = defaultShouldComponentUpdate;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,252 +0,0 @@
|
|||||||
import {
|
|
||||||
DerivationState,
|
|
||||||
IDerivation,
|
|
||||||
runDerivedFunction,
|
|
||||||
isCaughtException,
|
|
||||||
shouldCompute,
|
|
||||||
clearObserving,
|
|
||||||
CaughtException,
|
|
||||||
} from './derivation';
|
|
||||||
import { nextTick } from './next-tick';
|
|
||||||
import { IObservable, endBatch, startBatch } from './observable/observable';
|
|
||||||
import { globalState } from './ global-state';
|
|
||||||
import { throttle } from './utils/throttle';
|
|
||||||
|
|
||||||
export function nextId() {
|
|
||||||
return (++globalState.guid).toString(36).toLocaleLowerCase();
|
|
||||||
}
|
|
||||||
|
|
||||||
export class Reaction implements IDerivation {
|
|
||||||
observing: IObservable[] = [];
|
|
||||||
dependenciesState = DerivationState.NOT_TRACKING;
|
|
||||||
id = nextId();
|
|
||||||
scheduled = false;
|
|
||||||
run: () => void;
|
|
||||||
caughtException: any = null;
|
|
||||||
|
|
||||||
private sleeping = false;
|
|
||||||
private running = false;
|
|
||||||
|
|
||||||
constructor(public name: string, private check: () => void, public level: number = 0, throttleWait = 10) {
|
|
||||||
if (throttleWait > 0) {
|
|
||||||
this.run = throttle(this.runReaction.bind(this), throttleWait);
|
|
||||||
} else {
|
|
||||||
this.run = this.runReaction.bind(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onBecomeDirty() {
|
|
||||||
this.schedule();
|
|
||||||
}
|
|
||||||
|
|
||||||
schedule() {
|
|
||||||
if (this.scheduled || this.sleeping) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.scheduled = true;
|
|
||||||
scheduleReaction(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
isDirty(): boolean {
|
|
||||||
return shouldCompute(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
runReaction() {
|
|
||||||
if (this.sleeping || this.running) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
startBatch();
|
|
||||||
if (shouldCompute(this)) {
|
|
||||||
this.caughtException = null;
|
|
||||||
try {
|
|
||||||
this.check();
|
|
||||||
} catch (e) {
|
|
||||||
this.caughtException = new CaughtException(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
endBatch();
|
|
||||||
}
|
|
||||||
|
|
||||||
track(fn: () => void) {
|
|
||||||
startBatch();
|
|
||||||
this.running = true;
|
|
||||||
const result = runDerivedFunction(this, fn);
|
|
||||||
if (isCaughtException(result)) {
|
|
||||||
this.caughtException = result;
|
|
||||||
}
|
|
||||||
this.running = false;
|
|
||||||
if (this.sleeping) {
|
|
||||||
clearObserving(this);
|
|
||||||
}
|
|
||||||
endBatch();
|
|
||||||
}
|
|
||||||
|
|
||||||
sleep() {
|
|
||||||
if (this.sleeping) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.sleeping = true;
|
|
||||||
if (!this.running) {
|
|
||||||
startBatch();
|
|
||||||
clearObserving(this);
|
|
||||||
endBatch();
|
|
||||||
deScheduleReaction(this);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
wakeup(sync = false) {
|
|
||||||
if (this.sleeping) {
|
|
||||||
this.sleeping = false;
|
|
||||||
if (sync) {
|
|
||||||
this.runReaction();
|
|
||||||
} else {
|
|
||||||
this.schedule();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let flushIndex = 0;
|
|
||||||
let flushWaiting = false;
|
|
||||||
|
|
||||||
function scheduleReaction(reaction: Reaction) {
|
|
||||||
const { pendingReactions, isRunningReactions } = globalState;
|
|
||||||
if (!isRunningReactions) {
|
|
||||||
pendingReactions.push(reaction);
|
|
||||||
} else {
|
|
||||||
let i = pendingReactions.length - 1;
|
|
||||||
// 0 1 2 3 4 5 6 7 8 9
|
|
||||||
// 0, 0, 1, 1, 1, 2, 2, 2, 3, 3
|
|
||||||
// ^ ^
|
|
||||||
// flushIndex = 2 level = 2
|
|
||||||
// break at: i = 7 or i = 2
|
|
||||||
while (i > flushIndex && pendingReactions[i].level > reaction.level) {
|
|
||||||
i--;
|
|
||||||
}
|
|
||||||
pendingReactions.splice(i + 1, 0, reaction);
|
|
||||||
}
|
|
||||||
|
|
||||||
runReactions();
|
|
||||||
}
|
|
||||||
|
|
||||||
function deScheduleReaction(reaction: Reaction) {
|
|
||||||
const { pendingReactions, isRunningReactions } = globalState;
|
|
||||||
if (!isRunningReactions) {
|
|
||||||
const i = pendingReactions.indexOf(reaction);
|
|
||||||
if (i > -1) {
|
|
||||||
pendingReactions.splice(i, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function runReactions() {
|
|
||||||
// queue the flush
|
|
||||||
if (!flushWaiting) {
|
|
||||||
flushWaiting = true;
|
|
||||||
nextTick(flushReactions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const MAX_REACTION_ITERATIONS = 100;
|
|
||||||
|
|
||||||
function flushReactions() {
|
|
||||||
globalState.isRunningReactions = true;
|
|
||||||
const allReactions = globalState.pendingReactions;
|
|
||||||
let pendingLength = 0;
|
|
||||||
let iterations = 0;
|
|
||||||
|
|
||||||
// low level run first
|
|
||||||
// sort as:
|
|
||||||
// 0, 0, 0, 1, 1, 1, 2, 2, 3, 4, 5, 5, 5
|
|
||||||
allReactions.sort((a, b) => a.level - b.level);
|
|
||||||
|
|
||||||
while (allReactions.length > pendingLength) {
|
|
||||||
pendingLength = allReactions.length;
|
|
||||||
if (++iterations === MAX_REACTION_ITERATIONS) {
|
|
||||||
// tslint:disable-next-line
|
|
||||||
console.error(
|
|
||||||
`Reaction doesn't converge to a stable state after ${MAX_REACTION_ITERATIONS} iterations.` +
|
|
||||||
` Probably there is a cycle in the reactive function: ${allReactions[0]}`,
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
for (; flushIndex < pendingLength; flushIndex++) {
|
|
||||||
allReactions[flushIndex].scheduled = false;
|
|
||||||
allReactions[flushIndex].run();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
flushIndex = 0;
|
|
||||||
flushWaiting = false;
|
|
||||||
allReactions.length = 0;
|
|
||||||
globalState.isRunningReactions = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearReactions() {
|
|
||||||
const { pendingReactions } = globalState;
|
|
||||||
let i = pendingReactions.length;
|
|
||||||
while (i--) {
|
|
||||||
pendingReactions[i].sleep();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Disposer {
|
|
||||||
(): void;
|
|
||||||
name?: string;
|
|
||||||
$obx: Reaction;
|
|
||||||
}
|
|
||||||
export interface AutorunOptions {
|
|
||||||
throttle?: number;
|
|
||||||
sync?: boolean;
|
|
||||||
level?: number;
|
|
||||||
name?: string;
|
|
||||||
runFirstNow?: boolean;
|
|
||||||
}
|
|
||||||
export interface RunContext {
|
|
||||||
dispose: Disposer;
|
|
||||||
firstRun: boolean;
|
|
||||||
}
|
|
||||||
export type Action = (this: RunContext, context: RunContext) => any;
|
|
||||||
|
|
||||||
export function autorun(action: Action, options: number | true | AutorunOptions = {}): Disposer {
|
|
||||||
if (typeof options === 'number') {
|
|
||||||
options = { throttle: options };
|
|
||||||
} else if (options === true) {
|
|
||||||
options = { sync: true };
|
|
||||||
}
|
|
||||||
const name: string = options.name || (action as any).name || 'Autorun@' + nextId();
|
|
||||||
|
|
||||||
const reaction = new Reaction(
|
|
||||||
name,
|
|
||||||
function(this: Reaction) {
|
|
||||||
this.track(reactionRunner);
|
|
||||||
},
|
|
||||||
options.level || 0,
|
|
||||||
options.throttle || 0,
|
|
||||||
);
|
|
||||||
|
|
||||||
const dispose = () => {
|
|
||||||
reaction.sleep();
|
|
||||||
};
|
|
||||||
|
|
||||||
dispose.$obx = reaction;
|
|
||||||
|
|
||||||
let firstRun = true;
|
|
||||||
function reactionRunner() {
|
|
||||||
const ctx: RunContext = {
|
|
||||||
firstRun,
|
|
||||||
dispose,
|
|
||||||
};
|
|
||||||
action.call(ctx, ctx);
|
|
||||||
firstRun = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.sync || options.runFirstNow) {
|
|
||||||
reaction.runReaction();
|
|
||||||
} else {
|
|
||||||
reaction.schedule();
|
|
||||||
}
|
|
||||||
|
|
||||||
return dispose;
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export const prototypeHasOwnProperty = Object.prototype.hasOwnProperty;
|
|
||||||
|
|
||||||
export function hasOwnProperty(obj: any, key: string | number | symbol): boolean {
|
|
||||||
return obj && prototypeHasOwnProperty.call(obj, key);
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
export * from './shallow-equal';
|
|
||||||
export * from './has-own-property';
|
|
||||||
export * from './throttle';
|
|
||||||
export * from './next-id';
|
|
||||||
export * from './is-primitive';
|
|
||||||
export * from './invariant';
|
|
||||||
export * from './splitPath';
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export function invariant(check: any, message: string, thing?: any) {
|
|
||||||
if (!check) {
|
|
||||||
throw new Error('[recore] Invariant failed: ' + message + (thing ? ` in '${thing}'` : ''));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export function isPrimitive(obj: any): boolean {
|
|
||||||
// null | undefined
|
|
||||||
if (obj == null) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
const t = typeof obj;
|
|
||||||
return t === 'boolean' || t === 'number' || t === 'string' || t === 'symbol';
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { globalState } from '../ global-state';
|
|
||||||
export function nextId() {
|
|
||||||
return (++globalState.guid).toString(36).toLocaleLowerCase();
|
|
||||||
}
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
import { prototypeHasOwnProperty } from './has-own-property';
|
|
||||||
|
|
||||||
export function shallowEqual(objA: any, objB: any): boolean {
|
|
||||||
if (objA === objB) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const keysA = Object.keys(objA);
|
|
||||||
const keysB = Object.keys(objB);
|
|
||||||
|
|
||||||
if (keysA.length !== keysB.length) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Test for A's keys different from B.
|
|
||||||
const bHasOwnProperty = prototypeHasOwnProperty.bind(objB);
|
|
||||||
for (let i = 0; i < keysA.length; i++) {
|
|
||||||
if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
const RE_PATH = /^([^/]*)(?:\/(.*))?$/;
|
|
||||||
const RE_PATH_REVERSE = /^(?:(.*)\/)?([^/]+)$/;
|
|
||||||
export function splitPath(path: string, reverse = false) {
|
|
||||||
return reverse ? RE_PATH_REVERSE.exec(path) : RE_PATH.exec(path);
|
|
||||||
}
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
const useRAF = typeof requestAnimationFrame === 'function';
|
|
||||||
|
|
||||||
export function throttle(func: Function, wait: number) {
|
|
||||||
let lastArgs: any;
|
|
||||||
let lastThis: any;
|
|
||||||
let result: any;
|
|
||||||
let timerId: number | undefined;
|
|
||||||
let lastCalled: number | undefined;
|
|
||||||
let lastInvoked = 0;
|
|
||||||
|
|
||||||
function invoke(time: number) {
|
|
||||||
const args = lastArgs;
|
|
||||||
const thisArg = lastThis;
|
|
||||||
|
|
||||||
lastArgs = undefined;
|
|
||||||
lastThis = undefined;
|
|
||||||
lastInvoked = time;
|
|
||||||
result = func.apply(thisArg, args);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function startTimer(pendingFunc: any, wait: number): number {
|
|
||||||
if (useRAF) {
|
|
||||||
return requestAnimationFrame(pendingFunc);
|
|
||||||
}
|
|
||||||
return setTimeout(pendingFunc, wait) as any;
|
|
||||||
}
|
|
||||||
|
|
||||||
function leadingEdge(time: number) {
|
|
||||||
lastInvoked = time;
|
|
||||||
timerId = startTimer(timerExpired, wait);
|
|
||||||
return invoke(time);
|
|
||||||
}
|
|
||||||
|
|
||||||
function shouldInvoke(time: number) {
|
|
||||||
const timeSinceLastCalled = time - lastCalled!;
|
|
||||||
const timeSinceLastInvoked = time - lastInvoked;
|
|
||||||
|
|
||||||
return (
|
|
||||||
lastCalled === undefined || timeSinceLastCalled >= wait || timeSinceLastCalled < 0 || timeSinceLastInvoked >= wait
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function remainingWait(time: number) {
|
|
||||||
const timeSinceLastCalled = time - lastCalled!;
|
|
||||||
const timeSinceLastInvoked = time - lastInvoked;
|
|
||||||
|
|
||||||
return Math.min(wait - timeSinceLastCalled, wait - timeSinceLastInvoked);
|
|
||||||
}
|
|
||||||
|
|
||||||
function timerExpired() {
|
|
||||||
const time = Date.now();
|
|
||||||
if (shouldInvoke(time)) {
|
|
||||||
return trailingEdge(time);
|
|
||||||
}
|
|
||||||
|
|
||||||
timerId = startTimer(timerExpired, remainingWait(time));
|
|
||||||
}
|
|
||||||
|
|
||||||
function trailingEdge(time: number) {
|
|
||||||
timerId = undefined;
|
|
||||||
|
|
||||||
if (lastArgs) {
|
|
||||||
return invoke(time);
|
|
||||||
}
|
|
||||||
|
|
||||||
lastArgs = undefined;
|
|
||||||
lastThis = undefined;
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function debounced(this: any, ...args: any[]) {
|
|
||||||
const time = Date.now();
|
|
||||||
const isInvoking = shouldInvoke(time);
|
|
||||||
|
|
||||||
lastArgs = args;
|
|
||||||
lastThis = this;
|
|
||||||
lastCalled = time;
|
|
||||||
|
|
||||||
if (isInvoking) {
|
|
||||||
if (timerId === undefined) {
|
|
||||||
return leadingEdge(lastCalled);
|
|
||||||
}
|
|
||||||
|
|
||||||
timerId = startTimer(timerExpired, wait);
|
|
||||||
return invoke(lastCalled);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (timerId === undefined) {
|
|
||||||
timerId = startTimer(timerExpired, wait);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
return debounced;
|
|
||||||
}
|
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import { Fragment, Component, createElement } from 'rax';
|
import { Fragment, Component, createElement } from 'rax';
|
||||||
// import { observer } from './obx-rax/observer';
|
// import { observer } from './obx-rax/observer';
|
||||||
import RaxEngine from '../../rax-render/src/index';
|
import RaxEngine from '@ali/lowcode-rax-renderer/lib/index';
|
||||||
|
// import RaxEngine from '../../rax-render/lib/index';
|
||||||
import { SimulatorRenderer } from './renderer';
|
import { SimulatorRenderer } from './renderer';
|
||||||
import { host } from './host';
|
import { host } from './host';
|
||||||
|
|
||||||
@ -99,7 +100,6 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
|
|||||||
render() {
|
render() {
|
||||||
const { renderer } = this.props;
|
const { renderer } = this.props;
|
||||||
const { device, designMode } = renderer;
|
const { device, designMode } = renderer;
|
||||||
console.info(renderer.schema);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RaxEngine
|
<RaxEngine
|
||||||
@ -109,7 +109,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
|
|||||||
designMode={renderer.designMode}
|
designMode={renderer.designMode}
|
||||||
suspended={renderer.suspended}
|
suspended={renderer.suspended}
|
||||||
self={renderer.scope}
|
self={renderer.scope}
|
||||||
onCompGetRef={(schema: any, ref: ReactInstance | null) => {
|
onCompGetRef={(schema: any, ref: any) => {
|
||||||
renderer.mountInstance(schema.id, ref);
|
renderer.mountInstance(schema.id, ref);
|
||||||
}}
|
}}
|
||||||
customCreateElement={(Component: any, props: any, children: any) => {
|
customCreateElement={(Component: any, props: any, children: any) => {
|
||||||
@ -123,7 +123,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
|
|||||||
// Object.assign(viewProps, {
|
// Object.assign(viewProps, {
|
||||||
// _componentName: 'Menu',
|
// _componentName: 'Menu',
|
||||||
// className: '_css_pesudo_menu_kbrzyh0f',
|
// className: '_css_pesudo_menu_kbrzyh0f',
|
||||||
// context: { VE: (window as any).VisualEngine },
|
// context: { VE: (window as any).VisualLowCodeRenderer },
|
||||||
// direction: undefined,
|
// direction: undefined,
|
||||||
// events: { ignored: true },
|
// events: { ignored: true },
|
||||||
// fieldId: 'menu_kbrzyh0f',
|
// fieldId: 'menu_kbrzyh0f',
|
||||||
|
|||||||
@ -49,6 +49,10 @@ html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -73,6 +77,10 @@ html.engine-cursor-ew-resize, html.engine-cursor-ew-resize * {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.engine-document {
|
body.engine-document {
|
||||||
|
|||||||
@ -1,16 +1,17 @@
|
|||||||
import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
|
import { BuiltinSimulatorRenderer, NodeInstance, Component } from '@ali/lowcode-designer';
|
||||||
import { shared, render, createElement } from 'rax';
|
import { shared, render as raxRender, createElement } from 'rax';
|
||||||
import DriverUniversal from 'driver-universal';
|
import DriverUniversal from 'driver-universal';
|
||||||
import { computed, obx } from '@recore/obx';
|
import { computed, obx } from '@recore/obx';
|
||||||
import { RootSchema, NpmInfo, ComponentSchema } from '@ali/lowcode-types';
|
import { RootSchema, NpmInfo, ComponentSchema } from '@ali/lowcode-types';
|
||||||
import { Asset, isReactComponent, isESModule, setNativeSelection, cursor, isElement } from '@ali/lowcode-utils';
|
import { Asset, isReactComponent, isESModule, setNativeSelection, cursor, isElement } from '@ali/lowcode-utils';
|
||||||
|
|
||||||
import SimulatorRendererView from './renderer-view';
|
import SimulatorRendererView from './renderer-view';
|
||||||
import RaxEngine from '../../rax-render/src/index';
|
import { raxFindDOMNodes } from './utils/find-dom-nodes';
|
||||||
import { getClientRects } from './utils/get-client-rects';
|
import { getClientRects } from './utils/get-client-rects';
|
||||||
import loader from './utils/loader';
|
import loader from './utils/loader';
|
||||||
|
|
||||||
import Leaf from './builtin-components/Leaf';
|
import Leaf from './builtin-components/leaf';
|
||||||
|
import Slot from './builtin-components/slot';
|
||||||
|
|
||||||
import { host } from './host';
|
import { host } from './host';
|
||||||
import { EventEmitter } from 'events';
|
import { EventEmitter } from 'events';
|
||||||
@ -134,10 +135,6 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
|
|||||||
|
|
||||||
getClosestNodeInstance(from: any, nodeId?: string): NodeInstance<any> | null {
|
getClosestNodeInstance(from: any, nodeId?: string): NodeInstance<any> | null {
|
||||||
const node = getClosestNodeInstance(from, nodeId);
|
const node = getClosestNodeInstance(from, nodeId);
|
||||||
if (node) {
|
|
||||||
node.nodeId = (node as any).props?.componentId;
|
|
||||||
}
|
|
||||||
|
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -192,7 +189,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
findDOMNodes(instance: any): Array<Element | Text> | null {
|
findDOMNodes(instance: any): Array<Element | Text> | null {
|
||||||
return [RaxEngine.findDOMNode(instance)];
|
return [raxFindDOMNodes(instance)];
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -294,7 +291,7 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
|
|||||||
document.documentElement.classList.add('engine-page');
|
document.documentElement.classList.add('engine-page');
|
||||||
document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends
|
document.body.classList.add('engine-document'); // important! Stylesheet.invoke depends
|
||||||
|
|
||||||
render(createElement(SimulatorRendererView, { renderer: this }), document.getElementById('app'), {
|
raxRender(createElement(SimulatorRendererView, { renderer: this }), container, {
|
||||||
driver: DriverUniversal,
|
driver: DriverUniversal,
|
||||||
});
|
});
|
||||||
host.document.setRendererReady(this);
|
host.document.setRendererReady(this);
|
||||||
@ -354,7 +351,7 @@ function findComponent(libraryMap: LibraryMap, componentName: string, npm?: NpmI
|
|||||||
}
|
}
|
||||||
|
|
||||||
const builtinComponents = {
|
const builtinComponents = {
|
||||||
// Slot,
|
Slot,
|
||||||
Leaf,
|
Leaf,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -390,21 +387,28 @@ function getClosestNodeInstance(from: any, specId?: string): NodeInstance<any> |
|
|||||||
}
|
}
|
||||||
|
|
||||||
function matcher(parent: any) {
|
function matcher(parent: any) {
|
||||||
return parent.__isReactiveComponent;
|
return parent.__isReactiveComponent && parent.props.componentId;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNodeInstance(dom: HTMLElement): NodeInstance<any> | null {
|
function getNodeInstance(dom: HTMLElement): NodeInstance<any> | null {
|
||||||
const INTERNAL = '_internal';
|
const INTERNAL = '_internal';
|
||||||
let instance = Instance.get(dom);
|
let instance = Instance.get(dom);
|
||||||
let parent;
|
let node;
|
||||||
while (instance && instance[INTERNAL]) {
|
while (instance && instance[INTERNAL]) {
|
||||||
if (matcher(instance)) {
|
if (matcher(instance)) {
|
||||||
parent = instance;
|
node = instance;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
instance = instance[INTERNAL].__parentInstance;
|
instance = instance[INTERNAL].__parentInstance;
|
||||||
}
|
}
|
||||||
return parent;
|
if (!node) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
nodeId: node.props.componentId,
|
||||||
|
instance: node
|
||||||
|
}
|
||||||
|
// return parent;
|
||||||
// const instance = fiberNode.stateNode;
|
// const instance = fiberNode.stateNode;
|
||||||
// if (instance) {
|
// if (instance) {
|
||||||
// console.log(instance);
|
// console.log(instance);
|
||||||
|
|||||||
13
packages/rax-simulator-renderer/src/utils/find-dom-nodes.ts
Normal file
13
packages/rax-simulator-renderer/src/utils/find-dom-nodes.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { isElement } from '@ali/lowcode-utils';
|
||||||
|
import findDOMNode from 'rax-find-dom-node';
|
||||||
|
// import { isDOMNode } from './is-dom-node';
|
||||||
|
|
||||||
|
export function raxFindDOMNodes(instance: any): Array<Element | Text> | null {
|
||||||
|
if (!instance) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (isElement(instance)) {
|
||||||
|
return [instance];
|
||||||
|
}
|
||||||
|
return findDOMNode(instance);
|
||||||
|
}
|
||||||
4
packages/rax-simulator-renderer/src/utils/is-dom-node.ts
Normal file
4
packages/rax-simulator-renderer/src/utils/is-dom-node.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export function isDOMNode(node: any): node is Element | Text {
|
||||||
|
if (!node) return false;
|
||||||
|
return node.nodeType && (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE);
|
||||||
|
}
|
||||||
@ -39,8 +39,6 @@
|
|||||||
"localforage": "^1.7.3",
|
"localforage": "^1.7.3",
|
||||||
"lodash": "^4.17.11",
|
"lodash": "^4.17.11",
|
||||||
"moment": "^2.24.0",
|
"moment": "^2.24.0",
|
||||||
"rax": "^1.1.1",
|
|
||||||
"rax-find-dom-node": "^1.0.1",
|
|
||||||
"react-is": "^16.10.1",
|
"react-is": "^16.10.1",
|
||||||
"serialize-javascript": "^1.7.0",
|
"serialize-javascript": "^1.7.0",
|
||||||
"socket.io-client": "^2.2.0",
|
"socket.io-client": "^2.2.0",
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
export function isElement(node: any): node is Element {
|
export function isElement(node: any): node is Element {
|
||||||
|
if (!node) return false;
|
||||||
return node.nodeType === Node.ELEMENT_NODE;
|
return node.nodeType === Node.ELEMENT_NODE;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user