feat: add initial motion.dev support for Lynx

.changeset/moody-baboons-happen.md

@@ -0,0 +1,5 @@
+---
+'@lynx-js/motion': patch
+---
+
+Add initial support for `@lynx-js/motion`

biome.jsonc

@@ -54,6 +54,7 @@
       "packages/testing-library/**",
       "packages/react/testing-library/**",
       "packages/lynx/gesture-runtime/__test__/**",
+      "packages/motion/__tests__/**",
 
       "packages/rspeedy/lynx-bundle-rslib-config/test/fixtures/**",
     ],

eslint.config.js

@@ -100,6 +100,8 @@ export default tseslint.config(
 
       // gesture-runtime-testing
       'packages/lynx/gesture-runtime/__test__/**',
+      // motion tests
+      'packages/motion/__tests__/**',
       // TODO: enable eslint for tailwind-preset
       // tailwind-preset
       'packages/tailwind-preset/**',

examples/motion/lynx.config.js

@@ -0,0 +1,26 @@
+import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { defineConfig } from '@lynx-js/rspeedy';
+
+const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
+
+export default defineConfig({
+  source: {
+    entry: {
+      main: './src/index.tsx',
+      mini: './src/Mini/index.tsx',
+    },
+  },
+  plugins: [
+    pluginReactLynx(),
+    pluginQRCode({
+      schema(url) {
+        // We use `?fullscreen=true` to open the page in LynxExplorer in full screen mode
+        return `${url}?fullscreen=true`;
+      },
+    }),
+  ],
+  performance: {
+    profile: enableBundleAnalysis,
+  },
+});

examples/motion/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@lynx-js/motion-examples",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev"
+  },
+  "dependencies": {
+    "@lynx-js/motion": "workspace:*",
+    "@lynx-js/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@lynx-js/preact-devtools": "^5.0.1-cf9aef5",
+    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@lynx-js/types": "3.6.0",
+    "@types/react": "^18.3.25"
+  }
+}

examples/motion/src/App.css

@@ -0,0 +1,30 @@
+.case-area {
+  flex: 1;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-top: 60px;
+}
+
+.button-area {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  padding: 0 16px;
+  flex-wrap: wrap;
+}
+
+.text-area {
+  padding: 16px 16px;
+}
+
+.button {
+  border-radius: 16px;
+  padding: 8px;
+  border: 1px solid #333;
+  flex-shrink: 0;
+}

examples/motion/src/App.tsx

@@ -0,0 +1,90 @@
+import { useState } from '@lynx-js/react';
+
+import Basic from './Basic/index.js';
+import BasicPercent from './BasicPercent/index.js';
+import BasicSelector from './BasicSelector/index.js';
+import ColorInterception from './ColorInterception/index.js';
+import iOSSlider from './iOSSlider/index.js';
+import Mini from './Mini/index.js';
+import MotionValue from './MotionValue/index.js';
+import Spring from './Spring/index.js';
+import Stagger from './Stagger/index.js';
+import Text from './Text/index.js';
+
+import './App.css';
+
+interface CaseItem {
+  name: string;
+  comp: () => JSX.Element;
+}
+
+const CASES: CaseItem[] = [
+  {
+    name: 'Basic',
+    comp: Basic,
+  },
+  {
+    name: 'BasicPercent',
+    comp: BasicPercent,
+  },
+  {
+    name: 'Stagger',
+    comp: Stagger,
+  },
+  {
+    name: 'ColorInterception',
+    comp: ColorInterception,
+  },
+  {
+    name: 'Spring',
+    comp: Spring,
+  },
+  {
+    name: 'Text',
+    comp: Text,
+  },
+  {
+    name: 'BasicSelector',
+    comp: BasicSelector,
+  },
+  {
+    name: 'MotionValue',
+    comp: MotionValue,
+  },
+  {
+    name: 'iOSSlider',
+    comp: iOSSlider,
+  },
+  {
+    name: 'Mini',
+    comp: Mini,
+  },
+];
+
+export function App() {
+  const [current, setCurrent] = useState(0);
+
+  const CurrentComp = CASES[current]?.comp;
+
+  return (
+    <view className='container'>
+      <view className='button-area'>
+        {CASES.map((item, index) => {
+          return (
+            <view
+              key={item.name}
+              className='button'
+              bindtap={() => setCurrent(index)}
+            >
+              <text>{item.name}</text>
+            </view>
+          );
+        })}
+      </view>
+      <text className='text-area'>Current case is: {CASES[current]?.name}</text>
+      <view className='case-area'>
+        {CurrentComp && <CurrentComp />}
+      </view>
+    </view>
+  );
+}

examples/motion/src/Basic/index.tsx

