separated client side and server side for fixing dependency issues

techlism · Nov 4, 2024 · a5fe18d · a5fe18d
1 parent 772560d
commit a5fe18d
Show file tree

Hide file tree

Showing 8 changed files with 503 additions and 459 deletions.
diff --git a/README.md b/README.md
@@ -362,11 +362,13 @@ const json = converter.toJSON(html);
 You can customize the converter's behavior using the `ConverterConfig` interface.
 
 ```typescript
-const config = {
+import { type ConverterConfig, HTMLElementType,ServerHTMLJSONConverter } from 'html-json-converter';
+
+const config : ConverterConfig = {
   useTab: false,      // Use spaces instead of tabs for indentation
   tabSize: 2,         // Number of spaces per indentation level
   customElements: {   // Register custom elements
-    'custom-tag': { type: 'normal', allowChildren: true, allowAttributes: true }
+    'custom-tag': { type: HTMLElementType.NORMAL, allowChildren: true, allowAttributes: true }
   }
 };
 

diff --git a/package.json b/package.json
@@ -4,6 +4,14 @@
   "version": "3.0.0",
   "description": "A simple HTML to JSON and JSON to HTML converter",
   "main": "dist/index.js",
+  "client": "dist/client.js",
+  "exports" : {
+    ".": {
+      "client" : "./dist/client.js",
+      "server" : "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
   "scripts": {
     "dev": "tsx watch src/index.ts",
     "start": "node ./dist/index.js",
@@ -22,7 +30,13 @@
     "typescript",
     "html",
     "json",
-    "converter"
+    "converter",
+    "html-to-json",
+    "html to json",
+    "json-to-html",
+    "json to html",
+    "html to json converter",
+    "json to html converter"
   ],
   "author": "Techlism <[email protected]> (https://github.com/techlism)",
   "bugs": {

diff --git a/src/base.ts b/src/base.ts
diff --git a/src/client.ts b/src/client.ts
@@ -0,0 +1,32 @@
+import { BaseHTMLJSONConverter, type ConverterConfig } from "./base.js";
+// Client-side implementation
+export class ClientHTMLJSONConverter extends BaseHTMLJSONConverter {
+    protected parseHTML(html: string): Element {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, "text/html");
+        const { documentElement, body, head } = doc;
+
+        const isFullDocument = BaseHTMLJSONConverter.DOCUMENT_INDICATORS.some((indicator) =>
+            html.toLowerCase().startsWith(indicator.toLowerCase())
+        );
+
+        if (isFullDocument && documentElement?.tagName.toLowerCase() === "html") {
+            return documentElement;
+        }
+
+        // Modified logic for head-only elements and empty structure
+        const headElement = head.firstElementChild;
+        const bodyElement = body.firstElementChild;
+
+        if (!headElement && !bodyElement) {
+            throw new Error("No HTML element found");
+        }
+
+        // Check head first, then body
+        if (html.toLowerCase().startsWith("<head")) {
+            return head;
+        }
+
+        return bodyElement || headElement as Element;
+    }
+}
diff --git a/src/index.test.ts b/src/index.test.ts
@@ -355,4 +355,24 @@ describe("ClientHTMLJSONConverter", () => {
 	test("throws error for empty input", () => {
 		expect(() => converter.toJSON("")).toThrow("No HTML element found");
 	});
+	// Add these tests to index.test.ts
+	describe("ClientHTMLJSONConverter edge cases", () => {
+		let converter: ClientHTMLJSONConverter;
+
+		beforeEach(() => {
+			converter = new ClientHTMLJSONConverter();
+		});
+
+		test("handles full HTML documents", () => {
+			const html = '<!DOCTYPE html><html><head><title>Test</title></head><body></body></html>';
+			const result = converter.toJSON(html);
+			expect(result.tag).toBe("html");
+		});
+
+		test("handles head-only elements", () => {
+			const html = '<head><title>Test</title></head>';
+			const result = converter.toJSON(html);
+			expect(result.tag).toBe("head");
+		});
+	});
 });