astro-magic-move 0.1.0 → 0.1.1
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/package.json +1 -1
- package/src/MagicMove.astro +6 -8
- package/styles/magic-move.css +5 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "astro-magic-move",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Animated code morphing for Astro, powered by Shiki Magic Move. Build-time tokenization, zero-framework client JS, CSS-variable theming.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
package/src/MagicMove.astro
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
-
import type { MagicMoveProps } from "./types";
|
|
3
|
-
import { cssVarTheme } from "./theme";
|
|
4
2
|
import { createHighlighter, type HighlighterGeneric } from "shiki";
|
|
5
3
|
import { codeToKeyedTokens, createMagicMoveMachine } from "shiki-magic-move/core";
|
|
4
|
+
import { cssVarTheme } from "./theme";
|
|
5
|
+
import type { MagicMoveProps } from "./types";
|
|
6
6
|
|
|
7
7
|
interface Props extends MagicMoveProps {}
|
|
8
8
|
|
|
@@ -29,15 +29,14 @@ if (stepsProp) {
|
|
|
29
29
|
} else if (before != null && after != null) {
|
|
30
30
|
steps = [before, after];
|
|
31
31
|
} else {
|
|
32
|
-
throw new Error(
|
|
33
|
-
"[astro-magic-move] Provide either `before` + `after` or `steps` (min 2 items).",
|
|
34
|
-
);
|
|
32
|
+
throw new Error("[astro-magic-move] Provide either `before` + `after` or `steps` (min 2 items).");
|
|
35
33
|
}
|
|
36
34
|
|
|
37
35
|
// Module-level highlighter cache (survives HMR via globalThis)
|
|
38
36
|
const CACHE_KEY = "__astro_magic_move_hl";
|
|
39
37
|
type HLCache = Map<string, HighlighterGeneric<string, string>>;
|
|
40
|
-
const hlCache: HLCache = ((globalThis as Record<string, unknown>)[CACHE_KEY] ??=
|
|
38
|
+
const hlCache: HLCache = ((globalThis as Record<string, unknown>)[CACHE_KEY] ??=
|
|
39
|
+
new Map()) as HLCache;
|
|
41
40
|
|
|
42
41
|
let highlighter = hlCache.get(lang);
|
|
43
42
|
if (!highlighter) {
|
|
@@ -50,8 +49,7 @@ if (!highlighter) {
|
|
|
50
49
|
|
|
51
50
|
// Build the magic move machine and compile all steps at build time
|
|
52
51
|
const machine = createMagicMoveMachine(
|
|
53
|
-
(code) =>
|
|
54
|
-
codeToKeyedTokens(highlighter, code, { lang, theme: "css-variables" }, lineNumbers),
|
|
52
|
+
(code) => codeToKeyedTokens(highlighter, code, { lang, theme: "css-variables" }, lineNumbers),
|
|
55
53
|
{},
|
|
56
54
|
);
|
|
57
55
|
|
package/styles/magic-move.css
CHANGED
|
@@ -11,10 +11,11 @@ magic-move {
|
|
|
11
11
|
margin: 0;
|
|
12
12
|
overflow-x: auto;
|
|
13
13
|
overflow-y: hidden;
|
|
14
|
-
padding: 1rem
|
|
15
|
-
font-family:
|
|
16
|
-
"Liberation Mono", "Courier New",
|
|
17
|
-
|
|
14
|
+
padding: 0.75rem 1rem;
|
|
15
|
+
font-family:
|
|
16
|
+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
|
|
17
|
+
monospace;
|
|
18
|
+
font-size: clamp(0.75rem, 2vw, 0.875rem);
|
|
18
19
|
line-height: 1.7;
|
|
19
20
|
text-align: left;
|
|
20
21
|
background: var(--shiki-background, #1e1e1e);
|