1. Fix first argument to useState at type level, example:

// BEFORE
const [state, setState] = useState<string>(()=>"welcome"); // ❌Typescript announces error
// BEFORE
const [state, setState] = useState<string>(()=>"welcome"); // ✅Typescript announces success

2. Context synchronization

While version 1.79 fixed cases where HTML-based synchronization is privileged, this fix fixes synchronization when using JSX, avoiding 2 renders when connecting to contexts 💪, example:

<MyParent>
    <MyContext>
       <MyChild/>
    </MyContext>
</MyParent>

Using JSX/TSX has better performance when synchronizing contexts,thanks to the fact that MyChild will be receiving the status at the time of mount.

This version applies fixes to improve component unmounting when using useSuspense and code reductions for the context API.

1. Internal fixes for the context API, reducing the code and logic.
2. Internal fixes for the suspense API, properly cleaning up the state upon unmounting.

This version has 2 core changes:

1. Improvements in the context API to achieve state synchronization in extreme and collaborative cases (When using Atomico within other libraries like React, Vue or Angular).
2. Enhancements in the suspense API, now allowing to properly observe and clean up promises resolved in nested components.

New Features

Now usePromise is also observed by the useSuspense Hook.

With this, you can create interfaces that react from the parent component to the asynchrony of its children.

New hook useProvider

With this new hook, you can set the context instance, for example:

const Theme = createContext({ mode: "light" });

const App = c(() => {
    useProvider(Theme, { mode: "dark" });
});

Internal improvements

1. The context api is improved to synchronize states according to the HTML.

Fixes a bug when using contexts in SSR environments.
Thanks to @WickyNilliams for reporting the issue https://github.com/atomicojs/astro/issues/1.

This allows fixing the filter by instanceof a nidel of typescript types, example:

import { Mark } from "atomico";

Array.from(element.childNodes).filter(
    (el) => !(el instanceof Mark)
);

This new property allows working with slots in manual assignment mode in an agile way. For example:

import { c } from "atomico";
import { useChildNodes } from "@atomico/use-child-nodes";

const MyComponent = c(() => {
	const childNodes = useChildNodes();
	return (
		<host shadowDom={{ slotAssignment: "manual" }}>
			{childNodes
				.filter((el) => el instanceof HTMLElement)
				.map((child: HTMLElement) => (
					<slot assignNode={child}></slot>
				))}
		</host>
	);
});

customElements.define("my-component", MyComponent);

Now the type exists as a module at the TS level

Repara la issue #127 detectada por @is-jonreeves, In summary:
In node@20, an error was generated when trying to move the .github and .vscode folders that were included in Atomico as a package. In , we have fixed these folders and files in the package ✅.

This is a Fix for the new component format introduced in version 1.76, fixes the use of Host to declare meta properties and events

Thanks to @WickyNilliams who detected that:

1. useProp did not correctly reflect the state of the prop in v1.76 #126
2. useContext did not reflect the state of the context when declaring the consumer before using customElements.defined.

[!IMPORTANT]
The use of context preferably requires a synchronous order of customElements.defined declarations or the use of customElements.whenDefined if the parent working as the provider fails to transmit information to the children. Example:

// Synchronous declaration example
customElements.define("my-context", MyContext);
customElements.define("my-parent", MyParent);
customElements.define("my-child", MyChild);

// customElements.whenDefined example
customElements.whenDefined("my-parent").then(() => {
  customElements.define("my-child", CounterValue);
}); 

New features

New way to declare a component without the need for types

export const MyComponent = c(
  ({ message }) => <host shadowDom>{message}</host>,
  {
    props: { message: String },
    styles: css`
      :host {
        font-size: 3rem;
      }
    `,
  }
);

customElements.define("my-component", MyComponent);

This form is more compact than the ones already known, but with slight advantages:

1. You don't depend on types like Component or Props to build props; everything is inferred automatically.
2. Fewer lines of code, either for function or constant assignment as with the types Component and Props.
3. Ideal for environments without TypeScript, as types are automatically inferred.

useRef reactive but without rendering

References maintain their usual behavior, but now they allow maintaining an observer model for the change of current, for example:

import { createRef, useRefEffect } from "atomico";

const ref = createRef({ x: 0, y: 0 });

window.addEventListener("mousemove", ({ pageX, pageY }) => {
  ref.current = { x: pageX, y: pageY };
});

function component() {
  useRefEffect(() => {
    console.log(ref.current);
  }, [ref]);
}

1. To create better APIs that integrate with Atomico, we needed a subscriber handling without impacting rendering, currently.
2. For future forms of asynchronous rendering, one cannot depend on the closure of the parent cycle to observe changes in references (The same problem as React). That's why, for a future improvement of the Atomico renderer, useRefEffect is created to safely observe changes in references.

useRefEffect

New hook capable of observing changes in one or more references.

function component() {
  useRefEffect(() => {
    console.log(ref.current);
  }, [ref]);
}

Type improvements

useHost

Now Atomico is able to determine which types per instance come assigned with a default value. This is to maintain consistency in validation of instance props.

import { useHost, c } from "core";

export function myComponent() {
  const { current } = useHost<typeof MyComponent>();
  return (
    <host>
      <button
        onclick={() => {
          current.count++;
          current.message?.toLocaleLowerCase();
        }}
      >
        increment
      </button>
    </host>
  );
}

myComponent.props = {
  count: { type: Number, value: 0 },
};

export const MyComponent = c(myComponent);

customType

Now customTypes respect assigned values and distinguish a value to be used from JSX and a value to be used from the instance.

Now customType takes precedence over the type associated with value.

import { Props, c, createType, useRef } from "core";

function myComponent({ date }: Props<typeof myComponent>) {
  return <host shadowDom>{date.toLocaleDateString()}</host>;
}

const TypeDate = createType((value: Date | string) =>
  value instanceof Date ? value : new Date(value)
);

myComponent.props = {
  date: { type: TypeDate, value: new Date() },
};

const MyComponent = c(myComponent);

<MyComponent
  onclick={({ currentTarget }) => {
    currentTarget.date.toLocaleDateString();
  }}
  date={"December 17, 1995 03:24:00"}
>
  ...
</MyComponent>;

Previous support used shadowroot for hydration, now the standard attribute called shadowrootmode is changed

Fix hydration of nested components also hydrated when performing SSR or SSG

This Fix allows you to use moduleResolution Bundler and NodeNext at the tsconfig configuration level

This version of Atomico brings small but valuable improvements, we invite you to enjoy this new version and to share any new ideas or issues with us.

Enhancements

1. More configurable Shadow DOM.

Thanks to @efoken, you can now configure the association of Shadow DOM with your web component, for example, in the use of delegateFocus.

<host shadowDom={{ delegatesFocus: true }}/>

2. Contexts with display: contents by default

Fixes

1. TypeScript support for NodeNext is fixed.

This problem only occurred when using useAsync, Fixes the association of the render and side effects to it(useEffect, useLayoutEffect, css ) after waiting for the suspense.

Fix only for Typescript when compiling to use the identifier to mark Fragments