refactor(builder): replace vue-cli by parcel (wip)

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+.cache
 /dist
 
 # local env files

babel.config.js

@@ -1,5 +1 @@
-module.exports = {
+module.exports = {}
-  presets: [
-    '@vue/app'
-  ]
-}

package.json

@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "parcel src/index.html",
-    "build": "vue-cli-service build",
+    "build": "parcel build src/index.html"
-    "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "gif-writer": "^0.9.3",
@@ -14,15 +13,15 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.5.0",
+    "@vue/component-compiler-utils": "^2.6.0",
-    "@vue/cli-plugin-eslint": "^3.5.0",
+    "autoprefixer": "^9.4.10",
-    "@vue/cli-plugin-pwa": "^3.5.0",
+    "parcel-bundler": "^1.12.0",
-    "@vue/cli-service": "^3.5.0",
+    "parcel-plugin-static-files-copy": "^2.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "vue-hot-reload-api": "^2.3.3",
-    "babel-eslint": "^10.0.1",
+    "vue-template-compiler": "^2.6.8"
-    "eslint": "^5.8.0",
+  },
-    "eslint-plugin-vue": "^5.0.0",
+  "staticFiles": {
-    "vue-template-compiler": "^2.5.21",
+    "staticPath": "public",
-    "worker-loader": "^2.0.0"
+    "watcherGlob": "**"
   }
 }

src/App.vue

@@ -8,9 +8,9 @@
 
 <script>
 
-import welcomeScreen from '@/views/welcome'
+import welcomeScreen from '/views/welcome'
-import captureScreen from '@/views/capture'
+import captureScreen from '/views/capture'
-import downloadScreen from '@/views/download'
+import downloadScreen from '/views/download'
 
 import { mapState } from 'vuex'
 
@@ -30,4 +30,7 @@ export default {
 }
 </script>
 
-<style src="@/assets/css/style.css" lang="css"></style>
+
+<style lang="css">
+@import '/assets/css/style.css';
+</style>

src/assets/css/style.css

@@ -2,60 +2,60 @@
 /* == config */
 /* ----------------------------------------------------------- */
 
-@import "colors.css";
+@import "/assets/css/colors.css";
-@import "config.css";
+@import "/assets/css/config.css";
 
 /* ----------------------------------------------------------- */
 /* == core */
 /* ----------------------------------------------------------- */
 
-@import "1-core/_00-reset.css";
+@import "/assets/css/1-core/_00-reset.css";
-@import "1-core/_01-typography.css";
+@import "/assets/css/1-core/_01-typography.css";
 
 /* ----------------------------------------------------------- */
 /* == components */
 /* ----------------------------------------------------------- */
 
-@import "2-components/_buttons.css";
+@import "/assets/css/2-components/_buttons.css";
 
 /* ----------------------------------------------------------- */
 /* == base */
 /* ----------------------------------------------------------- */
 
-@import "3-base/_01-fonts.css";
+@import "/assets/css/3-base/_01-fonts.css";
-@import "3-base/_02-main.css";
+@import "/assets/css/3-base/_02-main.css";
-@import "3-base/_03-layout.css";
+@import "/assets/css/3-base/_03-layout.css";
 
 /* ----------------------------------------------------------- */
 /* == modules */
 /* ----------------------------------------------------------- */
 
-@import "4-modules/options.css";
+@import "/assets/css/4-modules/options.css";
-@import "4-modules/preview.css";
+@import "/assets/css/4-modules/preview.css";
-@import "4-modules/progress-bar.css";
+@import "/assets/css/4-modules/progress-bar.css";
-@import "4-modules/encoding.css";
+@import "/assets/css/4-modules/encoding.css";
 
 /* ----------------------------------------------------------- */
 /* == screens */
 /* ----------------------------------------------------------- */
 
-@import "5-screens/welcome.css";
+@import "/assets/css/5-screens/welcome.css";
-@import "5-screens/capture.css";
+@import "/assets/css/5-screens/capture.css";
-@import "5-screens/download.css";
+@import "/assets/css/5-screens/download.css";
 
 /* ----------------------------------------------------------- */
 /* == helpers */
 /* ----------------------------------------------------------- */
 
