mason-sprite 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +5 -109
  2. package/package.json +26 -37
  3. package/LICENSE +0 -21
package/README.md CHANGED
@@ -2,132 +2,28 @@
2
2
 
3
3
  Lightweight sprite sheet animation for **React**, **Vue**, and **Svelte** — one package, subpath imports.
4
4
 
5
- Drop in a PNG or WebP sprite sheet, set `rows`, `cols`, and `fps` — and you're done. No Lottie, no timeline editor. Just a simple **CSS** or **Canvas** sprite player.
6
-
7
5
  ## Install
8
6
 
9
7
  ```bash
10
8
  npm install mason-sprite
11
9
  ```
12
10
 
13
- Peer dependencies (install only what you use):
14
-
15
- | Framework | Peers |
16
- |-----------|-------|
17
- | React | `react`, `react-dom` |
18
- | Vue 3 | `vue` |
19
- | Svelte | `svelte` |
20
-
21
11
  ## Usage
22
12
 
23
- ### Core engine (vanilla JS)
24
-
25
13
  ```ts
26
14
  import { SpriteAnimator } from 'mason-sprite';
27
-
28
- const animator = new SpriteAnimator({
29
- src: '/sprites/hero.png',
30
- rows: 2,
31
- cols: 5,
32
- fps: 10,
33
- loop: true,
34
- width: 140,
35
- height: 140,
36
- });
37
-
38
- animator.attach(document.getElementById('sprite')!);
39
- animator.play();
40
- ```
41
-
42
- ### React
43
-
44
- ```tsx
45
15
  import { Sprite } from 'mason-sprite/react';
46
-
47
- <Sprite
48
- src="/sprites/hero.png"
49
- rows={2}
50
- cols={5}
51
- fps={10}
52
- loop
53
- width={140}
54
- height={140}
55
- />
56
- ```
57
-
58
- ### Vue 3
59
-
60
- ```vue
61
- <script setup>
62
16
  import { Sprite } from 'mason-sprite/vue';
63
- </script>
64
-
65
- <template>
66
- <Sprite
67
- src="/sprites/hero.png"
68
- :rows="2"
69
- :cols="5"
70
- :fps="10"
71
- :loop="true"
72
- :width="140"
73
- :height="140"
74
- />
75
- </template>
17
+ import { Sprite } from 'mason-sprite/svelte';
76
18
  ```
77
19
 
