How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Question

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Starting with this code snippet: convert utilizes svgInjector to start and terminate a resource.

export async function convert(
  serializedSvg: string,
  svgSourceId: string,
  containerId: string
): Promise<string> {
  const svgInjector = new SvgInjector(serializedSvg, containerId).inject();
  if (!svgInjector.injectedElement) {
    throw new Error("Svg not injected");
  }

  const doc = new TargetDocument({});
  const xml = convertRecursively(
    svgInjector.injectedElement,
    doc,
    {
      svgSourceId,
    }
  );

  svgInjector.remove();

  return doc.saveXML();
}

Is there a way to refactor this to have a higher order function handle the initiation, provision, and destruction of the resource svgInjector.injectedElement for the convert function?

UPDATE:

Below is a simple reproducible demo:

var svg = '<svg xmlns="http://www.w3.org/2000/svg"><text x="20" y="20">I am made available in DOM</text></svg>'

function convert(
  serializedSvg,
  containerId
) {
  // make resource accessible (cross-cutting concern)
  var container = document.getElementById(containerId);
  var resource = new DOMParser().parseFromString(serializedSvg, "image/svg+xml").documentElement;
  container.appendChild(resource);

  // core conversion functionality manipulates the resource
  console.log(resource.getBBox())
  
  // clean up resource (cross-cutting concern)
  resource.remove()
}

convert(svg, "container")

<!DOCTYPE html>
<html>
<head>
  <title>Minimal</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>

UPDATE 2

Presenting a TypeScript version based on the JavaScript from the previous update

var svg = '<svg xmlns="http://www.w3.org/2000/svg"><text x="20" y="20">I am made available in DOM</text></svg>'

function convert(
  serializedSvg: string,
  containerId: string
) {
  // make resource accessible (cross-cutting concern)
  var container = document.getElementById(containerId);
  if (!(container instanceof HTMLDivElement)) {
    throw new Error("Expected a div element")
  }
  var resource = new DOMParser().parseFromString(serializedSvg, "image/svg+xml").documentElement;
  if (!(resource instanceof SVGSVGElement)) {
    throw new Error("Expected an SVG element")
  }
  container.appendChild(resource);

  // core conversion functionality manipulates the resource
  console.log(resource.getBBox())

  // clean up resource (cross-cutting concern)
  resource.remove()
}

convert(svg, "container")

javascript typescript functional-programming higher-order-functions

Answer 1

Answer №1

Considering your requirements, one approach could be to refactor the control flow in a way that the convert() function utilizes or receives a "resource manager" responsible for handling the resource's creation, initialization, and deletion tasks. The idea is to define a generic type ResourceManager as follows:

type ResourceManager<T, I> = <R>(initProps: I, cb: (resource: T) => R) => R;

This ResourceManager<T, I> acts as a blueprint allowing you to manage different types of resources using specific implementations tailored to each resource type. For instance, you can abstract out a separate

ResourceManager<SVGSVGElement, { serializedSvg: string, containerId: string }>

from the existing convert() function:

const svgManager: ResourceManager<SVGSVGElement, { serializedSvg: string, containerId: string }> =
  (initProps, cb) => {

    // Acquire necessary resources
    var container = document.getElementById(initProps.containerId);
    if (!(container instanceof HTMLDivElement)) {
      throw new Error("Expected a div element");
    }
    var resource = new DOMParser().parseFromString(initProps.serializedSvg, "image/svg+xml").documentElement;
    if (!(resource instanceof SVGSVGElement)) {
      throw new Error("Expected an SVG element")
    }
    container.appendChild(resource);

    // Delegate core functions to callback
    const ret = cb(resource);

    // Clean up after use
    resource.remove()

    // Return output from callback
    return ret;
  }

In this scheme, the actual logic or "core functionality" is deferred to the provided callback function, simplifying the convert() function as shown below:

function convert(
  serializedSvg: string,
  containerId: string
) {
  svgManager({ serializedSvg, containerId }, (resource => console.log(resource.getBBox())));
}

The snippet

resource => console.log(resource.getBBox())

depicts the operation performed on the acquired resource without concerning itself with resource management details.

Hopefully, this conceptual streamlining gives you some insights or suggestions. Best of luck with your endeavor!

Explore code in TypeScript Playground

Answer 2

Considering your requirements, one approach could be to refactor the control flow in a way that the convert() function utilizes or receives a "resource manager" responsible for handling the resource's creation, initialization, and deletion tasks. The idea is to define a generic type ResourceManager as follows:

type ResourceManager<T, I> = <R>(initProps: I, cb: (resource: T) => R) => R;

This ResourceManager<T, I> acts as a blueprint allowing you to manage different types of resources using specific implementations tailored to each resource type. For instance, you can abstract out a separate

ResourceManager<SVGSVGElement, { serializedSvg: string, containerId: string }>

from the existing convert() function:

