[ts][webcomponents] get/createSpineWidget to get/createSkeleton.

spine-ts/spine-webcomponents/example/app.html

@@ -411,7 +411,7 @@
         (async () => {
 
             /* SECTION 1 */
-            const widget1 = await spine.getSpineWidget("list").whenReady;
+            const widget1 = await spine.getSkeleton("list").whenReady;
 
             const setInteractionSectionOne = (itemName, trackNumber) => {
                 const divName = `${itemName}Div`;
@@ -501,7 +501,7 @@
             /* SECTION 2 */
             const btnNext2 = document.getElementById("btn-next-2");
 
-            const widget2 = await spine.getSpineWidget("pan").whenReady;
+            const widget2 = await spine.getSkeleton("pan").whenReady;
             const foodPiece1 = widget2.skeleton.findSlot(`food-piece-1`);
             const foodPiece2 = widget2.skeleton.findSlot(`food-piece-2`);
             const foodPiece3 = widget2.skeleton.findSlot(`food-piece-3`);
@@ -561,7 +561,7 @@
             /* SECTION 2 */
 
             /* SECTION 3 */
-            const widget3 = await spine.getSpineWidget("delivery").whenReady;
+            const widget3 = await spine.getSkeleton("delivery").whenReady;
             const btnNext3 = document.getElementById("btn-next-3");
             const box = widget3.skeleton.findSlot("box");
 
@@ -610,7 +610,7 @@
 
 
             /* SECTION 4 */
-            const widget4 = await spine.getSpineWidget("ready").whenReady;
+            const widget4 = await spine.getSkeleton("ready").whenReady;
 
             const slot4Bread = widget4.skeleton.findSlot("salad");
             widget4.addPointerSlotEventCallback(slot4Bread, (slot, event) => {

spine-ts/spine-webcomponents/example/game.html

@@ -94,8 +94,8 @@
             const containerGame = document.getElementById("container-game");
 
             (async () => {
-                const spineboy = spine.getSpineWidget("spineboy-game");
-                const windmill = spine.getSpineWidget("windmill-game");
+                const spineboy = spine.getSkeleton("spineboy-game");
+                const windmill = spine.getSkeleton("windmill-game");
                 await Promise.all([spineboy.whenReady, windmill.whenReady]);
 
                 spineboy.state.setAnimation(2, "aim", true);

spine-ts/spine-webcomponents/example/gui.html

@@ -57,7 +57,7 @@
 
     <script>
         (async () => {
-            const boi = await spine.getSpineWidget("boi").whenReady;
+            const boi = await spine.getSkeleton("boi").whenReady;
 
             const animations = boi.skeleton.data.animations.map(({ name }) => name);
             animations.push("none");

spine-ts/spine-webcomponents/example/login.html

@@ -88,7 +88,7 @@
     </div>
 
 	<script type="module">
-		import { getSpineWidget, MixBlend } from '../dist/esm/spine-webcomponents.mjs';
+		import { getSkeleton, MixBlend } from '../dist/esm/spine-webcomponents.mjs';
 
 		const mouseX = Smooth(0, 200);
         const mouseY = Smooth(0, 200);
@@ -96,7 +96,7 @@
         (async () => {
 
             const form = document.getElementById('loginForm');
-            const widgetButton = getSpineWidget("button-login");
+            const widgetButton = getSkeleton("button-login");
             await widgetButton.whenReady;
 
             widgetButton.skeleton.color.set(.85, .85, .85, 1);
@@ -134,7 +134,7 @@
 
             widgetButton.followSlot("CLICK ME", divText, { followScale: false });
 
-            const widget = getSpineWidget("spineboy-login");
+            const widget = getSkeleton("spineboy-login");
             await widget.whenReady;
 
             // default settings

spine-ts/spine-webcomponents/example/team.html

@@ -23,7 +23,7 @@
     </div>
 
 	<script type="module">
-		import { createSpineWidget } from '../dist/esm/spine-webcomponents.mjs';
+		import { createSkeleton } from '../dist/esm/spine-webcomponents.mjs';
 
 		const container = document.getElementById("team-container");
 
@@ -69,7 +69,7 @@
             div2.style.height = "150px";
             div2.style.border = "4px solid #333";
 
-            const widget = createSpineWidget({
+            const widget = createSkeleton({
                 identifier: member.skin,
                 atlasPath: "/assets/chibi-stickers-pma.atlas",
                 skeletonPath: "/assets/chibi-stickers.json",

spine-ts/spine-webcomponents/example/tutorial.html

@@ -564,7 +564,7 @@
 
         <div class="split-top split">
             <div class="split-left">
-                Assign an <code>identifier</code> to your widget to retrieve it using the <code>spine.getSpineWidget</code> function.
+                Assign an <code>identifier</code> to your widget to retrieve it using the <code>spine.getSkeleton</code> function.
                 You can easily access the <code>Skeleton</code> and <code>AnimationState</code> of your character, and use them as if you were working with <code>spine-webgl</code>.
                 <br>
                 <br>
@@ -582,7 +582,7 @@
 
         <script>
             (async () => {
-                const widget = await spine.getSpineWidget("raptor").whenReady;
+                const widget = await spine.getSkeleton("raptor").whenReady;
                 let isRoaring = false;
                 setInterval(() => {
                     const newAnimation = isRoaring ? "walk" : "roar";
@@ -608,7 +608,7 @@
 
 // using js, access the skeleton and the state asynchronously
 (async () => {
-    const widget = await spine.getSpineWidget("raptor").whenReady;
+    const widget = await spine.getSkeleton("raptor").whenReady;
     let isRoaring = false;
     setInterval(() => {
         const newAnimation = isRoaring ? "walk" : "roar";
@@ -667,7 +667,7 @@
         <script>
             (async () => {
                 {
-                    const widget = await spine.getSpineWidget("spineboy-change-animation").whenReady;
+                    const widget = await spine.getSkeleton("spineboy-change-animation").whenReady;
                     let toogleAnimation = false;
                     setInterval(() => {
                         const newAnimation = toogleAnimation ? "jump" : "death";
@@ -677,7 +677,7 @@
                 }
 
                 {
-                    const widget = await spine.getSpineWidget("spineboy-change-animation2").whenReady;
+                    const widget = await spine.getSkeleton("spineboy-change-animation2").whenReady;
                     let toogleAnimation = false;
                     setInterval(() => {
                         const newAnimation = toogleAnimation ? "jump" : "death";
@@ -713,7 +713,7 @@
 
 // using js, access the skeleton and the state asynchronously
 {
-    const widget = await spine.getSpineWidget("spineboy-change-animation").whenReady;
+    const widget = await spine.getSkeleton("spineboy-change-animation").whenReady;
     let toogleAnimation = false;
     setInterval(() => {
         const newAnimation = toogleAnimation ? "jump" : "death";
@@ -723,7 +723,7 @@
 }
 
 {
-    const widget = await spine.getSpineWidget("spineboy-change-animation2").whenReady;
+    const widget = await spine.getSkeleton("spineboy-change-animation2").whenReady;
     let toogleAnimation = false;
     setInterval(() => {
         const newAnimation = toogleAnimation ? "jump" : "death";
@@ -872,7 +872,7 @@
 
         <script>
             async function updateCelesteAnimations() {
-                const celesteAnimations = await spine.getSpineWidget("celeste-animations").whenReady;
+                const celesteAnimations = await spine.getSkeleton("celeste-animations").whenReady;
                 var celesteAnimationsTextArea = document.getElementById("celeste-animations-text-area");
                 celesteAnimations.setAttribute("animations", celesteAnimationsTextArea.value)
             }
@@ -924,7 +924,7 @@
 ...
 
 async function updateCelesteAnimations() {
-    const celesteAnimations = await spine.getSpineWidget("celeste-animations").whenReady;
+    const celesteAnimations = await spine.getSkeleton("celeste-animations").whenReady;
     var celesteAnimationsTextArea = document.getElementById("celeste-animations-text-area");
     celesteAnimations.setAttribute("animations", celesteAnimationsTextArea.value)
 }`);</script>
@@ -1006,7 +1006,7 @@ async function updateCelesteAnimations() {
 
                 <script>
                     (async () => {
-                        const widget = await spine.getSpineWidget("sack-debug").whenReady;
+                        const widget = await spine.getSkeleton("sack-debug").whenReady;
                         widget.skeleton.getRootBone().x += 50;
                     })();
                 </script>
@@ -1025,7 +1025,7 @@ async function updateCelesteAnimations() {
 ></spine-skeleton>
 ...
 (async () => {
-    const widget = await spine.getSpineWidget("sack-debug").whenReady;
+    const widget = await spine.getSkeleton("sack-debug").whenReady;
     widget.skeleton.getRootBone().x += 50;
 })();`
 );</script>
@@ -1352,7 +1352,7 @@ function removeDiv() {
         </div>
 
         <script>
-            const widget = spine.getSpineWidget("widget-loading");
+            const widget = spine.getSkeleton("widget-loading");
             async function reloadWidget(element) {
                 element.disabled = true;
                 await widget.whenReady;
@@ -1384,7 +1384,7 @@ function removeDiv() {
 
 ...
 
-const widget = spine.getSpineWidget("widget-loading");
+const widget = spine.getSkeleton("widget-loading");
 async function reloadWidget(element) {
     element.disabled = true;
     await widget.whenReady;
@@ -1926,7 +1926,7 @@ function toggleSpinner(element) {
                 Create two arrays, one for the skins and the other for the animations, and loop through them.
                 <br>
                 <br>
-                <code>spine.createSpineWidget</code> allows you to create a Spine widget.
+                <code>spine.createSkeleton</code> allows you to create a Spine widget.
                 <br>
                 <br>
                 By default, assets are loaded immediately. You can delay this by setting <code>manual-start="false"</code>.
@@ -1952,7 +1952,7 @@ function toggleSpinner(element) {
                         grid.appendChild(gridElement);
 
                         // create the widget
-                        const widgetSection = spine.createSpineWidget({
+                        const widgetSection = spine.createSkeleton({
                             atlasPath: "/assets/chibi-stickers-pma.atlas",
                             skeletonPath: "/assets/chibi-stickers.json",
                             animation,
@@ -2000,7 +2000,7 @@ skins.forEach((skin, i) => {
         grid.appendChild(gridElement);
 
         // create the widget
-        const widgetSection = spine.createSpineWidget({
+        const widgetSection = spine.createSkeleton({
             atlasPath: "/assets/chibi-stickers-pma.atlas",
             skeletonPath: "/assets/chibi-stickers.json",
             animation,
@@ -2075,7 +2075,7 @@ skins.forEach((skin, i) => {
 
                     <script>
                         (async () => {
-                            const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady;
+                            const raptorWidget = await spine.getSkeleton("coin-with-raptor").whenReady;
                             let raptorWalking = true;
                             raptorWidget.onScreenFunction = widget => {
                                 raptorWalking = !raptorWalking;
@@ -2109,7 +2109,7 @@ skins.forEach((skin, i) => {
 
 ...
 
-const raptorWidget = await spine.getSpineWidget("coin-with-raptor").whenReady;
+const raptorWidget = await spine.getSkeleton("coin-with-raptor").whenReady;
 let raptorWalking = true;
 raptorWidget.onScreenFunction = widget => {
     raptorWalking = !raptorWalking;
@@ -2168,7 +2168,7 @@ raptorWidget.onScreenFunction = widget => {
         </div>
 
         <script>
-            const dragon = spine.getSpineWidget("dragon");
+            const dragon = spine.getSkeleton("dragon");
             function loadPageDragon(pageIndex) {
                 if (!dragon.pages) {
                     dragon.pages = [];
@@ -2200,7 +2200,7 @@ raptorWidget.onScreenFunction = widget => {
 
 ...
 
-const dragon = spine.getSpineWidget("dragon");
+const dragon = spine.getSkeleton("dragon");
 function loadPageDragon(pageIndex) {
     if (!dragon.pages) {
         dragon.pages = [];
@@ -2265,7 +2265,7 @@ function loadPageDragon(pageIndex) {
             </div>
 
             <script>
-                const stretchyman = spine.getSpineWidget("stretchyman");
+                const stretchyman = spine.getSkeleton("stretchyman");
                 stretchyman.update = (delta, skeleton, state) => {
                     // skin logiv if widget is off screen
                     if (!stretchyman.onScreen) return;
@@ -2301,7 +2301,7 @@ function loadPageDragon(pageIndex) {
 
 ...
 
-const stretchyman = spine.getSpineWidget("stretchyman");
+const stretchyman = spine.getSkeleton("stretchyman");
 stretchyman.update = (canvas, delta, skeleton, state) => {
     // skin logiv if widget is off screen
     if (!stretchyman.onScreen) return;
@@ -2363,7 +2363,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
             <script>
                 (async () => {
                     const [tank, tank2] = await Promise.all([
-                        spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]);
+                        spine.getSkeleton("tank").whenReady, spine.getSkeleton("tank2").whenReady]);
 
                     tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
                         if (!tank.onScreen) return;
@@ -2402,7 +2402,7 @@ stretchyman.update = (canvas, delta, skeleton, state) => {
 ...
 
 const [tank, tank2] = await Promise.all([
-    spine.getSpineWidget("tank").whenReady, spine.getSpineWidget("tank2").whenReady]);
+    spine.getSkeleton("tank").whenReady, spine.getSkeleton("tank2").whenReady]);
 
 tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
     if (!tank.onScreen) return;
@@ -2485,7 +2485,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
 
                     <script>
                         (async () => {
-                            const celeste = spine.getSpineWidget("celeste");
+                            const celeste = spine.getSkeleton("celeste");
                             await celeste.whenReady;
                             celeste.state.setAnimation(0, "swing", true);
                         })();
@@ -2554,7 +2554,7 @@ tank.beforeUpdateWorldTransforms = (delta, skeleton, state) => {
 ...
 
 (async () => {
-    const celeste = spine.getSpineWidget("celeste");
+    const celeste = spine.getSkeleton("celeste");
     await celeste.whenReady;
     celeste.state.setAnimation(0, "swing", true);
 })();`);
@@ -3179,7 +3179,7 @@ const colorPicker = document.getElementById("color-picker");
 const darkPicker = document.getElementById("dark-picker");
 
 [0, 1].forEach(async (i) => {
-    const widget = await spine.getSpineWidget(`interactive${i}`).whenReady;
+    const widget = await spine.getSkeleton(`interactive${i}`).whenReady;
 
     widget.pointerEventCallback = (event) => {
         if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
@@ -3222,7 +3222,7 @@ const darkPicker = document.getElementById("dark-picker");
 ></spine-skeleton>
 
 [0, 1].forEach(async (i) => {
-    const widget = await spine.getSpineWidget(\`interactive\${i}\`).whenReady;
+    const widget = await spine.getSkeleton(\`interactive\${i}\`).whenReady;
 
     widget.pointerEventCallback = (event) => {
         if (event === "enter") widget.state.setAnimation(0, "emotes/hooray", true).mixDuration = .15;
@@ -3298,7 +3298,7 @@ const darkPicker = document.getElementById("dark-picker");
 
         <script>
             (async () => {
-                const widget = await spine.getSpineWidget("potty").whenReady;
+                const widget = await spine.getSkeleton("potty").whenReady;
                 widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true });
                 widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followVisibility: false, hideAttachment: true });
                 widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followVisibility: false, hideAttachment: true });
@@ -3325,7 +3325,7 @@ const darkPicker = document.getElementById("dark-picker");
 ...
 
 (async () => {
-    const widget = await spine.getSpineWidget("potty").whenReady;
+    const widget = await spine.getSkeleton("potty").whenReady;
     widget.followSlot("rain/rain-color", document.getElementById("rain/rain-color"), { followVisibility: false, hideAttachment: true });
     widget.followSlot("rain/rain-white", document.getElementById("rain/rain-white"), { followVisibility: false, hideAttachment: true });
     widget.followSlot("rain/rain-blue", document.getElementById("rain/rain-blue"), { followVisibility: false, hideAttachment: true });
@@ -3372,11 +3372,11 @@ const darkPicker = document.getElementById("dark-picker");
 
         <script>
             (async () => {
-                const widget = await spine.getSpineWidget("potty2").whenReady;
-                widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: false, hideAttachment: true });
-                widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followVisibility: false, hideAttachment: true });
-                widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followVisibility: false, hideAttachment: true });
-                widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
+                const widget = await spine.getSkeleton("potty2").whenReady;
+                widget.followSlot("rain/rain-color", spine.getSkeleton("potty2-1"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-white", spine.getSkeleton("potty2-2"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-blue", spine.getSkeleton("potty2-3"), { followVisibility: false, hideAttachment: true });
+                widget.followSlot("rain/rain-green", spine.getSkeleton("potty2-4"), { followVisibility: false, hideAttachment: true });
             })();
         </script>
 
@@ -3400,11 +3400,11 @@ const darkPicker = document.getElementById("dark-picker");
 ...
 
 (async () => {
-    const widget = await spine.getSpineWidget("potty2").whenReady;
-    widget.followSlot("rain/rain-color", spine.getSpineWidget("potty2-1"), { followVisibility: false, hideAttachment: true });
-    widget.followSlot("rain/rain-white", spine.getSpineWidget("potty2-2"), { followVisibility: false, hideAttachment: true });
-    widget.followSlot("rain/rain-blue", spine.getSpineWidget("potty2-3"), { followVisibility: false, hideAttachment: true });
-    widget.followSlot("rain/rain-green", spine.getSpineWidget("potty2-4"), { followVisibility: false, hideAttachment: true });
+    const widget = await spine.getSkeleton("potty2").whenReady;
+    widget.followSlot("rain/rain-color", spine.getSkeleton("potty2-1"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-white", spine.getSkeleton("potty2-2"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-blue", spine.getSkeleton("potty2-3"), { followVisibility: false, hideAttachment: true });
+    widget.followSlot("rain/rain-green", spine.getSkeleton("potty2-4"), { followVisibility: false, hideAttachment: true });
 })();`);</script>
             </code></pre>
         </div>

spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts

@@ -475,7 +475,7 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 	public debug = false;
 
 	/**
-	 * An identifier to obtain this widget using the {@link getSpineWidget} function.
+	 * An identifier to obtain this widget using the {@link getSkeleton} function.
 	 * This is useful when you need to interact with the widget using js.
 	 * Connected to `identifier` attribute.
 	 */
@@ -1325,11 +1325,21 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
 
 customElements.define("spine-skeleton", SpineWebComponentSkeleton);
 
-export function getSpineWidget (identifier: string): SpineWebComponentSkeleton {
+/**
+ * Return the first {@link SpineWebComponentSkeleton} with the given {@link SpineWebComponentSkeleton.identifier}
+ * @param identifier The {@link SpineWebComponentSkeleton.identifier} to search on the DOM
+ * @returns A skeleton web component instance with the given identifier
+ */
+export function getSkeleton (identifier: string): SpineWebComponentSkeleton {
 	return document.querySelector(`spine-skeleton[identifier=${identifier}]`) as SpineWebComponentSkeleton;
 }
 
-export function createSpineWidget (parameters: WidgetAttributes): SpineWebComponentSkeleton {
+/**
+ * Create a {@link SpineWebComponentSkeleton} with the given {@link WidgetAttributes}.
+ * @param parameters The options to pass to the {@link SpineWebComponentSkeleton}
+ * @returns The skeleton web component instance created
+ */
+export function createSkeleton (parameters: WidgetAttributes): SpineWebComponentSkeleton {
 	const widget = document.createElement("spine-skeleton") as SpineWebComponentSkeleton;
 
 	Object.entries(SpineWebComponentSkeleton.attributesDescription).forEach(entry => {