@spatialwalk/avatarkit 1.0.0-beta.10 → 1.0.0-beta.101

package/next.js

@@ -0,0 +1,187 @@
+/**
+ * Next.js plugin for @spatialwalk/avatarkit
+ * Handles WASM file configuration for both webpack and Turbopack (Next.js 15+/16+)
+ *
+ * Usage:
+ *   import { withAvatarkit } from '@spatialwalk/avatarkit/next'
+ *   export default withAvatarkit({ ...your next config... })
+ */
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { writeFileSync, readFileSync, readdirSync, mkdirSync, copyFileSync, existsSync, } from 'fs';
+// ── Locate SDK directory ──────────────────────────────────────────────
+// Walk up from this file (inside the SDK package) to find the package root.
+// This is reliable regardless of process.cwd(), monorepos, or hoisted deps.
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// Since this file IS inside the SDK package (at package root), __dirname is the SDK dir.
+const sdkDir = __dirname;
+const sdkDistDir = join(sdkDir, 'dist');
+// ── Embedded webpack loader ───────────────────────────────────────────
+// Fixes Emscripten's scriptDirectory: bundlers replace import.meta.url with
+// a build-time path that browsers can't use to locate WASM files.
+// This loader replaces it with the correct public path.
+function createLoaderCode(wasmPublicPath) {
+    return `module.exports = function(source) {
+  // Strategy 1: Replace assignment only (simpler, more robust)
+  var pattern1 = /scriptDirectory\\s*=\\s*new\\s+URL\\(\\s*"\\."\\s*,\\s*_scriptName\\s*\\)\\.href\\s*;/;
+  var result = source.replace(pattern1, 'scriptDirectory = "${wasmPublicPath}";');
+  if (result !== source) return result;
+
+  // Strategy 2: Full try/catch block (handles different catch syntax)
+  var pattern2 = /try\\s*\\{\\s*scriptDirectory\\s*=\\s*new\\s+URL\\(\\s*"\\."\\s*,\\s*_scriptName\\s*\\)\\.href\\s*;?\\s*\\}\\s*catch\\s*(\\([^)]*\\))?\\s*\\{\\s*\\}/;
+  result = source.replace(pattern2, 'scriptDirectory = "${wasmPublicPath}";');
+  if (result !== source) return result;
+
+  console.warn('[avatarkit] WARNING: scriptDirectory pattern not matched in', this.resourcePath);
+  return source;
+}
+`;
+}
+function ensureLoader(wasmPublicPath) {
+    const cacheDir = join(sdkDir, '.cache');
+    const loaderPath = join(cacheDir, 'wasm-script-dir-loader.cjs');
+    mkdirSync(cacheDir, { recursive: true });
+    writeFileSync(loaderPath, createLoaderCode(wasmPublicPath));
+    return loaderPath;
+}
+// ── Copy WASM files to public directory ───────────────────────────────
+// Works for both webpack and Turbopack: public/ files are served by Next.js
+function copyWasmToPublic(projectDir) {
+    const publicWasmDir = join(projectDir, 'public', '_avatarkit');
+    mkdirSync(publicWasmDir, { recursive: true });
+    try {
+        const files = readdirSync(sdkDistDir);
+        for (const file of files) {
+            if (file.startsWith('avatar_core_wasm') && file.endsWith('.wasm')) {
+                const src = join(sdkDistDir, file);
+                const dest = join(publicWasmDir, file);
+                copyFileSync(src, dest);
+            }
+        }
+    }
+    catch (err) {
+        console.warn('[avatarkit] Failed to copy WASM files:', err.message);
+        console.warn('[avatarkit] SDK dist dir:', sdkDistDir);
+    }
+}
+// ── Webpack plugin: copy WASM to build output ─────────────────────────
+// Emits WASM files into .next/static/chunks/ during webpack compilation.
+// This is needed in addition to public/ for standalone Docker deployments
+// where .next/static/ is copied but public/ may not be.
+class CopyWasmPlugin {
+    apply(compiler) {
+        compiler.hooks.thisCompilation.tap('AvatarkitCopyWasm', (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: 'AvatarkitCopyWasm',
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, () => {
+                try {
+                    const files = readdirSync(sdkDistDir);
+                    for (const file of files) {
+                        if (file.startsWith('avatar_core_wasm') && file.endsWith('.wasm')) {
+                            const content = readFileSync(join(sdkDistDir, file));
+                            compilation.emitAsset(`static/chunks/${file}`, new compiler.webpack.sources.RawSource(content));
+                        }
+                    }
+                }
+                catch (err) {
+                    console.warn('[avatarkit] CopyWasmPlugin error:', err.message);
+                }
+            });
+        });
+    }
+}
+// ── Detect project root from next.config location ─────────────────────
+// next.config.mjs is always at the project root. Since this module is imported
+// from next.config.mjs, we find the project root by walking up from import.meta.url
+// of the calling module. However, we can't access the caller's import.meta.url,
+// so we search for the nearest next.config.* file from the SDK location upwards.
+function findProjectRoot() {
+    let dir = process.cwd(); // fallback, but also check for next.config
+    const configNames = [
+        'next.config.mjs',
+        'next.config.js',
+        'next.config.ts',
+        'next.config.cjs',
+    ];
+    // Verify cwd has a next.config file
+    for (const name of configNames) {
+        if (existsSync(join(dir, name))) {
+            return dir;
+        }
+    }
+    // Fallback: search from SDK location upward
+    let searchDir = sdkDir;
+    while (searchDir !== dirname(searchDir)) {
+        for (const name of configNames) {
+            if (existsSync(join(searchDir, name))) {
+                return searchDir;
+            }
+        }
+        searchDir = dirname(searchDir);
+    }
+    return process.cwd();
+}
+// ── Main plugin ───────────────────────────────────────────────────────
+export function withAvatarkit(nextConfig = {}) {
+    const basePath = nextConfig.basePath || '';
+    const wasmPublicPath = `${basePath}/_avatarkit/`;
+    const loaderPath = ensureLoader(wasmPublicPath);
+    const projectRoot = findProjectRoot();
+    // Copy WASM files to public/_avatarkit/ (works for both webpack & Turbopack)
+    copyWasmToPublic(projectRoot);
+    return {
+        ...nextConfig,
+        // ── Turbopack configuration (Next.js 15+/16+) ──
+        turbopack: {
+            ...nextConfig.turbopack,
+            rules: {
+                ...nextConfig.turbopack?.rules,
+                '**/avatar_core_wasm*.js': {
+                    loaders: [loaderPath],
+                    as: '*.js',
+                },
+            },
+        },
+        // ── Webpack configuration ──
+        webpack: (config, context) => {
+            // 1. Fix: Next.js sets module.generator.asset.filename which breaks asset/inline
+            if (config.module.generator?.asset?.filename) {
+                const filename = config.module.generator.asset.filename;
+                delete config.module.generator.asset.filename;
+                config.module.generator['asset/resource'] = {
+                    ...config.module.generator['asset/resource'],
+                    filename,
+                };
+            }
+            // 2. Fix: Emscripten scriptDirectory derived from import.meta.url
+            config.module.rules.push({
+                test: /avatar_core_wasm.*\.js$/,
+                enforce: 'pre',
+                use: [{ loader: loaderPath }],
+            });
+            // 3. Copy WASM files to static/chunks/ (client build only, for standalone)
+            if (!context.isServer) {
+                config.plugins.push(new CopyWasmPlugin());
+            }
+            // Chain with user's webpack config
+            if (typeof nextConfig.webpack === 'function') {
+                return nextConfig.webpack(config, context);
+            }
+            return config;
+        },
+        // ── Headers: ensure WASM content-type ──
+        async headers() {
+            const userHeaders = typeof nextConfig.headers === 'function' ? await nextConfig.headers() : [];
+            return [
+                ...userHeaders,
+                {
+                    source: '/_avatarkit/:path*.wasm',
+                    headers: [{ key: 'Content-Type', value: 'application/wasm' }],
+                },
+            ];
+        },
+    };
+}
+export default withAvatarkit;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@spatialwalk/avatarkit",
   "type": "module",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.101",
   "packageManager": "pnpm@10.18.2",
