Removes Qwik from documentation, modifies preact example to be unique

.build.mjs

@@ -180,6 +180,7 @@ async function bundleDeclarations() {
     `${rootDir}/dist/preact/index.d.ts`,
   ])
   await execa("shx", [
+    "mv",
     `${rootDir}/dist/src/solid/index.d.ts`,
     `${rootDir}/dist/solid/index.d.ts`,
   ])

cypress/integration/1-getting-started/animations.spec.js

@@ -37,7 +37,7 @@ describe("the documentation site", () => {
   })
 
   it("animates the react example", () => {
-    cy.get(".react-example button").click()
+    cy.get(".react-example .add").click()
     cy.hasAnimations(5)
   })
 

docs/src/components/CodeExample.vue

@@ -101,27 +101,27 @@ function copyCode(value) {
         >
           <IconReact />React
         </li>
+        <li
+          v-if="'vue' in props.examples"
+          @click="current = 'vue'"
+          :data-selected="current === 'vue' || null"
+        >
+          <IconVue />Vue
+        </li>
         <li
           v-if="'preact' in props.examples"
           @click="current = 'preact'"
           :data-selected="current === 'preact' || null"
         >
           <IconPreact />Preact
-         </li>
-         <li
+        </li>
+        <li
           v-if="'solid' in props.examples"
           @click="current = 'solid'"
           :data-selected="current === 'solid' || null"
         >
           <IconSolid />Solid
         </li>
-        <li
-          v-if="'vue' in props.examples"
-          @click="current = 'vue'"
-          :data-selected="current === 'vue' || null"
-        >
-          <IconVue />Vue
-        </li>
         <li
           v-if="'svelte' in props.examples"
           @click="current = 'svelte'"

docs/src/components/Navigation.vue

@@ -39,12 +39,12 @@ if (typeof window !== "undefined") {
       <li><a href="#installation">Installation</a></li>
       <li><a href="#usage">Usage</a></li>
       <li><a href="#usage-react">React</a></li>
+      <li><a href="#usage-vue">Vue</a></li>
       <li><a href="#usage-preact">Preact</a></li>
       <li><a href="#usage-solid">Solid</a></li>
-      <li><a href="#usage-vue">Vue</a></li>
       <li><a href="#usage-svelte">Svelte</a></li>
       <li><a href="#usage-angular">Angular</a></li>
-      <li><a href="#usage-qwik">Qwik</a></li>
+      <!-- <li><a href="#usage-qwik">Qwik</a></li> -->
       <li><a href="#usage-disable">Disable</a></li>
       <li><a href="#examples">Examples</a></li>
       <li><a href="#plugins">Plugins</a></li>

docs/src/examples/intro/index.ts

@@ -12,20 +12,20 @@ export default {
     ext: "jsx",
     language: "jsx",
   },
-  preact: {
-    example: preactExample,
-    ext: "jsx",
-    language: "jsx",
+  vue: {
+    ext: "vue",
+    language: "html",
+    example: vueExample,
   },
   solid: {
     example: solidExample,
     ext: "jsx",
     language: "jsx",
   },
-  vue: {
-    ext: "vue",
-    language: "html",
-    example: vueExample,
+  preact: {
+    example: preactExample,
+    ext: "jsx",
+    language: "jsx",
   },
   svelte: {
     example: svelteExample,

docs/src/examples/preact/ActualPreactApp.vue

@@ -2,23 +2,28 @@
 import { useAutoAnimate } from "../../../../src/vue/index.ts"
 import { ref } from "vue"
 const [parent] = useAutoAnimate()
-const items = ref([0, 1, 2])
+const items = ref(["🎁", "📦", "🚚", "💪", "🐽", "🐸", "🐻", "🪱", "🪳"])
+setInterval(() => {
+  items.value.unshift(items.value.pop())
+}, 500)
 </script>
 
 <template>
   <div class="example preact-example">
     <ul ref="parent">
       <li v-for="item in items" :key="item">{{ item }}</li>
     </ul>
-    <button @click="items.push(items.length)" class="button button--alt">
-      Add number
-    </button>
   </div>
 </template>
 
 <style scoped>
 ul {
-  list-style-type: disc;
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0.5em;
 }
 li::before {
   display: none;

docs/src/examples/preact/index.ts

@@ -2,21 +2,26 @@ export default {
   preact: {
     language: "jsx",
     ext: "jsx",
-	example: `import { useState } from 'preact/hooks'
+    example: `import { useState } from 'preact/hooks'
 import { useAutoAnimate } from '@formkit/auto-animate/preact'
 
 const App = function () {
-  const [items, setItems] = useState([0, 1, 2])
+  const [items, setItems] = useState(["🎁", "📦", "🚚", "💪", "🐽", "🐸", "🐻", "🪱", "🪳"])
   const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
-  const add = () => setItems([...items, items.length])
+
+
+  useEffect(() => {
+    setInterval(() => {
+      setItems(items.unshift(items.pop()))
+    }, 500)
+  }, [])
+
   return <>
   <ul ref={parent}>
     {items.map(
       item => <li key={item}>{ item }</li>
     )}
   </ul>
-  <button onClick={add}>Add number</button>
-  <button onClick={() => enableAnimations(false)}>Disable</button>
 </>
 }
 

docs/src/examples/react/ActualReactApp.vue

@@ -10,7 +10,7 @@ const items = ref([0, 1, 2])
     <ul ref="parent">
       <li v-for="item in items" :key="item">{{ item }}</li>
     </ul>
-    <button @click="items.push(items.length)" class="button button--alt">
+    <button @click="items.push(items.length)" class="button button--alt add">
       Add number
     </button>
     <button @click="setEnabled(false)" class="button button--alt">

docs/src/sections/SectionUsage.vue

@@ -31,7 +31,6 @@ import IconAngular from "../components/IconAngular.vue"
 import IconSvelte from "../components/IconSvelte.vue"
 import IconSolid from "../components/IconSolid.vue"
 import IconQwik from "../components/IconQwik.vue"
-
 </script>
 <template>
   <section id="usage">
@@ -127,23 +126,23 @@ import IconQwik from "../components/IconQwik.vue"
         </a>
       </li>
       <li>
-        <a href="#usage-solid"><span>Solid</span><IconSolid /></a>
+        <a href="#usage-vue"><span>Vue</span><IconVue /></a>
       </li>
       <li>
         <a href="#usage-preact"><span>Preact</span><IconPreact /></a>
       </li>
       <li>
-        <a href="#usage-vue"><span>Vue</span><IconVue /></a>
+        <a href="#usage-solid"><span>Solid</span><IconSolid /></a>
       </li>
       <li>
         <a href="#usage-svelte"><span>Svelte</span><IconSvelte /></a>
       </li>
       <li>
         <a href="#usage-angular"><span>Angular</span><IconAngular /></a>
       </li>
-       <li>
+      <!-- <li>
         <a href="#usage-qwik"><span>Qwik</span><IconQwik /></a>
-      </li>
+      </li> -->
     </ul>
     <h2 id="usage-react">React hook</h2>
     <p>
@@ -154,34 +153,6 @@ import IconQwik from "../components/IconQwik.vue"
     </p>
     <CodeExample :examples="reactHook" title="App" />
     <ActualReactApp />
-	<h2 id="usage-preact">Preact hook</h2>
-    <p>
-      Preact users can use the hook <code>useAutoAnimate</code> by importing it
-      from <code>@formkit/auto-animate/preact</code>. This hook returns a ref to
-      apply to the parent element, as well as a function to
-      <a href="#usage-disable">enable or disable</a> animations.
-    </p>
-    <CodeExample :examples="preactHook" title="App" />
-    <ActualPreactApp />
-
-
-    <h2 id="usage-solid">Solid Primitive</h2>
-    <p>
-      Solid users can use the function <code>createAutoAnimate</code> by
-      importing it from <code>@formkit/auto-animate/solid</code>. This hook
-      returns a ref to apply to the parent element, as well as a function to
-      <a href="#usage-disable">enable or disable</a> animations.
-    </p>
-    <CodeExample :examples="solidPrimitive" title="App" />
-    <ActualSolidApp />
-
-    <h3 id="usage-solid-directive">Solid Directive</h3>
-    <p>
-      Solid users can also use the directive <code>autoAnimate</code> by
-      importing it from <code>@formkit/auto-animate/solid</code>.
-    </p>
-    <CodeExample :examples="solidDirective" title="App" />
-
     <h2 id="usage-vue">Vue directive</h2>
     <p>
       Vue users can globally register the
@@ -231,6 +202,33 @@ import IconQwik from "../components/IconQwik.vue"
       <code>useAutoAnimate({ duration: 100 })</code>
     </AsideTip>
 
+    <h2 id="usage-preact">Preact hook</h2>
+    <p>
+      Preact users can use the hook <code>useAutoAnimate</code> by importing it
+      from <code>@formkit/auto-animate/preact</code>. This hook returns a ref to
+      apply to the parent element, as well as a function to
+      <a href="#usage-disable">enable or disable</a> animations.
+    </p>
+    <CodeExample :examples="preactHook" title="App" />
+    <ActualPreactApp />
+
+    <h2 id="usage-solid">Solid Primitive</h2>
+    <p>
+      Solid users can use the function <code>createAutoAnimate</code> by
+      importing it from <code>@formkit/auto-animate/solid</code>. This hook
+      returns a ref to apply to the parent element, as well as a function to
+      <a href="#usage-disable">enable or disable</a> animations.
+    </p>
+    <CodeExample :examples="solidPrimitive" title="App" />
+    <ActualSolidApp />
+
+    <h3 id="usage-solid-directive">Solid Directive</h3>
+    <p>
+      Solid users can also use the directive <code>autoAnimate</code> by
+      importing it from <code>@formkit/auto-animate/solid</code>.
+    </p>
+    <CodeExample :examples="solidDirective" title="App" />
+
     <h2 id="usage-svelte">Svelte action</h2>
     <p>
       The root <code>autoAnimate</code> function can be directly used as a
@@ -268,15 +266,14 @@ import IconQwik from "../components/IconQwik.vue"
       <code>&lt;ul auto-animate [options]="{ duration: 100 }"&gt;</code>
     </AsideTip>
 
-    <h2 id="usage-qwik">Qwik hook</h2>
+    <!-- <h2 id="usage-qwik">Qwik hook</h2>
     <p>
       Qwik users can use the hook <code>useAutoAnimate</code> by importing it
       from <code>@formkit/auto-animate/qwik</code>. This hook returns a ref to
       apply to the parent element, as well as a function to
       <a href="#usage-disable">enable or disable</a> animations.
     </p>
-    <CodeExample :examples="qwikHook" title="App" />
-
+    <CodeExample :examples="qwikHook" title="App" /> -->
 
     <h2 id="usage-disable">Disable animations</h2>
     <p>