playhtml 2.0.16 → 2.0.18

package/CHANGELOG.md

@@ -2,12 +2,14 @@
 
 The format is based on Keep a Changelog and this project adheres to Semantic Versioning.
 
-## 2.0.14 - 2024-01-04
+## [Unreleased]
 
-**BREAKING CHANGES**
+- **BREAKING CHANGE**Changed the hash function used to generate element ids. This will cause all elements without an `id` to be re-created to lose any persistent historical data. This was done to avoid duplicates and to swap to using a standard-length hash function (SHA-1). We still recommend you setting a unique `id` for each element to avoid any potential duplicates in the future, and using `selectorId` will not be affected by this change.
 
-- deprecated using non-object values as `defaultData` for elements. If you were using a single value before, instead, use an object with a `value` key. e.g. `defaultData: { value: "my value" }`. This allows for easier extension of the data in the future.
-- deprecated `playhtml.init()` automatically being called to avoid side-effects upon import. This has been replaced with a new `init` file that you can directly import if you'd like to auto-initialize without any settings.
+## 2.0.16 - 2024-01-04
+
+- **BREAKING CHANGE** deprecated using non-object values as `defaultData` for elements. If you were using a single value before, instead, use an object with a `value` key. e.g. `defaultData: { value: "my value" }`. This allows for easier extension of the data in the future.
+- **BREAKING CHANGE** deprecated `playhtml.init()` automatically being called to avoid side-effects upon import. This has been replaced with a new `init` file that you can directly import if you'd like to auto-initialize without any settings. See the README for more details.
 - exported `setupPlayElements` to call to look for any new elements to initialize
 
 ## 2.0.7 - 2023-10-02

package/README.md

@@ -12,6 +12,8 @@ https://github.com/spencerc99/playhtml/assets/14796580/00e84e15-2c1c-4b4b-8e15-2
 
 If you enjoy this, please consider [sponsoring the project or sending a small donation](https://github.com/sponsors/spencerc99). This helps ensure that the library is maintained and improved over time and funds the hosting costs for the syncing and persistence services.
 
+Join our [Discord community](https://discord.gg/h7sABTv8) to get help and show off what you've built!
+
 ## Usage
 
 Head to the proper section depending on your technology preference:
@@ -34,19 +36,21 @@ To use this library, you can import the library and the associated styles from a
   id="openSign"
   <!-- INVALID EXAMPLE <img src="https://media2.giphy.com/media/lL7A3Li0YtFHq/giphy.gif?cid=ecf05e47ah89o71gzz7ke7inrgb1ai1xcbrjnqdf7o890118&ep=v1_stickers_search&rid=giphy.gif" can-move /> -->
   <!-- import the script -->
+
+  <!-- Option 1 (simplest, no customization) -->
+  <script
+    type="module"
+    src="https://unpkg.com/playhtml@latest/dist/init.es.js"
+  ></script>
+
+  <!-- Option 2 (customize options to use your own partykit provider or specify the room) -->
   <script type="module">
     import "https://unpkg.com/playhtml@latest";
-    playhtml.init();
-    // Optionally you could customize the room and host, like so:
-    // playhtml.init({
-    //  room: window.location.pathname,
-    //  host: "mypartykit.user.partykit.dev"
-    // })
+    playhtml.init({
+      room: "my-room",
+      host: "mypartykit.user.partykit.dev",
+    });
   </script>
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/playhtml@latest/dist/style.css"
-  />
 </body>
 ```
 
@@ -159,24 +163,21 @@ https://github.com/spencerc99/playhtml/assets/14796580/fae669b1-b3e2-404e-bd7a-3
 <!-- IMPORTANT: this data must be set _before_ importing the playhtml library. -->
 <script>
   let candle = document.getElementById("customCandle");
-  candle.defaultData = true;
+  candle.defaultData = { on: true };
   candle.onClick = (_e, { data, setData }) => {
-    setData(!data);
+    setData({ on: !data.on });
   };
-  candle.updateElement = ({ data }) => {
-    candle.src = data ? "/candle-gif.gif" : "/candle-off.png";
+  candle.updateElement = ({ element, data }) => {
+    element.src = data.on ? "/candle-gif.gif" : "/candle-off.png";
   };
   candle.resetShortcut = "shiftKey";
-  customCandle.defaultData = true;
-  customCandle.onClick = (_e, { data, setData }) => {
-    setData(!data);
-  };
-  // The above statement could also be done using the `additionalSetup`
+
+  // If you wanted to trigger this on hover, you could use `additionalSetup`
   // which can initialize several different event listeners and custom logic.
   // customCandle.additionalSetup = ({ getData, setData }) => {
-  //   customCandle.addEventListener("click", (_e) => {
+  //   customCandle.addEventListener("mouseover", (_e) => {
   //     const data = getData();
-  //     setData(!data);
+  //     setData({on: !data.on}});
   //   });
   // };
 </script>
@@ -186,10 +187,6 @@ https://github.com/spencerc99/playhtml/assets/14796580/fae669b1-b3e2-404e-bd7a-3
   import "https://unpkg.com/playhtml@latest";
   playhtml.init();
 </script>
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/playhtml@latest/dist/style.css"
-/>
 ```
 
 See all supported properties in the `ElementInitializer` [object in `types.ts`](https://github.com/spencerc99/playhtml/blob/main/src/types.ts#L13).
@@ -240,6 +237,10 @@ Creates an element that can be resized using a `scale` `transform`. Clicking the
 
 Creates a rotatable element using a `rotate` `transform` on the element. Dragging the element to the left or right will rotate it counter-clockwise and clockwise respectively.
 
+## Help & Community
+
+Join our [Discord community](https://discord.gg/h7sABTv8) to get help and show off what you've built!
+
 ## Data Policy
 
 Currently all data is stored by a [Partykit](https://partykit.dev) instance under my account and is not encrypted. This means that anyone with the room name can access the data. In the future, I'd like to enable providing your own custom persistence options via object storage providers (or any generic service that can accept a POST endpoint with a dump of the data).

package/dist/main.d.ts

@@ -3,10 +3,10 @@
 import { ElementAwarenessEventHandlerData } from '@playhtml/common';
 import { ElementData } from '@playhtml/common';
 import { ElementEventHandlerData } from '@playhtml/common';
-import { ElementInitializer } from '@playhtml/common';
+import { ElementInitializer } from '../../common/src/index';
 import { ElementSetupData } from '@playhtml/common';
 import { ModifierKey } from '@playhtml/common';
-import { TagType } from '@playhtml/common';
+import { TagType } from '../../common/src/index';
 import * as Y from 'yjs';
 import YPartyKitProvider from 'y-partykit/provider';
 
@@ -47,7 +47,7 @@ declare class ElementHandler<T = any, U = any, V = any> {
      * Public-use setter for data that makes the change to all clients.
      */
     setData(data: T): void;
-    setLocalAwareness(data: V): void;
+    setMyAwareness(data: V): void;
     setDataDebounced(data: T): void;
     /**
      * Resets the element to its default state.
@@ -92,6 +92,6 @@ declare function setupPlayElement(element: Element, { ignoreIfAlreadySetup }?: {
 /**
  * Sets up a playhtml element to handle the given tag's capabilities.
  */
-declare function setupPlayElementForTag<T extends TagType | string>(element: HTMLElement, tag: T): void;
+declare function setupPlayElementForTag<T extends TagType | string>(element: HTMLElement, tag: T): Promise<void>;
 
 export { }