mason-sprite 0.1.0

package/dist/vue/index.js

@@ -0,0 +1,205 @@
+import { defineComponent as F, ref as w, onMounted as T, onBeforeUnmount as P, watch as k, openBlock as c, createElementBlock as u, normalizeStyle as d, normalizeClass as m, mergeDefaults as C } from "vue";
+const p = {
+  fps: 12,
+  loop: !0,
+  width: 128,
+  height: 128,
+  autoPlay: !0,
+  renderer: "css"
+};
+function S(i, t) {
+  return i * t;
+}
+function f(i, t) {
+  return {
+    row: Math.floor(i / t),
+    col: i % t
+  };
+}
+function I(i, t, r) {
+  const { row: e, col: o } = f(i, r), n = r <= 1 ? 0 : o / (r - 1) * 100, s = t <= 1 ? 0 : e / (t - 1) * 100;
+  return { x: n, y: s };
+}
+function x(i, t, r, e, o, n, s) {
+  const h = i.getContext("2d");
+  if (!h) return;
+  const a = t.naturalWidth / o, l = t.naturalHeight / e, { row: g, col: y } = f(r, o);
+  i.width = n, i.height = s, h.clearRect(0, 0, n, s), h.drawImage(
+    t,
+    y * a,
+    g * l,
+    a,
+    l,
+    0,
+    0,
+    n,
+    s
+  );
+}
+function v(i, t, r, e, o, n, s) {
+  const { x: h, y: a } = I(r, e, o);
+  i.style.backgroundImage = `url("${t}")`, i.style.backgroundRepeat = "no-repeat", i.style.backgroundSize = `${o * 100}% ${e * 100}%`, i.style.backgroundPosition = `${h}% ${a}%`, i.style.width = `${n}px`, i.style.height = `${s}px`, i.style.display = "inline-block";
+}
+function $(i) {
+  i.style.backgroundImage = "";
+}
+class L {
+  constructor(t) {
+    this.currentFrame = 0, this.isPlaying = !1, this.isLoaded = !1, this.rafId = null, this.lastTimestamp = 0, this.accumulatedTime = 0, this.image = null, this.target = null, this.listeners = /* @__PURE__ */ new Set(), this.destroyed = !1, this.tick = (r) => {
+      if (!this.isPlaying || this.destroyed) return;
+      this.lastTimestamp === 0 && (this.lastTimestamp = r);
+      const e = r - this.lastTimestamp;
+      this.lastTimestamp = r, this.accumulatedTime += e;
+      const o = 1e3 / this.options.fps;
+      for (; this.accumulatedTime >= o; )
+        this.accumulatedTime -= o, this.advanceFrame();
+      this.rafId = requestAnimationFrame(this.tick);
+    }, this.options = {
+      ...p,
+      ...t
+    }, this.loadImage();
+  }
+  attach(t) {
+    this.target = t, this.isLoaded && this.render(), this.options.autoPlay && this.play();
+  }
+  play() {
+    this.destroyed || this.isPlaying || (this.isPlaying = !0, this.lastTimestamp = 0, this.accumulatedTime = 0, this.rafId = requestAnimationFrame(this.tick), this.notify());
+  }
+  pause() {
+    this.isPlaying && (this.isPlaying = !1, this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.notify());
+  }
+  stop() {
+    this.pause(), this.currentFrame = 0, this.render(), this.notify();
+  }
+  goToFrame(t) {
+    var e, o;
+    const r = this.getTotalFrames();
+    this.currentFrame = Math.max(0, Math.min(t, r - 1)), this.render(), (o = (e = this.options).onFrameChange) == null || o.call(e, this.currentFrame), this.notify();
+  }
+  getState() {
+    return {
+      currentFrame: this.currentFrame,
+      totalFrames: this.getTotalFrames(),
+      isPlaying: this.isPlaying,
+      isLoaded: this.isLoaded
+    };
+  }
+  subscribe(t) {
+    return this.listeners.add(t), t(this.getState()), () => this.listeners.delete(t);
+  }
+  updateOptions(t) {
+    const r = this.options.src, e = this.options.fps;
+    this.options = { ...this.options, ...t }, t.src !== void 0 && t.src !== r ? this.loadImage() : this.isLoaded && this.render(), t.fps !== void 0 && t.fps !== e && (this.accumulatedTime = 0);
+  }
+  destroy() {
+    this.destroyed = !0, this.pause(), this.listeners.clear(), this.target && this.options.renderer === "css" && $(this.target), this.target = null, this.image = null;
+  }
+  getTotalFrames() {
+    return S(this.options.rows, this.options.cols);
+  }
+  loadImage() {
+    this.isLoaded = !1;
+    const t = new Image();
+    t.crossOrigin = "anonymous", t.onload = () => {
+      if (!this.destroyed) {
+        if (this.image = t, this.isLoaded = !0, !this.options.width || !this.options.height) {
+          const r = t.naturalWidth / this.options.cols, e = t.naturalHeight / this.options.rows;
+          this.options.width = r, this.options.height = e;
+        }
+        this.render(), this.notify(), this.options.autoPlay && this.target && this.play();
+      }
+    }, t.onerror = () => {
+      console.error(`[SpriteAnimator] Failed to load image: ${this.options.src}`);
+    }, t.src = this.options.src;
+  }
+  advanceFrame() {
+    var e, o, n, s;
+    const t = this.getTotalFrames(), r = this.currentFrame + 1;
+    r >= t ? this.options.loop ? this.currentFrame = 0 : (this.currentFrame = t - 1, this.pause(), (o = (e = this.options).onComplete) == null || o.call(e)) : this.currentFrame = r, this.render(), (s = (n = this.options).onFrameChange) == null || s.call(n, this.currentFrame), this.notify();
+  }
+  render() {
+    if (!this.target || !this.isLoaded) return;
+    const { src: t, rows: r, cols: e, width: o, height: n, renderer: s } = this.options;
+    s === "canvas" && this.target instanceof HTMLCanvasElement && this.image ? x(this.target, this.image, this.currentFrame, r, e, o, n) : s === "css" && this.target instanceof HTMLElement && v(this.target, t, this.currentFrame, r, e, o, n);
+  }
+  notify() {
+    const t = this.getState();
+    this.listeners.forEach((r) => r(t));
+  }
+}
+const A = /* @__PURE__ */ F({
+  __name: "Sprite",
+  props: /* @__PURE__ */ C({
+    src: {},
+    rows: {},
+    cols: {},
+    fps: {},
+    loop: { type: Boolean },
+    width: {},
+    height: {},
+    autoPlay: { type: Boolean },
+    renderer: {},
+    onComplete: { type: Function },
+    onFrameChange: { type: Function },
+    class: {}
+  }, p),
+  emits: ["complete", "frameChange"],
+  setup(i, { expose: t, emit: r }) {
+    const e = i, o = r, n = w(null);
+    let s = null;
+    function h() {
+      s == null || s.destroy(), s = new L({
+        src: e.src,
+        rows: e.rows,
+        cols: e.cols,
+        fps: e.fps,
+        loop: e.loop,
+        width: e.width,
+        height: e.height,
+        autoPlay: e.autoPlay,
+        renderer: e.renderer,
+        onComplete: () => o("complete"),
+        onFrameChange: (a) => o("frameChange", a)
+      }), n.value && s.attach(n.value);
+    }
+    return T(h), P(() => {
+      s == null || s.destroy(), s = null;
+    }), k(
+      () => [
+        e.src,
+        e.rows,
+        e.cols,
+        e.fps,
+        e.loop,
+        e.width,
+        e.height,
+        e.autoPlay,
+        e.renderer
+      ],
+      h
+    ), t({
+      play: () => s == null ? void 0 : s.play(),
+      pause: () => s == null ? void 0 : s.pause(),
+      stop: () => s == null ? void 0 : s.stop(),
+      goToFrame: (a) => s == null ? void 0 : s.goToFrame(a),
+      getState: () => s == null ? void 0 : s.getState()
+    }), (a, l) => i.renderer === "canvas" ? (c(), u("canvas", {
+      key: 0,
+      ref_key: "targetRef",
+      ref: n,
+      class: m(e.class),
+      style: d({ width: `${i.width}px`, height: `${i.height}px` })
+    }, null, 6)) : (c(), u("div", {
+      key: 1,
+      ref_key: "targetRef",
+      ref: n,
+      class: m(e.class),
+      role: "img",
+      "aria-label": "Sprite animation",
+      style: d({ width: `${i.width}px`, height: `${i.height}px` })
+    }, null, 6));
+  }
+});
+export {
+  A as Sprite
+};

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "mason-sprite",
+  "version": "0.1.0",
+  "description": "Lightweight sprite sheet animation for React, Vue, and Svelte",
+  "author": "mason <fe.hyunsu@gmail.com>",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react/index.d.ts",
+        "default": "./dist/react/index.js"
+      },
+      "require": {
+        "types": "./dist/react/index.d.cts",
+        "default": "./dist/react/index.cjs"
+      }
+    },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue/index.d.ts",
+        "default": "./dist/vue/index.js"
+      },
+      "require": {
+        "types": "./dist/vue/index.d.cts",
+        "default": "./dist/vue/index.cjs"
+      }
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/svelte/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FE-HyunSu/mason-sprite.git"
+  },
+  "homepage": "https://github.com/FE-HyunSu/mason-sprite#readme",
+  "bugs": {
+    "url": "https://github.com/FE-HyunSu/mason-sprite/issues"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:vue && pnpm run build:svelte",
+    "build:js": "tsup",
+    "build:vue": "vite build --config vite.vue.config.ts",
+    "build:svelte": "svelte-package --input src/svelte --output dist/svelte",
+    "clean": "rm -rf dist .svelte-kit",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "svelte": ">=4",
+    "vue": ">=3.3"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true },
+    "vue": { "optional": true },
+    "svelte": { "optional": true }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.28.0",
+    "@sveltejs/package": "^2.3.12",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/node": "^22.15.29",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-svelte": "^3.9.0",
+    "globals": "^16.2.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "svelte": "^5.33.14",
+    "svelte-check": "^4.2.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.1",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.16"
+  },
+  "keywords": [
+    "sprite",
+    "animation",
+    "spritesheet",
+    "react",
+    "vue",
+    "svelte",
+    "canvas",
+    "css"
+  ],
+  "license": "MIT",
+  "packageManager": "pnpm@9.15.9",
+  "engines": {
+    "node": ">=18"
+  }
+}