
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
@git-diff-view/solid
Advanced tools
DiffView
component directly.import { DiffView, DiffModeEnum } from "@git-diff-view/solid";
import "@git-diff-view/solid/styles/diff-view.css";
<DiffView<string>
// use data
data={{
oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
hunks: string[];
}}
extendData={{oldFile: {10: {data: 'foo'}}, newFile: {20: {data: 'bar'}}}}
renderExtendLine={({ data }) => JSXElement}
diffViewFontSize={number}
diffViewHighlight={boolean}
diffViewMode={DiffModeEnum.Split | DiffModeEnum.Unified}
diffViewWrap={boolean}
diffViewTheme={'light' | 'dark'}
diffViewAddWidget
onAddWidgetClick={({ side, lineNumber }) => void}
renderWidgetLine={({ onClose, side, lineNumber }) => JSXElement}
/>
DiffView
component with @git-diff-view/core
or @git-diff-view/file
// with @git-diff-view/file
import { DiffFile, generateDiffFile } from "@git-diff-view/file";
const file = generateDiffFile(
data?.oldFile?.fileName || "",
data?.oldFile?.content || "",
data?.newFile?.fileName || "",
data?.newFile?.content || "",
data?.oldFile?.fileLang || "",
data?.newFile?.fileLang || ""
);
file.initTheme('light' / 'dark');
file.init();
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();
// with @git-diff-view/core
import { DiffFile } from "@git-diff-view/core";
const file = new DiffFile(
data?.oldFile?.fileName || "",
data?.oldFile?.content || "",
data?.newFile?.fileName || "",
data?.newFile?.content || "",
data?.hunks || [],
data?.oldFile?.fileLang || "",
data?.newFile?.fileLang || ""
);
file.initTheme('light' / 'dark');
file.init();
file.buildSplitDiffLines();
file.buildUnifiedDiffLines();
// use current data to render
<DiffView diffFile={file} {...props} />;
// or use the bundle data to render, eg: postMessage/httpRequest
const bundle = file.getBundle();
const diffFile = DiffFile.createInstance(data || {}, bundle);
<DiffView diffFile={diffFile} {...props} />;
Props | Description |
---|---|
data | The diff data need to show, type: { oldFile: {fileName?: string, content?: string}, newFile: {fileName?: string, content?: string}, hunks: string[] } , you can only pass hunks data, and the component will generate the oldFile and newFile data automatically |
diffFile | the target data to render |
renderWidgetLine | return a valid solid element to show the widget, this element will render when you click the addWidget button in the diff view |
renderExtendLine | return a valid solid element to show the extend data |
extendData | a list to store the extend data to show in the Diff View , type: {oldFile: {lineNumber: {data: any}}, newFile: {lineNumber: {data: any}}} |
diffViewFontSize | the fontSize for the DiffView component, type: number |
diffViewHighlight | enable syntax highlight, type: boolean |
diffViewMode | the mode for the DiffView component, type: DiffModeEnum.Split / DiffModeEnum.Unified |
diffViewWrap | enable code line auto wrap, type: boolean |
diffViewTheme | the theme for the DiffView component, type: light / dark |
diffViewAddWidget | enable addWidget button, type: boolean |
onAddWidgetClick | when the addWidget button clicked, type: ({ side: "old" / "new", lineNumber: number }) => void |
FAQs
@git-diff-view/solid
The npm package @git-diff-view/solid receives a total of 5 weekly downloads. As such, @git-diff-view/solid popularity was classified as not popular.
We found that @git-diff-view/solid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.