.github/workflows/main.yml

@@ -2,16 +2,17 @@ name: main
 on:
   push:
     branches:
-      - 'main'
+      - main
   pull_request:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   validate:
     runs-on: ubuntu-latest
     steps:
-      - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.12.0
-
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
 
@@ -21,6 +22,7 @@ jobs:
       - name: ⎔ Setup Node@v20
         uses: actions/setup-node@v4
         with:
+          cache: pnpm
           node-version: 20
 
       - name: 📥 Download deps
@@ -40,18 +42,33 @@ jobs:
 
       - name: 🛡️ Test
         run: |
-          npx playwright install --with-deps
+          npx playwright install --with-deps chromium
           pnpm test:coverage
-        working-directory: packages/web
 
-      - name: 📏 Report coverage
+      - name: 📏 Report coverage (web)
         if: always() && github.event_name == 'pull_request'
-        uses: davelosert/vitest-coverage-report-action@v2.1.1
+        uses: davelosert/vitest-coverage-report-action@v2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           working-directory: packages/web
           name: '@lottiefiles/dotlottie-web'
 
+      - name: 📏 Report coverage (react)
+        if: always() && github.event_name == 'pull_request'
+        uses: davelosert/vitest-coverage-report-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          working-directory: packages/react
+          name: '@lottiefiles/dotlottie-react'
+
+      - name: 📏 Report coverage (wc)
+        if: always() && github.event_name == 'pull_request'
+        uses: davelosert/vitest-coverage-report-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          working-directory: packages/wc
+          name: '@lottiefiles/dotlottie-wc'
+
       - name: 📏 Report bundle size
         if: github.event_name == 'pull_request'
         uses: andresz1/size-limit-action@v1
@@ -66,9 +83,15 @@ jobs:
     if: ${{ github.repository == 'LottieFiles/dotlottie-web' && github.event_name == 'push' }}
 
     permissions:
-      contents: read
-      id-token: write # Required for provenance
-      packages: write # Required for publishing
+      # Allow creating a release in the repository
+      contents: write
+
+      # Required for provenance
+      id-token: write
+      packages: write
+
+      # Required for creating a release PR
+      pull-requests: write
 
     steps:
       - name: ⬇️ Checkout repo
@@ -84,19 +107,14 @@ jobs:
       - name: ⎔ Setup Node@v20
         uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
+          cache: pnpm
           node-version: 20
-          registry-url: 'https://registry.npmjs.org'
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPMJS_TOKEN }}
-
-      - name: ⎔ Setup .npmrc (NPM)
-        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPMJS_TOKEN }}" >> ~/.npmrc
+          registry-url: https://registry.npmjs.org
 
       - name: 📥 Install dependencies
         run: pnpm install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}
 
       - name: 🚀 Release to NPM
         uses: changesets/action@v1
@@ -105,10 +123,10 @@ jobs:
           title: 'chore: 🤖 update versions'
           publish: pnpm release:publish
           version: pnpm release:version
+          createGithubReleases: false
         env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPMJS_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.GPR_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPMJS_TOKEN }}
 
       - name: Remove existing NPM .npmrc
         run: rm -f "$HOME/.npmrc"
@@ -119,6 +137,17 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.repository == 'LottieFiles/dotlottie-web' && github.event_name == 'push' }}
 
+    permissions:
+      # Allow creating a release in the repository
+      contents: write
+
+      # Required for provenance
+      id-token: write
+      packages: write
+
+      # Required for creating a release PR
+      pull-requests: write
+
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
@@ -131,14 +160,14 @@ jobs:
       - name: ⎔ Setup Node@v20
         uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
+          cache: pnpm
           node-version: 20
-          registry-url: 'https://npm.pkg.github.com/'
+          registry-url: https://npm.pkg.github.com/
 
       - name: 📥 Install dependencies
         run: pnpm install
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.GPR_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: 🚀 Release to Github Packages
         uses: changesets/action@v1
@@ -147,10 +176,10 @@ jobs:
           title: 'chore: update versions'
           publish: pnpm release:publish
           version: pnpm release:version
