Merge pull request #4 from Applelo/dev

Version 1.1.1

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@antfu"
+}

.github/CONTRIBUTING.md

@@ -0,0 +1,41 @@
+# Contributing
+
+Contributions are welcome and will be fully credited.
+
+## Creating issues
+
+### Bug reports
+
+Always try to provide as much information as possible. If you are reporting a bug, try to provide a repro. This will help me check the problem quicker.
+
+### Feature requests
+
+Lay out the reasoning behind it and propose an API for it. Ideally, you should have a practical example to prove the utility of the feature you're requesting.
+
+## Pull Requests
+
+I only accept contributions via Pull Requests on [Github](https://github.com/{{ githubAccount }}/{{ name }}).
+
+Here are some guidelines to make the process smoother and easier for me and you:
+
+- **Add a test** - New features and maybe bugs need tests. If you find it difficult to test, please tell me in the pull request and I will try to help you!
+- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
+- **Run `pnpm test` locally** - This will allow you to go faster
+- **Run `pnpm lint` and `pnpm typechecking` locally** - This will prevent you to have surprise for not respecting eslint config and problem with typescript
+- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+- **Send coherent history** - Make sure your commits message means something
+
+## Repo setup
+
+To develop locally, fork the Blottie repository and clone it in your local machine.
+
+The package manager used must be pnpm. So you will need to run `pnpm install` to install dependencies.
+
+To build the package, you need to do a `pnpm build`.
+
+### Test
+
+The components testing are made with Cypress allowing to check if everything working as expected.
+
+To run cypress testing in headless mode, use the command `pnpm cypress`. You can open cypress app with the `pnpm cypress-ui` command.
+All test need to be writing in the corresponding file.

.github/workflows/ci.yml

@@ -19,12 +19,12 @@ jobs:
 
       - uses: pnpm/[email protected]
         with:
-          version: 7
+          version: 8
 
       - name: Set node version to 16
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           # cache: pnpm
 
       # - name: Cache Cypress binary
@@ -53,12 +53,12 @@ jobs:
 
       - uses: pnpm/[email protected]
         with:
-          version: 7
+          version: 8
 
       - name: Set node version to 16
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: pnpm
 
       - name: Install
@@ -70,8 +70,5 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      - name: Check formatting
-        run: pnpm format:check
-
       - name: Typecheck
         run: pnpm typecheck

README.md

@@ -2,7 +2,7 @@
 
 # Blottie
 
-> Lottie component for VueJS 3 / Nuxt 3
+> Lottie component for Vue 3 / Nuxt 3
 
 Blottie is the verb `blottir` in french meaning `snuggle` (yes I was looking for a word to respect the Vue tradition).
 
@@ -34,22 +34,22 @@ import { Blottie, type BlottieExpose } from 'blottie'
 
 const blottie = ref<BlottieExpose>()
 
-const onFrame = (anim?: AnimationItem) => {
+function onFrame(anim?: AnimationItem) {
   frame.value = Math.round(anim ? anim.currentFrame : 0)
 }
-const onReady = (anim?: AnimationItem) => {
+function onReady(anim?: AnimationItem) {
   anim?.play()
 }
 </script>
 
 <template>
   <Blottie
     ref="blottie"
-    @ready="onReady"
-    @enter-frame="onFrame"
     :loop="true"
     renderer="svg"
     path="/my-lottie-anim.json"
+    @ready="onReady"
+    @enter-frame="onFrame"
   />
 </template>
 ```
@@ -75,11 +75,12 @@ If needed, you can access the lottie player before the lottie `loadAnimation` me
 
 This is necessary for allowing to use `setLocationHref` to [fix Safari issue](https://github.com/airbnb/lottie-web#issues).
 
+```vue
 <script setup lang="ts">
 import type { LottiePlayer } from 'lottie-web'
 import { Blottie } from './../..'
 
-const beforeInit = async (player: LottiePlayer) => {
+async function beforeInit(player: LottiePlayer) {
   console.log(player)
 }
 </script>
@@ -94,6 +95,7 @@ const beforeInit = async (player: LottiePlayer) => {
     />
   </div>
 </template>
+```
 
 An additional prop `container-tag` is available to change the default `div` tag container.
 
@@ -110,11 +112,9 @@ The Blottie component exposes all [lottie events](https://github.com/airbnb/lott
 ```ts
 import type { AnimationItem, LottiePlayer } from 'lottie-web'
 
-const onFrame = (
-  anim?: AnimationItem,
+function onFrame(anim?: AnimationItem,
   lottie?: LottiePlayer,
-  container?: HTMLElement
-) => {
+  container?: HTMLElement) {
   frame.value = Math.round(anim ? anim.currentFrame : 0)
 }
 ```
@@ -135,23 +135,29 @@ const blottie = ref<BlottieExpose>()
 <template>
   <div>
     <Blottie
+      ref="blottie"
       class="animation"
       :animation-data="animationData"
-      ref="blottie"
       renderer="canvas"
     />
-    <div class="controls" v-if="blottie && blottie.anim">
+    <div v-if="blottie && blottie.anim" class="controls">
       <progress
         :value="blottie.anim.currentFrame"
         :max="blottie.anim.totalFrames"
       />
-      <button @click="blottie?.anim.play()">Play</button>
-      <button @click="blottie?.anim.pause()">Pause</button>
-      <button @click="blottie?.anim.stop()">Stop</button>
+      <button @click="blottie?.anim.play()">
+        Play
+      </button>
+      <button @click="blottie?.anim.pause()">
+        Pause
+      </button>
+      <button @click="blottie?.anim.stop()">
+        Stop
+      </button>
       <button
         @click="
           blottie?.anim.setDirection(
-            blottie?.anim.playDirection === -1 ? 1 : -1
+            blottie?.anim.playDirection === -1 ? 1 : -1,
           )
         "
       >
@@ -169,7 +175,9 @@ You can use the slot `loading` to insert content inside the container to wait th
 ```vue
 <template>
   <Blottie :autoplay="true" :loop="true" path="/my-lottie-anim.json">
-    <template #loading>Loading...</template>
+    <template #loading>
+      Loading...
+    </template>
   </Blottie>
 </template>
 ```

cypress.config.ts

@@ -5,8 +5,8 @@ export default defineConfig({
   component: {
     devServer: {
       framework: 'vue',
-      bundler: 'vite'
-    }
+      bundler: 'vite',
+    },
   },
-  video: false
+  video: false,
 })

cypress/support/component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-namespace */
 // ***********************************************************
 // This example support/component.ts is processed and
 // loaded automatically before your test files.

cypress/test/Blottie.cy.ts

@@ -1,11 +1,11 @@
-import Blottie from '../../src/components/Blottie.vue'
 import animVueJS from '../fixtures/vue-js.json'
+import { Blottie } from './../../src'
 
 describe('<Blottie />', () => {
   const types = {
     html: 'div',
     canvas: 'canvas',
-    svg: 'svg'
+    svg: 'svg',
   }
 
   for (const key in types) {
@@ -15,14 +15,14 @@ describe('<Blottie />', () => {
       it(`renderer ${key}`, () => {
         cy.mount(Blottie, {
           attrs: {
-            class: 'animation'
+            class: 'animation',
           },
           props: {
             autoplay: true,
             loop: true,
             animationData: animVueJS,
-            renderer: key
-          }
+            renderer: key,
+          },
         })
 
         cy.get(`.animation > ${tag}`)
@@ -33,24 +33,24 @@ describe('<Blottie />', () => {
   it('slot', () => {
     cy.mount(Blottie, {
       attrs: {
-        class: 'animation'
+        class: 'animation',
       },
       props: {
         autoplay: true,
         loop: true,
         path: 'https://assets5.lottiefiles.com/packages/lf20_z49WoSvxKM.json',
         renderer: 'svg',
         beforeInit: async () => {
-          await new Promise<void>(resolve => {
+          await new Promise<void>((resolve) => {
             setTimeout(() => {
               resolve()
             }, 1000)
           })
-        }
+        },
       },
       slots: {
-        loading: 'Loading...'
-      }
+        loading: 'Loading...',
+      },
     })
 
     cy.get('.animation').should('have.text', 'Loading...')
@@ -71,8 +71,8 @@ describe('<Blottie />', () => {
         onReady: onReadySpy,
         onEnterFrame: onEnterFrameSpy,
         onDrawnFrame: onDrawnFrameSpy,
-        onLoopComplete: onLoopCompleteSpy
-      }
+        onLoopComplete: onLoopCompleteSpy,
+      },
     })
 
     cy.get('@onReadySpy').should('have.been.calledOnce')

demo/package.json

@@ -1,8 +1,8 @@
 {
   "name": "blottie-demo",
-  "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",