Star Atlas Configs

Usage

How to set up a standard Star Atlas TypeScript repo.

Top Level

package.json

{
  "name": "<repo_name>",
  "private": true,
  "packageManager": "[email protected]",
  "scripts": {
    "dev": "pnpm build && pnpm -r --parallel dev",
    "build": "pnpm -r build",
    "lint": "pnpm -r --parallel lint",
    "lint:fix": "pnpm -r --parallel lint:fix"
  },
  "devDependencies": {
    "@staratlas/configs": "^0.4.0",
    "@types/node": "^24.2.1",
    "eslint": "^9.33.0",
    "prettier-plugin-organize-imports": "^4.2.0",
    "typescript": "^5.9.2",
    "vite": "^7.1.2"
  }
}

• Replace <repo_name> with the name of your repo.
• Versions should be regularly updated with pnpm upgrade.
• pnpm version can be updated using pnpm self-update.
• @staratlas/configs: Standard configuration files.
• @types/node: Type definitions for Node.js. Needed for eslint configurations.
• prettier-plugin-organize-imports: needed because prettier plugins cannot be only peer dependencies.
• typescript: Typescript compiler.
• vite: Vite dev server.`

pnpm-workspace.yaml

packages:
  - packages/*

onlyBuiltDependencies:
  - esbuild

• All packages will be in the packages directory.
• esbuild is an approved build script. More may come with other dependencies, use pnpm approve-builds when prompted.

Library Package (packages/<package_folder>)

A package that has library code for other packages to use. Should be referenced by "<package_name>": "workspace:^"

packages/<package_folder>/package.json

{
    "name": "<package_name>",
    "version": "<package_version>",
    "type": "module",
    "scripts": {
        "dev": "vite build --watch",
        "build": "vite build",
        "lint": "eslint",
        "lint:fix": "eslint --fix"
    }
}

• Replace <package_name> with the name of your package.
• Replace <package_version> with the version of your package.
• vite build --watch: Vite dev server.
• vite build: Vite build.
• eslint: Eslint.
• eslint --fix: Eslint fix.

packages/<package_folder>/vite.config.ts

import {
  cleanupConfig,
  combineConfigs,
  libConfig,
} from '@staratlas/configs/vite';
import { UserConfig } from 'vite';

const config: UserConfig = combineConfigs(
  libConfig('src/index.ts'),
  cleanupConfig(),
);

export default config;

• libConfig: Takes the entrypoint for the library as an argument, our standard entrypoint is src/index.ts.
• cleanupConfig: Removes unused code from the build and comments.

packages/<package_folder>/tsconfig.json

{
    "extends": ["@staratlas/configs/base.json"],
    "exclude": [
        "node_modules",
        "dist"
    ],
    "include": [
        "src",
        "vite.config.ts",
        "eslint.config.ts"
    ]
}

• We extend the base config. Can be overwritten by adding compilerOptions to the tsconfig.json.

packages/<package_folder>/prettier.config.mjs

import { base } from '@staratlas/configs/prettier';

export default base;

• The only js configuration.
• We extend the base config.

packages/<package_folder>/eslint.config.ts

import { base, ConfigArray } from '@staratlas/configs/eslint';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const config: ConfigArray = [
  ...base(__dirname, './tsconfig.json', ['prettier.config.mjs']),
] satisfies ConfigArray;

export default config;

• base: Takes arguments of the root directory, the tsconfig path, and a list of non-ts files that we still want to lint.

Adding SolidJS

To add SolidJS, we add a few more configurations.

packages/<package_folder>/vite.config.ts

import {
  cleanupConfig,
  combineConfigs,
  libConfig,
  solidConfig,
} from '@staratlas/configs/vite';
import { UserConfig } from 'vite';

const config: UserConfig = combineConfigs(
  libConfig('src/index.tsx'),
  cleanupConfig(),
  solidConfig(),
);

export default config;

• src/index.tsx: The entrypoint for the library. Now tsx for solid support.
• solidConfig: Adds SolidJS support to the Vite config.

packages/<package_folder>/tsconfig.json

{
    "extends": ["@staratlas/configs/base.json", "@staratlas/configs/solid.json"],
    "exclude": [
        "node_modules",
        "dist"
    ],
    "include": [
        "src",
        "vite.config.ts",
        "eslint.config.ts"
    ]
}

• We add the solid config.

packages/<package_folder>/eslint.config.ts

import { base, ConfigArray, solid } from '@staratlas/configs/eslint';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const config: ConfigArray = [
  ...base(__dirname, './tsconfig.json', ['prettier.config.mjs']),
  solid,
] satisfies ConfigArray;

export default config;

• We add the solid config.

Website instead of Library

To create a website instead of a library, we just don't include the libConfig and cleanupConfig then add in the polyfillConfig. Solid is optional but included here for completeness.

We also need to add an index.html pointing to our entrypoint. Example Solid app below.

packages/<package_folder>/vite.config.ts

import {
  combineConfigs,
  polyfillConfig,
  solidConfig,
} from '@staratlas/configs/vite';
import { UserConfig } from 'vite';

const config: UserConfig = combineConfigs(polyfillConfig(), solidConfig());

export default config;

• polyfillConfig: Adds polyfills for older browsers and for Solana client libraries.

packages/<package_folder>/index.html

<!doctype html>
<html lang="en">
  <head>
    <title><website_title></title>
  </head>
  <body>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

packages/<package_folder>/src/index.tsx

import { render } from 'solid-js/web';

const root = document.createElement('div');
document.body.appendChild(root);

const App = () => {
  return <div>Hello World</div>;
};

render(() => <App />, root);

Building this library

Just run pnpm build to build the distribution files. Distribution files are included in the repo, so git dependencies are supported.