Skip to content

Commit 697841c

Browse files
aceHubertaceHubert
committed
feat(module-loader): module-loader install options change
affects: @vue-async/module-loader move router & store from UseOptions to root Vue instance
1 parent 7c17928 commit 697841c

File tree

17 files changed

+1240
-71
lines changed

17 files changed

+1240
-71
lines changed

‎packages/module-loader/dev/App.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Playground from './Playground';
2+
import DynamicComponent from './DynamicComponent';
3+
4+
export default Vue.extend({
5+
name: 'App',
6+
created() {
7+
this.$dynamicComponent.add(DynamicComponent, 'dynamic');
8+
},
9+
render(h) {
10+
return h('div', { domProps: { id: 'app' } }, [h(Playground)]);
11+
},
12+
});

‎packages/module-loader/dev/DynamicComponent.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default Vue.extend({
2+
name: 'DynamicComponent',
3+
render(h) {
4+
return h('h1', { style: { color: 'red' } }, 'DynamicComponent');
5+
},
6+
});

‎packages/module-loader/dev/Playground.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default Vue.extend({
2+
name: 'Playground',
3+
computed: Vuex.mapState('dynamicComponent', { dynamicComponents: 'dynamic' }),
4+
render(h) {
5+
const children = Object.values(this.dynamicComponents || {}).map((component) => h(component));
6+
return h('div', { staticClass: 'playground' }, [h('h3', 'PLAYGROUND'), ...children]);
7+
},
8+
});

‎packages/module-loader/dev/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
8+
<title>Dev Serve</title>
9+
</head>
10+
11+
<body>
12+
<noscript>
13+
<strong>We're sorry but this site doesn't work properly without JavaScript enabled.
14+
Please enable it to continue.</strong>
15+
</noscript>
16+
<div id="app"></div>
17+
<!-- built files will be auto injected -->
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.3/vuex.min.js"></script>
21+
<script src="/static/utils.min.js"></script>
22+
<script src="/index.js"></script>
23+
</body>
24+
25+
</html>

‎packages/module-loader/dev/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Vue from 'vue';
2+
import router from './router';
3+
import store from './store';
4+
import ModuleLoader from '@vue-async/module-loader';
5+
import App from './app';
6+
7+
const moduleLoader = new ModuleLoader({});
8+
9+
const vm = new Vue({
10+
data: () => ({ isLoaded: document.readyState === 'complete' }),
11+
router,
12+
store,
13+
moduleLoader,
14+
render(h) {
15+
return this.isLoaded ? h(App) : undefined;
16+
},
17+
}).$mount('#app');
18+
19+
// Prevent layout jump while waiting for styles
20+
vm.isLoaded ||
21+
window.addEventListener('load', () => {
22+
vm.isLoaded = true;
23+
});

‎packages/module-loader/dev/router.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* router
3+
*/
4+
const component1 = {
5+
template: `<div class="title">Page 1</div>`,
6+
};
7+
const notfound = {
8+
template: `<div class="title">Not Found</div>`,
9+
};
10+
11+
const router = new VueRouter({
12+
routes: [
13+
{
14+
path: '/page1',
15+
name: 'Page 1',
16+
component: component1,
17+
},
18+
{ path: '*', component: notfound },
19+
],
20+
});
21+
22+
export default router;

0 commit comments

Comments
 (0)