chore: point pkg exports at source files in local env

.scripts/copy-pkg-info.js → .build/copy-pkg-files.js

@@ -4,7 +4,7 @@ import fs from 'fs-extra';
 
 const cwd = process.cwd();
 
-export function copyPkgInfo() {
+export function copyPkgFiles() {
   const pkgPath = path.resolve(cwd, 'package.json'),
     pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8')),
     distDir = path.resolve(cwd, 'dist-npm');
@@ -35,9 +35,21 @@ export function copyPkgInfo() {
   // Create package.json.
   const distPkg = {};
   for (const field of validPkgFields) distPkg[field] = pkg[field];
+
+  // Use publish fields.
+  distPkg.types = pkg.$types;
+  distPkg.exports = pkg.$exports;
+
+  if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir);
+  }
+
   fs.writeFileSync(dist('package.json'), JSON.stringify(distPkg, null, 2), 'utf-8');
 
   // Copy over license and readme.
   fs.copyFileSync(root('LICENSE'), dist('LICENSE'));
-  fs.copyFileSync(root('README.md'), dist('README.md'));
+
+  if (fs.existsSync(root('README.md'))) {
+    fs.copyFileSync(root('README.md'), dist('README.md'));
+  }
 }

.gitignore

@@ -44,6 +44,7 @@ packages/react/dom.d.ts
 packages/react/google-cast.d.ts
 packages/react/player/
 packages/react/tailwind*
+packages/react/styles
 
 *~
 *.sw[mnpcod]

.scripts/release.js

@@ -260,21 +260,17 @@ async function publishCDN(version) {
 }
 
 function getReleaseTag(version) {
-  let releaseTag = null;
-
   if (args.tag) {
-    releaseTag = args.tag;
+    return args.tag;
   } else if (version.includes('alpha')) {
-    releaseTag = 'alpha';
+    return 'alpha';
   } else if (version.includes('beta')) {
-    releaseTag = 'beta';
+    return 'beta';
   } else if (version.includes('rc')) {
-    releaseTag = 'rc';
+    return 'rc';
   } else {
-    releaseTag = isNext ? 'next' : 'latest';
+    return isNext ? 'next' : 'latest';
   }
-
-  return releaseTag;
 }
 
 if (isDryRun) console.log(kleur.cyan('\n☂️  Running in dry mode...\n'));

packages/react/package.json

@@ -4,7 +4,7 @@
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
   "license": "MIT",
   "type": "module",
-  "types": "index.d.ts",
+  "types": "src/index.ts",
   "sideEffects": false,
   "engines": {
     "node": ">=18"
@@ -22,6 +22,7 @@
     "types": "pnpm build:icons && pnpm declarations && pnpm build:types",
     "clean": "rimraf dist-npm",
     "format": "prettier src --write --loglevel warn",
+    "link:styles": "ln -s ../vidstack/styles ./styles",
     "watch": "pnpm watch:types & pnpm run bundle -w",
     "watch:types": "pnpm run declarations -w & pnpm run build:types -w"
   },
