refactor: code style

Author: bubkoo

src/applyStyleWithOptions.ts renamed to src/applyStyleFromOptions.ts

@@ -1,6 +1,6 @@
 import { Options } from './options'
 
-export function applyStyleWithOptions<T extends HTMLElement>(
+export function applyStyleFromOptions<T extends HTMLElement>(
   node: T,
   options: Options,
 ): T {

src/cloneNode.ts

@@ -3,22 +3,23 @@ import { getBlobFromURL } from './getBlobFromURL'
 import { clonePseudoElements } from './clonePseudoElements'
 import { createImage, getMimeType, makeDataUrl, toArray } from './util'
 
-async function cloneCanvasElement(node: HTMLCanvasElement) {
-  const dataURL = node.toDataURL()
+async function cloneCanvasElement(canvas: HTMLCanvasElement) {
+  const dataURL = canvas.toDataURL()
   if (dataURL === 'data:,') {
-    return Promise.resolve(node.cloneNode(false) as HTMLCanvasElement)
+    return canvas.cloneNode(false) as HTMLCanvasElement
   }
 
   return createImage(dataURL)
 }
 
-async function cloneVideoElement(node: HTMLVideoElement, options: Options) {
-  return Promise.resolve(node.poster)
-    .then((url) => getBlobFromURL(url, options))
-    .then((data) =>
-      makeDataUrl(data.blob, getMimeType(node.poster) || data.contentType),
-    )
-    .then((dataURL) => createImage(dataURL))
+async function cloneVideoElement(video: HTMLVideoElement, options: Options) {
+  const poster = video.poster
+  const metadata = await getBlobFromURL(poster, options)
+  const dataURL = makeDataUrl(
+    metadata.blob,
+    getMimeType(poster) || metadata.contentType,
+  )
+  return createImage(dataURL)
 }
 
 async function cloneSingleNode<T extends HTMLElement>(
@@ -33,7 +34,7 @@ async function cloneSingleNode<T extends HTMLElement>(
     return cloneVideoElement(node, options)
   }
 
-  return Promise.resolve(node.cloneNode(false) as T)
+  return node.cloneNode(false) as T
 }
 
 const isSlotElement = (node: HTMLElement): node is HTMLSlotElement =>
@@ -50,17 +51,15 @@ async function cloneChildren<T extends HTMLElement>(
       : toArray<T>((nativeNode.shadowRoot ?? nativeNode).childNodes)
 
   if (children.length === 0 || nativeNode instanceof HTMLVideoElement) {
-    return Promise.resolve(clonedNode)
+    return clonedNode
   }
 
   return children
     .reduce(
       (deferred, child) =>
         deferred
-          // eslint-disable-next-line no-use-before-define
           .then(() => cloneNode(child, options))
           .then((clonedChild: HTMLElement | null) => {
-            // eslint-disable-next-line promise/always-return
             if (clonedChild) {
               clonedNode.appendChild(clonedChild)
             }
@@ -71,26 +70,29 @@ async function cloneChildren<T extends HTMLElement>(
 }
 
 function cloneCSSStyle<T extends HTMLElement>(nativeNode: T, clonedNode: T) {
-  const source = window.getComputedStyle(nativeNode)
-  const target = clonedNode.style
+  const sourceStyle = window.getComputedStyle(nativeNode)
+  const targetStyle = clonedNode.style
 
-  if (!target) {
+  if (!targetStyle) {
     return
   }
 
-  if (source.cssText) {
-    target.cssText = source.cssText
-    target.transformOrigin = source.transformOrigin
+  if (sourceStyle.cssText) {
+    targetStyle.cssText = sourceStyle.cssText
+    targetStyle.transformOrigin = sourceStyle.transformOrigin
   } else {
-    toArray<string>(source).forEach((name) => {
-      let value = source.getPropertyValue(name)
-
+    toArray<string>(sourceStyle).forEach((name) => {
+      let value = sourceStyle.getPropertyValue(name)
       if (name === 'font-size' && value.endsWith('px')) {
         const reducedFont =
           Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1
         value = `${reducedFont}px`
       }
-      target.setProperty(name, value, source.getPropertyPriority(name))
+      targetStyle.setProperty(
+        name,
+        value,
+        sourceStyle.getPropertyPriority(name),
+      )
     })
   }
 }
@@ -118,20 +120,17 @@ function cloneSelectValue<T extends HTMLElement>(nativeNode: T, clonedNode: T) {
   }
 }
 
-async function decorate<T extends HTMLElement>(
-  nativeNode: T,
-  clonedNode: T,
-): Promise<T> {
+function decorate<T extends HTMLElement>(nativeNode: T, clonedNode: T): T {
   if (!(clonedNode instanceof Element)) {
-    return Promise.resolve(clonedNode)
+    return clonedNode
   }
 
-  return Promise.resolve()
-    .then(() => cloneCSSStyle(nativeNode, clonedNode))
-    .then(() => clonePseudoElements(nativeNode, clonedNode))
-    .then(() => cloneInputValue(nativeNode, clonedNode))
-    .then(() => cloneSelectValue(nativeNode, clonedNode))
-    .then(() => clonedNode)
+  cloneCSSStyle(nativeNode, clonedNode)
+  clonePseudoElements(nativeNode, clonedNode)
+  cloneInputValue(nativeNode, clonedNode)
+  cloneSelectValue(nativeNode, clonedNode)
+
+  return clonedNode
 }
 
 export async function cloneNode<T extends HTMLElement>(
@@ -140,7 +139,7 @@ export async function cloneNode<T extends HTMLElement>(
   isRoot?: boolean,
 ): Promise<T | null> {
   if (!isRoot && options.filter && !options.filter(node)) {
-    return Promise.resolve(null)
+    return null
   }
 
   return Promise.resolve(node)

src/embedImages.ts

@@ -9,7 +9,7 @@ async function embedBackground<T extends HTMLElement>(
 ): Promise<T> {
   const background = clonedNode.style?.getPropertyValue('background')
   if (!background) {
-    return Promise.resolve(clonedNode)
+    return clonedNode
   }
 
   return Promise.resolve(background)

src/embedResources.ts

@@ -85,18 +85,15 @@ export async function embedResources(
   options: Options,
 ): Promise<string> {
   if (!shouldEmbed(cssText)) {
-    return Promise.resolve(cssText)
+    return cssText
   }
 
   const filteredCSSText = filterPreferredFontFormat(cssText, options)
-  return Promise.resolve(filteredCSSText)
-    .then(parseURLs)
-    .then((urls) =>
-      urls.reduce(
-        (deferred, url) =>
-          // eslint-disable-next-line promise/no-nesting
-          deferred.then((css) => embed(css, url, baseUrl, options)),
-        Promise.resolve(filteredCSSText),
-      ),
-    )
+  const urls = parseURLs(filteredCSSText)
+  return urls.reduce(
+    (deferred, url) =>
+      // eslint-disable-next-line promise/no-nesting
+      deferred.then((css) => embed(css, url, baseUrl, options)),
+    Promise.resolve(filteredCSSText),
+  )
 }

src/getBlobFromURL.ts

@@ -6,9 +6,7 @@ export interface Metadata {
   contentType: string
 }
 
-const cache: {
-  [url: string]: Promise<Metadata>
-} = {}
+const cache: { [url: string]: Promise<Metadata> } = {}
 
 function getCacheKey(url: string, includeQueryParams: boolean | undefined) {
   let key = url.replace(/\?.*/, '')
@@ -25,7 +23,7 @@ function getCacheKey(url: string, includeQueryParams: boolean | undefined) {
   return key
 }
 
-export function getBlobFromURL(
+export async function getBlobFromURL(
   url: string,
   options: Options,
 ): Promise<Metadata> {

src/index.ts

@@ -1,132 +1,96 @@
 import { Options } from './options'
 import { cloneNode } from './cloneNode'
 import { embedImages } from './embedImages'
-import { applyStyleWithOptions } from './applyStyleWithOptions'
+import { applyStyleFromOptions } from './applyStyleFromOptions'
 import { embedWebFonts, getWebFontCSS } from './embedWebFonts'
 import {
-  getNodeWidth,
-  getNodeHeight,
+  getImageSize,
   getPixelRatio,
   createImage,
   canvasToBlob,
   nodeToDataURL,
+  checkCanvasDimensions,
 } from './util'
 
-function getImageSize(node: HTMLElement, options: Options = {}) {
-  const width = options.width || getNodeWidth(node)
-  const height = options.height || getNodeHeight(node)
-
-  return { width, height }
-}
-
 export async function toSvg<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<string> {
   const { width, height } = getImageSize(node, options)
-
-  return Promise.resolve(node)
-    .then((nativeNode) => cloneNode(nativeNode, options, true))
-    .then((clonedNode) => embedWebFonts(clonedNode!, options))
-    .then((clonedNode) => embedImages(clonedNode, options))
-    .then((clonedNode) => applyStyleWithOptions(clonedNode, options))
-    .then((clonedNode) => nodeToDataURL(clonedNode, width, height))
+  const clonedNode = (await cloneNode(node, options, true)) as HTMLElement
+  await embedWebFonts(clonedNode, options)
+  await embedImages(clonedNode, options)
+  applyStyleFromOptions(clonedNode, options)
+  const datauri = await nodeToDataURL(clonedNode, width, height)
+  return datauri
 }
 
-const dimensionCanvasLimit = 16384 // as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
-
-function checkCanvasDimensions(canvas: HTMLCanvasElement) {
-  if (
-    canvas.width > dimensionCanvasLimit ||
-    canvas.height > dimensionCanvasLimit
-  ) {
-    if (
-      canvas.width > dimensionCanvasLimit &&
-      canvas.height > dimensionCanvasLimit
-    ) {
-      if (canvas.width > canvas.height) {
-        canvas.height *= dimensionCanvasLimit / canvas.width
-        canvas.width = dimensionCanvasLimit
-      } else {
-        canvas.width *= dimensionCanvasLimit / canvas.height
-        canvas.height = dimensionCanvasLimit
-      }
-    } else if (canvas.width > dimensionCanvasLimit) {
-      canvas.height *= dimensionCanvasLimit / canvas.width
-      canvas.width = dimensionCanvasLimit
-    } else {
-      canvas.width *= dimensionCanvasLimit / canvas.height
-      canvas.height = dimensionCanvasLimit
-    }
-  }
-}
 export async function toCanvas<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<HTMLCanvasElement> {
-  return toSvg(node, options)
-    .then(createImage)
-    .then((img) => {
-      const canvas = document.createElement('canvas')
-      const context = canvas.getContext('2d')!
-      const ratio = options.pixelRatio || getPixelRatio()
-      const { width, height } = getImageSize(node, options)
+  const svg = await toSvg(node, options)
+  const img = await createImage(svg)
 
-      const canvasWidth = options.canvasWidth || width
-      const canvasHeight = options.canvasHeight || height
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')!
+  const ratio = options.pixelRatio || getPixelRatio()
+  const { width, height } = getImageSize(node, options)
+  const canvasWidth = options.canvasWidth || width
+  const canvasHeight = options.canvasHeight || height
 
-      canvas.width = canvasWidth * ratio
-      canvas.height = canvasHeight * ratio
+  canvas.width = canvasWidth * ratio
+  canvas.height = canvasHeight * ratio
 
-      if (!options.skipAutoScale) {
-        checkCanvasDimensions(canvas)
-      }
-      canvas.style.width = `${canvasWidth}`
-      canvas.style.height = `${canvasHeight}`
+  if (!options.skipAutoScale) {
+    checkCanvasDimensions(canvas)
+  }
+  canvas.style.width = `${canvasWidth}`
+  canvas.style.height = `${canvasHeight}`
 
-      if (options.backgroundColor) {
-        context.fillStyle = options.backgroundColor
-        context.fillRect(0, 0, canvas.width, canvas.height)
-      }
+  if (options.backgroundColor) {
+    context.fillStyle = options.backgroundColor
+    context.fillRect(0, 0, canvas.width, canvas.height)
+  }
 
-      context.drawImage(img, 0, 0, canvas.width, canvas.height)
+  context.drawImage(img, 0, 0, canvas.width, canvas.height)
 
-      return canvas
-    })
+  return canvas
 }
 
 export async function toPixelData<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<Uint8ClampedArray> {
   const { width, height } = getImageSize(node, options)
-  return toCanvas(node, options).then((canvas) => {
-    const ctx = canvas.getContext('2d')!
-    return ctx.getImageData(0, 0, width, height).data
-  })
+  const canvas = await toCanvas(node, options)
+  const ctx = canvas.getContext('2d')!
+  return ctx.getImageData(0, 0, width, height).data
 }
 
 export async function toPng<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<string> {
-  return toCanvas(node, options).then((canvas) => canvas.toDataURL())
+  const canvas = await toCanvas(node, options)
+  return canvas.toDataURL()
 }
 
 export async function toJpeg<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<string> {
-  return toCanvas(node, options).then((canvas) =>
-    canvas.toDataURL('image/jpeg', options.quality || 1),
-  )
+  const canvas = await toCanvas(node, options)
+  return canvas.toDataURL('image/jpeg', options.quality || 1)
 }
 
 export async function toBlob<T extends HTMLElement>(
   node: T,
   options: Options = {},
 ): Promise<Blob | null> {
-  return toCanvas(node, options).then(canvasToBlob)
+  const canvas = await toCanvas(node, options)
+  const blob = await canvasToBlob(canvas)
+  return blob
 }
 
 export async function getFontEmbedCSS<T extends HTMLElement>(