Merge pull request #37 from contentstack/EB-643-json-rte-serializer-very-large-bundle-size-from-dependencies

json rte serializer very large bundle size from dependencies

Author: Jayesh2812

package-lock.json

@@ -3,11 +3,14 @@
   "version": "2.0.5",
   "description": "This Package converts Html Document to Json and vice-versa.",
   "main": "lib/index.js",
+  "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
   "scripts": {
     "test": "jest",
     "prepare": "npm run build",
-    "build": "tsc"
+    "build:cjs": "esbuild src/index.tsx --bundle --outdir=lib --platform=node --minify",
+    "build:esm": "esbuild src/index.tsx --bundle --outdir=lib --format=esm --out-extension:.js=.mjs --minify",
+    "build": "npm run build:cjs && npm run build:esm && tsc --emitDeclarationOnly --outDir lib"
   },
   "repository": {
     "type": "git",
@@ -24,11 +27,19 @@
   },
   "homepage": "https://github.com/contentstack/json-rte-serializer#readme",
   "devDependencies": {
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.0.3",
     "@types/jsdom": "^16.2.12",
-    "@types/lodash": "^4.14.168",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.flatten": "^4.4.9",
+    "@types/lodash.isempty": "^4.4.9",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.isobject": "^3.0.9",
+    "@types/lodash.isplainobject": "^4.0.9",
+    "@types/lodash.isundefined": "^3.0.9",
+    "@types/lodash.kebabcase": "^4.1.9",
     "@types/omit-deep-lodash": "^1.1.1",
     "@types/uuid": "^8.3.0",
+    "esbuild": "0.19.11",
     "jest": "^27.5.1",
     "jest-html-reporter": "^3.7.0",
     "jsdom": "^16.6.0",
@@ -38,10 +49,14 @@
   },
   "dependencies": {
     "array-flat-polyfill": "^1.0.1",
-    "lodash": "^4.17.21",
-    "slate": "^0.72.0",
-    "slate-hyperscript": "^0.62.0",
-    "tslib": "^2.3.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.flatten": "^4.4.0",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.isobject": "^3.0.2",
+    "lodash.isplainobject": "^4.0.6",
+    "lodash.isundefined": "^3.0.1",
+    "lodash.kebabcase": "^4.1.1",
     "uuid": "^8.3.2"
   },
   "files": [

package.json

@@ -1,4 +1,3 @@
-import { jsx } from 'slate-hyperscript'
 import { v4 } from 'uuid'
 import kebabCase from "lodash/kebabCase"
 import isEmpty from "lodash/isEmpty"
@@ -7,6 +6,8 @@ import isObject from "lodash/isObject"
 import cloneDeep from "lodash/cloneDeep"
 import isUndefined from "lodash/isUndefined"
 
+import { jsx } from './utils/jsx'
+ 
 import {IHtmlToJsonElementTags,IHtmlToJsonOptions, IHtmlToJsonTextTags, IAnyObject} from './types'
 
 const generateId = () => v4().split('-').join('')

src/fromRedactor.tsx

@@ -1,8 +1,8 @@
-import kebbab from 'lodash/kebabCase'
-import isEmpty from 'lodash/isEmpty'
+import kebbab from 'lodash.kebabcase'
+import isEmpty from 'lodash.isempty'
 
 import {IJsonToHtmlElementTags, IJsonToHtmlOptions, IJsonToHtmlTextTags} from './types'
-import { isPlainObject } from 'lodash'
+import isPlainObject from 'lodash.isplainobject'
 
 const ELEMENT_TYPES: IJsonToHtmlElementTags = {
   'blockquote': (attrs: string, child: string) => {

src/toRedactor.tsx

@@ -0,0 +1,180 @@
+import isPlainObject from "lodash.isplainobject";
+import isEqual from "lodash.isequal";
+
+const resolveDescendants = (children: any[]) => {
+  const nodes: any[] = [];
+
+  const addChild = (child: any): void => {
+    if (child == null) {
+      return;
+    }
+
+    const prev = nodes[nodes.length - 1];
+
+    if (typeof child === "string") {
+      const text = { text: child };
+      STRINGS.add(text);
+      child = text;
+    }
+
+    if (isText(child)) {
+      const c = child; // HACK: fix typescript complaining
+
+      if (
+        isText(prev) &&
+        STRINGS.has(prev) &&
+        STRINGS.has(c) &&
+        textEquals(prev, c, { loose: true })
+      ) {
+        prev.text += c.text;
+      } else {
+        nodes.push(c);
+      }
+    } else if (isElement(child)) {
+      nodes.push(child);
+    } else {
+      throw new Error(`Unexpected hyperscript child object: ${child}`);
+    }
+  };
+
+  for (const child of children.flat(Infinity)) {
+    addChild(child);
+  }
+
+  return nodes;
+};
+
+/**
+ * Create an `Element` object.
+ */
+
+export function createElement(
+  tagName: string,
+  attributes: { [key: string]: any },
+  children: any[]
+) {
+  return { ...attributes, children: resolveDescendants(children) };
+}
+
+/**
+ * Create a fragment.
+ */
+
+export function createFragment(
+  tagName: string,
+  attributes: { [key: string]: any },
+  children: any[]
+) {
+  return resolveDescendants(children);
+}
+
+/**
+ * Create a `Text` object.
+ */
+
+export function createText(
+  tagName: string,
+  attributes: { [key: string]: any },
+  children: any[]
+) {
+  const nodes = resolveDescendants(children);
+
+  if (nodes.length > 1) {
+    throw new Error(
+      `The <text> hyperscript tag must only contain a single node's worth of children.`
+    );
+  }
+
+  let [node] = nodes;
+
+  if (node == null) {
+    node = { text: "" };
+  }
+
+  if (!isText(node)) {
+    throw new Error(`
+      The <text> hyperscript tag can only contain text content as children.`);
+  }
+
+  // COMPAT: If they used the <text> tag we want to guarantee that it won't be
+  // merge with other string children.
+  STRINGS.delete(node);
+
+  Object.assign(node, attributes);
+  return node;
+}
+
+const STRINGS = new WeakSet();
+
+function isText(value: any) {
+  return isPlainObject(value) && typeof value.text === "string";
+}
+
+function textEquals(
+  text: any,
+  another: any,
+  options: { loose?: boolean } = {}
+): boolean {
+  const { loose = false } = options;
+
+  function omitText(obj: Record<any, any>) {
+    const { text, ...rest } = obj;
+
+    return rest;
+  }
+
+  return isEqual(
+    loose ? omitText(text) : text,
+    loose ? omitText(another) : another
+  );
+}
+
+const isElement = (value: any): boolean => {
+  return (
+    isPlainObject(value) &&
+    isNodeList(value.children) 
+    // && !Editor.isEditor(value) // value cannot be editor
+  )
+};
+
+export const jsx = (
+  tagName: string,
+  attributes?: Object,
+  ...children: any[]
+) => {
+  const creators = {
+    element: createElement,
+    fragment: createFragment,
+    text: createText,
+  };
+  const creator = creators[tagName];
+
+  if (!creator) {
+    throw new Error(`No hyperscript creator found for tag: <${tagName}>`);
+  }
+
+  if (attributes == null) {
+    attributes = {};
+  }
+
+  if (!isPlainObject(attributes)) {
+    children = [attributes].concat(children);
+    attributes = {};
+  }
+
+  children = children.filter((child) => Boolean(child)).flat();
+  const ret = creator(tagName, attributes, children);
+  return ret;
+};
+
+
+function isNodeList (value: any[]) {
+  return value.every(val => isNode(val))
+}
+
+function isNode(value: any){
+  return (
+    isText(value) || isElement(value) 
+    // || Editor.isEditor(value) // // value cannot be editor
+  )
+}

src/utils/jsx.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { fromRedactor, getNestedValueIfAvailable } from "../src/fromRedactor"
 import { JSDOM } from "jsdom"
-import { isEqual } from "lodash"
+import isEqual from "lodash.isequal"
 import omitdeep from "omit-deep-lodash"
 import expectedValue from "./expectedJson"
 

test/fromRedactor.test.ts

@@ -1,5 +1,5 @@
 import { toRedactor } from "../src/toRedactor"
-import { isEqual } from "lodash"
+import isEqual from "lodash.isequal"
 
 import expectedValue from "./expectedJson"
 import { imageAssetData } from "./testingData"

test/toRedactor.test.ts

@@ -8,7 +8,7 @@
         "strict": true,
         "jsx": "react",
         "resolveJsonModule": true,
-        "importHelpers": true,
+        "importHelpers": false,
         "suppressImplicitAnyIndexErrors": true
     },
     "include": [