example-typescript

A demo to show you how you can deploy your first TypeScript registry to jsrepo.com.

Within is an example of an over-engineered calculator to help demonstrate how jsrepo works.

Relevant Links

Prerequisites

Have an account on jsrepo.com

Tutorial

In this tutorial we will cover how to build and publish a simple TypeScript registry to jsrepo.com.

1. Initialize a TypeScript project

Start by initializing a TypeScript project (I will use pnpm for this)

pnpm init
 
pnpm install typescript -D
 
pnpm tsc --init

2. Create your components

Now lets create some components that we want to share.

Lets create a ./src directory and within it we can create a /utils folder.

Your project should now look something like this:

root
├── /src
│   └── /utils
├── package.json
└── tsconfig.json

Now let's add our components.

calculator.ts:

import { Logger } from "./logger";
 
export class Calculator {
	add(a: number, b: number): ArithmeticResult {
		return new ArithmeticResult(a + b);
	}
 
	subtract(a: number, b: number): ArithmeticResult {
		return new ArithmeticResult(a - b);
	}
}
 
export class ArithmeticResult {
	private val: number;
	private logger = new Logger();
 
	constructor(result: number) {
		this.val = result;
	}
 
	print() {
		this.logger.success(`The answer is ${this.val}!`);
	}
 
	get value() {
		return this.val;
	}
}

logger.ts:

import color from "chalk";
 
export class Logger {
	private logger: typeof console.log;
 
	constructor(logger = console.log) {
		this.logger = logger;
	}
 
	success(msg: string) {
		this.logger(`${color.cyan("[success]")} ${msg}`);
	}
 
	failure(msg: string) {
		this.logger(`${color.cyan("[failure]")} ${msg}`);
	}
}

3. Prepare the registry for publish

Now that we have our components let's configure jsrepo to publish our registry to jsrepo.com.

Start by running the init command:

pnpm dlx jsrepo init --registry

When asked "Where are your blocks located?" answer ./src because that is where our categories are.

Answer yes to "Configure to publish to jsrepo.com?" and then input the name of your registry.

The name of the registry should be in the format of @<scope>/<name>. If you don't already have a scope you can claim one here.

┌   jsrepo  v2.0.0
│
◇  Where are your blocks located?
│  ./src
│
◇  Add another blocks directory?
│  No
│
◇  Configure to publish to jsrepo.com?
│  Yes
│
◇  What's the name of your registry?
│  @example/typescript
│
◇  Added script to package.json
│
◇  Wrote config to `jsrepo-build-config.json`
│
├ Next Steps ─────────────────────────────────────────────────────┐
│                                                                 │
│   1. Add categories to `./src`.                                 │
│   2. Run `pnpm run release:registry` to publish the registry.   │
│                                                                 │
├─────────────────────────────────────────────────────────────────┘
│
└  All done!

Now your registry should be ready to publish!

4. Publish your registry

Now that your registry has been configured to publish to jsrepo.com let's authenticate to the jsrepo CLI.

jsrepo auth
 
# or
 
jsrepo auth --token <...>

Once you are authenticated let's do a dry run to make sure we got everything right:

jsrepo publish --dry-run

If all went well you should see:

◆  [jsrepo.com] Completed dry run!

See it? Great! Now let's do it for real!

jsrepo publish