feat(html-to-slate-ast): add htmlToSlateASTSync function (#115)

packages/html-to-slate-ast/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @graphcms/html-to-slate-ast
 
+## 0.14.0
+
+### Minor Changes
+
+- [`c831239`](https://github.com/hygraph/rich-text/commit/c8312392b3371ba58a9b7c1fed30696ba9b2a9f7) [#115](https://github.com/hygraph/rich-text/pull/115) Thanks [@jpedroschmitz](https://github.com/jpedroschmitz)! - Add htmlToSlateASTSync function
+
+### Patch Changes
+
+- [`786beef`](https://github.com/hygraph/rich-text/commit/786beef2a0736e26239e5d6267567961d64f97ea) [#115](https://github.com/hygraph/rich-text/pull/115) Thanks [@jpedroschmitz](https://github.com/jpedroschmitz)! - Fix htmlToSlateASTSync not working
+
+* [`bb5a39a`](https://github.com/hygraph/rich-text/commit/bb5a39aec1b91dc02de18729c3bd5c9af6bf3e5c) [#115](https://github.com/hygraph/rich-text/pull/115) Thanks [@jpedroschmitz](https://github.com/jpedroschmitz)! - Revert export changes which breaks types
+
+- [`2cac5c4`](https://github.com/hygraph/rich-text/commit/2cac5c4e20f6882ac5588c31197a6be723b2294e) [#115](https://github.com/hygraph/rich-text/pull/115) Thanks [@jpedroschmitz](https://github.com/jpedroschmitz)! - Correctly export it from /client
+
+* [`eb9ffd6`](https://github.com/hygraph/rich-text/commit/eb9ffd693dd3abe285a5f37608c51304e0b0b75e) [#115](https://github.com/hygraph/rich-text/pull/115) Thanks [@jpedroschmitz](https://github.com/jpedroschmitz)! - Export htmlToSlateASTSync from /client
+
+- [`9faadd1`](https://github.com/hygraph/rich-text/commit/9faadd1138de3cf38bef56aad86197713ec5b340) [#115](https://github.com/hygraph/rich-text/pull/115) Thanks [@jpedroschmitz](https://github.com/jpedroschmitz)! - Export htmlToSlateASTSync from index
+
+## 0.14.0-canary.5
+
+### Patch Changes
+
+- Revert export changes which breaks types
+
+## 0.14.0-canary.4
+
+### Patch Changes
+
+- Export htmlToSlateASTSync from index
+
+## 0.14.0-canary.3
+
+### Patch Changes
+
+- Correctly export it from /client
+
+## 0.14.0-canary.2
+
+### Patch Changes
+
+- Export htmlToSlateASTSync from /client
+
+## 0.14.0-canary.1
+
+### Patch Changes
+
+- Fix htmlToSlateASTSync not working
+
+## 0.14.0-canary.0
+
+### Minor Changes
+
+- Add htmlToSlateASTSync function
+
 ## 0.13.3
 
 ### Patch Changes

packages/html-to-slate-ast/README.md

@@ -8,21 +8,23 @@ HTML to Slate AST converter for the Hygraph's RichTextAST format.
 
 ### 1. Install
 
-This package needs to have the packages `slate` and `slate-hyperscript` installed, and `jsdom` as well if you need to run the converter in nodejs.
+This package needs to have the packages `slate` and `slate-hyperscript` installed, and `jsdom` as well if you need to run the converter in Node.js.
 
 ```bash
 npm install [email protected] [email protected] @graphcms/html-to-slate-ast
 
-# for node or isomorphic usage, jsdom is required
+# for Node.js or isomorphic usage, jsdom is required
 npm install jsdom
 ```
 
 ### 2. Convert your data
 
-☝️ `htmlToSlateAst` returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
+If you are using Node.js, you will need to use the `htmlToSlateAST` function, which returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises). If you are using this package in the browser, you can use the `htmlToSlateASTSync` function, which is synchronous and doesn't require `jsdom`.
 
 ```js
 import { htmlToSlateAST } from '@graphcms/html-to-slate-ast';
+// Or if you are using this package in the browser
+import { htmlToSlateASTSync } from '@graphcms/html-to-slate-ast';
 
 async function main() {
   const htmlString = '<div><p>test</p></div>'; // or import from a file or database

packages/html-to-slate-ast/examples/node-script.js

@@ -11,4 +11,4 @@ async function main() {
 
 main()
   .then(() => process.exit(0))
-  .catch((e) => console.error(e));
+  .catch(e => console.error(e));

packages/html-to-slate-ast/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@graphcms/html-to-slate-ast",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "Convert HTML to Hygraph's RichTextAST (slate)",
   "license": "MIT",
   "scripts": {
-    "start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean",
-    "build": "tsdx build --tsconfig tsconfig.build.json",
+    "start": "tsup --watch",
+    "build": "tsup",
     "test": "tsdx test --passWithNoTests",
     "test:watch": "tsdx test --watch --passWithNoTests",
     "lint": "tsdx lint",
@@ -19,7 +19,8 @@
     "@types/jsdom": "^21.1.5",
     "jsdom": "^22.1.0",
     "slate": "^0.66.1",
-    "slate-hyperscript": "^0.67.0"
+    "slate-hyperscript": "^0.67.0",
+    "tsup": "^8.0.1"
   },
   "publishConfig": {
     "access": "public"
@@ -35,7 +36,7 @@
     "directory": "packages/html-to-slate-ast"
   },
   "main": "dist/index.js",
-  "module": "dist/html-to-slate-ast.esm.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "README.md",

packages/html-to-slate-ast/src/index.ts

@@ -511,6 +511,10 @@ const parseDomDocument = async (normalizedHTML: string) => {
   }
 };
 
+const parseDomDocumentSync = (normalizedHTML: string) => {
+  return new DOMParser().parseFromString(normalizedHTML, 'text/html');
+};
+
 export function htmlToSlateAST<T>(
   html: string
 ): Promise<string | Descendant | ChildNode[] | Descendant[] | T | T[]>;
@@ -524,4 +528,21 @@ export async function htmlToSlateAST(html: string) {
   return deserialize(domDocument.body, global);
 }
 
+export function htmlToSlateASTSync<T>(
+  html: string
+): string | Descendant | ChildNode[] | Descendant[] | T | T[] {
+  if (
+    typeof window === 'undefined' ||
+    typeof window.DOMParser === 'undefined'
+  ) {
+    throw new Error(
+      'This function is intended to be used in a browser environment only'
+    );
+  }
+
+  const normalizedHTML = normalizeHtml(html);
+  const domDocument = parseDomDocumentSync(normalizedHTML);
+  return deserialize(domDocument.body, window);
+}
+
 export default htmlToSlateAST;

packages/html-to-slate-ast/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig(options => ({
+  entry: ['src/index.ts'],
+  tsconfig: 'tsconfig.build.json',
+  minify: !options.watch,
+  splitting: true,
+  sourcemap: true,
+  dts: true,
+  treeshake: true,
+  clean: true,
+  format: ['esm', 'cjs'],
+}));