Refactoring to use a poormans store for settings. Updating lint rules for type imports

Author: ackzell

eslint.config.ts

@@ -67,6 +67,8 @@ export default antfu({
       },
     ],
 
+    'import-x/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+
     'style/object-curly-newline': ['error', {
       ImportDeclaration: {
         multiline: true,

index.html

@@ -7,12 +7,12 @@
     <title>Vue live playground</title>
 
      <script>
-      const savedPreferDark = localStorage.getItem(
-        'vue-sfc-playground-prefer-dark',
+      const savedTheme = localStorage.getItem(
+        'yehyecoa-vue-theme',
       )
       if (
-        savedPreferDark === 'true' ||
-        (!savedPreferDark &&
+        savedTheme === 'dark' ||
+        (!savedTheme &&
           window.matchMedia('(prefers-color-scheme: dark)').matches)
       ) {
         document.documentElement.classList.add('dark')

src/App.vue

@@ -3,27 +3,18 @@ import '@vue/repl/style.css';
 
 import Monaco from '@vue/repl/monaco-editor';
 import { Repl, useStore } from '@vue/repl';
-import { useStorage } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
 
 import YVHeader from './YvHeader.vue';
+import { useSettingsStore } from './composables/settings';
 
-const preferDark = useStorage('vue-sfc-playground-prefer-dark', true);
-const theme = ref<'dark' | 'light'>('dark');
-function setTheme(newTheme: 'dark' | 'light') {
-  theme.value = newTheme;
-  preferDark.value = newTheme === 'dark';
-}
-
-const layout = useStorage<'horizontal' | 'vertical'>('yehyecoa-vue-layout', 'horizontal');
-function toggleLayout() {
-  layout.value = layout.value === 'horizontal' ? 'vertical' : 'horizontal';
-}
+const { settings } = useSettingsStore();
 
 function setVH() {
   document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
 }
 window.addEventListener('resize', setVH);
+
 setVH();
 
 const store = useStore();
@@ -63,18 +54,14 @@ onMounted(async () => {
     >
       {{ errormessage }}
     </div>
-    <YVHeader
-      :theme="theme"
-      @set-theme="setTheme"
-      @toggle-layout="toggleLayout"
-    />
+    <YVHeader />
     <Repl
       :editor="Monaco"
       :show-compile-output="false"
       :show-import-map="false"
       :show-ts-config="false"
-      :theme
-      :layout
+      :theme="settings.theme"
+      :layout="settings.layout"
       :editor-options="{
         autoSaveText: false,
       }"

src/YvHeader.vue

@@ -1,31 +1,8 @@
 <script setup lang="ts">
-import { useStorage } from '@vueuse/core';
-import { onMounted } from 'vue';
+import { useSettingsStore } from './composables/settings';
 
-defineProps<{
-  theme: 'dark' | 'light';
-}>();
+const { settings, toggleLayout, toggleTheme } = useSettingsStore();
 
-// TODO: implement the download functionality, just like the official playground
-const emit = defineEmits({
-  'set-theme': (theme: 'dark' | 'light') => theme,
-  'toggle-layout': () => true,
-});
-const cls = document.documentElement.classList;
-
-function setTheme() {
-  cls.toggle('dark');
-  emit('set-theme', cls.contains('dark') ? 'dark' : 'light');
-}
-
-const layout = useStorage<'horizontal' | 'vertical'>('yehyecoa-vue-layout', 'horizontal');
-function toggleLayout() {
-  emit('toggle-layout');
-}
-
-onMounted(() => {
-  emit('set-theme', cls.contains('dark') ? 'dark' : 'light');
-});
 </script>
 
 <template>
@@ -41,16 +18,16 @@ onMounted(() => {
     <h1 text-lg font-500 inline-flex items-center>
       <!-- TODO: maybe a logo would be cool -->
       <!-- <img alt="logo" src="/logo.svg" /> -->
-      <span uno-hidden sm:inline-block>yehyecoa-vue</span>
+      <span>yehyecoa-vue</span>
     </h1>
     <div flex gap-2 text-neutral-500>
       <button toolbar-btn @click="toggleLayout">
-        <div :class="layout === 'vertical' ? 'i-mynaui:rectangle' : 'i-mynaui:rectangle-vertical'" />
+        <div :class="settings.layout === 'vertical' ? 'i-mynaui:rectangle' : 'i-mynaui:rectangle-vertical'" />
       </button>
       <button
         toolbar-btn
-        :title="`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`"
-        @click="setTheme"
+        :title="`Switch to ${settings.theme === 'dark' ? 'light' : 'dark'} theme`"
+        @click="toggleTheme"
       >
         <div class="i-carbon:sun dark:i-carbon:moon" />
       </button>

src/composables/settings.ts

@@ -0,0 +1,51 @@
+import { useStorage, type RemovableRef } from '@vueuse/core';
+import { nextTick, onMounted, ref } from 'vue';
+
+type Theme = 'dark' | 'light';
+type Layout = 'horizontal' | 'vertical';
+
+interface YVSettingsStore {
+  settings: typeof settings;
+  toggleLayout: () => void;
+  toggleTheme: () => void;
+}
+
+interface YVSettings {
+  theme: RemovableRef<Theme>;
+  layout: RemovableRef<Layout>;
+}
+
+
+console.log(window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+const settings = ref<YVSettings>({
+  theme: useStorage<Theme>('yehyecoa-vue-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+  layout: useStorage<Layout>('yehyecoa-vue-layout', 'horizontal'),
+});
+
+export function useSettingsStore(): YVSettingsStore {
+
+  function toggleLayout(): void {
+    settings.value.layout = settings.value.layout === 'horizontal' ? 'vertical' : 'horizontal';
+  }
+
+  const cls = document.documentElement.classList;
+
+  function toggleTheme(): void {
+    settings.value.theme = settings.value.theme === 'dark' ? 'light' : 'dark';
+
+    nextTick(() => {
+      if (settings.value.theme === 'dark') {
+        cls.add('dark');
+      }
+      else {
+        cls.remove('dark');
+      }
+    });
+  }
+
+  onMounted(() => {
+  })
+
+  return { settings, toggleLayout, toggleTheme };
+}