@sorrell/code-hike 1.0.0

package/Distribution/Source/CodePresentation/CodePresentation.Internal.Types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * @file      CodePresentation.Internal.Types.ts
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/Distribution/Source/CodePresentation/CodePresentation.Internal.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownSchema = exports.StepSchema = void 0;
+exports.Video = Video;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file      CodePresentation.Internal.tsx
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+const remotion_1 = require("remotion");
+const blocks_1 = require("codehike/blocks");
+const code_1 = require("codehike/code");
+const zod_1 = require("zod");
+/* eslint-disable @typescript-eslint/typedef, @typescript-eslint/no-unused-vars, jsdoc/require-jsdoc */
+exports.StepSchema = blocks_1.Block.extend({ code: blocks_1.HighlightedCodeBlock });
+exports.MarkdownSchema = blocks_1.Block.extend({ steps: zod_1.z.array(exports.StepSchema) });
+/* eslint-enable @typescript-eslint/typedef, @typescript-eslint/no-unused-vars */
+function Code({ FrameRate, Handlers, Hook, OldCode, NewCode, Resolution, style }) {
+    const { Code, Ref } = Hook(OldCode, NewCode, FrameRate);
+    const BaseFontSizeRem = 6;
+    const FontSizeScalars = {
+        "1296x864": 1296 / 1920,
+        "1920x1280": 1,
+        "2400x1600": 2400 / 1920
+    };
+    const Style = {
+        fontSize: `${BaseFontSizeRem * FontSizeScalars[Resolution]}rem`,
+        ...style
+    };
+    return ((0, jsx_runtime_1.jsx)(code_1.Pre, { code: Code, handlers: [...Handlers], ref: Ref, style: Style }));
+}
+function VideoStep(Props) {
+    var _a;
+    const { Duration, FrameRate, Handlers, Hook, Index, Resolution, Steps, style } = Props;
+    const Step = Steps[Index];
+    const DurationInFrames = Duration * 0.001 * FrameRate;
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence, { durationInFrames: DurationInFrames, from: DurationInFrames * Index, layout: "none", name: Step.title, children: (0, jsx_runtime_1.jsx)(Code, { NewCode: Step.code, OldCode: (_a = Steps[Index - 1]) === null || _a === void 0 ? void 0 : _a.code, FrameRate, Handlers, Hook, Resolution, style }) }));
+}
+function MakeToVideoStep(InheritedProps) {
+    return function ToVideoStep(Step, Index) {
+        return ((0, jsx_runtime_1.jsx)(VideoStep, { ...InheritedProps, Index, ...Step }, Index));
+    };
+}
+function Video(Props) {
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: {
+            alignItems: "center",
+            background: "#0D1117",
+            fontSize: 24
+        }, children: Props.Steps.map(MakeToVideoStep(Props)) }));
+}

package/Distribution/Source/CodePresentation/CodePresentation.Types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * @file      CodePresentation.Types.ts
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/Distribution/Source/CodePresentation/CodePresentation.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePresentation = CodePresentation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CodePresentation_Internal_1 = require("./CodePresentation.Internal");
+const react_1 = require("react");
+const TokenTransitions_1 = require("./TokenTransitions");
+const remotion_1 = require("remotion");
+const blocks_1 = require("codehike/blocks");
+/**
+ * An animation, made up of {@link FStep | steps}, to explain code.
+ *
+ * @param Props - The sequence of {@link FStep | steps} that defines an animation.
+ *
+ * @throws {Error} If {@link PCodePresentation!Durations} is an {@link Array} and there is not
+ * precisely one duration assigned to every step, then this will throw.
+ *
+ * @returns {ReactPortal | null} A {@link Composition} with default values for
+ * important props, suitable for code animations.
+ */
+function CodePresentation(Props) {
+    const { Content, Duration, FrameRate = 90, Handlers: InHandlers, Hook = TokenTransitions_1.UseTokenTransitions, Name, Resolution = "1920x1280", style = {} } = Props;
+    const Handlers = (() => {
+        if (InHandlers === undefined) {
+            return [TokenTransitions_1.TokenTransitions];
+        }
+        else if (!InHandlers.includes(TokenTransitions_1.TokenTransitions)) {
+            return [...InHandlers, TokenTransitions_1.TokenTransitions];
+        }
+        else {
+            return InHandlers;
+        }
+    })();
+    const { steps: Steps } = (0, react_1.useMemo)(
+    // @ts-expect-error parseRoot disagrees with the `zod` schema.
+    () => (0, blocks_1.parseRoot)(Content, CodePresentation_Internal_1.MarkdownSchema), [Content]);
+    const Resolutions = {
+        "1296x864": [1296, 864],
+        "1920x1280": [1920, 1080],
+        "2400x1600": [2400, 1600]
+    };
+    const VideoProps = {
+        Duration,
+        FrameRate,
+        Handlers,
+        Hook,
+        Resolution,
+        Steps,
+        style
+    };
+    const DurationInFrames = FrameRate * Duration;
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Composition, { component: CodePresentation_Internal_1.Video, defaultProps: VideoProps, durationInFrames: DurationInFrames, fps: FrameRate, height: Resolutions[Resolution][1], id: Name, width: Resolutions[Resolution][0] }));
+}

