feat(bus): change the api of ctx

ralliejs · Sep 6, 2021 · 12c4dd8 · 12c4dd8
1 parent b099552
commit 12c4dd8
Show file tree

Hide file tree

Showing 15 changed files with 111 additions and 157 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.5] - 2021-09-06
+### Changed
+- change `ctx.loadJs` to `ctx.loadScript`
+- change `ctx.loadCss` to `ctx.loadLink`
+- change `ctx.fetchJs` to `ctx.fetchScript`
+
 ## [0.3.4] - 2021-09-06
 ### Fixed
 - fix the bug that when loading a script without src attribute, the promise will not resolve
@@ -20,7 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - new Api: touchBus
 ### Changed
 - it's not neccessary any more to specify the bus's name while calling createBus and getBus
-- support to pass a object parameter while calling ctx.loadJs and ctx.loadCss
+- support to pass a object parameter while calling ctx.loadScript and ctx.loadLink
 ## [0.3.0] - 2021-08-18
 ### Changed
 - remove the Bus's property `maxDependencyDepth` and `loadScriptByFetch`, use the new API `bus.config` instead

diff --git a/dist/index.es.js b/dist/index.es.js
@@ -711,19 +711,14 @@ var App = /** @class */ (function () {
     return App;
 }());
 
-var loadJs = function (scriptDeclare) { return __awaiter(void 0, void 0, void 0, function () {
+var loadScript = function (scriptDeclare) { return __awaiter(void 0, void 0, void 0, function () {
     var promise;
     return __generator(this, function (_a) {
         promise = new Promise(function (resolve) {
-            var scriptAttrs = {
-                type: 'text/javascript'
+            var scriptAttrs = typeof scriptDeclare !== 'string' ? scriptDeclare : {
+                type: 'text/javascript',
+                src: scriptDeclare
             };
-            if (typeof scriptDeclare === 'string') {
-                scriptAttrs = __assign(__assign({}, scriptAttrs), { src: scriptDeclare });
-            }
-            else {
-                scriptAttrs = __assign(__assign({}, scriptAttrs), scriptDeclare);
-            }
             var script = document.createElement('script');
             Object.entries(scriptAttrs).forEach(function (_a) {
                 var attr = _a[0], value = _a[1];
@@ -742,25 +737,20 @@ var loadJs = function (scriptDeclare) { return __awaiter(void 0, void 0, void 0,
         return [2 /*return*/, promise];
     });
 }); };
-var loadCss = function (linkDeclare) {
-    var linkAttrs = {
+var loadLink = function (linkDeclare) {
+    var linkAttrs = typeof linkDeclare !== 'string' ? linkDeclare : {
         rel: 'stylesheet',
-        type: 'text/css'
+        type: 'text/css',
+        href: linkDeclare
     };
-    if (typeof linkDeclare === 'string') {
-        linkAttrs = __assign(__assign({}, linkAttrs), { href: linkDeclare });
-    }
-    else {
-        linkAttrs = __assign(__assign({}, linkAttrs), linkDeclare);
-    }
     var link = document.createElement('link');
     Object.entries(linkAttrs).forEach(function (_a) {
         var attr = _a[0], value = _a[1];
         link[attr] = value;
     });
     document.head.appendChild(link);
 };
-var fetchJs = function (src) { return __awaiter(void 0, void 0, void 0, function () {
+var fetchScript = function (src) { return __awaiter(void 0, void 0, void 0, function () {
     var res, code, err_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
@@ -785,9 +775,9 @@ var excuteCode = function (code) {
     fn();
 };
 var loader = {
-    loadJs: loadJs,
-    loadCss: loadCss,
-    fetchJs: fetchJs,
+    loadScript: loadScript,
+    loadLink: loadLink,
+    fetchScript: fetchScript,
     excuteCode: excuteCode
 };
 
@@ -842,9 +832,9 @@ var Bus = /** @class */ (function () {
     Bus.prototype.createContext = function (ctx) {
         var context = {
             name: '',
-            loadJs: loader.loadJs,
-            loadCss: loader.loadCss,
-            fetchJs: loader.fetchJs,
+            loadScript: loader.loadScript,
+            loadLink: loader.loadLink,
+            fetchScript: loader.fetchScript,
             excuteCode: loader.excuteCode,
             conf: this.conf
         };
@@ -865,19 +855,19 @@ var Bus = /** @class */ (function () {
      */
     Bus.prototype.loadResourcesFromAssetsConfig = function (ctx) {
         return __awaiter(this, void 0, void 0, function () {
-            var name, _a, loadJs, _b, loadCss, _c, fetchJs, _d, excuteCode, _e, conf, assets, loadScriptByFetch, _i, _f, asset, src, code;
+            var name, _a, loadScript, _b, loadLink, _c, fetchScript, _d, excuteCode, _e, conf, assets, loadScriptByFetch, _i, _f, asset, src, code;
             return __generator(this, function (_g) {
                 switch (_g.label) {
                     case 0:
-                        name = ctx.name, _a = ctx.loadJs, loadJs = _a === void 0 ? loader.loadJs : _a, _b = ctx.loadCss, loadCss = _b === void 0 ? loader.loadCss : _b, _c = ctx.fetchJs, fetchJs = _c === void 0 ? loader.fetchJs : _c, _d = ctx.excuteCode, excuteCode = _d === void 0 ? loader.excuteCode : _d, _e = ctx.conf, conf = _e === void 0 ? this.conf : _e;
+                        name = ctx.name, _a = ctx.loadScript, loadScript = _a === void 0 ? loader.loadScript : _a, _b = ctx.loadLink, loadLink = _b === void 0 ? loader.loadLink : _b, _c = ctx.fetchScript, fetchScript = _c === void 0 ? loader.fetchScript : _c, _d = ctx.excuteCode, excuteCode = _d === void 0 ? loader.excuteCode : _d, _e = ctx.conf, conf = _e === void 0 ? this.conf : _e;
                         assets = conf.assets, loadScriptByFetch = conf.loadScriptByFetch;
                         if (!assets[name]) return [3 /*break*/, 9];
                         // insert link tag first
                         assets[name].css &&
                             assets[name].css.forEach(function (asset) {
                                 var href = typeof asset === 'string' ? asset : asset.href;
                                 if (/^.+\.css$/.test(href)) {
-                                    loadCss(asset);
+                                    loadLink(asset);
                                 }
                                 else {
                                     console.error(Errors.invalidResource(href));
@@ -892,11 +882,11 @@ var Bus = /** @class */ (function () {
                         src = typeof asset === 'string' ? asset : asset.src;
                         if (!/^.+\.js$/.test(src)) return [3 /*break*/, 6];
                         if (!!loadScriptByFetch) return [3 /*break*/, 3];
-                        return [4 /*yield*/, loadJs(asset)];
+                        return [4 /*yield*/, loadScript(asset)];
                     case 2:
                         _g.sent();
                         return [3 /*break*/, 5];
-                    case 3: return [4 /*yield*/, fetchJs(src)];
+                    case 3: return [4 /*yield*/, fetchScript(src)];
                     case 4:
                         code = _g.sent();
                         code && excuteCode(code);

diff --git a/dist/index.umd.js b/dist/index.umd.js
@@ -717,19 +717,14 @@
         return App;
     }());
 
-    var loadJs = function (scriptDeclare) { return __awaiter(void 0, void 0, void 0, function () {
+    var loadScript = function (scriptDeclare) { return __awaiter(void 0, void 0, void 0, function () {
         var promise;
         return __generator(this, function (_a) {
             promise = new Promise(function (resolve) {
-                var scriptAttrs = {
-                    type: 'text/javascript'
+                var scriptAttrs = typeof scriptDeclare !== 'string' ? scriptDeclare : {
+                    type: 'text/javascript',
+                    src: scriptDeclare
                 };
-                if (typeof scriptDeclare === 'string') {
-                    scriptAttrs = __assign(__assign({}, scriptAttrs), { src: scriptDeclare });
-                }
-                else {
-                    scriptAttrs = __assign(__assign({}, scriptAttrs), scriptDeclare);
-                }
                 var script = document.createElement('script');
                 Object.entries(scriptAttrs).forEach(function (_a) {
                     var attr = _a[0], value = _a[1];
@@ -748,25 +743,20 @@
             return [2 /*return*/, promise];
         });
     }); };
-    var loadCss = function (linkDeclare) {
-        var linkAttrs = {
+    var loadLink = function (linkDeclare) {
+        var linkAttrs = typeof linkDeclare !== 'string' ? linkDeclare : {
             rel: 'stylesheet',
-            type: 'text/css'
+            type: 'text/css',
+            href: linkDeclare
         };
-        if (typeof linkDeclare === 'string') {
-            linkAttrs = __assign(__assign({}, linkAttrs), { href: linkDeclare });
-        }
-        else {
-            linkAttrs = __assign(__assign({}, linkAttrs), linkDeclare);
-        }
         var link = document.createElement('link');
         Object.entries(linkAttrs).forEach(function (_a) {
             var attr = _a[0], value = _a[1];
             link[attr] = value;
         });
         document.head.appendChild(link);
     };
-    var fetchJs = function (src) { return __awaiter(void 0, void 0, void 0, function () {
+    var fetchScript = function (src) { return __awaiter(void 0, void 0, void 0, function () {
         var res, code, err_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -791,9 +781,9 @@
         fn();
     };
     var loader = {
-        loadJs: loadJs,
-        loadCss: loadCss,
-        fetchJs: fetchJs,
+        loadScript: loadScript,
+        loadLink: loadLink,
+        fetchScript: fetchScript,
         excuteCode: excuteCode
     };
 
@@ -848,9 +838,9 @@
         Bus.prototype.createContext = function (ctx) {
             var context = {
                 name: '',
-                loadJs: loader.loadJs,
-                loadCss: loader.loadCss,
-                fetchJs: loader.fetchJs,
+                loadScript: loader.loadScript,
+                loadLink: loader.loadLink,
+                fetchScript: loader.fetchScript,
                 excuteCode: loader.excuteCode,
                 conf: this.conf
             };
@@ -871,19 +861,19 @@
          */
         Bus.prototype.loadResourcesFromAssetsConfig = function (ctx) {
             return __awaiter(this, void 0, void 0, function () {
-                var name, _a, loadJs, _b, loadCss, _c, fetchJs, _d, excuteCode, _e, conf, assets, loadScriptByFetch, _i, _f, asset, src, code;
+                var name, _a, loadScript, _b, loadLink, _c, fetchScript, _d, excuteCode, _e, conf, assets, loadScriptByFetch, _i, _f, asset, src, code;
                 return __generator(this, function (_g) {
                     switch (_g.label) {
                         case 0:
-                            name = ctx.name, _a = ctx.loadJs, loadJs = _a === void 0 ? loader.loadJs : _a, _b = ctx.loadCss, loadCss = _b === void 0 ? loader.loadCss : _b, _c = ctx.fetchJs, fetchJs = _c === void 0 ? loader.fetchJs : _c, _d = ctx.excuteCode, excuteCode = _d === void 0 ? loader.excuteCode : _d, _e = ctx.conf, conf = _e === void 0 ? this.conf : _e;
+                            name = ctx.name, _a = ctx.loadScript, loadScript = _a === void 0 ? loader.loadScript : _a, _b = ctx.loadLink, loadLink = _b === void 0 ? loader.loadLink : _b, _c = ctx.fetchScript, fetchScript = _c === void 0 ? loader.fetchScript : _c, _d = ctx.excuteCode, excuteCode = _d === void 0 ? loader.excuteCode : _d, _e = ctx.conf, conf = _e === void 0 ? this.conf : _e;
                             assets = conf.assets, loadScriptByFetch = conf.loadScriptByFetch;
                             if (!assets[name]) return [3 /*break*/, 9];
                             // insert link tag first
                             assets[name].css &&
                                 assets[name].css.forEach(function (asset) {
                                     var href = typeof asset === 'string' ? asset : asset.href;
                                     if (/^.+\.css$/.test(href)) {
-                                        loadCss(asset);
+                                        loadLink(asset);
                                     }
                                     else {
                                         console.error(Errors.invalidResource(href));
@@ -898,11 +888,11 @@
                             src = typeof asset === 'string' ? asset : asset.src;
                             if (!/^.+\.js$/.test(src)) return [3 /*break*/, 6];
                             if (!!loadScriptByFetch) return [3 /*break*/, 3];
-                            return [4 /*yield*/, loadJs(asset)];
+                            return [4 /*yield*/, loadScript(asset)];
                         case 2:
                             _g.sent();
                             return [3 /*break*/, 5];
-                        case 3: return [4 /*yield*/, fetchJs(src)];
+                        case 3: return [4 /*yield*/, fetchScript(src)];
                         case 4:
                             code = _g.sent();
                             code && excuteCode(code);

diff --git a/dist/lib/loader.d.ts b/dist/lib/loader.d.ts
@@ -1,12 +1,12 @@
 import { ScriptType, LinkType } from './types';
-export declare const loadJs: (scriptDeclare: ScriptType) => Promise<void>;
-export declare const loadCss: (linkDeclare: LinkType) => void;
-export declare const fetchJs: (src: string) => Promise<string>;
+export declare const loadScript: (scriptDeclare: ScriptType) => Promise<void>;
+export declare const loadLink: (linkDeclare: LinkType) => void;
+export declare const fetchScript: (src: string) => Promise<string>;
 export declare const excuteCode: (code: string) => void;
 declare const _default: {
-    loadJs: (scriptDeclare: ScriptType) => Promise<void>;
-    loadCss: (linkDeclare: LinkType) => void;
-    fetchJs: (src: string) => Promise<string>;
+    loadScript: (scriptDeclare: ScriptType) => Promise<void>;
+    loadLink: (linkDeclare: LinkType) => void;
+    fetchScript: (src: string) => Promise<string>;
     excuteCode: (code: string) => void;
 };
 export default _default;
diff --git a/dist/lib/types.d.ts b/dist/lib/types.d.ts
@@ -1,12 +1,6 @@
 export declare type CallbackType = (...args: any[]) => any;
-export declare type ScriptType = {
-    src?: string;
-    [attr: string]: any;
-} | string;
-export declare type LinkType = {
-    href?: string;
-    [attr: string]: any;
-} | string;
+export declare type ScriptType = Partial<HTMLScriptElement> | string;
+export declare type LinkType = Partial<HTMLLinkElement> | string;
 export declare type AssetsConfigType = Record<string, {
     js?: ScriptType[];
     css?: LinkType[];
@@ -19,9 +13,9 @@ export declare type ConfType = {
 };
 export declare type ContextType = {
     name: string;
-    loadJs: (script: ScriptType) => Promise<void>;
-    loadCss: (link: LinkType) => void;
-    fetchJs: (script: ScriptType) => Promise<string>;
+    loadScript: (script: ScriptType) => Promise<void>;
+    loadLink: (link: LinkType) => void;
+    fetchScript: (script: ScriptType) => Promise<string>;
     excuteCode: (code: string) => void;
     conf: ConfType;
     [key: string]: any;

diff --git a/docs/README.md b/docs/README.md
@@ -767,7 +767,7 @@ bus.use(async (ctx, next) => {
 });
 ```
 
-中间件中的上下文类型定义详见[ContextType](#类型声明)。洋葱圈中的核心中间件是内置的，它会在`ctx.conf.assets`中查找app的资源，如果`ctx.conf.loadScriptByFetch`为true，则通过`ctx.fetchJs和ctx.excuteCode`加载并执行js代码，否则通过`ctx.loadJs`插入script。
+中间件中的上下文类型定义详见[ContextType](#类型声明)。洋葱圈中的核心中间件是内置的，它会在`ctx.conf.assets`中查找app的资源，如果`ctx.conf.loadScriptByFetch`为true，则通过`ctx.fetchScript和ctx.excuteCode`加载并执行js代码，否则通过`ctx.loadScript`插入script。
 
 通过在中间件上做文章，你可以实现很多强大的功能。
 
@@ -776,8 +776,8 @@ bus.use(async (ctx, next) => {
 ```js
 bus.use(async(ctx, next) => {
   if (ctx.repo) {
-    await ctx.loadJs(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.js`);
-    await ctx.loadCss(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.css`);
+    await ctx.loadScript(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.js`);
+    await ctx.loadLink(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.css`);
   } else {
     await next();
   }
@@ -880,9 +880,9 @@ type CustomCtxType = {
 
 type ContextType = {
   name: string;  // 要加载的app的名字
-  loadJs: (src: string) => Promise<void>; // 插入script加载并执行js资源
-  loadCss: (src: string) => void; // 插入css样式资源
-  fetchJs: (src: string) => Promise<string>; // 通过fetch的方式加载代码文本
+  loadScript: (src: string) => Promise<void>; // 插入script加载并执行js资源
+  loadLink: (src: string) => void; // 插入css样式资源
+  fetchScript: (src: string) => Promise<string>; // 通过fetch的方式加载代码文本
   excuteCode: (code: string) => void; // 执行代码文本
   conf:  ConfType; // 通过bus.config配置的对象
   [key: string]: any // 自定义context

diff --git a/docs/en/README.md b/docs/en/README.md
@@ -767,7 +767,7 @@ bus.use(async (ctx, next) => {
 });
 ```
 
-For the type definition of context in middleware, see [ContextType](#Type). The core middleware in the onion ring is built-in. It will find app resources in `ctx.conf.assets`. If `ctx.conf.loadscriptbyfetch` is true, JS code will be loaded and executed through `ctx.fetchjs` and `ctx.excutecode`. Otherwise, script will be inserted through `ctx.loadJs`.
+For the type definition of context in middleware, see [ContextType](#Type). The core middleware in the onion ring is built-in. It will find app resources in `ctx.conf.assets`. If `ctx.conf.loadscriptbyfetch` is true, JS code will be loaded and executed through `ctx.fetchScript` and `ctx.excutecode`. Otherwise, script will be inserted through `ctx.loadScript`.
 
 By writing middlewares, you can achieve many powerful functions
 
@@ -776,8 +776,8 @@ For example, if we want to use the free CDN service [jsdelivr](https://www.jsdel
 ```js
 bus.use(async(ctx, next) => {
   if (ctx.repo) {
-    await ctx.loadJs(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.js`);
-    await ctx.loadCss(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.css`);
+    await ctx.loadScript(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.js`);
+    await ctx.loadLink(`https://cdn.jsdelivr.net/gh/${ctx.repo}/dist/main.css`);
   } else {
     await next();
   }
@@ -879,9 +879,9 @@ type CustomCtxType = {
 
 type ContextType = {
   name: string;  // the name of the app to load
-  loadJs: (src: string) => Promise<void>; // Insert script to load and execute JS code
-  loadCss: (src: string) => void; // Insert CSS style resource
-  fetchJs: (src: string) => Promise<string>; // Load code text by fetch
+  loadScript: (src: string) => Promise<void>; // Insert script to load and execute JS code
+  loadLink: (src: string) => void; // Insert CSS style resource
+  fetchScript: (src: string) => Promise<string>; // Load code text by fetch
   excuteCode: (code: string) => void; // Execute code text
   conf:  ConfType; // Objects configured through bus.config
   [key: string]: any // custom context

diff --git a/examples/host-enviroment/dist/main.js b/examples/host-enviroment/dist/main.js
diff --git a/examples/host-enviroment/dist/main.js.map b/examples/host-enviroment/dist/main.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "obvious-core",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "a  progressive micro front framework",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",