fix(react): use vidstack pkg source code when building

.gitignore

@@ -3,7 +3,7 @@ dist-*/
 sandbox/
 
 .tsbuildinfo
-tsconfig.tsbuildinfo
+tsconfig.build.tsbuildinfo
 tsup.config.bundled_*
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

packages/react/.templates/sandbox/player.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 
 import {
   isHLSProvider,
@@ -20,10 +20,10 @@ import {
 import { textTracks } from './tracks';
 
 export function Player() {
-  let player = useRef<MediaPlayerInstance>(null),
-    [src, setSrc] = useState('');
+  let player = React.useRef<MediaPlayerInstance>(null),
+    [src, setSrc] = React.useState('');
 
-  useEffect(() => {
+  React.useEffect(() => {
     // Initialize src.
     changeSource('audio');
 

packages/react/.templates/sandbox/tracks.ts

@@ -20,4 +20,4 @@ export const textTracks = [
     language: 'en-US',
     default: true,
   },
-];
+] as const;

packages/react/package.json

@@ -18,11 +18,10 @@
   ],
   "scripts": {
     "analyze": "maverick analyze \"src/**/*.tsx\" --framework react",
-    "dev": "pnpm clean && pnpm build:core && pnpm build:icons && pnpm build:types && pnpm watch",
+    "dev": "pnpm clean && pnpm build:icons && pnpm build:types && pnpm watch",
     "build": "pnpm build:icons && rollup -c",
     "build:icons": "node .scripts/build-icons.js",
     "build:types": "tsc -p tsconfig.build.json",
-    "build:core": "pnpm -F vidstack build:local && pnpm -F vidstack types",
     "sandbox": "node ../../.scripts/sandbox.js",
     "sandbox:build": "vite build sandbox",
     "types": "pnpm build:types && rollup -c --config-types",

packages/react/rollup.config.js

@@ -2,29 +2,50 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import { nodeResolve } from '@rollup/plugin-node-resolve';
+import chokidar from 'chokidar';
 import { transformSync } from 'esbuild';
 import fs from 'fs-extra';
 import { defineConfig } from 'rollup';
 import dts from 'rollup-plugin-dts';
 import esbuildPlugin from 'rollup-plugin-esbuild';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url)),
-  ROOT_DIR = path.resolve(__dirname, '.'),
-  STYLES_DIR = path.resolve(ROOT_DIR, 'player/styles'),
-  VIDSTACK_PKG_DIR = path.resolve(ROOT_DIR, 'node_modules/vidstack'),
-  VIDSTACK_PKG_PLAYER_STYLES_DIR = path.resolve(VIDSTACK_PKG_DIR, 'player/styles');
-
 const MODE_WATCH = process.argv.includes('-w'),
-  MODE_TYPES = process.argv.includes('--config-types'),
-  EXTERNAL = ['react', 'react-dom', 'media-icons', 'media-captions', 'hls.js', /@radix-ui/],
-  NPM = [define({ dev: true }), define({ dev: false })];
+  MODE_TYPES = process.argv.includes('--config-types');
 
-// Styles.
-copyStyles();
-copyTailwind();
+const DIRNAME = path.dirname(fileURLToPath(import.meta.url)),
+  ROOT_DIR = path.resolve(DIRNAME, '.'),
+  STYLES_DIR = path.resolve(ROOT_DIR, 'player/styles'),
+  VIDSTACK_PKG_DIR = path.resolve(ROOT_DIR, 'node_modules/vidstack'),
+  VIDSTACK_PKG_PLAYER_STYLES_DIR = path.resolve(VIDSTACK_PKG_DIR, 'player/styles'),
+  VIDSTACK_LOCAL_PATH = path.resolve('../vidstack/src/index.ts');
+
+const EXTERNAL_PACKAGES = [
+    'react',
+    'react-dom',
+    'media-icons',
+    'media-captions',
+    'hls.js',
+    /@radix-ui/,
+  ],
+  NPM_BUNDLES = [define({ dev: true }), define({ dev: false })],
+  TYPES_BUNDLES = [defineTypes()];
+
+// Styles
+if (!MODE_TYPES) {
+  copyStyles();
+  copyTailwind();
+
+  if (MODE_WATCH) {
+    chokidar.watch('player/styles/**').on('all', (_, path) => {
+      if (path !== 'player/styles/default/theme.css') buildDefaultTheme();
+    });
+  } else {
+    buildDefaultTheme();
+  }
+}
 
 export default defineConfig(
-  MODE_WATCH ? [defineTypes(), ...NPM] : MODE_TYPES ? [defineTypes()] : NPM,
+  MODE_WATCH ? [...TYPES_BUNDLES, ...NPM_BUNDLES] : MODE_TYPES ? TYPES_BUNDLES : NPM_BUNDLES,
 );
 
 /**
@@ -33,29 +54,30 @@ export default defineConfig(
 function defineTypes() {
   return {
     input: {
-      index: 'types/index.d.ts',
-      icons: 'types/icons.d.ts',
-      'player/layouts/default': 'types/components/layouts/default/index.d.ts',
+      index: 'types/react/src/index.d.ts',
+      icons: 'types/react/src/icons.d.ts',
+      'player/layouts/default': 'types/react/src/components/layouts/default/index.d.ts',
     },
     output: {
       dir: '.',
       chunkFileNames: 'dist/types/[name].d.ts',
       manualChunks(id) {
-        if (id.includes('maverick')) return 'vidstack-framework.d';
-        if (id.includes('vidstack')) return 'vidstack.d';
+        if (id.includes('react/src')) return 'vidstack-react';
+        if (id.includes('maverick')) return 'vidstack-framework';
+        if (id.includes('vidstack')) return 'vidstack';
       },
     },
-    external: EXTERNAL,
+    external: EXTERNAL_PACKAGES,
     plugins: [
-      dts({ respectExternal: true }),
       {
-        name: 'cleanup',
-        closeBundle() {
-          if (!MODE_WATCH) {
-            fs.rmSync('types', { recursive: true });
+        name: 'resolve-vidstack-types',
+        resolveId(id) {
+          if (id === 'vidstack') {
+            return 'types/vidstack/src/index.d.ts';
           }
         },
       },
+      dts({ respectExternal: true }),
     ],
   };
 }
@@ -91,7 +113,7 @@ function define({ dev }) {
     treeshake: true,
     preserveEntrySignatures: 'allow-extension',
     maxParallelFileOps: !dev ? 1 : 20,
-    external: EXTERNAL,
+    external: EXTERNAL_PACKAGES,
     output: {
       format: 'esm',
       dir: `dist/${alias}`,
@@ -101,6 +123,27 @@ function define({ dev }) {
       },
     },
     plugins: [
+      {
+        name: 'vidstack-link',
+        resolveId(id) {
+          if (id === ':virtual/env') {
+            return id;
+          } else if (id === 'vidstack') {
+            return VIDSTACK_LOCAL_PATH;
+          }
+        },
+        load(id) {
+          if (id === ':virtual/env') {
+            return 'export const IS_SERVER = typeof document === "undefined";';
+          }
+        },
+        transform(code) {
+          if (code.includes('__SERVER__')) {
+            code = code.replace(/__SERVER__/g, 'IS_SERVER');
+            return "import { IS_SERVER } from ':virtual/env';\n" + code;
+          }
+        },
+      },
       nodeResolve({
         exportConditions: dev
           ? ['development', 'production', 'default']
@@ -172,3 +215,16 @@ function copyTailwind() {
   fs.copyFileSync(tailwindFilePath, path.resolve(ROOT_DIR, 'tailwind.cjs'));
   fs.copyFileSync(tailwindDTSFilePath, path.resolve(ROOT_DIR, 'tailwind.d.cts'));
 }
+
+function buildDefaultTheme() {
+  // CSS merge.
+  let defaultStyles = fs.readFileSync('player/styles/base.css', 'utf-8');
+
+  const themeDir = 'player/styles/default';
+  for (const file of fs.readdirSync(themeDir, 'utf-8')) {
+    if (file === 'theme.css' || file === 'layouts') continue;
+    defaultStyles += '\n' + fs.readFileSync(`${themeDir}/${file}`, 'utf-8');
+  }
+
+  fs.writeFileSync('player/styles/default/theme.css', defaultStyles);
+}

packages/react/src/components/layouts/default/context.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import type { DefaultLayoutTranslations } from 'vidstack/local';
+import type { DefaultLayoutTranslations } from 'vidstack';
 
 import type { DefaultLayoutIcons } from './icons';
 

packages/react/src/components/layouts/default/icons.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { PropsWithoutRef, SVGProps } from 'react';
 
 import arrowLeftPaths from 'media-icons/dist/icons/arrow-left.js';
 import chaptersIconPaths from 'media-icons/dist/icons/chapters.js';
@@ -73,7 +72,8 @@ export const defaultLayoutIcons: DefaultLayoutIcons = {
   },
 };
 
-export interface DefaultLayoutIconProps extends PropsWithoutRef<SVGProps<SVGSVGElement>> {}
+export interface DefaultLayoutIconProps
+  extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> {}
 
 export interface DefaultLayoutIcon {
   (props: DefaultLayoutIconProps): React.ReactNode;

packages/react/src/components/layouts/default/shared-layout.tsx

@@ -5,7 +5,7 @@ import {
   isTrackCaptionKind,
   type DefaultLayoutTranslations,
   type TooltipPlacement,
-} from 'vidstack/local';
+} from 'vidstack';
 
 import { useAudioOptions } from '../../../hooks/options/use-audio-options';
 import { useCaptionOptions } from '../../../hooks/options/use-caption-options';

packages/react/src/components/primitives/instances.ts

@@ -34,7 +34,7 @@ import {
   TooltipContent,
   TooltipTrigger,
   VolumeSlider,
-} from 'vidstack/local';
+} from 'vidstack';
 
 // Core
 export class MediaPlayerInstance extends MediaPlayer {}

packages/react/src/components/provider.tsx

@@ -6,7 +6,7 @@ import {
   useStateContext,
   type ReactElementProps,
 } from 'maverick.js/react';
-import { mediaState } from 'vidstack/local';
+import { mediaState } from 'vidstack';
 
 import { MediaProviderInstance } from './primitives/instances';
 

packages/react/src/components/ui/buttons/caption-button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
 
-import { CaptionButtonInstance, MuteButtonInstance } from '../../primitives/instances';
+import { CaptionButtonInstance } from '../../primitives/instances';
 import { Primitive } from '../../primitives/nodes';
 
 /* -------------------------------------------------------------------------------------------------
@@ -12,7 +12,7 @@ import { Primitive } from '../../primitives/nodes';
 const CaptionButtonBridge = createReactComponent(CaptionButtonInstance);
 
 export interface CaptionButtonProps
-  extends ReactElementProps<MuteButtonInstance, HTMLButtonElement> {
+  extends ReactElementProps<CaptionButtonInstance, HTMLButtonElement> {
   asChild?: boolean;
   children?: React.ReactNode;
   ref?: React.Ref<HTMLButtonElement>;

packages/react/src/components/ui/poster.tsx

@@ -7,7 +7,7 @@ import {
   useStateContext,
   type ReactElementProps,
 } from 'maverick.js/react';
-import { mediaState } from 'vidstack/local';
+import { mediaState } from 'vidstack';
 
 import { PosterInstance } from '../primitives/instances';
 import { Primitive } from '../primitives/nodes';

packages/react/src/components/ui/radio-group.tsx

@@ -2,7 +2,7 @@
  * RadioGroup
  * -----------------------------------------------------------------------------------------------*/
 
-import React from 'react';
+import * as React from 'react';
 
 import { composeRefs, createReactComponent, type ReactElementProps } from 'maverick.js/react';
 

packages/react/src/components/ui/sliders/slider-value.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { createReactComponent, type ReactElementProps } from 'maverick.js/react';
 
 import { SliderValueInstance } from '../../primitives/instances';

packages/react/src/components/ui/sliders/time-slider.tsx

@@ -9,7 +9,7 @@ import {
   type ReactElementProps,
 } from 'maverick.js/react';
 import { VTTCue } from 'media-captions';
-import { mediaState } from 'vidstack/local';
+import { mediaState } from 'vidstack';
 
 import {
   SliderChaptersInstance,

packages/react/src/components/ui/thumbnail.tsx

@@ -7,7 +7,7 @@ import {
   useStateContext,
   type ReactElementProps,
 } from 'maverick.js/react';
-import { mediaState } from 'vidstack/local';
+import { mediaState } from 'vidstack';
 
 import { ThumbnailInstance } from '../primitives/instances';
 import { Primitive, type PrimitivePropsWithRef } from '../primitives/nodes';

packages/react/src/globals.d.ts

@@ -1,5 +1,6 @@
 declare global {
   const __DEV__: boolean;
+  const __SERVER__: boolean;
 }
 
 export {};

packages/react/src/hooks/create-text-track.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import * as React from 'react';
 
 import { useReactContext } from 'maverick.js/react';
-import { mediaContext, TextTrack, type TextTrackInit } from 'vidstack/local';
+import { mediaContext, TextTrack, type TextTrackInit } from 'vidstack';
 
 /**
  * Creates a new `TextTrack` object and adds it to the player.

packages/react/src/hooks/options/use-audio-options.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { useReactContext, useSignal } from 'maverick.js/react';
-import { mediaContext, type AudioTrack } from 'vidstack/local';
+import { mediaContext, type AudioTrack } from 'vidstack';
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-audio-options}

packages/react/src/hooks/options/use-caption-options.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { useReactContext, useSignal } from 'maverick.js/react';
 import { isString } from 'maverick.js/std';
-import { isTrackCaptionKind, mediaContext, type TextTrack } from 'vidstack/local';
+import { isTrackCaptionKind, mediaContext, type TextTrack } from 'vidstack';
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-caption-options}

packages/react/src/hooks/options/use-chapter-options.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { effect, type StopEffect } from 'maverick.js';
 import { useReactContext } from 'maverick.js/react';
 import type { VTTCue } from 'media-captions';
-import { formatSpokenTime, formatTime, mediaContext } from 'vidstack/local';
+import { formatSpokenTime, formatTime, mediaContext } from 'vidstack';
 
 import { useActiveTextCues } from '../use-active-text-cues';
 import { useActiveTextTrack } from '../use-active-text-track';

packages/react/src/hooks/options/use-playback-rate-options.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { useReactContext, useSignal } from 'maverick.js/react';
-import { mediaContext } from 'vidstack/local';
+import { mediaContext } from 'vidstack';
 
 const DEFAULT_RATES = [0.25, 0.5, 0.75, { label: 'Normal', rate: 1 }, 1.25, 1.5, 1.75, 2];
 

packages/react/src/hooks/options/use-video-quality-options.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { useReactContext, useSignal } from 'maverick.js/react';
 import { isString } from 'maverick.js/std';
-import { mediaContext, type VideoQuality } from 'vidstack/local';
+import { mediaContext, type VideoQuality } from 'vidstack';
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-video-quality-options}

packages/react/src/hooks/use-active-text-cues.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { listenEvent } from 'maverick.js/std';
 import type { VTTCue } from 'media-captions';
-import type { TextTrack } from 'vidstack/local';
+import type { TextTrack } from 'vidstack';
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-active-text-cues}

packages/react/src/hooks/use-active-text-track.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { useReactContext } from 'maverick.js/react';
-import { mediaContext, observeActiveTextTrack, type TextTrack } from 'vidstack/local';
+import { mediaContext, observeActiveTextTrack, type TextTrack } from 'vidstack';
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-active-text-track}