playhtml 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
 
+## 2.0.2 - 2023-08-23
+
+- handle deprecated import version by using a timeout. This adds a significant delay to the initialization of any client using the old method and logs a warning.
+
 ## 2.0.0 - 2023-08-23
 
 - **BREAKING CHANGE**: Changed the initializing of playhtml to be an explicit call of `playhtml.init()` from just a normal import. You can still use the old code if you pin the import to any version 1.3.1 (e.g. use `https://unpkg.com/playhtml@1.3.1` as the import source).

package/README.md

@@ -1,8 +1,8 @@
-# playhtml 🛝🌐
+# <a href="https://playhtml.fun">playhtml</a> 🛝🌐 [![npm release](https://img.shields.io/npm/v/playhtml?color=%23ff980c)](https://www.npmjs.com/package/playhtml) [![Downloads](https://img.shields.io/npm/dm/playhtml)](https://www.npmjs.com/package/spencerc99/playhtml) [![Size](https://img.shields.io/bundlephobia/min/playhtml?color=%23c6e1ea)](https://www.npmjs.com/package/spencerc99/playhtml)
 
 _interactive, collaborative html elements with a single data attribute_
 
-playhtml is a library for magically creating collaborative interactive HTML elements that persist their state across sessions. For example, you can create a movable piece of HTML "furniture" by adding the `can-move` attribute:
+playhtml is a fast, small (~300KB), and expressive library for magically creating collaborative interactive HTML elements that persist their state across sessions. For example, you can create a movable piece of HTML "furniture" by adding the `can-move` attribute:
 
 ```html
 <div id="couch" can-move style="font-size: 80px">🛋</div>
@@ -114,6 +114,10 @@ The only required properties are `defaultData`, `updateElement` and some kind of
 
 If you make something fun, please show me! This is designed as an open library for anyone to add on new interactions and capabilities, so we [welcome contributions](https://github.com/spencerc99/playhtml/blob/main/CONTRIBUTING.md) for new built-in capabilities.
 
+### Advanced
+
+IDs are recommended on all elements to uniquely identify them. If you are applying the same capability to several elements, you can also use the `selector-id` attribute to specify a selector to the elements that distinguishes them. The ID will be the index of the element in that selector query.
+
 ## Plug-and-play Capabilities
 
 These capabilities are common ones that have been designed and created by the community. You should expect that they are relatively well-tested, and they simply build on top of the same API and constructs that `can-play` uses.

package/dist/playhtml.es.js

@@ -9249,7 +9249,7 @@ function ci({
   });
 }
 setTimeout(() => {
-  se || (console.log(
+  se || (console.error(
     "You are using a deprecated version of playhtml. Please call `playhtml.init()` explicitly rather than just importing the library. Refer to https://github.com/spencerc99/playhtml#usage for reference."
   ), ci());
 }, 3e3);

package/dist/playhtml.umd.js

@@ -9,4 +9,4 @@ ${e}`)}function Xn(s,e,t){const n=Z(e),i=L(),r=k(n),o=s.messageHandlers[r];retur
 ࿂࿂࿂࿂ booting up playhtml... ࿂࿂࿂࿂
 ࿂࿂࿂࿂  https://playhtml.fun  ࿂࿂࿂࿂
 ࿂࿂࿂࿂   ࿂     ࿂     ࿂     ࿂   ࿂࿂࿂࿂
-࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂`),ie=new tc(t,s,bs),$=bs.getMap("playhtml-global"),re=new Map,new kc(s,bs),Et.globalData=$,Et.elementHandlers=re,ie.on("sync",n=>{n||console.error("Issue connecting to yjs..."),Mc()})}setTimeout(()=>{ie||(console.log("You are using a deprecated version of playhtml. Please call `playhtml.init()` explicitly rather than just importing the library. Refer to https://github.com/spencerc99/playhtml#usage for reference."),ys())},3e3);function Ac(s,e){const t=ie.awareness.getLocalState();return((t==null?void 0:t[s])??{})[e]}function _s(s){return s instanceof HTMLElement}function Ic(s,e,t,n){const i=$.get(e),r={...t,data:i.get(n)??t.defaultData,awareness:Ac(e,n)??t.myDefaultAwareness!==void 0?[t.myDefaultAwareness]:void 0,element:s,onChange:o=>{i.get(n)!==o&&i.set(n,o)},onAwarenessChange:o=>{var a;const c=((a=ie.awareness.getLocalState())==null?void 0:a[e])||{};c[n]!==o&&(c[n]=o,ie.awareness.setLocalStateField(e,c))},triggerAwarenessUpdate:()=>{ci()}};return new Cc(r)}function Lc(s){return s.defaultData!==void 0&&s.updateElement!==void 0}function jc(s,e){if(s===E.CanPlay){const t=e;return{defaultData:t.defaultData,defaultLocalData:t.defaultLocalData,myDefaultAwareness:t.myDefaultAwareness,updateElement:t.updateElement,updateElementAwareness:t.updateElementAwareness,onDrag:t.onDrag,onDragStart:t.onDragStart,onClick:t.onClick,additionalSetup:t.additionalSetup,resetShortcut:t.resetShortcut,debounceMs:t.debounceMs}}return ri[s]}function ci(){const s=new Map;function e(t,n,i,r){s.has(t)||s.set(t,new Map);const o=s.get(t);o.has(n)||o.set(n,new Map),o.get(n).set(i,r)}ie.awareness.getStates().forEach((t,n)=>{var i;for(const[r,o]of Object.entries(t)){const c=re.get(r);if(c)for(const[a,l]of c){if(!(a in o))continue;const h=o[a];e(r,a,n,h)}}for(const[r,o]of s){const c=re.get(r);if(c)for(const[a,l]of c){const h=(i=o.get(a))==null?void 0:i.values();if(!h)continue;let u=Array.from(h);l.__awareness=u}}})}function Mc(){console.log("[PLAYHTML]: Setting up elements... Time to have some fun 🛝");for(const s of Object.values(E)){const e=Array.from(document.querySelectorAll(`[${s}]`)).filter(_s);if(e.length)for(let t=0;t<e.length;t++){const n=e[t];Ct(n,s)}}ws&&($.observe(s=>{s.changes.keys.forEach((e,t)=>{e.action==="add"&&$.set(t,$.get(t))})}),ie.awareness.on("change",()=>ci()),ws=!1)}const Et={init:ys,setupPlayElement:ai,globalData:void 0,elementHandlers:void 0};window.playhtml=Et;function Tc(s){if(re.has(s))return;re.set(s,new Map),s!==E.CanPlay&&ri[s],$.get(s)||$.set(s,new de);const e=$.get(s);e.observe(t=>{t.changes.keys.forEach((n,i)=>{const r=re.get(s);if(n.action==="add"){const o=si(i);if(!_s(o)){console.log(`Element ${i} not an HTML element. Ignoring.`);return}Ct(o,s)}else if(n.action==="update"){const o=r.get(i);o.__data=e.get(i)}else n.action==="delete"?r.delete(i):console.log(`Unhandled action: ${n.action}`)})})}function Uc(s,e){const t=s.getAttribute(e);switch(e){case E.CanPlay:case E.CanMove:case E.CanSpin:case E.CanGrow:case E.CanToggle:case E.CanPost:return!0;case E.CanDuplicate:return t?(document.getElementById(t)||console.warn(`${E.CanDuplicate} element (${s.id}) duplicate element ("${t}") not found.`),!0):!1;default:return console.error(`Unhandled tag found in validation: ${e}`),!1}}function Ct(s,e){var c;if(!Uc(s,e))return;if(!s.id){const a=s.getAttribute("selector-id");if(a){const l=oi.get(a)??0;s.id=btoa(`${e}-${a}-${l}`),oi.set(a,l+1)}else s.id=btoa(`${e}-${s.innerHTML}}`)}const t=wc(s);if(!t){console.error(`Element ${s} does not have an acceptable ID. Please add an ID to the element to register it as a playhtml element.`);return}Tc(e);const n=re.get(e);if(n.has(t))return;const i=jc(e,s);if(!Lc(i)){console.error(`Element ${t} does not have proper info to initial a playhtml element. Please refer to https://github.com/spencerc99/playhtml#can-play for troubleshooting help.`);return}const r=$.get(e),o=Ic(s,e,i,t);n.set(t,o),r.get(t)===void 0&&i.defaultData!==void 0&&r.set(t,i.defaultData),(c=o.triggerAwarenessUpdate)==null||c.call(o),s.classList.add("__playhtml-element"),s.classList.add(`__playhtml-${e}`),s.style.setProperty("--jiggle-delay",`${Math.random()*1}s;}`)}function ai(s){if(!_s(s)){console.log(`Element ${s.id} not an HTML element. Ignoring.`);return}for(const e of Object.values(E))s.hasAttribute(e)&&Ct(s,e)}M.initPlayHTML=ys,M.playhtml=Et,M.setupPlayElement=ai,M.setupPlayElementForTag=Ct,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});
+࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂࿂`),ie=new tc(t,s,bs),$=bs.getMap("playhtml-global"),re=new Map,new kc(s,bs),Et.globalData=$,Et.elementHandlers=re,ie.on("sync",n=>{n||console.error("Issue connecting to yjs..."),Mc()})}setTimeout(()=>{ie||(console.error("You are using a deprecated version of playhtml. Please call `playhtml.init()` explicitly rather than just importing the library. Refer to https://github.com/spencerc99/playhtml#usage for reference."),ys())},3e3);function Ac(s,e){const t=ie.awareness.getLocalState();return((t==null?void 0:t[s])??{})[e]}function _s(s){return s instanceof HTMLElement}function Ic(s,e,t,n){const i=$.get(e),r={...t,data:i.get(n)??t.defaultData,awareness:Ac(e,n)??t.myDefaultAwareness!==void 0?[t.myDefaultAwareness]:void 0,element:s,onChange:o=>{i.get(n)!==o&&i.set(n,o)},onAwarenessChange:o=>{var a;const c=((a=ie.awareness.getLocalState())==null?void 0:a[e])||{};c[n]!==o&&(c[n]=o,ie.awareness.setLocalStateField(e,c))},triggerAwarenessUpdate:()=>{ci()}};return new Cc(r)}function Lc(s){return s.defaultData!==void 0&&s.updateElement!==void 0}function jc(s,e){if(s===E.CanPlay){const t=e;return{defaultData:t.defaultData,defaultLocalData:t.defaultLocalData,myDefaultAwareness:t.myDefaultAwareness,updateElement:t.updateElement,updateElementAwareness:t.updateElementAwareness,onDrag:t.onDrag,onDragStart:t.onDragStart,onClick:t.onClick,additionalSetup:t.additionalSetup,resetShortcut:t.resetShortcut,debounceMs:t.debounceMs}}return ri[s]}function ci(){const s=new Map;function e(t,n,i,r){s.has(t)||s.set(t,new Map);const o=s.get(t);o.has(n)||o.set(n,new Map),o.get(n).set(i,r)}ie.awareness.getStates().forEach((t,n)=>{var i;for(const[r,o]of Object.entries(t)){const c=re.get(r);if(c)for(const[a,l]of c){if(!(a in o))continue;const h=o[a];e(r,a,n,h)}}for(const[r,o]of s){const c=re.get(r);if(c)for(const[a,l]of c){const h=(i=o.get(a))==null?void 0:i.values();if(!h)continue;let u=Array.from(h);l.__awareness=u}}})}function Mc(){console.log("[PLAYHTML]: Setting up elements... Time to have some fun 🛝");for(const s of Object.values(E)){const e=Array.from(document.querySelectorAll(`[${s}]`)).filter(_s);if(e.length)for(let t=0;t<e.length;t++){const n=e[t];Ct(n,s)}}ws&&($.observe(s=>{s.changes.keys.forEach((e,t)=>{e.action==="add"&&$.set(t,$.get(t))})}),ie.awareness.on("change",()=>ci()),ws=!1)}const Et={init:ys,setupPlayElement:ai,globalData:void 0,elementHandlers:void 0};window.playhtml=Et;function Tc(s){if(re.has(s))return;re.set(s,new Map),s!==E.CanPlay&&ri[s],$.get(s)||$.set(s,new de);const e=$.get(s);e.observe(t=>{t.changes.keys.forEach((n,i)=>{const r=re.get(s);if(n.action==="add"){const o=si(i);if(!_s(o)){console.log(`Element ${i} not an HTML element. Ignoring.`);return}Ct(o,s)}else if(n.action==="update"){const o=r.get(i);o.__data=e.get(i)}else n.action==="delete"?r.delete(i):console.log(`Unhandled action: ${n.action}`)})})}function Uc(s,e){const t=s.getAttribute(e);switch(e){case E.CanPlay:case E.CanMove:case E.CanSpin:case E.CanGrow:case E.CanToggle:case E.CanPost:return!0;case E.CanDuplicate:return t?(document.getElementById(t)||console.warn(`${E.CanDuplicate} element (${s.id}) duplicate element ("${t}") not found.`),!0):!1;default:return console.error(`Unhandled tag found in validation: ${e}`),!1}}function Ct(s,e){var c;if(!Uc(s,e))return;if(!s.id){const a=s.getAttribute("selector-id");if(a){const l=oi.get(a)??0;s.id=btoa(`${e}-${a}-${l}`),oi.set(a,l+1)}else s.id=btoa(`${e}-${s.innerHTML}}`)}const t=wc(s);if(!t){console.error(`Element ${s} does not have an acceptable ID. Please add an ID to the element to register it as a playhtml element.`);return}Tc(e);const n=re.get(e);if(n.has(t))return;const i=jc(e,s);if(!Lc(i)){console.error(`Element ${t} does not have proper info to initial a playhtml element. Please refer to https://github.com/spencerc99/playhtml#can-play for troubleshooting help.`);return}const r=$.get(e),o=Ic(s,e,i,t);n.set(t,o),r.get(t)===void 0&&i.defaultData!==void 0&&r.set(t,i.defaultData),(c=o.triggerAwarenessUpdate)==null||c.call(o),s.classList.add("__playhtml-element"),s.classList.add(`__playhtml-${e}`),s.style.setProperty("--jiggle-delay",`${Math.random()*1}s;}`)}function ai(s){if(!_s(s)){console.log(`Element ${s.id} not an HTML element. Ignoring.`);return}for(const e of Object.values(E))s.hasAttribute(e)&&Ct(s,e)}M.initPlayHTML=ys,M.playhtml=Et,M.setupPlayElement=ai,M.setupPlayElementForTag=Ct,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "playhtml",
   "title": "playhtml",
   "description": "Create interactive, collaborative html elements with a single attribute",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "license": "MIT",
   "type": "module",
   "keywords": [
@@ -33,8 +33,13 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/main.d.ts",
       "import": "./dist/playhtml.es.js",
       "require": "./dist/playhtml.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
   "scripts": {