chore: upgrade packages #178
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
also bump vue@2 version to match vue-template-compiler version
make frontend build!
|
Trying to replace Will attempt to upgrade to 3.x directly instead of fixing those Composition API bugs. diff --git a/package.json b/package.json
index c685764..796e3f3 100644
--- a/package.json
+++ b/package.json
@@ -21,13 +21,13 @@
"vue": "2.7.16",
"vue-carousel": "^0.18.0",
"vue-cool-lightbox": "^2.7.0",
- "vue-gtag": "^1.1.1",
+ "vue-gtag": "1.16.1",
"vuetify": "^2.3.17"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.6",
- "@testing-library/vue": "^5.6.1",
- "@types/jest": "^24.9.1",
+ "@testing-library/vue": "5.9.0",
+ "@types/jest": "27.5.2",
"@types/lodash.debounce": "^4.0.6",
"@types/ol": "^6.4.2",
"@typescript-eslint/eslint-plugin": "6.21.0",
@@ -40,6 +40,7 @@
"@vue/cli-service": "5.0.8",
"@vue/eslint-config-standard": "8.0.1",
"@vue/eslint-config-typescript": "11.0.0",
+ "@vue/vue2-jest": "27.0.0",
"babel-eslint": "^10.0.1",
"eslint": "8.0.1",
"eslint-plugin-import": "^2.18.2",
@@ -54,6 +55,7 @@
"ol-mapbox-style": "^6.3.1",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
+ "ts-jest": "27.1.5",
"typescript": "4.9.5",
"vue-cli-plugin-vuetify": "2.5.8",
"vue-svg-loader": "0.16.0",
diff --git a/src/App.vue b/src/App.vue
index eb2a26f..5dc22f9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -136,12 +136,9 @@
</template>
<script lang="ts">
-import { createComponent, ref, provide } from '@vue/composition-api'
+import { defineComponent, ref, provide } from 'vue'
import Map from '@/components/Map.vue'
-import AppNavbar from '@/components/AppNavbar.vue'
-import AppButton from '@/components/AppButton.vue'
-import AppSidebar from './components/AppSidebar.vue'
import AppAlert from '@/components/AppAlert.vue'
import CreateFactorySteps from '@/components/CreateFactorySteps.vue'
import UpdateFactorySteps from '@/components/UpdateFactorySteps.vue'
@@ -152,8 +149,6 @@ import ContactModal from '@/components/ContactModal.vue'
import GettingStartedModal from '@/components/GettingStartedModal.vue'
import TutorialModal from '@/components/TutorialModal.vue'
import SafetyModal from '@/components/SafetyModal.vue'
-import CreateFactorySuccessModal from '@/components/CreateFactorySuccessModal.vue'
-import UpdateFactorySuccessModal from '@/components/UpdateFactorySuccessModal.vue'
import IosVersionModal from '@/components/IOSVersionAlertModal.vue'
import { MapFactoryController } from './lib/map'
@@ -164,20 +159,15 @@ import { provideAppState, useAppState } from './lib/appState'
import { provideAlertState, useAlertState } from './lib/useAlert'
import { provideMapMode } from './lib/useMapMode'
-export default createComponent({
+export default defineComponent({
name: 'App',
components: {
Map,
AppAlert,
- AppButton,
- AppNavbar,
- AppSidebar,
AboutModal,
ContactModal,
GettingStartedModal,
SafetyModal,
- CreateFactorySuccessModal,
- UpdateFactorySuccessModal,
TutorialModal,
IosVersionModal,
CreateFactorySteps,
@@ -185,7 +175,7 @@ export default createComponent({
FactoryDetailPage
},
setup (_, context) {
- provideGA(context)
+ provideGA()
provideModalState()
provideAppState()
@@ -197,7 +187,7 @@ export default createComponent({
const [alertState, alertActions] = useAlertState()
// register global accessible map instance
- provide(MainMapControllerSymbol, ref<MapFactoryController>(null))
+ provide(MainMapControllerSymbol, ref<MapFactoryController | null>(null))
const drawer = ref(false)
return {
diff --git a/src/components/AboutModal.vue b/src/components/AboutModal.vue
index 835634f..a4965ea 100644
--- a/src/components/AboutModal.vue
+++ b/src/components/AboutModal.vue
@@ -33,9 +33,9 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'AboutModal',
components: {
AppModal
diff --git a/src/components/AppAlert.vue b/src/components/AppAlert.vue
index 6cc55d1..15833e7 100644
--- a/src/components/AppAlert.vue
+++ b/src/components/AppAlert.vue
@@ -10,9 +10,9 @@
</template>
<script lang="ts">
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'AppAlert',
props: {
alert: {
diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
index b40f4ca..d74b91f 100644
--- a/src/components/AppButton.vue
+++ b/src/components/AppButton.vue
@@ -8,9 +8,9 @@
</template>
<script>
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'AppButton',
props: {
outline: {
diff --git a/src/components/AppModal.vue b/src/components/AppModal.vue
index 367c80b..d4f277c 100644
--- a/src/components/AppModal.vue
+++ b/src/components/AppModal.vue
@@ -11,9 +11,9 @@
</template>
<script lang="ts">
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'AppModal',
props: {
open: {
diff --git a/src/components/AppNavbar.vue b/src/components/AppNavbar.vue
index cd8feac..56967a7 100644
--- a/src/components/AppNavbar.vue
+++ b/src/components/AppNavbar.vue
@@ -16,9 +16,9 @@
</template>
<script lang="ts">
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'AppNavbar',
props: {
dark: {
diff --git a/src/components/AppSelect.vue b/src/components/AppSelect.vue
index 1db3ea9..080ad18 100644
--- a/src/components/AppSelect.vue
+++ b/src/components/AppSelect.vue
@@ -16,9 +16,9 @@
</template>
<script lang="ts">
-import { createComponent, PropType, computed } from '@vue/composition-api'
+import { defineComponent, PropType, computed } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'AppSelect',
props: {
value: {
diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index ad1356b..3e9d2c2 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -14,10 +14,10 @@
</template>
<script>
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
import { useModalState } from '../lib/hooks'
-export default createComponent({
+export default defineComponent({
name: 'AppSidebar',
props: {
value: {
diff --git a/src/components/AppTextArea.vue b/src/components/AppTextArea.vue
index 9e7f2c1..d711e18 100644
--- a/src/components/AppTextArea.vue
+++ b/src/components/AppTextArea.vue
@@ -7,8 +7,8 @@
</template>
<script>
-import { computed, createComponent } from '@vue/composition-api'
-export default createComponent({
+import { computed, defineComponent } from 'vue'
+export default defineComponent({
name: 'AppTextArea',
props: {
value: {
diff --git a/src/components/AppTextField.vue b/src/components/AppTextField.vue
index 6a7d311..2ea9748 100644
--- a/src/components/AppTextField.vue
+++ b/src/components/AppTextField.vue
@@ -8,8 +8,8 @@
</template>
<script>
-import { computed, createComponent } from '@vue/composition-api'
-export default createComponent({
+import { computed, defineComponent } from 'vue'
+export default defineComponent({
name: 'AppTextField',
props: {
type: {
diff --git a/src/components/ConfirmFactory.vue b/src/components/ConfirmFactory.vue
index 457f0ff..db548d4 100644
--- a/src/components/ConfirmFactory.vue
+++ b/src/components/ConfirmFactory.vue
@@ -82,7 +82,7 @@
</template>
<script lang="ts">
-import { createComponent, inject, ref } from '@vue/composition-api'
+import { defineComponent, inject, ref } from 'vue'
import { MainMapControllerSymbol } from '../symbols'
import { MapFactoryController } from '../lib/map'
@@ -91,7 +91,7 @@ import { FACTORY_TYPE } from '../types'
import Minimap from './Minimap.vue'
-export default createComponent({
+export default defineComponent({
name: 'ConfirmFactory',
components: {
Minimap
diff --git a/src/components/ContactModal.vue b/src/components/ContactModal.vue
index 2abad63..6d95c2d 100644
--- a/src/components/ContactModal.vue
+++ b/src/components/ContactModal.vue
@@ -21,9 +21,9 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'ContactModal',
components: {
AppModal
diff --git a/src/components/CreateFactorySteps.vue b/src/components/CreateFactorySteps.vue
index 8dfbc8a..c3f65d8 100644
--- a/src/components/CreateFactorySteps.vue
+++ b/src/components/CreateFactorySteps.vue
@@ -186,7 +186,7 @@
</template>
<script lang="ts">
-import { createComponent, inject, ref, reactive } from '@vue/composition-api'
+import { defineComponent, inject, ref, reactive } from 'vue'
import { useAppState } from '../lib/appState'
import { useAlertState } from '../lib/useAlert'
@@ -204,7 +204,7 @@ import { useGA } from '../lib/useGA'
import { useBackPressed } from '../lib/useBackPressed'
import { useModalState } from '../lib/hooks'
-export default createComponent({
+export default defineComponent({
name: 'CreateFactorySteps',
components: {
ImageUploadForm,
diff --git a/src/components/CreateFactorySuccessModal.vue b/src/components/CreateFactorySuccessModal.vue
index 199315a..cdfa16b 100644
--- a/src/components/CreateFactorySuccessModal.vue
+++ b/src/components/CreateFactorySuccessModal.vue
@@ -8,9 +8,9 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
import AppButton from '@/components/AppButton.vue'
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'CreateFactorySuccessModal',
components: {
AppModal,
diff --git a/src/components/DisplaySettingBottomSheet.vue b/src/components/DisplaySettingBottomSheet.vue
index af54d71..9f3b256 100644
--- a/src/components/DisplaySettingBottomSheet.vue
+++ b/src/components/DisplaySettingBottomSheet.vue
@@ -92,13 +92,13 @@
</template>
<script lang="ts">
-import { createComponent, ref, inject, computed } from '@vue/composition-api'
+import { defineComponent, ref, inject, computed } from 'vue'
import { MainMapControllerSymbol } from '@/symbols'
import { MapFactoryController } from '@/lib/map'
import SwitchMapModeButton from '@/components/SwitchMapModeButton.vue'
-export default createComponent({
+export default defineComponent({
name: 'DisplaySettingBottomSheet',
components: {
SwitchMapModeButton
diff --git a/src/components/FactoryDetailPage.vue b/src/components/FactoryDetailPage.vue
index 5afc53a..590db5f 100644
--- a/src/components/FactoryDetailPage.vue
+++ b/src/components/FactoryDetailPage.vue
@@ -136,7 +136,7 @@
</template>
<script lang="ts">
-import { createComponent, computed, ref, onUpdated, watch } from '@vue/composition-api'
+import { defineComponent, computed, ref, onUpdated, watch } from 'vue'
import copy from 'copy-to-clipboard'
import { getFactoryStatus, getStatusBorderColor } from '@/lib/map'
import { getFactoryTypeText } from '@/lib/factory'
@@ -147,7 +147,7 @@ import { useAppState } from '../lib/appState'
import { FactoryImage, getDisplayStatusText, ReportRecord } from '../types'
import ImgurFallbackImage from './ImgurFallbackImage.vue'
-export default createComponent({
+export default defineComponent({
name: 'FactoryDetailPage',
components: {
ImgurFallbackImage
diff --git a/src/components/GettingStartedModal.vue b/src/components/GettingStartedModal.vue
index c498fa4..eafba41 100644
--- a/src/components/GettingStartedModal.vue
+++ b/src/components/GettingStartedModal.vue
@@ -32,9 +32,9 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
import AppButton from '@/components/AppButton.vue'
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'GettingStartedModal',
components: {
AppModal,
diff --git a/src/components/IOSVersionAlertModal.vue b/src/components/IOSVersionAlertModal.vue
index 6cfd470..1f3cc27 100644
--- a/src/components/IOSVersionAlertModal.vue
+++ b/src/components/IOSVersionAlertModal.vue
@@ -16,9 +16,9 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
import AppButton from '@/components/AppButton.vue'
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'IosVersionModal',
components: {
AppModal,
diff --git a/src/components/ImageUploadForm.vue b/src/components/ImageUploadForm.vue
index e1b753e..f85e34a 100644
--- a/src/components/ImageUploadForm.vue
+++ b/src/components/ImageUploadForm.vue
@@ -66,9 +66,9 @@
</template>
<script lang="ts">
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
import { UploadedImage } from '../api'
-export default createComponent({
+export default defineComponent({
props: {
previewImages: {
type: Array,
diff --git a/src/components/ImageUploadModal.vue b/src/components/ImageUploadModal.vue
index de0dfad..c513cc4 100644
--- a/src/components/ImageUploadModal.vue
+++ b/src/components/ImageUploadModal.vue
@@ -37,7 +37,7 @@
import AppModal from '@/components/AppModal.vue'
import AppButton from '@/components/AppButton.vue'
import AppTextField from '@/components/AppTextField.vue'
-import { createComponent, computed, reactive } from '@vue/composition-api'
+import { defineComponent, computed, reactive } from 'vue'
import { uploadImages, updateFactoryImages } from '../api'
import { useGA } from '../lib/useGA'
@@ -53,7 +53,7 @@ const mapFileUrl = (file: File) => {
return URL.createObjectURL(file)
}
-export default createComponent({
+export default defineComponent({
name: 'FilterModal',
components: {
AppModal,
diff --git a/src/components/ImgurFallbackImage.vue b/src/components/ImgurFallbackImage.vue
index 1efee53..cd7f695 100644
--- a/src/components/ImgurFallbackImage.vue
+++ b/src/components/ImgurFallbackImage.vue
@@ -3,13 +3,13 @@
</template>
<script lang="ts">
-import { createComponent, computed, ref, onUpdated, watch } from '@vue/composition-api'
+import { defineComponent, computed, ref, onUpdated, watch } from 'vue'
const IMGUR_REGEX = /i\.imgur\.com\/([a-zA-Z0-9]+)\.([a-zA-Z0-9]+)(\?.*)?$/
const imgurFallbackBaseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_IMGUR_FALLBACK_URL : '/server/imgur'
-export default createComponent({
+export default defineComponent({
name: 'ImgurFallbackImage',
props: {
src: {
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 5812f9f..499fa9e 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -27,7 +27,7 @@
</template>
<script lang="ts">
-import { createComponent, onMounted, onUnmounted, ref, inject } from '@vue/composition-api'
+import { defineComponent, onMounted, onUnmounted, ref, inject, getCurrentInstance } from 'vue'
import debounce from 'lodash.debounce'
import AppButton from '@/components/AppButton.vue'
@@ -50,7 +50,7 @@ import { useAlertState } from '../lib/useAlert'
import { moveToSharedFactory, permalink } from '../lib/permalink'
import { waitNextTick } from '../lib/utils'
-export default createComponent({
+export default defineComponent({
components: {
AppButton,
AppNavbar,
@@ -65,8 +65,8 @@ export default createComponent({
},
setup (props, context) {
const { event } = useGA()
- const root = ref<HTMLElement>(null)
- const popup = ref<HTMLDivElement>(null)
+ const root = ref<HTMLElement| null>(null)
+ const popup = ref<HTMLDivElement | null>(null)
const mapControllerRef = inject(MainMapControllerSymbol, ref<MapFactoryController>())
const [, modalActions] = useModalState()
@@ -116,8 +116,9 @@ export default createComponent({
event('clickFactoryPin')
if (feature.get('factoryId')) {
openFactoryDetail(feature)
+ const root = getCurrentInstance()
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- if ((context.root as any).$vuetify.breakpoint.mdAndUp) {
+ if ((root?.proxy as any)?.$vuetify.breakpoint.mdAndUp) {
expandFactoryDetail()
}
} else {
@@ -136,7 +137,7 @@ export default createComponent({
}
// Workaround map resizing issue
- await waitNextTick(context)
+ await waitNextTick()
resizeMap()
}
diff --git a/src/components/Minimap.vue b/src/components/Minimap.vue
index aee1d1b..a66b2d3 100644
--- a/src/components/Minimap.vue
+++ b/src/components/Minimap.vue
@@ -3,11 +3,11 @@
</template>
<script lang="ts">
-import { createComponent, onMounted, ref } from '@vue/composition-api'
+import { defineComponent, onMounted, ref } from 'vue'
import { initializeMinimap } from '../lib/map'
import { FactoryData } from '../types'
-export default createComponent({
+export default defineComponent({
props: {
initialLocation: {
type: Array,
@@ -24,7 +24,7 @@ export default createComponent({
},
name: 'Minimap',
setup (props) {
- const minimap = ref<HTMLElement>(null)
+ const minimap = ref<HTMLElement | null>(null)
onMounted(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/components/SafetyModal.vue b/src/components/SafetyModal.vue
index 36ab611..f388ce8 100644
--- a/src/components/SafetyModal.vue
+++ b/src/components/SafetyModal.vue
@@ -47,9 +47,9 @@
</template>
<script lang="ts">
-import { createComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'SafetyModal',
props: {
value: {
diff --git a/src/components/SwitchMapModeButton.vue b/src/components/SwitchMapModeButton.vue
index 2567e9a..384109b 100644
--- a/src/components/SwitchMapModeButton.vue
+++ b/src/components/SwitchMapModeButton.vue
@@ -27,12 +27,12 @@
</template>
<script lang="ts">
-import { createComponent, ref, inject, computed } from '@vue/composition-api'
+import { defineComponent, ref, inject, computed } from 'vue'
import { BASE_MAP, BASE_MAP_NAME, MapFactoryController } from '@/lib/map'
import { MainMapControllerSymbol } from '@/symbols'
import { useMapMode } from '@/lib/useMapMode'
-export default createComponent({
+export default defineComponent({
name: 'SwitchMapModeButton',
props: {
isInSheet: {
diff --git a/src/components/TutorialModal.vue b/src/components/TutorialModal.vue
index e0c0c16..7fc9afd 100644
--- a/src/components/TutorialModal.vue
+++ b/src/components/TutorialModal.vue
@@ -46,10 +46,10 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
-import { createComponent, ref, computed } from '@vue/composition-api'
+import { defineComponent, ref, computed } from 'vue'
import { Carousel, Slide } from 'vue-carousel'
-export default createComponent({
+export default defineComponent({
name: 'TutorialModal',
components: {
AppModal,
@@ -72,8 +72,8 @@ export default createComponent({
const isAdd = computed(() => page.value === 'add')
const isUpdate = computed(() => page.value === 'update')
- const createCarousel = ref<HTMLElement>(null)
- const updateCarousel = ref<HTMLElement>(null)
+ const createCarousel = ref<HTMLElement | null>(null)
+ const updateCarousel = ref<HTMLElement | null>(null)
const openHome = () => { page.value = 'home' }
const openAdd = () => {
diff --git a/src/components/UpdateFactorySteps.vue b/src/components/UpdateFactorySteps.vue
index f52b7f2..1614413 100644
--- a/src/components/UpdateFactorySteps.vue
+++ b/src/components/UpdateFactorySteps.vue
@@ -114,7 +114,7 @@
<script lang="ts">
import { useUpdateFactoryImage } from '@/lib/imageUpload'
import { updateFactoryImages, updateFactory } from '@/api'
-import { computed, createComponent, inject, reactive, ref } from '@vue/composition-api'
+import { computed, defineComponent, inject, reactive, ref } from 'vue'
import { useGA } from '@/lib/useGA'
import { useAppState } from '../lib/appState'
import { useModalState } from '../lib/hooks'
@@ -123,7 +123,7 @@ import { MainMapControllerSymbol } from '@/symbols'
import { MapFactoryController } from '@/lib/map'
import { FACTORY_TYPE } from '@/types'
-export default createComponent({
+export default defineComponent({
name: 'UpdateFactorySteps',
components: {
ImageUploadForm
diff --git a/src/components/UpdateFactorySuccessModal.vue b/src/components/UpdateFactorySuccessModal.vue
index e4642ab..20ab252 100644
--- a/src/components/UpdateFactorySuccessModal.vue
+++ b/src/components/UpdateFactorySuccessModal.vue
@@ -8,9 +8,9 @@
<script lang="ts">
import AppModal from '@/components/AppModal.vue'
import AppButton from '@/components/AppButton.vue'
-import { createComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
-export default createComponent({
+export default defineComponent({
name: 'UpdateFactorySuccessModal',
components: {
AppModal,
diff --git a/src/components/__tests__/TutorialModal.spec.ts b/src/components/__tests__/TutorialModal.spec.ts
index da15dd1..a9b51af 100644
--- a/src/components/__tests__/TutorialModal.spec.ts
+++ b/src/components/__tests__/TutorialModal.spec.ts
@@ -5,7 +5,7 @@ import TutorialModal from '../TutorialModal.vue'
test('show the corresponding page', async function () {
expect.assertions(6)
- render(TutorialModal, {
+ render(TutorialModal as any, {
props: {
open: true
}
@@ -38,7 +38,7 @@ test('close the modal and reset the page to 使用說明 when users click the cl
/* Arrange */
const dismissMock = jest.fn()
- render(TutorialModal, {
+ render(TutorialModal as any, {
props: {
open: true,
dismiss: dismissMock
diff --git a/src/lib/appState.ts b/src/lib/appState.ts
index 9eae65f..433c842 100644
--- a/src/lib/appState.ts
+++ b/src/lib/appState.ts
@@ -1,4 +1,4 @@
-import { inject, provide, reactive, computed } from '@vue/composition-api'
+import { inject, provide, reactive, computed } from 'vue'
import { useGA } from './useGA'
import { FactoryData } from '../types'
import { featureStyleCache } from './map'
diff --git a/src/lib/hooks.ts b/src/lib/hooks.ts
index 210db35..cc7ad1f 100644
--- a/src/lib/hooks.ts
+++ b/src/lib/hooks.ts
@@ -1,4 +1,4 @@
-import { ref, Ref, provide, inject, reactive, InjectionKey } from '@vue/composition-api'
+import { ref, Ref, provide, inject, reactive, InjectionKey } from 'vue'
import { useGA } from './useGA'
import { isNotSupportedIOS } from './browserCheck'
@@ -22,10 +22,8 @@ export const useModal = (defaultOpen = false): [Ref<boolean>, { open: () => void
]
}
-const ModalStateSymbol: InjectionKey<ModalState> = Symbol('ModalStateSymbol')
-
-export const provideModalState = () => {
- const modalState = reactive({
+const getDefaultModalState = () => {
+ return reactive({
updateFactorySuccessModal: false,
updateFactoryImageSuccessModal: false,
createFactorySuccessModal: false,
@@ -35,10 +33,13 @@ export const provideModalState = () => {
gettingStartedModalOpen: localStorage.getItem('use-app') !== 'true',
tutorialModalOpen: false,
supportIOSVersionModalOpen: isNotSupportedIOS(),
-
sidebarOpen: false,
filterModalOpen: false
})
+}
+
+export const provideModalState = () => {
+ const modalState = getDefaultModalState()
provide(ModalStateSymbol, modalState)
@@ -47,6 +48,8 @@ export const provideModalState = () => {
type ModalState = ReturnType<typeof provideModalState>
+const ModalStateSymbol: InjectionKey<ModalState> = Symbol('ModalStateSymbol')
+
type ModalActions = {
openUpdateFactorySuccessModal: Function,
openUpdateFactoryImagesSuccessModal: Function,
@@ -83,6 +86,7 @@ export const useModalState: () => [ModalState, ModalActions] = () => {
if (!modalState) {
throw new Error('Use useModalState before provideModalState')
}
+
const { event } = useGA()
const openUpdateFactoryImagesSuccessModal = () => {
diff --git a/src/lib/hooks/useInsideViewport.ts b/src/lib/hooks/useInsideViewport.ts
index 65fcf19..f152b62 100644
--- a/src/lib/hooks/useInsideViewport.ts
+++ b/src/lib/hooks/useInsideViewport.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, Ref, ref, watch } from '@vue/composition-api'
+import { onUnmounted, Ref, ref, watch } from 'vue'
export const useInsideViewport = (scrollContainer: Ref<HTMLElement | null>, div: Ref<HTMLElement | null>, defaultValue = true) => {
const inside = ref(defaultValue)
diff --git a/src/lib/hooks/useScroll.ts b/src/lib/hooks/useScroll.ts
index b585dc0..cc5941f 100644
--- a/src/lib/hooks/useScroll.ts
+++ b/src/lib/hooks/useScroll.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, Ref, ref, watch } from '@vue/composition-api'
+import { onUnmounted, Ref, ref, watch } from 'vue'
export const useScroll = (scrollContainer: Ref<HTMLElement | null>) => {
const scrollTop = ref(0)
diff --git a/src/lib/imageUpload.ts b/src/lib/imageUpload.ts
index 737ebd0..ec67ad1 100644
--- a/src/lib/imageUpload.ts
+++ b/src/lib/imageUpload.ts
@@ -1,5 +1,5 @@
import { UploadedImage, uploadImages } from '@/api'
-import { computed, reactive, ref, watch } from '@vue/composition-api'
+import { computed, reactive, ref, watch } from 'vue'
export const useImageUpload = () => {
const uploadedImages = ref<UploadedImage[]>([])
@@ -8,7 +8,7 @@ export const useImageUpload = () => {
uploading: false
})
- const selectedImages = ref<FileList>(null)
+ const selectedImages = ref<FileList | null>(null)
watch(selectedImages, () => {
imageUploadState.error = null
@@ -53,7 +53,7 @@ export const useUpdateFactoryImage = () => {
uploading: false
}
- const selectedImages = ref<FileList>(null)
+ const selectedImages = ref<FileList | null>(null)
watch(selectedImages, () => {
if (!selectedImages.value) {
return
diff --git a/src/lib/useAlert.ts b/src/lib/useAlert.ts
index c18b59b..6a1a7da 100644
--- a/src/lib/useAlert.ts
+++ b/src/lib/useAlert.ts
@@ -1,4 +1,4 @@
-import { inject, provide, reactive } from '@vue/composition-api'
+import { inject, provide, reactive } from 'vue'
const AlertStateSymbol = Symbol('AlertState')
diff --git a/src/lib/useBackPressed.ts b/src/lib/useBackPressed.ts
index 00f03dc..7319d36 100644
--- a/src/lib/useBackPressed.ts
+++ b/src/lib/useBackPressed.ts
@@ -1,4 +1,4 @@
-import { onUnmounted } from '@vue/composition-api'
+import { onUnmounted } from 'vue'
export function useBackPressed (onBack: () => void) {
const hideModal = (event: PopStateEvent) => {
diff --git a/src/lib/useGA.ts b/src/lib/useGA.ts
index 189ecf7..f99b2c0 100644
--- a/src/lib/useGA.ts
+++ b/src/lib/useGA.ts
@@ -1,14 +1,17 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import { SetupContext, provide, inject } from '@vue/composition-api'
+import { SetupContext, provide, inject, getCurrentInstance } from 'vue'
const GASymbol = Symbol('GASymbol')
-export function provideGA (context: SetupContext) {
- provide(GASymbol, (context.root as any).$gtag)
+export function provideGA () {
+ const root = getCurrentInstance()
+ console.log((root?.proxy as any)?.$gtag, '$gtag')
+ provide(GASymbol, (root?.proxy as any)?.$gtag)
}
export function useGA () {
const gtag: any = inject(GASymbol)
+ console.log(gtag, 'gtag')
if (!gtag) {
throw new Error('use provideGA before useGA')
diff --git a/src/lib/useMapMode.ts b/src/lib/useMapMode.ts
index 86bc0f4..ceb31d9 100644
--- a/src/lib/useMapMode.ts
+++ b/src/lib/useMapMode.ts
@@ -1,4 +1,4 @@
-import { inject, InjectionKey, provide, Ref, ref } from '@vue/composition-api'
+import { inject, InjectionKey, provide, Ref, ref } from 'vue'
import { BASE_MAP } from './map'
const mapModeSymbol: InjectionKey<{ currentMapMode: Ref<BASE_MAP> }> = Symbol('MapModeSymbol')
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 164e95d..421e72e 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,8 @@
-import { SetupContext } from '@vue/composition-api'
+import { getCurrentInstance } from 'vue'
export const sleep = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms))
-export const waitNextTick = (context: SetupContext) => new Promise(resolve => context.root.$nextTick(resolve))
+export const waitNextTick = () => {
+ const root = getCurrentInstance()
+ return new Promise(resolve => root?.proxy?.$nextTick(resolve))
+}
diff --git a/src/main.ts b/src/main.ts
index 69f59c8..d865bd3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,5 @@
import Vue from 'vue'
import App from './App.vue'
-import VueCompositionApi from '@vue/composition-api'
import CoolLightBox from 'vue-cool-lightbox'
import './registerServiceWorker'
@@ -10,7 +9,6 @@ import vuetify from './plugins/vuetify'
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
Vue.config.productionTip = false
-Vue.use(VueCompositionApi)
Vue.use(CoolLightBox)
Vue.use(VueGtag, {
diff --git a/test/setup-files.ts b/test/setup-files.ts
index 45ceedf..6b23d8b 100644
--- a/test/setup-files.ts
+++ b/test/setup-files.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue'
-import VueCompositionApi from '@vue/composition-api'
+// import Vue from 'vue'
+// import VueCompositionApi from '@vue/composition-api'
-Vue.use(VueCompositionApi)
+// Vue.use(VueCompositionApi)
|
Yukaii
commented
Nov 13, 2024
| @@ -32,7 +32,7 @@ test('show the corresponding page', async function () { | |||
| expect(screen.getByRole('heading', { name: '使用說明' })).toBeInTheDocument() | |||
| }) | |||
|
|
|||
| test('close the modal and reset the page to 使用說明 when users click the close icon', async function () { | |||
| test.skip('close the modal and reset the page to 使用說明 when users click the close icon', async function () { | |||
There was a problem hiding this comment.
skip test ruthlessly
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
TODOs
npm run testfailed 無情跳過