Move more towards composition API, fix Docker builds

.dockerignore

@@ -2,3 +2,4 @@ Dockerfile
 node_modules
 .git
 .github
+.yarn/cache

Dockerfile

@@ -9,6 +9,9 @@ FROM node:${NODE_VERSION}-alpine@sha256:469ee26d9e00547ea91202a34ff2542f984c2c60
 
 # DEVELOPMENT
 FROM node-builder AS development
+
+RUN apk add git
+
 # Create app directory
 WORKDIR /app
 # NOTE: Using project files from mounted volumes
@@ -21,22 +24,29 @@ CMD yarn install && yarn dev
 
 # DEPENDENCIES (production)
 FROM node-builder AS dependencies
+RUN apk add git
+
 # Create app directory
 WORKDIR /app
 
 # Copy dependency management files
-COPY .yarnrc.yml package.json yarn.lock ./
+# Ignore yarn.lock for now because it breaks with bootstrap-vue
+COPY .yarnrc.yml package.json ./
 COPY .yarn/releases/yarn-3.2.0.cjs /app/.yarn/releases/yarn-3.2.0.cjs
 # Install dependencies
 RUN yarn install
 
 
 # BUILD (production)
 FROM dependencies AS builder
+
+WORKDIR /app
+
 # Copy project files and folders to the current working directory (i.e. 'app' folder)
 COPY . .
+
 # Build app for production
-RUN yarn build
+RUN ./node_modules/.bin/vite build
 
 
 # PRODUCTION

src/components/ConnectWallet/ConnectionDetails.vue

@@ -27,34 +27,23 @@
   </card-widget>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
+<script lang="ts" setup>
+import {PropType} from 'vue';
+
 import useBitcoinStore from '../../store/bitcoin';
 import CardWidget from '../CardWidget.vue';
 
-export default defineComponent({
-  components: {
-    CardWidget,
-  },
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    requires: {
-      type: String,
-      default: '', //electrum, bitcoin-core, lnd, or empty if no specific protocol required
-    },
-  },
-  setup() {
-    const bitcoinStore = useBitcoinStore();
-    return {bitcoinStore};
+defineProps({
+  name: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {};
+  requires: {
+    type: String as PropType<'' | 'electrum' | 'bitcoind' | 'lnd'>,
+    default: '',
   },
-  methods: {},
 });
+const bitcoinStore = useBitcoinStore();
 </script>
 
 <style lang="scss" scoped></style>

src/components/ConnectWallet/Step.vue

@@ -3,9 +3,3 @@
     <slot></slot>
   </li>
 </template>
-
-<script lang="ts">
-import {defineComponent} from 'vue';
-
-export default defineComponent({});
-</script>

src/components/ConnectWallet/StepList.vue

@@ -3,9 +3,3 @@
     <slot></slot>
   </ol>
 </template>
-
-<script lang="ts">
-import {defineComponent} from 'vue';
-
-export default defineComponent({});
-</script>

src/components/ConnectWallet/Wallets/BitBoxApp.vue

@@ -50,29 +50,19 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import StepList from '../StepList.vue';
 import Step from '../Step.vue';
-import TorSetup from '../TorSetup.vue';
 import InputCopy from '../../Utility/InputCopy.vue';
+import TorSetup from '../TorSetup.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    StepList,
-    Step,
-    InputCopy,
-    TorSetup,
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/BitcoinCoreRPC.vue

@@ -67,25 +67,17 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import InputCopy from '../../Utility/InputCopy.vue';
 import QrCode from '../../Utility/QrCode.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    InputCopy,
-    QrCode,
-  },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/BlockstreamGreen.vue

@@ -54,27 +54,18 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import StepList from '../StepList.vue';
 import Step from '../Step.vue';
 import QrCode from '../../Utility/QrCode.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    StepList,
-    Step,
-    QrCode,
-  },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/BlueWallet.vue

@@ -54,27 +54,18 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import StepList from '../StepList.vue';
 import Step from '../Step.vue';
 import QrCode from '../../Utility/QrCode.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    StepList,
-    Step,
-    QrCode,
-  },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/ElectrumAndroid.vue

@@ -43,27 +43,18 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import StepList from '../StepList.vue';
 import Step from '../Step.vue';
 import InputCopy from '../../Utility/InputCopy.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    StepList,
-    Step,
-    InputCopy,
-  },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/ElectrumDesktop.vue

@@ -43,29 +43,19 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import StepList from '../StepList.vue';
 import Step from '../Step.vue';
-import TorSetup from '../TorSetup.vue';
 import InputCopy from '../../Utility/InputCopy.vue';
+import TorSetup from '../TorSetup.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    StepList,
-    Step,
-    InputCopy,
-    TorSetup,
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/ElectrumServer.vue

@@ -47,25 +47,17 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import InputCopy from '../../Utility/InputCopy.vue';
 import QrCode from '../../Utility/QrCode.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    InputCopy,
-    QrCode,
-  },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>

src/components/ConnectWallet/Wallets/FullyNoded.vue

@@ -55,29 +55,19 @@
   </connection-details>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue';
-
+<script lang="ts" setup>
 import ConnectionDetails from '../ConnectionDetails.vue';
 import StepList from '../StepList.vue';
 import Step from '../Step.vue';
 import InputCopy from '../../Utility/InputCopy.vue';
 import QrCode from '../../Utility/QrCode.vue';
 
-export default defineComponent({
-  components: {
-    ConnectionDetails,
-    StepList,
-    Step,
-    InputCopy,
-    QrCode,
-  },
-  props: {
-    urls: {
-      type: Object,
-      required: true,
-    },
+defineProps({
+  urls: {
+    type: Object,
+    required: true,
   },
-  emits: ['showQrModal'],
 });
+
+defineEmits(['showQrModal']);
 </script>