Improve types for Html2React processors

Description

Right now, using TypeScript when declarating a processor for the Html2React package has some problems (see discussion here: https://github.com/frontity/frontity/commit/f7f2e6eab85889465764ae70d1fe73364db5b0ad#r37684196):

• node type is not inferred correctly and a type guard is needed to consider it of type Element.
• parent and children nodes cannot be typed with the current implementation. Also, the default props type of this nodes is unknown which is not a good default type.

Possible solution

To solve this issue, the idea is to pass not only the types of the props but the type of the element as well and its parent and children attributes. Some of this attributes could be optional and the final types would be the passed types merged with a default type.

E.g.

type LazyImgWrapper = {
  type: "element";
  component: "figure";
  children: [LazyImg];
}

type LazyImg = {
  type: "element";
  component: "img";
  props: { "data-src": string };
  parent: LazyImgWrapper;
};

const myProcessor: Processor<LazyImg> = {
  test: ({ node }) => { },
  processor: ({ node }) => {
    node.props["data-src"] // <- this should be of type `string`
    node.parent.component // <- this should be of type `"figure"`
  }
};

[iamuchejude]

We’d have to refractor the definition of some of the interfaces. The reason is that we have a problem with inferring the types of.

The proposed approach to solving this issue include replacing the default type definitions, exposing the interfaces for Element, Text and Comment so users can define custom interface be made by extending them.

import { Element, ElementProps, Processor } from "@frontity/html2react/types.ts";

// You could create a new interface that extends `Element`:
interface CustomElement extends Element {
	props: ElementProps & {
		isAuthenticated: boolean;
	}
}

const userProcessor: Processor<CustomElement> = {
	...
	processor: ({ node }) {
		node.props.css = css``; // this is available as a result of the union with the ElementProps
		node.props.isAuthenticated = true;
		return node;
	} 
}

// Or you could pass a custom element definition
type CustomElementType = {
	type: "element";
	props: ElementProps<HTMLIFrameElement> & {
		src: string;
	}
}


const iframeProcessor: Processor<CustomElementType> = {
	...
	processor: ({ node }) {
		node.iframe.title = "Hello"; // title is an HTML iframe prop
		node.props.css = css``; // this is also going to be available
		return node;
	} 
}

@DAreRodz is currently working on these features and will keep working on it till it’s done. So, if you have any questions, please, do ask him.

[luisherranz]

@darerodz, I have assigned this to you as well, as you are going to work on this together.

Could you please keep here a record of what’s going on?

• The problems you’re facing.
• The approach that you tried and it’s not working, and why it’s not working.
• The ideas you have in mind to solve it.