Alan Colon 7 жил өмнө
parent
commit
de16332486
14 өөрчлөгдсөн 762 нэмэгдсэн , 228 устгасан
  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


+ 7 - 0
app/index.html

@@ -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

@@ -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

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

+ 3 - 0
app/service-worker.js

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

+ 0 - 39
lib/app.js

@@ -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

@@ -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

@@ -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

@@ -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

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

+ 0 - 41
src/client.js

@@ -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

@@ -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

@@ -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)
 }
+

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 510 - 102
yarn.lock


Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно