@teleporthq/react-components - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/react-components.js

 import dayjs from 'dayjs';
 import React, { useRef, useEffect, useState } from 'react';
 
+const style = '';
+
 const DateTimePrimitive = ({ date, format }) => {
@@ -117,3 +119,3 @@ const dateTime = dayjs.unix(new Date(date).getTime() / 1e3);
     if (mappingConfiguration?.[itemData.typeId]) {
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingConfiguration[itemData.typeId]?.(itemData.attributes) ?? null);
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, mappingConfiguration[itemData.typeId]?.(itemData.attributes ?? itemData) ?? null);
     }
@@ -126,2 +128,100 @@ return /* @__PURE__ */ React.createElement(React.Fragment, null, renderDefault ? renderDefault(itemData) : "default case");
 
-export { CMSMixedType, CaisyDocumentLink, DangerousHTML, DataProvider, DateTimePrimitive, Repeater };
+const DEV_COMPONENT_TAG_NAME = "animate-on-reveal";
+const _AnimateOnElementReveal = class _AnimateOnElementReveal extends HTMLElement {
+  constructor() {
+    super();
+    if (!this.firstElementChild) {
+      return;
+    }
+    this.nodeToObserve = this.findObservableNodeFromTree(
+      this.firstElementChild
+    );
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.setAttribute("revealed", "");
+          } else {
+            this.removeAttribute("revealed");
+          }
+        });
+      },
+      { threshold: 0.5 }
+    );
+    this.style.display = "contents";
+  }
+  static registerSelf() {
+    if (!window.customElements.get(DEV_COMPONENT_TAG_NAME)) {
+      window.customElements.define(
+        DEV_COMPONENT_TAG_NAME,
+        _AnimateOnElementReveal
+      );
+    }
+  }
+  connectedCallback() {
+    if (!this.nodeToObserve) {
+      return;
+    }
+    this.nodeToObserve.style.animationPlayState = "paused";
+    this.intersectionObserver.observe(this.nodeToObserve);
+  }
+  disconnectedCallback() {
+    this.intersectionObserver.disconnect();
+  }
+  findObservableNodeFromTree(node) {
+    const style = window.getComputedStyle(node);
+    if (style.getPropertyValue("display") !== "contents") {
+      return node;
+    }
+    const children = node.children;
+    for (let i = 0; i < children.length; i++) {
+      const descendant = this.findObservableNodeFromTree(children[i]);
+      if (descendant) {
+        return descendant;
+      }
+    }
+    return null;
+  }
+  attributeChangedCallback(name) {
+    switch (name) {
+      case "animation":
+        this.nodeToObserve.style.animationName = this.getAttribute("animation") || "";
+        break;
+      case "duration":
+        this.nodeToObserve.style.animationDuration = this.getAttribute(name) || "0s";
+        break;
+      case "delay":
+        this.nodeToObserve.style.animationDelay = this.getAttribute(name) || "0s";
+        break;
+      case "easing":
+        this.nodeToObserve.style.animationTimingFunction = this.getAttribute(name) || "ease";
+        break;
+      case "iteration":
+        this.nodeToObserve.style.animationIterationCount = this.getAttribute(name) || "1";
+        break;
+      case "direction":
+        this.nodeToObserve.style.animationDirection = this.getAttribute(name) || "normal";
+        break;
+      case "revealed":
+        this.nodeToObserve.style.animationPlayState = this.hasAttribute(
+          "revealed"
+        ) ? "running" : "paused";
+        break;
+    }
+  }
+};
+_AnimateOnElementReveal.observedAttributes = [
+  "animation",
+  "duration",
+  "delay",
+  "direction",
+  "easing",
+  "revealed",
+  "class",
+  "classname",
+  "iteration"
+];
+let AnimateOnElementReveal = _AnimateOnElementReveal;
+AnimateOnElementReveal.registerSelf();
+
+export { AnimateOnElementReveal, CMSMixedType, CaisyDocumentLink, DangerousHTML, DataProvider, DateTimePrimitive, Repeater };

package.json

 {
   "name": "@teleporthq/react-components",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "",
@@ -11,6 +11,9 @@ "main": "dist/react-components.js",
       "require": "./dist/react-components.cjs"
-    }
+    },
+    "./animate-on-reveal": "./dist/animate-on-reveal.umd.js",
+    "./style": "./style.css"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && npm run build:animate-on-reveal",
+    "build:animate-on-reveal": "vite build -c vite.config.animate-on-reveal.js",
     "dev": "vite build --watch",
@@ -57,2 +60,3 @@ "test": "vitest run",
     "jsdom": "^22.1.0",
+    "prettier": "^3.2.3",
     "pretty-quick": "^3.1.3",
@@ -59,0 +63,0 @@ "react": "^17.0.2",

No alert changes

Improved metrics

Total package byte prevSize

40251

48.34%

Number of package files

20

25%

Lines of code

1174

57.8%

Worsened metrics

Dev dependency count

12

9.09%

No dependency changes