无JIRA 支持对组件config依赖资源

packages/fineui/src/core/5.inject.js

@@ -1,4 +1,16 @@
-import { isFunction, isNull, isNotNull, isArray, each, isWidget, extend, init, isEmpty, remove } from "./2.base";
+import {
+    isFunction,
+    isNull,
+    isNotNull,
+    isArray,
+    each,
+    isWidget,
+    extend,
+    init,
+    isEmpty,
+    remove,
+    isString
+} from "./2.base";
 import { OB } from "./3.ob";
 import { Widget } from "./4.widget";
 import { Plugin } from "./6.plugin";
@@ -6,6 +18,7 @@ import { aspect } from "./structure";
 import { Events } from "./constant";
 import { _global } from "./0.foundation";
 import { SystemProvider } from "./system";
+import { loadResources } from "./platform";
 
 const moduleInjection = {}, moduleInjectionMap = {
     components: {},
@@ -46,6 +59,7 @@ export function module(xtype, cls) {
 }
 
 const constantInjection = {};
+
 export function constant(xtype, cls) {
     if (isNotNull(constantInjection[xtype])) {
         _global.console && console.error(`constant: [${xtype}]already registered`);
@@ -57,6 +71,7 @@ export function constant(xtype, cls) {
 }
 
 const modelInjection = {};
+
 export function model(xtype, cls) {
     if (isNotNull(modelInjection[xtype])) {
         _global.console && console.error(`model: [${xtype}] already registered`);
@@ -68,6 +83,7 @@ export function model(xtype, cls) {
 }
 
 const storeInjection = {};
+
 export function store(xtype, cls) {
     if (isNotNull(storeInjection[xtype])) {
         _global.console && console.error(`store: [${xtype}] already registered`);
@@ -79,6 +95,7 @@ export function store(xtype, cls) {
 }
 
 const serviceInjection = {};
+
 export function service(xtype, cls) {
     if ((serviceInjection[xtype])) {
         _global.console && console.error(`service: [${xtype}] already registered`);
@@ -90,6 +107,7 @@ export function service(xtype, cls) {
 }
 
 const providerInjection = {};
+
 export function provider(xtype, cls) {
     if ((providerInjection[xtype])) {
         _global.console && console.error(`provider: [${xtype}] already registered`);
@@ -167,6 +185,50 @@ const runConfigFunction = (type, configFn) => {
     }
 };
 
+/**
+ * 配置组件依赖
+ * @param deps
+ */
+function configWidgetDeps(deps) {
+    each(deps, (key, dep) => {
+        const deps = (isArray(dep) ? dep : [dep]).map(d => {
+            if (isString(d)) {
+                return {
+                    src: d,
+                    async: false
+                };
+            } else {
+                return d;
+            }
+        });
+
+        config(key, props => {
+
+            const asyncLoad = deps.some(dep => dep.async);
+            // 异步加载资源
+            if (asyncLoad && !props._depsLoaded) {
+                return {
+                    type: Widget,
+                    beforeInit: () => {
+                        return loadResources(deps);
+                    },
+                    render: () => {
+                        return {
+                            ...props,
+                            _depsLoaded: true
+                        };
+                    },
+                };
+            }
+
+            // 同步加载资源
+            loadResources(deps);
+
+            return props;
+        });
+    });
+}
+
 export function config(type, configFn, opt) {
     if (isFunction(type)) {
         opt = configFn;
@@ -196,6 +258,10 @@ export function config(type, configFn, opt) {
         opt,
     });
 
+    if (opt.deps) {
+        configWidgetDeps(opt.deps);
+    }
+
     if (opt.immediately) {
         return runConfigFunction(type, configFn);
     }
@@ -207,6 +273,7 @@ export function getReference(type, fn) {
 
 const actions = {};
 const globalAction = [];
+
 export function action(type, actionFn) {
     if (isFunction(type)) {
         globalAction.push(type);
@@ -229,6 +296,7 @@ export function action(type, actionFn) {
 }
 
 const points = {};
+
 export function point(type, action, pointFn, after) {
     if (!points[type]) {
         points[type] = {};
@@ -396,6 +464,7 @@ export const Actions = {
 };
 
 const kv = {};
+
 export function shortcut(xtype, cls) {
     if (isNotNull(kv[xtype])) {
         _global.console && console.error(`widget: [${xtype}] already registered`);

packages/fineui/src/core/platform/web/load.js

@@ -1,6 +1,7 @@
 import $ from "jquery";
 
 const _LOADED = {}; // alex:保存加载过的
+
 function loadReady(src, must) {
     const $scripts = $("head script, body script");
     $.each($scripts, (i, item) => {
@@ -56,3 +57,99 @@ export function $import(src, ext, must) {
         });
     }
 }
+
+/**
+ * 同步加载javascript
+ * @param uri
+ * @returns {boolean}
+ */
+export function syncLoadScript(uri) {
+    if (_LOADED[uri]) {
+        return true;
+    }
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", uri, false);
+    xhr.send(null);
+    if (xhr.status === 200) {
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.text = xhr.responseText;
+        document.head.appendChild(script);
+        _LOADED[uri] = true;
+        return true;
+    }
+    return false;
+}
+
+/**
+ * 默认的异步加载javascript方法
+ * @param uri
+ * @returns {Promise<boolean>|Promise<unknown>}
+ */
+export function loadScript(uri) {
+    if (_LOADED[uri]) {
+        return Promise.resolve(true);
+    }
+    return new Promise(resolve => {
+        const script = document.createElement("script");
+        script.type = "application/javascript";
+        script.src = uri;
+        script.onload = function() {
+            resolve(true);
+        };
+        document.head.appendChild(script);
+        _LOADED[uri] = true;
+    });
+}
+
+/**
+ * 加载css方法,这没同步异步之分,都是同步的
+ * @param uri
+ * @returns {boolean}
+ */
+export function loadStyleSheet(uri) {
+    if (_LOADED[uri]) {
+        return true;
+    }
+    const link = document.createElement("link");
+    link.type = "text/css";
+    link.ref = "stylesheet";
+    link.href = uri;
+    document.head.appendChild(link);
+    _LOADED[uri] = true;
+
+    return true;
+}
+
+
+export function loadResource(opt) {
+    const { src, async = false } = opt;
+    let extension = opt.extension;
+    if (!extension) {
+        const match = src.match(/\.[^.]+$/g);
+        if (match && match.length > 0) {
+            extension = match[0];
+        }
+    }
+    if (extension === ".css") {
+        return loadStyleSheet(src);
+    }
+    if (async) {
+        return loadScript(src);
+    }
+
+    return syncLoadScript(src);
+}
+
+
+export function loadResources(resources) {
+    const asyncLoad = resources.some(resource => resource.async);
+
+    if (asyncLoad) {
+        return Promise.all(resources.map(resource => loadResource(resource)));
+    }
+
+    return resources.forEach(resource => {
+        loadResource(resource);
+    });
+}