Ts components

.dockerignore

@@ -0,0 +1,3 @@
+build
+node_modules
+stats

.swcrc

@@ -3,7 +3,7 @@
     "parser": {
       "syntax": "typescript",
       "tsx": false,
-      "decorators": false,
+      "decorators": true,
       "dynamicImport": true
     },
     "transform": null,

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:16-alpine
+WORKDIR /app
+COPY . .
+ENV DEV_HOST=0.0.0.0
+ENV DEV_PORT=3000
+EXPOSE 3000
+RUN npm install
+CMD ["npm", "run", "dev"]

config/webpack.config.js

@@ -8,7 +8,6 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const { VuetifyLoaderPlugin } = require('vuetify-loader');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeThreePlugin = require('@vxna/optimize-three-webpack-plugin');
 const env = require('../etc/env'); // assume already loaded, checked
 const {
   pathToClientSrc,
@@ -264,7 +263,6 @@ const htmlWebpackOptions = {
 const plugins = [
   new VueLoaderPlugin(),
   new VuetifyLoaderPlugin(),
-  new OptimizeThreePlugin(),
   new webpack.DefinePlugin({ "env": JSON.stringify(clientEnv) }),
 ];
 

package.json

@@ -26,9 +26,8 @@
     "@types/lodash": "^4.14.178",
     "@types/lz-string": "^1.3.34",
     "@types/papaparse": "^5.3.1",
-    "@types/three": "^0.137.0",
+    "@types/three": "0.137.0",
     "@types/uuid": "^8.3.4",
-    "@vxna/optimize-three-webpack-plugin": "^5.1.3",
     "@zxing/library": "^0.17.1",
     "axios": "^0.24.0",
     "copy-webpack-plugin": "^11.0.0",
@@ -52,21 +51,23 @@
     "stream": "^0.0.2",
     "swc-loader": "^0.1.15",
     "terser-webpack-plugin": "^5.2.5",
-    "three": "^0.135.0",
+    "three": "0.137.0",
     "uuid": "^8.3.2",
     "vue": "^2.6.14",
     "vue-advanced-cropper": "^1.9.0",
     "vue-fragment": "^1.5.2",
     "vue-i18n": "^8.26.7",
     "vue-loader": "^15.9.8",
     "vue-markdown-loader": "^2.5.0",
+    "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.3",
     "vue-style-loader": "^4.1.3",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.14",
     "vuetify": "^2.6.1",
     "vuetify-loader": "^1.7.3",
     "vuex": "^3.6.2",
+    "vuex-class": "^0.3.2",
     "webpack": "^5.64.4",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.6.0",

src/App.vue

@@ -10,7 +10,8 @@
   </VApp>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import {
   VApp,
   VMain,
@@ -19,17 +20,15 @@ import {
 import NavigationButton from "./components/positioned/NavigationButton.vue";
 import Banner from "./components/positioned/Banner.vue";
 
-export default {
-  name: "App",
+@Component({
   components: {
     VApp,
     VMain,
     NavigationButton,
     Banner,
   },
-  data: function () {
-    return {};
-  },
+})
+export default class App extends Vue{
 };
 </script>
 

src/components/ACNLQRGenerator.vue

@@ -2,38 +2,36 @@
   <img :src="image" @click="pattClick" />
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import generateACNLQR from "@/libs/ACNLQRGenerator";
 
-export default {
-  name: "ACNLQRGenerator",
-  props: {
-    pattern: {
-      type: String,
-      required: true,
-    },
-  },
-  data: function () {
-    return { image: "" };
-  },
-  watch: {
-    //Whenever pattern changes, draw it!
-    pattern(newData, oldData) {
-      generateACNLQR(newData).then((d) => {
-        this.image = d;
-      });
-    },
-  },
-  mounted: function () {
+@Component
+export default class ACNLQRGenerator extends Vue {
+  @Prop({
+    type: String,
+    required: true,
+  }) pattern!: string;
+
+  image: string = "";
+
+  pattClick() {
+    this.$emit("pattclick", this.pattern);
+  }
+
+  //Whenever pattern changes, draw it!
+  @Watch('pattern')
+  onPatternChange(newData: string) {
+    generateACNLQR(newData).then((d) => {
+      this.image = d;
+    });
+  }
+
+  mounted() {
     generateACNLQR(this.pattern).then((d) => {
       this.image = d;
     });
-  },
-  methods: {
-    pattClick() {
-      this.$emit("pattclick", this.pattern);
-    },
-  },
+  }
 };
 </script>
 

src/components/Banner.vue

@@ -4,15 +4,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Banner",
-  props: {
-    bannerText: String,
-  },
-  data: function () {
-    return {};
-  },
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class Banner extends Vue {
+  @Prop({
+    type: String,
+    required: true,
+  }) bannerText!: string;
 };
 </script>