package/Distribution/Source/CodePresentation/TokenTransitions.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenTransitions = void 0;
+exports.UseTokenTransitions = UseTokenTransitions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file      TokenTransitions.tsx
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+/* eslint-disable jsdoc/require-jsdoc */
+const code_1 = require("codehike/code");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const token_transitions_1 = require("codehike/utils/token-transitions");
+const remotion_2 = require("remotion");
+function UseTokenTransitions(OldCode, NewCode, FrameRate) {
+    const Frame = (0, remotion_1.useCurrentFrame)();
+    const Ref = (0, react_1.useRef)(null);
+    const [Snapshot, SetSnapshot] = (0, react_1.useState)();
+    const [Handle] = (0, react_1.useState)(() => (0, remotion_1.delayRender)());
+    /* If there is no old code, then transition from empty code. */
+    const PreviousCode = OldCode || { ...NewCode, annotations: [], tokens: [] };
+    (0, react_1.useLayoutEffect)(() => {
+        if (!Snapshot) {
+            SetSnapshot((0, token_transitions_1.getStartingSnapshot)(Ref.current));
+            return;
+        }
+        const Transitions = (0, token_transitions_1.calculateTransitions)(Ref.current, Snapshot);
+        function ApplyTransition({ element, keyframes, options }) {
+            interpolateStyle(element, keyframes, Frame, FrameRate * options.delay, FrameRate * options.duration);
+        }
+        ;
+        Transitions.forEach(ApplyTransition);
+        (0, remotion_1.continueRender)(Handle);
+    }, [Snapshot, Handle, Frame, FrameRate]);
+    const Code = Snapshot
+        ? NewCode
+        : PreviousCode;
+    return { Code, Ref };
+}
+exports.TokenTransitions = {
+    Pre: (Props) => ((0, jsx_runtime_1.jsx)(code_1.InnerPre, { merge: Props, style: { position: "relative" } })),
+    Token: (Props) => ((0, jsx_runtime_1.jsx)(code_1.InnerToken, { merge: Props, style: { display: "inline-block" } })),
+    name: "token-transitions"
+};
+function interpolateStyle(Element, Keyframes, Frame, Delay, Duration) {
+    const { color: Color, opacity: Opacity, translateX: TranslateX, translateY: TranslateY } = Keyframes;
+    const Progress = (0, remotion_2.interpolate)(Frame, [Delay, Delay + Duration], [0, 1], {
+        easing: remotion_1.Easing.inOut(remotion_1.Easing.ease),
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+    });
+    if (Opacity) {
+        Element.style.opacity = (0, remotion_2.interpolate)(Progress, [0, 1], Opacity).toString();
+    }
+    if (Color) {
+        Element.style.color = (0, remotion_2.interpolateColors)(Progress, [0, 1], Color);
+    }
+    if (TranslateX || TranslateY) {
+        const X = (0, remotion_2.interpolate)(Progress, [0, 1], TranslateX);
+        const Y = (0, remotion_2.interpolate)(Progress, [0, 1], TranslateY);
+        Element.style.translate = `${X}px ${Y}px`;
+    }
+}

package/Distribution/Source/CodePresentation/index.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * @file      index.ts
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CodePresentation"), exports);
+__exportStar(require("./CodePresentation.Types"), exports);
+__exportStar(require("./TokenTransitions"), exports);

package/Distribution/Source/ReactiveEventIntro/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactiveEventIntro = ReactiveEventIntro;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file      index.tsx
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+/* eslint-disable jsdoc/require-jsdoc */
+const code_1 = require("codehike/code");
+const remotion_1 = require("remotion");
+const CodePresentation_1 = require("../CodePresentation/CodePresentation");
+const Content_md_1 = __importDefault(require("./Content.md"));
+const Mark = {
+    Block: ({ children, annotation }) => {
+        const Delay = +(annotation.query || 0);
+        const Frame = (0, remotion_1.useCurrentFrame)();
+        const Background = (0, remotion_1.interpolateColors)(Frame, [Delay, Delay + 10], ["#0000", "#F2CC6044"]);
+        return (0, jsx_runtime_1.jsx)("div", { style: { background: Background }, children: children });
+    },
+    /* eslint-disable-next-line @typescript-eslint/typedef */
+    Line: (Props) => ((0, jsx_runtime_1.jsx)(code_1.InnerLine, { merge: Props, style: { padding: "0 4px" } })),
+    name: "mark"
+};
+const Handlers = [Mark];
+function ReactiveEventIntro() {
+    return ((0, jsx_runtime_1.jsx)(CodePresentation_1.CodePresentation, { Duration: 3000, Name: "ReactiveEventIntro", Content: Content_md_1.default, Handlers }));
+}