@@ -71,6 +72,16 @@
     "url": "https://github.com/vidstack/player/issues"
   },
   "exports": {
+    ".": "./src/index.ts",
+    "./icons": "./src/icons.ts",
+    "./player/remotion": "./src/providers/remotion/index.ts",
+    "./player/layouts/default": "./src/components/layouts/default/index.ts",
+    "./player/layouts/plyr": "./src/components/layouts/plyr/index.ts",
+    "./player/styles/*": "./styles/player/*",
+    "./package.json": "./package.json"
+  },
+  "$types": "index.d.ts",
+  "$exports": {
     ".": {
       "types": "./index.d.ts",
       "worker": "./server/vidstack.js",

packages/react/rollup.config.ts

@@ -6,7 +6,7 @@ import fs from 'fs-extra';
 import { defineConfig, type Plugin, type RollupOptions } from 'rollup';
 import dts from 'rollup-plugin-dts';
 
-import { copyPkgInfo } from '../../.scripts/copy-pkg-info.js';
+import { copyPkgFiles } from '../../.build/copy-pkg-files.js';
 import { buildDefaultTheme, watchStyles } from '../vidstack/build/build-styles.js';
 import { decorators } from '../vidstack/build/rollup-decorators';
 import typescript from '../vidstack/build/rollup-ts';
@@ -16,10 +16,9 @@ const MODE_WATCH = process.argv.includes('-w'),
 
 const DIRNAME = path.dirname(fileURLToPath(import.meta.url)),
   ROOT_DIR = path.resolve(DIRNAME, '.'),
-  DIST_NPM_DIR = path.resolve(ROOT_DIR, 'dist-npm'),
-  VIDSTACK_PKG_DIR = path.resolve(ROOT_DIR, 'node_modules/vidstack'),
-  VIDSTACK_LOCAL_PATH = path.resolve('../vidstack/src/index.ts'),
-  VIDSTACK_EXPORTS_PATH = path.resolve('../vidstack/src/exports');
+  DIST_NPM_DIR = path.resolve(ROOT_DIR, 'dist-npm');
+
+const VIDSTACK_PKG_DIR = path.resolve(ROOT_DIR, 'node_modules/vidstack');
 
 const NPM_EXTERNAL_PACKAGES = [
     'react',
@@ -60,6 +59,7 @@ function defineTypesBundle(): RollupOptions[] {
         minifyInternalExports: false,
         chunkFileNames: 'types/[name].d.ts',
         manualChunks(id) {
+          if (id.includes('primitives/instances')) return 'vidstack-instances';
           if (id.includes('react/src')) return 'vidstack-react';
           if (id.includes('vidstack')) return 'vidstack';
         },
@@ -81,11 +81,11 @@ function resolveVidstackTypes(): Plugin {
     name: 'resolve-vidstack-types',
     resolveId(id) {
       if (id === 'vidstack') {
-        return 'types/vidstack/src/index.d.ts';
+        return '../vidstack/types/index.d.ts';
       }
 
-      if (id.startsWith('vidstack/exports')) {
-        return id.replace('vidstack/exports', 'types/vidstack/src/exports') + '.d.ts';
+      if (id.startsWith('vidstack')) {
+        return id.replace('vidstack', '../vidstack/types').replace('.ts', '.d.ts');
       }
     },
   };
@@ -152,7 +152,7 @@ function defineNPMBundle({ dev }: NPMBundleOptions): RollupOptions {
       },
     },
     plugins: [
-      resolveVidstack(),
+      env(),
       nodeResolve({
         exportConditions: dev
           ? ['development', 'production', 'default']
@@ -171,17 +171,12 @@ function defineNPMBundle({ dev }: NPMBundleOptions): RollupOptions {
   };
 }
 
-function resolveVidstack(): Plugin {
+function env(): Plugin {
   return {
-    name: 'vidstack-link',
+    name: 'virtual-env',
     resolveId(id) {
       if (id === ':virtual/env') {
         return id;
-      } else if (id === 'vidstack') {
-        return VIDSTACK_LOCAL_PATH;
-      } else if (id.startsWith('vidstack/exports')) {
-        const path = id.replace('vidstack/exports', VIDSTACK_EXPORTS_PATH);
-        return path + '.ts';
       }
     },
     load(id) {
@@ -229,7 +224,7 @@ function copyAssets(): Plugin {
   return {
     name: 'copy-assets',
     async buildEnd() {
-      await copyPkgInfo();
+      await copyPkgFiles();
       await copyStyles();
       await copyTailwind();
       await buildDefaultTheme();

packages/react/src/components/layouts/default/ui/menus/font-menu.tsx

@@ -13,7 +13,7 @@ import {
   type DefaultFontSettingProps,
   type FontRadioOption,
   type FontSliderOption,
-} from 'vidstack/exports/font';
+} from 'vidstack/exports/font.ts';
 
 import { useMediaPlayer } from '../../../../../hooks/use-media-player';
 import { useMediaState } from '../../../../../hooks/use-media-state';

packages/react/src/components/layouts/default/ui/menus/settings-menu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { flushSync } from 'react-dom';
-import { updateFontCssVars } from 'vidstack/exports/font';
+import { updateFontCssVars } from 'vidstack/exports/font.ts';
 
 import { useMediaState } from '../../../../../hooks/use-media-state';
 import { useScoped } from '../../../../../hooks/use-signals';

packages/react/src/index.ts

@@ -1,8 +1,8 @@
-export * from 'vidstack/exports/core';
-export * from 'vidstack/exports/foundation';
-export * from 'vidstack/exports/maverick';
-export * from 'vidstack/exports/providers';
-export * from 'vidstack/exports/utils';
+export * from 'vidstack/exports/core.ts';
+export * from 'vidstack/exports/foundation.ts';
+export * from 'vidstack/exports/maverick.ts';
+export * from 'vidstack/exports/providers.ts';
+export * from 'vidstack/exports/utils.ts';
 
 export {
   type TimeState,
@@ -30,7 +30,7 @@ export {
   type MediaAnnouncerWord,
   DEFAULT_AUDIO_GAINS,
   DEFAULT_PLAYBACK_RATES,
-} from 'vidstack/exports/components';
+} from 'vidstack/exports/components.ts';
 
 // Primitives
 export * from './components/primitives/instances';

packages/react/tsconfig.build.json

@@ -3,11 +3,8 @@
   "compilerOptions": {
     "declaration": true,
     "declarationDir": "types",
-    "paths": {
-      "vidstack": ["../vidstack/src"],
-      "vidstack/exports/*": ["../vidstack/src/exports/*"]
-    }
+    "paths": {}
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "../vidstack/src/**/*.ts"],
-  "exclude": ["src/**/*.test.ts", "../vidstack/src/**/*.test.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts"]
 }

packages/react/tsconfig.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "jsx": "preserve",
     "paths": {
-      "vidstack": ["../vidstack/src"],
-      "vidstack/exports/*": ["../vidstack/src/exports/*"],
       "@vidstack/react": ["./src/index.ts"]
     },
     "types": ["@types/node"]

packages/react/vite.config.ts

@@ -3,9 +3,6 @@ import path from 'node:path';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 
-const vidstackSource = path.resolve('../vidstack/src/index.ts'),
-  vidstackExports = path.resolve('../vidstack/src/exports');
-
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
@@ -16,13 +13,6 @@ export default defineConfig({
     {
       name: 'ts-paths',
       enforce: 'pre',
-      resolveId(id) {
-        if (id === 'vidstack') {
-          return vidstackSource;
-        } else if (id.startsWith('vidstack/exports')) {
-          return id.replace('vidstack/exports', vidstackExports) + '.ts';
-        }
-      },
     },
     react(),
   ],

packages/vidstack/package.json

@@ -4,7 +4,7 @@
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
   "license": "MIT",
   "type": "module",
-  "types": "index.d.ts",
+  "types": "src/index.ts",
   "sideEffects": [
     "./src/global/*.ts",
     "./src/elements/bundles/**/*.ts",
@@ -96,6 +96,30 @@
     "url": "https://github.com/vidstack/player/issues"
   },
   "exports": {
+    ".": "./src/index.ts",
+    "./elements": "./src/elements/index.ts",
+    "./global/player": "./src/global/player.ts",
+    "./global/plyr": "./src/global/plyr.ts",
+    "./icons": "./src/elements/bundles/icons.ts",
+    "./player": "./src/elements/bundles/player.ts",
+    "./player/ui": "./src/elements/bundles/player-ui.ts",
+    "./player/layouts": "./src/elements/bundles/player-layouts/index.ts",
+    "./player/layouts/default": "./src/elements/bundles/player-layouts/default.ts",
+    "./player/layouts/plyr": "./src/elements/bundles/player-layouts/plyr.ts",
+    "./types/*": "./types/*",
+    "./player/styles/*": "./styles/player/*",
+    "./vue": "./npm/vue.d.ts",
+    "./svelte": "./npm/svelte.d.ts",
+    "./solid": "./npm/solid.d.ts",
+    "./bundle": {
+      "types": "./src/elements/index.ts"
+    },
+    "./exports/*": "./src/exports/*",
+    "./plugins": "./src/plugins.ts",
+    "./package.json": "./package.json"
+  },
+  "$types": "index.d.ts",
+  "$exports": {
     ".": {
       "types": "./index.d.ts",
       "worker": "./server/vidstack.js",

packages/vidstack/rollup.config.ts

@@ -7,7 +7,7 @@ import fs from 'fs-extra';
 import { defineConfig, type Plugin, type RollupOptions } from 'rollup';
 import dts from 'rollup-plugin-dts';
 
-import { copyPkgInfo } from '../../.scripts/copy-pkg-info.js';
+import { copyPkgFiles } from '../../.build/copy-pkg-files.js';
 import { buildDefaultTheme, watchStyles } from './build/build-styles.js';
 import { decorators } from './build/rollup-decorators';
 import { minify } from './build/rollup-minify';
@@ -429,9 +429,9 @@ function getPluginsBundles(): RollupOptions[] {
 
 function copyAssets(): Plugin {
   return {
-    name: 'copy-assets',
+    name: 'copy-',
     async buildEnd() {
-      await copyPkgInfo();
+      await copyPkgFiles();
       await buildDefaultTheme();
       await fs.copy('styles/player', 'dist-npm/player/styles');
       await fs.copy('npm', 'dist-npm');