Proof of concept Vue 2.7 composition API bridge

Author: ebkr

package.json

@@ -109,6 +109,7 @@
         "sinon": "^11.1.1",
         "ts-node": "^8.10.2",
         "typescript": "^4.5.5",
+        "vue": "2.7.16",
         "vue-jest": "^3.0.0",
         "wallaby-vue-compiler": "^1.0.3"
     },

src/components/v2/Hero.vue

@@ -0,0 +1,24 @@
+<template>
+    <section :class="['hero', heroType]" ref="section">
+        <div class="hero-body non-selectable">
+            <div class="container">
+                <h1 class="title" ref="title">
+                    {{title}}
+                </h1>
+                <h2 class="subtitle" ref="subtitle">
+                    {{subtitle}}
+                </h2>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script lang="ts" setup>
+export interface HeroProps {
+    title: string;
+    subtitle: string;
+    heroType?: string;
+}
+
+const heroProps = defineProps<HeroProps>();
+</script>

src/pages/GameSelectionScreen.vue

@@ -164,7 +164,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 import Game from '../model/game/Game';
 import GameManager from '../model/game/GameManager';
-import Hero from '../components/Hero.vue';
+import Hero from '../components/v2/Hero.vue';
 import * as ManagerUtils from '../utils/ManagerUtils';
 import ManagerSettings from '../r2mm/manager/ManagerSettings';
 import { StorePlatform } from '../model/game/StorePlatform';

yarn.lock

@@ -13910,7 +13910,7 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.7.1:
+vue@2.7.16, vue@^2.7.1:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
   integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==