Add support for fragments

You can now use the <></> fragment tag through jsx-runtime.

Improve the use of props

Previously null values were kept as null, this did not favor the use of default parameters when destructing the props object or defining a default prop when using a callback as a value reducer, example:

function component({ value = 100 }: Props<typeof component>) {
    return <host>{value}</host>;
}

component.props = { value: Number };

If prop is defined as null, value will be equal to null. but since [email protected] any value declared as null will be defined as undefined in the component's prop object, so value will be defined as undefined

Reference : https://github.com/atomicojs/atomico/issues/90#issuecomment-1232942127

Fixes types for TS with erroneous behavior from version 1.62.0. Bug reference: https://github.com/atomicojs/atomico/issues/90

This context synchronization error occurs when mounting the components directly in the HTML, now atomico synchronizes the contexts in non-parallel mounting situations.

The new Context api is introduced and internal and external improvements are added at the type level

1. rewrite Atomico virtualDOM and hook types for better internal maintainability: Now Atomico's internal api shares the exposed type api, which improves maintainability as they are now directly related.
2. Now the pipeline before test validates Atomico typing internally, externally and tsx through Typescript.
3. Add context as part of the core.

New context api

This new api facilitates communication between components, example:

Paso 1: declarar el contexto y consumirlo.

import { createContext, useContext, c } from "atomico";

export const Provider = createContext({ value: 0 });

function component() {
  const { value } = useContext(Provider);

  return <host>{value}</host>;
}

export const Component = c(component);

Paso 2: Instantiate the context, The <Provider> component allows to define the value for the components nested inside the <Provider/>

import { Provider, Component } from "./component";

<Provider value={{ value: "New value!" }}>
  <div>
    <div>
      <Component></Component>
    </div>
  </div>
</Provider>;

This fixes type validation when using the Component type, correctly completing meta props

https://github.com/atomicojs/atomico/issues/82#issuecomment-1187687609

Now the Component type allows, through a second parameter, to define meta types, such as methods and events:

import { Component, useEvent } from "atomico";

interface Props {
  checked: boolean;
}

interface MetaProps {
  onChange: Event;
}

const myComponent: Component<Props, MetaProps> = ({ checked }) => {
  const dispatchChange = useEvent("Change");
  return (
    <host>
      <input checked={checked} onchange={dispatchChange} />
    </host>
  );
};

myComponent.props = {
  checked: Boolean,
};

export const MyComponent = c(myComponent);

Meta Props are only declared for JSX(Atomico, Preact and React), example:

<MyComponent  onChange={(event)=>{
    event.currentTarget.checked // TS: boolean
}}/>

This allows for light verification, before including the SSR script

Fix fixture type for TS

now the return of the instance is correctly inferred

const element = fixture<typeof MyElement>(<MyElement/>)

update README.md

adaptability in npm is improved and more sponsors are added

this changes the rendering process of Atomico, Atomico used to individualize the text nodes, now it concatenates them to facilitate hydration from the SSR.

this allows improvements at the level of DOM analysis, since now Atomico reduces the DOM nodes of the Text type, example:

// Before, in this case atomic generated 6 nodes
[1,2,3,4] // Mark,Text(1), Text(2), Text(3), Text(4), Mark

// After, Now atomico spawns only 3 nodes
[1,2,3,4] // Mark,Text(1234), Mark

useHook

This hook is used internally to know the render cycle state of the hooks, this update exposes this hook to be used by third parties. The usage references are in the same Atomico core in the following hooks, useState, useMemo, useEffect, useLayouteEffect and useRef

This enhancement exposes on return as String, the type, attributes, and innerHTML properties.

this is meta information needed to extend SSR to other environments, example Next js

This new mode allows you to not rely on options.render to detect SSR, instead atomico/ssr will set options.ssr to true.

1. Allow innerHTML to be injected into content when using SSR, to fix bug in Astro
2. fix concatenation in fragmentBefore