Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
A CLI tool for Remix applications. Future versions will support adding external commands.
npm install -D rmx-cli
Generate SVG sprites recursively from SOURCE_FOLDER
. It generates the sprite file,
as well as a React component to create the icon by specifying the fully-typed icon name.
It also exports the href
of the sprite file to use in the Remix links
export.
The OUTPUT_PATH
can be a folder or a filename. If it is a filename, that will be used
as the base name if there are multiple source folders. For example:
components/icons/icon.tsx will generate an icons.tsx and icons.svg file for every
source folder.
If you want to generate a React component for each icon, then add the --components
argument. Then you can import the named icon directly.
NOTE: The React component name will be the filename in TitleCase
You can specify a custom template file that will be used as the base for the generated
React component. The typed IconNames
and exported components will be be appended to this
template file. An array of icon names is also exported: export const iconNames = ["..."] as const
Here's a sample template file:
import { type SVGProps } from 'react'
import { cn } from '~/utils/misc'
import href from './sprite.svg'
export { href }
const sizeClassName = {
font: 'w-font h-font',
xs: 'w-3 h-3',
sm: 'w-4 h-4',
md: 'w-5 h-5',
lg: 'w-6 h-6',
xl: 'w-7 h-7',
} as const
type Size = keyof typeof sizeClassName
export default function Icon({
icon,
size = 'font',
className,
...props
}: SVGProps<SVGSVGElement> & { icon: IconName; size?: Size }) {
return (
<svg
{...props}
className={cn(sizeClassName[size], 'inline self-center', className)}
>
<use href={`${href}#${icon}`} />
</svg>
)
}
npx rmx-cli svg-sprite SOURCE_FOLDER OUTPUT_PATH [--components]
[--template=TEMPLATE_FILE]
[--components-template=TEMPLATE_FILE]
[--fill=COLOR] [--stroke=COLOR]
SOURCE_FOLDER: folder containing .svg files
OUTPUT_PATH: output path for sprite file and components
* If OUTPUT_PATH ends with .tsx, then use this as the base filename
(default: icon.tsx)
--sprite=FILENAME: base filename of sprite file (default: icon.svg)
--types=FILENAME : base filename of IconType export file
if present, will not generate component file
--components : generate named components for each icon
--template=TEMPLATE_FILE: use custom template file
--fill=COLOR : specify fill color or "keep" to keep original colors
default is "currentColor"
--stroke=COLOR : specify stroke color or "keep" to keep original colors
default is "currentColor"
Example:
npx rmx-cli svg-sprite assets/svg app/components/icons
// import default Icon component and specify the icon by name
// import the href to the sprite file to use in `links` export
import {
default as RadixIcon,
href as radixIcons,
} from "~/components/radixicons";
<RadixIcon icon="bookmark" className="text-red-500 h-6 w-6" />
<RadixIcon icon="envelope-open" className="text-green-500 h-6 w-6" />
// OR import named icon components (using --components flag)
import {
ArchiveBoxIcon,
ArrowDownIcon,
CakeIcon,
href as outline24Icons,
} from "~/components/heroicons/24/outline";
// generate <link rel="preload"> for the sprite file
export const links: LinksFunction = () => [
{ rel: "preload", href: outline24Icons, as: "image" },
{ rel: "stylesheet", href: tailwindCss },
];
// control color and size using className
<ArchiveBoxIcon className="text-red-500 h-6 w-6" />
<ArrowDownIcon className="text-green-500 h-6 w-6" />
<CakeIcon className="text-blue-500 h-6 w-6" />
Eject your Remix project from Remix App Server to Express
npx rmx-cli eject-ras
Scan for ESM package to add to remix.config.js serverDependenciesToBundle
npx rmx-cli get-esm-packages [package-name ...]
Example:
npx rmx-cli get-esm-packages @remix-run/node @remix-run/react
List all Remix package versions installed in node_modules
npx rmx-cli version
THis script will generate a remix.ts file which re-exports all exports
from specified packages. This essentially works like the magic remix
package from early Remix.
Why is this useful?
json
, useLoaderData
, etc. with the remix-typedjson
functions."postinstall": "rmx gen-remix"
to package.json to ensure the file is regenerated when upgrading Remix packages.Usage:
$ npx rmx gen-remix [options]
Options:
--config PATH Config path (default: ./gen-remix.config.json)
--packages PACKAGES List of packages to export
--output PATH Output path (default: ./app/remix.ts)
Example:
rmx gen-remix --packages @remix-run/node @remix-run/react
You can also include an optional config (defaults to gen-remix.config.json) where you can specify overrides.
{
"exports": ["packageA", "packageB"],
"overrides": {
"<source-package>": [
"<original-package>": {
"<original-export>": "<new-source-export>",
...
},
"<original-package>": {
"<original-export>": "<new-source-export>",
...
}
],
...
}
}
This config replaces the Remix json
, redirect
, useActionData
, etc. with the versions for remix-typedjson
.
{
"exports": ["@remix-run/node", "@remix-run/react", "remix-typedjson"],
"overrides": {
"remix-typedjson": {
"@remix-run/node": {
"json": "typedjson",
"redirect": "redirect"
},
"@remix-run/react": {
"useActionData": "useTypedActionData",
"useFetcher": "useTypedFetcher",
"useLoaderData": "useTypedLoaderData"
}
}
}
}
Thanks goes to these wonderful people (emoji key):
Kiliman 💻 📖 | Roy Revelt 📖 | Kent C. Dodds 📖 | Kiran Dash 📖 | Andrew Cohen 💻 | Andrew Coppola 💻 | Markus Wolf 💻 |
Justin Hall 💻 🐛 | Florian Weinaug 💻 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
A CLI for remix-run
The npm package rmx-cli receives a total of 4,205 weekly downloads. As such, rmx-cli popularity was classified as popular.
We found that rmx-cli 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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.