Uses webpack instead of parcel (#438)

2025-12-21 13:23:07 +01:00 · 2020-05-06 15:44:12 -07:00
parent fad25076f7
commit 6ed4dcc86a
21 changed files with 2487 additions and 2443 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,9 +1,8 @@
 {
-  "presets": [["@babel/preset-env", { "modules": false }]],
-  "plugins": [["@babel/plugin-transform-runtime", { "regenerator": true }]],
+  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
-      "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
+      "presets": [["env", { "targets": { "node": "current" } }]]
    }
  }
 }
--- a/.htmlnanorc.js
+++ b/.htmlnanorc.js
@@ -1,3 +0,0 @@
-module.exports = {
-  minifySvg: false,
-};
--- a/4
+++ b/4
@@ -10,16 +10,14 @@ COPY package*.json yarn.lock ./
 RUN yarn install --network-timeout 1000000

 # Copy config files
-COPY .* ./
+COPY .* webpack*.js ./

 # Copy assets to build
 COPY assets ./assets

-
 # Do the build
 RUN yarn build

-
 FROM golang:1.14-alpine AS builder

 RUN apk add --no-cache git ca-certificates
--- a/assets/App.spec.js
+++ b/assets/App.spec.js
@@ -32,11 +32,6 @@ describe("<App />", () => {
    });
  });