-  "description": "SPAvatar SDK - 3D Gaussian Splatting Avatar Rendering SDK",
-  "author": "SPAvatar Team",
+  "description": "AvatarKit SDK - 3D Gaussian Splatting Avatar Rendering SDK",
+  "author": "AvatarKit Team",
   "license": "MIT",
   "keywords": [
     "avatar",
@@ -19,6 +19,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./vite": {
+      "types": "./vite.d.ts",
+      "import": "./vite.js"
+    },
+    "./next": {
+      "types": "./next.d.ts",
+      "import": "./next.js"
+    },
     "./*": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.js"
@@ -30,28 +38,50 @@
   "files": [
     "README.md",
     "CHANGELOG.md",
-    "dist"
+    "dist",
+    "vite.js",
+    "vite.d.ts",
+    "next.js",
+    "next.d.ts"
   ],
   "scripts": {
-    "build": "SDK_BUILD=true vite build --mode library",
+    "build": "SDK_BUILD=true vite build --mode library && npm run build:vite-plugin && npm run build:next-plugin",
+    "build:vite-plugin": "tsc vite.ts --outDir . --module esnext --target es2020 --moduleResolution bundler --esModuleInterop --skipLibCheck --declaration --declarationMap",
+    "build:next-plugin": "tsc next.ts --outDir . --module esnext --target es2020 --moduleResolution bundler --esModuleInterop --skipLibCheck --declaration --declarationMap",
     "dev": "vite build --mode library --watch",
+    "demo": "vite --config demo/vite.config.mjs",
+    "demo:benchmark": "vite --config benchmark-demo/vite.config.mjs",
+    "test:integration": "vite --config tests/integration-runner/vite.config.mjs",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "test": "cd tests && pnpm test",
     "test:watch": "cd tests && pnpm run test:watch",
-    "test:e2e": "cd tests && pnpm run test:e2e"
+    "test:e2e": "cd tests && pnpm run test:e2e",
+    "test:perf": "cd tests && pnpm run test:perf"
   },
   "peerDependencies": {
-    "@webgpu/types": "*"
+    "@webgpu/types": "*",
+    "next": ">=13.0.0",
+    "vite": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@bufbuild/protobuf": "^2.10.0",
     "@guiiai/logg": "^1.2.4",
-    "nanoid": "^5.1.6"
+    "nanoid": "^5.1.6",
+    "posthog-js": "^1.310.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.30",
     "@webgpu/types": "^0.1.65",
+    "tsx": "^4.20.6",
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^4.5.4"

package/vite.d.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from 'vite';
+/**
+ * Vite plugin for @spatialwalk/avatarkit
+ * Automatically handles WASM file configuration for development and production builds
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'vite'
+ * import { avatarkitVitePlugin } from '@spatialwalk/avatarkit/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     avatarkitVitePlugin()
+ *   ]
+ * })
+ * ```
+ */
+export declare function avatarkitVitePlugin(): Plugin;
+export default avatarkitVitePlugin;
+//# sourceMappingURL=vite.d.ts.map

package/vite.js

@@ -0,0 +1,126 @@
+import { copyFileSync, existsSync, writeFileSync, readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+/**
+ * Vite plugin for @spatialwalk/avatarkit
+ * Automatically handles WASM file configuration for development and production builds
+ *
+ * @example
+ * ```ts
+ * import { defineConfig } from 'vite'
+ * import { avatarkitVitePlugin } from '@spatialwalk/avatarkit/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     avatarkitVitePlugin()
+ *   ]
+ * })
+ * ```
+ */
+export function avatarkitVitePlugin() {
+    let rootDir;
+    return {
+        name: 'avatarkit-wasm',
+        // 保存项目根目录
+        configResolved(config) {
+            rootDir = config.root;
+        },
+        // 开发服务器 MIME 类型配置
+        configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+                if (req.url?.endsWith('.wasm')) {
+                    res.setHeader('Content-Type', 'application/wasm');
+                }
+                next();
+            });
+        },
+        // 构建时自动复制 WASM 文件和生成 headers
+        closeBundle() {
+            if (!rootDir)
+                return;
+            const wasmSourceDir = join(rootDir, 'node_modules/@spatialwalk/avatarkit/dist');
+            // 先查找并读取 JS glue 文件，提取它引用的 WASM 文件名
+            let wasmFileName = null;
+            if (existsSync(wasmSourceDir)) {
+                const files = readdirSync(wasmSourceDir);
+                const wasmJsFile = files.find((f) => f.startsWith('avatar_core_wasm') && f.endsWith('.js'));
+                if (wasmJsFile) {
+                    const wasmJsSource = join(wasmSourceDir, wasmJsFile);
+                    try {
+                        const jsContent = readFileSync(wasmJsSource, 'utf-8');
+                        // 从 JS 文件中提取 WASM 文件名
+                        // 匹配 avatar_core_wasm-{hash}.wasm 或 avatar_core_wasm.wasm
+                        // 使用更精确的正则，匹配带引号或不带引号的情况
+                        const wasmMatch = jsContent.match(/["'`]?avatar_core_wasm[-\w]*\.wasm["'`]?/g);
+                        if (wasmMatch && wasmMatch.length > 0) {
+                            // 取第一个匹配，去掉引号
+                            wasmFileName = wasmMatch[0].replace(/["'`]/g, '');
+                        }
+                    }
+                    catch (error) {
+                        console.warn('⚠️ [avatarkit] Could not read JS glue file:', error);
+                    }
+                }
+            }
+            // 如果从 JS 文件中找到了 WASM 文件名，使用它；否则回退到默认名称
+            const targetWasmName = wasmFileName || 'avatar_core_wasm.wasm';
+            const wasmSource = join(wasmSourceDir, targetWasmName);
+            const wasmDest = join(rootDir, `dist/assets/${targetWasmName}`);
+            const wasmJsDest = join(rootDir, 'dist/assets/avatar_core_wasm.js');
+            const headersDest = join(rootDir, 'dist/_headers');
+            // 复制 WASM 文件
+            if (existsSync(wasmSource)) {
+                copyFileSync(wasmSource, wasmDest);
+                console.log(`✅ [avatarkit] Copied WASM file to dist/assets/${targetWasmName}`);
+            }
+            else {
+                console.warn(`⚠️ [avatarkit] WASM file not found: ${wasmSource}`);
+                if (wasmFileName) {
+                    console.warn(`   Expected file: ${targetWasmName} (extracted from JS glue file)`);
+                }
+            }
+            // 复制 WASM JS glue 文件
+            if (existsSync(wasmSourceDir)) {
+                const files = readdirSync(wasmSourceDir);
+                const wasmJsFile = files.find((f) => f.startsWith('avatar_core_wasm') && f.endsWith('.js'));
+                if (wasmJsFile) {
+                    const wasmJsSource = join(wasmSourceDir, wasmJsFile);
+                    copyFileSync(wasmJsSource, wasmJsDest);
+                    console.log(`✅ [avatarkit] Copied WASM JS file to dist/assets/avatar_core_wasm.js (from ${wasmJsFile})`);
+                }
+                else {
+                    console.log('ℹ️ [avatarkit] WASM JS file not found (may be handled by Vite):', wasmSourceDir);
+                }
+            }
+            // 生成 _headers 文件（用于 Cloudflare Pages 等平台）
+            const headersContent = '/*.wasm\n  Content-Type: application/wasm\n';
+            writeFileSync(headersDest, headersContent);
+            console.log('✅ [avatarkit] Created _headers file for Cloudflare Pages');
+        },
+        // 自动配置 Vite 选项
+        config() {
+            return {
+                optimizeDeps: {
+                    exclude: ['@spatialwalk/avatarkit']
+                },
+                assetsInclude: ['**/*.wasm'],
+                build: {
+                    assetsInlineLimit: 0, // 确保 WASM 文件不被内联
+                    rollupOptions: {
+                        output: {
+                            assetFileNames: (assetInfo) => {
+                                // WASM 文件使用固定名称
+                                if (assetInfo.name?.endsWith('.wasm')) {
+                                    return 'assets/[name][extname]';
+                                }
+                                // 其他资源使用 hash
+                                return 'assets/[name]-[hash][extname]';
+                            }
+                        }
+                    }
+                }
+            };
+        }
+    };
+}
+// 默认导出
+export default avatarkitVitePlugin;