setIsOpen(false)}\n+ >\n+ \n+ \n+ \n+ );\n+};\n",
+ ],
+};
+
+export const b = {
+ newFile: {
+ fileName: "a/packages/myreact-reactivity/src/reactive/feature.ts",
+ content:
+ 'import { Component, createElement, useState, useCallback, useMemo } from "@my-react/react";\n\nimport { proxyRefs, ReactiveEffect } from "../api";\n\nimport type { UnwrapRef } from "../api";\nimport type { LikeReactNode } from "@my-react/react";\n\ntype LifeCycle = {\n onBeforeMount: Array<() => void>;\n\n onMounted: Array<() => void>;\n\n onBeforeUpdate: Array<() => void>;\n\n onUpdated: Array<() => void>;\n\n onBeforeUnmount: Array<() => void>;\n\n onUnmounted: Array<() => void>;\n\n hasHookInstalled: boolean;\n\n canUpdateComponent: boolean;\n};\n\n/**\n * @internal\n */\nexport let globalInstance: LifeCycle | null = null;\n\nexport function createReactive, S extends Record>(props?: {\n setup: () => S;\n render?: (props: UnwrapRef & P) => LikeReactNode;\n}) {\n const setup = typeof props === "function" ? props : props.setup;\n\n const render = typeof props === "function" ? null : props.render;\n\n class ForBeforeUnmount extends Component<{ ["$$__instance__$$"]: LifeCycle; children: LikeReactNode }> {\n componentWillUnmount(): void {\n this.props.$$__instance__$$.onBeforeUnmount.forEach((f) => f());\n }\n\n render() {\n return this.props.children;\n }\n }\n\n class ForBeforeMount extends Component<{ ["$$__instance__$$"]: LifeCycle; children: LikeReactNode }> {\n componentDidMount(): void {\n this.props.$$__instance__$$.onBeforeMount.forEach((f) => f());\n }\n\n render() {\n return this.props.children;\n }\n }\n\n class RenderWithLifeCycle extends Component<\n {\n ["$$__trigger__$$"]: () => void;\n ["$$__instance__$$"]: LifeCycle;\n ["$$__reactiveState__$$"]: UnwrapRef;\n children?: (props: UnwrapRef & P) => LikeReactNode;\n } & P\n > {\n componentDidMount(): void {\n this.props.$$__instance__$$.onMounted.forEach((f) => f());\n }\n\n componentDidUpdate(): void {\n this.props.$$__instance__$$.onUpdated.forEach((f) => f());\n }\n\n componentWillUnmount(): void {\n this.props.$$__instance__$$.onUnmounted.forEach((f) => f());\n this.reactiveEffect.stop();\n }\n\n shouldComponentUpdate(): boolean {\n this.props.$$__instance__$$.canUpdateComponent = false;\n this.props.$$__instance__$$.onBeforeUpdate.forEach((f) => f());\n this.props.$$__instance__$$.canUpdateComponent = true;\n return true;\n }\n\n reactiveEffect = new ReactiveEffect(() => {\n const { children, $$__trigger__$$, $$__reactiveState__$$, $$__instance__$$, ...last } = this.props;\n const targetRender = (render || children) as (props: UnwrapRef & P) => LikeReactNode;\n const element = targetRender?.({ ...last, ...$$__reactiveState__$$ } as UnwrapRef & P) || null;\n return element;\n }, this.props.$$__trigger__$$);\n\n render() {\n return createElement(ForBeforeMount, { ["$$__instance__$$"]: this.props.$$__instance__$$, children: this.reactiveEffect.run() });\n }\n }\n\n class Render extends Component<\n {\n ["$$__trigger__$$"]: () => void;\n ["$$__reactiveState__$$"]: UnwrapRef;\n children?: (props: UnwrapRef & P) => LikeReactNode;\n } & P\n > {\n componentWillUnmount(): void {\n this.reactiveEffect.stop();\n }\n\n reactiveEffect = new ReactiveEffect(() => {\n const { children, $$__trigger__$$, $$__reactiveState__$$, $$__instance__$$, ...last } = this.props;\n const targetRender = (render || children) as (props: UnwrapRef & P) => LikeReactNode;\n const element = targetRender?.({ ...last, ...$$__reactiveState__$$ } as UnwrapRef & P) || null;\n return element;\n }, this.props.$$__trigger__$$);\n\n render() {\n return this.reactiveEffect.run();\n }\n }\n\n const MyReactReactiveComponent = (props: P & { children?: (props: UnwrapRef & P) => LikeReactNode }) => {\n const [instance] = useState(() => ({\n onBeforeMount: [],\n onBeforeUpdate: [],\n onBeforeUnmount: [],\n onMounted: [],\n onUpdated: [],\n onUnmounted: [],\n hasHookInstalled: false,\n canUpdateComponent: true,\n }));\n\n const state = useMemo(() => {\n globalInstance = instance;\n\n const state = proxyRefs(setup());\n\n globalInstance = null;\n\n return state;\n }, []);\n\n if (__DEV__) {\n for (const key in props) {\n if (key in state) {\n console.warn(`duplicate key ${key} in Component props and reactive state, please fix this usage`);\n }\n }\n if (props["children"] && typeof props["children"] !== "function") {\n throw new Error("the component which return from createReactive() expect a function children");\n }\n }\n\n const [, setState] = useState(() => 0);\n\n const updateCallback = useCallback(() => {\n if (instance.canUpdateComponent) {\n setState((i) => i + 1);\n }\n }, []);\n\n if (instance.hasHookInstalled) {\n return createElement(ForBeforeUnmount, {\n ["$$__instance__$$"]: instance,\n children: createElement(RenderWithLifeCycle, {\n ...props,\n ["$$__trigger__$$"]: updateCallback,\n ["$$__reactiveState__$$"]: state,\n ["$$__instance__$$"]: instance,\n }),\n }) as LikeReactNode;\n } else {\n return createElement(Render, { ...props, ["$$__trigger__$$"]: updateCallback, ["$$__reactiveState__$$"]: state }) as LikeReactNode;\n }\n };\n\n return MyReactReactiveComponent;\n}\n',
+ },
+ hunks: [
+ 'diff --git a/packages/myreact-reactivity/src/reactive/feature.ts b/packages/myreact-reactivity/src/reactive/feature.ts\nindex 5b301628..15aac42f 100644\n--- a/packages/myreact-reactivity/src/reactive/feature.ts\n+++ b/packages/myreact-reactivity/src/reactive/feature.ts\n@@ -74,7 +74,7 @@ export function createReactive, S extends Reco\n \n componentWillUnmount(): void {\n this.props.$$__instance__$$.onUnmounted.forEach((f) => f());\n- this.effect.stop();\n+ this.reactiveEffect.stop();\n }\n \n shouldComponentUpdate(): boolean {\n@@ -84,7 +84,7 @@ export function createReactive
, S extends Reco\n return true;\n }\n \n- effect = new ReactiveEffect(() => {\n+ reactiveEffect = new ReactiveEffect(() => {\n const { children, $$__trigger__$$, $$__reactiveState__$$, $$__instance__$$, ...last } = this.props;\n const targetRender = (render || children) as (props: UnwrapRef & P) => LikeReactNode;\n const element = targetRender?.({ ...last, ...$$__reactiveState__$$ } as UnwrapRef & P) || null;\n@@ -92,7 +92,7 @@ export function createReactive
, S extends Reco\n }, this.props.$$__trigger__$$);\n \n render() {\n- return createElement(ForBeforeMount, { ["$$__instance__$$"]: this.props.$$__instance__$$, children: this.effect.run() });\n+ return createElement(ForBeforeMount, { ["$$__instance__$$"]: this.props.$$__instance__$$, children: this.reactiveEffect.run() });\n }\n }\n \n@@ -104,10 +104,10 @@ export function createReactive
, S extends Reco\n } & P\n > {\n componentWillUnmount(): void {\n- this.effect.stop();\n+ this.reactiveEffect.stop();\n }\n \n- effect = new ReactiveEffect(() => {\n+ reactiveEffect = new ReactiveEffect(() => {\n const { children, $$__trigger__$$, $$__reactiveState__$$, $$__instance__$$, ...last } = this.props;\n const targetRender = (render || children) as (props: UnwrapRef & P) => LikeReactNode;\n const element = targetRender?.({ ...last, ...$$__reactiveState__$$ } as UnwrapRef & P) || null;\n@@ -115,7 +115,7 @@ export function createReactive
, S extends Reco\n }, this.props.$$__trigger__$$);\n \n render() {\n- return this.effect.run();\n+ return this.reactiveEffect.run();\n }\n }\n',
+ ],
+};
+
+export const c = {
+ newFile: {
+ fileName: "a/packages/myreact-dom/src/client/tools/highlight.ts",
+ content:
+ 'import { STATE_TYPE, include } from "@my-react/react-shared";\n\nimport { enableHighlight } from "@my-react-dom-shared";\n\nimport type { MyReactFiberNode } from "@my-react/react-reconciler";\nimport type { ClientDomDispatch } from "@my-react-dom-client/renderDispatch";\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const debounce = (callback: T, time?: number): T => {\n let id = null;\n return ((...args) => {\n clearTimeout(id);\n id = setTimeout(() => {\n callback.call(null, ...args);\n }, time || 40);\n }) as unknown as T;\n};\n\n/**\n * @internal\n */\nexport class HighLight {\n /**\n * @type HighLight\n */\n static instance: HighLight | undefined = undefined;\n\n /**\n *\n * @returns HighLight\n */\n static getHighLightInstance = () => {\n HighLight.instance = HighLight.instance || new HighLight();\n\n return HighLight.instance;\n };\n\n mask: HTMLCanvasElement | null = null;\n\n range = document.createRange();\n\n running = false;\n\n __pendingUpdate__: Set = new Set();\n\n __pendingAppend__: Set = new Set();\n\n __pendingSetRef__: Set = new Set();\n\n __pendingWarn__: Set = new Set();\n\n width = 0;\n\n height = 0;\n\n constructor() {\n this.mask = document.createElement("canvas");\n this.mask.setAttribute("data-highlight", "@my-react");\n this.mask.style.cssText = `\n position: fixed;\n z-index: 99999999;\n left: 0;\n top: 0;\n pointer-events: none;\n `;\n document.documentElement.prepend(this.mask);\n this.setSize();\n window.addEventListener("resize", this.setSize);\n }\n\n setSize = debounce(() => {\n this.width = window.innerWidth || document.documentElement.clientWidth;\n\n this.height = window.innerHeight || document.documentElement.clientHeight;\n\n this.mask.width = this.width;\n\n this.mask.height = this.height;\n });\n\n highLight = (fiber: MyReactFiberNode, type: "update" | "append" | "setRef" | "warn") => {\n if (fiber.nativeNode) {\n switch (type) {\n case "update":\n this.__pendingUpdate__.add(fiber);\n break;\n case "append":\n this.__pendingAppend__.add(fiber);\n break;\n case "setRef":\n this.__pendingSetRef__.add(fiber);\n break;\n case "warn":\n this.__pendingWarn__.add(fiber);\n }\n }\n\n if (!this.running) {\n this.running = true;\n requestAnimationFrame(this.flashPending);\n }\n };\n\n flashPending = () => {\n const context = this.mask.getContext("2d");\n\n const allPendingUpdate = new Set(this.__pendingUpdate__);\n\n this.__pendingUpdate__.clear();\n\n context.strokeStyle = "rgba(200,50,50,0.8)";\n\n allPendingUpdate.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n try {\n const node = fiber.nativeNode as HTMLElement;\n if (node.nodeType === Node.TEXT_NODE) {\n this.range.selectNodeContents(node);\n } else {\n this.range.selectNode(node);\n }\n const rect = this.range.getBoundingClientRect();\n if (\n (rect.width || rect.height) &&\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n ) {\n // do the highlight paint\n const left = rect.left - 0.5;\n const top = rect.top - 0.5;\n const width = rect.width + 1;\n const height = rect.height + 1;\n context.strokeRect(\n left < 0 ? 0 : left,\n top < 0 ? 0 : top,\n width > window.innerWidth ? window.innerWidth : width,\n height > window.innerHeight ? window.innerHeight : height\n );\n }\n } catch {\n void 0;\n }\n });\n\n const allPendingAppend = new Set(this.__pendingAppend__);\n\n this.__pendingAppend__.clear();\n\n allPendingAppend.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n try {\n const node = fiber.nativeNode as HTMLElement;\n if (node.nodeType === Node.TEXT_NODE) {\n this.range.selectNodeContents(node);\n } else {\n this.range.selectNode(node);\n }\n const rect = this.range.getBoundingClientRect();\n if (\n (rect.width || rect.height) &&\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n ) {\n // do the highlight paint\n const left = rect.left - 0.5;\n const top = rect.top - 0.5;\n const width = rect.width + 1;\n const height = rect.height + 1;\n context.strokeRect(\n left < 0 ? 0 : left,\n top < 0 ? 0 : top,\n width > window.innerWidth ? window.innerWidth : width,\n height > window.innerHeight ? window.innerHeight : height\n );\n }\n } catch {\n void 0;\n }\n });\n\n const allPendingSetRef = new Set(this.__pendingSetRef__);\n\n this.__pendingSetRef__.clear();\n\n allPendingSetRef.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n try {\n const node = fiber.nativeNode as HTMLElement;\n if (node.nodeType === Node.TEXT_NODE) {\n this.range.selectNodeContents(node);\n } else {\n this.range.selectNode(node);\n }\n const rect = this.range.getBoundingClientRect();\n if (\n (rect.width || rect.height) &&\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n ) {\n // do the highlight paint\n const left = rect.left - 0.5;\n const top = rect.top - 0.5;\n const width = rect.width + 1;\n const height = rect.height + 1;\n context.strokeRect(\n left < 0 ? 0 : left,\n top < 0 ? 0 : top,\n width > window.innerWidth ? window.innerWidth : width,\n height > window.innerHeight ? window.innerHeight : height\n );\n }\n } catch {\n void 0;\n }\n });\n\n context.strokeStyle = "rgba(230,150,40,0.8)";\n\n const allPendingWarn = new Set(this.__pendingWarn__);\n\n this.__pendingWarn__.clear();\n\n allPendingWarn.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n try {\n const node = fiber.nativeNode as HTMLElement;\n if (node.nodeType === Node.TEXT_NODE) {\n this.range.selectNodeContents(node);\n } else {\n this.range.selectNode(node);\n }\n const rect = this.range.getBoundingClientRect();\n if (\n (rect.width || rect.height) &&\n rect.top >= 0 &&\n rect.left >= 0 &&\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n ) {\n // do the highlight paint\n const left = rect.left - 0.5;\n const top = rect.top - 0.5;\n const width = rect.width + 1;\n const height = rect.height + 1;\n context.strokeRect(\n left < 0 ? 0 : left,\n top < 0 ? 0 : top,\n width > window.innerWidth ? window.innerWidth : width,\n height > window.innerHeight ? window.innerHeight : height\n );\n }\n } catch {\n void 0;\n }\n });\n\n setTimeout(() => {\n context.clearRect(0, 0, this.width, this.height);\n this.running = false;\n if (this.__pendingUpdate__.size || this.__pendingAppend__.size || this.__pendingSetRef__.size) {\n this.running = true;\n this.flashPending();\n }\n }, 100);\n };\n}\n\nexport const highlightUpdateFiber = function (this: ClientDomDispatch, fiber: MyReactFiberNode) {\n if (this.isAppMounted && !this.isHydrateRender && !this.isServerRender && (enableHighlight.current || window.__highlight__)) {\n HighLight.getHighLightInstance().highLight(fiber, "update");\n }\n};\n',
+ },
+ hunks: [
+ "diff --git a/packages/myreact-dom/src/client/tools/highlight.ts b/packages/myreact-dom/src/client/tools/highlight.ts\nindex 13cba7db..002becdc 100644\n--- a/packages/myreact-dom/src/client/tools/highlight.ts\n+++ b/packages/myreact-dom/src/client/tools/highlight.ts\n@@ -112,31 +112,35 @@ export class HighLight {\n \n allPendingUpdate.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n- const node = fiber.nativeNode as HTMLElement;\n- if (node.nodeType === Node.TEXT_NODE) {\n- this.range.selectNodeContents(node);\n- } else {\n- this.range.selectNode(node);\n- }\n- const rect = this.range.getBoundingClientRect();\n- if (\n- (rect.width || rect.height) &&\n- rect.top >= 0 &&\n- rect.left >= 0 &&\n- rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n- ) {\n- // do the highlight paint\n- const left = rect.left - 0.5;\n- const top = rect.top - 0.5;\n- const width = rect.width + 1;\n- const height = rect.height + 1;\n- context.strokeRect(\n- left < 0 ? 0 : left,\n- top < 0 ? 0 : top,\n- width > window.innerWidth ? window.innerWidth : width,\n- height > window.innerHeight ? window.innerHeight : height\n- );\n+ try {\n+ const node = fiber.nativeNode as HTMLElement;\n+ if (node.nodeType === Node.TEXT_NODE) {\n+ this.range.selectNodeContents(node);\n+ } else {\n+ this.range.selectNode(node);\n+ }\n+ const rect = this.range.getBoundingClientRect();\n+ if (\n+ (rect.width || rect.height) &&\n+ rect.top >= 0 &&\n+ rect.left >= 0 &&\n+ rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n+ ) {\n+ // do the highlight paint\n+ const left = rect.left - 0.5;\n+ const top = rect.top - 0.5;\n+ const width = rect.width + 1;\n+ const height = rect.height + 1;\n+ context.strokeRect(\n+ left < 0 ? 0 : left,\n+ top < 0 ? 0 : top,\n+ width > window.innerWidth ? window.innerWidth : width,\n+ height > window.innerHeight ? window.innerHeight : height\n+ );\n+ }\n+ } catch {\n+ void 0;\n }\n });\n \n@@ -146,31 +150,35 @@ export class HighLight {\n \n allPendingAppend.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n- const node = fiber.nativeNode as HTMLElement;\n- if (node.nodeType === Node.TEXT_NODE) {\n- this.range.selectNodeContents(node);\n- } else {\n- this.range.selectNode(node);\n- }\n- const rect = this.range.getBoundingClientRect();\n- if (\n- (rect.width || rect.height) &&\n- rect.top >= 0 &&\n- rect.left >= 0 &&\n- rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n- ) {\n- // do the highlight paint\n- const left = rect.left - 0.5;\n- const top = rect.top - 0.5;\n- const width = rect.width + 1;\n- const height = rect.height + 1;\n- context.strokeRect(\n- left < 0 ? 0 : left,\n- top < 0 ? 0 : top,\n- width > window.innerWidth ? window.innerWidth : width,\n- height > window.innerHeight ? window.innerHeight : height\n- );\n+ try {\n+ const node = fiber.nativeNode as HTMLElement;\n+ if (node.nodeType === Node.TEXT_NODE) {\n+ this.range.selectNodeContents(node);\n+ } else {\n+ this.range.selectNode(node);\n+ }\n+ const rect = this.range.getBoundingClientRect();\n+ if (\n+ (rect.width || rect.height) &&\n+ rect.top >= 0 &&\n+ rect.left >= 0 &&\n+ rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n+ ) {\n+ // do the highlight paint\n+ const left = rect.left - 0.5;\n+ const top = rect.top - 0.5;\n+ const width = rect.width + 1;\n+ const height = rect.height + 1;\n+ context.strokeRect(\n+ left < 0 ? 0 : left,\n+ top < 0 ? 0 : top,\n+ width > window.innerWidth ? window.innerWidth : width,\n+ height > window.innerHeight ? window.innerHeight : height\n+ );\n+ }\n+ } catch {\n+ void 0;\n }\n });\n \n@@ -180,31 +188,35 @@ export class HighLight {\n \n allPendingSetRef.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n- const node = fiber.nativeNode as HTMLElement;\n- if (node.nodeType === Node.TEXT_NODE) {\n- this.range.selectNodeContents(node);\n- } else {\n- this.range.selectNode(node);\n- }\n- const rect = this.range.getBoundingClientRect();\n- if (\n- (rect.width || rect.height) &&\n- rect.top >= 0 &&\n- rect.left >= 0 &&\n- rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n- ) {\n- // do the highlight paint\n- const left = rect.left - 0.5;\n- const top = rect.top - 0.5;\n- const width = rect.width + 1;\n- const height = rect.height + 1;\n- context.strokeRect(\n- left < 0 ? 0 : left,\n- top < 0 ? 0 : top,\n- width > window.innerWidth ? window.innerWidth : width,\n- height > window.innerHeight ? window.innerHeight : height\n- );\n+ try {\n+ const node = fiber.nativeNode as HTMLElement;\n+ if (node.nodeType === Node.TEXT_NODE) {\n+ this.range.selectNodeContents(node);\n+ } else {\n+ this.range.selectNode(node);\n+ }\n+ const rect = this.range.getBoundingClientRect();\n+ if (\n+ (rect.width || rect.height) &&\n+ rect.top >= 0 &&\n+ rect.left >= 0 &&\n+ rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n+ ) {\n+ // do the highlight paint\n+ const left = rect.left - 0.5;\n+ const top = rect.top - 0.5;\n+ const width = rect.width + 1;\n+ const height = rect.height + 1;\n+ context.strokeRect(\n+ left < 0 ? 0 : left,\n+ top < 0 ? 0 : top,\n+ width > window.innerWidth ? window.innerWidth : width,\n+ height > window.innerHeight ? window.innerHeight : height\n+ );\n+ }\n+ } catch {\n+ void 0;\n }\n });\n \n@@ -216,31 +228,35 @@ export class HighLight {\n \n allPendingWarn.forEach((fiber) => {\n if (include(fiber.state, STATE_TYPE.__unmount__)) return;\n- const node = fiber.nativeNode as HTMLElement;\n- if (node.nodeType === Node.TEXT_NODE) {\n- this.range.selectNodeContents(node);\n- } else {\n- this.range.selectNode(node);\n- }\n- const rect = this.range.getBoundingClientRect();\n- if (\n- (rect.width || rect.height) &&\n- rect.top >= 0 &&\n- rect.left >= 0 &&\n- rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n- ) {\n- // do the highlight paint\n- const left = rect.left - 0.5;\n- const top = rect.top - 0.5;\n- const width = rect.width + 1;\n- const height = rect.height + 1;\n- context.strokeRect(\n- left < 0 ? 0 : left,\n- top < 0 ? 0 : top,\n- width > window.innerWidth ? window.innerWidth : width,\n- height > window.innerHeight ? window.innerHeight : height\n- );\n+ try {\n+ const node = fiber.nativeNode as HTMLElement;\n+ if (node.nodeType === Node.TEXT_NODE) {\n+ this.range.selectNodeContents(node);\n+ } else {\n+ this.range.selectNode(node);\n+ }\n+ const rect = this.range.getBoundingClientRect();\n+ if (\n+ (rect.width || rect.height) &&\n+ rect.top >= 0 &&\n+ rect.left >= 0 &&\n+ rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&\n+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)\n+ ) {\n+ // do the highlight paint\n+ const left = rect.left - 0.5;\n+ const top = rect.top - 0.5;\n+ const width = rect.width + 1;\n+ const height = rect.height + 1;\n+ context.strokeRect(\n+ left < 0 ? 0 : left,\n+ top < 0 ? 0 : top,\n+ width > window.innerWidth ? window.innerWidth : width,\n+ height > window.innerHeight ? window.innerHeight : height\n+ );\n+ }\n+ } catch {\n+ void 0;\n }\n });\n",
+ ],
+};
+
+export const d = {
+ oldFile: {
+ fileName: "src/views/test/result/singleResult/singleResultDetail/llm/components/result.vue",
+ content:
+ "\n \n
\n \n
\n
\"\n :params=\"finalParams\"\n :columns=\"columns\"\n >\n \n 分析结果 \n 平均分 \n 总分 \n 结果\n \n \n \n {{ AnalyzeResultInfo[row.analyzeResult]?.label }}\n \n \n {{ row.score }}\n \n \n \n \n
\n \n
\n
\"\n :params=\"finalParams\"\n :columns=\"columns\"\n >\n \n \n 导出数据\n \n \n \n 分析结果 \n 平均分 \n 总分 \n 结果\n \n \n \n {{ AnalyzeResultInfo[row.analyzeResult]?.label }}\n \n \n {{ row.score }}\n \n \n \n
extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
+ setNewLineExtend(() => extendData()?.newFile?.[newLine()?.lineNumber || ""]);
+ setCurrentIsShow(() => !!checkIsShow());
};
init();
@@ -56,7 +56,7 @@ export const DiffSplitExtendLine = (props: { index: number; diffFile: DiffFile;
return (
- {renderExtend() ? (
+ {renderExtend() && oldLineExtend() ? (
{renderExtend()?.({
@@ -75,7 +75,7 @@ export const DiffSplitExtendLine = (props: { index: number; diffFile: DiffFile;
colspan={2}
/>
)}
- {renderExtend() ? (
+ {renderExtend() && newLineExtend() ? (
{
setCurrentHunk(props.diffFile.getSplitHunkLine(props.index));
setEnableExpand(props.diffFile.getExpandEnabled());
- setCouldExpand(enableExpand() && currentHunk()?.splitInfo);
- setCurrentIsShow(checkCurrentIsShow());
- setCurrentShowExpandAll(checkCurrentShowExpandAll());
+ setCouldExpand(() => enableExpand() && currentHunk()?.splitInfo);
+ setCurrentIsShow(checkCurrentIsShow);
+ setCurrentShowExpandAll(checkCurrentShowExpandAll);
};
init();
@@ -213,7 +213,7 @@ const DiffSplitHunkLineGitLab = (props: { index: number; side: SplitSide; diffFi
const currentIsPureHunk = createMemo(() => {
const hunk = currentHunk();
- return hunk && !hunk.splitInfo;
+ return hunk && props.diffFile._getIsPureDiffRender() && !hunk.splitInfo;
});
const currentIsLastLine = createMemo(() => {
@@ -229,9 +229,9 @@ const DiffSplitHunkLineGitLab = (props: { index: number; side: SplitSide; diffFi
const init = () => {
setCurrentHunk(props.diffFile.getSplitHunkLine(props.index));
setEnableExpand(props.diffFile.getExpandEnabled());
- setCouldExpand(enableExpand() && currentHunk()?.splitInfo);
- setCurrentIsShow(checkCurrentIsShow());
- setCurrentShowExpandAll(checkCurrentShowExpandAll());
+ setCouldExpand(() => enableExpand() && currentHunk()?.splitInfo);
+ setCurrentIsShow(checkCurrentIsShow);
+ setCurrentShowExpandAll(checkCurrentShowExpandAll);
};
init();
diff --git a/packages/solid/src/components/DiffSplitHunkLineWrap.tsx b/packages/solid/src/components/DiffSplitHunkLineWrap.tsx
index e966f01..53b7fe0 100644
--- a/packages/solid/src/components/DiffSplitHunkLineWrap.tsx
+++ b/packages/solid/src/components/DiffSplitHunkLineWrap.tsx
@@ -41,7 +41,7 @@ const DiffSplitHunkLineGitHub = (props: { index: number; diffFile: DiffFile; lin
const currentIsPureHunk = createMemo(() => {
const hunk = currentHunk();
- return hunk && !hunk.splitInfo;
+ return hunk && props.diffFile._getIsPureDiffRender() && !hunk.splitInfo;
});
const currentIsLastLine = createMemo(() => {
@@ -53,9 +53,9 @@ const DiffSplitHunkLineGitHub = (props: { index: number; diffFile: DiffFile; lin
const init = () => {
setCurrentHunk(props.diffFile.getSplitHunkLine(props.index));
setEnableExpand(props.diffFile.getExpandEnabled());
- setCouldExpand(enableExpand() && currentHunk()?.splitInfo);
- setCurrentShowExpandAll(checkCurrentShowExpandAll());
- setCurrentIsShow(checkCurrentIsShow());
+ setCouldExpand(() => enableExpand() && currentHunk()?.splitInfo);
+ setCurrentIsShow(checkCurrentIsShow);
+ setCurrentShowExpandAll(checkCurrentShowExpandAll);
};
init();
diff --git a/packages/solid/src/components/DiffSplitViewNormal.tsx b/packages/solid/src/components/DiffSplitViewNormal.tsx
index d3b577d..665cd4e 100644
--- a/packages/solid/src/components/DiffSplitViewNormal.tsx
+++ b/packages/solid/src/components/DiffSplitViewNormal.tsx
@@ -110,9 +110,9 @@ const DiffSplitViewTable = (props: { side: SplitSide; diffFile: DiffFile; onSele
export const DiffSplitViewNormal = (props: { diffFile: DiffFile }) => {
const isMounted = useIsMounted();
- let ref1 = null as HTMLDivElement | null;
+ const [ref1, setRef1] = createSignal(null);
- let ref2 = null as HTMLDivElement | null;
+ const [ref2, setRef2] = createSignal(null);
const [side, setSide] = createSignal(undefined);
@@ -128,8 +128,8 @@ export const DiffSplitViewNormal = (props: { diffFile: DiffFile }) => {
const initSyncScroll = () => {
if (!isMounted()) return;
- const left = ref1;
- const right = ref2;
+ const left = ref1();
+ const right = ref2();
if (!left || !right) return;
const clean = syncScroll(left, right);
onCleanup(clean);
@@ -156,7 +156,7 @@ export const DiffSplitViewNormal = (props: { diffFile: DiffFile }) => {
| |
+ }
+ >
+
+ }
+ >
+
+
+
+
+ );
+};
diff --git a/packages/solid/src/components/DiffUnifiedExtendLine.tsx b/packages/solid/src/components/DiffUnifiedExtendLine.tsx
new file mode 100644
index 0000000..100c331
--- /dev/null
+++ b/packages/solid/src/components/DiffUnifiedExtendLine.tsx
@@ -0,0 +1,72 @@
+import { SplitSide, type DiffFile } from "@git-diff-view/core";
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
+
+import { useDomWidth, useExtendData, useRenderExtend } from "../hooks";
+
+
+export const DiffUnifiedExtendLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+ const extendData = useExtendData();
+
+ const renderExtend = useRenderExtend();
+
+ const [unifiedItem, setUnifiedItem] = createSignal(props.diffFile.getUnifiedLine(props.index));
+
+ const [oldExtend, setOldExtend] = createSignal(extendData()?.oldFile?.[unifiedItem()?.oldLineNumber || 0]);
+
+ const [newExtend, setNewExtend] = createSignal(extendData()?.newFile?.[unifiedItem()?.newLineNumber || 0]);
+
+ const [currentIsHidden, setCurrentIsHidden] = createSignal(unifiedItem()?.isHidden);
+
+ createEffect(() => {
+ const init = () => {
+ setUnifiedItem(props.diffFile.getUnifiedLine(props.index));
+ setOldExtend(() => extendData()?.oldFile?.[unifiedItem()?.oldLineNumber || 0]);
+ setNewExtend(() => extendData()?.newFile?.[unifiedItem()?.newLineNumber || 0]);
+ setCurrentIsHidden(() => unifiedItem()?.isHidden);
+ };
+
+ init();
+
+ const unsubscribe = props.diffFile.subscribe(init);
+
+ onCleanup(unsubscribe);
+ });
+
+ const currentIsShow = createMemo(() => Boolean((oldExtend() || newExtend()) && !currentIsHidden() && renderExtend()));
+
+ const lineSelector = createMemo(() => `.unified-diff-table-wrapper`);
+
+ const width = useDomWidth({
+ selector: lineSelector,
+ enable: currentIsShow,
+ });
+
+ return (
+
+
+ |
+
+ {width() > 0 &&
+ oldExtend() &&
+ renderExtend()?.({
+ diffFile: props.diffFile,
+ side: SplitSide.old,
+ lineNumber: unifiedItem()?.oldLineNumber || 0,
+ data: oldExtend()?.data,
+ onUpdate: props.diffFile.notifyAll,
+ })}
+ {width() > 0 &&
+ newExtend() &&
+ renderExtend()?.({
+ diffFile: props.diffFile,
+ side: SplitSide.new,
+ lineNumber: unifiedItem().newLineNumber || 0,
+ data: newExtend()?.data,
+ onUpdate: props.diffFile.notifyAll,
+ })}
+
+ |
+
+
+ );
+};
diff --git a/packages/solid/src/components/DiffUnifiedHunkLine.tsx b/packages/solid/src/components/DiffUnifiedHunkLine.tsx
new file mode 100644
index 0000000..7f9198c
--- /dev/null
+++ b/packages/solid/src/components/DiffUnifiedHunkLine.tsx
@@ -0,0 +1,149 @@
+import { composeLen, type DiffFile } from "@git-diff-view/core";
+import {
+ hunkLineNumberBGName,
+ plainLineNumberColorName,
+ diffAsideWidthName,
+ hunkContentBGName,
+ hunkContentColorName,
+} from "@git-diff-view/utils";
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
+
+import { useEnableWrap } from "../hooks";
+
+import { ExpandUp, ExpandDown, ExpandAll } from "./DiffExpand";
+
+export const DiffUnifiedHunkLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+ const [currentHunk, setCurrentHunk] = createSignal(props.diffFile.getUnifiedHunkLine(props.index));
+
+ const [enableExpand, setEnableExpand] = createSignal(props.diffFile.getExpandEnabled());
+
+ const couldExpand = createMemo(() => enableExpand() && !!currentHunk()?.unifiedInfo);
+
+ const enableWrap = useEnableWrap();
+
+ const checkCurrentIsShow = () => {
+ const hunk = currentHunk();
+ return hunk && hunk.unifiedInfo && hunk.unifiedInfo.startHiddenIndex < hunk.unifiedInfo.endHiddenIndex;
+ };
+
+ const [currentIsShow, setCurrentIsShow] = createSignal(checkCurrentIsShow());
+
+ const checkCurrentIsEnableAll = () => {
+ const hunk = currentHunk();
+ return hunk && hunk.unifiedInfo && hunk.unifiedInfo.endHiddenIndex - hunk.unifiedInfo.startHiddenIndex < composeLen;
+ };
+
+ const [currentIsEnableAll, setCurrentIsEnableAll] = createSignal(checkCurrentIsEnableAll());
+
+ const [currentIsFirstLine, setCurrentIsFirstLine] = createSignal(currentHunk()?.isFirst);
+
+ const [currentIsLastLine, setCurrentIsLastLine] = createSignal(currentHunk()?.isLast);
+
+ const [currentIsPureHunk, setCurrentIsPureHunk] = createSignal(
+ currentHunk() && props.diffFile._getIsPureDiffRender() && !currentHunk()?.unifiedInfo
+ );
+
+ createEffect(() => {
+ const init = () => {
+ setCurrentHunk(props.diffFile.getUnifiedHunkLine(props.index));
+
+ setEnableExpand(props.diffFile.getExpandEnabled());
+
+ setCurrentIsShow(checkCurrentIsShow);
+ setCurrentIsEnableAll(checkCurrentIsEnableAll);
+ setCurrentIsFirstLine(() => currentHunk()?.isFirst);
+ setCurrentIsLastLine(() => currentHunk()?.isLast);
+ setCurrentIsPureHunk(() => currentHunk() && props.diffFile._getIsPureDiffRender() && !currentHunk()?.unifiedInfo);
+ };
+
+ init();
+
+ const unsubscribe = props.diffFile.subscribe(init);
+
+ onCleanup(unsubscribe);
+ });
+
+ return (
+
+
+ |
+ {couldExpand() ? (
+ currentIsFirstLine() ? (
+
+ ) : currentIsLastLine() ? (
+
+ ) : currentIsEnableAll() ? (
+
+ ) : (
+ <>
+
+
+
+ )
+ ) : (
+
+ )}
+ |
+
+
+ {currentHunk()?.unifiedInfo?.plainText || currentHunk()?.text}
+
+ |
+
+
+ );
+};
diff --git a/packages/solid/src/components/DiffUnifiedView.tsx b/packages/solid/src/components/DiffUnifiedView.tsx
index 8427599..313ad08 100644
--- a/packages/solid/src/components/DiffUnifiedView.tsx
+++ b/packages/solid/src/components/DiffUnifiedView.tsx
@@ -1,10 +1,117 @@
-import type { DiffFile } from "@git-diff-view/core";
+import { getUnifiedContentLine, type DiffFile } from "@git-diff-view/core";
+import { diffAsideWidthName, diffFontSizeName, removeAllSelection } from "@git-diff-view/utils";
+import { createEffect, createMemo, createSignal, onCleanup, For } from "solid-js";
+
+import { useEnableWrap, useFontSize, useTextWidth } from "../hooks";
+
+import { DiffUnifiedContentLine } from "./DiffUnifiedContentLine";
+import { DiffUnifiedExtendLine } from "./DiffUnifiedExtendLine";
+import { DiffUnifiedHunkLine } from "./DiffUnifiedHunkLine";
+import { DiffUnifiedWidgetLine } from "./DiffUnifiedWidgetLine";
export const DiffUnifiedView = (props: { diffFile: DiffFile }) => {
+ const [lines, setLines] = createSignal(getUnifiedContentLine(props.diffFile));
+
+ const [maxText, setMaxText] = createSignal(props.diffFile.unifiedLineLength.toString());
+
+ createEffect(() => {
+ const init = () => {
+ setLines(getUnifiedContentLine(props.diffFile));
+ setMaxText(props.diffFile.unifiedLineLength.toString());
+ };
+
+ init();
+
+ const unsubscribe = props.diffFile.subscribe(init);
+
+ onCleanup(unsubscribe);
+ });
+
+ const fontSize = useFontSize();
+
+ const enableWrap = useEnableWrap();
+
+ const [state, setState] = createSignal ();
+
+ const onMouseDown = (e: MouseEvent) => {
+ let ele = e.target as HTMLElement | null;
+
+ if (ele && ele?.nodeName === "BUTTON") {
+ removeAllSelection();
+ return;
+ }
+
+ while (ele && ele instanceof HTMLElement) {
+ const state = ele.getAttribute("data-state");
+ if (state) {
+ if (state === "extend" || state === "hunk" || state === "widget") {
+ setState(false);
+ removeAllSelection();
+ } else {
+ setState(true);
+ removeAllSelection();
+ }
+ return;
+ }
+ ele = ele.parentElement;
+ }
+ };
+
+ const font = createMemo(() => ({ fontSize: fontSize() + "px", fontFamily: "Menlo, Consolas, monospace" }));
+
+ const width = useTextWidth({ text: maxText, font });
+
+ const computedWidth = createMemo(() => Math.max(40, width() + 10));
+
+ const getId = () => `diff-root${props.diffFile.getId()}`;
+
return (
-
- Unified Diff View
- This is a placeholder for the unified diff view component.
+
);
};
diff --git a/packages/solid/src/components/DiffUnifiedWidgetLine.tsx b/packages/solid/src/components/DiffUnifiedWidgetLine.tsx
new file mode 100644
index 0000000..13125d5
--- /dev/null
+++ b/packages/solid/src/components/DiffUnifiedWidgetLine.tsx
@@ -0,0 +1,81 @@
+import { SplitSide, type DiffFile } from "@git-diff-view/core";
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js";
+
+import { useDomWidth, useRenderWidget } from "../hooks";
+
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+export const DiffUnifiedWidgetLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+ const renderWidget = useRenderWidget();
+
+ const [widget, setWidget] = useDiffWidgetContext() || [];
+
+ const [unifiedItem, setUnifiedItem] = createSignal(props.diffFile.getUnifiedLine(props.index));
+
+ const oldWidget = createMemo(
+ () =>
+ unifiedItem()?.oldLineNumber &&
+ widget?.()?.side === SplitSide.old &&
+ widget?.()?.lineNumber === unifiedItem()?.oldLineNumber
+ );
+
+ const newWidget = createMemo(
+ () =>
+ unifiedItem()?.newLineNumber &&
+ widget?.()?.side === SplitSide.new &&
+ widget?.()?.lineNumber === unifiedItem()?.newLineNumber
+ );
+
+ const [currentIsHidden, setCurrentIsHidden] = createSignal(unifiedItem()?.isHidden);
+
+ createEffect(() => {
+ const init = () => {
+ setUnifiedItem(props.diffFile.getUnifiedLine(props.index));
+ setCurrentIsHidden(() => unifiedItem()?.isHidden);
+ };
+
+ init();
+
+ const unsubscribe = props.diffFile.subscribe(init);
+
+ onCleanup(unsubscribe);
+ });
+
+ const currenIsShow = createMemo(() => !!(oldWidget() || newWidget()) && !currentIsHidden() && !!renderWidget());
+
+ const onCloseWidget = () => setWidget?.({});
+
+ const lineSelector = createMemo(() => `.unified-diff-table-wrapper`);
+
+ const width = useDomWidth({
+ selector: lineSelector,
+ enable: currenIsShow,
+ });
+
+ return (
+
+
+ |
+
+ {width() > 0 &&
+ oldWidget() &&
+ renderWidget()?.({
+ diffFile: props.diffFile,
+ side: SplitSide.old,
+ lineNumber: unifiedItem()?.oldLineNumber || 0,
+ onClose: onCloseWidget,
+ })}
+ {width() > 0 &&
+ newWidget() &&
+ renderWidget()?.({
+ diffFile: props.diffFile,
+ side: SplitSide.new,
+ lineNumber: unifiedItem().newLineNumber || 0,
+ onClose: onCloseWidget,
+ })}
+
+ |
+
+
+ );
+};
diff --git a/packages/solid/src/components/DiffView.tsx b/packages/solid/src/components/DiffView.tsx
index 565c117..ce682e5 100644
--- a/packages/solid/src/components/DiffView.tsx
+++ b/packages/solid/src/components/DiffView.tsx
@@ -99,7 +99,7 @@ const InternalDiffView = (props: DiffViewProps) => {
return diffFile;
};
- let wrapperRef: HTMLDivElement | undefined;
+ const [wrapperRef, setWrapRef] = createSignal(null);
const diffFile = createMemo(getInstance);
@@ -196,11 +196,17 @@ const InternalDiffView = (props: DiffViewProps) => {
const initAttribute = () => {
const mounted = isMounted();
const currentDiffFile = diffFile();
- if (mounted && currentDiffFile && wrapperRef) {
- const cb = currentDiffFile.subscribe(() => {
- wrapperRef?.setAttribute("data-theme", currentDiffFile._getTheme() || "light");
- wrapperRef?.setAttribute("data-highlighter", currentDiffFile._getHighlighterName());
- });
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ props.diffViewTheme;
+ if (mounted && currentDiffFile && wrapperRef()) {
+ const init = () => {
+ wrapperRef()?.setAttribute("data-theme", currentDiffFile._getTheme() || "light");
+ wrapperRef()?.setAttribute("data-highlighter", currentDiffFile._getHighlighterName());
+ };
+
+ init();
+
+ const cb = currentDiffFile.subscribe(init);
onCleanup(() => cb());
}
@@ -224,7 +230,7 @@ const InternalDiffView = (props: DiffViewProps) => {
data-theme={diffFile()?._getTheme?.() || "light"}
data-version={__VERSION__}
data-highlighter={diffFile()?._getHighlighterName?.()}
- ref={wrapperRef}
+ ref={setWrapRef}
>
diff --git a/packages/solid/src/components/tools.ts b/packages/solid/src/components/tools.ts
index f395387..9cf2db6 100644
--- a/packages/solid/src/components/tools.ts
+++ b/packages/solid/src/components/tools.ts
@@ -38,26 +38,7 @@ export const createDiffConfigStore = (props: DiffViewProps, diffFileId: str
});
const setExtendData = (_extendData: DiffViewProps["extendData"]) => {
- const existOldKeys = Object.keys(extendData.value.oldFile || {});
- const inComingOldKeys = Object.keys(_extendData?.oldFile || {});
- for (const key of existOldKeys) {
- if (!inComingOldKeys.includes(key)) {
- delete extendData.value.oldFile[key];
- }
- }
- for (const key of inComingOldKeys) {
- extendData.value.oldFile[key] = _extendData?.oldFile?.[key];
- }
- const existNewKeys = Object.keys(extendData.value.newFile || {});
- const inComingNewKeys = Object.keys(_extendData?.newFile || {});
- for (const key of existNewKeys) {
- if (!inComingNewKeys.includes(key)) {
- delete extendData.value.newFile[key];
- }
- }
- for (const key of inComingNewKeys) {
- extendData.value.newFile[key] = _extendData?.newFile?.[key];
- }
+ extendData.value = { oldFile: { ..._extendData?.oldFile }, newFile: { ..._extendData?.newFile } };
};
const renderWidgetLine = ref(props.renderWidgetLine);
diff --git a/packages/solid/src/hooks/generate.ts b/packages/solid/src/hooks/generate.ts
index f347c7d..5ddb13e 100644
--- a/packages/solid/src/hooks/generate.ts
+++ b/packages/solid/src/hooks/generate.ts
@@ -15,9 +15,7 @@ export const generateHook = (key:
const [state, setState] = createSignal(reactiveHook?.getReadonlyState()[key] as K);
createEffect(() => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-expect-error
- const init = () => setState(reactiveHook?.getReadonlyState()[key] as K);
+ const init = () => setState(() => reactiveHook?.getReadonlyState()[key] as K);
init();
diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx
index d03a5ad..311080e 100644
--- a/packages/vue/src/components/DiffView.tsx
+++ b/packages/vue/src/components/DiffView.tsx
@@ -155,9 +155,7 @@ export const DiffView = defineComponent<
const initSyntax = () => {
if (!isMounted.value || !enableHighlight.value || !diffFile.value) return;
- // hack to track the value change
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions
- theme.value;
+
const instance = diffFile.value;
instance.initSyntax({
registerHighlighter: props.registerHighlighter,
@@ -168,10 +166,18 @@ export const DiffView = defineComponent<
const initAttribute = (onClean: (cb: () => void) => void) => {
if (!isMounted.value || !diffFile.value || !wrapperRef.value) return;
const instance = diffFile.value;
- const cb = instance.subscribe(() => {
+ // hack to track the value change
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ theme.value;
+ const init = () => {
wrapperRef.value?.setAttribute("data-theme", instance._getTheme() || "light");
wrapperRef.value?.setAttribute("data-highlighter", instance._getHighlighterName());
- });
+ }
+
+ init();
+
+ const cb = instance.subscribe(init);
+
onClean(() => cb());
};
diff --git a/ui/solid-example/src/App.tsx b/ui/solid-example/src/App.tsx
index 12da1b5..b4d8e82 100644
--- a/ui/solid-example/src/App.tsx
+++ b/ui/solid-example/src/App.tsx
@@ -1,4 +1,4 @@
-import { DiffFile, DiffView } from "@git-diff-view/solid";
+import { DiffFile, DiffModeEnum, DiffView, SplitSide } from "@git-diff-view/solid";
import { createEffect, createSignal, Show } from "solid-js";
import * as data from "./data";
@@ -14,6 +14,29 @@ function App() {
const [diffFile, setDiffFile] = createSignal();
+ const [highlight, setHighlight] = createSignal(true);
+
+ const [wrap, setWrap] = createSignal(true);
+
+ const [dark, setDark] = createSignal(false);
+
+ const [mode, setMode] = createSignal(DiffModeEnum.Split);
+
+ const toggleHighlight = () => setHighlight((l) => !l);
+
+ const toggleTheme = () => setDark((d) => !d);
+
+ const toggleWrap = () => setWrap((w) => !w);
+
+ const toggleMode = () =>
+ setMode((l) => {
+ return l === DiffModeEnum.Split ? DiffModeEnum.Unified : DiffModeEnum.Split;
+ });
+
+ const [v, setV] = createSignal("");
+
+ const [extend, setExtend] = createSignal({});
+
worker.addEventListener("message", (e: MessageEvent) => {
const { data, bundle } = e.data;
const instance = DiffFile.createInstance(data || {}, bundle);
@@ -29,6 +52,14 @@ function App() {
});
});
+ createEffect(() => {
+ const currentDiffFile = diffFile();
+
+ if (currentDiffFile) {
+ setExtend({ oldFile: {}, newFile: {} });
+ }
+ });
+
return (
<>
@@ -45,9 +76,84 @@ function App() {
+
+
+
+
+
+
+
+
-
+ setV("")}
+ renderWidgetLine={({ side, lineNumber, onClose }) => (
+
+ |