diff --git a/.claude/settings.local.json b/.claude/settings.local.json deleted file mode 100644 index 11e095e..0000000 --- a/.claude/settings.local.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "permissions": { - "allow": [ - "Bash(pnpm add:*)" - ], - "deny": [], - "ask": [] - } -} \ No newline at end of file diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 6c53643..5a4e80f 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -16,18 +16,58 @@ jobs: steps: - name: Checkout uses: actions/checkout@v4 + - name: Setup pnpm uses: pnpm/action-setup@v4 # version is read from package.json#packageManager + - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: 20 cache: 'pnpm' + + - name: Get pnpm store directory + id: pnpm-cache + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT + + - name: Setup pnpm cache + uses: actions/cache@v4 + with: + path: ${{ steps.pnpm-cache.outputs.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Get Playwright version + id: playwright-version + run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --json | jq -r '.[0].devDependencies."@playwright/test".version')" >> $GITHUB_OUTPUT + + - name: Cache Playwright browsers + id: playwright-cache + uses: actions/cache@v4 + with: + path: ~/.cache/ms-playwright + key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.PLAYWRIGHT_VERSION }} + restore-keys: | + ${{ runner.os }}-playwright- + - name: Install dependencies run: pnpm install --frozen-lockfile=false + - name: Install Playwright Browsers + if: steps.playwright-cache.outputs.cache-hit != 'true' run: pnpm exec playwright install --with-deps + + - name: Install Playwright dependencies only + if: steps.playwright-cache.outputs.cache-hit == 'true' + run: pnpm exec playwright install-deps + + - name: Build project + run: NO_NUXT=1 pnpm build + - name: Run Playwright tests run: pnpm test:e2e - name: Upload Playwright report @@ -36,3 +76,9 @@ jobs: with: name: playwright-report path: playwright-report + - name: Upload Playwright videos (visual) + if: always() + uses: actions/upload-artifact@v4 + with: + name: playwright-videos + path: test-results/**/video.webm diff --git a/.gitignore b/.gitignore index 70f3e24..bb2b9de 100644 --- a/.gitignore +++ b/.gitignore @@ -5,12 +5,9 @@ dist # Playwright artifacts playwright-report/ +playwright-report/index.html test-results/ -# Cypress artifacts (legacy) -cypress/videos/ -cypress/screenshots/ - dist .DS_Store node_modules @@ -22,3 +19,4 @@ temp .yalc .idea .nuxt +*.local.json diff --git a/build/bundle.ts b/build/bundle.ts index 0ebd66c..9ebff09 100644 --- a/build/bundle.ts +++ b/build/bundle.ts @@ -287,7 +287,10 @@ async function main() { // await qwikBuild() await declarationsBuild() await bundleDeclarations() - await nuxtBuild() + // Skip nuxt module build in CI or when NO_NUXT is set + if (!process.env.NO_NUXT) { + await nuxtBuild() + } await addPackageJSON() await addAssets() await outputSize() diff --git a/docs/src/components/CodeExample.vue b/docs/src/components/CodeExample.vue index 35fa1c0..fae80f2 100644 --- a/docs/src/components/CodeExample.vue +++ b/docs/src/components/CodeExample.vue @@ -12,6 +12,7 @@ import IconJavaScript from "./IconJavaScript.vue" import IconSvelte from "./IconSvelte.vue" import IconAngular from "./IconAngular.vue" import IconNuxt from "./IconNuxt.vue" +import IconBun from "./IconBun.vue" import { computed, ref } from "vue" import { vAutoAnimate } from "../../../src" import "../../assets/prism.css" @@ -30,6 +31,7 @@ type LanguageOption = | "npm" | "pnpm" | "nuxt" + | "bun" type Language = { ext: "jsx" | "vue" | "html" @@ -194,6 +196,13 @@ function copyCode(value: string) { > pnpm +
  • + bun +
  • + + Bun Logo + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/src/examples/angular/index.ts b/docs/src/examples/angular/index.ts index 99445e1..8f973db 100644 --- a/docs/src/examples/angular/index.ts +++ b/docs/src/examples/angular/index.ts @@ -1,44 +1,35 @@ const angularDirectiveMain = { - angular: { - ext: "angular", - language: "jsx", - example: `import { NgModule } from '@angular/core'; -import { AutoAnimateModule } from '@formkit/auto-animate/angular' - -@NgModule({ - declarations: [AppComponent], - imports: [BrowserModule, AutoAnimateModule], - bootstrap: [AppComponent], -}) -export class AppModule {} -`, - }, -} - -const angularDirectiveApp = { angular: { ext: "angular", language: "jsx", example: `import { Component } from '@angular/core'; +import { AutoAnimateDirective } from '@formkit/auto-animate/angular'; @Component({ selector: 'app-root', + standalone: true, + imports: [AutoAnimateDirective], template: \` -
    -
    -

    {{ story.title }}

    -
    {{ story.story }}
    - + @for (story of stories; track story.title) { +
    +
    +

    {{ story.title }}

    + @if (story.showStory) { +
    {{ story.story }}
    + } + +
    -
    - \` + } + \`, }) export class AppComponent { - stories = [ + readonly stories = [ {title: 'The Ant and The Grasshopper', showStory: false, story: "The ant and the grasshopper were good friends..."}, {title: 'The Boy Who Cried Wolf', showStory: false, story: "There was once a shepherd boy who liked to play tricks..."}, ]; -}`, +} +`, }, } -export { angularDirectiveMain, angularDirectiveApp } +export { angularDirectiveMain } diff --git a/docs/src/examples/installation/index.ts b/docs/src/examples/installation/index.ts index 473c0fd..42f0066 100644 --- a/docs/src/examples/installation/index.ts +++ b/docs/src/examples/installation/index.ts @@ -14,4 +14,9 @@ export default { language: "shell", title: "~/my-app", }, + bun:{ + example:"bun install @formkit/auto-animate", + language:"shell", + title:"~/my-app", + }, } diff --git a/docs/src/main.ts b/docs/src/main.ts index 5e614c8..6b492dc 100644 --- a/docs/src/main.ts +++ b/docs/src/main.ts @@ -13,6 +13,10 @@ const routes: RouteRecordRaw[] = [ path: "/tests-keep-alive", component: () => import("./pages/PageTestKeepAlive.vue"), }, + { + path: "/bottom-jump-test", + component: () => import("./pages/PageBottomJumpTest.vue"), + }, { path: "/:catchAll(.*)", redirect: "/", diff --git a/docs/src/pages/PageBottomJumpTest.vue b/docs/src/pages/PageBottomJumpTest.vue new file mode 100644 index 0000000..a86b97e --- /dev/null +++ b/docs/src/pages/PageBottomJumpTest.vue @@ -0,0 +1,80 @@ + + + + + \ No newline at end of file diff --git a/docs/src/sections/SectionUsage.vue b/docs/src/sections/SectionUsage.vue index 11f467c..b5cc4c3 100644 --- a/docs/src/sections/SectionUsage.vue +++ b/docs/src/sections/SectionUsage.vue @@ -8,7 +8,7 @@ import { vueDirectiveApp, vueComposable, } from "../examples/vue" -import { angularDirectiveMain, angularDirectiveApp } from "../examples/angular" +import { angularDirectiveMain } from "../examples/angular" import { solidPrimitive, solidDirective } from "../examples/solid" import reactHook from "../examples/react" import preactHook from "../examples/preact" @@ -160,14 +160,16 @@ import IconQwik from "../components/IconQwik.vue"

    Vue directive

    Vue users can globally register the - v-auto-animate directive or install the Nuxt module. This makes adding transitions and - animations as easy as applying an attribute. Import the Vue plugin from - @formkit/auto-animate/vue and register it with your Vue app: + v-auto-animate directive or install the Nuxt module. This + makes adding transitions and animations as easy as applying an attribute. + Import the Vue plugin from @formkit/auto-animate/vue and + register it with your Vue app:

    If you prefer to not register the Vue directive globally, you can import - it directly into the component where you want to use it import { vAutoAnimate } from '@formkit/auto-animate'. + it directly into the component where you want to use it + import { vAutoAnimate } from '@formkit/auto-animate'.

    Once you’ve registered the plugin, it can be applied anywhere in your @@ -194,8 +196,8 @@ import IconQwik from "../components/IconQwik.vue"

    Import the composable from @formkit/auto-animate/vue (the - Nuxt module will automatically import useAutoAnimate for you), and - call it in script setup to create a + Nuxt module will automatically import useAutoAnimate for + you), and call it in script setup to create a Angular directive

    - Angular users can globally register the - auto-animate directive. This makes adding transitions and - animations as easy as applying an attribute. Import the AutoAnimateModule - from @formkit/auto-animate/angular and register it with your - Angular app: + Import AutoAnimateDirective from + @formkit/auto-animate/angular into a module or a standalone + component to easily add transitions and animations by applying the + auto-animate attribute to the parent element in your + template:

    -

    - Once you’ve registered the plugin, it can be applied anywhere in your - application by adding the auto-animate directive to the - parent element: -

    - Angular users can pass options by directly setting the options input <ul auto-animate [options]="{ duration: 100 }"> + + In Angular versions <16 you can only import + AutoAnimateModule in NgModules. And you have to + use auto-animate v0.8.2 or earlier. Angular v16 isn't directly supported, + but you can easily write a wrapper. +