https://github.com/kiliman/rmx-cli
A CLI tool for Remix applications
https://github.com/kiliman/rmx-cli
cli remix
Last synced: 7 months ago
JSON representation
A CLI tool for Remix applications
- Host: GitHub
- URL: https://github.com/kiliman/rmx-cli
- Owner: kiliman
- License: mit
- Created: 2022-02-15T19:46:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-22T12:44:07.000Z (over 1 year ago)
- Last Synced: 2025-03-28T16:11:07.776Z (7 months ago)
- Topics: cli, remix
- Language: TypeScript
- Homepage:
- Size: 268 KB
- Stars: 187
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-remix - A CLI tool for Remix applications
- Awesome-Remix - rmx-cli
- awesome-remix - A CLI tool for Remix applications
- jimsghstars - kiliman/rmx-cli - A CLI tool for Remix applications (TypeScript)
README
# rmx-cli
[](#contributors-)
A CLI tool for Remix applications. Future versions will support adding external
commands.
## 🛠 Installation
```bash
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:
```ts
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 & { icon: IconName; size?: Size }) {
return (
)
}
```
```
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:_
```bash
npx rmx-cli svg-sprite assets/svg app/components/icons
```
```ts
// 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";
// OR import named icon components (using --components flag)
import {
ArchiveBoxIcon,
ArrowDownIcon,
CakeIcon,
href as outline24Icons,
} from "~/components/heroicons/24/outline";
// generate for the sprite file
export const links: LinksFunction = () => [
{ rel: "preload", href: outline24Icons, as: "image" },
{ rel: "stylesheet", href: tailwindCss },
];
// control color and size using className
```
## 🪂 eject-ras
Eject your Remix project from Remix App Server to Express
```bash
npx rmx-cli eject-ras
```
## 📦 get-esm-packages
Scan for ESM package to add to _remix.config.js_ `serverDependenciesToBundle`
```bash
npx rmx-cli get-esm-packages [package-name ...]
```
### Usage
```bash
Example:
npx rmx-cli get-esm-packages @remix-run/node @remix-run/react
```
## 🏷️ version
List all Remix package versions installed in node_modules
```bash
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
```bash
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.
```json
{
"exports": ["packageA", "packageB"],
"overrides": {
"": [
"": {
"": "",
...
},
"": {
"": "",
...
}
],
...
}
}
```
### Example config:
This config replaces the Remix `json`, `redirect`, `useActionData`, etc. with the versions for [`remix-typedjson`](https://github.com/kiliman/remix-typedjson).
```json
{
"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](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!