-@import "6-helpers/_alignment.css";
+@import "/assets/css/6-helpers/_alignment.css";
-@import "6-helpers/_spacing.css";
+@import "/assets/css/6-helpers/_spacing.css";
-@import "6-helpers/_width.css";
+@import "/assets/css/6-helpers/_width.css";
 
 /* ----------------------------------------------------------- */
 /* == rwd */
 /* ----------------------------------------------------------- */
 
-@import "7-rwd/_rwd-xsmall.css";
+@import "/assets/css/7-rwd/_rwd-xsmall.css";
-@import "7-rwd/_rwd-small.css";
+@import "/assets/css/7-rwd/_rwd-small.css";
-@import "7-rwd/_rwd-medium.css";
+@import "/assets/css/7-rwd/_rwd-medium.css";
-@import "7-rwd/_rwd-large.css";
+@import "/assets/css/7-rwd/_rwd-large.css";

src/components/capture-options.vue

@@ -12,7 +12,7 @@
 <script>
 import { mapState } from 'vuex'
 
-import iconSwitch from '@/icons/ico-switch'
+import iconSwitch from '/icons/ico-switch'
 
 export default {
   name: 'captureOptions',

src/index.html

@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
+    <link rel="manifest" href="/manifest.webmanifest">
     <title>Souvenir ∴ Capture few seconds as a gif for souvenir</title>
   </head>
   <body>
@@ -12,6 +13,6 @@
       <strong>We're sorry but souvenir doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script src="/main.js"></script>
   </body>
 </html>

src/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import App from './App.vue'
+import App from '/App.vue'
-import store from './store'
+import store from '/store'
-import './registerServiceWorker'
+import '/registerServiceWorker'
 
 Vue.config.productionTip = false
 

src/manifest.webmanifest

@@ -3,17 +3,17 @@
   "short_name": "Souvenir",
   "icons": [
     {
-      "src": "./img/icons/android-chrome-192x192.png",
+      "src": "/img/icons/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "./img/icons/android-chrome-512x512.png",
+      "src": "/img/icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": "/index.html",
   "display": "standalone",
   "background_color": "#212045",
   "theme_color": "#8420a7"

src/services/capture.js

@@ -1,7 +1,7 @@
 import {
   makeRectangle,
   crop
-} from '@/services/rectangle.js'
+} from '/services/rectangle.js'
 
 const FRAMES_PER_SECOND = 10
 const WIDTH = 200

src/services/encode.js

@@ -1,10 +1,10 @@
-import EncodeWorker from '@/services/encode.worker.js'
+// import EncodeWorker from './encode.worker.js'
 
 const PALETTE_SIZE = 255
 
 export function encode ({ imageDataList, imageWidth, imageHeight, delayTime }) {
   return new Promise((resolve, reject) => {
-    const worker = new EncodeWorker()
+    const worker = new Worker('/services/encode.worker.js')
 
     worker.onerror = error => reject(error)
 
@@ -13,7 +13,7 @@ export function encode ({ imageDataList, imageWidth, imageHeight, delayTime }) {
 
       switch (type) {
         default:
-          reject(new Error(`Unexpected EncodeWorker message with type ${type}`))
+          reject(new Error(`Unexpected worker message with type ${type}`))
           break
 
         case 'progress':

src/store.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-import { capture } from '@/services/capture.js'
+import { capture } from '/services/capture.js'
-import { encode } from '@/services/encode.js'
+import { encode } from '/services/encode.js'
 
 Vue.use(Vuex)
 

src/views/capture.vue

@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import captureOptions from '@/components/capture-options'
+import captureOptions from '/components/capture-options'
-import captureProgress from '@/components/capture-progress'
+import captureProgress from '/components/capture-progress'
-import encodingOverlay from '@/components/encoding'
+import encodingOverlay from '/components/encoding'
 
 import { mapState } from 'vuex'