Not Found
++ Visit{" "} + + solidjs.com + {" "} + to learn how to build Solid apps. +
++ + Home + + {" - "} + + About Page + +
+
+
+
+
+ 
+
+
+ {
+ // Render initial tokens for SSR
+
+ // FIXME: Remove this element
+ // Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
+ }
+
+ {isMounted
+ ? undefined
+ : tokens.tokens.map((token) => {
+ if (token.content === '\n')
+ return
+
+ return (
+
+ {token.content}
+
+ )
+ })}
+
+
+ )
+}
diff --git a/packages/shiki-magic-move/src/react/index.ts b/packages/shiki-magic-move/src/react/index.ts
new file mode 100644
index 0000000..806d941
--- /dev/null
+++ b/packages/shiki-magic-move/src/react/index.ts
@@ -0,0 +1,9 @@
+import { ShikiMagicMove } from './ShikiMagicMove'
+import { ShikiMagicMovePrecompiled } from './ShikiMagicMovePrecompiled'
+import { ShikiMagicMoveRenderer } from './ShikiMagicMoveRenderer'
+
+export {
+ ShikiMagicMove,
+ ShikiMagicMovePrecompiled,
+ ShikiMagicMoveRenderer,
+}
diff --git a/packages/shiki-magic-move/src/react/utils.ts b/packages/shiki-magic-move/src/react/utils.ts
new file mode 100644
index 0000000..2f950eb
--- /dev/null
+++ b/packages/shiki-magic-move/src/react/utils.ts
@@ -0,0 +1,12 @@
+export function normalizeCSSProperties(css?: string | Record
+ {
+ // Render initial tokens for SSR
+ }
+
+ {isMounted()
+ ? undefined
+ : props.tokens?.tokens.map((token) => {
+ if (token.content === '\n') return
+
+ return (
+
+ {token.content}
+
+ )
+ })}
+
+
+ )
+}
diff --git a/packages/shiki-magic-move/src/solid/index.ts b/packages/shiki-magic-move/src/solid/index.ts
new file mode 100644
index 0000000..39def42
--- /dev/null
+++ b/packages/shiki-magic-move/src/solid/index.ts
@@ -0,0 +1,5 @@
+import { ShikiMagicMove } from './ShikiMagicMove'
+import { ShikiMagicMovePrecompiled } from './ShikiMagicMovePrecompiled'
+import { ShikiMagicMoveRenderer } from './ShikiMagicMoveRenderer'
+
+export { ShikiMagicMove, ShikiMagicMovePrecompiled, ShikiMagicMoveRenderer }
diff --git a/packages/shiki-magic-move/src/solid/utils.ts b/packages/shiki-magic-move/src/solid/utils.ts
new file mode 100644
index 0000000..a4224b2
--- /dev/null
+++ b/packages/shiki-magic-move/src/solid/utils.ts
@@ -0,0 +1,15 @@
+import type { JSX } from 'solid-js'
+
+export function normalizeCSSProperties(
+ css?: string | Record
+
+ {#if !isMounted}
+ {#each tokens.tokens as token (token.key)}
+ {#if token.content === '\n'}
+
+ {/if}
+
+ {token.content}
+
+ {/each}
+ {/if}
+
diff --git a/packages/shiki-magic-move/src/svelte/index.ts b/packages/shiki-magic-move/src/svelte/index.ts
new file mode 100644
index 0000000..7a6f159
--- /dev/null
+++ b/packages/shiki-magic-move/src/svelte/index.ts
@@ -0,0 +1,5 @@
+import ShikiMagicMove from './ShikiMagicMove.svelte'
+import ShikiMagicMovePrecompiled from './ShikiMagicMovePrecompiled.svelte'
+import ShikiMagicMoveRenderer from './ShikiMagicMoveRenderer.svelte'
+
+export { ShikiMagicMove, ShikiMagicMovePrecompiled, ShikiMagicMoveRenderer }
diff --git a/packages/shiki-magic-move/src/types.ts b/packages/shiki-magic-move/src/types.ts
new file mode 100644
index 0000000..47440e1
--- /dev/null
+++ b/packages/shiki-magic-move/src/types.ts
@@ -0,0 +1,139 @@
+import type { Diff } from 'diff-match-patch-es'
+import type { ThemedToken, TokensResult } from 'shiki/core'
+
+export type Range = [number, number]
+
+export interface MatchedRanges {
+ from: Range
+ to: Range
+ content: string
+}
+
+export interface KeyedToken extends ThemedToken {
+ key: string
+ htmlClass?: string
+}
+
+export interface KeyedTokensInfo extends Pick{{ greeting }}
+ +`.trim() + const code2 = ` + +{{ greeting }}
+ +`.trim() + const code3 = code1 + + const theme = 'vitesse-light' + const lang = 'vue' + const highlighter = await getHighlighter({ + themes: [theme], + langs: [lang], + }) + + let tokens1 = codeToKeyedTokens(highlighter, code1, { lang, theme }) + let tokens2 = codeToKeyedTokens(highlighter, code2, { lang, theme }) + let tokens3 = codeToKeyedTokens(highlighter, code3, { lang, theme }) + + normalizeKeys(tokens1, '1') + normalizeKeys(tokens2, '2') + normalizeKeys(tokens3, '3') + + // const originKeys1 = tokens1.tokens.map(t => t.key) + const originKeys2 = tokens2.tokens.map(t => t.key) + const originKeys3 = tokens3.tokens.map(t => t.key) + + ;({ from: tokens1, to: tokens2 } = syncTokenKeys(tokens1, tokens2)) + ;({ from: tokens3, to: tokens3 } = syncTokenKeys(tokens2, tokens3)) + + // const syncedKeys1 = tokens1.tokens.map(t => t.key) + const syncedKeys2 = tokens2.tokens.map(t => t.key) + const syncedKeys3 = tokens3.tokens.map(t => t.key) + + // expect(syncedKeys1).toEqual(originKeys1) + expect(syncedKeys2).not.toEqual(originKeys2) + expect(syncedKeys3).not.toEqual(originKeys3) + + expect(printDiff(tokens2, originKeys2)).toMatchInlineSnapshot(` + " + 1-0 < + 1-1 template + 1-2 > + 1-3 ⏎ + 1-4 + 1-5 < + 1-6 p + 1-7 + 1-8 class + 1-9 = + 2-10 " + 2-11 a + 2-12 " + 1-11 >{{ + 1-12 + 1-13 greeting + 1-14 + 1-15 }} + 1-18 ⏎ + 1-19 + 2-24 ⏎ + " + `) + + expect(printDiff(tokens3, originKeys3)).toMatchInlineSnapshot(` + " + 1-0 < + 1-1 template + 1-2 > + 1-3 ⏎ + 1-4 + 1-5 < + 1-6 p + 1-7 + 1-8 class + 1-9 = + 3-10 "" + 1-11 >{{ + 1-12 + 1-13 greeting + 1-14 + 1-15 }} + 1-18 ⏎ + 1-19 + 3-22 ⏎ + " + `) +}) + +it('diff3 enhanceMatching', async () => { + const code1 = ` + + `.trim() + + const code2 = ` + + `.trim() + + const theme = 'vitesse-light' + const lang = 'vue' + const highlighter = await getHighlighter({ + themes: [theme], + langs: [lang], + }) + + const tokens1 = codeToKeyedTokens(highlighter, code1, { lang, theme }) + const tokens2 = codeToKeyedTokens(highlighter, code2, { lang, theme }) + + normalizeKeys(tokens1, '1') + normalizeKeys(tokens2, '2') + + // const originKeys1 = tokens1.tokens.map(t => t.key) + const originKeys2 = tokens2.tokens.map(t => t.key) + + function cloneCreate and share beautiful gifs of your source code diffs.
++ Visit{" "} + + solidjs.com + {" "} + to learn how to build Solid apps. +
++ + Home + + {" - "} + + About Page + +
++ Visit{" "} + + solidjs.com + {" "} + to learn how to build Solid apps. +
++ + Home + + {" - "} + About Page +
+{{ count }} = {{ doubled / 2 }}
+ + +` +const right = ` + + +{{ count }} * 2 = {{ doubled }}
+ + +` + +export default function Home() { + const [selectedTab, setSelectedTab] = createSignal<'snippets' | 'output'>('snippets') + const [toggled, setToggled] = createSignal(false) + const [theme, setTheme] = makePersisted(createSignal('nord'), { name: 'theme' }) + const [language, setLanguage] = makePersisted(createSignal('typescript'), { + name: 'language', + }) + const [startCode, setStartCode] = makePersisted(createSignal(left), { + name: 'startCode', + }) + const [endCode, setEndCode] = makePersisted(createSignal(right), { + name: 'endCode', + }) + const [magicMoveElements, setMagicMoveElements] = createSignalPreview
+