@sorrell/code-hike 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Distribution/CodePresentation/CodePresentation.Internal.Types.d.ts.map +1 -0
- package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.Types.js +1 -2
- package/Distribution/CodePresentation/CodePresentation.Internal.Types.js.map +1 -0
- package/Distribution/CodePresentation/CodePresentation.Internal.d.ts.map +1 -0
- package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.js +14 -17
- package/Distribution/CodePresentation/CodePresentation.Internal.js.map +1 -0
- package/Distribution/CodePresentation/CodePresentation.Types.d.ts.map +1 -0
- package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Types.js +1 -2
- package/Distribution/CodePresentation/CodePresentation.Types.js.map +1 -0
- package/Distribution/CodePresentation/CodePresentation.d.ts.map +1 -0
- package/Distribution/CodePresentation/CodePresentation.js +51 -0
- package/Distribution/CodePresentation/CodePresentation.js.map +1 -0
- package/Distribution/CodePresentation/TokenTransitions.d.ts.map +1 -0
- package/Distribution/CodePresentation/TokenTransitions.js +63 -0
- package/Distribution/CodePresentation/TokenTransitions.js.map +1 -0
- package/Distribution/CodePresentation/index.d.ts.map +1 -0
- package/Distribution/CodePresentation/index.js +10 -0
- package/Distribution/CodePresentation/index.js.map +1 -0
- package/Distribution/{Source/index.d.ts → index.d.ts} +5 -0
- package/Distribution/index.d.ts.map +1 -0
- package/Distribution/index.js +18 -0
- package/Distribution/index.js.map +1 -0
- package/package.json +9 -7
- package/Distribution/Source/CodePresentation/CodePresentation.Internal.Types.d.ts.map +0 -1
- package/Distribution/Source/CodePresentation/CodePresentation.Internal.d.ts.map +0 -1
- package/Distribution/Source/CodePresentation/CodePresentation.Types.d.ts.map +0 -1
- package/Distribution/Source/CodePresentation/CodePresentation.d.ts.map +0 -1
- package/Distribution/Source/CodePresentation/CodePresentation.js +0 -53
- package/Distribution/Source/CodePresentation/TokenTransitions.d.ts.map +0 -1
- package/Distribution/Source/CodePresentation/TokenTransitions.js +0 -66
- package/Distribution/Source/CodePresentation/index.d.ts.map +0 -1
- package/Distribution/Source/CodePresentation/index.js +0 -25
- package/Distribution/Source/ReactiveEventIntro/index.d.ts +0 -8
- package/Distribution/Source/ReactiveEventIntro/index.d.ts.map +0 -1
- package/Distribution/Source/ReactiveEventIntro/index.js +0 -33
- package/Distribution/Source/index.d.ts.map +0 -1
- package/Distribution/Source/index.js +0 -34
- package/index.d.ts +0 -14
- /package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.Types.d.ts +0 -0
- /package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.d.ts +0 -0
- /package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Types.d.ts +0 -0
- /package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.d.ts +0 -0
- /package/Distribution/{Source/CodePresentation → CodePresentation}/TokenTransitions.d.ts +0 -0
- /package/Distribution/{Source/CodePresentation → CodePresentation}/index.d.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.Internal.Types.d.ts","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.Internal.Types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACjG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAE7B,MAAM,MAAM,MAAM,GACd,QAAQ,CAAC,IAAI,CACT,iBAAiB,EACf,UAAU,GACV,WAAW,GACX,YAAY,GACZ,MAAM,GACN,UAAU,GACV,OAAO,CACZ,CAAC,GACF;IACI,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnD,MAAM,MAAM,UAAU,GAClB,mBAAmB,GACnB;IACI,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,mBAAmB,GAC3B,IAAI,CACA,MAAM,EACJ,UAAU,GACV,WAAW,GACX,UAAU,GACV,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,CACZ,CAAC;AAEN,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAE7E,MAAM,MAAM,KAAK,GACb,QAAQ,CAAC,IAAI,CACT,iBAAiB,EACf,WAAW,GACX,YAAY,GACZ,OAAO,CACZ,CAAC,GACF;IACI,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,qBAAqB,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC"}
|
package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.Types.js
RENAMED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* @file CodePresentation.Internal.Types.ts
|
|
4
3
|
* @author Gage Sorrell <gage@sorrell.sh>
|
|
5
4
|
* @copyright (c) 2026 Gage Sorrell
|
|
6
5
|
* @license MIT
|
|
7
6
|
*/
|
|
8
|
-
|
|
7
|
+
//# sourceMappingURL=CodePresentation.Internal.Types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.Internal.Types.js","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.Internal.Types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.Internal.d.ts","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.Internal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAKR,MAAM,EACM,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+C,CAAC;AACvE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+C,CAAC;AA4E3E,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAY9C"}
|
package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.js
RENAMED
|
@@ -1,21 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MarkdownSchema = exports.StepSchema = void 0;
|
|
4
|
-
exports.Video = Video;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
2
|
/**
|
|
7
3
|
* @file CodePresentation.Internal.tsx
|
|
8
4
|
* @author Gage Sorrell <gage@sorrell.sh>
|
|
9
5
|
* @copyright (c) 2026 Gage Sorrell
|
|
10
6
|
* @license MIT
|
|
11
7
|
*/
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
import { AbsoluteFill, Sequence } from "remotion";
|
|
9
|
+
import { Block, HighlightedCodeBlock } from "codehike/blocks";
|
|
10
|
+
import {} from "react";
|
|
11
|
+
import { Pre } from "codehike/code";
|
|
12
|
+
import { z } from "zod";
|
|
16
13
|
/* eslint-disable @typescript-eslint/typedef, @typescript-eslint/no-unused-vars, jsdoc/require-jsdoc */
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
export const StepSchema = Block.extend({ code: HighlightedCodeBlock });
|
|
15
|
+
export const MarkdownSchema = Block.extend({ steps: z.array(StepSchema) });
|
|
19
16
|
/* eslint-enable @typescript-eslint/typedef, @typescript-eslint/no-unused-vars */
|
|
20
17
|
function Code({ FrameRate, Handlers, Hook, OldCode, NewCode, Resolution, style }) {
|
|
21
18
|
const { Code, Ref } = Hook(OldCode, NewCode, FrameRate);
|
|
@@ -29,24 +26,24 @@ function Code({ FrameRate, Handlers, Hook, OldCode, NewCode, Resolution, style }
|
|
|
29
26
|
fontSize: `${BaseFontSizeRem * FontSizeScalars[Resolution]}rem`,
|
|
30
27
|
...style
|
|
31
28
|
};
|
|
32
|
-
return ((
|
|
29
|
+
return (_jsx(Pre, { code: Code, handlers: [...Handlers], ref: Ref, style: Style }));
|
|
33
30
|
}
|
|
34
31
|
function VideoStep(Props) {
|
|
35
|
-
var _a;
|
|
36
32
|
const { Duration, FrameRate, Handlers, Hook, Index, Resolution, Steps, style } = Props;
|
|
37
33
|
const Step = Steps[Index];
|
|
38
34
|
const DurationInFrames = Duration * 0.001 * FrameRate;
|
|
39
|
-
return ((
|
|
35
|
+
return (_jsx(Sequence, { durationInFrames: DurationInFrames, from: DurationInFrames * Index, layout: "none", name: Step.title, children: _jsx(Code, { NewCode: Step.code, OldCode: Steps[Index - 1]?.code, FrameRate, Handlers, Hook, Resolution, style }) }));
|
|
40
36
|
}
|
|
41
37
|
function MakeToVideoStep(InheritedProps) {
|
|
42
38
|
return function ToVideoStep(Step, Index) {
|
|
43
|
-
return ((
|
|
39
|
+
return (_jsx(VideoStep, { ...InheritedProps, Index, ...Step }, Index));
|
|
44
40
|
};
|
|
45
41
|
}
|
|
46
|
-
function Video(Props) {
|
|
47
|
-
return ((
|
|
42
|
+
export function Video(Props) {
|
|
43
|
+
return (_jsx(AbsoluteFill, { style: {
|
|
48
44
|
alignItems: "center",
|
|
49
45
|
background: "#0D1117",
|
|
50
46
|
fontSize: 24
|
|
51
47
|
}, children: Props.Steps.map(MakeToVideoStep(Props)) }));
|
|
52
48
|
}
|
|
49
|
+
//# sourceMappingURL=CodePresentation.Internal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.Internal.js","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.Internal.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAsC,MAAM,OAAO,CAAC;AAS3D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,uGAAuG;AAEvG,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAE3E,iFAAiF;AAEjF,SAAS,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAS;IAEnF,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IAExD,MAAM,eAAe,GAAW,CAAC,CAAC;IAClC,MAAM,eAAe,GACjB;QACI,UAAU,EAAE,IAAI,GAAG,IAAI;QACvB,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,IAAI,GAAG,IAAI;KAC3B,CAAC;IAEN,MAAM,KAAK,GACP;QACI,QAAQ,EAAE,GAAI,eAAe,GAAG,eAAe,CAAC,UAAU,CAAE,KAAK;QACjE,GAAG,KAAK;KACX,CAAC;IAEN,OAAO,CACH,KAAC,GAAG,IACA,IAAI,EAAG,IAAI,EACX,QAAQ,EAAG,CAAE,GAAG,QAAQ,CAAE,EAC1B,GAAG,EAAG,GAAG,EACT,KAAK,EAAG,KAAK,GACf,CACL,CAAC;AACN,CAAC;AAED,SAAS,SAAS,CAAC,KAAiB;IAEhC,MAAM,EACF,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAU,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,gBAAgB,GAAW,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAE9D,OAAO,CACH,KAAC,QAAQ,IACL,gBAAgB,EAAG,gBAAgB,EACnC,IAAI,EAAG,gBAAgB,GAAG,KAAK,EAC/B,MAAM,EAAC,MAAM,EACb,IAAI,EAAG,IAAI,CAAC,KAAK,YACjB,KAAC,IAAI,IACD,OAAO,EAAG,IAAI,CAAC,IAAI,EACnB,OAAO,EAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,IAAI,EACzB,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,GACrD,GACK,CACd,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,cAAmC;IAExD,OAAO,SAAS,WAAW,CAAC,IAAmB,EAAE,KAAa;QAE1D,OAAO,CACH,KAAC,SAAS,IAEC,GAAG,cAAc,EAAE,KAAK,EAAE,GAAG,IAAI,IADlC,KAAK,CAEb,CACL,CAAC;IACN,CAAC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAa;IAE/B,OAAO,CACH,KAAC,YAAY,IACT,KAAK,EAAG;YACJ,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,SAAS;YACrB,QAAQ,EAAE,EAAE;SACf,YACC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,GAC9B,CAClB,CAAC;AACN,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.Types.d.ts","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.Types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAKlF,4EAA4E;AAC5E,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAElC,yDAAyD;AACzD,MAAM,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1C,+CAA+C;AAC/C,MAAM,MAAM,UAAU,GAChB,EAAE,GACF,EAAE,CAAC;AAET,+CAA+C;AAC/C,MAAM,MAAM,WAAW;AACnB,8BAA8B;AAC5B,UAAU;AAEZ,yCAAyC;GACvC,WAAW;AAEb,8BAA8B;GAC5B,WAAW,CAAC;AAElB;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GACzB;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEN;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAChC,OAAO,EAAE,eAAe,GAAG,SAAS,EACpC,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,MAAM,KACf;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC,CAAC;AAEF,kFAAkF;AAClF,MAAM,MAAM,MAAM,GACd,iBAAiB,GACjB;IACI,UAAU,EAAE,eAAe,CAAC;CAC/B,CAAC"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
/**
|
|
3
2
|
* @file CodePresentation.Types.ts
|
|
4
3
|
* @author Gage Sorrell <gage@sorrell.sh>
|
|
5
4
|
* @copyright (c) 2026 Gage Sorrell
|
|
6
5
|
* @license MIT
|
|
7
6
|
*/
|
|
8
|
-
|
|
7
|
+
//# sourceMappingURL=CodePresentation.Types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.Types.js","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.Types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.d.ts","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE/E,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAMhD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAkEpE"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { MarkdownSchema, Video } from "./CodePresentation.Internal";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { TokenTransitions, UseTokenTransitions } from "./TokenTransitions";
|
|
5
|
+
import { Composition } from "remotion";
|
|
6
|
+
import { parseRoot } from "codehike/blocks";
|
|
7
|
+
/**
|
|
8
|
+
* An animation, made up of {@link FStep | steps}, to explain code.
|
|
9
|
+
*
|
|
10
|
+
* @param Props - The sequence of {@link FStep | steps} that defines an animation.
|
|
11
|
+
*
|
|
12
|
+
* @throws {Error} If {@link PCodePresentation!Durations} is an {@link Array} and there is not
|
|
13
|
+
* precisely one duration assigned to every step, then this will throw.
|
|
14
|
+
*
|
|
15
|
+
* @returns {ReactPortal | null} A {@link Composition} with default values for
|
|
16
|
+
* important props, suitable for code animations.
|
|
17
|
+
*/
|
|
18
|
+
export function CodePresentation(Props) {
|
|
19
|
+
const { Content, Duration, FrameRate = 90, Handlers: InHandlers, Hook = UseTokenTransitions, Name, Resolution = "1920x1280", style = {} } = Props;
|
|
20
|
+
const Handlers = (() => {
|
|
21
|
+
if (InHandlers === undefined) {
|
|
22
|
+
return [TokenTransitions];
|
|
23
|
+
}
|
|
24
|
+
else if (!InHandlers.includes(TokenTransitions)) {
|
|
25
|
+
return [...InHandlers, TokenTransitions];
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
return InHandlers;
|
|
29
|
+
}
|
|
30
|
+
})();
|
|
31
|
+
const { steps: Steps } = useMemo(
|
|
32
|
+
// @ts-expect-error parseRoot disagrees with the `zod` schema.
|
|
33
|
+
() => parseRoot(Content, MarkdownSchema), [Content]);
|
|
34
|
+
const Resolutions = {
|
|
35
|
+
"1296x864": [1296, 864],
|
|
36
|
+
"1920x1280": [1920, 1080],
|
|
37
|
+
"2400x1600": [2400, 1600]
|
|
38
|
+
};
|
|
39
|
+
const VideoProps = {
|
|
40
|
+
Duration,
|
|
41
|
+
FrameRate,
|
|
42
|
+
Handlers,
|
|
43
|
+
Hook,
|
|
44
|
+
Resolution,
|
|
45
|
+
Steps,
|
|
46
|
+
style
|
|
47
|
+
};
|
|
48
|
+
const DurationInFrames = FrameRate * Duration;
|
|
49
|
+
return (_jsx(Composition, { component: Video, defaultProps: VideoProps, durationInFrames: DurationInFrames, fps: FrameRate, height: Resolutions[Resolution][1], id: Name, width: Resolutions[Resolution][0] }));
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=CodePresentation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CodePresentation.js","sourceRoot":"","sources":["../../Source/CodePresentation/CodePresentation.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAkB,OAAO,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAwB;IAErD,MAAM,EACF,OAAO,EACP,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,EAAE,UAAU,EACpB,IAAI,GAAG,mBAAmB,EAC1B,IAAI,EACJ,UAAU,GAAG,WAAW,EACxB,KAAK,GAAG,EAAG,EACd,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAqC,CAAC,GAAqC,EAAE;QAEvF,IAAI,UAAU,KAAK,SAAS,EAC5B,CAAC;YACG,OAAO,CAAE,gBAAgB,CAAW,CAAC;QACzC,CAAC;aACI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAC/C,CAAC;YACG,OAAO,CAAE,GAAG,UAAU,EAAE,gBAAgB,CAAW,CAAC;QACxD,CAAC;aAED,CAAC;YACG,OAAO,UAAU,CAAC;QACtB,CAAC;IACL,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,OAAO;IAC5B,8DAA8D;IAC9D,GAAmB,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,cAAc,CAAC,EACxD,CAAE,OAAO,CAAE,CACd,CAAC;IAEF,MAAM,WAAW,GACb;QACI,UAAU,EAAE,CAAE,IAAI,EAAE,GAAG,CAAW;QAClC,WAAW,EAAE,CAAE,IAAI,EAAE,IAAI,CAAW;QACpC,WAAW,EAAE,CAAE,IAAI,EAAE,IAAI,CAAW;KAC9B,CAAC;IAEf,MAAM,UAAU,GACZ;QACI,QAAQ;QACR,SAAS;QACT,QAAQ;QACR,IAAI;QACJ,UAAU;QACV,KAAK;QACL,KAAK;KACR,CAAC;IAEN,MAAM,gBAAgB,GAAW,SAAS,GAAG,QAAQ,CAAC;IAEtD,OAAO,CACH,KAAC,WAAW,IACR,SAAS,EAAG,KAAK,EACjB,YAAY,EAAG,UAAU,EACzB,gBAAgB,EAAG,gBAAgB,EACnC,GAAG,EAAG,SAAS,EACf,MAAM,EAAG,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACnC,EAAE,EAAG,IAAI,EACT,KAAK,EAAG,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GACpC,CACL,CAAC;AACN,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TokenTransitions.d.ts","sourceRoot":"","sources":["../../Source/CodePresentation/TokenTransitions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,eAAe,EAGvB,MAAM,eAAe,CAAC;AAiBvB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,eAAe,GAAG,SAAS,EACpC,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,MAAM,GAClB,UAAU,CAAC,qBAAqB,CAAC,CAyCnC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAe1B,CAAC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* @file TokenTransitions.tsx
|
|
4
|
+
* @author Gage Sorrell <gage@sorrell.sh>
|
|
5
|
+
* @copyright (c) 2026 Gage Sorrell
|
|
6
|
+
* @license MIT
|
|
7
|
+
*/
|
|
8
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
9
|
+
import { InnerPre, InnerToken } from "codehike/code";
|
|
10
|
+
import { useLayoutEffect, useRef, useState } from "react";
|
|
11
|
+
import { Easing, continueRender, delayRender, useCurrentFrame } from "remotion";
|
|
12
|
+
import { calculateTransitions, getStartingSnapshot } from "codehike/utils/token-transitions";
|
|
13
|
+
import { interpolate, interpolateColors } from "remotion";
|
|
14
|
+
export function UseTokenTransitions(OldCode, NewCode, FrameRate) {
|
|
15
|
+
const Frame = useCurrentFrame();
|
|
16
|
+
const Ref = useRef(null);
|
|
17
|
+
const [Snapshot, SetSnapshot] = useState();
|
|
18
|
+
const [Handle] = useState(() => delayRender());
|
|
19
|
+
/* If there is no old code, then transition from empty code. */
|
|
20
|
+
const PreviousCode = OldCode || { ...NewCode, annotations: [], tokens: [] };
|
|
21
|
+
useLayoutEffect(() => {
|
|
22
|
+
if (!Snapshot) {
|
|
23
|
+
SetSnapshot(getStartingSnapshot(Ref.current));
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const Transitions = calculateTransitions(Ref.current, Snapshot);
|
|
27
|
+
function ApplyTransition({ element, keyframes, options }) {
|
|
28
|
+
interpolateStyle(element, keyframes, Frame, FrameRate * options.delay, FrameRate * options.duration);
|
|
29
|
+
}
|
|
30
|
+
;
|
|
31
|
+
Transitions.forEach(ApplyTransition);
|
|
32
|
+
continueRender(Handle);
|
|
33
|
+
}, [Snapshot, Handle, Frame, FrameRate]);
|
|
34
|
+
const Code = Snapshot
|
|
35
|
+
? NewCode
|
|
36
|
+
: PreviousCode;
|
|
37
|
+
return { Code, Ref };
|
|
38
|
+
}
|
|
39
|
+
export const TokenTransitions = {
|
|
40
|
+
Pre: (Props) => (_jsx(InnerPre, { merge: Props, style: { position: "relative" } })),
|
|
41
|
+
Token: (Props) => (_jsx(InnerToken, { merge: Props, style: { display: "inline-block" } })),
|
|
42
|
+
name: "token-transitions"
|
|
43
|
+
};
|
|
44
|
+
function interpolateStyle(Element, Keyframes, Frame, Delay, Duration) {
|
|
45
|
+
const { color: Color, opacity: Opacity, translateX: TranslateX, translateY: TranslateY } = Keyframes;
|
|
46
|
+
const Progress = interpolate(Frame, [Delay, Delay + Duration], [0, 1], {
|
|
47
|
+
easing: Easing.inOut(Easing.ease),
|
|
48
|
+
extrapolateLeft: "clamp",
|
|
49
|
+
extrapolateRight: "clamp"
|
|
50
|
+
});
|
|
51
|
+
if (Opacity) {
|
|
52
|
+
Element.style.opacity = interpolate(Progress, [0, 1], Opacity).toString();
|
|
53
|
+
}
|
|
54
|
+
if (Color) {
|
|
55
|
+
Element.style.color = interpolateColors(Progress, [0, 1], Color);
|
|
56
|
+
}
|
|
57
|
+
if (TranslateX || TranslateY) {
|
|
58
|
+
const X = interpolate(Progress, [0, 1], TranslateX);
|
|
59
|
+
const Y = interpolate(Progress, [0, 1], TranslateY);
|
|
60
|
+
Element.style.translate = `${X}px ${Y}px`;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=TokenTransitions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TokenTransitions.js","sourceRoot":"","sources":["../../Source/CodePresentation/TokenTransitions.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,wCAAwC;AAExC,OAAO,EAGH,QAAQ,EACR,UAAU,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAIH,eAAe,EACf,MAAM,EACN,QAAQ,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChF,OAAO,EAGH,oBAAoB,EACpB,mBAAmB,EACtB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG1D,MAAM,UAAU,mBAAmB,CAC/B,OAAoC,EACpC,OAAwB,EACxB,SAAiB;IAGjB,MAAM,KAAK,GAAW,eAAe,EAAE,CAAC;IACxC,MAAM,GAAG,GAA8B,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpE,MAAM,CAAE,QAAQ,EAAE,WAAW,CAAE,GAAG,QAAQ,EAA4B,CAAC;IACvE,MAAM,CAAE,MAAM,CAAE,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IAEjD,+DAA+D;IAC/D,MAAM,YAAY,GAAoB,OAAO,IAAI,EAAE,GAAG,OAAO,EAAE,WAAW,EAAE,EAAG,EAAE,MAAM,EAAE,EAAG,EAAE,CAAC;IAE/F,eAAe,CAAC,GAAG,EAAE;QAEjB,IAAI,CAAC,QAAQ,EACb,CAAC;YACG,WAAW,CAAC,mBAAmB,CAAC,GAAG,CAAC,OAAQ,CAAC,CAAC,CAAC;YAC/C,OAAO;QACX,CAAC;QAED,MAAM,WAAW,GAA2B,oBAAoB,CAAC,GAAG,CAAC,OAAQ,EAAE,QAAQ,CAAC,CAAC;QAEzF,SAAS,eAAe,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAmB;YAErE,gBAAgB,CACZ,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,GAAG,OAAO,CAAC,KAAK,EACzB,SAAS,GAAG,OAAO,CAAC,QAAQ,CAC/B,CAAC;QACN,CAAC;QAAA,CAAC;QAEF,WAAW,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAErC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,CAAE,CAAC,CAAC;IAE3C,MAAM,IAAI,GAAoB,QAAQ;QAClC,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,YAAY,CAAC;IAEnB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;AACzB,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GACzB;IACI,GAAG,EAAE,CAAC,KAA+C,EAAa,EAAE,CAAC,CACjE,KAAC,QAAQ,IACL,KAAK,EAAG,KAAK,EACb,KAAK,EAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,GAClC,CACL;IACD,KAAK,EAAE,CAAC,KAAiD,EAAa,EAAE,CAAC,CACrE,KAAC,UAAU,IACP,KAAK,EAAG,KAAK,EACb,KAAK,EAAG,EAAE,OAAO,EAAE,cAAc,EAAE,GACrC,CACL;IACD,IAAI,EAAE,mBAAmB;CAC5B,CAAC;AAEN,SAAS,gBAAgB,CACrB,OAAoB,EACpB,SAAuC,EACvC,KAAa,EACb,KAAa,EACb,QAAgB;IAGhB,MAAM,EACF,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACzB,GAAG,SAAS,CAAC;IAEd,MAAM,QAAQ,GAAW,WAAW,CAChC,KAAK,EACL,CAAE,KAAK,EAAE,KAAK,GAAG,QAAQ,CAAE,EAC3B,CAAE,CAAC,EAAE,CAAC,CAAE,EACR;QACI,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;QACjC,eAAe,EAAE,OAAO;QACxB,gBAAgB,EAAE,OAAO;KAC5B,CACJ,CAAC;IAEF,IAAI,OAAO,EACX,CAAC;QACG,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAE,CAAC,EAAE,CAAC,CAAE,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;IAChF,CAAC;IACD,IAAI,KAAK,EACT,CAAC;QACG,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC,QAAQ,EAAE,CAAE,CAAC,EAAE,CAAC,CAAE,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC;IACD,IAAI,UAAU,IAAI,UAAU,EAC5B,CAAC;QACG,MAAM,CAAC,GAAW,WAAW,CAAC,QAAQ,EAAE,CAAE,CAAC,EAAE,CAAC,CAAE,EAAE,UAAW,CAAC,CAAC;QAC/D,MAAM,CAAC,GAAW,WAAW,CAAC,QAAQ,EAAE,CAAE,CAAC,EAAE,CAAC,CAAE,EAAE,UAAW,CAAC,CAAC;QAC/D,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAI,CAAE,MAAO,CAAE,IAAI,CAAC;IAClD,CAAC;AACL,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../Source/CodePresentation/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file index.ts
|
|
3
|
+
* @author Gage Sorrell <gage@sorrell.sh>
|
|
4
|
+
* @copyright (c) 2026 Gage Sorrell
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
export * from "./CodePresentation";
|
|
8
|
+
export * from "./CodePresentation.Types";
|
|
9
|
+
export * from "./TokenTransitions";
|
|
10
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../Source/CodePresentation/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC"}
|
|
@@ -13,4 +13,9 @@ import type { FC } from "react";
|
|
|
13
13
|
*/
|
|
14
14
|
export declare function RunStudio(PresentationComponent: FC): void;
|
|
15
15
|
export * from "./CodePresentation";
|
|
16
|
+
declare module "*.md"
|
|
17
|
+
{
|
|
18
|
+
const Content: unknown;
|
|
19
|
+
export default Content;
|
|
20
|
+
}
|
|
16
21
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../Source/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,qBAAqB,EAAE,EAAE,GAAG,IAAI,CAGzD;AAED,cAAc,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file index.js
|
|
3
|
+
* @author Gage Sorrell <gage@sorrell.sh>
|
|
4
|
+
* @copyright (c) 2026 Gage Sorrell
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
import { registerRoot } from "remotion";
|
|
8
|
+
/**
|
|
9
|
+
* This should be called in the Remotion entrypoint, so that Remotion Studio
|
|
10
|
+
* will open the given {@link CodePresentation} component.
|
|
11
|
+
*
|
|
12
|
+
* @param PresentationComponent - The component to open in Remotion Studio.
|
|
13
|
+
*/
|
|
14
|
+
export function RunStudio(PresentationComponent) {
|
|
15
|
+
registerRoot(PresentationComponent);
|
|
16
|
+
}
|
|
17
|
+
export * from "./CodePresentation";
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../Source/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,qBAAyB;IAE/C,YAAY,CAAC,qBAAqB,CAAC,CAAC;AACxC,CAAC;AAED,cAAc,oBAAoB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sorrell/code-hike",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.15",
|
|
5
5
|
"description": "A helper library for making animations with Code Hike.",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"build": "tsc -p ./tsconfig.json"
|
|
7
|
+
"build": "tsc -p ./tsconfig.json",
|
|
8
|
+
"postbuild": "ts-node --project ./tsconfig.script.json ./Script/AppendMarkdownModule.ts"
|
|
8
9
|
},
|
|
9
10
|
"keywords": [
|
|
10
11
|
"code-hike",
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
"next"
|
|
17
18
|
],
|
|
18
19
|
"homepage": "https://github.com/GageSorrell/SorrellWm/tree/Master/Package/CodeHike#ReadMe",
|
|
20
|
+
"type": "module",
|
|
19
21
|
"bugs": {
|
|
20
22
|
"url": "https://github.com/GageSorrell/SorrellWm/issues"
|
|
21
23
|
},
|
|
@@ -39,23 +41,23 @@
|
|
|
39
41
|
}
|
|
40
42
|
},
|
|
41
43
|
"devDependencies": {
|
|
42
|
-
"remotion": "4.0.177",
|
|
43
44
|
"@types/react": "^18.0.0",
|
|
45
|
+
"remotion": "4.0.177",
|
|
46
|
+
"ts-node": "^10.9.2",
|
|
44
47
|
"typescript": "^6.0.3"
|
|
45
48
|
},
|
|
46
49
|
"files": [
|
|
47
|
-
"index.d.ts",
|
|
48
50
|
"Distribution",
|
|
49
51
|
"Distribution/**/*",
|
|
50
52
|
"Remotion.js",
|
|
51
53
|
"Remotion.d.ts",
|
|
52
54
|
"tsconfig.remotion.json"
|
|
53
55
|
],
|
|
54
|
-
"types": "./index.d.ts",
|
|
56
|
+
"types": "./Distribution/Source/index.d.ts",
|
|
55
57
|
"exports": {
|
|
56
58
|
".": {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
"import": "./Distribution/Source/index.js",
|
|
60
|
+
"types": "./Distribution/Source/index.d.ts"
|
|
59
61
|
},
|
|
60
62
|
"./tsconfig": "./tsconfig.remotion.json",
|
|
61
63
|
"./remotion": "./Remotion.js"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodePresentation.Internal.Types.d.ts","sourceRoot":"","sources":["../../../Source/CodePresentation/CodePresentation.Internal.Types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACjG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAE7B,MAAM,MAAM,MAAM,GACd,QAAQ,CAAC,IAAI,CACT,iBAAiB,EACf,UAAU,GACV,WAAW,GACX,YAAY,GACZ,MAAM,GACN,UAAU,GACV,OAAO,CACZ,CAAC,GACF;IACI,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,cAAc,CAAC,CAAC;AAE5D,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnD,MAAM,MAAM,UAAU,GAClB,mBAAmB,GACnB;IACI,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEN,MAAM,MAAM,mBAAmB,GAC3B,IAAI,CACA,MAAM,EACJ,UAAU,GACV,WAAW,GACX,UAAU,GACV,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,CACZ,CAAC;AAEN,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;AAE7E,MAAM,MAAM,KAAK,GACb,QAAQ,CAAC,IAAI,CACT,iBAAiB,EACf,WAAW,GACX,YAAY,GACZ,OAAO,CACZ,CAAC,GACF;IACI,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,qBAAqB,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodePresentation.Internal.d.ts","sourceRoot":"","sources":["../../../Source/CodePresentation/CodePresentation.Internal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAKR,MAAM,EACM,MAAM,mCAAmC,CAAC;AAE1D,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+C,CAAC;AACvE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+C,CAAC;AA4E3E,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAY9C"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodePresentation.Types.d.ts","sourceRoot":"","sources":["../../../Source/CodePresentation/CodePresentation.Types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAKlF,4EAA4E;AAC5E,MAAM,MAAM,KAAK,GAAG,aAAa,CAAC;AAElC,yDAAyD;AACzD,MAAM,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;AAE1C,+CAA+C;AAC/C,MAAM,MAAM,UAAU,GAChB,EAAE,GACF,EAAE,CAAC;AAET,+CAA+C;AAC/C,MAAM,MAAM,WAAW;AACnB,8BAA8B;AAC5B,UAAU;AAEZ,yCAAyC;GACvC,WAAW;AAEb,8BAA8B;GAC5B,WAAW,CAAC;AAElB;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GACzB;IACI,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEN;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAChC,OAAO,EAAE,eAAe,GAAG,SAAS,EACpC,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,MAAM,KACf;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC,CAAC;AAEF,kFAAkF;AAClF,MAAM,MAAM,MAAM,GACd,iBAAiB,GACjB;IACI,UAAU,EAAE,eAAe,CAAC;CAC/B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CodePresentation.d.ts","sourceRoot":"","sources":["../../../Source/CodePresentation/CodePresentation.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAE/E,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAMhD;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAkEpE"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.CodePresentation = CodePresentation;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const CodePresentation_Internal_1 = require("./CodePresentation.Internal");
|
|
6
|
-
const react_1 = require("react");
|
|
7
|
-
const TokenTransitions_1 = require("./TokenTransitions");
|
|
8
|
-
const remotion_1 = require("remotion");
|
|
9
|
-
const blocks_1 = require("codehike/blocks");
|
|
10
|
-
/**
|
|
11
|
-
* An animation, made up of {@link FStep | steps}, to explain code.
|
|
12
|
-
*
|
|
13
|
-
* @param Props - The sequence of {@link FStep | steps} that defines an animation.
|
|
14
|
-
*
|
|
15
|
-
* @throws {Error} If {@link PCodePresentation!Durations} is an {@link Array} and there is not
|
|
16
|
-
* precisely one duration assigned to every step, then this will throw.
|
|
17
|
-
*
|
|
18
|
-
* @returns {ReactPortal | null} A {@link Composition} with default values for
|
|
19
|
-
* important props, suitable for code animations.
|
|
20
|
-
*/
|
|
21
|
-
function CodePresentation(Props) {
|
|
22
|
-
const { Content, Duration, FrameRate = 90, Handlers: InHandlers, Hook = TokenTransitions_1.UseTokenTransitions, Name, Resolution = "1920x1280", style = {} } = Props;
|
|
23
|
-
const Handlers = (() => {
|
|
24
|
-
if (InHandlers === undefined) {
|
|
25
|
-
return [TokenTransitions_1.TokenTransitions];
|
|
26
|
-
}
|
|
27
|
-
else if (!InHandlers.includes(TokenTransitions_1.TokenTransitions)) {
|
|
28
|
-
return [...InHandlers, TokenTransitions_1.TokenTransitions];
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
return InHandlers;
|
|
32
|
-
}
|
|
33
|
-
})();
|
|
34
|
-
const { steps: Steps } = (0, react_1.useMemo)(
|
|
35
|
-
// @ts-expect-error parseRoot disagrees with the `zod` schema.
|
|
36
|
-
() => (0, blocks_1.parseRoot)(Content, CodePresentation_Internal_1.MarkdownSchema), [Content]);
|
|
37
|
-
const Resolutions = {
|
|
38
|
-
"1296x864": [1296, 864],
|
|
39
|
-
"1920x1280": [1920, 1080],
|
|
40
|
-
"2400x1600": [2400, 1600]
|
|
41
|
-
};
|
|
42
|
-
const VideoProps = {
|
|
43
|
-
Duration,
|
|
44
|
-
FrameRate,
|
|
45
|
-
Handlers,
|
|
46
|
-
Hook,
|
|
47
|
-
Resolution,
|
|
48
|
-
Steps,
|
|
49
|
-
style
|
|
50
|
-
};
|
|
51
|
-
const DurationInFrames = FrameRate * Duration;
|
|
52
|
-
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] }));
|
|
53
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TokenTransitions.d.ts","sourceRoot":"","sources":["../../../Source/CodePresentation/TokenTransitions.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EACH,KAAK,iBAAiB,EACtB,KAAK,eAAe,EAGvB,MAAM,eAAe,CAAC;AAiBvB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,eAAe,GAAG,SAAS,EACpC,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,MAAM,GAClB,UAAU,CAAC,qBAAqB,CAAC,CAyCnC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAe1B,CAAC"}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.TokenTransitions = void 0;
|
|
4
|
-
exports.UseTokenTransitions = UseTokenTransitions;
|
|
5
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
/**
|
|
7
|
-
* @file TokenTransitions.tsx
|
|
8
|
-
* @author Gage Sorrell <gage@sorrell.sh>
|
|
9
|
-
* @copyright (c) 2026 Gage Sorrell
|
|
10
|
-
* @license MIT
|
|
11
|
-
*/
|
|
12
|
-
/* eslint-disable jsdoc/require-jsdoc */
|
|
13
|
-
const code_1 = require("codehike/code");
|
|
14
|
-
const react_1 = require("react");
|
|
15
|
-
const remotion_1 = require("remotion");
|
|
16
|
-
const token_transitions_1 = require("codehike/utils/token-transitions");
|
|
17
|
-
const remotion_2 = require("remotion");
|
|
18
|
-
function UseTokenTransitions(OldCode, NewCode, FrameRate) {
|
|
19
|
-
const Frame = (0, remotion_1.useCurrentFrame)();
|
|
20
|
-
const Ref = (0, react_1.useRef)(null);
|
|
21
|
-
const [Snapshot, SetSnapshot] = (0, react_1.useState)();
|
|
22
|
-
const [Handle] = (0, react_1.useState)(() => (0, remotion_1.delayRender)());
|
|
23
|
-
/* If there is no old code, then transition from empty code. */
|
|
24
|
-
const PreviousCode = OldCode || { ...NewCode, annotations: [], tokens: [] };
|
|
25
|
-
(0, react_1.useLayoutEffect)(() => {
|
|
26
|
-
if (!Snapshot) {
|
|
27
|
-
SetSnapshot((0, token_transitions_1.getStartingSnapshot)(Ref.current));
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
const Transitions = (0, token_transitions_1.calculateTransitions)(Ref.current, Snapshot);
|
|
31
|
-
function ApplyTransition({ element, keyframes, options }) {
|
|
32
|
-
interpolateStyle(element, keyframes, Frame, FrameRate * options.delay, FrameRate * options.duration);
|
|
33
|
-
}
|
|
34
|
-
;
|
|
35
|
-
Transitions.forEach(ApplyTransition);
|
|
36
|
-
(0, remotion_1.continueRender)(Handle);
|
|
37
|
-
}, [Snapshot, Handle, Frame, FrameRate]);
|
|
38
|
-
const Code = Snapshot
|
|
39
|
-
? NewCode
|
|
40
|
-
: PreviousCode;
|
|
41
|
-
return { Code, Ref };
|
|
42
|
-
}
|
|
43
|
-
exports.TokenTransitions = {
|
|
44
|
-
Pre: (Props) => ((0, jsx_runtime_1.jsx)(code_1.InnerPre, { merge: Props, style: { position: "relative" } })),
|
|
45
|
-
Token: (Props) => ((0, jsx_runtime_1.jsx)(code_1.InnerToken, { merge: Props, style: { display: "inline-block" } })),
|
|
46
|
-
name: "token-transitions"
|
|
47
|
-
};
|
|
48
|
-
function interpolateStyle(Element, Keyframes, Frame, Delay, Duration) {
|
|
49
|
-
const { color: Color, opacity: Opacity, translateX: TranslateX, translateY: TranslateY } = Keyframes;
|
|
50
|
-
const Progress = (0, remotion_2.interpolate)(Frame, [Delay, Delay + Duration], [0, 1], {
|
|
51
|
-
easing: remotion_1.Easing.inOut(remotion_1.Easing.ease),
|
|
52
|
-
extrapolateLeft: "clamp",
|
|
53
|
-
extrapolateRight: "clamp"
|
|
54
|
-
});
|
|
55
|
-
if (Opacity) {
|
|
56
|
-
Element.style.opacity = (0, remotion_2.interpolate)(Progress, [0, 1], Opacity).toString();
|
|
57
|
-
}
|
|
58
|
-
if (Color) {
|
|
59
|
-
Element.style.color = (0, remotion_2.interpolateColors)(Progress, [0, 1], Color);
|
|
60
|
-
}
|
|
61
|
-
if (TranslateX || TranslateY) {
|
|
62
|
-
const X = (0, remotion_2.interpolate)(Progress, [0, 1], TranslateX);
|
|
63
|
-
const Y = (0, remotion_2.interpolate)(Progress, [0, 1], TranslateY);
|
|
64
|
-
Element.style.translate = `${X}px ${Y}px`;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Source/CodePresentation/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @file index.ts
|
|
4
|
-
* @author Gage Sorrell <gage@sorrell.sh>
|
|
5
|
-
* @copyright (c) 2026 Gage Sorrell
|
|
6
|
-
* @license MIT
|
|
7
|
-
*/
|
|
8
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
9
|
-
if (k2 === undefined) k2 = k;
|
|
10
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
11
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
12
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
13
|
-
}
|
|
14
|
-
Object.defineProperty(o, k2, desc);
|
|
15
|
-
}) : (function(o, m, k, k2) {
|
|
16
|
-
if (k2 === undefined) k2 = k;
|
|
17
|
-
o[k2] = m[k];
|
|
18
|
-
}));
|
|
19
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
20
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
-
};
|
|
22
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
-
__exportStar(require("./CodePresentation"), exports);
|
|
24
|
-
__exportStar(require("./CodePresentation.Types"), exports);
|
|
25
|
-
__exportStar(require("./TokenTransitions"), exports);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Source/ReactiveEventIntro/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAsCH,wBAAgB,kBAAkB,4CASjC"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.ReactiveEventIntro = ReactiveEventIntro;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
/**
|
|
9
|
-
* @file index.tsx
|
|
10
|
-
* @author Gage Sorrell <gage@sorrell.sh>
|
|
11
|
-
* @copyright (c) 2026 Gage Sorrell
|
|
12
|
-
* @license MIT
|
|
13
|
-
*/
|
|
14
|
-
/* eslint-disable jsdoc/require-jsdoc */
|
|
15
|
-
const code_1 = require("codehike/code");
|
|
16
|
-
const remotion_1 = require("remotion");
|
|
17
|
-
const CodePresentation_1 = require("../CodePresentation/CodePresentation");
|
|
18
|
-
const Content_md_1 = __importDefault(require("./Content.md"));
|
|
19
|
-
const Mark = {
|
|
20
|
-
Block: ({ children, annotation }) => {
|
|
21
|
-
const Delay = +(annotation.query || 0);
|
|
22
|
-
const Frame = (0, remotion_1.useCurrentFrame)();
|
|
23
|
-
const Background = (0, remotion_1.interpolateColors)(Frame, [Delay, Delay + 10], ["#0000", "#F2CC6044"]);
|
|
24
|
-
return (0, jsx_runtime_1.jsx)("div", { style: { background: Background }, children: children });
|
|
25
|
-
},
|
|
26
|
-
/* eslint-disable-next-line @typescript-eslint/typedef */
|
|
27
|
-
Line: (Props) => ((0, jsx_runtime_1.jsx)(code_1.InnerLine, { merge: Props, style: { padding: "0 4px" } })),
|
|
28
|
-
name: "mark"
|
|
29
|
-
};
|
|
30
|
-
const Handlers = [Mark];
|
|
31
|
-
function ReactiveEventIntro() {
|
|
32
|
-
return ((0, jsx_runtime_1.jsx)(CodePresentation_1.CodePresentation, { Duration: 3000, Name: "ReactiveEventIntro", Content: Content_md_1.default, Handlers }));
|
|
33
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../Source/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,qBAAqB,EAAE,EAAE,GAAG,IAAI,CAGzD;AAED,cAAc,oBAAoB,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @file index.js
|
|
4
|
-
* @author Gage Sorrell <gage@sorrell.sh>
|
|
5
|
-
* @copyright (c) 2026 Gage Sorrell
|
|
6
|
-
* @license MIT
|
|
7
|
-
*/
|
|
8
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
9
|
-
if (k2 === undefined) k2 = k;
|
|
10
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
11
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
12
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
13
|
-
}
|
|
14
|
-
Object.defineProperty(o, k2, desc);
|
|
15
|
-
}) : (function(o, m, k, k2) {
|
|
16
|
-
if (k2 === undefined) k2 = k;
|
|
17
|
-
o[k2] = m[k];
|
|
18
|
-
}));
|
|
19
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
20
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
-
};
|
|
22
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
23
|
-
exports.RunStudio = RunStudio;
|
|
24
|
-
const remotion_1 = require("remotion");
|
|
25
|
-
/**
|
|
26
|
-
* This should be called in the Remotion entrypoint, so that Remotion Studio
|
|
27
|
-
* will open the given {@link CodePresentation} component.
|
|
28
|
-
*
|
|
29
|
-
* @param PresentationComponent - The component to open in Remotion Studio.
|
|
30
|
-
*/
|
|
31
|
-
function RunStudio(PresentationComponent) {
|
|
32
|
-
(0, remotion_1.registerRoot)(PresentationComponent);
|
|
33
|
-
}
|
|
34
|
-
__exportStar(require("./CodePresentation"), exports);
|
package/index.d.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file Declarations.d.ts
|
|
3
|
-
* @author Gage Sorrell <gage@sorrell.sh>
|
|
4
|
-
* @copyright (c) 2026 Gage Sorrell
|
|
5
|
-
* @license MIT
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
export * from "./Distribution/Source/index";
|
|
9
|
-
|
|
10
|
-
declare module "*.md"
|
|
11
|
-
{
|
|
12
|
-
const Content: unknown;
|
|
13
|
-
export default Content;
|
|
14
|
-
}
|
|
File without changes
|
/package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Internal.d.ts
RENAMED
|
File without changes
|
/package/Distribution/{Source/CodePresentation → CodePresentation}/CodePresentation.Types.d.ts
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|