Name Of Function Is Not Descriptive

tobySolutions commented 1 year ago

For CodeDay Labs students only, do not assign to anyone else

The function h in /million/packages/jsx-runtime/index.ts has the following code:

import type { Props, VNode } from '../million';

export const h = (
  type: string,
  props: Props | null = {},
  ...children: VNode[]
): VNode => {
  if (props === null) props = {};
  props.children = children;
  return {
    type,
    props,
  };
};
export { h as createElement, h as jsx, h as jsxs };

The above code is problematic and gives a bad developer experience because of the bad naming of h that it has.

In the above block of code, we can see that we have a Typescript function that is meant to return a Virtual DOM node based on the parameters: type (type of dom element e.g p, h1, and so on), props (like attributes of a React dom component which children is technically a part of) and children (in this case the content of the component and what is being with dom element).

The code above just returns something of the following format to us h('div', { id: 'foo' }, 'hello') which is actually <div id="foo">hello</div>

What we need to do are the following steps:

Pick a better name (e.g element, domElement or virtualDomElement)
Edit the function name to whatever you've decided earlier, assuming I chose element, I would have:
```
import type { Props, VNode } from '../million';
```

export const element = ( type: string, props: Props | null = {}, ...children: VNode[] ): VNode => { if (props === null) props = {}; props.children = children; return { type, props, }; };

4. In the last line where you export (`export { h as createElement, h as jsx, h as jsxs };`), change the function name there too, because failure to do this will break the codebase. You should then have something like this:

```jsx
import type { Props, VNode } from '../million';

export const element = (
  type: string,
  props: Props | null = {},
  ...children: VNode[]
): VNode => {
  if (props === null) props = {};
  props.children = children;
  return {
    type,
    props,
  };
};

export { element as createElement, element as jsx, element as jsxs };