npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rmx-cli

v0.4.16

Published

A CLI for remix-run

Downloads

24,907

Readme

rmx-cli

All Contributors

A CLI tool for Remix applications. Future versions will support adding external commands.

🛠 Installation

npm install -D rmx-cli

Commands

🎁 svg-sprite ✨ NEW

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"

Usage

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-ras

Eject your Remix project from Remix App Server to Express

npx rmx-cli eject-ras

📦 get-esm-packages

Scan for ESM package to add to remix.config.js serverDependenciesToBundle

npx rmx-cli get-esm-packages [package-name ...]

Usage

  Example:
    npx rmx-cli get-esm-packages @remix-run/node @remix-run/react

🏷️ version

List all Remix package versions installed in node_modules

npx rmx-cli version

🚀 gen-remix

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?

  1. Go back to importing from one file instead of adapter specific packages. If you ever switch adapters, just re-generate the remix.ts file.
  2. Adds support for overrides. Now you can override a standard Remix export with your own function. Like replacing json, useLoaderData, etc. with the remix-typedjson functions.
  3. Add "postinstall": "rmx gen-remix" to package.json to ensure the file is regenerated when upgrading Remix packages.

Usage

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

Config

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>",
        ...
      }
    ],
    ...
  }
}

Example config:

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"
      }
    }
  }
}

😍 Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!