added support for Preact

Author: cszackrison

.build.mjs

@@ -56,6 +56,24 @@ async function reactBuild() {
   await fs.writeFile(resolve(rootDir, "dist/react/index.mjs"), raw)
 }
 
+async function preactBuild() {
+  info("Rolling up Preact package")
+  await execa("npx", [
+    "rollup",
+    "-c",
+    "rollup.config.js",
+    "--environment",
+    "FRAMEWORK:preact",
+  ])
+  /**
+   * This is a super hack — for some reason these imports need to be explicitly
+   * to .mjs files so...we make it so.
+   */
+  let raw = await fs.readFile(resolve(rootDir, "dist/preact/index.mjs"), "utf8")
+  raw = raw.replace("from '../index'", "from '../index.mjs'")
+  await fs.writeFile(resolve(rootDir, "dist/preact/index.mjs"), raw)
+}
+
 async function vueBuild() {
   info("Rolling up Vue package")
   await execa("npx", [
@@ -121,6 +139,11 @@ async function bundleDeclarations() {
     `${rootDir}/dist/src/react/index.d.ts`,
     `${rootDir}/dist/react/index.d.ts`,
   ])
+  await execa("shx", [
+    "mv",
+    `${rootDir}/dist/src/preact/index.d.ts`,
+    `${rootDir}/dist/preact/index.d.ts`,
+  ])
   await execa("shx", [
     "mv",
     `${rootDir}/dist/src/vue/index.d.ts`,
@@ -218,6 +241,7 @@ await clean()
 await baseBuild()
 await baseBuildMin()
 await reactBuild()
+await preactBuild()
 await vueBuild()
 await angularBuild()
 await declarationsBuild()

docs/src/components/CodeExample.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import IconVue from "./IconVue.vue"
 import IconReact from "./IconReact.vue"
+import IconPreact from "./IconPreact.vue"
 import IconHTML from "./IconHTML.vue"
 import IconYarn from "./IconYarn.vue"
 import IconNPM from "./IconNPM.vue"
@@ -12,7 +13,7 @@ import { computed, PropType, ref } from "vue"
 import { vAutoAnimate } from "../../../src"
 import "../../assets/prism.css"
 
-type LanguageOption = "react" | "vue" | "html"
+type LanguageOption = "react" | "preact" | "vue" | "html"
 
 type Language = {
   ext: "jsx" | "vue" | "html"
@@ -98,6 +99,13 @@ function copyCode(value) {
         >
           <IconReact />React
         </li>
+        <li
+          v-if="'preact' in props.examples"
+          @click="current = 'preact'"
+          :data-selected="current === 'preact' || null"
+        >
+          <IconPreact />Preact
+        </li>
         <li
           v-if="'vue' in props.examples"
           @click="current = 'vue'"

docs/src/components/IconPreact.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="296px" height="296px" viewBox="-20 0 296 296" version="1.1" preserveAspectRatio="xMidYMid">
+	<g>
+		<polygon fill="#673AB8" points="128 0 256 73.8999491 256 221.699847 128 295.599796 0 221.699847 0 73.8999491"/>
+		<path d="M34.8647584,220.478469 C51.8814262,242.25881 105.959701,225.662965 157.014868,185.774297 C208.070035,145.885628 237.255632,97.428608 220.238964,75.6482664 C203.222296,53.8679249 149.144022,70.4637701 98.0888543,110.352439 C47.0336869,150.241107 17.8480906,198.698127 34.8647584,220.478469 Z M42.1343351,214.798853 C36.4908625,207.575537 38.9565723,193.395881 49.7081913,175.544904 C61.0297348,156.747677 80.2490923,135.997367 103.76847,117.622015 C127.287848,99.2466634 152.071368,85.6181573 173.049166,79.1803727 C192.970945,73.066665 207.325915,74.1045667 212.969387,81.3278822 C218.61286,88.5511977 216.14715,102.730854 205.395531,120.581832 C194.073987,139.379058 174.85463,160.129368 151.335252,178.50472 C127.815874,196.880072 103.032354,210.508578 82.054556,216.946362 C62.1327769,223.06007 47.7778077,222.022168 42.1343351,214.798853 Z" fill="#FFFFFF"/>
+		<path d="M220.238964,220.478469 C237.255632,198.698127 208.070035,150.241107 157.014868,110.352439 C105.959701,70.4637701 51.8814262,53.8679249 34.8647584,75.6482664 C17.8480906,97.428608 47.0336869,145.885628 98.0888543,185.774297 C149.144022,225.662965 203.222296,242.25881 220.238964,220.478469 Z M212.969387,214.798853 C207.325915,222.022168 192.970945,223.06007 173.049166,216.946362 C152.071368,210.508578 127.287848,196.880072 103.76847,178.50472 C80.2490923,160.129368 61.0297348,139.379058 49.7081913,120.581832 C38.9565723,102.730854 36.4908625,88.5511977 42.1343351,81.3278822 C47.7778077,74.1045667 62.1327769,73.066665 82.054556,79.1803727 C103.032354,85.6181573 127.815874,99.2466634 151.335252,117.622015 C174.85463,135.997367 194.073987,156.747677 205.395531,175.544904 C216.14715,193.395881 218.61286,207.575537 212.969387,214.798853 Z" fill="#FFFFFF"/>
+		<path d="M127.551861,167.666971 C138.378632,167.666971 147.155465,158.890139 147.155465,148.063368 C147.155465,137.236596 138.378632,128.459764 127.551861,128.459764 C116.72509,128.459764 107.948257,137.236596 107.948257,148.063368 C107.948257,158.890139 116.72509,167.666971 127.551861,167.666971 L127.551861,167.666971 Z" fill="#FFFFFF"/>
+	</g>
+  </svg>
+</template>

docs/src/components/Navigation.vue

@@ -39,6 +39,7 @@ 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-preact">Preact</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>

docs/src/examples/intro/index.ts

@@ -1,5 +1,6 @@
 import vueExample from "./intro.vue?raw"
 import reactExample from "./intro.jsx?raw"
+import preactExample from "./intro-preact.jsx?raw"
 import htmlExample from "./intro.html?raw"
 import svelteExample from "./intro.svelte?raw"
 import angularExample from "./intro.angular?raw"
@@ -10,6 +11,11 @@ export default {
     ext: "jsx",
     language: "jsx",
   },
+  preact: {
+    example: preactExample,
+    ext: "jsx",
+    language: "jsx",
+  },
   vue: {
     ext: "vue",
     language: "html",

docs/src/examples/intro/intro-preact.jsx

@@ -0,0 +1,10 @@
+import { useAutoAnimate } from '@formkit/auto-animate/preact'
+
+function MyList () {
+  const [animationParent] = useAutoAnimate()
+  return (
+    <ul ref={animationParent}>
+      {/* 🪄 Magic animations for your list */}
+    </ul>
+  )
+}

docs/src/examples/preact/ActualPreactApp.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { useAutoAnimate } from "../../../../src/vue/index.ts"
+import { ref } from "vue"
+const [parent] = useAutoAnimate()
+const items = ref([0, 1, 2])
+</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;
+}
+li::before {
+  display: none;
+}
+</style>

docs/src/examples/preact/index.ts

@@ -0,0 +1,25 @@
+export default {
+  preact: {
+    language: "jsx",
+    ext: "jsx",
+	example: `import { useState } from 'preact/hooks'
+import { useAutoAnimate } from '@formkit/auto-animate/preact'
+
+const App = function () {
+  const [items, setItems] = useState([0, 1, 2])
+  const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
+  const add = () => setItems([...items, items.length])
+  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>
+</>
+}
+
+export default App`,
+  },
+}

docs/src/sections/SectionUsage.vue

@@ -10,8 +10,10 @@ import {
 } from "../examples/vue"
 import { angularDirectiveMain, angularDirectiveApp } from "../examples/angular"
 import reactHook from "../examples/react"
+import preactHook from "../examples/preact"
 import disabledExamples from "../examples/disable"
 import ActualReactApp from "../examples/react/ActualReactApp.vue"
+import ActualPreactApp from "../examples/preact/ActualPreactApp.vue"
 import ActualDropdown from "../examples/dropdown/ActualDropdown.vue"
 import svelteAction from "../examples/svelte"
 import ActualSvelteApp from "../examples/svelte/ActualSvelteApp.vue"
@@ -20,6 +22,7 @@ import ActualVueAppHook from "../examples/vue/ActualVueAppHook.vue"
 import ActualAngularApp from "../examples/angular/ActualAngularApp.vue"
 import ActualDisable from "../examples/disable/ActualDisable.vue"
 import IconReact from "../components/IconReact.vue"
+import IconPreact from "../components/IconPreact.vue"
 import IconVue from "../components/IconVue.vue"
 import IconAngular from "../components/IconAngular.vue"
 import IconSvelte from "../components/IconSvelte.vue"
@@ -111,6 +114,9 @@ import IconSvelte from "../components/IconSvelte.vue"
       <li>
         <a href="#usage-react"><span>React</span><IconReact /></a>
       </li>
+      <li>
+        <a href="#usage-preact"><span>Preact</span><IconPreact /></a>
+      </li>
       <li>
         <a href="#usage-vue"><span>Vue</span><IconVue /></a>
       </li>
@@ -130,6 +136,16 @@ import IconSvelte from "../components/IconSvelte.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-vue">Vue directive</h2>
     <p>
       Vue users can globally register the

package.json

@@ -7,6 +7,7 @@
     "animation",
     "transition",
     "react",
+    "preact",
     "vue",
     "angular",
     "svelte"
@@ -32,6 +33,11 @@
       "types": "./vue/index.d.ts",
       "default": "./vue/index.mjs"
     },
+    "./preact": {
+      "import": "./preact/index.mjs",
+      "types": "./preact/index.d.ts",
+      "default": "./preact/index.mjs"
+    },
     "./react": {
       "import": "./react/index.mjs",
       "types": "./react/index.d.ts",
@@ -60,6 +66,7 @@
     "chalk": "^5.0.1",
     "cypress": "^9.6.1",
     "execa": "^6.1.0",
+    "preact": "^10.11.3",
     "pretty-bytes": "^6.0.0",
     "prompts": "^2.4.2",
     "react": "^18.1.0",
@@ -73,6 +80,5 @@
     "vue": "^3.2.33",
     "vue-github-button": "^3.0.3",
     "vue-router": "4"
-  },
-  "dependencies": {}
+  }
 }

rollup.config.js

@@ -7,6 +7,7 @@ const MIN = process.env.MIN || false
 
 const external = [
   "vue",
+  "preact",
   "react",
   "angular",
   "process",

src/preact/index.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState, useRef } from "preact/hooks"
+import autoAnimate, {
+  AutoAnimateOptions,
+  AutoAnimationPlugin,
+  AnimationController,
+} from "../index"
+
+/**
+ * AutoAnimate hook for adding dead-simple transitions and animations to preact.
+ * @param options - Auto animate options or a plugin
+ * @returns
+ */
+export function useAutoAnimate<T extends Element>(options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin): [Object<T>, (enabled: boolean) => void] {
+  const element = useRef<T>(null)
+  const [controller, setController] = useState<
+    AnimationController | undefined
+  >()
+  const setEnabled = (enabled: boolean) => {
+    if (controller) {
+      enabled ? controller.enable() : controller.disable()
+    }
+  }
+  useEffect(() => {
+    if (element.current instanceof HTMLElement)
+      setController(autoAnimate(element.current, options || {}))
+  }, [])
+  return [element, setEnabled]
+}