GitHub

Registry Setup

Create your own registry to share your code.

To create a registry start by creating a new github repository.

jsrepo looks at the directories in your project to determine which blocks to add the the jsrepo-manifest.json file. Because of this you need to follow a specific file structure.

root
├── package.json
├── ...
└── 
    ├── 
    │   ├── .(ts|js|tsx|jsx|svelte)
    │   └── 
    │       ├── 
    │       └── 
    └──

You will need to create a folder that will have the block categories (`blocks` above).

Inside this folder you add your categories ex: (utils, components, etc.).

Inside your categories folders you add the code for your blocks. You can either add the block code as a single file directly inside the category or you can create a folder that contains the files for the block.

When adding blocks users will access your blocks by specifying <category>/<name>.

When you are done your file structure might look something like this:

root
├── package.json
├── ...
└── blocks
    └── utils
        ├─── print.ts
        └─── math
            ├─── add.ts
            └─── subtract.ts

Once you have setup all you files run you'll want to setup a build script to build your blocks into a jsrepo-manifest.json.

The easiest way to do this is to use the CLI:

npx jsrepo init --registry
┌   jsrepo  v1.4.2 
│
◇  Where are your blocks located?
│  ./blocks
│
◇  Add jsrepo as a dev dependency?
│  Yes
│
◇  Added `build` to scripts in package.json
│
◇  Install dependencies?
│  Yes
│
◇  Installed jsrepo.
│
├  Next Steps ───────────────────────────────────────┐
│                                                    │
│  1. Add blocks to `./blocks`.                      │
│  2. Run `npm run build` to build the registry.     │
│                                                    │
├────────────────────────────────────────────────────┘
│
└  All done!

This sets up a build script for you based on your answers to the prompts.

However you can also just run it manually like so:

npx jsrepo build --dirs <folder>

After running build the output jsrepo-manifest.json should look something like this.

[
  {
    "name": "utils", // category name
    "blocks": [ // blocks in the category
	  {
		"name": "print", // name of the block
        "directory": "src/utils", // directory containing the files
        "category": "utils",
        "tests": false, // whether or not the block has tests
        "subdirectory": false, // is the block in a subdirectory of it's category
        "files": [
            "print.ts"
        ],
        "localDependencies": [], // any dependencies to other blocks
        "dependencies": [], // any dependencies 
        "devDependencies": []  // any dependencies 
      },
      {
        "name": "print",
        "directory": "src/utils",
        "category": "utils",
        "tests": false,
        "subdirectory": true,
        "files": [
            "add.ts",
            "subtract.ts"
        ],
        "localDependencies": [
            "utils/print"
        ], 
        "dependencies": [],
        "devDependencies": []
      }
	]
  },
]

Commit the output jsrepo-manifest.json to a public repository and you should now be able to access your blocks by running:

npx jsrepo add --repo github/<owner>/<repo>/<category>/<name>

Dependencies

Your blocks can depend on other blocks under the same directory of your project and they will also be added when users add that block.

blocks/utils/math/add.ts

import { print } from "../print"; // import the print block

const add = (a: number, b: number): number => {
  print(`result is: ${a + b}`)
}

Your blocks can also depend on npm packages and they will be installed when users add your block.

import { print } from "../print"; // import the print block
import color from "chalk"; // import the chalk package

const add = (a: number, b: number): number => {
  print(`result is: ${color.cyan(`${a + b}`)}`)
}

If you now add utils/math you will get the following output:

npx jsrepo add utils/math
┌   jsrepo  v1.6.0 
│
◇  Retrieved blocks from github//
│
◇  Added github///utils/math
│
◇  Added github///utils/print
│
◇  Would you like to install dependencies?
│  Yes
│
◇  Installed chalk
│
├  Next Steps ────────────────────────────┐
│                                         │
│  Import the blocks from `src/blocks`    │
│                                         │
├─────────────────────────────────────────┘
│
└  All done!

Excluding Dependencies

By default in *.svelte and *.vue files importing from 'svelte' or 'vue' will not result in the respective frameworks being added as a dependency.

This is because it's pretty easy to assume anyone adding either of those file types to their project will already have Svelte or Vue installed.

However if you are using a *.jsx based framework we don't assume anything for you. There are a lot of different library's that use *.jsx so we'd be making an ass of ourselves.

Instead when running the build command you can provide the --exclude-deps flag:

npx jsrepo build --exclude-deps react next

By providing that flag it tells jsrepo to ignore those dependencies and skip adding them to the manifest file.

Examples