feat: implement solid wrapper for web (#234)

* feat: add solid package * fix: dev env config * revert: husky commands * chore: add changeset * fix: repository.directory in package.json * chore: change version type * fix: lint errors * fix: types import order * fix: build import error * fix: better type safe design * chore: remove copyright header rule from solid package * Merge pull request #1 from moonlitgrace/feat/add-solid-wrapper (#2) * feat: fix * feat: fix * feat: fix * docs: update readme with relative links * docs: remove react npm stats * fix: some minor issues * chore: re-install deps with pnpm v8 * fix: destructured reactivity conflicts and move dev env * fix: lint errors * fix: remove development configs from package --------- Co-authored-by: baseplate-admin <61817579+baseplate-admin@users.noreply.github.com>
LottieFiles · Jun 10, 2024 · 6bd697c · 6bd697c
1 parent 454c972
commit 6bd697c
Show file tree

Hide file tree

Showing 17 changed files with 2,002 additions and 312 deletions.
diff --git a/apps/dotlottie-solid-example/.gitignore b/apps/dotlottie-solid-example/.gitignore
@@ -0,0 +1,27 @@
+dist
+.solid
+.output
+.vercel
+.netlify
+.vinxi
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/apps/dotlottie-solid-example/index.html b/apps/dotlottie-solid-example/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+        <title>Solid App</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+
+        <script src="/src/index.tsx" type="module"></script>
+    </body>
+</html>
diff --git a/apps/dotlottie-solid-example/package.json b/apps/dotlottie-solid-example/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "dotlottie-solid-example",
+  "version": "0.0.0",
+  "description": "",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "solid-js": "^1.8.11"
+  },
+  "devDependencies": {
+    "@lottiefiles/dotlottie-solid": "workspace:*",
+    "solid-devtools": "^0.29.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-solid": "^2.8.2"
+  }
+}
diff --git a/apps/dotlottie-solid-example/src/App.tsx b/apps/dotlottie-solid-example/src/App.tsx
@@ -0,0 +1,126 @@
+import { type DotLottie, DotLottieSolid, setWasmUrl } from '@lottiefiles/dotlottie-solid';
+import type { Component} from 'solid-js';
+import { createEffect, createSignal } from 'solid-js';
+
+import wasmUrl from '../../../packages/web/src/core/dotlottie-player.wasm?url';
+
+const animations = [
+  // eslint-disable-next-line no-secrets/no-secrets
+  'https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json',
+  // eslint-disable-next-line no-secrets/no-secrets
+  'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',
+];
+
+setWasmUrl(wasmUrl);
+
+const App: Component = () => {
+  const [dotLottie, setDotlottie] = createSignal<DotLottie>();
+  const [loop, setLoop] = createSignal(true);
+  const [speed, setSpeed] = createSignal(1);
+  const [srcIdx, setSrcIdx] = createSignal(0);
+  const [useFrameInterpolation, setUseFrameInterpolation] = createSignal(false);
+  const [playOnHover, setPlayOnHover] = createSignal(false);
+  const [autoResizeCanvas, setAutoResizeCanvas] = createSignal(true);
+
+  function play(): void {
+    dotLottie()?.play();
+  }
+
+  function pause(): void {
+    dotLottie()?.pause();
+  }
+
+  function stop(): void {
+    dotLottie()?.stop();
+  }
+
+  function handleLoop(): void {
+    setLoop((prev) => !prev);
+  }
+
+  function increaseSpeed(): void {
+    setSpeed((prev) => prev + 0.1);
+  }
+
+  function decreaseSpeed(): void {
+    setSpeed((prev) => prev - 0.1);
+  }
+
+  function changeSrc(): void {
+    const totalAnimations = animations.length;
+    const nextSrcIdx = (srcIdx() + 1) % totalAnimations;
+
+    setSrcIdx(nextSrcIdx);
+  }
+
+  function handleUseFrameInterpolation(): void {
+    setUseFrameInterpolation((prev) => !prev);
+  }
+
+  function handlePlayOnHover(): void {
+    setPlayOnHover((prev) => !prev);
+  }
+
+  function handleAutoResizeCanvas(): void {
+    setAutoResizeCanvas((prev) => !prev);
+  }
+
+  createEffect(() => {
+    const dotLottieInstance = dotLottie();
+
+    if (dotLottieInstance) {
+      dotLottieInstance.addEventListener('play', console.log);
+      dotLottieInstance.addEventListener('pause', console.log);
+      dotLottieInstance.addEventListener('stop', console.log);
+    }
+  });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        'flex-direction': 'column',
+        'align-items': 'center',
+        gap: '10px',
+      }}
+    >
+      <DotLottieSolid
+        dotLottieRefCallback={setDotlottie}
+        useFrameInterpolation={useFrameInterpolation()}
+        src={animations[srcIdx()]}
+        autoplay
+        loop={loop()}
+        speed={speed()}
+        playOnHover={playOnHover()}
+        autoResizeCanvas={autoResizeCanvas()}
+        style={{
+          height: '500px',
+        }}
+      />
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+        }}
+      >
+        <button onClick={play}>Play</button>
+        <button onClick={pause}>Pause</button>
+        <button onClick={stop}>Stop</button>
+        <button onClick={handleLoop}>{loop() ? 'Looping' : 'Not looping'}</button>
+        <button onClick={increaseSpeed}>+ Speed</button>
+        <button onClick={decreaseSpeed}>- Speed</button>
+        <button onClick={changeSrc}>Change src</button>
+        <button onClick={handleUseFrameInterpolation}>
+          {useFrameInterpolation() ? 'Using frame interpolation' : 'Not using frame interpolation'}
+        </button>
+        <button onClick={handlePlayOnHover}>{playOnHover() ? 'Play on hover' : 'Not play on hover'}</button>
+        <label>
+          <input type="checkbox" checked={autoResizeCanvas()} onChange={handleAutoResizeCanvas} />
+          Auto Resize
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/dotlottie-solid-example/src/index.css b/apps/dotlottie-solid-example/src/index.css
@@ -0,0 +1,11 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
diff --git a/apps/dotlottie-solid-example/src/index.tsx b/apps/dotlottie-solid-example/src/index.tsx
@@ -0,0 +1,16 @@
+import { render } from 'solid-js/web';
+
+// eslint-disable-next-line @lottiefiles/import-filename-format
+import App from './App';
+
+import './index.css';
+
+const root = document.getElementById('root');
+
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error(
+    'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
+  );
+}
+
+render(() => <App />, root as HTMLElement);
diff --git a/apps/dotlottie-solid-example/tsconfig.json b/apps/dotlottie-solid-example/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true
+  }
+}
diff --git a/apps/dotlottie-solid-example/vite.config.ts b/apps/dotlottie-solid-example/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+// import devtools from 'solid-devtools/vite';
+
+export default defineConfig({
+  plugins: [
+    /* 
+    Uncomment the following line to enable solid-devtools.
+    For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
+    */
+    // devtools(),
+    solidPlugin(),
+  ],
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'esnext',
+  },
+});