Update
This commit is contained in:
parent
f76e15c320
commit
4391338adf
|
@ -0,0 +1,3 @@
|
|||
# Vue Pages Router
|
||||
|
||||
Unsafe component to load dynamic components using vue-sfc-compiler.
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,16 +0,0 @@
|
|||
Vue.component('raith-test1', {
|
||||
template: `<div><p>{{ yolol }}</p></div>`,
|
||||
methods: {},
|
||||
data() {
|
||||
return {
|
||||
yolol: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
API.pages().then(resp => {
|
||||
this.yolol = Object.values(resp.data)[0]
|
||||
}).catch(err => {
|
||||
this.yolol = err.response.statusText
|
||||
})
|
||||
}
|
||||
})
|
File diff suppressed because one or more lines are too long
|
@ -1,16 +0,0 @@
|
|||
Vue.component('raith-test2', {
|
||||
template: `<div><p>{{ yolol }}</p></div>`,
|
||||
methods: {},
|
||||
data() {
|
||||
return {
|
||||
yolol: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
API.pages().then(resp => {
|
||||
this.yolol = resp.data
|
||||
}).catch(err => {
|
||||
this.yolol = err.response.statusText
|
||||
})
|
||||
}
|
||||
})
|
|
@ -2,5 +2,5 @@
|
|||
// BROWSER COMPONENT ENTRY FILE
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
import Component from './src/__FILE__';
|
||||
Vue.component(Component.name, Component);
|
||||
import Component from './src/__FILE__'
|
||||
Vue.component((Component.options || Component).name, Component)
|
File diff suppressed because it is too large
Load Diff
|
@ -1,16 +1,16 @@
|
|||
{
|
||||
"name": "vue-browser-component",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"description": "A VueJS CLI template for compiling standalone components from .vue files",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "webpack --env.file",
|
||||
"serve": "webpack -d --watch --env.file",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build:dev": "webpack -d --env.file",
|
||||
"watch": "webpack -d --watch --env.file"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/RonnieSan/browser-components.git"
|
||||
"url": "git+https://git.wadza.fr/me/vue-sfc-compiler.git"
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
|
@ -18,39 +18,47 @@
|
|||
"browser",
|
||||
"component"
|
||||
],
|
||||
"author": "RonnieSan",
|
||||
"author": "Shu",
|
||||
"contributors": [
|
||||
"RonnieSan"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/RonnieSan/browser-components/issues"
|
||||
"url": "https://github.com/sheychen290/vue-sfc-compiler/issues"
|
||||
},
|
||||
"homepage": "https://github.com/RonnieSan/browser-components#readme",
|
||||
"homepage": "https://git.wadza.fr/me/vue-sfc-compiler",
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.2.0",
|
||||
"@babel/core": "^7.2.2",
|
||||
"@babel/cli": "^7.4.4",
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
||||
"@babel/preset-env": "^7.2.0",
|
||||
"autoprefixer": "^8.3.0",
|
||||
"babel-loader": "^8.0.5",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"autoprefixer": "^8.6.5",
|
||||
"babel-loader": "^8.0.6",
|
||||
"core-js": "^2.6.9",
|
||||
"css-loader": "^0.28.11",
|
||||
"file-loader": "^1.1.11",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"less": "^3.0.2",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.0",
|
||||
"sass-loader": "^7.0.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue-loader": "^15.4.2",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.5.22",
|
||||
"webpack": "^4.6.0",
|
||||
"webpack-cli": "^3.2.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.3",
|
||||
"pug": "^2.0.3",
|
||||
"pug-plain-loader": "^1.0.0"
|
||||
"pug-plain-loader": "^1.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"ts-loader": "^6.0.3",
|
||||
"typescript": "^3.5.2",
|
||||
"url-loader": "^1.1.2",
|
||||
"vue-loader": "^15.7.0",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"webpack": "^4.34.0",
|
||||
"webpack-cli": "^3.3.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.22"
|
||||
"vue": "^2.6.10",
|
||||
"vue-class-component": "^7.1.0",
|
||||
"vue-property-decorator": "^8.2.1"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
|
@ -61,9 +69,5 @@
|
|||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
"browserslist": [
|
||||
"last 2 versions",
|
||||
"ie >= 11"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,5 @@ p(style="color: red") Can't load module
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rp-page-error'
|
||||
}
|
||||
export default { }
|
||||
</script>
|
|
@ -4,7 +4,5 @@ p Loading...
|
|||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rp-page-loader'
|
||||
}
|
||||
export default { }
|
||||
</script>
|
|
@ -1,33 +1,24 @@
|
|||
<template lang="pug">
|
||||
div
|
||||
#pages-list
|
||||
p(v-if="pages.error" style="color: orangered") {{ pages.error }}
|
||||
div(v-else-if="pages.data")
|
||||
.pages
|
||||
.pages-list
|
||||
slot(v-if="pages.error" name="error") {{ pages.error }}
|
||||
slot(v-else-if="pages.data" name="list")
|
||||
template(v-for="(page, id) in pages.data")
|
||||
button(v-if="activePage != id" @click="showPage(id)") {{ page.name }}
|
||||
p(v-else) {{ page.name }}
|
||||
main-loader(v-else)
|
||||
#active-page
|
||||
slot(v-else name="loader") Loading...
|
||||
.active-page
|
||||
div(v-if="activePage")
|
||||
keep-alive
|
||||
div(:is="activeComponent")
|
||||
p Hello world
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainLoader from './rp-main-loader.vue'
|
||||
import PageLoader from './rp-page-loader.vue'
|
||||
import PageError from './rp-page-error.vue'
|
||||
|
||||
import API from 'API'
|
||||
|
||||
const PAGE_PREFIX = 'raith-'
|
||||
import PageLoader from './components/loader.vue'
|
||||
import PageError from './components/error.vue'
|
||||
|
||||
export default {
|
||||
name : 'rp-pages',
|
||||
components: {
|
||||
'main-loader': MainLoader
|
||||
},
|
||||
name: 'pages-router',
|
||||
data() {
|
||||
return {
|
||||
pages: {
|
||||
|
@ -36,10 +27,43 @@ export default {
|
|||
},
|
||||
activePage: null
|
||||
}
|
||||
},
|
||||
},
|
||||
props: {
|
||||
loader: {
|
||||
type: Object,
|
||||
default() {
|
||||
return PageLoader
|
||||
}
|
||||
},
|
||||
error: {
|
||||
type: Object,
|
||||
default() {
|
||||
return PageError
|
||||
}
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'page-'
|
||||
},
|
||||
retry: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
source: {
|
||||
required: true
|
||||
},
|
||||
timeout: {
|
||||
type: Number,
|
||||
default: 5000
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Router'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
API.pages().then(resp => { // Load pages
|
||||
this.pages.data = resp.data
|
||||
this.source.then(data => { // Load pages
|
||||
this.pages.data = data
|
||||
const loading = () => { // Show page from url or default one
|
||||
this.showPage(window.location.hash.length > 0 ?
|
||||
window.location.hash.substr(2) :
|
||||
|
@ -47,21 +71,21 @@ export default {
|
|||
}
|
||||
this.$nextTick(loading)
|
||||
window.onhashchange = loading
|
||||
}).catch(err => {
|
||||
this.pages.error = err.response.statusText
|
||||
}).catch(error => {
|
||||
this.pages.error = error
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
activeComponent() {
|
||||
return PAGE_PREFIX + this.activePage
|
||||
return this.prefix + this.activePage
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPage(id) {
|
||||
const key = PAGE_PREFIX + id
|
||||
const key = this.prefix + id
|
||||
if (!(id in this.pages.data)) {
|
||||
console.error(`Module not found: ${id}`)
|
||||
this.$options.components[key] = PageError
|
||||
this.$options.components[key] = this.error
|
||||
return;
|
||||
}
|
||||
const mod = this.pages.data[id]
|
||||
|
@ -75,11 +99,18 @@ export default {
|
|||
const load = () => loaded() ?
|
||||
resolve(Vue.options.components[key]) : reject()
|
||||
|
||||
if (loaded() || document.querySelector('script[src="' + mod.src + '"]')) { //allready loaded
|
||||
if (loaded() || (!this.retry && document.querySelector(`script[src="${mod.src}"]`))) { // Allready loaded
|
||||
load()
|
||||
return;
|
||||
}
|
||||
|
||||
const remover = fn => e => {
|
||||
if(this.retry) {
|
||||
document.head.removeChild(e.target)
|
||||
}
|
||||
fn()
|
||||
}
|
||||
|
||||
const el = document.createElement('script')
|
||||
|
||||
el.type = 'text/javascript'
|
||||
|
@ -88,20 +119,18 @@ export default {
|
|||
if (mod.integrity != null)
|
||||
el.integrity = mod.integrity
|
||||
|
||||
el.addEventListener('load', load)
|
||||
el.addEventListener('error', reject)
|
||||
el.addEventListener('abort', reject)
|
||||
el.addEventListener('load', remover(load))
|
||||
el.addEventListener('error', remover(reject))
|
||||
el.addEventListener('abort', remover(reject))
|
||||
|
||||
//setTimeout(() => {
|
||||
document.head.appendChild(el)
|
||||
//}, 2000)
|
||||
document.head.appendChild(el)
|
||||
}),
|
||||
loading: PageLoader,
|
||||
error: PageError,
|
||||
timeout: 5000
|
||||
loading: this.loader,
|
||||
error: this.error,
|
||||
timeout: this.timeout
|
||||
})
|
||||
}
|
||||
document.title = `Raith - ${mod.name}`
|
||||
document.title = `${this.title} - ${mod.name}`
|
||||
window.history.pushState({}, document.title, "/#/" + id)
|
||||
this.activePage = id
|
||||
}
|
|
@ -1,10 +0,0 @@
|
|||
<template lang="pug">
|
||||
p Loading...
|
||||
//TODO: Cool loader
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'rp-main-loader'
|
||||
}
|
||||
</script>
|
|
@ -4,18 +4,14 @@ p {{ yolol }}
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'raith-test1', //Really important
|
||||
name: 'page-test1', //Really important
|
||||
data() {
|
||||
return {
|
||||
yolol: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
API.pages().then(resp => {
|
||||
this.yolol = Object.values(resp.data)[0]
|
||||
}).catch(err => {
|
||||
this.yolol = err.response.statusText
|
||||
})
|
||||
this.yolol = 'hello'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -2,20 +2,16 @@
|
|||
p {{ yolo }}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'raith-test2', //Really important
|
||||
data() {
|
||||
return {
|
||||
yolo: null
|
||||
}
|
||||
},
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import Component from 'vue-class-component'
|
||||
|
||||
@Component({ name: 'page-test2' }) //Really important
|
||||
export default class Test2 extends Vue {
|
||||
yolo = 'loading'
|
||||
|
||||
created() {
|
||||
API.pages().then(resp => {
|
||||
this.yolo = resp.data
|
||||
}).catch(err => {
|
||||
this.yolo = err.response.statusText
|
||||
})
|
||||
this.yolo = 'holla'
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"strict": true,
|
||||
"module": "es2015",
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
}
|
||||
}
|
|
@ -0,0 +1,4 @@
|
|||
declare module "*.vue" {
|
||||
import Vue from "vue";
|
||||
export default Vue;
|
||||
}
|
|
@ -6,10 +6,10 @@
|
|||
// webpack --env.file="./path/to/file" --relative to the src folder
|
||||
|
||||
// Import dependencies
|
||||
const path = require('path');
|
||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const path = require('path');
|
||||
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const StringReplacePlugin = require('string-replace-webpack-plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
function resolve(dir) {
|
||||
return path.resolve(__dirname, dir);
|
||||
|
@ -21,31 +21,29 @@ module.exports = (env) => {
|
|||
const filepath = path.dirname(env.file);
|
||||
|
||||
return {
|
||||
mode : 'production',
|
||||
entry : {
|
||||
[filename] : './entry.js'
|
||||
mode: 'production',
|
||||
entry: {
|
||||
[filename]: './entry.js'
|
||||
},
|
||||
output : {
|
||||
filename : '[name].js',
|
||||
output: {
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, 'dist', filepath)
|
||||
},
|
||||
resolve : {
|
||||
extensions : ['.vue', '.js'],
|
||||
alias : {
|
||||
'vue$' : resolve('node_modules/vue/dist/vue.min.js'),
|
||||
'@' : resolve('src')
|
||||
resolve: {
|
||||
extensions: ['.ts', '.vue', '.js'],
|
||||
alias: {
|
||||
'vue$': resolve('node_modules/vue/dist/vue.min.js'),
|
||||
'@': resolve('src')
|
||||
}
|
||||
},
|
||||
externals : {
|
||||
vue : 'Vue',
|
||||
lodash: 'lodash',
|
||||
API: 'API'
|
||||
externals: {
|
||||
vue: 'Vue'
|
||||
},
|
||||
module : {
|
||||
rules : [
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test : /entry\.js$/,
|
||||
loader : StringReplacePlugin.replace({
|
||||
test: /entry\.js$/,
|
||||
loader: StringReplacePlugin.replace({
|
||||
replacements: [
|
||||
{
|
||||
pattern: /__FILE__/ig,
|
||||
|
@ -53,16 +51,25 @@ module.exports = (env) => {
|
|||
return env.file;
|
||||
}
|
||||
}
|
||||
]})
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
test : /\.vue$/,
|
||||
loader : 'vue-loader'
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader'
|
||||
},
|
||||
{
|
||||
test : /\.js$/,
|
||||
loader : 'babel-loader',
|
||||
include : [
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
exclude: /node_modules/,
|
||||
options: {
|
||||
appendTsSuffixTo: [/\.vue$/],
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
include: [
|
||||
resolve('src')
|
||||
],
|
||||
exclude: file => (
|
||||
|
@ -71,37 +78,37 @@ module.exports = (env) => {
|
|||
)
|
||||
},
|
||||
{
|
||||
test : /\.css$/,
|
||||
use : [
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test : /\.less$/,
|
||||
use : [
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader',
|
||||
'less-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test : /\.scss$/,
|
||||
use : [
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test : /\.sass$/,
|
||||
use : [
|
||||
test: /\.sass$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader : 'sass-loader',
|
||||
options : {
|
||||
indentedSyntax : true
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
indentedSyntax: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
@ -112,7 +119,14 @@ module.exports = (env) => {
|
|||
}
|
||||
]
|
||||
},
|
||||
plugins : [
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: {
|
||||
|
|
16
index.html
16
index.html
|
@ -4,20 +4,24 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Raith</title>
|
||||
<title>Vue Pages Router</title>
|
||||
<script src="lib/axios.js"></script>
|
||||
<script src="lib/API.js"></script>
|
||||
<script src="lib/vue.full.js"></script>
|
||||
<script src="compiler/dist/core/rp-pages.js"></script>
|
||||
<script src="compiler/dist/core/pages-router.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<noscript>Raith client need javascript enabled to work correctly. Sorry</noscript>
|
||||
<rp-pages></rp-pages>
|
||||
<noscript>Needs javascript enabled to work correctly. Sorry</noscript>
|
||||
<pages-router :source="pages"></pages-router>
|
||||
</div>
|
||||
<script>
|
||||
var app = new Vue({
|
||||
el: '#app'
|
||||
el: '#app',
|
||||
data: {
|
||||
pages: axios.get('pages.json')
|
||||
.then(res => res.data)
|
||||
.catch(err => err.response.statusText)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
|
14
lib/API.js
14
lib/API.js
|
@ -1,14 +0,0 @@
|
|||
const _api = axios.create({
|
||||
baseURL: './',
|
||||
timeout: 1000/*,
|
||||
headers: {
|
||||
'X-Custom-Header': 'foobar'
|
||||
}*/
|
||||
})
|
||||
|
||||
const API = {
|
||||
http: _api,
|
||||
pages() {
|
||||
return _api.get('pages.json')
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue