update examples

examples/history/.babelrc

@@ -12,7 +12,7 @@
         [
             "@babel/plugin-transform-runtime",
             {
-                "corejs": 2,
+                "corejs": 3,
                 "helpers": true,
                 "regenerator": true,
                 "useESModules": false

examples/history/index.ts

@@ -70,7 +70,7 @@ const getConfig = () => config;
     }[historyType];
 
     const app = new RAPIOP({
-        config: getConfig,
+        getConfig,
         history,
         mountDOM
     });

examples/history/package.json

@@ -14,6 +14,7 @@
   "author": "ZxBing0066",
   "license": "MIT",
   "dependencies": {
+    "@rapiop/mod": "^0.0.8",
     "@rapiop/rapiop": "latest",
     "axios": "^0.19.0",
     "core-js": "^3.6.5",

examples/hooks/package.json

@@ -14,6 +14,7 @@
   "author": "ZxBing0066",
   "license": "MIT",
   "dependencies": {
+    "@rapiop/mod": "^0.0.8",
     "@rapiop/rapiop": "latest",
     "axios": "^0.19.0",
     "history": "^4.9.0"

examples/plugins/dist/error-demo.js

@@ -1,15 +1,21 @@
-window.app.loadDependences(['error-dependence']).then(() => {
-    window.app.register(
-        'error-demo',
-        mountDOM => {
-            const content = document.createElement('div');
-            content.innerText = 'this is my error demo';
-            mountDOM.appendChild(content);
-            console.log('error demo mounted');
-        },
-        mountDOM => {
-            mountDOM.innerHTML = null;
-            console.log('error demo unmounted');
-        }
-    );
-});
+window.mod
+    .import(['error-dependence'])
+    .then(() => {
+        window.app.register(
+            'error-demo',
+            mountDOM => {
+                const content = document.createElement('div');
+                content.innerText = 'this is my error demo';
+                mountDOM.appendChild(content);
+                console.log('error demo mounted');
+            },
+            mountDOM => {
+                mountDOM.innerHTML = null;
+                console.log('error demo unmounted');
+            }
+        );
+    })
+    .catch(e => {
+        console.log(e);
+        alert('error');
+    });

examples/plugins/dist/frame.js

@@ -1,4 +1,5 @@
-window.app.loadDependences(['lodash'], () => {
+window.mod.import(['lodash']).then(() => {
+    console.log(123);
     const app = window.app;
     const _ = window._;
     app.registerFrame(() => {

examples/plugins/dist/iframe-demo.js

@@ -1,6 +1,4 @@
-window.app.loadDependences(['React', 'ReactDOM'], () => {
-    const React = window.React;
-    const ReactDOM = window.ReactDOM;
+window.mod.import(['react', 'react-dom']).then(([React, ReactDOM]) => {
     window.app.register(
         'iframe-demo',
         mountDOM => {

examples/plugins/dist/react-demo.js

@@ -1,6 +1,4 @@
-window.app.loadDependences(['React', 'ReactDOM'], () => {
-    const React = window.React;
-    const ReactDOM = window.ReactDOM;
+window.mod.import(['react', 'react-dom']).then(([React, ReactDOM]) => {
     window.app.register(
         'react-demo',
         mountDOM => {

examples/plugins/dist/test-demo.js

@@ -1,4 +1,4 @@
-window.app.loadDependences(['test'], () => {
+window.mod.import(['test.js']).then(() => {
     window.app.register(
         'test-demo',
         mountDOM => {

examples/plugins/index.ts

@@ -2,8 +2,9 @@ import _ from 'lodash';
 import { createBrowserHistory } from 'history';
 import RAPIOP from '@rapiop/rapiop';
 import FramePlugin from '@rapiop/rapiop/lib/plugins/frame';
-import DependencePlugin from '@rapiop/rapiop/lib/plugins/dependence';
 import IframePlugin from '@rapiop/rapiop/lib/plugins/iframe';
+import mod from '@rapiop/mod';
+import '@rapiop/mod/lib/resolver/amd';
 
 const config = {
     demo: {
@@ -43,32 +44,27 @@ const config = {
     }
 };
 const dependenceMap = {
-    React: { files: ['https://unpkg.com/[email protected]/umd/react.production.min.js'] },
-    ReactDOM: { files: ['https://unpkg.com/[email protected]/umd/react-dom.production.min.js'], dependences: ['React'] },
-    lodash: { files: ['https://unpkg.com/[email protected]/lodash.min.js'] },
-    test: { files: ['/test.js'], dependences: ['React', 'ReactDOM'] },
-    'error-dependence': { files: ['https://error.js'] }
+    react: { js: ['https://unpkg.com/[email protected]/umd/react.production.min.js'], type: 'amd' },
+    'react-dom': {
+        js: ['https://unpkg.com/[email protected]/umd/react-dom.production.min.js'],
+        dep: ['react'],
+        type: 'amd'
+    },
+    lodash: { js: ['https://unpkg.com/[email protected]/lodash.min.js'], type: 'amd' },
+    'error-dependence': { js: ['https://error.js'] }
 };
 
 function getConfig() {
     return config;
 }
+mod.config({ modules: dependenceMap });
+const isIframe = window.top != window;
 
 const history = createBrowserHistory();
 const app = new RAPIOP({
     config: getConfig,
     history,
-    plugins: [
-        new IframePlugin(),
-        new FramePlugin(),
-        new DependencePlugin({
-            getDependenceMap: () => Promise.resolve(dependenceMap),
-            onError: (e: Error) => {
-                alert(`load dependence error`);
-                console.error(e);
-            }
-        })
-    ],
+    plugins: [...(isIframe ? [new IframePlugin()] : []), new FramePlugin()],
     onError: (e: Error) => {
         console.error(e);
         alert(`error`);
@@ -121,3 +117,4 @@ app.getConfig = () => config;
 app.history = history;
 
 (window as any).app = app;
+(window as any).mod = mod;

examples/plugins/package.json

@@ -14,6 +14,7 @@
   "author": "ZxBing0066",
   "license": "MIT",
   "dependencies": {
+    "@rapiop/mod": "^0.0.8",
     "@rapiop/rapiop": "latest",
     "axios": "^0.19.0",
     "history": "^4.9.0"

examples/simple/package.json

@@ -14,6 +14,7 @@
   "author": "ZxBing0066",
   "license": "MIT",
   "dependencies": {
+    "@rapiop/mod": "^0.0.8",
     "@rapiop/rapiop": "latest",
     "axios": "^0.19.0",
     "history": "^4.9.0"