[ts] Modularize player, add package.json files, fix up module paths.

spine-ts/package-lock.json

@@ -61,6 +61,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@esotericsoftware/spine-canvas": {
+      "resolved": "spine-canvas",
+      "link": true
+    },
+    "node_modules/@esotericsoftware/spine-core": {
+      "resolved": "spine-core",
+      "link": true
+    },
     "node_modules/@esotericsoftware/spine-webgl": {
       "resolved": "spine-webgl",
       "link": true
@@ -5398,13 +5406,17 @@
     "spine-canvas": {
       "name": "@esotericsoftware/spine-canvas",
       "version": "4.0.1",
-      "extraneous": true,
+      "license": "LicenseRef-LICENSE",
-      "license": "LicenseRef-LICENSE"
+      "devDependencies": {
+        "npx": "^10.2.2",
+        "rollup": "^2.56.2",
+        "rollup-plugin-dts": "^3.0.2",
+        "typescript": "^4.3.5"
+      }
     },
     "spine-core": {
       "name": "@esotericsoftware/spine-core",
       "version": "4.0.1",
-      "extraneous": true,
       "license": "LicenseRef-LICENSE"
     },
     "spine-webgl": {
@@ -5443,6 +5455,18 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "@esotericsoftware/spine-canvas": {
+      "version": "file:spine-canvas",
+      "requires": {
+        "npx": "^10.2.2",
+        "rollup": "^2.56.2",
+        "rollup-plugin-dts": "^3.0.2",
+        "typescript": "^4.3.5"
+      }
+    },
+    "@esotericsoftware/spine-core": {
+      "version": "file:spine-core"
+    },
     "@esotericsoftware/spine-webgl": {
       "version": "file:spine-webgl"
     },

spine-ts/package.json

@@ -3,7 +3,11 @@
   "version": "4.0.1",
   "description": "The official Spine Runtimes for the web.",
   "scripts": {
-    "build": "npx tsc -b --clean; tsc -b; npx rollup -c rollup.config.js --sourcemap;"
+    "build": "rm -rf build && npm run build:core && npm run build:canvas && npm run build:webgl && npm run build:player",
+    "build:core": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json --minify --sourcemap --outfile=build/spine-core.js --format=iife --global-name=\"spine\"",
+    "build:canvas": "npx esbuild --bundle spine-canvas/src/index.ts --tsconfig=spine-canvas/tsconfig.json --minify --sourcemap --outfile=build/spine-canvas.js --format=iife --global-name=\"spine\"",
+    "build:webgl": "npx esbuild --bundle spine-webgl/src/index.ts --tsconfig=spine-webgl/tsconfig.json --minify --sourcemap --outfile=build/spine-webgl.js --format=iife --global-name=\"spine\"",
+    "build:player": "npx esbuild --bundle spine-player/src/index.ts --tsconfig=spine-player/tsconfig.json --sourcemap --outfile=build/spine-player.js --format=iife --global-name=\"spine\""
   },
   "repository": {
     "type": "git",

spine-ts/spine-canvas/package.json

@@ -3,6 +3,10 @@
   "version": "4.0.1",
   "description": "The official Spine Runtimes for the web.",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
   "scripts": {},
   "repository": {
     "type": "git",

spine-ts/spine-canvas/src/AssetManager.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { AssetManagerBase, Downloader } from "spine-core";
+import { AssetManagerBase, Downloader } from "@esotericsoftware/spine-core"
 import { CanvasTexture } from "./CanvasTexture";
 
 export class AssetManager extends AssetManagerBase {

spine-ts/spine-canvas/src/CanvasTexture.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Texture, TextureFilter, TextureWrap } from "spine-core";
+import { Texture, TextureFilter, TextureWrap } from "@esotericsoftware/spine-core";
 
 export class CanvasTexture extends Texture {
 	constructor(image: HTMLImageElement) {

spine-ts/spine-canvas/src/SkeletonRenderer.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Utils, Color, Skeleton, RegionAttachment, TextureAtlasRegion, BlendMode, MeshAttachment, Slot } from "spine-core";
+import { Utils, Color, Skeleton, RegionAttachment, TextureAtlasRegion, BlendMode, MeshAttachment, Slot } from "@esotericsoftware/spine-core";
 import { CanvasTexture } from "./CanvasTexture";
 
 export class SkeletonRenderer {

spine-ts/spine-canvas/src/index.ts

@@ -2,7 +2,7 @@ export * from "./AssetManager";
 export * from "./CanvasTexture";
 export * from "./SkeletonRenderer";
 
-export * from "spine-core";
+export * from "@esotericsoftware/spine-core"
 
 // Before modularization, we would expose spine-core on the global
 // `spine` object, and spine-canvas on the global `spine.canvas` object.
@@ -23,9 +23,5 @@ export * from "spine-core";
 //
 // This will break if esbuild renames the variable `src_exports` pointing to
 // the exports object.
-declare global {
-	var spine: any;
-}
-
 let exports = eval("src_exports");
-exports.canvas = exports;
+if (exports) exports.canvas = exports;

spine-ts/spine-canvas/tsconfig.json

@@ -5,7 +5,7 @@
 		"rootDir": "./src",
 		"outDir": "./dist",
 		"paths": {
-			"spine-core": [
+			"@esotericsoftware/spine-core": [
 				"../spine-core/src"
 			]
 		}

spine-ts/spine-core/package.json

@@ -3,6 +3,10 @@
   "version": "4.0.1",
   "description": "The official Spine Runtimes for the web.",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
   "scripts": {},
   "repository": {
     "type": "git",

spine-ts/spine-player/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@esotericsoftware/spine-player",
+  "version": "4.0.1",
+  "description": "The official Spine Runtimes for the web.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/esotericsoftware/spine-runtimes.git"
+  },
+  "keywords": [
+    "gamedev",
+    "animations",
+    "2d",
+    "spine",
+    "game-dev",
+    "runtimes",
+    "skeletal"
+  ],
+  "author": "Esoteric Software LLC",
+  "license": "LicenseRef-LICENSE",
+  "bugs": {
+    "url": "https://github.com/esotericsoftware/spine-runtimes/issues"
+  },
+  "homepage": "https://github.com/esotericsoftware/spine-runtimes#readme"
+}

spine-ts/spine-player/src/PlayerEditor.ts

@@ -27,12 +27,11 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-declare function CodeMirror (el: Element, config: any): void;
+declare function CodeMirror(el: Element, config: any): void;
 
-module spine {
+export class SpinePlayerEditor {
-	export class SpinePlayerEditor {
+	private static DEFAULT_CODE =
-		private static DEFAULT_CODE =
+		`
-			`
 <script src="https://esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
 <link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/4.0/spine-player.css">
 
@@ -46,72 +45,71 @@ new spine.SpinePlayer("player-container", {
 </script>
 		`.trim();
 
-		private prefix: string =
+	private prefix: string =
-			`<html>
+		`<html>
 <head>
 <style>
 body { margin: 0px; }
 </style>
 </head>
 <body>`.trim()
-		private postfix: string = `</body>`;
+	private postfix: string = `</body>`;
-		private code: any;
+	private code: any;
-		private player: HTMLIFrameElement;
+	private player: HTMLIFrameElement;
 
-		constructor (parent: HTMLElement) {
+	constructor(parent: HTMLElement) {
-			this.render(parent);
+		this.render(parent);
-		}
+	}
 
-		private render (parent: HTMLElement) {
+	private render(parent: HTMLElement) {
-			let dom = /*html*/`
+		let dom = /*html*/`
 				<div class="spine-player-editor-container">
 					<div class="spine-player-editor-code"></div>
 					<iframe class="spine-player-editor-player"></iframe>
 				</div>
 			`;
-			parent.innerHTML = dom;
+		parent.innerHTML = dom;
-			let codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
+		let codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
-			this.player = parent.getElementsByClassName("spine-player-editor-player")[0] as HTMLIFrameElement;
+		this.player = parent.getElementsByClassName("spine-player-editor-player")[0] as HTMLIFrameElement;
 
-			requestAnimationFrame(() => {
+		requestAnimationFrame(() => {
-				this.code = CodeMirror(codeElement, {
+			this.code = CodeMirror(codeElement, {
-					lineNumbers: true,
+				lineNumbers: true,
-					tabSize: 3,
+				tabSize: 3,
-					indentUnit: 3,
+				indentUnit: 3,
-					indentWithTabs: true,
+				indentWithTabs: true,
-					scrollBarStyle: "native",
+				scrollBarStyle: "native",
-					mode: "htmlmixed",
+				mode: "htmlmixed",
-					theme: "monokai"
+				theme: "monokai"
-				});
+			});
-				this.code.on("change", () => {
+			this.code.on("change", () => {
-					this.startPlayer();
+				this.startPlayer();
-				});
+			});
 
-				this.setCode(SpinePlayerEditor.DEFAULT_CODE);
+			this.setCode(SpinePlayerEditor.DEFAULT_CODE);
-			})
+		})
-		}
+	}
 
-		setPreAndPostfix (prefix: string, postfix: string) {
+	setPreAndPostfix(prefix: string, postfix: string) {
-			this.prefix = prefix;
+		this.prefix = prefix;
-			this.postfix = postfix;
+		this.postfix = postfix;
-			this.startPlayer()
+		this.startPlayer()
-		}
+	}
 
-		setCode (code: string) {
+	setCode(code: string) {
-			this.code.setValue(code);
+		this.code.setValue(code);
-			this.startPlayer();
+		this.startPlayer();
-		}
+	}
 
-		private timerId = 0;
+	private timerId = 0;
-		startPlayer () {
+	startPlayer() {
-			clearTimeout(this.timerId);
+		clearTimeout(this.timerId);
-			this.timerId = setTimeout(() => {
+		this.timerId = setTimeout(() => {
-				let code = this.code.getDoc().getValue();
+			let code = this.code.getDoc().getValue();
-				code = this.prefix + code + this.postfix;
+			code = this.prefix + code + this.postfix;
-				code = window.btoa(code);
+			code = window.btoa(code);
-				this.player.src = "";
+			this.player.src = "";
-				this.player.src = "data:text/html;base64," + code;
+			this.player.src = "data:text/html;base64," + code;
-			}, 500);
+		}, 500);
-		}
 	}
 }

spine-ts/spine-player/src/index.ts

@@ -0,0 +1,27 @@
+export * from './Player';
+export * from './PlayerEditor';
+
+export * from "@esotericsoftware/spine-core";
+export * from "@esotericsoftware/spine-webgl";
+
+// Before modularization, we would expose spine-core on the global
+// `spine` object, and spine-webgl on the global `spine.webgl` object.
+// This was used by clients when including spine-webgl via <script src="spine-webgl.js">
+// 
+// Now with modularization and using esbuild for bundling, we need to emulate this old
+// behaviour as to not break old clients.
+//
+// We pass `--global-name=spine` to esbuild. This will create an object containing
+// all exports and assign it to the global variable called `spine`.
+//
+// That solves half the issue. We also need to assign the exports object to 
+// `spine.webgl`. esbuild creates a local variable called `scr_exports` pointing
+// to the exports object. We get to it via eval, then assign it to itself, on a new
+// property called `webgl`. The client can then access the APIs through `spine` and
+// `spine.webgl` as before (with the caveat that both spine-core and spine-webgl are
+// now in `spine` and `spine.webgl`).
+//
+// This will break if esbuild renames the variable `src_exports` pointing to
+// the exports object.
+let exports = eval("src_exports");
+if (exports) exports.webgl = exports;

spine-ts/spine-player/tsconfig.json

@@ -0,0 +1,30 @@
+{
+	"extends": "../tsconfig.base.json",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"rootDir": "./src",
+		"outDir": "./dist",
+		"paths": {
+			"@esotericsoftware/spine-core": [
+				"../spine-core/src"
+			],
+			"@esotericsoftware/spine-webgl": [
+				"../spine-webgl/src"
+			]
+		}
+	},
+	"include": [
+		"**/*.ts"
+	],
+	"exclude": [
+		"dist/**/*.d.ts"
+	],
+	"references": [
+		{
+			"path": "../spine-core"
+		},
+		{
+			"path": "../spine-webgl"
+		}
+	]
+}

spine-ts/spine-webgl/package.json

@@ -3,6 +3,10 @@
   "version": "4.0.1",
   "description": "The official Spine Runtimes for the web.",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
   "scripts": {},
   "repository": {
     "type": "git",

spine-ts/spine-webgl/src/AssetManager.ts

@@ -27,14 +27,15 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { AssetManagerBase, Downloader } from "spine-core";
+import { AssetManagerBase, Downloader } from "@esotericsoftware/spine-core"
 import { ManagedWebGLRenderingContext } from "./WebGL";
+import { GLTexture } from "./GLTexture";
 
 
 export class AssetManager extends AssetManagerBase {
 	constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "", downloader: Downloader = null) {
 		super((image: HTMLImageElement | ImageBitmap) => {
-			return new spine.webgl.GLTexture(context, image);
+			return new GLTexture(context, image);
 		}, pathPrefix, downloader);
 	}
 }

spine-ts/spine-webgl/src/GLTexture.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Texture, Disposable, Restorable, TextureFilter, TextureWrap } from "spine-core";
+import { Texture, Disposable, Restorable, TextureFilter, TextureWrap } from "@esotericsoftware/spine-core";
 import { ManagedWebGLRenderingContext } from "./WebGL";
 
 export class GLTexture extends Texture implements Disposable, Restorable {

spine-ts/spine-webgl/src/Input.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Pool } from "spine-core";
+import { Pool } from "@esotericsoftware/spine-core";
 
 export class Input {
 	element: HTMLElement;
@@ -38,7 +38,7 @@ export class Input {
 	private listeners = new Array<InputListener>();
 
 	touchesPool = new Pool<Touch>(() => {
-		return new spine.webgl.Touch(0, 0, 0);
+		return new Touch(0, 0, 0);
 	});
 
 	constructor(element: HTMLElement) {

spine-ts/spine-webgl/src/LoadingScreen.ts

@@ -27,6 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
+import { Color, TimeKeeper } from "@esotericsoftware/spine-core";
 import { GLTexture } from "./GLTexture";
 import { ResizeMode, SceneRenderer } from "./SceneRenderer";
 
@@ -44,9 +45,9 @@ export class LoadingScreen {
 	private angle = 0;
 	private fadeOut = 0;
 	private fadeIn = 0;
-	private timeKeeper = new spine.TimeKeeper();
+	private timeKeeper = new TimeKeeper();
-	backgroundColor = new spine.Color(0.135, 0.135, 0.135, 1);
+	backgroundColor = new Color(0.135, 0.135, 0.135, 1);
-	private tempColor = new spine.Color();
+	private tempColor = new Color();
 
 	constructor(renderer: SceneRenderer) {
 		this.renderer = renderer;

spine-ts/spine-webgl/src/Mesh.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Disposable, Restorable } from "spine-core";
+import { Disposable, Restorable } from "@esotericsoftware/spine-core";
 import { Shader } from "./Shader";
 import { ManagedWebGLRenderingContext } from "./WebGL";
 

spine-ts/spine-webgl/src/PolygonBatcher.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Disposable } from "spine-core";
+import { Disposable } from "@esotericsoftware/spine-core";
 import { GLTexture } from "./GLTexture";
 import { Mesh, Position2Attribute, ColorAttribute, TexCoordAttribute, Color2Attribute } from "./Mesh";
 import { Shader } from "./Shader";

spine-ts/spine-webgl/src/SceneRenderer.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Color, Disposable, Skeleton, MathUtils, TextureAtlasRegion } from "spine-core";
+import { Color, Disposable, Skeleton, MathUtils, TextureAtlasRegion } from "@esotericsoftware/spine-core";
 import { OrthoCamera } from "./Camera";
 import { GLTexture } from "./GLTexture";
 import { PolygonBatcher } from "./PolygonBatcher";

spine-ts/spine-webgl/src/Shader.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Disposable, Restorable } from "spine-core";
+import { Disposable, Restorable } from "@esotericsoftware/spine-core";
 import { ManagedWebGLRenderingContext } from "./WebGL";
 
 export class Shader implements Disposable, Restorable {

spine-ts/spine-webgl/src/ShapeRenderer.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Disposable, Color, Vector2, MathUtils } from "spine-core";
+import { Disposable, Color, Vector2, MathUtils } from "@esotericsoftware/spine-core";
 import { Mesh, Position2Attribute, ColorAttribute } from "./Mesh";
 import { Shader } from "./Shader";
 import { ManagedWebGLRenderingContext } from "./WebGL";

spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Disposable, Color, SkeletonBounds, Utils, Skeleton, RegionAttachment, MeshAttachment, PathAttachment, ClippingAttachment } from "spine-core";
+import { Disposable, Color, SkeletonBounds, Utils, Skeleton, RegionAttachment, MeshAttachment, PathAttachment, ClippingAttachment } from "@esotericsoftware/spine-core";
 import { ShapeRenderer } from "./ShapeRenderer";
 import { ManagedWebGLRenderingContext } from "./WebGL";
 

spine-ts/spine-webgl/src/SkeletonRenderer.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { NumberArrayLike, VertexEffect, Color, SkeletonClipping, Vector2, Utils, Skeleton, BlendMode, RegionAttachment, TextureAtlasRegion, MeshAttachment, ClippingAttachment } from "spine-core";
+import { NumberArrayLike, VertexEffect, Color, SkeletonClipping, Vector2, Utils, Skeleton, BlendMode, RegionAttachment, TextureAtlasRegion, MeshAttachment, ClippingAttachment } from "@esotericsoftware/spine-core";
 import { GLTexture } from "./GLTexture";
 import { PolygonBatcher } from "./PolygonBatcher";
 import { ManagedWebGLRenderingContext, WebGLBlendModeConverter } from "./WebGL";
@@ -120,7 +120,7 @@ export class SkeletonRenderer {
 				renderable.numVertices = (mesh.worldVerticesLength >> 1);
 				renderable.numFloats = renderable.numVertices * clippedVertexSize;
 				if (renderable.numFloats > renderable.vertices.length) {
-					renderable.vertices = this.vertices = spine.Utils.newFloatArray(renderable.numFloats);
+					renderable.vertices = this.vertices = Utils.newFloatArray(renderable.numFloats);
 				}
 				mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, renderable.vertices, 0, clippedVertexSize);
 				triangles = mesh.triangles;

spine-ts/spine-webgl/src/WebGL.ts

@@ -27,7 +27,7 @@
  * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  *****************************************************************************/
 
-import { Restorable, BlendMode } from "spine-core";
+import { Restorable, BlendMode } from "@esotericsoftware/spine-core";
 
 export class ManagedWebGLRenderingContext {
 	public canvas: HTMLCanvasElement | OffscreenCanvas;

spine-ts/spine-webgl/src/index.ts

@@ -14,7 +14,7 @@ export * from './SkeletonRenderer';
 export * from './Vector3';
 export * from './WebGL';
 
-export * from "spine-core";
+export * from "@esotericsoftware/spine-core";
 
 // Before modularization, we would expose spine-core on the global
 // `spine` object, and spine-webgl on the global `spine.webgl` object.
@@ -35,9 +35,5 @@ export * from "spine-core";
 //
 // This will break if esbuild renames the variable `src_exports` pointing to
 // the exports object.
-declare global {
-	var spine: any;
-}
-
 let exports = eval("src_exports");
-exports.webgl = exports;
+if (exports) exports.webgl = exports;

spine-ts/spine-webgl/tsconfig.json

@@ -5,7 +5,7 @@
 		"rootDir": "./src",
 		"outDir": "./dist",
 		"paths": {
-			"spine-core": [
+			"@esotericsoftware/spine-core": [
 				"../spine-core/src"
 			]
 		}

spine-ts/tsconfig.base.json

@@ -10,7 +10,6 @@
 			"ES2015"
 		],
 		"declaration": true,
-		"declarationMap": true,
 		"composite": true,
 		"moduleResolution": "node",
 	}

spine-ts/tsconfig.json

@@ -6,6 +6,12 @@
 		},
 		{
 			"path": "./spine-canvas"
+		},
+		{
+			"path": "./spine-webgl"
+		},
+		{
+			"path": "./spine-player"
 		}
 	]
 }