Motion

.changeset/README.md

@@ -1,8 +1,13 @@
 # Changesets
 
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+Hello and welcome! This folder has been
+automatically generated by `@changesets/cli`, a
+build tool that works with multi-package repos, or
+single-package repos to help you version and
+publish your code. You can find the full
+documentation for it
+[in our repository](https://github.com/changesets/changesets)
 
-We have a quick list of common questions to get you started engaging with this project in
+We have a quick list of common questions to get
+you started engaging with this project in
 [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.vscode/launch.json

@@ -7,7 +7,12 @@
       "request": "launch",
       "name": "Debug Current Test File",
       "autoAttachChildProcesses": true,
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**",
+        "**/dist/**",
+        "**/.next/**"
+      ],
       "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
       "args": ["run", "${relativeFile}"],
       "smartStep": true,

.vscode/settings.json

@@ -1 +1,6 @@
-{}
+{
+  "eslint.options": {
+    "overrideConfigFile": "./eslint.config.js"
+  },
+  "eslint.experimental.useFlatConfig": true
+}

eslint.config.js

@@ -0,0 +1,26 @@
+async function getConfig() {
+  const { default: baseConfig } = await import(
+    "@coord/config/eslint.config.js"
+  );
+  return [
+    ...baseConfig,
+    {
+      settings: {
+        next: {
+          rootDir: ["packages/docs"],
+        },
+      },
+    },
+    {
+      ignores: [
+        "**/dist/**/*",
+        "**/node_modules/**/*",
+        "**/.next/**/*",
+      ],
+    },
+    {
+      files: ["./**/*.tsx", "./**/*.ts"],
+    },
+  ];
+}
+module.exports = getConfig();

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev",
-    "lint": "turbo run lint",
+    "lint": "eslint .",
     "test": "turbo run test",
     "test:watch": "turbo run test:watch",
     "deploy": "turbo run deploy",
@@ -18,12 +18,16 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
+    "@coord/config": "workspace:*",
     "@turbo/gen": "^1.10.1",
     "next": "^13.4.4",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "turbo": "^1.10.1",
     "vitest": "^0.31.4"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "eslint": "^8.44.0"
+  }
 }

packages/code-motion-react/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@coord/code-motion-react",
+  "version": "0.3.0",
+  "main": "dist/index.js",
+  "module": "dist/index.cjs",
+  "types": "dist/index.d.js",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "rollup --config rollup.config.js",
+    "dev": "pnpm run build --environment NODE_ENV=development  --watch",
+    "lint": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf ./dist ./.turbo ./node_modules"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@coord/code-motion": "workspace:*",
+    "@coord/core": "workspace:*"
+  },
+  "devDependencies": {
+    "@coord/config": "workspace:*",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "lodash-es": "^4.17.21",
+    "postcss": "^8.4.26",
+    "postcss-preset-env": "^9.0.0",
+    "rollup": "^3.26.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-typescript2": "^0.35.0",
+    "ts-dedent": "^2.2.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@types/lodash": "^4.14.195",
+    "@types/lodash-es": "^4.17.8",
+    "@types/node": "20.2.5",
+    "@types/react": "^18.2.15",
+    "autoprefixer": "10.4.14",
+    "clsx": "^1.2.1",
+    "fp-ts": "^2.16.0",
+    "lightningcss": "^1.21.5",
+    "lodash": "^4.17.21",
+    "postcss-variables-prefixer": "^1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup-plugin-dts": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}

packages/code-motion-react/rollup.config.js

@@ -0,0 +1,5 @@
+import { createConfig } from "@coord/config/rollup/create-config.js";
+
+export default createConfig({
+  cssPrefix: "cm",
+});

packages/code-motion-react/src/components/CodeMotion.tsx