+          createGithubReleases: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-          NPM_TOKEN: ${{ secrets. NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   jsr-release:
     name: jsr-release
@@ -189,7 +218,14 @@ jobs:
     name: publish-viewer
     needs: validate
     runs-on: ubuntu-latest
-    if: ${{ github.repository == 'LottieFiles/dotlottie-web' && github.event_name == 'push' }}
+    if:
+      ${{ github.repository == 'LottieFiles/dotlottie-web' && github.event_name == 'push' && github.ref ==
+      'refs/heads/main' }}
+
+    permissions:
+      contents: write
+      pages: write
+
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
@@ -202,21 +238,23 @@ jobs:
       - name: ⎔ Setup Node@v20
         uses: actions/setup-node@v4
         with:
-          cache: 'pnpm'
+          cache: pnpm
           node-version: 20
-          registry-url: 'https://npm.pkg.github.com/'
+          registry-url: https://npm.pkg.github.com/
 
       - name: 📥 Install dependencies
         run: pnpm install
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.GPR_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: 🏗 Build
         run: pnpm build
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: 🌐Publish
+      - name: 🌐 Publish
         if: success()
-        uses: peaceiris/actions-gh-pages@v3
+        uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./apps/dotlottie-viewer/dist

apps/dotlottie-next-example/src/pages/index.tsx

@@ -1,6 +1,8 @@
+import type { DotLottie, DotLottieWorker } from '@lottiefiles/dotlottie-react';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import { Inter } from 'next/font/google';
 import Head from 'next/head';
+import { useState } from 'react';
 
 import styles from '@/styles/Home.module.css';
 
@@ -9,6 +11,9 @@ const inter = Inter({ subsets: ['latin'] });
 const src = 'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie';
 
 export default function Home(): JSX.Element {
+  const [dotLottie, setDotLottie] = useState<DotLottie | DotLottieWorker | null>(null);
+  const [showDotLottie, setShowDotLottie] = useState(false);
+
   return (
     <>
       <Head>
@@ -18,17 +23,56 @@ export default function Home(): JSX.Element {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main className={`${styles.main} ${inter.className}`}>
-        <DotLottieReact
-          style={{
-            minWidth: '100px',
-          }}
-          src={src}
-          loop
-          autoplay
-          renderConfig={{
-            autoResize: true,
-          }}
-        />
+        {showDotLottie && (
+          <DotLottieReact
+            dotLottieRefCallback={setDotLottie}
+            style={{
+              minWidth: '100px',
+            }}
+            src={src}
+            loop
+            autoplay
+            renderConfig={{
+              autoResize: true,
+            }}
+          />
+        )}
+        <div>
+          <button
+            onClick={(): void => {
+              setShowDotLottie(!showDotLottie);
+            }}
+          >
+            {showDotLottie ? 'Hide' : 'Show'}
+          </button>
+          <button
+            onClick={(): void => {
+              if (dotLottie) {
+                dotLottie.play();
+              }
+            }}
+          >
+            Play
+          </button>
+          <button
+            onClick={(): void => {
+              if (dotLottie) {
+                dotLottie.pause();
+              }
+            }}
+          >
+            Pause
+          </button>
+          <button
+            onClick={(): void => {
+              if (dotLottie) {
+                dotLottie.stop();
+              }
+            }}
+          >
+            Stop
+          </button>
+        </div>
       </main>
     </>
   );

apps/dotlottie-react-example/src/App.tsx

@@ -1,6 +1,5 @@
 // import { DotLottieReact, DotLottie, setWasmUrl } from '@lottiefiles/dotlottie-react';
 import { DotLottieWorkerReact, DotLottieWorker, setWasmUrl } from '@lottiefiles/dotlottie-react';
-import wasmUrl from '../../../packages/web/src/core/dotlottie-player.wasm?url';
 import React, { useState } from 'react';
 
 const animations = [
@@ -11,7 +10,7 @@ const animations = [
   './dragon.json',
 ];
 
-setWasmUrl(wasmUrl);
+setWasmUrl(new URL('../../../packages/web/src/core/dotlottie-player.wasm', import.meta.url).href);
 
 function App() {
   const [dotLottie, setDotLottie] = useState<DotLottieWorker | null>(null);

apps/dotlottie-viewer/src/components/animation-list.tsx

@@ -1,11 +1,12 @@
 import { useAppDispatch } from '../store/hooks';
 import { setSrc } from '../store/viewer-slice';
-import { DotLottiePlayer } from '@dotlottie/react-player';
+import { DotLottieWorkerReact } from '@lottiefiles/dotlottie-react';
 
 interface ListItemProps {
   name: string;
   url: string;
 }
+
 function ListItem(props: ListItemProps) {
   const dispatch = useAppDispatch();
   return (
@@ -16,7 +17,7 @@ function ListItem(props: ListItemProps) {
       className="rounded-lg bg-white border border-transparent hover:border-lottie"
     >
       <div>
-        <DotLottiePlayer style={{ height: '120px' }} src={props.url} autoplay loop />
+        <DotLottieWorkerReact style={{ height: '120px' }} src={props.url} autoplay loop />
       </div>
       <div className="text-xs py-1 bg-strong rounded-b-lg">{props.name}</div>
     </button>
@@ -33,7 +34,10 @@ const AnimationList: React.FC<AnimationListProps> = ({ className = '', ...props
         name="multi-animations"
         url="https://lottie.host/294b684d-d6b4-4116-ab35-85ef566d4379/VkGHcqcMUI.lottie"
       />
-      <ListItem name="theming example" url={`${import.meta.env.BASE_URL}theming_example.lottie`} />
+      <ListItem
+        name="theming example"
+        url="https://lottie.host/884c11a9-e648-4b2f-9906-2c77279710b1/PalAqPKzRZ.lottie"
+      />
       <ListItem
         name="marker example"
         url={`https://lottie.host/a04c548c-307f-420b-9ba8-e90a4a2efea4/MT9OsNynSw.lottie`}

apps/dotlottie-viewer/src/components/load-time.tsx

@@ -1,25 +1,16 @@
 interface LoadTimeProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
-  loadTime: number;
   title: string;
-  rendererVersion: string;
   version: string;
 }
 
-const LoadTime: React.FC<LoadTimeProps> = ({ className = '', title, version, rendererVersion, loadTime, ...props }) => {
+const LoadTime: React.FC<LoadTimeProps> = ({ className = '', title, version, ...props }) => {
   return (
     <div className={`flex flex-col items-center ${className}`} {...props}>
       <div className="flex items-start">
         <h6 className="text-xl font-bold mb-0">{title}</h6>
         <span className="ml-1 text-xs text-secondary bg-strong p-0.5 px-1 rounded-lg">{version}</span>
       </div>
-      <span className="p-1 rounded text-xs mb-1 text-secondary">
-        <strong>Renderer: </strong>
-        {rendererVersion}
-      </span>
-      <p className="text-xs px-2 py-1 bg-strong rounded-full flex justify-center items-center">
-        Load Time: {loadTime}ms
-      </p>
     </div>
   );
 };