refactor: minor simplifications in react, preact and vue packages

Author: simonwep

packages/preact/src/SelectionArea.tsx

@@ -13,21 +13,20 @@ export interface SelectionAreaProps extends PartialSelectionOptions, JSX.HTMLAtt
     onStop?: SelectionEvents['stop'];
 }
 
-const SelectionContext = createContext<VanillaSelectionArea  | undefined>(undefined);
+const SelectionContext = createContext<VanillaSelectionArea | undefined>(undefined);
 
 export const useSelection = () => useContext(SelectionContext);
 
 export const SelectionArea: FunctionalComponent<SelectionAreaProps> = props => {
-    const [selectionState, setSelection] = useState<VanillaSelectionArea | undefined>(undefined);
+    const [instance, setInstance] = useState<VanillaSelectionArea | undefined>(undefined);
     const root = createRef<HTMLDivElement>();
 
     useEffect(() => {
         /* eslint-disable @typescript-eslint/no-unused-vars */
-        const {onBeforeStart, onBeforeDrag, onStart, onMove, onStop, ...opt} = props;
-        const areaBoundaries = root.current as HTMLElement;
+        const {boundaries = root.current, onBeforeStart, onBeforeDrag, onStart, onMove, onStop, ...opt} = props;
 
         const selection = new VanillaSelectionArea({
-            boundaries: areaBoundaries,
+            boundaries: boundaries as HTMLElement,
             ...opt
         });
 
@@ -37,16 +36,16 @@ export const SelectionArea: FunctionalComponent<SelectionAreaProps> = props => {
         selection.on('move', evt => props.onMove?.(evt));
         selection.on('stop', evt => props.onStop?.(evt));
 
-        setSelection(selection);
+        setInstance(selection);
 
         return () => {
             selection.destroy();
-            setSelection(undefined);
+            setInstance(undefined);
         };
     }, []);
 
     return (
-        <SelectionContext.Provider value={selectionState}>
+        <SelectionContext.Provider value={instance}>
             {props.boundaries ? (
                 props.children
             ) : (

packages/react/src/SelectionArea.tsx

@@ -12,21 +12,20 @@ export interface SelectionAreaProps extends PartialSelectionOptions, React.HTMLA
     onStop?: SelectionEvents['stop'];
 }
 
-const SelectionContext = createContext<VanillaSelectionArea  | undefined>(undefined);
+const SelectionContext = createContext<VanillaSelectionArea | undefined>(undefined);
 
 export const useSelection = () => useContext(SelectionContext);
 
 export const SelectionArea: React.FunctionComponent<SelectionAreaProps> = props => {
-    const [selectionState, setSelection] = useState<VanillaSelectionArea | undefined>(undefined);
+    const [instance, setInstance] = useState<VanillaSelectionArea | undefined>(undefined);
     const root = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         /* eslint-disable @typescript-eslint/no-unused-vars */
-        const {boundaries, onBeforeStart, onBeforeDrag, onStart, onMove, onStop, ...opt} = props;
-        const areaBoundaries = boundaries ? boundaries : (root.current as HTMLElement);
+        const {boundaries = root.current, onBeforeStart, onBeforeDrag, onStart, onMove, onStop, ...opt} = props;
 
         const selection = new VanillaSelectionArea({
-            boundaries: areaBoundaries,
+            boundaries: boundaries as HTMLElement,
             ...opt
         });
 
@@ -36,16 +35,16 @@ export const SelectionArea: React.FunctionComponent<SelectionAreaProps> = props
         selection.on('move', evt => props.onMove?.(evt));
         selection.on('stop', evt => props.onStop?.(evt));
 
-        setSelection(selection);
+        setInstance(selection);
 
         return () => {
             selection.destroy();
-            setSelection(undefined);
+            setInstance(undefined);
         };
     }, []);
 
     return (
-        <SelectionContext.Provider value={selectionState}>
+        <SelectionContext.Provider value={instance}>
             {props.boundaries ? (
                 props.children
             ) : (

packages/vanilla/src/utils/intersects.ts

@@ -1,4 +1,4 @@
-export type Intersection = 'center' | 'cover' | 'touch'
+export type Intersection = 'center' | 'cover' | 'touch';
 
 /**
  * Check if two DOM-Elements intersects each other.

packages/vanilla/src/utils/matchesTrigger.ts

@@ -10,13 +10,13 @@ export type Modifier = 'ctrl'
     | 'alt'
     | 'shift';
 
-export type Trigger = MouseButton | MouseButtonWithModifiers;
-
 export type MouseButtonWithModifiers =  {
     button: MouseButton,
     modifiers: Modifier[]
 };
 
+export type Trigger = MouseButton | MouseButtonWithModifiers;
+
 /**
  * Determines whether a MouseEvent should execute until completion depending on
  * which button and modifier(s) are active for the MouseEvent.

packages/vue/src/SelectionArea.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import SelectionArea, {SelectionEvent, PartialSelectionOptions} from '@viselect/vanilla';
-import {onBeforeUnmount, ref, watchEffect, shallowRef} from 'vue';
+import {onBeforeUnmount, shallowRef, useTemplateRef, watch} from 'vue';
 
 const emit = defineEmits<{
   (e: 'before-start', v: SelectionEvent): void;
@@ -21,14 +21,14 @@ const props = defineProps<{
   options: Omit<PartialSelectionOptions, 'boundaries'>;
 }>();
 
-const container = ref<HTMLDivElement>();
+const container = useTemplateRef('container');
 const instance = shallowRef<SelectionArea | undefined>();
 
-watchEffect(() => {
-  if (container.value) {
+watch(container, (element) => {
+  if (element) {
     instance.value?.destroy();
     instance.value = new SelectionArea({
-      boundaries: container.value,
+      boundaries: element,
       ...props.options
     });
 
@@ -42,7 +42,6 @@ watchEffect(() => {
   }
 });
 
-
 onBeforeUnmount(() => {
   instance.value?.destroy();
 });