Startseite Erkunden Hilfe
Registrieren Anmelden
alancnet
/
rss-unlimited
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

Vue

Alan Colon vor 7 Jahren
Ursprung
f7789080ca
Commit
de16332486
14 geänderte Dateien mit 762 neuen und 228 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. BIN
      app/assets/placeholder_icon.png
  2. 7 0
      app/index.html
  3. 23 0
      app/main.js
  4. 13 0
      app/main.vue
  5. 3 0
      app/service-worker.js
  6. 0 39
      lib/app.js
  7. 0 22
      lib/server.js
  8. 27 5
      package.json
  9. 115 0
      server/app.js
  10. 6 0
      server/server.js
  11. 0 41
      src/client.js
  12. 0 11
      src/index.js
  13. 58 8
      webpack.config.js
  14. 510 102
      yarn.lock

BIN
app/assets/placeholder_icon.png
Datei anzeigen


+ 7 - 0
app/index.html
Datei anzeigen 

@@ -0,0 +1,7 @@
 
+<html>
 
+<head>
 
+  <title>CHANGEME</title>
 
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
 
+</head>
 
+<body></body>
 
+</html>

+ 23 - 0
app/main.js
Datei anzeigen 

@@ -0,0 +1,23 @@
 
+import Vue from 'vue'
 
+import Main from './main.vue'
 
+
 
+const serviceWorkerFile = require('file-loader!./service-worker.js')
 
+
 
+if ('serviceWorker' in navigator) {
 
+  navigator.serviceWorker.getRegistrations()
 
+    .then(regs => Promise.all(regs.map(reg => reg.unregister())))
 
+    .then(() => navigator.serviceWorker.register(serviceWorkerFile))
 
+  
+  .then(function(registration) {
 
+    console.log('Registration successful, scope is:', registration.scope);
 
+  })
 
+  .catch(function(error) {
 
+    console.log('Service worker registration failed, error:', error);
 
+  });
 
+}
 
+
 
+const component = new Vue({
 
+  el: document.body,
 
+  components: { Main },
 
+  render: ce => ce('Main')
 
+})

+ 13 - 0
app/main.vue
Datei anzeigen 

@@ -0,0 +1,13 @@
 
+<template>
 
+  <h1>CHANGEME</h1>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+
 
+}
 
+</script>
 
+
 
+<style>
 
+
 
+</style>

+ 3 - 0
app/service-worker.js
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+self.addEventListener('install', event => {})
 
+self.addEventListener('activate', event => {})
 
+self.addEventListener('fetch', event => {})

+ 0 - 39
lib/app.js
Datei anzeigen 

@@ -1,39 +0,0 @@
 
-const http = require('http')
 
-const express = require('express')
 
-const morgan = require('morgan')
 
-const bodyParser = require('body-parser')
 
-const WebSocket = require('ws')
 
-const EventEmitter = require('events')
 
-const chalk = require('chalk')
 
-const config = require('../config')
 
-
 
-const app = module.exports = express()
 
-
 
-app.use(morgan('combined'))
 
-app.use(bodyParser.json())
 
-app.use(express.static('dist'))
 
-
 
-app.ws = new EventEmitter()
 