-  test("is a Vue instance", async () => {
-    const wrapper = shallowMount(App, { stubs, store, localVue });
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
  test("has right title", async () => {
    const wrapper = shallowMount(App, { stubs, store, localVue });
    await wrapper.vm.$nextTick();
--- a/assets/components/ContainerTitle.vue
+++ b/assets/components/ContainerTitle.vue
@@ -1,4 +1,4 @@
-<template lang="html">
+<template lang="html" functional>
  <div class="name columns is-marginless">
    <span class="column">{{ value }}</span>
    <span class="column is-narrow" v-if="closable">
--- a/assets/components/Icon.vue
+++ b/assets/components/Icon.vue
@@ -1,12 +1,11 @@
-<template>
-  <svg class="icomoon" :class="['icon-' + name]">
-    <use :href="'#icon-' + name"></use>
+<template functional>
+  <svg class="icomoon" :class="['icon-' + props.name]">
+    <use :href="'#icon-' + props.name"></use>
  </svg>
 </template>

 <script>
 export default {
-  functional: true,
  props: {
    name: {
      required: true,
--- a/assets/components/LogEventSource.spec.js
+++ b/assets/components/LogEventSource.spec.js
@@ -55,11 +55,6 @@ describe("<LogEventSource />", () => {
    });
  }

-  test("is a Vue instance", async () => {
-    const wrapper = shallowMount(LogEventSource);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
  test("renders correctly", async () => {
    const wrapper = createLogEventSource();
    expect(wrapper.element).toMatchInlineSnapshot(`
@@ -126,7 +121,7 @@ describe("<LogEventSource />", () => {
    const wrapper = createLogEventSource();
    sources["/api/logs/stream?id=abc"].emitOpen();
    sources["/api/logs/stream?id=abc"].emitMessage({ data: `2019-06-12T10:55:42.459034602Z "This is a message."` });
-    const [message, _] = wrapper.find(LogViewer).vm.messages;
+    const [message, _] = wrapper.findComponent(LogViewer).vm.messages;

    const { key, ...messageWithoutKey } = message;

--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/favicon.svg
+++ b/assets/favicon.svg
@@ -0,0 +1,5 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" rx="6" fill="#222222"/>
+<path d="M82.3248 94.3863H123V104.093H67.8025V95.3506L106.164 44.3736H68.3808V34.5382H121.072V42.9594L82.3248 94.3863Z" fill="#FFDD57"/>
+<path d="M8 107.107L17.5656 14L43.8372 16.7013C51.9339 17.5338 58.9091 20.0604 64.7629 24.2812C70.6166 28.5019 74.8873 34.0893 77.5749 41.0432C80.3052 48.0016 81.2514 55.7674 80.4137 64.3407L79.8027 70.2877C78.9005 79.0698 76.4053 86.5894 72.3173 92.8468C68.2719 99.1084 62.914 103.684 56.2436 106.574C49.6158 109.468 42.1213 110.529 33.7602 109.755L8 107.107ZM28.8005 25.3655L21.3043 98.3288L34.2164 99.6565C43.6767 100.629 51.3299 98.4435 57.1758 93.0993C63.0644 87.7595 66.5671 79.6542 67.684 68.7832L68.2424 63.3477C69.3286 52.7752 67.6788 44.3123 63.293 37.9592C58.9542 31.5678 52.2295 27.8607 43.1188 26.8377L28.8005 25.3655Z" fill="#FFDD57"/>
+</svg>
--- a/assets/index.html
+++ b/assets/index.html
@@ -5,9 +5,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Dozzle</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Gafata" rel="stylesheet" />  
-    <link rel="manifest" href="manifest.webmanifest" />
-    <link href="styles.scss" rel="stylesheet" />
-    <link rel="icon" href="favicon.ico" />
    <script>
      window["BASE_PATH"] = "{{ .Base }}";
      window["VERSION"] = "{{ .Version }}";
@@ -69,6 +66,5 @@
      </defs>
    </svg>
    <div id="app"></div>
-    <script src="main.js"></script>
  </body>
 </html>
--- a/assets/pages/Index.spec.js
+++ b/assets/pages/Index.spec.js
@@ -2,11 +2,6 @@ import { shallowMount } from "@vue/test-utils";
 import Index from "./Index";

 describe("<Index />", () => {
-  test("is a Vue instance", () => {
-    const wrapper = shallowMount(Index);
-    expect(wrapper.isVueInstance()).toBeTruthy();
-  });
-
  test("renders correctly", () => {
    const wrapper = shallowMount(Index);
    expect(wrapper.element).toMatchSnapshot();
--- a/assets/pages/Settings.vue
+++ b/assets/pages/Settings.vue
@@ -46,7 +46,12 @@
            <span class="is-capitalized">{{ size }}</span>
            <span class="icon"><icon name="chevron-down"></icon></span>
          </button>
-          <b-dropdown-item :value="value" aria-role="listitem" v-for="value in ['small', 'medium', 'large']">
+          <b-dropdown-item
+            :value="value"
+            aria-role="listitem"
+            v-for="value in ['small', 'medium', 'large']"
+            :key="value"
+          >
            <div class="media">
              <span class="icon keep-size">
                <icon name="check" v-if="value == size"></icon>
--- a/integration/Dockerfile
+++ b/integration/Dockerfile
@@ -1,6 +1,6 @@
 FROM amir20/docker-alpine-puppeteer:edge

-COPY --chown=pptruser:pptruser package*.json /app/
+COPY --chown=pptruser:pptruser package*.json yarn.lock /app/
 RUN yarn 

 COPY --chown=pptruser:pptruser . /app/
--- a/integration/__image_snapshots__/test-js-home-page-renders-full-page-on-desktop-1-snap.png
+++ b/integration/__image_snapshots__/test-js-home-page-renders-full-page-on-desktop-1-snap.png
--- a/integration/__image_snapshots__/test-js-home-page-renders-ipad-viewport-1-snap.png
+++ b/integration/__image_snapshots__/test-js-home-page-renders-ipad-viewport-1-snap.png
--- a/integration/docker-compose.test.yml
+++ b/integration/docker-compose.test.yml
@@ -11,7 +11,7 @@ services:
  integration:
    build:
      context: .
-    command: npm test
+    command: yarn test
    environment:
      - BASE=http://dozzle:8080/
    depends_on:
--- a/jest.config.js
+++ b/jest.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+  clearMocks: true,
+  moduleFileExtensions: ["js", "json", "vue"],
+  coveragePathIgnorePatterns: ["node_modules"],
+  testPathIgnorePatterns: ["node_modules", "<rootDir>/integration/"],
+  transformIgnorePatterns: ["node_modules"],
+  watchPathIgnorePatterns: ["<rootDir>/node_modules/"],
+  snapshotSerializers: ["jest-serializer-vue"],
+  transform: {
+    ".*\\.vue$": "vue-jest",
+    "^.+\\.js$": "babel-jest",
+  },
+};
--- a/package.json
+++ b/package.json
@@ -5,10 +5,10 @@
 "scripts": {
  "prestart": "npm run clean",
  "start": "concurrently 'npm run watch-server' 'npm run watch-assets'",
-  "watch-assets": "npx parcel watch --no-source-maps --public-url '__BASE__' assets/index.html -d static",
+  "watch-assets": "webpack --mode=development --watch",
  "watch-server": "reflex -c .reflex",
  "prebuild": "npm run clean",
-  "build": "npx parcel build --no-source-maps --public-url '__BASE__' assets/index.html -d static",
+  "build": "yarn webpack --mode=production",
  "clean": "rm -rf static/ a_main-packr.go",
  "release": "release-it",
  "test": "jest",
@@ -28,7 +28,6 @@
  "ansi-to-html": "^0.6.14",
  "buefy": "^0.8.17",
  "bulma": "^0.8.2",
-  "caniuse-lite": "^1.0.30001052",
  "date-fns": "^2.13.0",
  "hotkeys-js": "^3.7.6",
  "lodash.debounce": "^4.0.8",
@@ -47,21 +46,35 @@
  "@vue/test-utils": "^1.0.2",
  "babel-core": "^7.0.0-bridge.0",
  "babel-jest": "^26.0.1",
+  "babel-loader": "^8.1.0",
+  "babel-preset-env": "^1.7.0",
+  "caniuse-lite": "^1.0.30001050",
  "concurrently": "^5.2.0",
+  "css-loader": "^3.5.3",
  "eventsourcemock": "^2.0.0",
+  "html-webpack-plugin": "^4.3.0",
  "husky": "^4.2.5",
  "jest": "^26.0.1",
  "jest-serializer-vue": "^2.0.2",
  "lint-staged": "^10.2.2",
+  "mini-css-extract-plugin": "^0.9.0",
  "mockdate": "^2.0.5",
  "node-fetch": "^2.6.0",
-  "parcel-bundler": "^1.12.4",
+  "postcss-cssnext": "^3.1.0",
+  "postcss-import": "^12.0.1",
+  "postcss-loader": "^3.0.0",
  "prettier": "^2.0.5",
  "release-it": "^13.5.8",
  "sass": "^1.26.5",
+  "sass-loader": "^8.0.2",
  "vue-hot-reload-api": "^2.3.4",
  "vue-jest": "^3.0.5",
-  "vue-template-compiler": "^2.6.11"
+  "vue-loader": "^15.9.2",
+  "vue-style-loader": "^4.1.2",
+  "vue-template-compiler": "^2.6.11",
+  "webpack": "^4.43.0",
+  "webpack-cli": "^3.3.11",
+  "webpack-manifest-plugin": "^2.2.0"
 },
 "husky": {
  "hooks": {
@@ -73,39 +86,8 @@
   "prettier --write"
  ]
 },
- "browserslist": [
-  ">5%"
- ],
- "alias": {
-  "vue": "./node_modules/vue/dist/vue.runtime.esm.js"
- },
 "jest": {
-  "clearMocks": true,
-  "moduleFileExtensions": [
-   "js",
-   "json",
-   "vue"
-  ],
-  "coveragePathIgnorePatterns": [
-   "node_modules"
-  ],
-  "testPathIgnorePatterns": [
-   "node_modules",
-   "<rootDir>/integration/"
-  ],
-  "transformIgnorePatterns": [
-   "node_modules"
-  ],
-  "watchPathIgnorePatterns": [
-   "<rootDir>/node_modules/"
-  ],
-  "snapshotSerializers": [
-   "jest-serializer-vue"
-  ],
-  "transform": {
-   ".*\\.vue$": "vue-jest",
-   ".+\\.js$": "babel-jest"
-  }
+  
 },
 "release-it": {
  "github": {
--- a/routes.go
+++ b/routes.go
@@ -6,7 +6,6 @@ import (
 	"html/template"
 	"net/http"
 	"runtime"
-	"strings"
 	"time"

 	log "github.com/sirupsen/logrus"
@@ -21,7 +20,6 @@ func (h *handler) index(w http.ResponseWriter, req *http.Request) {
 		if err != nil {
 			panic(err)
 		}
-		text = strings.Replace(text, "__BASE__", "{{ .Base }}", -1)
 		tmpl, err := template.New("index.html").Parse(text)
 		if err != nil {
 			panic(err)
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require("path");
+const { VueLoaderPlugin } = require("vue-loader");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  stats: { children: false, entrypoints: false, modules: false },
+  performance: {
+    maxAssetSize: 350000,
+    maxEntrypointSize: 570000,
+  },
+  entry: ["./assets/main.js", "./assets/styles.scss"],
+  output: {
+    path: path.resolve(__dirname, "./static"),
+    filename: "[name].js",
+    publicPath: "{{ .Base }}",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: "vue-loader",
+      },
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            query: {
+              importLoaders: 1,
+            },
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              ident: "postcss",
+              plugins: (loader) => [
+                require("postcss-import")(),
+                require("postcss-cssnext")({
+                  features: {
+                    customProperties: { warnings: false },
+                  },
+                }),
+              ],
+            },
+          },
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin(),
+    new HtmlWebpackPlugin({
+      hash: true,
+      template: "assets/index.ejs",
+      scriptLoading: "defer",
+      favicon: "assets/favicon.svg",
+    }),
+  ],
+  resolve: {
+    alias: {
+      vue$: "vue/dist/vue.runtime.esm.js",
+    },
+    extensions: ["*", ".js", ".vue", ".json"],
+  },
+};
--- a/yarn.lock
+++ b/yarn.lock