The Unforge Command
The unforge
command is a key feature of Flareforge that provides an “escape hatch” from the framework’s conventions. It allows you to eject a framework-managed file such as a UI block or a translation namespace into your project’s source code.
Once unforged, you own that file completely and can modify it without limitation.
Unforging UI Blocks
Section titled “Unforging UI Blocks”When your application requires a UI customization that goes beyond what the standard Flareforge blocks offer, you can unforge a block to take direct control of its code.
Listing Available Blocks
Section titled “Listing Available Blocks”To see a list of all UI blocks that can be unforged, run the --list
(or -l
) flag.
npx flareforge unforge block --list
yarn flareforge unforge block --list
pnpm flareforge unforge block --list
This will display an output similar to the following:
╭──────Available Blocks (24)────────╮ │ │ │ ▸ assets/list │ │ ▸ assets/upload │ │ ▸ buttons/button-request-change │ │ ▸ buttons/button-retry │ │ ▸ buttons/delete-task │ │ ▸ card-header-refresh │ │ ▸ credit-counter │ │ ▸ invoices/list │ │ ▸ login-form │ │ ▸ marketing/cta │ │ ▸ marketing/faq │ │ ▸ marketing/footer │ │ ... and more │ │ │ ╰───────────────────────────────────╯
Command Usage
Section titled “Command Usage”To unforge a specific block, use its path from the list.
npx flareforge unforge block marketing/hero
yarn flareforge unforge block marketing/hero
pnpm flareforge unforge block marketing/hero
This command performs the following action:
- It copies the source code of the
marketing/hero
block from the flareforge UI library into a new file atapp/blocks/marketing/hero.tsx
in your project. - The Flareforge code generator will automatically detect this new file and update all imports to point to your local version instead of the default framework version.
You can now edit app/blocks/marketing/hero.tsx
directly.
Overwriting
Section titled “Overwriting”If you have already unforged a block and want to reset it to the framework’s default version, you can use the --force
flag.
npx flareforge unforge block marketing/hero --force
yarn flareforge unforge block marketing/hero --force
pnpm flareforge unforge block marketing/hero --force
Unforging Locales
Section titled “Unforging Locales”To customize text and translations, you can unforge i18n (internationalization) namespaces.
This ejects the default English JSON translation file into a editable TypeScript file within your locales/ directory.
Listing Available Namespaces
Section titled “Listing Available Namespaces”To see a list of all available i18n namespaces, run the —list (or -l) flag.
npx flareforge unforge locale --list
yarn flareforge unforge locale --list
pnpm flareforge unforge locale --list
This will display the list of namespaces you can customize:
╭─Available i18n Namespaces (7)───╮ │ │ │ ▸ site │ │ ▸ pricing │ │ ▸ marketing │ │ ▸ login │ │ ▸ dashboard │ │ ▸ plans │ │ ▸ task_fields │ │ │ ╰─────────────────────────────────╯
Command Usage
Section titled “Command Usage”To unforge a namespace for a specific language, provide the locale code (e.g., fr, es) and the namespace name.
npx flareforge unforge locale fr dashboard
yarn flareforge unforge locale fr dashboard
pnpm flareforge unforge locale fr dashboard
This command creates a new file at locales/fr/dashboard.ts
. The file will contain the default English text, typed to match the original, ready for you to translate into French.
If you omit the namespace, the command will unforge all available namespaces for the specified locale.
npx flareforge unforge locale en
yarn flareforge unforge locale en
pnpm flareforge unforge locale en