-app.listen = (port = config.port || (app.settings.env === 'production' ? 80 : 3000)) => new Promise((resolve, reject) => {
 
-  app.server = http.createServer(app)
 
-  app.server.once('error', (err) => {
 
-    if (err.message.includes('EADDRINUSE') && app.settings.env === 'development' && port < 3999) {
 
-      console.warn(err.message)
 
-      resolve(app.listen(port + 1))
 
-    } else {
 
-      reject(err)
 
-    }
 
-  })
 
-  app.server.listen(port, () => {
 
-    app.wss = new WebSocket.Server({ server: app.server })
 
-    app.wss.on('connection', (...args) => app.ws.emit('connection', ...args))
 
-    app.wss.on('message', (...args) => app.ws.emit('message', ...args))
 
-    app.wss.on('close', (...args) => app.ws.emit('close', ...args))
 
-    app.wss.on('error', (...args) => app.ws.emit('error', ...args))
 
-    app.server.port = app.server.address().port
 
-    console.log(`Server running at ${chalk.underline(chalk.blueBright(`http://localhost:${app.server.port}`))}`)
 
-    resolve()
 
-  })
 
-})
 
-
 
-module.exports = app

+ 0 - 22
lib/server.js
Datei anzeigen 

@@ -1,22 +0,0 @@
 
-const app = require('./app')
 
-
 
-/* TODO: Add handlers */
 
-
 
-const connections = []
 
-
 
-app.ws.on('connection', ws => {
 
-  connections.push(ws)
 
-  ws.on('close', () => {
 
-    connections.splice(connections.indexOf(ws), 1)
 
-  })
 
-  ws.on('message', message => {
 
-    console.log(message)
 
-    /* TODO: Add logic */
 
-  })
 
-  ws.send('Hello Client')
 
-})
 
-
 
-app.listen().catch((err) => {
 
-  console.log(err.toString())
 
-  process.exit(1)
 
-})

+ 27 - 5
package.json
Datei anzeigen 

@@ -4,19 +4,22 @@
 
   "description": "",
 
   "main": "index.js",
 
   "scripts": {
 
-    "build": "webpack",
 
+    "build": "webpack --mode=production",
 
     "build:dev": "webpack --watch",
 
-    "server": "node lib/server.js",
 
-    "server:dev": "nodemon --watch lib lib/server.js",
 
+    "server": "node server/server.js --mode=production",
 
+    "server:dev": "nodemon --watch server server/server.js --mode=development",
 
     "test": "mocha",
 
     "test:dev": "mocha --watch",
 
-    "dev": "npm-run-all -p build:dev server:dev test:dev"
 
+    "pwa:build": "nodemon --verbose --ignore dist --exec webpack",
 
+    "pwa:dev": "npm-run-all -p server build:dev",
 
+    "dev": "npm-run-all -p server:dev test:dev"
 
   },
 
   "author": "",
 
   "license": "ISC",
 
   "devDependencies": {
 
     "chai": "^4.2.0",
 
     "css-loader": "^2.1.0",
 
+    "file-loader": "^3.0.1",
 
     "html-loader": "^0.5.5",
 
     "html-webpack-plugin": "^3.2.0",
 
     "http-server": "^0.11.1",
 
@@ -28,13 +31,32 @@
 
     "webpack": "^4.28.2",
 
     "webpack-cli": "^3.1.2",
 
     "webpack-dev-server": "^3.1.14",
 
-    "webpack-livereload-plugin": "^2.2.0"
 
+    "webpack-livereload-plugin": "^2.2.0",
 
+    "webpack-pwa-manifest": "^4.0.0",
 
+    "workbox-webpack-plugin": "^3.6.3"
 
   },
 
   "dependencies": {
 
+    "@babel/core": "^7.4.4",
 
+    "angular": "^1.7.7",
 
+    "angular-animate": "^1.7.7",
 
+    "angular-aria": "^1.7.7",
 
+    "angular-material": "^1.1.12",
 
+    "angular-ui-router": "^1.0.20",
 
+    "babel-loader": "^8.0.5",
 
     "body-parser": "^1.18.3",
 
     "chalk": "^2.4.2",
 
+    "es6-string-html-template": "^1.0.2",
 
     "express": "^4.16.4",
 
+    "express-ws": "^4.0.0",
 
+    "file-loader": "^3.0.1",
 
+    "material-icons": "^0.3.0",
 
     "morgan": "^1.9.1",
 
+    "text-loader": "^0.0.1",
 
+    "typeface-roboto": "^0.0.54",
 
+    "vue": "^2.6.10",
 
+    "vue-loader": "^15.7.0",
 
+    "vue-template-compiler": "^2.6.10",
 
+    "webpack-hot-middleware": "^2.24.4",
 
     "ws": "^6.1.2"
 
   }
 
 }

+ 115 - 0
server/app.js
Datei anzeigen 

@@ -0,0 +1,115 @@
 
+const http = require('http')
 
+const express = require('express')
 
+const morgan = require('morgan')
 
+const bodyParser = require('body-parser')
 
+const chalk = require('chalk')
 
+const config = require('../config')
 
+const expressWs = require('express-ws')
 
+const yargs = require('yargs')
 
+
 
+const mode = yargs.argv.mode || 'development'
 
+
 
+const app = express()
 
+app.server = http.createServer(app)
 
+expressWs(app, app.server)
 
+
 
