remove need for esModuleInterop

Author: danomatic

jest.config.cjs

@@ -4,12 +4,9 @@
 module.exports = {
   // ESM config
   transform: {
-    '\\.[jt]sx?$': 'ts-jest'
-  },
-  globals: {
-    'ts-jest': {
+    '\\.[jt]sx?$': ['ts-jest', {
       useESM: true
-    }
+    }]
   },
   moduleNameMapper: {
     '(.+)\\.js': '$1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-html",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "author": "Dan Blaisdell dan@manifestwebdesign.com",
   "description": "Html component for react-pdf with CSS support",
   "keywords": [

src/Html.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import renderHtml, { HtmlRenderers } from './render.js';
 import { HtmlStyle, HtmlStyles } from './styles.js';
 

src/camelize.ts

@@ -0,0 +1,85 @@
+'use strict';
+
+function walk(obj: any) {
+  if (!obj || typeof obj !== 'object') {
+    return obj;
+  }
+  if (isDate(obj) || isRegex(obj)) {
+    return obj;
+  }
+  if (isArray(obj)) {
+    return map(obj, walk);
+  }
+  return reduce(
+    objectKeys(obj),
+    function (acc: any, key: string) {
+      const camel = camelCase(key);
+      acc[camel] = walk(obj[key]);
+      return acc;
+    },
+    {}
+  );
+}
+
+function camelCase(str: string) {
+  return str.replace(/[_.-](\w|$)/g, function (_, x) {
+    return x.toUpperCase();
+  });
+}
+
+const isArray =
+  Array.isArray ||
+  function (obj) {
+    return Object.prototype.toString.call(obj) === '[object Array]';
+  };
+
+const isDate = function (obj: any) {
+  return Object.prototype.toString.call(obj) === '[object Date]';
+};
+
+const isRegex = function (obj: any) {
+  return Object.prototype.toString.call(obj) === '[object RegExp]';
+};
+
+const has = Object.prototype.hasOwnProperty;
+const objectKeys =
+  Object.keys ||
+  function (obj) {
+    const keys = [];
+    for (const key in obj) {
+      if (has.call(obj, key)) {
+        keys.push(key);
+      }
+    }
+    return keys;
+  };
+
+function map(xs: any, f: any) {
+  if (xs.map) {
+    return xs.map(f);
+  }
+  const res = [];
+  for (let i = 0; i < xs.length; i++) {
+    res.push(f(xs[i], i));
+  }
+  return res;
+}
+
+function reduce(xs: any, f: any, acc: any) {
+  if (xs.reduce) {
+    return xs.reduce(f, acc);
+  }
+  for (let i = 0; i < xs.length; i++) {
+    acc = f(acc, xs[i], i);
+  }
+  return acc;
+}
+
+const camelize = function (obj: any) {
+  if (typeof obj === 'string') {
+    return camelCase(obj);
+  }
+  return walk(obj);
+};
+
+export default camelize;

src/parse.ts

@@ -6,11 +6,19 @@ import {
   TextNode,
 } from 'node-html-parser';
 import { Tag } from './tags.js';
-import cssTree, { Block, Declaration, List, Rule, StyleSheet } from 'css-tree';
+import {
+  generate,
+  parse as cssParse,
+  Block,
+  Declaration,
+  List,
+  Rule,
+  StyleSheet,
+} from 'css-tree';
 import supportedStyles from './supportedStyles.js';
 import { HtmlStyle, HtmlStyles } from './styles.js';
 import remoteCss from './resolveCssFile.js';
-import camelize from 'camelize';
+import camelize from './camelize.js';
 
 export type HtmlContent = (HtmlElement | string)[];
 
@@ -38,7 +46,7 @@ export const convertRule = (
       property: camelize(entry.property as string),
     }))
     .reduce((style, { property, value }: Declaration) => {
-      let valueString = cssTree.generate(value);
+      let valueString = generate(value);
       if (property && value) {
         if (property === 'fontFamily') {
           valueString = valueString.replace(/["']+/g, '');
@@ -74,7 +82,7 @@ export const convertRule = (
 export const convertStylesheet = (stylesheet: string): HtmlStyles => {
   const response = {} as HtmlStyles;
   try {
-    const parsed = cssTree.parse(stylesheet) as StyleSheet;
+    const parsed = cssParse(stylesheet) as StyleSheet;
     const rules = parsed.children.filter(
       (rule) => rule.type === 'Rule' && rule.prelude?.type === 'SelectorList'
     ) as List<Rule>;
@@ -84,7 +92,7 @@ export const convertStylesheet = (stylesheet: string): HtmlStyles => {
         return;
       }
       rule.prelude.children.forEach((selector) => {
-        const selectorString = cssTree.generate(selector);
+        const selectorString = generate(selector);
         response[selectorString] = style;
       });
     });
@@ -99,7 +107,7 @@ export const convertElementStyle = (
   tag: string
 ): HtmlStyle | undefined => {
   try {
-    const parsed = cssTree.parse(`${tag} { ${styleAttr} }`) as StyleSheet;
+    const parsed = cssParse(`${tag} { ${styleAttr} }`) as StyleSheet;
     const rules = parsed.children.filter(
       (rule) => rule.type === 'Rule' && rule.prelude?.type === 'SelectorList'
     ) as List<Rule>;

src/render.test.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import * as React from 'react';
 // const stringify = require('json-stringify-safe');
 import { HtmlContent, HtmlElement } from './parse.js';
 import renderHtml, {
@@ -29,13 +29,12 @@ import ReactPDF, {
   Font,
   renderToString,
 } from '@react-pdf/renderer';
-import path from 'path';
+import * as path from 'path';
 import renderers, {
   renderBlock,
   renderNoop,
   renderPassThrough,
 } from './renderers.js';
-import exp from 'constants';
 
 const inlineElement: HtmlElement = {
   tag: 'span',

src/render.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import * as React from 'react';
 import renderers, {
   renderBlock,
   renderInline,
@@ -149,7 +149,11 @@ export const bucketElements = (
   return buckets;
 };
 
-type RenderedContent = ReactElement | ReactElement[] | string | string[];
+type RenderedContent =
+  | React.ReactElement
+  | React.ReactElement[]
+  | string
+  | string[];
 
 export const renderElement = (
   element: HtmlElement | string,
@@ -330,7 +334,7 @@ const renderHtml = (
     stylesheet?: HtmlStyles | HtmlStyles[];
     resetStyles?: boolean;
   } = {}
-): ReactElement => {
+): React.ReactElement => {
   const defaultFontSize = 18;
   const fontSizeStyle = { fontSize: defaultFontSize };
   const styles = options.style

src/renderers.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {
   Circle,
   ClipPath,
@@ -25,7 +25,7 @@ import { HtmlElement } from './parse.js';
 import { HtmlStyle } from './styles.js';
 import { lowerAlpha, orderedAlpha, upperAlpha } from './ordered.type.js';
 import { Style } from '@react-pdf/types';
-import camelize from 'camelize';
+import camelize from './camelize.js';
 
 export const renderNoop: HtmlRenderer = ({ children }) => <></>;
 

src/resolveCssFile.ts

@@ -1,7 +1,7 @@
-import fs from 'fs';
-import url from 'url';
-import path from 'path';
-import fetch from 'sync-fetch';
+import * as fs from 'fs';
+import * as url from 'url';
+import * as path from 'path';
+import * as fetch from 'sync-fetch';
 
 const isBrowser = !fs || !url || !path;
 

tsconfig.json

@@ -46,7 +46,7 @@
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */
     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    //    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */