jsrepo

The documentation application is built with Next.js and Fumadocs. Key files and routes include:

• lib/source.ts: Contains the content source adapter code. The loader() function provides the interface to access your content.
• lib/layout.shared.tsx: Contains shared layout options.
• app/(home): Route group for the landing page and general pages.
• app/docs: The main documentation layout and pages.
• app/api/search/route.ts: The Route Handler responsible for search functionality.

Providers are the mechanism jsrepo uses to resolve registry identifiers into usable URLs. When you run a command with a registry identifier, the corresponding provider resolves that identifier to find the registry.json file. This allows you to host your code registries on various platforms like GitHub, GitLab, or even your own website.

For example, running jsrepo init github/ieedan/std uses the github provider to resolve the path to a registry.json file via the GitHub API.

In jsrepo, languages are used to determine the dependencies of registry items during the build command and to manage how dependencies are added and installed. While jsrepo can distribute any file type, only specific languages support automatic dependency resolution.

Supported languages include:

• JavaScript: *.js, *.ts, *.jsx, *.tsx, *.mjs, *.mts files.
• Svelte: *.svelte files.
• Vue: *.vue files.
• CSS: *.css, *.scss, *.sass files.
• HTML: *.html files.

In jsrepo v2, items were grouped into categories (e.g., jsrepo add <category>/<item>). In jsrepo v3, categories have been replaced by the type property on registry items. The type determines the destination path in the user's project. You now add items directly by name: jsrepo add <item>.

import { defineConfig } from "jsrepo";

export default defineConfig({
	registry: {
		items: [
			{
				name: "button",
				type: "component", // replaces category
				files: [
					{
					path: "src/components/button.tsx",
					},
				],
			},
		],
	},
});

Relationship to npm

jsrepo is not a replacement for npm. While npm is for packages, jsrepo is optimized for distributing code snippets or components (like the 'leftPad' example) that might be too granular for a standard npm package but need to be reusable and maintainable.

shadcn Compatibility

jsrepo is fully compatible with shadcn. You can add and update items from shadcn to your project with zero configuration required.

Outputs allow you to customize how your registry is distributed or define specific actions to take after the registry is built. This can range from generating machine-readable files (like JSON) to creating human-readable documentation or manifests for custom CLI applications.

Built-in Output Types:

• Distributed: Outputs your registry as individual JSON files within a directory.
• Repository: Outputs your registry as a single JSON file located in the root of your repository.
• shadcn: Outputs your registry in the specific format required by shadcn.

If you are creating a transform package, follow these rules to ensure compatibility and predictable configuration:

1. Package Naming: Use the convention jsrepo-transform-<name> or @<org>/jsrepo-transform-<name>.
2. Export: Export your transform function as the default export.
3. Config Mapping: The name used in your jsrepo.config.ts is derived from the package name by removing the jsrepo-transform- prefix and converting it to camelCase.

Examples:

• jsrepo-transform-my-transform becomes myTransform in config.
• @my-org/jsrepo-transform-my-transform becomes myTransform in config.

Note: Official @jsrepo plugins follow a different pattern to avoid redundant naming (e.g., @jsrepo/transform-prettier is used as prettier() in config).

The js language plugin enables jsrepo to perform dependency resolution for both JavaScript and TypeScript files. When using ecosystem: "js", the plugin automatically detects dependencies from various import and export syntaxes to ensure correct installation and resolution.

Supported syntax patterns include:

• Static imports: import { x } from 'y'
• Dynamic imports: await import('y')
• Export from statements: export { x } from 'y'
• Side effect imports: import 'y'

import 'dotenv/config';
import { print } from "@/utils/stdout";

async function printDynamic() {
	const data = await import("./data.json", { with: { type: "json" } });
	print(data.message);
}

export { logger } from "@/utils/logger";