+if (mode === 'development') {
 
+  const webpack = require('webpack')
 
+  const webpackDevMiddleware = require('webpack-dev-middleware')
 
+  const webpackHotMiddleware = require('webpack-hot-middleware')
 
+  const webpackConfig = require('../webpack.config')
 
+  
+  const compiler = webpack(webpackConfig)
 
+  const devMiddleware = webpackDevMiddleware(compiler, {
 
+    noInfo: false,
 
+    publicPath: ''
 
+  })
 
+
 
+  app.use((req, res, next) => {
 
+    res.set('X-Accel-Buffering', 'no')
 
+    next()
 
+  })
 
+  app.use(devMiddleware)
 
+  app.use('/', devMiddleware)
 
+
 
+  const hotMiddleware = webpackHotMiddleware(compiler, {
 
+    path: '/__webpack__/__webpack_hmr'
 
+  })
 
+  app.use(hotMiddleware)
 
+
 
+}
 
+
 
+app.use(morgan('combined'))
 
+app.use(bodyParser.json())
 
+app.use(express.static('dist'))
 
+
 
+app.listen = (port = config.port || (app.settings.env === 'production' ? 80 : 3000)) => new Promise((resolve, reject) => {
 
+  app.server.once('error', (err) => {
 
+    if (err.message.includes('EADDRINUSE') && app.settings.env === 'development' && port < 3999) {
 
+      console.warn(err.message)
 
+      resolve(app.listen(port + 1))
 
+    } else {
 
+      reject(err)
 
+    }
 
+  })
 
+  app.server.listen(port, () => {
 
+    const host = [process.env.HOSTNAME || process.env.COMPUTERNAME || 'localhost', process.env.USERDNSDOMAIN].filter(x => x).join('.').toLowerCase()
 
+    const url = `http://${host}:${app.server.address().port}`
 
+    console.log(`Server running at ${chalk.underline(chalk.blueBright(url))}`)
 
+  })
 
+})
 
+
 
+const userApp = express.Router()
 
+
 
+// Handle unhandled rejection in route handlers:
 
+const appProxy = new Proxy(userApp, {
 
+  get: (_, prop) => {
 
+    if (prop[0] == '_') return userApp[prop]
 
+    const orig = userApp[prop]
 
+    if (orig instanceof Function) {
 
+      return (...args) => {
 
+        const newArgs = args.map(fn => {
 
+          if (fn instanceof Function) {
 
+            return Object.assign((...args) => {
 
+              const ret = fn(...args)
 
+              if (ret && ret.catch) {
 
+                ret.catch(err => {
 
+                  const url = args[0] && args[0].url
 
+                  console.warn(chalk.yellow(`Unhandled Promise Rejection (${url}): ${err}`))
 
+                  try {
 
+                    args[1].status(500).send(err.toString())
 
+                  } catch (err) {
 
+                    console.warn(chalk.yellow(`Unable to send error response`))
 
+                  }
 
+                })
 
+              }
 
+              return ret
 
+            }, fn)
 
+          } else {
 
+            return fn
 
+          }
 
+        })
 
+        return userApp[prop](...newArgs)
 
+      }
 
+    } else {
 
+      return orig
 
+    }
 
+  }
 
+})
 
+
 
+appProxy.start = () => {
 
+  app.listen().catch(err => {
 
+    console.log(chalk.red(err))
 
+    process.exit(1)
 
+  })
 
+}
 
+
 
+app.use(userApp)
 
+userApp._userApp = userApp
 
+userApp._app = app
 
+
 
+module.exports = {
 
+  app: appProxy
 
+}
 
+
 
+module.exports = app

+ 6 - 0
server/server.js
Datei anzeigen 

@@ -0,0 +1,6 @@
 
+const app = require('./app')
 
+
 
+app.listen().catch((err) => {
 
+  console.log(err.toString())
 
+  process.exit(1)
 
+})

+ 0 - 41
src/client.js
Datei anzeigen 

@@ -1,41 +0,0 @@
 
-const client = new EventTarget()
 
-const delay = 1000
 
-const protocol = `ws${location.protocol.substr(4)}`
 
-const path = location.pathname.split('/').slice(0, -1).join('/')
 
-const url = `${protocol}//${location.host}${path}`
 
-
 
-let _connect = null
 
-
 
