@uploadcare/react-adapter - npm Package Compare versions

Comparing version 0.0.1-alpha.0 to 0.0.1-alpha.1

dist/react-adapter.d.ts

@@ -1,17 +0,14 @@
-import type { default as React_2 } from 'react';
+import { default as React_2 } from 'react';
 
-export declare const createComponentFactory: <I extends HTMLElement, E extends EventsSchema = {}>({ react: React, tagName, elementClass, displayName, schema, }: Options<I, E>) => React_2.ForwardRefExoticComponent<React_2.RefAttributes<unknown>>;
+export declare const customElementToReactComponent: <I extends HTMLElement, E extends Record<string, string> = {}>({ react: React, tag, elClass, schemaEvents, }: Options<I, E>) => React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<E> & React_2.RefAttributes<I>>;
 
-declare type EventsSchema = Record<string, string>;
-
-declare type Options<I extends HTMLElement, E extends EventsSchema = {}> = {
+declare type Options<I extends HTMLElement, E extends Record<string, string> = {}> = {
     react: typeof React_2;
-    tagName: string;
-    elementClass: {
+    tag: string;
+    elClass: {
         new (): I;
     };
-    displayName?: string;
-    schema?: E;
+    schemaEvents?: E;
 };
 
 export { }

dist/react-adapter.js

@@ -1,86 +0,85 @@
-const P = /* @__PURE__ */ new Set([
+const w = /* @__PURE__ */ new Set([
   "children",
-  "localName",
   "ref",
   "style",
   "className"
-]), m = /* @__PURE__ */ new WeakMap(), M = (e) => {
-  let t = m.get(e);
-  return t || (t = /* @__PURE__ */ new Map(), m.set(e, t)), t;
-}, g = (e, t, n) => {
-  const s = M(e), o = s.has(t);
-  if (n) {
-    const r = { handleEvent: n };
-    o || e.addEventListener(t, r), s.set(t, r);
-  } else if (o) {
-    const r = s.get(t);
-    e.removeEventListener(t, r), s.delete(t);
-  }
-}, y = g, h = (e, t, n, s, o) => {
-  const r = o == null ? void 0 : o[t];
-  if (r !== void 0 && n !== s) {
-    y(e, r, n);
+]), g = (e = {}) => Object == null ? void 0 : Object.keys(e).reduce((n, s) => {
+  var t, c;
+  const o = e == null ? void 0 : e[s], r = `on${(c = (t = o == null ? void 0 : o.split("-")) == null ? void 0 : t.map((a) => a.charAt(0).toUpperCase() + a.slice(1))) == null ? void 0 : c.join("")}`;
+  return n[r] = o, n;
+}, {}), E = /* @__PURE__ */ new WeakMap(), v = (e) => {
+  let n = E.get(e);
+  return n || (n = /* @__PURE__ */ new Map(), E.set(e, n)), n;
+}, d = ({
+  node: e,
+  nameProp: n,
+  valueProp: s,
+  prevValueProp: o,
+  event: r
+}) => {
+  if (r !== void 0 && s !== o) {
+    const t = v(e), c = t.has(r);
+    if (s) {
+      const a = {
+        handleEvent: s
+      };
+      c || e.addEventListener(r, a), t.set(r, a);
+    } else if (c) {
+      const a = t.get(r);
+      e.removeEventListener(r, a), t.delete(r);
+    }
     return;
   }
-  e[t] = n, n == null && t in HTMLElement.prototype && e.removeAttribute(t);
-}, b = (e = {}) => Object == null ? void 0 : Object.keys(e).reduce((t, n) => {
-  var r, c;
-  const s = e == null ? void 0 : e[n], o = `on${(c = (r = s == null ? void 0 : s.split("-")) == null ? void 0 : r.map((l) => l.charAt(0).toUpperCase() + l.slice(1))) == null ? void 0 : c.join("")}`;
-  return t[o] = s, t;
-}, {}), R = (e, t) => {
-  P.forEach((n) => {
-    n in t.prototype && !(n in HTMLElement.prototype) && console.warn(
-      `${e} contains property ${n} which is a React reserved property.`
-    );
-  });
-}, j = (e, t, n) => {
-  const s = {}, o = {};
-  return Object.entries(e).forEach(([r, c]) => {
-    P.has(r) ? s[r === "className" ? "class" : r] = c : t.has(r) || r in n.prototype ? o[r] = c : s[r] = c;
-  }), { reactProps: s, elementProps: o };
-}, N = ({
+  e[n] = s, s == null && n in HTMLElement.prototype && e.removeAttribute(n);
+}, M = (e, n, s) => {
+  const o = {}, r = {};
+  return Object.entries(e).forEach(([t, c]) => {
+    w.has(t) ? o[t === "className" ? "class" : t] = c : n.has(t) || t in s.prototype ? r[t] = c : o[t] = c;
+  }), { reactProps: o, customElProps: r };
+}, b = ({
   react: e,
   // https://react.dev/warnings/invalid-hook-call-warning
-  tagName: t,
-  elementClass: n,
-  displayName: s,
-  schema: o
+  tag: n,
+  elClass: s,
+  schemaEvents: o
 }) => {
-  const r = b(o), c = new Set(Object.keys(r ?? {}));
-  R(t, n);
-  const l = e.forwardRef((E, p) => {
-    const u = e.useRef(/* @__PURE__ */ new Map()), f = e.useRef(null), { reactProps: d, elementProps: w } = j(
-      E,
-      c,
-      n
-    );
-    return e.useLayoutEffect(() => {
-      if (f.current === null)
-        return;
-      const a = /* @__PURE__ */ new Map();
-      for (const i in w)
-        h(
-          f.current,
-          i,
-          E[i],
-          u.current.get(i),
-          r
-        ), u.current.delete(i), a.set(i, E[i]);
-      for (const [i, L] of u.current)
-        h(f.current, i, void 0, L, r);
-      u.current = a;
-    }, []), d.suppressHydrationWarning = !0, e.createElement(t, {
-      ...d,
-      ref: e.useCallback(
-        (a) => {
-          f.current = a, typeof p == "function" ? p(a) : p !== null && (p.current = a);
-        },
-        [p]
-      )
-    });
-  });
-  return l.displayName = s ?? n.name, l;
+  const r = g(o), t = new Set(Object.keys(r ?? {})), c = e.forwardRef(
+    (a, l) => {
+      const f = e.useRef(/* @__PURE__ */ new Map()), p = e.useRef(null), { reactProps: h, customElProps: m } = M(a, t, s);
+      return e.useLayoutEffect(() => {
+        if (p.current === null)
+          return;
+        const i = /* @__PURE__ */ new Map();
+        for (const u in m)
+          d({
+            node: p.current,
+            nameProp: u,
+            valueProp: m[u],
+            prevValueProp: f.current.get(u),
+            event: r[u]
+          }), f.current.delete(u), i.set(u, a[u]);
+        for (const [u, P] of f.current)
+          d({
+            node: p.current,
+            nameProp: u,
+            valueProp: void 0,
+            prevValueProp: P,
+            event: r[u]
+          });
+        f.current = i;
+      }), e.createElement(n ?? s.__tag, {
+        ...h,
+        ref: e.useCallback(
+          (i) => {
+            p.current = i, typeof l == "function" ? l(i) : l !== null && (l.current = i);
+          },
+          [l]
+        )
+      });
+    }
+  );
+  return c.displayName = s.name, c;
 };
 export {
-  N as createComponentFactory
+  b as customElementToReactComponent
 };

package.json

 {
   "name": "@uploadcare/react-adapter",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.1",
   "private": false,
   "type": "module",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "main": "./dist/react-adapter.cjs",
@@ -10,0 +8,0 @@ "module": "./dist/react-adapter.js",

README.md

@@ -12,3 +12,6 @@ # Uploadcare React Adapter
 
-### (@TODO: Add a link to the documentation)
+[![Build Status][badge-build]][build-url]
+[![NPM version][npm-img]][npm-url]
+[![GitHub release][badge-release-img]][badge-release-url]
+[![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url]
 
@@ -34,6 +37,12 @@ ## Security issues
 [badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat
-
 [badge-stack-url]: https://stackshare.io/uploadcare/stacks/
+[badge-release-img]: https://img.shields.io/github/release/uploadcare/react-components.svg
+[badge-release-url]: https://github.com/uploadcare/react-components/releases
+[npm-img]: http://img.shields.io/npm/v/@uploadcare/react-adapter.svg
+[npm-url]: https://www.npmjs.com/package/@uploadcare/react-adapter
+[badge-build]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml/badge.svg
+[build-url]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml
 
 
+
 [uc-docs-metadata]: https://uploadcare.com/api-refs/rest-api/v0.7.0/#tag/File-Metadata

No alert changes

Improved metrics

Total package byte prevSize

7283

6.04%

Number of lines in readme file

47

23.68%

Worsened metrics

Lines of code

103

-2.83%

No dependency changes