@@ -0,0 +1,61 @@
+import { animate } from '@lynx-js/motion';
+import { runOnMainThread, useEffect, useMainThreadRef } from '@lynx-js/react';
+import type { MainThread } from '@lynx-js/types';
+
+import './styles.css';
+
+export default function Basic() {
+  const animateMTRef = useMainThreadRef<ReturnType<typeof animate> | null>(
+    null,
+  );
+  const boxMTRef = useMainThreadRef<MainThread.Element>(null);
+
+  function startAnimation() {
+    'main thread';
+
+    if (boxMTRef.current) {
+      animateMTRef.current = animate(
+        boxMTRef.current,
+        { scale: 0.4, rotate: '45deg' },
+        {
+          ease: 'circInOut',
+          duration: 1,
+          repeat: Number.POSITIVE_INFINITY,
+          repeatType: 'reverse',
+        },
+      );
+    }
+  }
+
+  function endAnimation() {
+    'main thread';
+
+    animateMTRef.current?.stop();
+  }
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      void runOnMainThread(startAnimation)();
+    }, 1500);
+    return () => {
+      clearTimeout(timeoutId);
+      void runOnMainThread(endAnimation)();
+    };
+  }, []);
+
+  return (
+    <view className='case-container'>
+      <view
+        main-thread:ref={boxMTRef}
+        style={{
+          width: '100px',
+          height: '100px',
+          backgroundColor: '#8df0cc',
+          borderRadius: '10px',
+          transform: 'scale(1.5)',
+        }}
+      >
+      </view>
+    </view>
+  );
+}

examples/motion/src/Basic/styles.css

@@ -0,0 +1,6 @@
+.case-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

examples/motion/src/BasicPercent/index.tsx

@@ -0,0 +1,57 @@
+import { animate } from '@lynx-js/motion';
+import { runOnMainThread, useEffect, useMainThreadRef } from '@lynx-js/react';
+import type { MainThread } from '@lynx-js/types';
+
+import './styles.css';
+
+export default function BasicPercent() {
+  const animateMTRef = useMainThreadRef<ReturnType<typeof animate> | null>(
+    null,
+  );
+  const boxMTRef = useMainThreadRef<MainThread.Element>(null);
+
+  function startAnimation() {
+    'main thread';
+
+    if (boxMTRef.current) {
+      animateMTRef.current = animate(
+        boxMTRef.current,
+        { width: ['10px', '50px'] },
+        {
+          ease: 'circInOut',
+          duration: 1,
+          repeat: Number.POSITIVE_INFINITY,
+          repeatType: 'reverse',
+        },
+      );
+    }
+  }
+
+  function endAnimation() {
+    'main thread';
+
+    animateMTRef.current?.stop();
+  }
+
+  useEffect(() => {
+    void runOnMainThread(startAnimation)();
+    return () => {
+      void runOnMainThread(endAnimation)();
+    };
+  }, []);
+
+  return (
+    <view className='case-container'>
+      <view
+        main-thread:ref={boxMTRef}
+        style={{
+          width: '300px',
+          height: '100px',
+          backgroundColor: '#8df0cc',
+          borderRadius: '10px',
+        }}
+      >
+      </view>
+    </view>
+  );
+}

examples/motion/src/BasicPercent/styles.css

@@ -0,0 +1,6 @@
+.case-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

examples/motion/src/BasicSelector/index.tsx

@@ -0,0 +1,56 @@
+import { animate } from '@lynx-js/motion';
+import { runOnMainThread, useEffect, useMainThreadRef } from '@lynx-js/react';
+
+import './styles.css';
+
+export default function Basic() {
+  const animateMTRef = useMainThreadRef<ReturnType<typeof animate> | null>(
+    null,
+  );
+
+  function startAnimation() {
+    'main thread';
+    animateMTRef.current = animate(
+      '.box',
+      { scale: 0.4, rotate: '45deg' },
+      {
+        ease: 'circInOut',
+        duration: 1,
+        repeat: Number.POSITIVE_INFINITY,
+        repeatType: 'reverse',
+      },
+    );
+  }
+
+  function endAnimation() {
+    'main thread';
+
+    animateMTRef.current?.stop();
+  }
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      void runOnMainThread(startAnimation)();
+    }, 1000);
+    return () => {
+      clearTimeout(timeoutId);
+      void runOnMainThread(endAnimation)();
+    };
+  }, []);
+
+  return (
+    <view className='case-container'>
+      <view
+        className='box'
+        style={{
+          width: '100px',
+          height: '100px',
+          backgroundColor: '#8df0cc',
+          borderRadius: '10px',
+          transform: 'scale(1.5)',
+        }}
+      >
+      </view>
+    </view>
+  );
+}

examples/motion/src/BasicSelector/styles.css

@@ -0,0 +1,6 @@
+.case-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}