@chao-component/bag-animation-ui 1.0.1 → 1.0.3

package/dist/index.d.mts

@@ -1,9 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction }: {
+interface BagAnimationProps {
     isAnimating: boolean;
     setIsAnimating: (isAnimating: boolean) => void;
     doneFunction: () => void;
-}): react_jsx_runtime.JSX.Element;
+    frames?: string[];
+    defaultImage?: string;
+    defaultImageAlt?: string;
+    swipeHintText?: string;
+}
+declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText }: BagAnimationProps): react_jsx_runtime.JSX.Element;
 
-export { BagAnimation };
+/**
+ * 获取打包后的资源路径
+ * 这些资源会被打包到 dist/assets 目录中
+ *
+ * 使用方式：
+ * 1. 如果使用默认资源，可以通过 getAssetPath 获取路径
+ * 2. 或者直接传入自定义路径覆盖默认值
+ */
+declare function getAssetPath(relativePath: string): string;
+/**
+ * 默认的动画帧路径
+ */
+declare const defaultAnimationFrames: string[];
+/**
+ * 默认的图片路径
+ */
+declare const defaultImagePath = "/assets/bag.png";
+
+export { BagAnimation, type BagAnimationProps, defaultAnimationFrames, defaultImagePath, getAssetPath };

package/dist/index.d.ts

@@ -1,9 +1,32 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction }: {
+interface BagAnimationProps {
     isAnimating: boolean;
     setIsAnimating: (isAnimating: boolean) => void;
     doneFunction: () => void;
-}): react_jsx_runtime.JSX.Element;
+    frames?: string[];
+    defaultImage?: string;
+    defaultImageAlt?: string;
+    swipeHintText?: string;
+}
+declare function BagAnimation({ isAnimating, setIsAnimating, doneFunction, frames, defaultImage, defaultImageAlt, swipeHintText }: BagAnimationProps): react_jsx_runtime.JSX.Element;
 
-export { BagAnimation };
+/**
+ * 获取打包后的资源路径
+ * 这些资源会被打包到 dist/assets 目录中
+ *
+ * 使用方式：
+ * 1. 如果使用默认资源，可以通过 getAssetPath 获取路径
+ * 2. 或者直接传入自定义路径覆盖默认值
+ */
+declare function getAssetPath(relativePath: string): string;
+/**
+ * 默认的动画帧路径
+ */
+declare const defaultAnimationFrames: string[];
+/**
+ * 默认的图片路径
+ */
+declare const defaultImagePath = "/assets/bag.png";
+
+export { BagAnimation, type BagAnimationProps, defaultAnimationFrames, defaultImagePath, getAssetPath };

package/dist/index.js

@@ -775,21 +775,41 @@ var require_lib = __commonJS({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  BagAnimation: () => BagAnimation
+  BagAnimation: () => BagAnimation,
+  defaultAnimationFrames: () => defaultAnimationFrames,
+  defaultImagePath: () => defaultImagePath,
+  getAssetPath: () => getAssetPath
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/BagAnimation.tsx
 var import_react = require("react");
 var import_apng_js = __toESM(require_lib());
-var import_jsx_runtime = require("react/jsx-runtime");
-var frames = [
-  "/assets/main/bag/blind_box_spin.png",
-  "/assets/main/bag/blind_box_unopen.png",
-  "/assets/main/bag/blind_box_tear_off.png",
-  "/assets/main/bag/blind_box_open.png"
+
+// src/assets.ts
+function getAssetPath(relativePath) {
+  const cleanPath = relativePath.startsWith("/") ? relativePath.slice(1) : relativePath;
+  return `/assets/${cleanPath}`;
+}
+var defaultAnimationFrames = [
+  "/assets/bag/blind_box_spin.png",
+  "/assets/bag/blind_box_unopen.png",
+  "/assets/bag/blind_box_tear_off.png",
+  "/assets/bag/blind_box_open.png"
 ];
-function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
+var defaultImagePath = "/assets/bag.png";
+
+// src/BagAnimation.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function BagAnimation({
+  isAnimating,
+  setIsAnimating,
+  doneFunction,
+  frames = defaultAnimationFrames,
+  defaultImage = defaultImagePath,
+  defaultImageAlt = "Weedza Mystery Box",
+  swipeHintText = "Swipe to open"
+}) {
   const [frame, setFrame] = (0, import_react.useState)(0);
   const [isPausedAtThird, setIsPausedAtThird] = (0, import_react.useState)(false);
   const [thirdFrameProgress, setThirdFrameProgress] = (0, import_react.useState)(0);
@@ -802,8 +822,8 @@ function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
   const thirdFrameApngRef = (0, import_react.useRef)(null);
   const thirdFrameOriginalSizeRef = (0, import_react.useRef)(null);
   const hasTriggeredFourthFrame = (0, import_react.useRef)(false);
-  const mysteryBoxImage = "/assets/main/bag.png";
-  const mysteryBoxAlt = "Weedza Mystery Box";
+  const mysteryBoxImage = defaultImage;
+  const mysteryBoxAlt = defaultImageAlt;
   (0, import_react.useEffect)(() => {
     if (isAnimating) {
       setFrame(0);
@@ -1079,7 +1099,7 @@ function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Swipe to open" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: swipeHintText })
       ] }) })
     ] }),
     !isAnimating && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1094,5 +1114,8 @@ function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BagAnimation
