react-html-element - npm Package Compare versions

Comparing version 4.0.0-export-es-module-d09e2f8.1 to 4.0.0-export-es-module-d191b81.1

dist/ReactHTMLElement.js

@@ -101,2 +101,5 @@ "use strict";
 var isPreEighteen = reactMajor < 18;
+var REACT_DOM_CLIENT_IMPORT = isPreEighteen
+    ? './react-dom-client-polyfill'
+    : 'react-dom/client';
 var ReactHTMLElement = /** @class */ (function (_super) {
@@ -144,2 +147,3 @@ __extends(ReactHTMLElement, _super);
             return __generator(this, function (_a) {
+                var _b;
                 switch (_a.label) {
@@ -149,3 +153,5 @@ case 0:
                             return [2 /*return*/, this._root];
-                        return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('react-dom/client')); })];
+                        return [4 /*yield*/, (_b = 
+                            /* webpackExports: ['createRoot'] */
+                            "".concat(REACT_DOM_CLIENT_IMPORT), Promise.resolve().then(function () { return __importStar(require(_b)); }))];
                     case 1:
@@ -166,5 +172,5 @@ createRoot = (_a.sent()).createRoot;
         }
-        void this.rootRender(app);
+        void this.renderRoot(app);
     };
-    ReactHTMLElement.prototype.rootRender = function (app) {
+    ReactHTMLElement.prototype.renderRoot = function (app) {
         return __awaiter(this, void 0, void 0, function () {
@@ -171,0 +177,0 @@ var root;

module/ReactHTMLElement.js

@@ -15,2 +15,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 const isPreEighteen = reactMajor < 18;
+const REACT_DOM_CLIENT_IMPORT = isPreEighteen
+    ? './react-dom-client-polyfill'
+    : 'react-dom/client';
 class ReactHTMLElement extends HTMLElement {
@@ -41,3 +44,5 @@ getShadowRoot() {
                 return this._root;
-            const { createRoot } = yield import('react-dom/client');
+            const { createRoot } = (yield import(
+            /* webpackExports: ['createRoot'] */
+            `${REACT_DOM_CLIENT_IMPORT}`));
             this._root = createRoot(this.mountPoint);
@@ -54,5 +59,5 @@ return this._root;
         }
-        void this.rootRender(app);
+        void this.renderRoot(app);
     }
-    rootRender(app) {
+    renderRoot(app) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -59,0 +64,0 @@ const root = yield this.root();

package.json

 {
   "name": "react-html-element",
-  "version": "4.0.0-export-es-module-d09e2f8.1",
+  "version": "4.0.0-export-es-module-d191b81.1",
   "description": "An HTMLElement extension that provides a simple setup for Web Components using React.",
   "main": "module/index.js",
+  "types": "module/index.d.ts",
   "exports": {
@@ -11,6 +12,6 @@ "import": "./module/index.js",
   },
-  "types": "module/index.d.ts",
   "files": [
     "dist",
-    "module"
+    "module",
+    "types"
   ],
@@ -21,3 +22,3 @@ "scripts": {
     "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
-    "prepublishOnly": "npm run build"
+    "prepack": "npm run build"
   },
@@ -24,0 +25,0 @@ "repository": {

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24441

increased by4.5%

Number of package files

11

increased by10%

Lines of code

354

increased by9.26%

Worsened metrics

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes