Skip to content

Commit 7f47222

Browse files
justin-schroederjustin-schroeder
authored
Merge branch 'release/0.7.0' into master
2 parents b72e433 + 8c0b3d7 commit 7f47222

26 files changed

+689
-24
lines changed

‎.build.mjs

+46
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,23 @@ async function reactBuild() {
5555
raw = raw.replace("from '../index'", "from '../index.mjs'")
5656
await fs.writeFile(resolve(rootDir, "dist/react/index.mjs"), raw)
5757
}
58+
async function solidBuild() {
59+
info("Rolling up Solid package")
60+
await execa("npx", [
61+
"rollup",
62+
"-c",
63+
"rollup.config.js",
64+
"--environment",
65+
"FRAMEWORK:solid",
66+
])
67+
/**
68+
* This is a super hack — for some reason these imports need to be explicitly
69+
* to .mjs files so...we make it so.
70+
*/
71+
let raw = await fs.readFile(resolve(rootDir, "dist/solid/index.mjs"), "utf8")
72+
raw = raw.replace("from '../index'", "from '../index.mjs'")
73+
await fs.writeFile(resolve(rootDir, "dist/solid/index.mjs"), raw)
74+
}
5875

5976
async function preactBuild() {
6077
info("Rolling up Preact package")
@@ -116,6 +133,24 @@ async function angularBuild() {
116133
await fs.writeFile(resolve(rootDir, "dist/angular/index.mjs"), raw)
117134
}
118135

136+
async function qwikBuild() {
137+
info("Rolling up Qwik package")
138+
await execa("npx", [
139+
"rollup",
140+
"-c",
141+
"rollup.config.js",
142+
"--environment",
143+
"FRAMEWORK:qwik",
144+
])
145+
/**
146+
* This is a super hack — for some reason these imports need to be explicitly
147+
* to .mjs files so...we make it so.
148+
*/
149+
let raw = await fs.readFile(resolve(rootDir, "dist/qwik/index.mjs"), "utf8")
150+
raw = raw.replace("from '../index'", "from '../index.mjs'")
151+
await fs.writeFile(resolve(rootDir, "dist/qwik/index.mjs"), raw)
152+
}
153+
119154
async function declarationsBuild() {
120155
info("Outputting declarations")
121156
await execa("npx", [
@@ -144,6 +179,10 @@ async function bundleDeclarations() {
144179
`${rootDir}/dist/src/preact/index.d.ts`,
145180
`${rootDir}/dist/preact/index.d.ts`,
146181
])
182+
await execa("shx", [
183+
`${rootDir}/dist/src/solid/index.d.ts`,
184+
`${rootDir}/dist/solid/index.d.ts`,
185+
])
147186
await execa("shx", [
148187
"mv",
149188
`${rootDir}/dist/src/vue/index.d.ts`,
@@ -154,6 +193,11 @@ async function bundleDeclarations() {
154193
`${rootDir}/dist/src/angular/index.d.ts`,
155194
`${rootDir}/dist/angular/index.d.ts`,
156195
])
196+
await execa("shx", [
197+
"mv",
198+
`${rootDir}/dist/src/qwik/index.d.ts`,
199+
`${rootDir}/dist/qwik/index.d.ts`,
200+
])
157201
await execa("shx", ["rm", "-rf", `${rootDir}/dist/src`])
158202
await execa("shx", ["rm", `${rootDir}/dist/index.js`])
159203
}
@@ -242,8 +286,10 @@ await baseBuild()
242286
await baseBuildMin()
243287
await reactBuild()
244288
await preactBuild()
289+
await solidBuild()
245290
await vueBuild()
246291
await angularBuild()
292+
await qwikBuild()
247293
await declarationsBuild()
248294
await bundleDeclarations()
249295
await addPackageJSON()

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
# Add motion to your apps with a single line of code.
66

7-
AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application.
7+
AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, Solid or any other JavaScript application.
88

99
<a href="https://auto-animate.formkit.com"><img width="180" height="42" src="https://cdn.formk.it/web-assets/read-docs-auto-animate-v2.svg" alt="Examples & Docs"></a>
1010

‎docs/assets/img/solid.svg

+78
Loading

‎docs/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
99
<script async defer src="https://buttons.github.io/buttons.js"></script>
1010
<title>AutoAnimate - Add motion to your apps with a single line of code</title>
11-
<meta name="description" content="A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Vue, Svelte, or any other JavaScript application." />
11+
<meta name="description" content="A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application." />
1212
<meta property="og:title" content="AutoAnimate - Add motion to your apps with a single line of code" />
13-
<meta property="og:description" content="A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Vue, Svelte, or any other JavaScript application." />
13+
<meta property="og:description" content="A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application." />
1414
<meta property="og:image" content="https://cdn.formk.it/web-assets/auto-animate-og.png" />
1515
<meta property="og:url" content="https://auto-animate.formkit.com/" />
1616
<meta property="og:type" content="article" />

‎docs/src/components/CodeExample.vue

+16
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import IconVue from "./IconVue.vue"
33
import IconReact from "./IconReact.vue"
44
import IconPreact from "./IconPreact.vue"
5+
import IconSolid from "./IconSolid.vue"
6+
import IconQwik from "./IconQwik.vue"
57
import IconHTML from "./IconHTML.vue"
68
import IconYarn from "./IconYarn.vue"
79
import IconNPM from "./IconNPM.vue"
@@ -105,6 +107,13 @@ function copyCode(value) {
105107
:data-selected="current === 'preact' || null"
106108
>
107109
<IconPreact />Preact
110+
</li>
111+
<li
112+
v-if="'solid' in props.examples"
113+
@click="current = 'solid'"
114+
:data-selected="current === 'solid' || null"
115+
>
116+
<IconSolid />Solid
108117
</li>
109118
<li
110119
v-if="'vue' in props.examples"
@@ -127,6 +136,13 @@ function copyCode(value) {
127136
>
128137
<IconAngular />Angular
129138
</li>
139+
<li
140+
v-if="'qwik' in props.examples"
141+
@click="current = 'qwik'"
142+
:data-selected="current === 'qwik' || null"
143+
>
144+
<IconQwik />Qwik
145+
</li>
130146
<li
131147
v-if="'js' in props.examples"
132148
@click="current = 'js'"

‎docs/src/components/HeroTitle.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import introExample from "../examples/intro"
1818
</h1>
1919
<p>
2020
AutoAnimate is a zero-config, drop-in animation utility that adds smooth
21-
transitions to your web app. You can use it with React, Vue, Svelte, or
21+
transitions to your web app. You can use it with React, Solid, Vue, Svelte, or
2222
any other JavaScript application.
2323
</p>
2424
<div>

‎docs/src/components/IconQwik.vue

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<svg width="256px" height="272px" viewBox="0 0 256 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
3+
<title>Qwik</title>
4+
<g>
5+
<path d="M224.802633,271.548066 L176.04373,223.065139 L175.29865,223.17158 L175.29865,222.639928 L71.6062201,120.251664 L97.1567871,95.5849889 L82.1459867,9.46423235 L10.923994,97.7115967 C-1.21249511,109.938494 -3.44814914,129.82085 5.28159772,144.493127 L49.7819901,218.280821 C56.5954198,229.657294 68.9446684,236.461781 82.2524269,236.355341 L104.289921,236.14246 L224.802633,271.548066 Z" fill="#18B6F6"></path>
6+
<path d="M251.41376,96.0096521 L241.619075,77.935132 L236.508852,68.685266 L234.486489,65.0701426 L234.273609,65.2830228 L207.445212,18.8201544 C200.738387,7.12474433 188.176258,-0.105173442 174.549179,4.00642427e-13 L151.021523,0.639029547 L80.8637673,0.851690324 C67.5565576,0.958020713 55.4201892,7.97527771 48.7129802,19.3517514 L6.02242644,103.983883 L82.3544777,9.25113264 L182.427394,119.187811 L164.648054,137.15644 L175.29426,223.171031 L175.4007,222.958151 L175.4007,223.171031 L175.18782,223.171031 L175.4007,223.383362 L183.704676,231.464033 L224.053163,270.909425 C225.756753,272.504381 228.524745,270.590653 227.353355,268.570486 L202.441978,219.555907 L245.877777,139.283048 L247.261498,137.688092 C247.793699,137.05 248.3259,136.412457 248.752209,135.774364 C257.269064,124.18501 258.439906,108.66231 251.41376,96.0096521 Z" fill="#AC7EF4"></path>
7+
<polygon fill="#FFFFFF" points="182.745617 118.763148 82.3533804 9.35773736 96.6190999 95.053337 71.0685329 119.826452 175.080283 223.065139 165.711906 137.36932"></polygon>
8+
</g>
9+
</svg>
10+
</template>

‎docs/src/components/IconSolid.vue

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3">
3+
<title>Solid Logo</title>
4+
<defs>
5+
<linearGradient
6+
id="a"
7+
gradientUnits="userSpaceOnUse"
8+
x1="27.5"
9+
y1="3"
10+
x2="152"
11+
y2="63.5"
12+
>
13+
<stop offset=".1" stop-color="#76b3e1" />
14+
<stop offset=".3" stop-color="#dcf2fd" />
15+
<stop offset="1" stop-color="#76b3e1" />
16+
</linearGradient>
17+
<linearGradient
18+
id="b"
19+
gradientUnits="userSpaceOnUse"
20+
x1="95.8"
21+
y1="32.6"
22+
x2="74"
23+
y2="105.2"
24+
>
25+
<stop offset="0" stop-color="#76b3e1" />
26+
<stop offset=".5" stop-color="#4377bb" />
27+
<stop offset="1" stop-color="#1f3b77" />
28+
</linearGradient>
29+
<linearGradient
30+
id="c"
31+
gradientUnits="userSpaceOnUse"
32+
x1="18.4"
33+
y1="64.2"
34+
x2="144.3"
35+
y2="149.8"
36+
>
37+
<stop offset="0" stop-color="#315aa9" />
38+
<stop offset=".5" stop-color="#518ac8" />
39+
<stop offset="1" stop-color="#315aa9" />
40+
</linearGradient>
41+
<linearGradient
42+
id="d"
43+
gradientUnits="userSpaceOnUse"
44+
x1="75.2"
45+
y1="74.5"
46+
x2="24.4"
47+
y2="260.8"
48+
>
49+
<stop offset="0" stop-color="#4377bb" />
50+
<stop offset=".5" stop-color="#1a336b" />
51+
<stop offset="1" stop-color="#1a336b" />
52+
</linearGradient>
53+
</defs>
54+
<path
55+
d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z"
56+
fill="#76b3e1"
57+
/>
58+
<path
59+
d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z"
60+
opacity=".3"
61+
fill="url(#a)"
62+
/>
63+
<path
64+
d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z"
65+
fill="#518ac8"
66+
/>
67+
<path
68+
d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z"
69+
opacity=".3"
70+
fill="url(#b)"
71+
/>
72+
<path
73+
d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z"
74+
fill="url(#c)"
75+
/>
76+
<path
77+
d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z"
78+
fill="url(#d)"
79+
/>
80+
</svg>
81+
</template>

‎docs/src/components/Navigation.vue

+2
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,11 @@ if (typeof window !== "undefined") {
4040
<li><a href="#usage">Usage</a></li>
4141
<li><a href="#usage-react">React</a></li>
4242
<li><a href="#usage-preact">Preact</a></li>
43+
<li><a href="#usage-solid">Solid</a></li>
4344
<li><a href="#usage-vue">Vue</a></li>
4445
<li><a href="#usage-svelte">Svelte</a></li>
4546
<li><a href="#usage-angular">Angular</a></li>
47+
<li><a href="#usage-qwik">Qwik</a></li>
4648
<li><a href="#usage-disable">Disable</a></li>
4749
<li><a href="#examples">Examples</a></li>
4850
<li><a href="#plugins">Plugins</a></li>

‎docs/src/examples/dropdown/dropdown-solid.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createAutoAnimate } from "@formkit/auto-animate/solid"
2+
import { createSignal, Show } from "solid-js"
3+
4+
const Dropdown = () => {
5+
const [show, setShow] = createSignal(false)
6+
const reveal = () => setShow(!show)
7+
8+
let parent: HTMLDivElement
9+
10+
createAutoAnimate(() => parent /* optional config */)
11+
12+
return (
13+
<div ref={parent}>
14+
<strong className="dropdown-label" onClick={reveal}>
15+
Click me to open!
16+
</strong>
17+
<Show when={show()} keyed>
18+
<p className="dropdown-content">Lorum ipsum...</p>
19+
</Show>
20+
</div>
21+
)
22+
}
23+
24+
export default Dropdown

‎docs/src/examples/dropdown/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import vueExample from "./dropdown.vue?raw"
22
import reactExample from "./dropdown.jsx?raw"
3+
import solidExample from "./dropdown-solid.tsx?raw"
34
import nativeExample from "./dropdown.html?raw"
45
export default {
56
react: {
67
language: "jsx",
78
ext: "jsx",
89
example: reactExample,
910
},
11+
solid: {
12+
language: "tsx",
13+
ext: "tsx",
14+
example: solidExample,
15+
},
1016
vue: {
1117
language: "html",
1218
ext: "vue",

‎docs/src/examples/intro/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import vueExample from "./intro.vue?raw"
22
import reactExample from "./intro.jsx?raw"
33
import preactExample from "./intro-preact.jsx?raw"
4+
import solidExample from "./intro-solid.jsx?raw"
45
import htmlExample from "./intro.html?raw"
56
import svelteExample from "./intro.svelte?raw"
67
import angularExample from "./intro.angular?raw"
@@ -16,6 +17,11 @@ export default {
1617
ext: "jsx",
1718
language: "jsx",
1819
},
20+
solid: {
21+
example: solidExample,
22+
ext: "jsx",
23+
language: "jsx",
24+
},
1925
vue: {
2026
ext: "vue",
2127
language: "html",

0 commit comments

Comments
 (0)