Frontend Thursday vol. 64 – TypeScript 4.5, Beta React 18

1. Typescript 4.5

Zgodnie z planem, w tym tygodniu TypeScript 4.5 opuścił betę i otrzymał stabilną wersję. Co wyjątkowe wersja stabilna różni się trochę od wersji beta, bo porzucona została funkcjonalność wsparcia ECMAScript Modules w node.js. Jak przyznają twórcy decyzja została podjęta przede wszystkim ze względu na feedback użytkowników – zaproponowane rozwiązanie było nieczytelne i wprowadzało jeszcze więcej zamieszania do i tak zawiłego już ekosystemu pakietów w JavaScript. Nie tracąc więcej czasu na to co nie trafiło do nowego TypeScripta, przyjrzymy się temu co do niego trafiło.

W świeżo wypieczonej wersji języka od Microsoftu znajdziemy nowy utility type Awaited. Jego zadaniem jest spłaszczenie wszystkich struktur opartych o Promise i PromiseLike. Jeśli na co dzień nie modelujecie skomplikowanych struktur danych to również na nim skorzystacie, bo Promise.all oraz Promise.race będą wykorzystywać go w swoich deklaracjach.

// A = string
type A = Awaited<Promise<string>>;

// B = number
type B = Awaited<Promise<Promise<number>>>;

// C = boolean | number
type C = Awaited<boolean | Promise<number>>;

declare function MaybePromise<T>(value: T): T | Promise<T> | PromiseLike<T>;

async function doSomething(): Promise<[number, number]> {
    const result = await Promise.all([
        MaybePromise(100),
        MaybePromise(200)
    ]);

    // in Typescript 4.4 this caused following error:
    //    [number | Promise<100>, number | Promise<200>]
    //
    // is not assignable to type
    //
    //    [number, number]
    return result;
}

Do TypeScript 4.5 wersji trafiło też wsparcie dla dwóch ECMAScript proposals. Pierwszy z nich to sprawdzanie obecności prywatnych pól w klasach, a drugi to import assertions pozwalający na import obiektu z pliku json.

import obj from "./something.json" assert { type: "json" }; // <- this is new!

class Person {
    #name: string;
    constructor(name: string) {
        this.#name = name;
    }

    equals(other: unknown) {
        return other &&
            typeof other === "object" &&
            #name in other && // <- this is new!
            this.#name === other.#name;
    }
}

Interesująco wygląda też optymalizacja rekurencji ogonowej, przy wyliczaniu typów. Nie wiem ilu z Was rzeczywiście skorzysta z tej optymalizacji, ale to zdecydowanie ciekawostka, którą możecie zabłysnąć na najbliższej kawie.

type TrimLeft<T extends string> =
    T extends ` ${infer Rest}` ? TrimLeft<Rest> : T;

// TestA = "hello" | "world"
type TestA = TrimLeft<"   hello" | " world">;

// in Typescript 4.4 this caused following error:
// error: Type instantiation is excessively deep and possibly infinite.
// in Typescript 4.5
// TestB = "oops"
type TestB = TrimLeft<"                                                oops">;

Oczywiście zmian i nowości jest więcej, a ja tradycyjnie już po więcej odsyłam Was do notatki od Microsoftu, którą znajdziecie w źródłach.

Źródła:

https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Beta React 18

O pojawieniu się alfy React 18 minęło już ponad pół roku. Dziś mam przyjemność poinformować Was, że React 18 został wypromowany do wersji beta! Jak możemy dowiedzieć się z Issue na githubie, obecna wersja jest feature complete, a więc do pełnego wydania nie pojawią się już nowe funkcjonalności. Jak poinformował na twitterze Andrew Clark, pełnej wersji możemy się spodziewać najwcześniej pod koniec stycznia 2022 roku. Wszystko zależy od feedbacku wersji beta i tego jak szybko uda się przygotować dokumentację, która na ten moment jest w totalnej rozsypce.

Tym razem nowości z wersji alfa przetrwały, więc jeśli jeszcze o nich nie czytaliście to zapraszam was do 41 edycji naszego przeglądu, w której przyglądaliśmy się im dokładniej. W notatce towarzyszącej pojawieniu się bety React 18 wyróżnione zostały trzy nowe funkcjonalności. Zacznijmy od hooka `useId`, który generuje unikalne ID i gwarantuje spójność pomiędzy serwerem i klientem. Jest to szczególnie istotne ze względu na zmiany w api streamingu, które sprawiają, że rozwiązania oparte na kolejności wywołania znane z różnych zewnętrznych bibliotek przestaną działać.

function Checkbox() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Do you like React?</label>
      <input type="checkbox" name="react" id={id} />
    </>
  );
);

