feat: migrate examples from prototype and add CSS modules support

- Migrate HTML and React demo applications from prototype to examples/ directory - Add examples to workspace configuration with selective build support - Update workspace scripts for library-only builds (build:libs) and example dev servers - Fix React MediaProvider context conflicts by consolidating exports - Add esbuild-css-modules-plugin for CSS modules support in React package - Configure tsup for flattened output structure with CSS processing - Update package exports and imports for new @vjs-10/* scoped packages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-08-05 13:48:14 +00:00 · 2025-07-29 15:51:40 -07:00
parent 7403cc7281
commit 19c85fc2f8
17 changed files with 2133 additions and 190 deletions
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>VJS HTML Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "name": "html-demo",
+  "version": "1.0.0",
+  "description": "HTML example for Video.js 10",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vjs-10/html": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  }
+}
@@ -0,0 +1,11 @@
+import { defineVjsPlayer } from '@vjs-10/html';
+
+defineVjsPlayer();
+
+document.body.innerHTML = `
+  <media-provider>
+    <media-skin-default>
+      <video slot="media" src="https://www.w3schools.com/html/mov_bbb.mp4" muted></video>
+    </media-skin-default>
+  </media-provider>
+`;
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@vjs/html": ["../../packages/html/src"],
+      "@vjs/react": ["../../packages/react/src"],
+      "@vjs/core": ["../../packages/core/src"]
+    }
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export default defineConfig({
+  root: __dirname,
+});
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>VJS React Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,24 @@
+{
+  "name": "react-demo",
+  "version": "1.0.0",
+  "description": "React example for Video.js 10",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vjs-10/react": "*",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6", 
+    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0"
+  }
+}
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { MediaProvider, Video, MediaSkinDefault } from '@vjs-10/react';
+
+const DemoPlayer = () => {
+  return (
+    <MediaProvider>
+      <MediaSkinDefault>
+        {/* @ts-ignore */}
+        {/* <Video muted src="https://www.w3schools.com/html/mov_bbb.mp4" /> */}
+        <Video muted src="https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8" />
+      </MediaSkinDefault>
+    </MediaProvider>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <DemoPlayer />
+);
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@vjs/react": ["../../packages/react/src"],
+      "@vjs/html": ["../../packages/html/src"],
+      "@vjs/core": ["../../packages/core/src"]
+    }
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});