+  BagAnimation,
+  defaultAnimationFrames,
+  defaultImagePath,
+  getAssetPath
 });

package/dist/index.mjs

@@ -769,14 +769,31 @@ var require_lib = __commonJS({
 // src/BagAnimation.tsx
 var import_apng_js = __toESM(require_lib());
 import { useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var frames = [
-  "/assets/main/bag/blind_box_spin.png",
-  "/assets/main/bag/blind_box_unopen.png",
-  "/assets/main/bag/blind_box_tear_off.png",
-  "/assets/main/bag/blind_box_open.png"
+
+// src/assets.ts
+function getAssetPath(relativePath) {
+  const cleanPath = relativePath.startsWith("/") ? relativePath.slice(1) : relativePath;
+  return `/assets/${cleanPath}`;
+}
+var defaultAnimationFrames = [
+  "/assets/bag/blind_box_spin.png",
+  "/assets/bag/blind_box_unopen.png",
+  "/assets/bag/blind_box_tear_off.png",
+  "/assets/bag/blind_box_open.png"
 ];
-function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
+var defaultImagePath = "/assets/bag.png";
+
+// src/BagAnimation.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BagAnimation({
+  isAnimating,
+  setIsAnimating,
+  doneFunction,
+  frames = defaultAnimationFrames,
+  defaultImage = defaultImagePath,
+  defaultImageAlt = "Weedza Mystery Box",
+  swipeHintText = "Swipe to open"
+}) {
   const [frame, setFrame] = useState(0);
   const [isPausedAtThird, setIsPausedAtThird] = useState(false);
   const [thirdFrameProgress, setThirdFrameProgress] = useState(0);
@@ -789,8 +806,8 @@ function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
   const thirdFrameApngRef = useRef(null);
   const thirdFrameOriginalSizeRef = useRef(null);
   const hasTriggeredFourthFrame = useRef(false);
-  const mysteryBoxImage = "/assets/main/bag.png";
-  const mysteryBoxAlt = "Weedza Mystery Box";
+  const mysteryBoxImage = defaultImage;
+  const mysteryBoxAlt = defaultImageAlt;
   useEffect(() => {
     if (isAnimating) {
       setFrame(0);
@@ -1066,7 +1083,7 @@ function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
             )
           }
         ),
-        /* @__PURE__ */ jsx("span", { children: "Swipe to open" })
+        /* @__PURE__ */ jsx("span", { children: swipeHintText })
       ] }) })
     ] }),
     !isAnimating && /* @__PURE__ */ jsx(
@@ -1080,5 +1097,8 @@ function BagAnimation({ isAnimating, setIsAnimating, doneFunction }) {
   ] });
 }
 export {
-  BagAnimation
+  BagAnimation,
+  defaultAnimationFrames,
+  defaultImagePath,
+  getAssetPath
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chao-component/bag-animation-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -9,9 +9,19 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./vite-plugin": "./vite-plugin.js",
+    "./webpack-plugin": "./webpack-plugin.js"
+  },
+  "files": [
+    "dist",
+    "vite-plugin.js",
+    "webpack-plugin.js",
+    "scripts"
+  ],
+  "directories": {
+    "assets": "dist/assets"
   },
-  "files": ["dist"],
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"

