From 14ee26d39aaeb1d143cfc920308fa9e36d4f3d93 Mon Sep 17 00:00:00 2001
From: "Grant J. Butler" <grantjbutler@users.noreply.github.com>
Date: Wed, 9 Feb 2022 21:37:01 -0500
Subject: [PATCH] Update components to <script setup>.

---
 .../renderer/src/components/CommandBar.vue    |  36 ++---
 .../src/components/ConnectionState.vue        |  21 +--
 packages/renderer/src/components/Controls.vue |  71 +++++----
 .../src/components/Controls/Controls.vue      |   9 +-
 .../Controls/FlexComponentControls.vue        |  57 +++----
 .../Controls/InsetComponentControls.vue       |  90 +++++------
 .../Controls/SourceComponentControls.vue      |  43 ++----
 .../src/components/Form/FormControl.vue       |   9 +-
 .../src/components/Form/FormNumberInput.vue   |  45 +++---
 .../src/components/Form/FormSelect.vue        |   2 +-
 packages/renderer/src/components/NavBar.vue   |  14 +-
 .../src/components/Preferences/Content.vue    | 110 ++++++--------
 .../src/components/Preferences/Control.vue    |  30 ++--
 .../src/components/Preferences/Controls.vue   |  15 +-
 .../src/components/Preferences/Modal.vue      |  40 ++---
 packages/renderer/src/components/Preview.vue  | 138 +++++++++--------
 packages/renderer/src/components/Sidebar.vue  |  19 +--
 .../src/components/Sidebar/TreeControl.vue    | 141 ++++++++----------
 .../renderer/src/components/SyncPopover.vue   |  36 ++---
 19 files changed, 393 insertions(+), 533 deletions(-)

diff --git a/packages/renderer/src/components/CommandBar.vue b/packages/renderer/src/components/CommandBar.vue
index a8827d7..e529cac 100644
--- a/packages/renderer/src/components/CommandBar.vue
+++ b/packages/renderer/src/components/CommandBar.vue
@@ -1,29 +1,29 @@
 <template>
   <div>
     <div
-      class="app-region-drag bg-system-background-nav-bar p-2 flex items-baseline space-x-2"
+      class="flex items-baseline p-2 space-x-2 app-region-drag bg-system-background-nav-bar"
       style="height: env(titlebar-area-height, 40px); width: env(titlebar-area-width, 0px);"
     >
       <ConnectionState size="small" />
 
       <span>obs-layout</span>
     </div>
-    <div class="bg-system-background-nav-bar flex items-center justify-end">
+    <div class="flex items-center justify-end bg-system-background-nav-bar">
       <Popover class="relative">
-        <PopoverButton class="flex items-center hover:bg-gray-300 p-3 space-x-1">
+        <PopoverButton class="flex items-center p-3 space-x-1 hover:bg-gray-300">
           <CloudUploadIcon class="w-6 h-6 text-gray-600" />
 
           <span>Sync</span>
         </PopoverButton>
 
-        <PopoverPanel class="absolute z-10 right-0">
+        <PopoverPanel class="absolute right-0 z-10">
           <sync-popover />
         </PopoverPanel>
       </Popover>
 
       <button
-        class="flex space-x-1 hover:bg-gray-300 p-3"
-        @click="openSettings"
+        class="flex p-3 space-x-1 hover:bg-gray-300"
+        @click="$emit('openSettings')"
       >
         <CogIcon class="w-6 h-6 text-gray-600" />
 
@@ -33,27 +33,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { CloudUploadIcon, CogIcon } from '@heroicons/vue/outline';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import ConnectionState from './ConnectionState.vue';
 import SyncPopover from './SyncPopover.vue';
-export default defineComponent({
-  components: {
-    CloudUploadIcon,
-    CogIcon,
-    ConnectionState,
-    SyncPopover,
-    Popover,
-    PopoverButton,
-    PopoverPanel,
-  },
-  emits: ['openSettings'],
-  setup(_, { emit }) {
-    return {
-      openSettings: () => emit('openSettings'),
-    };
-  },
-});
+
+defineEmits<{
+  (e: 'openSettings'): void
+}>();
 </script>
diff --git a/packages/renderer/src/components/ConnectionState.vue b/packages/renderer/src/components/ConnectionState.vue
index cdea5f4..74211c7 100644
--- a/packages/renderer/src/components/ConnectionState.vue
+++ b/packages/renderer/src/components/ConnectionState.vue
@@ -6,32 +6,21 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType} from 'vue';
 import { computed } from 'vue';
 import { useStore } from '/@/store/app';
 import { OBSConnectionState } from '../../../shared/src/obs';
 