-const connect = () => {
 
-  if (_connect == null) {
 
-    _connect = new Promise(resolve => {
 
-      const ws = new WebSocket(url)
 
-      window.ws = ws
 
-      let connected = false
 
-      const retry = () => resolve(new Promise(resolve => setTimeout(resolve, delay)).then(connect))
 
-      const dispatch = evt => client.dispatchEvent(new evt.constructor(evt.type, evt))
 
-      ws.addEventListener('open', evt => {
 
-        connected = true
 
-        dispatch(evt)
 
-        resolve(ws)
 
-      })
 
-      ws.addEventListener('close', evt => {
 
-        _connect = null
 
-        dispatch(evt)
 
-        retry()
 
-      })
 
-      ws.addEventListener('message', evt => dispatch(evt))
 
-      ws.addEventListener('error', evt => {
 
-        if (!connected) retry()
 
-        dispatch(evt)
 
-      })
 
-    })
 
-  }
 
-  return _connect
 
-}
 
-
 
-const send = message => connect().then(ws => ws.send(message))
 
-
 
-client.connect = connect
 
-client.send = send
 
-module.exports = client

+ 0 - 11
src/index.js
Datei anzeigen 

@@ -1,11 +0,0 @@
 
-const client = require('./client')
 
-
 
-document.addEventListener('DOMContentLoaded', () => {
 
-  client.connect()
 
-  client.addEventListener('open', () => {
 
-    client.send('Hello Server')
 
-  })
 
-  client.addEventListener('message', evt => {
 
-    console.log(evt.data)
 
-  })
 
-})

+ 58 - 8
webpack.config.js
Datei anzeigen 

@@ -1,13 +1,63 @@
 
+const Path = require('path')
 
+const WebpackPwaManifest = require('webpack-pwa-manifest')
 
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
-const LiveReloadPlugin = require('webpack-livereload-plugin')
 
+const webpack = require('webpack')
 
+const yargs = require('yargs')
 
 
+const mode = yargs.argv.mode || 'development'
 
 module.exports = {
 
-  entry: './src/index.js',
 
-  mode: process.env.NODE_ENV || 'development',
 
+  devtool: 'source-map',
 
+  mode: mode,
 
+  entry: {
 
+    main: [
 
+      mode === 'development' && `webpack-hot-middleware/client?path=/__webpack__/__webpack_hmr&timeout=20000`,
 
+      Path.join(__dirname, 'app/main.js')
 
+    ].filter(x => x)
 
+  },
 
+  devServer: {
 
+    hot: mode === 'development'
 
+  },
 
+  module: {
 
+    rules: [
 
+      { test: /\.js$/, loader: 'babel-loader' },
 
+      { test: /\.vue$/, loader: 'vue-loader' },
 
+      {
 
+        test: /\.css$/,
 
+        loader: ['vue-style-loader', 'css-loader']
 
+      },
 
+      {
 
+        test: /\.less$/,
 
+        loader: ['vue-style-loader', 'css-loader', 'less-loader']
 
+      },
 
+      {
 
+        test: /\.(ttf|woff|woff2|svg|eot)$/,
 
+        loader: 'file-loader'
 
+      }
 
+    ]
 
+  },
 
   plugins: [
 
-    new HtmlWebpackPlugin(),
 
-    new LiveReloadPlugin({
 
-      appendScriptTag: true
 
-    })
 
-  ]
 
+    new VueLoaderPlugin(),
 
+    new WebpackPwaManifest({
 
+      name: 'CHANGEME',
 
+      short_name: 'changeme',
 
+      description: 'This is an installable app.',
 
+      background_color: '#ffffff',
 
+      icons: [
 
+        {
 
+          src: Path.resolve('app/assets/placeholder_icon.png'),
 
+          sizes: [96, 128, 192, 256, 384, 512]
 
+        }
 
+      ],
 
+      inject: true,
 
+      orientation: 'omit'
 
+    }),
 
+    new HtmlWebpackPlugin({
 
+      template: Path.join(__dirname, 'app/index.html'),
 
+      inject: true,
 
+      templateParameters: { }
 
+    }),
 
+    mode === 'development' && new webpack.HotModuleReplacementPlugin()
 
+  ].filter(x => x)
 
 }
 
+

Datei-Diff unterdrückt, da er zu groß ist
+ 510 - 102
yarn.lock


Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.