package/scripts/copy-assets.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+/**
+ * 安装脚本：自动复制资源文件到项目的 public 目录
+ * 
+ * 使用方法：
+ * 1. 在 package.json 中添加 postinstall 脚本：
+ *    "scripts": {
+ *      "postinstall": "node node_modules/@chao-component/bag-animation-ui/scripts/copy-assets.js"
+ *    }
+ * 
+ * 2. 或者手动运行：
+ *    node node_modules/@chao-component/bag-animation-ui/scripts/copy-assets.js
+ */
+
+const { copyFileSync, mkdirSync, readdirSync, existsSync } = require('fs');
+const { join, resolve } = require('path');
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) {
+    console.warn(`⚠️  Source directory not found: ${src}`);
+    return;
+  }
+  
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = readdirSync(src, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function main() {
+  const packageName = '@chao-component/bag-animation-ui';
+  const publicDir = process.argv[2] || 'public';
+  
+  // 查找包的位置
+  const packagePath = resolve(__dirname, '..', 'dist', 'assets');
+  const targetPath = resolve(process.cwd(), publicDir, 'assets');
+  
+  console.log(`📦 Copying assets from ${packageName}...`);
+  console.log(`   Source: ${packagePath}`);
+  console.log(`   Target: ${targetPath}`);
+  
+  if (existsSync(packagePath)) {
+    copyDir(packagePath, targetPath);
+    console.log(`✅ Assets copied successfully to ${publicDir}/assets`);
+  } else {
+    console.error(`❌ Error: Package assets not found at ${packagePath}`);
+    console.error(`   Make sure ${packageName} is installed correctly.`);
+    process.exit(1);
+  }
+}
+
+main();
+

package/vite-plugin.js

@@ -0,0 +1,86 @@
+/**
+ * Vite 插件：自动复制 @chao-component/bag-animation-ui 的资源文件到 public 目录
+ * 
+ * 使用方法：
+ * 在 vite.config.js/ts 中：
+ * 
+ * import { bagAnimationAssets } from '@chao-component/bag-animation-ui/vite-plugin';
+ * 
+ * export default {
+ *   plugins: [
+ *     bagAnimationAssets(),
+ *     // ... 其他插件
+ *   ]
+ * }
+ */
+
+import { copyFileSync, mkdirSync, readdirSync, existsSync, statSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) return;
+  
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = readdirSync(src, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+export function bagAnimationAssets(options = {}) {
+  const {
+    publicDir = 'public',
+    packageName = '@chao-component/bag-animation-ui'
+  } = options;
+
+  return {
+    name: 'bag-animation-assets',
+    apply: 'serve', // 只在开发服务器时应用
+    buildStart() {
+      try {
+        // 查找 node_modules 中的包
+        const packagePath = resolve(process.cwd(), 'node_modules', packageName, 'dist', 'assets');
+        const targetPath = resolve(process.cwd(), publicDir, 'assets');
+        
+        if (existsSync(packagePath)) {
+          copyDir(packagePath, targetPath);
+          console.log(`✅ [bag-animation-assets] Assets copied to ${publicDir}/assets`);
+        } else {
+          console.warn(`⚠️  [bag-animation-assets] Package assets not found at ${packagePath}`);
+        }
+      } catch (error) {
+        console.error(`❌ [bag-animation-assets] Error copying assets:`, error);
+      }
+    },
+    buildEnd() {
+      // 构建时也复制资源
+      try {
+        const packagePath = resolve(process.cwd(), 'node_modules', packageName, 'dist', 'assets');
+        const targetPath = resolve(process.cwd(), publicDir, 'assets');
+        
+        if (existsSync(packagePath)) {
+          copyDir(packagePath, targetPath);
+          console.log(`✅ [bag-animation-assets] Assets copied to ${publicDir}/assets`);
+        }
+      } catch (error) {
+        console.error(`❌ [bag-animation-assets] Error copying assets:`, error);
+      }
+    }
+  };
+}
+

package/webpack-plugin.js

@@ -0,0 +1,70 @@
+/**
+ * Webpack 插件：自动复制 @chao-component/bag-animation-ui 的资源文件到 public 目录
+ * 
+ * 使用方法：
+ * 在 webpack.config.js 中：
+ * 
+ * const { BagAnimationAssetsPlugin } = require('@chao-component/bag-animation-ui/webpack-plugin');
+ * 
+ * module.exports = {
+ *   plugins: [
+ *     new BagAnimationAssetsPlugin(),
+ *     // ... 其他插件
+ *   ]
+ * }
+ */
+
+const { copyFileSync, mkdirSync, readdirSync, existsSync } = require('fs');
+const { join, resolve } = require('path');
+
+function copyDir(src, dest) {
+  if (!existsSync(src)) return;
+  
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+  
+  const entries = readdirSync(src, { withFileTypes: true });
+  
+  for (const entry of entries) {
+    const srcPath = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+    
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+class BagAnimationAssetsPlugin {
+  constructor(options = {}) {
+    this.options = {
+      publicDir: options.publicDir || 'public',
+      packageName: options.packageName || '@chao-component/bag-animation-ui'
+    };
+  }
+
+  apply(compiler) {
+    compiler.hooks.beforeRun.tapAsync('BagAnimationAssetsPlugin', (compilation, callback) => {
+      try {
+        const packagePath = resolve(process.cwd(), 'node_modules', this.options.packageName, 'dist', 'assets');
+        const targetPath = resolve(process.cwd(), this.options.publicDir, 'assets');
+        
+        if (existsSync(packagePath)) {
+          copyDir(packagePath, targetPath);
+          console.log(`✅ [bag-animation-assets] Assets copied to ${this.options.publicDir}/assets`);
+        } else {
+          console.warn(`⚠️  [bag-animation-assets] Package assets not found at ${packagePath}`);
+        }
+      } catch (error) {
+        console.error(`❌ [bag-animation-assets] Error copying assets:`, error);
+      }
+      callback();
+    });
+  }
+}
+
+module.exports = { BagAnimationAssetsPlugin };
+