⌂

After using Nx for nearly all my projects in recent years, I wanted to try a different monorepo tool for a change. So, for @gxxc/solid-forms, I decided to experiment with moonrepo.

Initializing My Moon Project

To start, I created a new directory and initialized an empty npm repository (I’m using pnpm, but you can use any package manager you prefer):

mkdir solid-forms
cd solid-forms
pnpm init

I then installed Moonrepo:

pnpm add -D @moonrepo/cli

Next, I configured the Moon workspace by setting up .moon/workspace.yml to match my project structure:

projects:
  - 'apps/*'
  - 'packages/*'

Given I already had the initial draft of @gxxc/solid-forms in an NX monorepo, I copied over all of the packages into /packages, making sure to delete any NX specific files (such as /project.json) that would no longer be needed.

Setting up the Toolchain

The toolchain configuration is essential in Moonrepo. In the .moon/toolchain.yml file, I specified the versions for Node.js, the package manager, and TypeScript settings:

node:
  version: '20.10.0'
  packageManager: 'pnpm'
  pnpm:
    version: '9.7.0'
typescript:
  createMissingConfig: true
  projectConfigFileName: 'tsconfig.json'
  rootConfigFileName: 'tsconfig.json'

Basic Tooling

A robust development environment benefits from standardized tooling for linting, formatting, and type checking. Below are the key tools I added to the project.

Eslint

I installed ESLint along with the eslint-config-moon configuration package:

pnpm add -D eslint eslint-config-moon

I then added an ESLint configuration file (.eslintrc.js) in the project root to extend the default Moon config, making any project-specific adjustments as needed:

module.exports = {
  extends: 'eslint-config-moon',
};

Typescript

For TypeScript, I created a tsconfig.json file in each package to ensure consistent settings across the monorepo. Here’s a minimal example, leveraging Moon’s TypeScript presets:

{
  "extends": "tsconfig-moon/tsconfig.solid.json",
  "compilerOptions": {
    "moduleResolution": "bundler"
  }
}

Prettier

To maintain consistent code formatting, I added Prettier:

pnpm add -D prettier

I created a .prettierrc file in the root directory with preferred settings:

{
  "semi": false,
  "singleQuote": true
}

Solid Start

To showcase @gxxc/solid-forms, I decided to create a quick demo app using SolidStart, the meta-framework for SolidJS. This enabled me to get a fully functional app up and running quickly, complete with routing and server-side rendering options.

To set up SolidStart, I added it to the project:

pnpm add solid-start

After setting up a basic project structure, I integrated my form components from @gxxc/solid-forms into a demo app. SolidStart’s simplicity and native compatibility with SolidJS allowed me to focus on showcasing the form library’s functionality without excessive configuration.