build(skin): generate hosted Shadcn registry

packages/skins/package.json

@@ -55,8 +55,10 @@
     "dashjs": "^5.2.0",
     "hls.js": "^1.6.7",
     "mux-embed": "5.17.10",
+    "oxfmt": "0.61.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "shadcn": "^4.19.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",

packages/skins/shadcn/format.ts

@@ -0,0 +1,39 @@
+import { isString } from '@videojs/utils/predicate';
+import { format } from 'oxfmt';
+import type { Plugin } from 'vite';
+
+const sourceFile = /\.(?:css|[cm]?[jt]sx?)$/;
+
+/** Format editable registry source before Shadcn embeds it in installable item JSON. */
+export function formatRegistrySources(): Plugin {
+  return {
+    name: 'videojs:format-registry-sources',
+    async generateBundle(_options, bundle) {
+      await Promise.all(
+        Object.values(bundle).map(async (asset) => {
+          if (asset.type !== 'asset' || !isString(asset.source) || !sourceFile.test(asset.fileName)) return;
+
+          const result = await format(asset.fileName, asset.source, {
+            arrowParens: 'always',
+            bracketSpacing: true,
+            jsdoc: true,
+            printWidth: 120,
+            semi: true,
+            singleQuote: !asset.fileName.endsWith('.css'),
+            sortImports: true,
+            tabWidth: 2,
+            trailingComma: 'es5',
+          });
+
+          if (result.errors.length > 0) {
+            const messages = result.errors.map((error) => error.message).join('\n');
+
+            throw new Error(`Could not format generated registry source \`${asset.fileName}\`:\n${messages}`);
+          }
+
+          asset.source = result.code;
+        })
+      );
+    },
+  };
+}

packages/skins/shadcn/vite.config.ts

@@ -18,6 +18,7 @@ import type { VjscRegistryItem } from '../../vjsc/src/shadcn/index.ts';
 import type { VideojsRegistryMeta } from '../registry/meta.ts';
 import { configureSkinModule } from '../vjsc/config';
 import { type SkinModuleMeta, type SkinName, skinStyles } from '../vjsc/meta';
+import { formatRegistrySources } from './format';
 
 const packageDir = resolve(import.meta.dirname, '..');
 const vjscDir = resolve(packageDir, 'vjsc');
@@ -112,7 +113,7 @@ export const shadcnPackConfig: PackUserConfig = {
   name: 'skins-shadcn-registry',
   cwd: packageDir,
   entry: { registry: registryUtils },
-  outDir: 'dist/registry',
+  outDir: 'dist/registry/source',
   clean: true,
   dts: false,
   sourcemap: false,
@@ -144,6 +145,7 @@ export const shadcnPackConfig: PackUserConfig = {
         items: registryItems(target),
       })
     ),
+    formatRegistrySources(),
     registryAssetsOnly(),
   ],
 };

packages/skins/vite.config.ts

@@ -34,13 +34,37 @@ export default defineConfig({
         input: cachedTaskInputs,
         output: ['dist/**', '!dist/registry', '!dist/registry/**'],
       },
-      'build:shadcn': {
-        command: 'vp -C shadcn pack',
+      'prepare:shadcn': {
+        command: ['rimraf dist/registry', 'vp -C shadcn pack'],
         dependsOn: workspaceTaskDependencies(),
         // The registry plugin compares files in its output directory before
         // rewriting them; those reads must not turn outputs into inputs.
         input: [...cachedTaskInputs, '!dist/registry', '!dist/registry/**'],
-        output: ['dist/registry/**'],
+        output: ['dist/registry/source/**'],
+      },
+      'build:shadcn:react': {
+        command: 'shadcn build dist/registry/source/r/react/registry.json --output dist/registry/r/react',
+        dependsOn: ['prepare:shadcn'],
+        input: ['dist/registry/source/r/react/**', '!dist/registry/source/r/react/css/**'],
+        output: ['dist/registry/r/react/**', '!dist/registry/r/react/css/**'],
+      },
+      'build:shadcn:react-css': {
+        command: 'shadcn build dist/registry/source/r/react/css/registry.json --output dist/registry/r/react/css',
+        dependsOn: ['build:shadcn:react'],
+        input: ['dist/registry/source/r/react/css/**'],
+        output: ['dist/registry/r/react/css/**'],
+      },
+      'build:shadcn:html': {
+        command: 'shadcn build dist/registry/source/r/html/registry.json --output dist/registry/r/html',
+        dependsOn: ['prepare:shadcn'],
+        input: ['dist/registry/source/r/html/**', '!dist/registry/source/r/html/css/**'],
+        output: ['dist/registry/r/html/**', '!dist/registry/r/html/css/**'],
+      },
+      'build:shadcn': {
+        command: 'shadcn build dist/registry/source/r/html/css/registry.json --output dist/registry/r/html/css',
+        dependsOn: ['build:shadcn:html', 'build:shadcn:react-css'],
+        input: ['dist/registry/source/r/html/css/**'],
+        output: ['dist/registry/r/html/css/**'],
       },
       'test:ci': packageTestTask('pnpm run test:types && vp test run'),
     },