@@ -0,0 +1,179 @@
+import {
+  CSSProperties,
+  ComponentProps,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+import cn from "clsx";
+import {
+  Language,
+  Theme,
+  Token,
+  vscodeDark,
+} from "@coord/code-motion";
+
+import { isNumber } from "lodash-es";
+
+import {
+  EasingOptions,
+  PartialBy,
+  useStopwatch,
+} from "@coord/core";
+import {
+  RenderingState,
+  initializeRenderingState,
+  updateRenderingState,
+} from "@/utils";
+import {
+  TypewriterRenderer,
+  FadeEffectRenderer,
+} from "./renderers";
+
+type CodeMotionProps = {
+  tokens: Token[];
+  code: string;
+  language?: Language;
+  theme?: Theme;
+  fromTheme?: Theme;
+  transitionTime?: number;
+  transitionDuration?: number;
+  transitionMode?: "fade" | "typewriter";
+  easing?: EasingOptions;
+  measureDurationPer?:
+    | "full-transition"
+    | "change-rate";
+
+  displayBackground?: boolean;
+} & ComponentProps<"pre">;
+
+const defaultsPerMode: Record<
+  CodeMotionProps["transitionMode"] & string,
+  Partial<CodeMotionProps>
+> = {
+  fade: {
+    transitionDuration: 0.8,
+    measureDurationPer: "full-transition",
+  },
+  typewriter: {
+    transitionDuration: 2,
+    measureDurationPer: "change-rate",
+  },
+};
+
+export function CodeMotion({
+  className,
+  tokens,
+  code,
+  language = "tsx",
+  theme = vscodeDark,
+  fromTheme = theme,
+  style,
+  transitionTime,
+  transitionMode = "fade",
+  transitionDuration,
+  measureDurationPer,
+  easing,
+  ...props
+}:
+  | PartialBy<CodeMotionProps, "code">
+  | PartialBy<CodeMotionProps, "tokens">) {
+  const modeDefaults =
+    defaultsPerMode[transitionMode];
+  transitionDuration ??=
+    modeDefaults.transitionDuration ?? 0.5;
+
+  measureDurationPer ??=
+    modeDefaults.measureDurationPer ??
+    "full-transition";
+
+  const isFirstRender = useRef(true);
+  const controlled = isNumber(transitionTime);
+  const [renderingState, setRenderingState] =
+    useState<RenderingState>(() =>
+      initializeRenderingState(
+        tokens ?? code ?? "",
+        language,
+        theme,
+        fromTheme
+      )
+    );
+
+  let duration = transitionDuration;
+  if (measureDurationPer === "change-rate") {
+    duration *= renderingState.changes / 100;
+  }
+
+  const [transitionTimeState, setTransitionTime] =
+    useState(1);
+  const { play } = useStopwatch(
+    setTransitionTime,
+    {
+      durationInSeconds: duration,
+      easing,
+    }
+  );
+
+  useLayoutEffect(() => {
+    if (isFirstRender.current) return;
+    setRenderingState((prev) =>
+      updateRenderingState(prev, {
+        code,
+        tokens,
+        language,
+        theme,
+      })
+    );
+    setTransitionTime(0);
+  }, [tokens, code, theme, language]);
+
+  useLayoutEffect(() => {
+    if (controlled || isFirstRender.current)
+      return;
+    if (duration === 0) {
+      setTransitionTime(1);
+      return;
+    }
+
+    play(0);
+  }, [renderingState]);
+  useEffect(() => {
+    isFirstRender.current = false;
+    return () => {
+      isFirstRender.current = true;
+    };
+  }, []);
+  return (
+    <pre
+      className={cn("cm-code-motion", className)}
+      style={
+        {
+          ...style,
+          "--cm-transition-time": transitionTime,
+          "--cm-transition-duration":
+            transitionDuration,
+        } as CSSProperties
+      }
+      {...props}
+    >
+      {transitionMode === "fade" && (
+        <FadeEffectRenderer
+          renderingState={renderingState}
+          transitionTime={
+            transitionTime ?? transitionTimeState
+          }
+        />
+      )}
+      {transitionMode === "typewriter" && (
+        <TypewriterRenderer
+          renderingState={renderingState}
+          transitionTime={
+            transitionTime ?? transitionTimeState
+          }
+        />
+      )}
+    </pre>
+  );
+}

packages/code-motion-react/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./CodeMotion";