const svgManager: ResourceManager<SVGSVGElement, { serializedSvg: string, containerId: string }> =
  (initProps, cb) => {

    // Acquire necessary resources
    var container = document.getElementById(initProps.containerId);
    if (!(container instanceof HTMLDivElement)) {
      throw new Error("Expected a div element");
    }
    var resource = new DOMParser().parseFromString(initProps.serializedSvg, "image/svg+xml").documentElement;
    if (!(resource instanceof SVGSVGElement)) {
      throw new Error("Expected an SVG element")
    }
    container.appendChild(resource);

    // Delegate core functions to callback
    const ret = cb(resource);

    // Clean up after use
    resource.remove()

    // Return output from callback
    return ret;
  }

In this scheme, the actual logic or "core functionality" is deferred to the provided callback function, simplifying the convert() function as shown below:

function convert(
  serializedSvg: string,
  containerId: string
) {
  svgManager({ serializedSvg, containerId }, (resource => console.log(resource.getBBox())));
}

The snippet

resource => console.log(resource.getBBox())

depicts the operation performed on the acquired resource without concerning itself with resource management details.

Hopefully, this conceptual streamlining gives you some insights or suggestions. Best of luck with your endeavor!

Explore code in TypeScript Playground

Answer 3

Answer №2

After much effort, this is the best solution I have come up with so far. I am hopeful that someone cleverer will share a superior alternative.

As I analyze the solution provided below, I have pinpointed two weaknesses:

The enhancer's typing is not generic, limiting its reusability
The enhancer necessitates binding, obstructing enhancer composition

    type Props = {
      svg: SVGSVGElement;
      svgSourceId: string;
      containerId: string;
    };

    async function convertBase(props: Props): Promise<string> {
      const doc = new TargetDocument({});
      const xml = convertRecursively(props.svg, doc, {
        svgSourceId: props.svgSourceId,
      });

      return doc.saveXML();
    }

    type EnhancerProps = {
      serializedSvg: string;
      svgSourceId: string;
      containerId: string;
    };

    type EnhancerPropsLight = {
      svgSourceId: string;
      containerId: string;
    };

    function enhancer(fn: Function, props: EnhancerProps) {
      const rest = omit(["serializedSvg"])(props) as EnhancerPropsLight;
      const svgInjector = new SvgInjector(
        props.serializedSvg,
        props.containerId
      ).inject();
      if (!svgInjector.injectedElement) {
        throw new Error("Svg not injected");
      }

      const res = convertToTgmlBase({ ...rest, svg: svgInjector.injectedElement });

      svgInjector.remove();

      return res;
    }

    const convert = enhancer.bind(null, convertBase);
    export { convert };

Answer 4

After much effort, this is the best solution I have come up with so far. I am hopeful that someone cleverer will share a superior alternative.

As I analyze the solution provided below, I have pinpointed two weaknesses:

The enhancer's typing is not generic, limiting its reusability
The enhancer necessitates binding, obstructing enhancer composition

    type Props = {
      svg: SVGSVGElement;
      svgSourceId: string;
      containerId: string;
    };

    async function convertBase(props: Props): Promise<string> {
      const doc = new TargetDocument({});
      const xml = convertRecursively(props.svg, doc, {
        svgSourceId: props.svgSourceId,
      });

      return doc.saveXML();
    }

    type EnhancerProps = {
      serializedSvg: string;
      svgSourceId: string;
      containerId: string;
    };

    type EnhancerPropsLight = {
      svgSourceId: string;
      containerId: string;
    };

    function enhancer(fn: Function, props: EnhancerProps) {
      const rest = omit(["serializedSvg"])(props) as EnhancerPropsLight;
      const svgInjector = new SvgInjector(
        props.serializedSvg,
        props.containerId
      ).inject();
      if (!svgInjector.injectedElement) {
        throw new Error("Svg not injected");
      }

      const res = convertToTgmlBase({ ...rest, svg: svgInjector.injectedElement });

      svgInjector.remove();

      return res;
    }

    const convert = enhancer.bind(null, convertBase);
    export { convert };

How can I transform this statement into a higher-order function that offers a resource instead of using an object for initialization and destruction?

Answer №1

Answer №2

Similar questions

After the jquery.show function is executed, an unexpected WebDriverException occurred, indicating an unknown error that prevents focusing

What are the steps to send $http requests from AngularJS to a local server in an app?

Having trouble with the dropdown multiselect feature in AngularJS?

Tips for retrieving the tenth document in Firestore Query using JavaScript

Javascript Calculator with Dual Input Fields

Steps for choosing an option in MUI select list using jest

Error: Unable to locate module - Invalid generator instance detected. The Asset Modules Plugin has been started with a generator object that does not adhere to the API standards

Nestjs crashes with "terminated" on an Amazon EC2 instance

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

Using Generic Types in TypeScript Files for React Components

issues arise post-transpilation with creating errors

Uploading Images to Imgur with Angular 4

Utilizing JQuery and AJAX to upload unprocessed data to a WebAPI

Customized Box with MaterialUI Styling

Tips for updating an element in an array by using another element from a separate array

Angular-Translate fails to function within a tag's attribute

Guide on how to retrieve a list of objects from a controller and showcase them utilizing JQuery in a Spring MVC application with ajax functionality

The object for checking Ajax connections is not providing any values

Can you explain the variance between the (Record<string, unknown>) and object type?

What sets apart extending and intersecting interfaces in TypeScript?