fix: improve and update docs

closes #232

README.md

@@ -59,36 +59,33 @@ Check out the documentation for the package you want to use:
 * [@viselect/react](packages/react) - [React](https://reactjs.org/) wrapper.
 * [@viselect/vue](packages/vue)  - [Vue3](https://v3.vuejs.org/) wrapper.
 
-> Check out [recipes](packages/vanilla/recipes.md) for commonly asked questions and how to solve them using the standart library!
+> Check out [recipes](packages/vanilla/recipes.md) for commonly asked questions and how to solve them using the standard library!
 > For information about events and more check out the [vanilla readme](packages/vanilla/README.md)!
 
 ### Browser support
 
-This library will always have the previous year as its target. For 2021 for example the target will be ES2020.
-It always provides both a `UMD` (`.js`) and `.mjs` version. If you want to support legacy browsers, please use the feature of your bundler to transpile dependencie. In case of
-webpack and babel (give [vite](https://vitejs.dev/) a try, it's awesome) you'll have to install corresponding plugins such
-as [babel-plugin-proposal-optional-chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) and include the dependency from `node_modules` which is normally
-entirely excluded from being processed.
+This library will always produce an ESNext bundle.
+If you want to support legacy browsers, please use the feature of your bundler to transpile dependencies.
+In case of webpack and babel (give [vite](https://vitejs.dev/) a try, it's awesome) you'll have to install corresponding plugins such as [babel-plugin-proposal-optional-chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) and include the dependency from `node_modules` which is normally entirely excluded from being processed.
 
 I do this to provide maximum flexibility and give those who target ESNext a chance to make full use of how this library is bundled.
 Everything else is just a matter of configuration :)
 
 ### Is this library the right choice for me?
 
-Viselect primarily focuses on being a high-performant engine to select elements with various boundaries, behaviours and modes in your browser.
-Viselect is to "full-blown libraries" what is [popper.js](https://popper.js.org/) to [tippy.js](https://atomiks.github.io/tippyjs/) - the _core_ of your feature / of another
-library.
+Viselect primarily focuses on being a high-performant engine to select elements with various boundaries, behaviors, and modes in your browser.
+Viselect is to "full-blown libraries" what is [popper.js](https://popper.js.org/) to [tippy.js](https://atomiks.github.io/tippyjs/) - the _core_ of your feature.
 
 ### Development
 
 Use the following commands to work on this locally (we use [lerna](https://lerna.js.org/) to manage this):
 
-* `npm run dev` _- Spawns a dev-server for all packages. Every framework-dependend package is bundled with the vanilla version._
+* `npm run dev` _- Spawns a dev-server for all packages. Every framework-dependent package is bundled with the vanilla version._
 * `npm run build` _- Builds all packages in parallel._
 * `npm run lint:fix` _- Lints and fixes all errors in all packages._
 
 For the development servers [vite](https://vitejs.dev/) is used. It's superb, you should give it a try.
-To bundle it we use [rollup](https://rollupjs.org/) (which is btw also used by vite behind the scenes) to have full control over how the bundle looks like.
+To bundle it, we use [rollup](https://rollupjs.org/) (which is btw also used by vite behind the scenes) to have full control over how the bundle looks like.
 
 ### Releasing a new version
 

packages/preact/README.md

@@ -45,6 +45,10 @@
 
 <br>
 
+> [!NOTE]
+> This is merely a convenience wrapper around [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla).
+> The core API is fairly simple, if you want to have full control over it, you should roll out your own wrapper in your app.
+
 ### Installation
 
 Install using your package manager of choice:
@@ -53,7 +57,7 @@ Install using your package manager of choice:
 npm install @viselect/preact
 ```
 
-Last but not least you'll need to add some basic styles to make your selection-area visible:
+Last but not least, you'll need to add some basic styles to make your selection-area visible:
 
 ```css
 .selection-area {
@@ -63,9 +67,9 @@ Last but not least you'll need to add some basic styles to make your selection-a
 }
 ```
 
-Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`). This however can cause problems with the actual
-selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)). If you don't care about
-text-selection, add the following to the container where all your selectables are located:
+Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`).
+This, however, can cause problems with the actual selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)).
+If you don't care about text-selection, add the following to the container where all your selectables are located:
 
 ```css
 .container {

packages/preact/src/SelectionArea.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable no-use-before-define */
 import VanillaSelectionArea from '@viselect/vanilla';
-import {SelectionEvents, SelectionOptions} from '@viselect/vanilla';
+import {SelectionEvents, PartialSelectionOptions} from '@viselect/vanilla';
 import {createContext, createRef, FunctionalComponent, JSX} from 'preact';
 import {useEffect, useContext, useState} from 'preact/hooks';
 
-export interface SelectionAreaProps extends Omit<Partial<SelectionOptions>, 'boundaries'>, JSX.HTMLAttributes<HTMLDivElement> {
+export interface SelectionAreaProps extends PartialSelectionOptions, JSX.HTMLAttributes<HTMLDivElement> {
     id?: string;
     className?: string;
     onBeforeStart?: SelectionEvents['beforestart'];
@@ -48,9 +48,13 @@ export const SelectionArea: FunctionalComponent<SelectionAreaProps> = props => {
 
     return (
         <SelectionContext.Provider value={selectionState}>
-            <div ref={root} className={props.className} id={props.id}>
-                {props.children}
-            </div>
+            {props.boundaries ? (
+                props.children
+            ) : (
+                <div ref={root} className={props.className} id={props.id}>
+                    {props.children}
+                </div>
+            )}
         </SelectionContext.Provider>
     );
 };

packages/react/README.md

@@ -45,6 +45,10 @@
 
 <br>
 
+> [!NOTE]
+> This is merely a convenience wrapper around [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla).
+> The core API is fairly simple, if you want to have full control over it, you should roll out your own wrapper in your app.
+
 ### Installation
 
 Install using your package manager of choice:
@@ -56,7 +60,7 @@ npm install @viselect/react
 > If you're (still) using CRA, you may run into issues while using the bundle provided.
 > See [this comment](https://github.com/facebook/create-react-app/issues/8445#issuecomment-588545858) for how to fix it.
 
-Last but not least you'll need to add some basic styles to make your selection-area visible:
+Last but not least, you'll need to add some basic styles to make your selection-area visible:
 
 ```css
 .selection-area {
@@ -66,9 +70,9 @@ Last but not least you'll need to add some basic styles to make your selection-a
 }
 ```
 
-Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`). This however can cause problems with the actual
-selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)). If you don't care about
-text-selection, add the following to the container where all your selectables are located:
+Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`).
+This, however, can cause problems with the actual selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)).
+If you don't care about text-selection, add the following to the container where all your selectables are located:
 
 ```css
 .container {

packages/react/src/SelectionArea.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-use-before-define */
 import VanillaSelectionArea from '@viselect/vanilla';
-import {SelectionEvents, SelectionOptions} from '@viselect/vanilla';
+import {SelectionEvents, PartialSelectionOptions} from '@viselect/vanilla';
 import React, {useEffect, createContext, useContext, useRef, useState} from 'react';
 
-export interface SelectionAreaProps extends Partial<SelectionOptions>, React.HTMLAttributes<HTMLDivElement> {
+export interface SelectionAreaProps extends PartialSelectionOptions, React.HTMLAttributes<HTMLDivElement> {
     id?: string;
     className?: string;
     onBeforeStart?: SelectionEvents['beforestart'];

packages/vanilla/README.md

@@ -70,7 +70,7 @@ import SelectionArea from "https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/v
 
 ### Getting started
 
-Last but not least you'll need to add some basic styles to make your selection-area visible:
+Last but not least, you'll need to add some basic styles to make your selection-area visible:
 
 ```css
 .selection-area {
@@ -80,9 +80,9 @@ Last but not least you'll need to add some basic styles to make your selection-a
 }
 ```
 
-Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`). This however can cause problems with the actual
-selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)). If you don't care about
-text-selection, add the following to the container where all your selectables are located:
+Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`).
+This, however, can cause problems with the actual selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)).
+If you don't care about text-selection, add the following to the container where all your selectables are located:
 
 ```css
 .container {
@@ -268,7 +268,7 @@ Every event comes with the following properties:
 ```typescript
 {
     selection: SelectionArea // Current instance
-    event: TouchEvent | MouseEvent | null // TouchEvent, MouseEvent or `null` if triggered manually
+    event: TouchEvent | MouseEvent | null // TouchEvent, MouseEvent, or `null` if triggered manually
     store: {
         touched: Element[] // Touched elements
         selected: Element[] // Elements from the currently active selection (each click, drag counts as a single "selection") 

packages/vue/README.md

@@ -45,6 +45,10 @@
 
 <br>
 
+> [!NOTE]
+> This is merely a convenience wrapper around [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla).
+> The core API is fairly simple, if you want to have full control over it, you should roll out your own wrapper in your app.
+
 ### Installation
 
 Install using your package manager of choice:
@@ -53,7 +57,7 @@ Install using your package manager of choice:
 npm install @viselect/vue
 ```
 
-Last but not least you'll need to add some basic styles to make your selection-area visible:
+Last but not least, you'll need to add some basic styles to make your selection-area visible:
 
 ```css
 .selection-area {
@@ -63,9 +67,9 @@ Last but not least you'll need to add some basic styles to make your selection-a
 }
 ```
 
-Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`). This however can cause problems with the actual
-selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)). If you don't care about
-text-selection, add the following to the container where all your selectables are located:
+Additionally, to not interfere with text-selection, selection-js won't prevent any default events anymore (as of `v2.0.3`).
+This, however, can cause problems with the actual selection ("introduced" by [#99](https://github.com/Simonwep/selection/pull/99), reported in [#103](https://github.com/Simonwep/selection/issues/103)).
+If you don't care about text-selection, add the following to the container where all your selectables are located:
 
 ```css
 .container {
@@ -75,7 +79,7 @@ text-selection, add the following to the container where all your selectables ar
 
 ### Usage
 
-> Events are handled using props because you cannot return a value in events synchronously.
+> Events are handled using props because you can’t return a value in events synchronously.
 
 ```vue
 <template>
@@ -145,15 +149,15 @@ It's possible to get the current `SelectionArea`-instance via [template refs](ht
 </template>
 
 <script lang="ts" setup>
-import type {SelectionAreaInstance} from '@viselect/vue';
-import {ref, reactive, onMounted} from 'vue';
+import {SelectionArea} from '@viselect/vue';
+import {ref, reactive, watchEffect} from 'vue';
 
 const selected = reactive<Set<number>>(new Set());
-const selectionAreaRef = ref<SelectionAreaInstance>()
+const selectionAreaRef = ref<InstanceType<typeof SelectionArea>>();
 
-onMounted(() => {
-    // log current selection
-    console.log(selectionAreaRef.value?.selection)
-})
+watchEffect(() => {
+  // log selection instance
+  console.log(selectionAreaRef.value?.selection)
+});
 </script>
 ```

packages/vue/src/SelectionArea.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import SelectionArea, {SelectionEvent, SelectionOptions} from '@viselect/vanilla';
+import SelectionArea, {SelectionEvent, PartialSelectionOptions} from '@viselect/vanilla';
 import {onBeforeUnmount, ref, watchEffect, shallowRef} from 'vue';
 
 const emit = defineEmits<{
@@ -18,7 +18,7 @@ const emit = defineEmits<{
 }>();
 
 const props = defineProps<{
-  options: Omit<SelectionOptions, 'boundaries'>;
+  options: Omit<PartialSelectionOptions, 'boundaries'>;
 }>();
 
 const container = ref<HTMLDivElement>();