Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
A utility library for visualizing code.
npm install code-fns
Most code highlighters in JavaScript output HTML and CSS, but if your intended
target isn't a web page, the tags and styles would then need to be translated
to the desired form. code-fns
outputs raw text and hex colors, making it easy
to render the code in whichever form you choose. Specifically, code-fns
was
built for use in the Motion Canvas project, for visualizing code in videos and
animations. code-fns
may also compute the transformation between different
code blocks, so that you may animate between them.
Supports all browsers and all maintained node versions, though you will need to use your own transpiler, as the package files use modern EcmaScript features. This ensures that you may configure your build as you wish.
To parse code into highlighted tokens, use language.lang-name
to select your
language, and parse
to highlight it.
import { ready, language, parse } from './tags';
await ready();
const tsx = language.tsx;
await parse(tsx`() => true`);
This will generate the following output.
[
{ code: '() ', color: '#c9d1d9' },
{ code: '=>', color: '#ff7b72' },
{ code: ' ', color: '#c9d1d9' },
{ code: 'true', color: '#79c0ff' },
];
You may then use templating to generate your code dynamically.
import { ready, language, parse } from './tags';
await ready();
const tsx = language.tsx;
const generate = (result: string) => tsx`(${result});`;
await parse(generate('false'));
[
{ code: '(', color: '#c9d1d9' },
{ code: 'false', color: '#79c0ff' },
{ code: ');', color: '#c9d1d9' },
];
To compute the difference between two generated chunks of code, use diff
.
import { ready, language, diff } from './tags';
await ready();
const tsx = language.tsx;
const generate = (result: string) => tsx`(${result});`;
await diff(generate('true'), generate('false'));
[
{ code: '(', color: '#c9d1d9', morph: 'retain' },
{ code: 'true', color: '#79c0ff', morph: 'delete' },
{ code: 'false', color: '#79c0ff', morph: 'create' },
{ code: ');', color: '#c9d1d9', morph: 'retain' },
];
This can be helpful to create transitional animations between code, as in Motion Canvas.
FAQs
A library for visualizing code.
We found that code-fns demonstrated a not healthy version release cadence and project activity because the last version was released 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
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.