feat: node 환경에서 import 하더라도 에러 나지 않도록 수정

Author: ne2030

package.json

@@ -56,5 +56,9 @@
     "webpack-cli": "^4.9.1",
     "webpack-dev-middleware": "^5.2.1",
     "yargs": "^17.2.1"
+  },
+  "volta": {
+    "node": "14.21.3",
+    "npm": "7.24.2"
   }
 }

src/_internal/_browser.js

@@ -0,0 +1,2 @@
+export const document_wrapper = typeof document !== "undefined" ? document : {};
+export const navigator_wrapper = typeof navigator !== 'undefined' ? navigator : {}

src/_internal/_docWidth.js

@@ -1,4 +1,6 @@
-const docEl = document.documentElement;
+import { document_wrapper } from "./_browser.js";
+
+const docEl = document_wrapper.documentElement;
 
 export default (isHeight, b = document.body) =>
   isHeight

src/_internal/_matches.js

@@ -1,5 +1,7 @@
-const docEl = document.documentElement;
-export default docEl.matches ||
-  docEl.webkitMatchesSelector ||
-  docEl.mozMatchesSelector ||
-  docEl.msMatchesSelector;
+import { document_wrapper } from "./_browser.js";
+
+const docEl = document_wrapper.documentElement;
+export default docEl?.matches ||
+  docEl?.webkitMatchesSelector ||
+  docEl?.mozMatchesSelector ||
+  docEl?.msMatchesSelector;

src/elWidth.js

@@ -2,8 +2,9 @@ import css from "./css.js";
 import cssF from "./_internal/_cssF.js";
 import show from "./show.js";
 import hide from "./hide.js";
+import { navigator_wrapper } from "./_internal/_browser.js";
 
-const isIE = /trident/i.test(navigator.userAgent);
+const isIE = /trident/i.test(navigator_wrapper.userAgent || '');
 
 function getBorderBoxValue(Left, Right, el) {
   return (

src/els.js

@@ -1,10 +1,16 @@
 import remove from "./remove.js";
 import $each from "./each.js";
 
-const fragmentRE = /^\s*<(\w+|!)[^>]*>/,
-  table = document.createElement("table"),
-  tableRow = document.createElement("tr"),
-  div = document.createElement("div"),
+const fragmentRE = /^\s*<(\w+|!)[^>]*>/;
+let table;
+let tableRow;
+let div;
+let containers;
+
+if (typeof document !== "undefined") {
+  table = document.createElement("table");
+  tableRow = document.createElement("tr");
+  div = document.createElement("div");
   containers = {
     tr: document.createElement("tbody"),
     tbody: table,
@@ -13,6 +19,7 @@ const fragmentRE = /^\s*<(\w+|!)[^>]*>/,
     td: tableRow,
     th: tableRow,
   };
+}
 
 export default (html) => {
   html = html.trim();

src/offset.js

@@ -1,4 +1,6 @@
-const docEl = document.documentElement;
+import { document_wrapper } from "./_internal/_browser.js";
+
+const docEl = document_wrapper.documentElement;
 
 export default (el) => {
   const rect = el.getBoundingClientRect();

src/offsetParent.js

@@ -1,5 +1,6 @@
 import css from "./css.js";
-const docEl = document.documentElement;
+import { document_wrapper } from "./_internal/_browser.js";
+const docEl = document_wrapper.documentElement;
 
 export default function offsetParent(el) {
   let offsetParent = el;

src/position.js

@@ -1,8 +1,9 @@
 import css from "./css.js";
 import offset from "./offset.js";
 import offsetParent from "./offsetParent.js";
+import { document_wrapper } from "./_internal/_browser.js";
 
-const docEl = document.documentElement;
+const docEl = document_wrapper.documentElement;
 
 const setPositionTopLeft = (el, { top, left }, { pTop = 0, pLeft = 0 }) => ({
   top: top - pTop - parseFloat(css("marginTop", el)) + docEl.clientTop,