spine-expo-usedom 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TheSacredLipton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# spine-expo-usedom
+
+Run **Spine Web Components** in React Native (iOS/Android) using Expo's **DOM Components** (`'use dom'`).
+
+> ⚠️ **Note**: This package relies on Expo DOM Components, so it only supports **iOS** and **Android**. Web (react-native-web) is not supported.
+> Requires **Expo SDK 52** or higher.
+
+## 🚀 Features
+
+- **Expo DOM Components**: Seamlessly use Web technologies (WebGL, etc.) within native apps.
+- **Spine Web Components**: Play Spine animations using the official web components.
+
+## 📦 Installation
+
+```bash
+npm install spine-expo-usedom
+```
+
+## 💻 Usage
+
+### 1. Place Spine Assets
+Place your Spine assets (`.json` or `.skel`, `.atlas`, `.png`) in the `public` folder of your Expo project.
+
+Example structure:
+```
+my-app/
+├── public/
+│   └── spineboy/
+│       ├── spineboy-pro.json
+│       ├── spineboy.atlas
+│       └── spineboy.png
+├── App.tsx
+└── ...
+```
+
+### 2. Use the Component
+
+```tsx
+import SpineView from 'spine-expo-usedom';
+import { View } from 'react-native';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1 }}>
+      <SpineView
+        skeleton="/spineboy/spineboy-pro.json"
+        atlas="/spineboy/spineboy.atlas"
+        animation="run"
+        skin="default"
+        fit="contain"
+        dom={{ style: { width: '100%', height: '100%' } }}
+      />
+    </View>
+  );
+}
+```
+
+## 🔧 Props
+
+| Prop                    | Type                                          | Default      | Description                                                  |
+| ----------------------- | --------------------------------------------- | ------------ | ------------------------------------------------------------ |
+| `skeleton`              | `string`                                      | **Required** | Path to the skeleton data file (`.json` or `.skel`).         |
+| `atlas`                 | `string`                                      | **Required** | Path to the atlas file (`.atlas`).                           |
+| `animation`             | `string`                                      | `undefined`  | Name of the animation to play.                               |
+| `skin`                  | `string`                                      | `undefined`  | Name of the skin to use.                                     |
+| `fit`                   | `'cover' \| 'contain' \| 'loading' \| 'none'` | `undefined`  | How the skeleton should fit into the viewport.               |
+| `debug`                 | `boolean`                                     | `false`      | Whether to show debug information (bones, regions, etc.).    |
+| `preserveDrawingBuffer` | `boolean`                                     | `true`       | Whether to preserve the drawing buffer.                      |
+| `dom`                   | `DOMProps`                                    | `undefined`  | Props passed to the underlying Expo DOM Component container. |
+
+## 📝 License
+
+This project is licensed under the MIT License.

package/lib/commonjs/index.js