Kolejny nowy hook to `useMutableSource`, który dostaliśmy umożliwia bezpieczne i efektywne odczytywanie stanu z zewnętrznych źródeł w trybie współbieżnym. Na pierwszy rzut oka API wygląda trochę pokrętnie, bo wymaga podania aż trzech złożonych argumentów, ale jeśli przyjrzeć mu się bliżej to okazuje się, że nie taki diabeł straszny jak go malują. No i pamiętajcie, że biblioteki do zarządzania stanem prawdopodobnie opakują swoje hooki w taki sposób, że nowy hook będzie dla Was niewidoczny.

// May be created in module scope, like context:
const locationSource = createMutableSource(
  window,
  // Although not the typical "version", the href attribute is stable,
  // and will change whenever part of the Location changes,
  // so it's safe to use as a version.
  () => window.location.href
);

// Because this method doesn't require access to props,
// it can be declared in module scope to be shared between components.
const getSnapshot = window => window.location.pathname;

// This method can subscribe to root level change events,
// or more snapshot-specific events.
//
// Because this method doesn't require access to props,
// it can be declared in module scope to be shared between components.
const subscribe = (window, callback) => {
  window.addEventListener("popstate", callback);
  return () => window.removeEventListener("popstate", callback);
};

function Example() {
  const pathName = useMutableSource(locationSource, getSnapshot, subscribe);

  // ...
}

Ostatnia wyróżniona funkcjonalność to przewodnik do aktualizacji, dla twórców bibliotek CSS-in-JS. Zmiany ponownie wymuszone są przez zmiany w api streamingu, co nieuchronnie prowadzi do pytania, czy twórcy bibliotek zaktualizują się na czas? Biorąc pod uwagę jak długo dostępna jest alfa i jak długo potrwa beta możemy liczyć na to, że tak właśnie będzie. 

Na zakończenie jeszcze krótkie przemyślenia zainspirowane dyskusją na Hacker Newsach. Zauważyliście, że klasowe właściwie całkowicie zniknęły z radaru ludzi odpowiedzialnych za Reacta? Z boku wygląda to trochę tak, jakby React Hooks i Functional Components stały się rozwiązaniem kanonicznym, a klasowe komponenty rozwiązaniem legacy wspieranym tylko dla kompatybilności wstecznej. To z kolei w prosty sposób prowadzi do pytania: czy klasowe komponenty w najbliższych latach całkowicie znikną z Reacta? Jeśli macie jakieś zdanie na ten temat to zapraszamy do dyskusji na naszym facebooku!

Źródła:

https://github.com/reactwg/react-18/discussions/112
https://github.com/reactwg/react-18/discussions/86
https://github.com/reactwg/react-18/discussions/111
https://github.com/reactwg/react-18/discussions/110

3. Twórca Svelte zatrudniony przez Vercel

Jeśli kompletnie nie kojarzycie Svelte, chociażby z nazwy, to musieliście przez ostatni rok tkwić w całkowitym odcięciu od świata. Framework ten w rankingu wykorzystania według raportu State of JS 2020 uplasował się na mocnym czwartym miejscu, w rankingu satysfakcji przeskoczył nawet Reacta i zgarnął pierwsze miejsce

Vercel to natomiast firma stojąca za Next.js, która jest jedną z startupowych gwiazd ostatnich lat. Na przestrzeni ostatnich lat zgromadzili oni ponad 150 milionów dolarów kapitału od inwestorów i obecnie są wyceniani na ponad miliard dolarów. Myślę, że gdyby Vercel nie przetarł szlaków to nie mielibyśmy teraz takich firm jak Rome Inc. czy Deno Company.

Co wyjdzie z połączenia obydwu projektów? Vercel twierdzi, że jest to ich inwestycja w Open Source i niejako oddanie społeczności tego co jej się należy. Jak zaznacza firma w wpisie na swoim blogu, nie będzie ona wpływać na rozwój frameworku i nadal pozostaje on w rękach Richa Harisa. Myślę, że jest to pewien milestone dla Svelte i z przyjemnością będę przyglądał się temu, w którą stronę potoczą się losy tego uwielbianego przez deweloperów rozwiązania.

Źródła:

https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

4. Push Notyfikacje zmierzają do mobilnego Safari?

Na razie nic jeszcze nie wiadomo oficjalnie, ale część funkcjonalności niezbędnych do pojawienia się Push Notyfikacji w Safari trafiła za odpowiednią feature flagę. Nadzieję daje również wzmożona aktywność od bugiem na trackerze WebKita, dotyczącym braku tej funkcjonalności. Dopóki nie otrzymamy oficjalnych informacji nie możemy być niczego pewni, ale cały webowy świat trzyma kciuki, za Apple w pełni wspierającym PWA. Jeśli Apple ostatnio zapowiedziała sprzedaż części zamiennych do swoich urządzeń, to może i wsparcie dla Push Notyfikacji jest możliwe?

Źródła:

https://twitter.com/firt/status/1460782824773107713?fbclid=IwAR1ZaLhTaK0Nw3-FXh8lLZjjbNObSAg7U-eJ3Ue57QkuNSDrBMS1g5ChOPw