From 9a92800419589f9dc6e31152d906d53bbcf182bc Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Tue, 7 Sep 2021 15:29:18 +0800 Subject: [PATCH] chore: simplify ts-router folder structure --- template/code/typescript-router/src/App.vue | 2 - .../typescript-router/src/assets/base.css | 18 ++- .../src/components/ColorSchemeSwitch.vue | 137 ------------------ .../src/components/HelloWorld.vue | 2 +- .../src/components/Welcome.vue | 85 +++++++++++ .../{IntroductionItem.vue => WelcomeItem.vue} | 0 .../__tests__/ColorSchemeSwitch.spec.ts | 34 ----- .../src/components/icons/IconMoon.vue | 18 --- .../src/components/icons/IconSun.vue | 34 ----- .../__tests__/useMediaQuery.spec.ts | 33 ----- .../src/composables/useColorScheme.ts | 31 ---- .../src/composables/useMediaQuery.ts | 28 ---- .../code/typescript-router/src/views/Home.vue | 83 +---------- 13 files changed, 98 insertions(+), 407 deletions(-) delete mode 100644 template/code/typescript-router/src/components/ColorSchemeSwitch.vue create mode 100644 template/code/typescript-router/src/components/Welcome.vue rename template/code/typescript-router/src/components/{IntroductionItem.vue => WelcomeItem.vue} (100%) delete mode 100644 template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts delete mode 100644 template/code/typescript-router/src/components/icons/IconMoon.vue delete mode 100644 template/code/typescript-router/src/components/icons/IconSun.vue delete mode 100644 template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts delete mode 100644 template/code/typescript-router/src/composables/useColorScheme.ts delete mode 100644 template/code/typescript-router/src/composables/useMediaQuery.ts diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue index ebe7e8c3..36ae7808 100644 --- a/template/code/typescript-router/src/App.vue +++ b/template/code/typescript-router/src/App.vue @@ -1,6 +1,5 @@ diff --git a/template/code/typescript-router/src/components/Welcome.vue b/template/code/typescript-router/src/components/Welcome.vue new file mode 100644 index 00000000..a4ee9e88 --- /dev/null +++ b/template/code/typescript-router/src/components/Welcome.vue @@ -0,0 +1,85 @@ + + + diff --git a/template/code/typescript-router/src/components/IntroductionItem.vue b/template/code/typescript-router/src/components/WelcomeItem.vue similarity index 100% rename from template/code/typescript-router/src/components/IntroductionItem.vue rename to template/code/typescript-router/src/components/WelcomeItem.vue diff --git a/template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts b/template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts deleted file mode 100644 index 3842adf2..00000000 --- a/template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { mount } from '@cypress/vue' - -import ColorSchemeSwitch from '../ColorSchemeSwitch.vue' - -describe('ColorSchemeSwitch', () => { - beforeEach(() => { - cy.stub(window, 'matchMedia') - .withArgs('(prefers-color-scheme: light)') - .returns({ - matches: false, - addEventListener: () => {}, - removeEventListener: () => {}, - }) - .withArgs('(prefers-color-scheme: dark)') - .returns({ - matches: true, - addEventListener: () => {}, - removeEventListener: () => {}, - }) - }) - - it('use the preferred color scheme by default', () => { - mount(ColorSchemeSwitch) - - cy.get('body').should('have.attr', 'data-color-scheme', 'dark') - }) - - it('toggles the color scheme affter user clicks toggle', () => { - mount(ColorSchemeSwitch) - - cy.get('.color-scheme-switch').click() - cy.get('body').should('have.attr', 'data-color-scheme', 'light') - }) -}) diff --git a/template/code/typescript-router/src/components/icons/IconMoon.vue b/template/code/typescript-router/src/components/icons/IconMoon.vue deleted file mode 100644 index 8e02b917..00000000 --- a/template/code/typescript-router/src/components/icons/IconMoon.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/template/code/typescript-router/src/components/icons/IconSun.vue b/template/code/typescript-router/src/components/icons/IconSun.vue deleted file mode 100644 index 577f8031..00000000 --- a/template/code/typescript-router/src/components/icons/IconSun.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts b/template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts deleted file mode 100644 index a7a5d024..00000000 --- a/template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { defineComponent, h, createVNode } from 'vue' -import { mount } from '@cypress/vue' - -import useMediaQuery from '../useMediaQuery' - -const Wrapper = defineComponent({ - props: { - query: { - type: String, - required: true - } - }, - setup(props) { - const matches = useMediaQuery(props.query) - return () => h('div', { id: 'result' }, matches.value.toString() ) - } -}) - -describe('useMediaQuery', () => { - it('should correctly reflect the match result of a media query', () => { - mount(Wrapper, { - props: { - query: '(min-width: 800px)' - } - }) - - cy.viewport(1000, 660) - cy.get('#result').should('include.text', 'true') - - cy.viewport(660, 660) - cy.get('#result').should('include.text', 'false') - }) -}) diff --git a/template/code/typescript-router/src/composables/useColorScheme.ts b/template/code/typescript-router/src/composables/useColorScheme.ts deleted file mode 100644 index 6bc17800..00000000 --- a/template/code/typescript-router/src/composables/useColorScheme.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { ref, computed } from 'vue' -import useMediaQuery from './useMediaQuery' - -// Its value should be consistent when called multiple times. -// So we put it outside the composable function -const isUserToggledDark = ref() - -export default function useColorScheme() { - const isDefaultDark = useMediaQuery('(prefers-color-scheme: dark)') - - const isDark = computed(() => { - if (typeof isUserToggledDark.value !== 'undefined') { - return isUserToggledDark.value - } else { - return isDefaultDark.value - } - }) - - const toggle = () => { - if (typeof isUserToggledDark.value !== 'undefined') { - isUserToggledDark.value = !isUserToggledDark.value - } else { - isUserToggledDark.value = !isDefaultDark.value - } - } - - return { - toggle, - isDark - } -} diff --git a/template/code/typescript-router/src/composables/useMediaQuery.ts b/template/code/typescript-router/src/composables/useMediaQuery.ts deleted file mode 100644 index 559b4644..00000000 --- a/template/code/typescript-router/src/composables/useMediaQuery.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ref, onUnmounted } from 'vue' - -export default function useMediaQuery(query: string) { - const mediaQueryList = window.matchMedia(query) - const matches = ref(mediaQueryList.matches) - - const handler = (event: MediaQueryListEvent) => { - matches.value = event.matches - } - - // @ts-ignore Safari < 14 does not support this - if (mediaQueryList.addEventListener) { - mediaQueryList.addEventListener('change', handler) - } else { - mediaQueryList.addListener(handler) - } - - onUnmounted(() => { - // @ts-ignore Safari < 14 does not support this - if (mediaQueryList.removeEventListener) { - mediaQueryList.removeEventListener('change', handler) - } else { - mediaQueryList.removeListener(handler) - } - }) - - return matches -} diff --git a/template/code/typescript-router/src/views/Home.vue b/template/code/typescript-router/src/views/Home.vue index 17277bc2..ba9b6dc3 100644 --- a/template/code/typescript-router/src/views/Home.vue +++ b/template/code/typescript-router/src/views/Home.vue @@ -1,88 +1,9 @@ -- 2.39.5