@@ -0,0 +1,67 @@
+"use strict";
+'use dom';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SpineView;
+var _react = _interopRequireWildcard(require("react"));
+require("@esotericsoftware/spine-webcomponents");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function SpineView({
+  dom,
+  skeleton,
+  atlas,
+  skin,
+  preserveDrawingBuffer = true,
+  ...rest
+}) {
+  // window.location.origin を使って絶対パスを生成
+  // process.env.EXPO_BASE_URL が "/" で始まらない場合を考慮してパスを結合
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+
+  // URLが相対パスの場合（/で始まる場合）、originを付与する処理を入れると親切かも
+  const getAbsolutePath = path => {
+    if (!path) return path;
+    if (path.startsWith('http')) return path;
+    if (path.startsWith('/')) return `${origin}${path}`;
+    return `${origin}/${path}`;
+  };
+  const absoluteSkeleton = getAbsolutePath(skeleton);
+  const absoluteAtlas = getAbsolutePath(atlas);
+  (0, _react.useEffect)(() => {
+    console.log('Current URL:', window.location.href);
+    console.log('Spine assets paths (absolute):', {
+      skeleton: absoluteSkeleton,
+      atlas: absoluteAtlas
+    });
+  }, []);
+
+  // skin="default" の場合、Spine Web Components でエラーになる場合があるため除外する
+  // また、React 19以降ではCustom Elementのプロパティとして渡される際、文字列のままだと
+  // コンポーネント内部で配列として扱われた時に1文字ずつ処理されてしまうため、明示的に配列化する
+  const skinProp = !skin || skin === 'default' ? undefined : skin.split(',');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: '100%',
+      height: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("spine-skeleton", {
+      skeleton: absoluteSkeleton,
+      atlas: absoluteAtlas,
+      skin: skinProp,
+      "preserve-drawing-buffer": preserveDrawingBuffer,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      ...rest
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Object","defineProperty","exports","value","default","SpineView","_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","dom","skeleton","atlas","skin","preserveDrawingBuffer","rest","origin","window","location","getAbsolutePath","path","startsWith","absoluteSkeleton","absoluteAtlas","useEffect","console","log","href","skinProp","undefined","split","jsx","style","width","height","display","justifyContent","alignItems","overflow","children"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/module/index.js

@@ -0,0 +1,62 @@
+"use strict";
+'use dom';
+
+import React, { useEffect } from 'react';
+import '@esotericsoftware/spine-webcomponents';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SpineView({
+  dom,
+  skeleton,
+  atlas,
+  skin,
+  preserveDrawingBuffer = true,
+  ...rest
+}) {
+  // window.location.origin を使って絶対パスを生成
+  // process.env.EXPO_BASE_URL が "/" で始まらない場合を考慮してパスを結合
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+
+  // URLが相対パスの場合（/で始まる場合）、originを付与する処理を入れると親切かも
+  const getAbsolutePath = path => {
+    if (!path) return path;
+    if (path.startsWith('http')) return path;
+    if (path.startsWith('/')) return `${origin}${path}`;
+    return `${origin}/${path}`;
+  };
+  const absoluteSkeleton = getAbsolutePath(skeleton);
+  const absoluteAtlas = getAbsolutePath(atlas);
+  useEffect(() => {
+    console.log('Current URL:', window.location.href);
+    console.log('Spine assets paths (absolute):', {
+      skeleton: absoluteSkeleton,
+      atlas: absoluteAtlas
+    });
+  }, []);
+
+  // skin="default" の場合、Spine Web Components でエラーになる場合があるため除外する
+  // また、React 19以降ではCustom Elementのプロパティとして渡される際、文字列のままだと
+  // コンポーネント内部で配列として扱われた時に1文字ずつ処理されてしまうため、明示的に配列化する
+  const skinProp = !skin || skin === 'default' ? undefined : skin.split(',');
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: '100%',
+      height: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx("spine-skeleton", {
+      skeleton: absoluteSkeleton,
+      atlas: absoluteAtlas,
+      skin: skinProp,
+      "preserve-drawing-buffer": preserveDrawingBuffer,
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      ...rest
+    })
+  });
+}
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","jsx","_jsx","SpineView","dom","skeleton","atlas","skin","preserveDrawingBuffer","rest","origin","window","location","getAbsolutePath","path","startsWith","absoluteSkeleton","absoluteAtlas","console","log","href","skinProp","undefined","split","style","width","height","display","justifyContent","alignItems","overflow","children"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";AAAA,SAAS;;AAET,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,OAAO,uCAAuC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwB/C,eAAe,SAASC,SAASA,CAAC;EAC9BC,GAAG;EACHC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJC,qBAAqB,GAAG,IAAI;EAC5B,GAAGC;AACS,CAAC,EAAE;EACf;EACA;EACA,MAAMC,MAAM,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,CAACC,QAAQ,CAACF,MAAM,GAAG,EAAE;;EAE1E;EACA,MAAMG,eAAe,GAAIC,IAAY,IAAK;IACtC,IAAI,CAACA,IAAI,EAAE,OAAOA,IAAI;IACtB,IAAIA,IAAI,CAACC,UAAU,CAAC,MAAM,CAAC,EAAE,OAAOD,IAAI;IACxC,IAAIA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,EAAE,OAAO,GAAGL,MAAM,GAAGI,IAAI,EAAE;IACnD,OAAO,GAAGJ,MAAM,IAAII,IAAI,EAAE;EAC9B,CAAC;EAED,MAAME,gBAAgB,GAAGH,eAAe,CAACR,QAAQ,CAAC;EAClD,MAAMY,aAAa,GAAGJ,eAAe,CAACP,KAAK,CAAC;EAE5CN,SAAS,CAAC,MAAM;IACZkB,OAAO,CAACC,GAAG,CAAC,cAAc,EAAER,MAAM,CAACC,QAAQ,CAACQ,IAAI,CAAC;IACjDF,OAAO,CAACC,GAAG,CAAC,gCAAgC,EAAE;MAAEd,QAAQ,EAAEW,gBAAgB;MAAEV,KAAK,EAAEW;IAAc,CAAC,CAAC;EACvG,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA;EACA,MAAMI,QAAQ,GAAI,CAACd,IAAI,IAAIA,IAAI,KAAK,SAAS,GAAIe,SAAS,GAAGf,IAAI,CAACgB,KAAK,CAAC,GAAG,CAAC;EAE5E,oBACIrB,IAAA;IAAKsB,KAAK,EAAE;MAAEC,KAAK,EAAE,MAAM;MAAEC,MAAM,EAAE,OAAO;MAAEC,OAAO,EAAE,MAAM;MAAEC,cAAc,EAAE,QAAQ;MAAEC,UAAU,EAAE,QAAQ;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAAAC,QAAA,eAEhI7B,IAAA;MACIG,QAAQ,EAAEW,gBAAiB;MAC3BV,KAAK,EAAEW,aAAc;MACrBV,IAAI,EAAEc,QAAS;MACf,2BAAyBb,qBAAsB;MAC/CgB,KAAK,EAAE;QAAEC,KAAK,EAAE,MAAM;QAAEC,MAAM,EAAE;MAAO,CAAE;MAAA,GACrCjB;IAAI,CACX;EAAC,CACD,CAAC;AAEd","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import '@esotericsoftware/spine-webcomponents';
+export interface SpineViewProps {
+    dom?: import('expo/dom').DOMProps;
+    /** Path to the skeleton data file (.json or .skel) */
+    skeleton: string;
+    /** Path to the atlas file (.atlas) */
+    atlas: string;
+    /** Name of the animation to play */
+    animation?: string;
+    /** Name of the skin to use */
+    skin?: string;
+    /** How the skeleton should fit into the viewport */
+    fit?: 'cover' | 'contain' | 'loading' | 'none';
+    /** Whether to show debug information */
+    debug?: boolean;
+    /** Whether to preserve the drawing buffer */
+    preserveDrawingBuffer?: boolean;
+    /** Raw assets data for embedding */
+    rawData?: string;
+    /** Any other attributes for spine-skeleton */
+    [key: string]: any;
+}
+export default function SpineView({ dom, skeleton, atlas, skin, preserveDrawingBuffer, ...rest }: SpineViewProps): React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,OAAO,UAAU,EAAE,QAAQ,CAAC;IAClC,sDAAsD;IACtD,QAAQ,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/C,wCAAwC;IACxC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,GAAG,EACH,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,qBAA4B,EAC5B,GAAG,IAAI,EACV,EAAE,cAAc,qBAuChB"}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "spine-expo-usedom",
+  "version": "0.1.0",
+  "description": "Spine player for Expo",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "start": "cd example && npx expo start",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "build": "bob build"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "spine",
+    "animation",
+    "use dom",
+    "web-components"
+  ],
+  "author": {
+    "name": "TheSacredLipton",
+    "url": "https://www.npmjs.com/~thesacredlipton"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TheSacredLipton/expo-spine-usedom.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TheSacredLipton/expo-spine-usedom/issues"
+  },
+  "homepage": "https://github.com/TheSacredLipton/expo-spine-usedom#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "expo": "~54.0.29",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.30.0",
+    "typescript": "~5.9.2"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "expo",
+      "prettier"
+    ]
+  },
+  "dependencies": {
+    "@esotericsoftware/spine-webcomponents": "^4.2.96"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,74 @@
+'use dom';
+
+import React, { useEffect } from 'react';
+import '@esotericsoftware/spine-webcomponents';
+
+export interface SpineViewProps {
+    dom?: import('expo/dom').DOMProps;
+    /** Path to the skeleton data file (.json or .skel) */
+    skeleton: string;
+    /** Path to the atlas file (.atlas) */
+    atlas: string;
+    /** Name of the animation to play */
+    animation?: string;
+    /** Name of the skin to use */
+    skin?: string;
+    /** How the skeleton should fit into the viewport */
+    fit?: 'cover' | 'contain' | 'loading' | 'none';
+    /** Whether to show debug information */
+    debug?: boolean;
+    /** Whether to preserve the drawing buffer */
+    preserveDrawingBuffer?: boolean;
+    /** Raw assets data for embedding */
+    rawData?: string;
+    /** Any other attributes for spine-skeleton */
+    [key: string]: any;
+}
+
+export default function SpineView({
+    dom,
+    skeleton,
+    atlas,
+    skin,
+    preserveDrawingBuffer = true,
+    ...rest
+}: SpineViewProps) {
+    // window.location.origin を使って絶対パスを生成
+    // process.env.EXPO_BASE_URL が "/" で始まらない場合を考慮してパスを結合
+    const origin = typeof window !== 'undefined' ? window.location.origin : '';
+
+    // URLが相対パスの場合（/で始まる場合）、originを付与する処理を入れると親切かも
+    const getAbsolutePath = (path: string) => {
+        if (!path) return path;
+        if (path.startsWith('http')) return path;
+        if (path.startsWith('/')) return `${origin}${path}`;
+        return `${origin}/${path}`;
+    };
+
+    const absoluteSkeleton = getAbsolutePath(skeleton);
+    const absoluteAtlas = getAbsolutePath(atlas);
+
+    useEffect(() => {
+        console.log('Current URL:', window.location.href);
+        console.log('Spine assets paths (absolute):', { skeleton: absoluteSkeleton, atlas: absoluteAtlas });
+    }, []);
+
+    // skin="default" の場合、Spine Web Components でエラーになる場合があるため除外する
+    // また、React 19以降ではCustom Elementのプロパティとして渡される際、文字列のままだと
+    // コンポーネント内部で配列として扱われた時に1文字ずつ処理されてしまうため、明示的に配列化する
+    const skinProp = (!skin || skin === 'default') ? undefined : skin.split(',');
+
+    return (
+        <div style={{ width: '100%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'hidden' }}>
+            {/* @ts-ignore: Custom element */}
+            <spine-skeleton
+                skeleton={absoluteSkeleton}
+                atlas={absoluteAtlas}
+                skin={skinProp}
+                preserve-drawing-buffer={preserveDrawingBuffer}
+                style={{ width: '100%', height: '100%' }}
+                {...rest}
+            />
+        </div>
+    );
+}