{"id":27913607,"url":"https://github.com/jsrepojs/example-typescript","last_synced_at":"2025-05-06T14:16:34.626Z","repository":{"id":291629761,"uuid":"978206944","full_name":"jsrepojs/example-typescript","owner":"jsrepojs","description":"A demo to show you how you can deploy your first typescript registry to jsrepo.com.","archived":false,"fork":false,"pushed_at":"2025-05-05T17:51:19.000Z","size":55,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T14:16:22.585Z","etag":null,"topics":["example","jsrepo","registry","typescript"],"latest_commit_sha":null,"homepage":"https://www.jsrepo.com/@example/typescript","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsrepojs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-05T16:23:14.000Z","updated_at":"2025-05-06T12:22:19.000Z","dependencies_parsed_at":"2025-05-05T18:57:52.309Z","dependency_job_id":null,"html_url":"https://github.com/jsrepojs/example-typescript","commit_stats":null,"previous_names":["jsrepojs/example-typescript"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsrepojs%2Fexample-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsrepojs%2Fexample-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsrepojs%2Fexample-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsrepojs%2Fexample-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsrepojs","download_url":"https://codeload.github.com/jsrepojs/example-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252699663,"owners_count":21790683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example","jsrepo","registry","typescript"],"created_at":"2025-05-06T14:16:30.529Z","updated_at":"2025-05-06T14:16:34.616Z","avatar_url":"https://github.com/jsrepojs.png","language":"TypeScript","readme":"# @example/typescript\n\nA demo to show you how you can deploy your first TypeScript registry to jsrepo.com.\n\nWithin is an example of an over-engineered calculator to help demonstrate how jsrepo works.\n\n### Relevant Links\n\n-   [jsrepo](https://github.com/jsrepojs/jsrepo)\n-   [jsrepo.com](https://jsrepo.com)\n\n### Prerequisites\n\n-   Have an account on [jsrepo.com](https://jsrepo.com)\n\n## Tutorial\n\nIn this tutorial we will cover how to build and publish a simple TypeScript registry to [jsrepo.com](https://jsrepo.com).\n\n### 1. Initialize a TypeScript project\n\nStart by initializing a TypeScript project (I will use pnpm for this)\n\n```sh\npnpm init\n\npnpm install typescript -D\n\npnpm tsc --init\n```\n\n### 2. Create your components\n\nNow lets create some components that we want to share.\n\nLets create a `./src` directory and within it we can create a `/utils` folder.\n\nYour project should now look something like this:\n\n```plaintext\nroot\n├── /src\n│   └── /utils\n├── package.json\n└── tsconfig.json\n```\n\nNow let's add our components.\n\n`calculator.ts`:\n\n```ts\nimport { Logger } from \"./logger\";\n\nexport class Calculator {\n\tadd(a: number, b: number): ArithmeticResult {\n\t\treturn new ArithmeticResult(a + b);\n\t}\n\n\tsubtract(a: number, b: number): ArithmeticResult {\n\t\treturn new ArithmeticResult(a - b);\n\t}\n}\n\nexport class ArithmeticResult {\n\tprivate val: number;\n\tprivate logger = new Logger();\n\n\tconstructor(result: number) {\n\t\tthis.val = result;\n\t}\n\n\tprint() {\n\t\tthis.logger.success(`The answer is ${this.val}!`);\n\t}\n\n\tget value() {\n\t\treturn this.val;\n\t}\n}\n```\n\n`logger.ts`:\n\n```ts\nimport color from \"chalk\";\n\nexport class Logger {\n\tprivate logger: typeof console.log;\n\n\tconstructor(logger = console.log) {\n\t\tthis.logger = logger;\n\t}\n\n\tsuccess(msg: string) {\n\t\tthis.logger(`${color.cyan(\"[success]\")} ${msg}`);\n\t}\n\n\tfailure(msg: string) {\n\t\tthis.logger(`${color.cyan(\"[failure]\")} ${msg}`);\n\t}\n}\n```\n\n## 3. Prepare the registry for publish\n\nNow that we have our components let's configure `jsrepo` to publish our registry to [jsrepo.com](https://jsrepo.com).\n\nStart by running the init command:\n\n```sh\npnpm dlx jsrepo init --registry\n```\n\nWhen asked _\"Where are your blocks located?\"_ answer `./src` because that is where our categories are.\n\nAnswer yes to _\"Configure to publish to jsrepo.com?\"_ and then input the name of your registry.\n\n\u003e The name of the registry should be in the format of `@\u003cscope\u003e/\u003cname\u003e`. If you don't already have a scope you can claim one [here](https://jsrepo.com/account/scopes/new).\n\n```plaintext\n┌   jsrepo  v2.0.0\n│\n◇  Where are your blocks located?\n│  ./src\n│\n◇  Add another blocks directory?\n│  No\n│\n◇  Configure to publish to jsrepo.com?\n│  Yes\n│\n◇  What's the name of your registry?\n│  @example/typescript\n│\n◇  Added script to package.json\n│\n◇  Wrote config to `jsrepo-build-config.json`\n│\n├ Next Steps ─────────────────────────────────────────────────────┐\n│                                                                 │\n│   1. Add categories to `./src`.                                 │\n│   2. Run `pnpm run release:registry` to publish the registry.   │\n│                                                                 │\n├─────────────────────────────────────────────────────────────────┘\n│\n└  All done!\n```\n\nNow your registry should be ready to publish!\n\n## 4. Publish your registry\n\nNow that your registry has been configured to publish to [jsrepo.com](https://jsrepo.com) let's authenticate to the jsrepo CLI.\n\n```sh\njsrepo auth\n\n# or\n\njsrepo auth --token \u003c...\u003e\n```\n\nOnce you are authenticated let's do a dry run to make sure we got everything right:\n\n```sh\njsrepo publish --dry-run\n```\n\nIf all went well you should see:\n\n```plaintext\n◆  [jsrepo.com] Completed dry run!\n```\n\nSee it? Great! Now let's do it for real!\n\n```sh\njsrepo publish\n```\n\nAnd there you go you published your first registry to [jsrepo.com](https://jsrepo.com).\n\nNow you can access your components through the `jsrepo` CLI.\n\n```sh\njsrepo init @example/typescript\n\njsrepo add # list components\n\njsrepo add utils/calculator # add individual\n```\n\nand from the [jsrepo.com](https://jsrepo.com) page for your registry located at `https://jsrepo.com/@\u003cscope\u003e/\u003cname\u003e`.\n\n## 5. Advanced usage\n\n### Un-listing blocks\n\nNow let's do a few things to improve our registry.\n\nFirst of all when we run the `jsrepo add` command right now to list our components we see `calculator` and `logger`. Since `logger` is just an internal helper for `calculator` why don't we prevent it from coming up on this list.\n\nWe can do this with the `doNotListBlocks` key in our `jsrepo-build-config.json` file:\n\n```jsonc\n{\n\t// -- snip --\n\t\"doNotListBlocks\": [\"logger\"]\n\t// -- snip --\n}\n```\n\nNow when we list our blocks only `calculator` will appear.\n\n\u003e Alternatively if we had more internal utils we could use `listBlocks` and only include `calculator` to prevent others from showing up here.\n\n### Metadata\n\n[jsrepo.com](https://jsrepo.com) uses metadata you provide in your `jsrepo-build-config.json` to display on your registries homepage.\n\n```jsonc\n{\n\t// -- snip --\n\t\"meta\": {\n\t\t\"authors\": [\"Aidan Bleser\"],\n\t\t\"bugs\": \"https://github.com/jsrepojs/example-typescript\",\n\t\t\"description\": \"A demo to show you can you can deploy your first typescript registry to jsrepo.com\",\n\t\t\"homepage\": \"https://github.com/jsrepojs/example-typescript\",\n\t\t\"repository\": \"https://github.com/jsrepojs/example-typescript\",\n\t\t\"tags\": [\"registry\", \"typescript\", \"example\", \"jsrepo\"]\n\t},\n\t// -- snip --\n}\n```\n\n### Changesets\n\nAnother thing you may want to setup if you are publishing a registry to [jsrepo.com](https://jsrepo.com) is [changesets](https://github.com/changesets/changesets).\n\nChangesets are an awesome way to manage the versioning of your registry let's set them up here.\n\n```sh\npnpm install @changesets/cli -D\n\npnpm changeset init\n```\n\nNow that you have changesets initialized let's make a small modification to the `.changeset/config.json` file:\n\n```diff\n{\n  // -- snip --\n+ \"privatePackages\": {\n+   \"tag\": true,\n+   \"version\": true\n+ }\n}\n```\n\nLet's also modify our `package.json` so that our release get's tagged when we publish a new version:\n\n```diff\n{\n\t// -- snip --\n\t\"scripts\": {\n+\t\t\"release:registry\": \"jsrepo publish \u0026\u0026 changeset tag\"\n\t}\n\t// -- snip --\n}\n```\n\nAnd finally let's modify our `jsrepo-build-config.json` file to use the version from our `package.json`:\n\n\u003e You'll want to make sure that the version in your `package.json` matches the version in your `jsrepo-build-config.json` before continuing.\n\n```diff\n{\n\t// -- snip --\n+\t\"version\": \"package\",\n\t// -- snip --\n}\n```\n\nFinally let's create a workflow so that we can publish a new version of our registry whenever there are changesets.\n\n\u003e If you are publishing from a workflow make sure to create a token [here](https://jsrepo.com/account/access-tokens/new) and add it with the name `JSREPO_TOKEN` under `Settings / Secrets and variables / Actions`\n\n`.github/workflows/publish.yml`\n```yaml\nname: Publish\n\non:\n    push:\n        branches:\n            - main\n\nconcurrency: ${{ github.workflow }}-${{ github.ref }}\n\njobs:\n    release:\n        name: Build \u0026 Publish Release\n        runs-on: ubuntu-latest\n\n        steps:\n            - uses: actions/checkout@v4\n            - uses: pnpm/action-setup@v4\n            - uses: actions/setup-node@v4\n              with:\n                  node-version: \"20\"\n                  cache: pnpm\n\n            - name: Install dependencies\n              run: pnpm install\n\n            - name: Create Release Pull Request or Publish\n              id: changesets\n              uses: changesets/action@v1\n              with:\n                  commit: \"chore(release): version package\"\n                  title: \"chore(release): version package\"\n                  publish: pnpm release:registry\n              env:\n                  JSREPO_TOKEN: ${{ secrets.JSREPO_TOKEN }} # !! DON'T FORGET THIS !!\n                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n                  NODE_ENV: production\n```\n\nNow lets create a changeset:\n```sh\npnpm changeset\n```\n\nNow once we commit our changeset to main changesets will automatically open a PR and version our package for us to create a release.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsrepojs%2Fexample-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsrepojs%2Fexample-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsrepojs%2Fexample-typescript/lists"}