-enum Size {
-  Small = 'small',
-  Medium = 'medium'
-}
-
-const props = defineProps({
-  size: {
-    type: String as PropType<Size>,
-    required: true
-  }
-});
-
-
+const props = defineProps<{
+  size: 'small' | 'medium'
+}>();
 
 const store = useStore();
 
 const sizeClasses = computed(() => {
   switch (props.size) {
-    case Size.Small:
+    case 'small':
       return 'w-2 h-2';
-    case Size.Medium:
+    case 'medium':
       return 'w-4 h-4';
     default:
       return '';
diff --git a/packages/renderer/src/components/Controls.vue b/packages/renderer/src/components/Controls.vue
index c9418c8..bb62539 100644
--- a/packages/renderer/src/components/Controls.vue
+++ b/packages/renderer/src/components/Controls.vue
@@ -14,35 +14,52 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { Component } from '/@/layout';
 import { useStore } from '/@/store/app';
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import ControlComponents from './Controls/Registry';
-export default defineComponent({
-  name: 'Controls',
-  components: {
-    ...ControlComponents.components,
-  },
-  setup() {
-    const store = useStore();
-    const component = computed(() => store.state.selectedComponent);
-    const controls = computed(() => {
-      let controlComponent = Object.getPrototypeOf(component.value);
-      let controlsComponents = [];
-      do {
-        let control: any = ControlComponents.registry.get(controlComponent.constructor);
-        if (control) {
-          controlsComponents.push(control);
-        }
-        controlComponent = Object.getPrototypeOf(controlComponent);
-      } while (controlComponent instanceof Component);
-      return controlsComponents.reverse();
-    });
-    return {
-      controls,
-      component,
-    };
-  },
+
+const store = useStore();
+const component = computed(() => store.state.selectedComponent);
+
+const controls = computed(() => {
+  let controlComponent = Object.getPrototypeOf(component.value);
+  let controlsComponents = [];
+  do {
+    let control = ControlComponents.registry.get(controlComponent.constructor);
+    if (control) {
+      controlsComponents.push(control);
+    }
+    controlComponent = Object.getPrototypeOf(controlComponent);
+  } while (controlComponent instanceof Component);
+  return controlsComponents.reverse();
 });
+
+// export default defineComponent({
+//   name: 'Controls',
+//   components: {
+//     ...ControlComponents.components,
+//   },
+//   setup() {
+//     const store = useStore();
+//     const component = computed(() => store.state.selectedComponent);
+//     const controls = computed(() => {
+//       let controlComponent = Object.getPrototypeOf(component.value);
+//       let controlsComponents = [];
+//       do {
+//         let control: any = ControlComponents.registry.get(controlComponent.constructor);
+//         if (control) {
+//           controlsComponents.push(control);
+//         }
+//         controlComponent = Object.getPrototypeOf(controlComponent);
+//       } while (controlComponent instanceof Component);
+//       return controlsComponents.reverse();
+//     });
+//     return {
+//       controls,
+//       component,
+//     };
+//   },
+// });
 </script>
diff --git a/packages/renderer/src/components/Controls/Controls.vue b/packages/renderer/src/components/Controls/Controls.vue
index 949a67f..572be55 100644
--- a/packages/renderer/src/components/Controls/Controls.vue
+++ b/packages/renderer/src/components/Controls/Controls.vue
@@ -10,10 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-});
+defineProps<{
+  title: string
+}>();
 </script>
diff --git a/packages/renderer/src/components/Controls/FlexComponentControls.vue b/packages/renderer/src/components/Controls/FlexComponentControls.vue
index 0f5f89a..e752931 100644
--- a/packages/renderer/src/components/Controls/FlexComponentControls.vue
+++ b/packages/renderer/src/components/Controls/FlexComponentControls.vue
@@ -33,49 +33,34 @@
   </Controls>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { FlexComponent } from '/@/layout';
 import { useStore } from '/@/store/app';
 import { FLEX_SET_DIRECTION, FLEX_SET_DISTRIBUTION, FLEX_SET_SPACING } from '/@/store/mutation-types';
 import { useIsWindows } from '/@/integration/platform';
-import type { PropType} from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
+import { computed } from 'vue';
+
 import FormSelect from '/@/components/Form/FormSelect.vue';
 import FormNumberInput from '/@/components/Form/FormNumberInput.vue';
 import Controls from './Controls.vue';
-export default defineComponent({
-  name: 'FlexComponentControls',
-  props: {
-    component: {
-      type: Object as PropType<FlexComponent>,
-      required: true,
-    },
-  },
-  components: {
-    FormSelect,
-    FormNumberInput,
-    Controls,
-  },
-  setup(props) {
-    const store = useStore();
-    const { component } = toRefs(props);
-    const isWindows = useIsWindows();
 
-    return {
-      direction: computed({
-        get() { return component.value.direction; },
-        set(direction) { store.commit(FLEX_SET_DIRECTION, direction); },
-      }),
-      distribution: computed({
-        get() { return component.value.distribution; },
-        set(distribution) { store.commit(FLEX_SET_DISTRIBUTION, distribution); },
-      }),
-      spacing: computed({
-        get() { return component.value.spacing; },
-        set(spacing: number) { store.commit(FLEX_SET_SPACING, spacing); },
-      }),
-      isWindows,
-    };
-  },
+const props = defineProps<{
+  component: FlexComponent
+}>();
+
+const store = useStore();
+const isWindows = useIsWindows();
+
+const direction = computed({
+  get(): 'horizontal' | 'vertical' { return props.component.direction; },
+  set(direction: 'horizontal' | 'vertical') { store.commit(FLEX_SET_DIRECTION, direction); },
+});
+const distribution = computed({
+  get(): 'leading' | 'center' | 'trailing' { return props.component.distribution; },
+  set(distribution: 'leading' | 'center' | 'trailing') { store.commit(FLEX_SET_DISTRIBUTION, distribution); },
+});
+const spacing = computed({
+  get() { return props.component.spacing; },
+  set(spacing: number) { store.commit(FLEX_SET_SPACING, spacing); },
 });
 </script>
diff --git a/packages/renderer/src/components/Controls/InsetComponentControls.vue b/packages/renderer/src/components/Controls/InsetComponentControls.vue
index fe3d597..063265c 100644
--- a/packages/renderer/src/components/Controls/InsetComponentControls.vue
+++ b/packages/renderer/src/components/Controls/InsetComponentControls.vue
@@ -20,63 +20,53 @@
   </Controls>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type InsetComponent from '/@/layout/InsetComponent';
 import { useStore } from '/@/store/app';
 import { INSET_SET_INSETS } from '/@/store/mutation-types';
-import type { PropType} from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
+import { computed } from 'vue';
 import FormNumberInput from '/@/components/Form/FormNumberInput.vue';
 import Controls from './Controls.vue';
-export default defineComponent({
-  name: 'InsetComponentControls',
-  props: {
-    component: {
-      type: Object as PropType<InsetComponent>,
-      required: true,
-    },
+
+const props = defineProps<{
+  component: InsetComponent
+}>();
+
+const store = useStore();
+
+const top = computed({
+  get() { return props.component.insets.top; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.top = newValue;
+    store.commit(INSET_SET_INSETS, insets);
+  },
+});
+
+const left = computed({
+  get() { return props.component.insets.left; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.left = newValue;
+    store.commit(INSET_SET_INSETS, insets);
   },
-  components: {
-    FormNumberInput,
-    Controls,
+});
+
+const bottom = computed({
+  get() { return props.component.insets.bottom; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.bottom = newValue;
+    store.commit(INSET_SET_INSETS, insets);
   },
-  setup(props) {
-    const { component } = toRefs(props);
-    const store = useStore();
-    return {
-      top: computed({
-        get() { return component.value.insets.top; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.top = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-      left: computed({
-        get() { return component.value.insets.left; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.left = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-      bottom: computed({
-        get() { return component.value.insets.bottom; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.bottom = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-      right: computed({
-        get() { return component.value.insets.right; },
-        set(newValue: number) {
-          const insets = component.value.insets;
-          insets.right = newValue;
-          store.commit(INSET_SET_INSETS, insets);
-        },
-      }),
-    };
+});
+
+const right = computed({
+  get() { return props.component.insets.right; },
+  set(newValue: number) {
+    const insets = props.component.insets;
+    insets.right = newValue;
+    store.commit(INSET_SET_INSETS, insets);
   },
 });
 </script>
diff --git a/packages/renderer/src/components/Controls/SourceComponentControls.vue b/packages/renderer/src/components/Controls/SourceComponentControls.vue
index 2c24185..f7c07ae 100644
--- a/packages/renderer/src/components/Controls/SourceComponentControls.vue
+++ b/packages/renderer/src/components/Controls/SourceComponentControls.vue
@@ -6,7 +6,7 @@
     >
       <option
         v-for="aSource in sources"
-        :key="aSource"
+        :key="aSource.name"
         :value="aSource"
         v-text="aSource.name"
       />
@@ -14,37 +14,24 @@
   </Controls>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type SourceComponent from '/@/layout/SourceComponent';
 import { useStore } from '/@/store/app';
 import { SOURCE_SET_SOURCE } from '/@/store/mutation-types';
-import type { PropType} from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
+import { computed } from 'vue';
+import type { Source } from '../../../../shared/src/obs';
 import FormSelect from '/@/components/Form/FormSelect.vue';
 import Controls from './Controls.vue';
-export default defineComponent({
-  name: 'SourceComponentControls',
-  components: {
-    FormSelect,
-    Controls,
-  },
-  props: {
-    component: {
-      type: Object as PropType<SourceComponent>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const store = useStore();
-    const { component } = toRefs(props);
-    const sources = computed(() => store.state.sources);
-    return {
-      source: computed({
-        get(): string { return component.value.source; },
-        set(value) { store.commit(SOURCE_SET_SOURCE, value); },
-      }),
-      sources,
-    };
-  },
+
+const props = defineProps<{
+  component: SourceComponent
+}>();
+
+const store = useStore();
+const sources = computed(() => store.state.sources);
+
+const source = computed({
+  get(): Source | undefined { return props.component.source; },
+  set(value?: Source) { store.commit(SOURCE_SET_SOURCE, value); },
 });
 </script>
diff --git a/packages/renderer/src/components/Form/FormControl.vue b/packages/renderer/src/components/Form/FormControl.vue
index c1a0a00..a6fafcd 100644
--- a/packages/renderer/src/components/Form/FormControl.vue
+++ b/packages/renderer/src/components/Form/FormControl.vue
@@ -6,10 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-});
+defineProps<{
+  label: string
+}>();
 </script>
diff --git a/packages/renderer/src/components/Form/FormNumberInput.vue b/packages/renderer/src/components/Form/FormNumberInput.vue
index 5847a47..ed242e0 100644
--- a/packages/renderer/src/components/Form/FormNumberInput.vue
+++ b/packages/renderer/src/components/Form/FormNumberInput.vue
@@ -5,7 +5,7 @@
         type="number"
         :value="modelValue"
         class="text-right windows:w-24 windows:text-sm windows:border-gray-300 macos:text-system-text-control macos:bg-system-background-control macos:w-full macos:px-2 macos:py-1 macos:rounded"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="modelValueUpdated"
       >
     </FormControl>
     <div v-if="showsSlider">
@@ -13,34 +13,35 @@
         type="range"
         :value="modelValue"
         class="w-full"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="modelValueUpdated"
       >
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import FormControl from './FormControl.vue';
-export default defineComponent({
-  name: 'FormNumberInput',
-  components: {
-    FormControl,
+
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Number,
+    required: true,
   },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-    showsSlider: {
-      type: Boolean,
-      default: false,
-    },
+  showsSlider: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['update:modelValue'],
 });
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+}>();
+
+function modelValueUpdated(event: Event) {
+  emit('update:modelValue', parseInt((event.target as HTMLInputElement).value, 10));
+}
 </script>
diff --git a/packages/renderer/src/components/Form/FormSelect.vue b/packages/renderer/src/components/Form/FormSelect.vue
index deb6cea..bbbe74d 100644
--- a/packages/renderer/src/components/Form/FormSelect.vue
+++ b/packages/renderer/src/components/Form/FormSelect.vue
@@ -24,7 +24,7 @@ export default defineComponent({
       required: true,
     },
     modelValue: {
-      type: any,
+      type: String,
       required: true,
     },
   },
diff --git a/packages/renderer/src/components/NavBar.vue b/packages/renderer/src/components/NavBar.vue
index 1e9dd0a..dea1446 100644
--- a/packages/renderer/src/components/NavBar.vue
+++ b/packages/renderer/src/components/NavBar.vue
@@ -20,21 +20,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { CloudUploadIcon, ChevronDownIcon } from '@heroicons/vue/outline';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
 import ConnectionState from './ConnectionState.vue';
 import SyncPopover from './SyncPopover.vue';
-export default defineComponent({
-  components: {
-    CloudUploadIcon,
-    ChevronDownIcon,
-    Popover,
-    PopoverButton,
-    PopoverPanel,
-    ConnectionState,
-    SyncPopover,
-  },
-});
 </script>
diff --git a/packages/renderer/src/components/Preferences/Content.vue b/packages/renderer/src/components/Preferences/Content.vue
index 01aabff..b83e598 100644
--- a/packages/renderer/src/components/Preferences/Content.vue
+++ b/packages/renderer/src/components/Preferences/Content.vue
@@ -64,76 +64,62 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onMounted, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
 import debounce from 'lodash/debounce';
-import { OBSConnectionState, OBSConnectionOptions, isOBSConnectionOptions } from '../../../../shared/src/obs';
+import type { OBSConnectionOptions} from '../../../../shared/src/obs';
+import { OBSConnectionState, isOBSConnectionOptions } from '../../../../shared/src/obs';
 import { useObsConnectionState } from '/@/integration/obs';
 import Controls from '/@/components/Preferences/Controls.vue';
 import Control from '/@/components/Preferences/Control.vue';
 import { useIsWindows } from '/@/integration/platform';
-export default defineComponent({
-  components: {
-    Controls,
-    Control,
-  },
-  setup() {
-    const connectionState = useObsConnectionState();
-    const connection = ref<OBSConnectionOptions>({
-      host: 'localhost',
-      port: 4444,
-      password: undefined,
-    });
-    const sourceFilter = ref('');
-    const sceneFilter = ref('');
-    const isConnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Disconnected || connectionState.value == OBSConnectionState.Error);
-    const isAbortButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connecting);
-    const isDisconnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connected);
-    const connect = () => {
-      if (isOBSConnectionOptions(connection.value)) {
-        window.obs.connect(connection.value);
-      }
-    };
-    const disconnect = () => {
-      window.obs.disconnect();
-    };
-    onMounted(() => {
-      window.preferences.loadConnectionOptions()
-        .then(newValue => {
-          if (newValue) {
-            connection.value = newValue;
-          }
-        });
 
-      window.preferences.loadSourceFilter()
-        .then(filter => {
-          sourceFilter.value = filter;
-        });
+const isWindows = useIsWindows();
+const connectionState = useObsConnectionState();
+const connection = ref<OBSConnectionOptions>({
+  host: 'localhost',
+  port: 4444,
+  password: undefined,
+});
+
+const sourceFilter = ref('');
+const sceneFilter = ref('');
+const isConnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Disconnected || connectionState.value == OBSConnectionState.Error);
+const isAbortButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connecting);
+const isDisconnectButtonVisible = computed(() => connectionState.value == OBSConnectionState.Connected);
+
+const connect = () => {
+  if (isOBSConnectionOptions(connection.value)) {
+    window.obs.connect(connection.value);
+  }
+};
+const disconnect = () => {
+  window.obs.disconnect();
+};
 
-      window.preferences.loadSceneFilter()
-        .then(filter => {
-          sceneFilter.value = filter;
-        });
+onMounted(() => {
+  window.preferences.loadConnectionOptions()
+    .then(newValue => {
+      if (newValue) {
+        connection.value = newValue;
+      }
+    });
+
+  window.preferences.loadSourceFilter()
+    .then(filter => {
+      sourceFilter.value = filter;
     });
-    watch(sourceFilter, debounce((newFilter: string) => {
-      window.preferences.setSourceFilter(newFilter);
-    }));
-    watch(sceneFilter, debounce((newFilter: string) => {
-      window.preferences.setSceneFilter(newFilter);
-    }));
 
-    const isWindows = useIsWindows();
-    return {
-      connection,
-      connect,
-      disconnect,
-      isConnectButtonVisible,
-      isAbortButtonVisible,
-      isDisconnectButtonVisible,
-      sourceFilter,
-      sceneFilter,
-      isWindows,
-    };
-  },
+  window.preferences.loadSceneFilter()
+    .then(filter => {
+      sceneFilter.value = filter;
+    });
 });
+
+watch(sourceFilter, debounce((newFilter: string) => {
+  window.preferences.setSourceFilter(newFilter);
+}));
+watch(sceneFilter, debounce((newFilter: string) => {
+  window.preferences.setSceneFilter(newFilter);
+}));
 </script>
diff --git a/packages/renderer/src/components/Preferences/Control.vue b/packages/renderer/src/components/Preferences/Control.vue
index c486435..03b5c73 100644
--- a/packages/renderer/src/components/Preferences/Control.vue
+++ b/packages/renderer/src/components/Preferences/Control.vue
@@ -4,23 +4,21 @@
     class="macos:col-span-5 macos:col-end-9 macos:px-2 macos:py-1 macos:rounded macos:text-system-text-control macos:bg-system-background-control windows:mb-2 windows:w-2/3 windows:text-sm windows:border-gray-300"
     :value="modelValue"
     v-bind="$attrs"
-    @input="$emit('update:modelValue', $event.target.value)"
+    @input="modelValueUpdated"
   >
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: 'Control',
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    modelValue: {
-      required: true,
-    },
-  },
-  emits: ['update:modelValue'],
-});
+<script lang="ts" setup>
+defineProps<{
+  label: string,
+  modelValue?: string
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value?: string): void
+}>();
+
+function modelValueUpdated(event: Event) {
+  emits('update:modelValue', (event.target as HTMLInputElement).value);
+}
 </script>
diff --git a/packages/renderer/src/components/Preferences/Controls.vue b/packages/renderer/src/components/Preferences/Controls.vue
index 93d4eb8..5b7f146 100644
--- a/packages/renderer/src/components/Preferences/Controls.vue
+++ b/packages/renderer/src/components/Preferences/Controls.vue
@@ -12,15 +12,8 @@
   </fieldset>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: 'Controls',
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-});
+<script lang="ts" setup>
+defineProps<{
+  label: string
+}>();
 </script>
diff --git a/packages/renderer/src/components/Preferences/Modal.vue b/packages/renderer/src/components/Preferences/Modal.vue
index cfd463f..9a695a9 100644
--- a/packages/renderer/src/components/Preferences/Modal.vue
+++ b/packages/renderer/src/components/Preferences/Modal.vue
@@ -1,19 +1,19 @@
 <template>
   <Dialog
     :open="open"
-    class="fixed inset-x-0 bottom-0 z-10 bg-white flex flex-col"
+    class="fixed inset-x-0 bottom-0 z-10 flex flex-col bg-white"
     style="top: env(titlebar-area-height, 40px);"
     @close="close"
   >
-    <DialogTitle class="text-4xl font-light flex space-x-2 mb-4">
+    <DialogTitle class="flex mb-4 space-x-2 text-4xl font-light">
       <button
-        class="hover:bg-gray-200 px-2 py-2"
+        class="px-2 py-2 hover:bg-gray-200"
         title="Back"
-        @click.prevent="close"
+        @click.prevent="$emit('close')"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8"
+          class="w-8 h-8"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -34,30 +34,18 @@
   </Dialog>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import {
   Dialog,
   DialogTitle,
 } from '@headlessui/vue';
 import Content from './Content.vue';
-export default defineComponent({
-  components: {
-    Dialog,
-    DialogTitle,
-    Content,
-  },
-  props: {
-    open: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  emits: ['close'],
-  setup(_, { emit }) {
-    return {
-      close: () => emit('close'),
-    };
-  },
-});
+
+defineProps<{
+  open: boolean
+}>();
+
+defineEmits<{
+  (e: 'close'): void
+}>();
 </script>
diff --git a/packages/renderer/src/components/Preview.vue b/packages/renderer/src/components/Preview.vue
index 364638b..f5421e7 100644
--- a/packages/renderer/src/components/Preview.vue
+++ b/packages/renderer/src/components/Preview.vue
@@ -14,81 +14,77 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useStore } from '/@/store/app';
-import { computed, defineComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { LayoutNode, Size } from '/@/layout';
 import { ContainerLayoutNode } from '/@/layout';
 import { usePreferredDark } from '@vueuse/core';
-export default defineComponent({
-  name: 'Preview',
-  setup() {
-    const store = useStore();
-    const scale = ref(1);
-    const canvas = ref<HTMLCanvasElement | null>(null);
-    const didChangeSize = (newSize: Size) => {
-      let el = canvas.value;
-      if (!el) { return; }
-      el.style.transformOrigin = '0 0';
-      let aspectRatio = 16 / 9;
-      let width = Math.min(newSize.width, newSize.height * aspectRatio);
-      let height = Math.min(newSize.height, newSize.width / aspectRatio);
-      if (newSize.width > newSize.height) {
-        scale.value = width / 1920;
-        el.style.transform = `scale(${scale.value}, ${scale.value})`;
-        el.style.left = ((newSize.width - width) / 2) + 'px';
-        el.style.top = ((newSize.height - (width / aspectRatio)) / 2) + 'px';
-      } else {
-        scale.value = height / 1080;
-        el.style.transform = `scale(${scale.value}, ${scale.value})`;
-        el.style.left = ((newSize.width - (height * aspectRatio)) / 2) + 'px';
-        el.style.top = ((newSize.height - height) / 2) + 'px';
-      }
-    };
-    const node = computed(() => store.state.rootNode);
-    const prefersDarkMode = usePreferredDark();
-    const renderNode = (node: LayoutNode, context: CanvasRenderingContext2D) => {
-      context.save();
 
-      context.lineWidth = 1 / scale.value;
-      if (node instanceof ContainerLayoutNode) {
-        context.strokeStyle = 'rgb(150, 150, 150)';
-        context.setLineDash([4 / scale.value, 2 / scale.value]);
-      } else {
-        context.strokeStyle = prefersDarkMode.value ? 'white' : 'black';
-        context.setLineDash([]);
-      }
-      context.strokeRect(node.frame.x, node.frame.y, node.frame.width, node.frame.height);
-      context.translate(node.frame.x, node.frame.y);
-      if (node instanceof ContainerLayoutNode) {
-        node.children.forEach(node => renderNode(node, context));
-      }
-      context.restore();
-    };
-    const render = () => {
-      const rootNode = node.value;
-      if (!rootNode) { return; }
-      const context = canvas.value?.getContext('2d');
-      if (!context) { return; }
-      context.clearRect(0, 0, 1920, 1080);
-      renderNode(rootNode, context);
-    };
-    watch(node, () => {
-      render();
-    });
-    watch(canvas, () => {
-      render();
-    });
-    watch(scale, () => {
-      render();
-    });
-    watch(prefersDarkMode, () => {
-      render();
-    });
-    return {
-      canvas,
-      didChangeSize,
-    };
-  },
+const store = useStore();
+const scale = ref(1);
+const canvas = ref<HTMLCanvasElement | null>(null);
+const node = computed(() => store.state.rootNode);
+const prefersDarkMode = usePreferredDark();
+
+const didChangeSize = (newSize: Size) => {
+  let el = canvas.value;
+  if (!el) { return; }
+  el.style.transformOrigin = '0 0';
+  let aspectRatio = 16 / 9;
+  let width = Math.min(newSize.width, newSize.height * aspectRatio);
+  let height = Math.min(newSize.height, newSize.width / aspectRatio);
+  if (newSize.width > newSize.height) {
+    scale.value = width / 1920;
+    el.style.transform = `scale(${scale.value}, ${scale.value})`;
+    el.style.left = ((newSize.width - width) / 2) + 'px';
+    el.style.top = ((newSize.height - (width / aspectRatio)) / 2) + 'px';
+  } else {
+    scale.value = height / 1080;
+    el.style.transform = `scale(${scale.value}, ${scale.value})`;
+    el.style.left = ((newSize.width - (height * aspectRatio)) / 2) + 'px';
+    el.style.top = ((newSize.height - height) / 2) + 'px';
+  }
+};
+
+const renderNode = (node: LayoutNode, context: CanvasRenderingContext2D) => {
+  context.save();
+
+  context.lineWidth = 1 / scale.value;
+  if (node instanceof ContainerLayoutNode) {
+    context.strokeStyle = 'rgb(150, 150, 150)';
+    context.setLineDash([4 / scale.value, 2 / scale.value]);
+  } else {
+    context.strokeStyle = prefersDarkMode.value ? 'white' : 'black';
+    context.setLineDash([]);
+  }
+  context.strokeRect(node.frame.x, node.frame.y, node.frame.width, node.frame.height);
+  context.translate(node.frame.x, node.frame.y);
+  if (node instanceof ContainerLayoutNode) {
+    node.children.forEach(node => renderNode(node, context));
+  }
+  context.restore();
+};
+
+const render = () => {
+  const rootNode = node.value;
+  if (!rootNode) { return; }
+  const context = canvas.value?.getContext('2d');
+  if (!context) { return; }
+  context.clearRect(0, 0, 1920, 1080);
+  renderNode(rootNode, context);
+};
+
+watch(node, () => {
+  render();
+});
+watch(canvas, () => {
+  render();
+});
+watch(scale, () => {
+  render();
+});
+watch(prefersDarkMode, () => {
+  render();
 });
 </script>
diff --git a/packages/renderer/src/components/Sidebar.vue b/packages/renderer/src/components/Sidebar.vue
index c100a30..48102a1 100644
--- a/packages/renderer/src/components/Sidebar.vue
+++ b/packages/renderer/src/components/Sidebar.vue
@@ -7,20 +7,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useStore } from '/@/store/app';
-import { computed, defineComponent } from 'vue';
+import { computed } from 'vue';
 import TreeControl from './Sidebar/TreeControl.vue';
-export default defineComponent({
-  name: 'Sidebar',
-  components: {
-    TreeControl,
-  },
-  setup() {
-    const store = useStore();
-    return {
-      component: computed(() => store.state.rootComponent),
-    };
-  },
-});
+
+const store = useStore();
+const component = computed(() => store.state.rootComponent);
 </script>
diff --git a/packages/renderer/src/components/Sidebar/TreeControl.vue b/packages/renderer/src/components/Sidebar/TreeControl.vue
index 6626896..493b11a 100644
--- a/packages/renderer/src/components/Sidebar/TreeControl.vue
+++ b/packages/renderer/src/components/Sidebar/TreeControl.vue
@@ -13,7 +13,7 @@
         <DisclosureButton v-if="isContainerComponent">
           <ChevronRightIcon
             class="w-4 h-4"
-            :class="open ? &quot;transform rotate-90&quot; : &quot;&quot;"
+            :class="open ? 'transform rotate-90' : ''"
           />
         </DisclosureButton>
         <div
@@ -66,11 +66,11 @@
   </Disclosure>
 </template>
 
-<script lang="ts">
-import type { PropType} from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
-import type { Component} from '/@/layout';
-import { FlexComponent, SourceComponent, ContainerComponent, containerComponents as ContainerComponents, components as LayoutComponents } from '/@/layout';
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+import { computed } from 'vue';
+import type { Component } from '/@/layout';
+import { ContainerComponent, containerComponents as ContainerComponents, components as LayoutComponents } from '/@/layout';
 import {
   Disclosure,
   DisclosureButton,
@@ -79,88 +79,67 @@ import {
 import { ChevronRightIcon } from '@heroicons/vue/solid';
 import { useStore } from '/@/store/app';
 import { ADD_CHILD, SELECT_COMPONENT, EMBED_IN_COMPONENT, DELETE_COMPONENT } from '/@/store/mutation-types';
+
 interface ContainerAction {
   title: string
   action: () => void
 }
-export default defineComponent({
-  name: 'TreeControl',
-  components: {
-    Disclosure,
-    DisclosureButton,
-    DisclosurePanel,
-    ChevronRightIcon,
+
+const props = defineProps({
+  component: {
+    type: Object as PropType<Component>,
+    required: true,
   },
-  props: {
-    component: {
-      type: Object as PropType<Component>,
-      required: true,
-    },
-    indentationLevel: {
-      type: Number,
-      default: 0,
-    },
+  indentationLevel: {
+    type: Number,
+    default: 0,
   },
-  setup(props) {
-    const store = useStore();
-    const { component } = toRefs(props);
-    const selectComponent = () => {
-      store.commit(SELECT_COMPONENT, component.value);
-    };
-    const isSelected = computed(() => {
-      return store.state.selectedComponent?.id == component.value.id;
-    });
-    const isContainerComponent = computed(() => component.value instanceof ContainerComponent);
-    const addFlexComponent = () => {
-      store.commit(ADD_CHILD, { parentId: component.value.id, component: new FlexComponent()});
-    };
-    const addSourceComponent = () => {
-      store.commit(ADD_CHILD, { parentId: component.value.id, component: new SourceComponent()});
-    };
-    const containerActions = computed((): ContainerAction[] => {
-      if (!isContainerComponent.value) {
-        return [];
-      }
-      if (!(component.value instanceof ContainerComponent)) {
-        return [];
-      }
-      let actions: ContainerAction[] = [];
-      for (const property in LayoutComponents) {
-        if (!component.value.canAddChild(LayoutComponents[property])) {
-          continue;
-        }
-        actions.push({
-          title: LayoutComponents[property].displayName,
-          action: () => { store.commit(ADD_CHILD, { parentId: component.value.id, component: new LayoutComponents[property]()}); },
-        });
-      }
-      return actions;
+});
+
+const store = useStore();
+const isSelected = computed(() => {
+  return store.state.selectedComponent?.id == props.component.id;
+});
+const isContainerComponent = computed(() => props.component instanceof ContainerComponent);
+
+const selectComponent = () => {
+  store.commit(SELECT_COMPONENT, props.component);
+};
+
+const containerActions = computed((): ContainerAction[] => {
+  if (!isContainerComponent.value) {
+    return [];
+  }
+  if (!(props.component instanceof ContainerComponent)) {
+    return [];
+  }
+  let actions: ContainerAction[] = [];
+  for (const property in LayoutComponents) {
+    if (!props.component.canAddChild(LayoutComponents[property])) {
+      continue;
+    }
+    actions.push({
+      title: LayoutComponents[property].displayName,
+      action: () => { store.commit(ADD_CHILD, { parentId: props.component.id, component: new LayoutComponents[property]()}); },
     });
-    const embedActions = computed((): ContainerAction[] => {
-      let actions: ContainerAction[] = [];
-      for (const property in ContainerComponents) {
-        actions.push({
-          title: LayoutComponents[property].displayName,
-          action: () => {
-            store.commit(EMBED_IN_COMPONENT, { id: component.value.id, container: new LayoutComponents[property]() });
-          },
-        });
-      }
-      return actions;
+  }
+  return actions;
+});
+
+const embedActions = computed((): ContainerAction[] => {
+  let actions: ContainerAction[] = [];
+  for (const property in ContainerComponents) {
+    actions.push({
+      title: LayoutComponents[property].displayName,
+      action: () => {
+        store.commit(EMBED_IN_COMPONENT, { id: props.component.id, container: new LayoutComponents[property]() });
+      },
     });
-    const deleteComponent = () => {
-      store.commit(DELETE_COMPONENT, { id: component.value.id });
-    };
-    return {
-      selectComponent,
-      isSelected,
-      isContainerComponent,
-      containerActions,
-      embedActions,
-      addFlexComponent,
-      addSourceComponent,
-      deleteComponent,
-    };
-  },
+  }
+  return actions;
 });
+
+const deleteComponent = () => {
+  store.commit(DELETE_COMPONENT, { id: props.component.id });
+};
 </script>
diff --git a/packages/renderer/src/components/SyncPopover.vue b/packages/renderer/src/components/SyncPopover.vue
index bf6b073..3c11588 100644
--- a/packages/renderer/src/components/SyncPopover.vue
+++ b/packages/renderer/src/components/SyncPopover.vue
@@ -8,10 +8,10 @@
         class="w-full text-system-text-control bg-system-background-control"
       >
         <option
-          v-for="scene in scenes"
-          :key="scene"
-          :value="scene"
-          v-text="scene"
+          v-for="aScene in scenes"
+          :key="aScene"
+          :value="aScene"
+          v-text="aScene"
         />
       </select>
     </div>
@@ -27,24 +27,16 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
 import { useStore } from '/@/store/app';
 import { syncLayout } from '/@/integration/obs';
-export default defineComponent({
-  setup() {
-    const store = useStore();
-    const scene = ref('');
-    const scenes = computed(() => store.state.scenes);
-    const sync = () => {
-      if (!store.state.rootNode) { return; }
-      syncLayout(store.state.rootNode, scene.value);
-    };
-    return {
-      scene,
-      scenes,
-      sync,
-    };
-  },
-});
+
+const store = useStore();
+const scene = ref('');
+const scenes = computed(() => store.state.scenes);
+const sync = () => {
+  if (!store.state.rootNode) { return; }
+  syncLayout(store.state.rootNode, scene.value);
+};
 </script>