package/Distribution/Source/index.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * @file      index.js
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RunStudio = RunStudio;
+const remotion_1 = require("remotion");
+/**
+ * This should be called in the Remotion entrypoint, so that Remotion Studio
+ * will open the given {@link CodePresentation} component.
+ *
+ * @param PresentationComponent - The component to open in Remotion Studio.
+ */
+function RunStudio(PresentationComponent) {
+    (0, remotion_1.registerRoot)(PresentationComponent);
+}
+__exportStar(require("./CodePresentation"), exports);

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@sorrell/code-hike",
+  "private": false,
+  "version": "1.0.0",
+  "description": "A helper library for making animations with Code Hike.",
+  "scripts": {
+    "build": "tsc -p ./tsconfig.json"
+  },
+  "keywords": [
+    "code-hike",
+    "code",
+    "hike",
+    "sorrell",
+    "react",
+    "remotion",
+    "next"
+  ],
+  "homepage": "https://github.com/GageSorrell/SorrellWm/tree/Master/Package/CodeHike#ReadMe",
+  "bugs": {
+    "url": "https://github.com/GageSorrell/SorrellWm/issues"
+  },
+  "repository": {
+    "directory": "Package/CodeHike",
+    "type": "git",
+    "url": "git+https://github.com/GageSorrell/SorrellWm.git"
+  },
+  "author": {
+    "email": "gage@sorrell.sh",
+    "name": "Gage Sorrell",
+    "url": "https://sorrell.sh"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "typescript": "^6.0.3"
+  },
+  "files":
+  [
+    "Distribution",
+    "Distribution/**/*",
+    "remotion.config.ts",
+    "tsconfig.remotion.json"
+  ],
+  "exports": {
+    ".": { "default": "./Distribution/index.js", "types": "./Distribution/index.d.ts" },
+    "./tsconfig": "./tsconfig.remotion.json",
+    "./remotion": "./remotion.config.ts"
+  },
+  "dependencies": {
+    "@mdx-js/loader": "",
+    "@mdx-js/react": "",
+    "@remotion/cli": "4.0.177",
+    "@remotion/zod-types": "4.0.177",
+    "codehike": "1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "remotion": "4.0.177",
+    "twoslash-cdn": "^0.2.9",
+    "zod": "^3.21.4"
+  }
+}

package/remotion.config.ts

@@ -0,0 +1,65 @@
+/**
+ * @file      remotion.config.js
+ * @author    Gage Sorrell <gage@sorrell.sh>
+ * @copyright (c) 2026 Gage Sorrell
+ * @license   MIT
+ */
+
+/* eslint-disable @typescript-eslint/typedef, jsdoc/require-jsdoc */
+
+import { Config, type WebpackConfiguration } from "@remotion/cli/config";
+
+export const DefaultCodeHikeConfig =
+    {
+        syntaxHighlighting:
+        {
+            theme: "github-dark"
+        }
+    };
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+async function EnableMdx(CurrentConfiguration: any): Promise<WebpackConfiguration>
+{
+    const { remarkCodeHike, recmaCodeHike } = await import("codehike/mdx");
+
+    return {
+        ...CurrentConfiguration,
+        module:
+        {
+            ...CurrentConfiguration.module,
+            rules:
+            [
+                ...(CurrentConfiguration.module?.rules
+                    ? CurrentConfiguration.module.rules
+                    : [ ]
+                ),
+                {
+                    test: /\.mdx?$/,
+                    use:
+                    [
+                        {
+                            loader: "@mdx-js/loader",
+                            options:
+                            {
+                                recmaPlugins: [ [ recmaCodeHike, DefaultCodeHikeConfig ] ],
+                                remarkPlugins: [ [ remarkCodeHike, DefaultCodeHikeConfig ] ]
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+};
+
+export function ApplyBaseConfig(): void
+{
+    Config.overrideWebpackConfig(EnableMdx);
+}
+
+export function ApplyDefaultConfig(EntryPoint: string = "./Source/index.ts"): void
+{
+    ApplyBaseConfig();
+    Config.setVideoImageFormat("jpeg");
+    Config.setEntryPoint(EntryPoint);
+}

package/tsconfig.remotion.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions":
+    {
+        "target": "ES2018",
+        "module": "commonjs",
+        "jsx": "react-jsx",
+        "strict": true,
+        "noEmit": true,
+        "lib": [ "es2016", "DOM" ],
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "noUnusedLocals": true
+    },
+    "include": [ "Source" ],
+    "exclude": [ "Distribution", "remotion.config.ts" ]
+}