WIP: jsrepo v3

[ieedan]

A demo of what the registry could look like with jsrepo v3 opening this now so we can fix anything in jsrepo that would be a limitation here.

Here's how it works right now...

With jsrepo v3 outputs we can now output jsrepo and shadcn registries all with one command jsrepo build.

Since it's a js based config we can also do our own ultra specific build scripts if we'd like. In this case we do this with the getItems function:

function getItems({ dir, cwd, suffix }: { dir: string; cwd: string; suffix?: string }): RegistryItem[] {
  const types = fs.readdirSync(dir);

  return types.flatMap(typeDir => {
    const items = fs.readdirSync(path.join(dir, typeDir));

    return items.map(item => {
      const files = fs.readdirSync(path.join(dir, typeDir, item));
      let description: string | undefined;
      if (files.includes('meta.json')) {
        const meta = metaSchema.parse(JSON.parse(fs.readFileSync(path.join(dir, typeDir, item, 'meta.json'), 'utf-8')));
        description = meta.description;
      }
      return {
        name: `${pascalToKebab(item)}${suffix ? `-${suffix}` : ''}`,
        title: item,
        description,
        type: 'registry:block',
        files: files
          .filter(f => f !== 'meta.json')
          .map(file => {
            return {
              path: path.relative(cwd, path.join(dir, typeDir, item, file)),
              // prevent warnings
              dependencyResolution: endsWithOneOf(file, ['.glb', '.png']) ? 'manual' : 'auto'
            };
          })
      } satisfies RegistryItem;
    });
  });
}

Get items automatically compiles all the items in the registry based on the structure of the repo using the meta.json file to get the description of each component. (We can of course add other meta data here as necessary)

Dropping JS variants in favor of automatic type stripping at runtime

Since both jsrepo and shadcn support automatic TS -> JS conversion we have dropped the js variants of the registry.

Support for js in shadcn:

// components.json
{
	// ...
	"tsx": false,
}

Support for js in jsrepo:

// jsrepo.config.ts
import { defineConfig } from "jsrepo";
import javascript from "@jsrepo/transform-javascript"; 

export default defineConfig({
	// ...
	transforms: [javascript()], 
});

Users can initialize your registry with js by running:

jsrepo init https://reactbits.dev/jsrepo/tailwind --js

The final product looks like this:

┌   jsrepo  v3.0.0-beta.8
│
└  Finished in 346.61ms
   @react-bits: Created 2 outputs in 327.88ms with 229 items and 229 files.

Tasks before this would merge:

• Docs
  • Update docs for new component paths (no more ts in the component name + all lowercase)
  • Show new method for using js
• jsrepo v3 should be in a stable release

[DavidHDev]

Hey Aidan, I still think keeping all 4 variants separate is preferred in my case here. Also, why were all the registry items deleted?

[DavidHDev]

Also, I really don't want to hold a meta.json file in the src folder for every single component, is that mandatory?

[DavidHDev]

The registry.json files have to stay, they are used by shadcn

[ieedan]

We still generate the registry json files they just aren't tracked rn. Can ofc add them back for visibility though.

[DavidHDev]

Hey Aidan, I still think keeping all 4 variants separate is preferred in my case here. Also, why were all the registry items deleted?

To follow up on this, removing these will cause this command to stop working, which is not what I want:

npx shadcn@latest add @react-bits/SplitText-TS-CSS

[ieedan]

All the registry items were removed cause there's not really any reason to track them on GitHub they are automatically added when you deploy the site.

[ieedan]

Also, I really don't want to hold a meta.json file in the src folder for every single component, is that mandatory?

Nope just a possible alternative to having to define a huge file with all the descriptions of every item it's completely up to you

It just allows us to autobuild without defining every registry item and still add metadata to each item.

All the code for that is contained in the jsrepo.config.ts and not part of jsrepo itself.

[DavidHDev]

Also, I really don't want to hold a meta.json file in the src folder for every single component, is that mandatory?

Nope just a possible alternative to having to define a huge file with all the descriptions of every item it's completely up to you

It just allows us to autobuild without defining every registry item and still add metadata to each item.

All the code for that is contained in the jsrepo.config.ts and not part of jsrepo itself.

I'm a fan of huge files... better to have one file to manage everything, like Information.js

[DavidHDev]

I just don't think this really simplifies anything... I'm a lot more confused with what's going on now rather than the previous setup

[ieedan]

Also, I really don't want to hold a meta.json file in the src folder for every single component, is that mandatory?

Nope just a possible alternative to having to define a huge file with all the descriptions of every item it's completely up to you

It just allows us to autobuild without defining every registry item and still add metadata to each item.

All the code for that is contained in the jsrepo.config.ts and not part of jsrepo itself.

I'm a fan of huge files... better to have one file to manage everything, like Information.js

Yeah we can go back to that for now