78
- ### Svelte
20
+ See the [repository README](https://github.com/FE-HyunSu/sprite-motion) for full docs.
79
21
 
80
- ```svelte
81
- <script>
82
- import { Sprite } from 'mason-sprite/svelte';
83
- </script>
22
+ ## Migrating from @sprite-motion/*
84
23
 
85
- <Sprite
86
- src="/sprites/hero.png"
87
- rows={2}
88
- cols={5}
89
- fps={10}
90
- loop
91
- width={140}
92
- height={140}
93
- />
94
- ```
95
-
96
- ## Exports
97
-
98
- | Import path | Contents |
99
- |-------------|----------|
100
- | `mason-sprite` | `SpriteAnimator`, types, utilities |
101
- | `mason-sprite/react` | `Sprite`, `useSprite` |
102
- | `mason-sprite/vue` | `Sprite` component |
103
- | `mason-sprite/svelte` | `Sprite` component |
104
-
105
- ## Features
106
-
107
- - PNG / WebP sprite sheet support
108
- - CSS or Canvas rendering
109
- - `play`, `pause`, `stop`, `goToFrame` controls
110
- - Works with any uniform grid sprite sheet (`rows × cols`)
111
-
112
- ## Sprite Sheet Requirements
113
-
114
- - Uniform grid — every frame is the same size
115
- - PNG or WebP format
116
- - `rows × cols` = total frame count
24
+ This package replaces `@sprite-motion/core`, `@sprite-motion/react`, `@sprite-motion/vue`, and `@sprite-motion/svelte`.
117
25
 
118
- ## Development
119
-
120
- ```bash
121
- pnpm install
122
- pnpm build
123
- pnpm typecheck
124
- ```
125
-
126
- ## Publish
127
-
128
- ```bash
129
- npm publish
130
- ```
26
+ See [MIGRATION.md](https://github.com/FE-HyunSu/sprite-motion/blob/main/MIGRATION.md).
131
27
 
132
28
  ## License
133
29
 
package/package.json CHANGED
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "name": "mason-sprite",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Lightweight sprite sheet animation for React, Vue, and Svelte",
5
- "author": "mason <fe.hyunsu@gmail.com>",
6
5
  "type": "module",
7
6
  "main": "./dist/index.cjs",
8
7
  "module": "./dist/index.js",
@@ -46,29 +45,16 @@
46
45
  },
47
46
  "files": [
48
47
  "dist",
49
- "README.md",
50
- "LICENSE"
48
+ "README.md"
51
49
  ],
52
50
  "repository": {
53
51
  "type": "git",
54
- "url": "git+https://github.com/FE-HyunSu/mason-sprite.git"
52
+ "url": "git+https://github.com/FE-HyunSu/sprite-motion.git",
53
+ "directory": "packages/mason-sprite"
55
54
  },
56
- "homepage": "https://github.com/FE-HyunSu/mason-sprite#readme",
55
+ "homepage": "https://github.com/FE-HyunSu/sprite-motion#readme",
57
56
  "bugs": {
58
- "url": "https://github.com/FE-HyunSu/mason-sprite/issues"
59
- },
60
- "scripts": {
61
- "build": "pnpm run build:js && pnpm run build:vue && pnpm run build:svelte",
62
- "build:js": "tsup",
63
- "build:vue": "vite build --config vite.vue.config.ts",
64
- "build:svelte": "svelte-package --input src/svelte --output dist/svelte",
65
- "clean": "rm -rf dist .svelte-kit",
66
- "dev": "tsup --watch",
67
- "typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json",
68
- "lint": "eslint .",
69
- "format": "prettier --write .",
70
- "format:check": "prettier --check .",
71
- "prepublishOnly": "pnpm run build"
57
+ "url": "https://github.com/FE-HyunSu/sprite-motion/issues"
72
58
  },
73
59
  "peerDependencies": {
74
60
  "react": ">=17",
@@ -77,32 +63,31 @@
77
63
  "vue": ">=3.3"
78
64
  },
79
65
  "peerDependenciesMeta": {
80
- "react": { "optional": true },
81
- "react-dom": { "optional": true },
82
- "vue": { "optional": true },
83
- "svelte": { "optional": true }
66
+ "react": {
67
+ "optional": true
68
+ },
69
+ "react-dom": {
70
+ "optional": true
71
+ },
72
+ "vue": {
73
+ "optional": true
74
+ },
75
+ "svelte": {
76
+ "optional": true
77
+ }
84
78
  },
85
79
  "devDependencies": {
86
- "@eslint/js": "^9.28.0",
87
80
  "@sveltejs/package": "^2.3.12",
88
81
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
89
- "@types/node": "^22.15.29",
90
82
  "@types/react": "^19.1.6",
91
83
  "@types/react-dom": "^19.1.5",
92
84
  "@vitejs/plugin-vue": "^5.2.4",
93
- "eslint": "^9.28.0",
94
- "eslint-config-prettier": "^10.1.5",
95
- "eslint-plugin-svelte": "^3.9.0",
96
- "globals": "^16.2.0",
97
- "prettier": "^3.5.3",
98
- "prettier-plugin-svelte": "^3.4.0",
99
85
  "react": "^19.1.0",
100
86
  "react-dom": "^19.1.0",
101
87
  "svelte": "^5.33.14",
102
88
  "svelte-check": "^4.2.1",
103
89
  "tsup": "^8.5.0",
104
90
  "typescript": "^5.8.3",
105
- "typescript-eslint": "^8.33.1",
106
91
  "vite": "^6.3.5",
107
92
  "vite-plugin-dts": "^4.5.4",
108
93
  "vue": "^3.5.16"
@@ -118,8 +103,12 @@
118
103
  "css"
119
104
  ],
120
105
  "license": "MIT",
121
- "packageManager": "pnpm@9.15.9",
122
- "engines": {
123
- "node": ">=18"
106
+ "scripts": {
107
+ "build": "pnpm run build:js && pnpm run build:vue && pnpm run build:svelte",
108
+ "build:js": "tsup",
109
+ "build:vue": "vite build --config vite.vue.config.ts",
110
+ "build:svelte": "svelte-package --input src/svelte --output dist/svelte",
111
+ "typecheck": "tsc --noEmit && svelte-check --tsconfig ./tsconfig.json",
112
+ "dev": "tsup --watch"
124
113
  }
125
- }
114
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 mason
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.