Astro 4.0

- Тулбар для отладки в браузере
- Интернационализации (i18n) теперь поддерживается в роутинге
- Поддержка View Transition API
- Переработан вывод ошибок
- Документация переехала на Starlight

В ближайшее время, сделаю пост про стак разработки, в составе которого, как раз будет Astro, на этом примере покажу какие есть фишки и особенности у данной платформы, а для начала нужно будет обновиться 😎

Тут оказывается вышла вторая бета фреймворка SolidStart 🎉

Очень сильно жду стабильного релиза, чтобы слезть с иглы Next.js, причина этому, как ни странно - React!

Пройдемся по технической части:
- Под капотом Nitro (авторы unjs, кто не понял) на котором работает Nuxt, и Vinxi. Всё это добро можно будет настраивать 😎

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  start: {
    server: {
      /* NITRO SETTINGS */
    }
  }
});

- Агностик роутер/метадата библиотеки будут работать в Solid/SolidStart, замечательное изменение для разработчиков библиотек, которые будут использовать эти зависимости в своих проектах (э - экосистема).

- Клиентский рендеринг, как и у других, через динамический импорт, тут ничего нового.

import { clientOnly } from "@solidjs/start"

const BigDataGrid = clientOnly(() => import("../BigDataGrid"));

function IsomorphicComp() {
  return <BigDataGrid />
}

- Поддержка серверных функций. "use client" 🤡

async function callMeAnywhere(id: number) {
  "use server";
  const res = await db.findSomething({ where: { id } });
  return res.data;
}

- Провели рефакторинг кодовой базы, значительно сократив количество строк кода с более чем 10 тысяч до примерно 1400 в 32 файлах вместо исходных 150.

Всех с наступающим новым годом, надеюсь не последний пост в этом году. ☕️

https://github.com/solidjs/solid-start/releases/tag/v0.4.0

React RFC: use()

Читая X(Twitter) увидел пост про новый RFC в React: useIsolation()
Поизучав тему, вспомнил про свои наработки в этом русле, когда у нас есть контекст с полями и нужно чтобы хук был привязан ТОЛЬКО к определенному полю, дабы избежать лишних ререндеров, чтобы было понятнее, вот пример с псевдокодом (ререндер будет производиться только с тем полем, которое было изменено в скоупе):

const IsolatedContext = createIsolatedContext(null);

function useBar() {
  const { bar } = useIsolatedContext(IsolatedContext);
  return bar;
}

function useFoo() {
  const { foo } = useIsolatedContext(IsolatedContext);
  return foo;
}

function Foo() {
  const foo = useFoo();
  return <div>{foo}</div>;
}

function Bar() {
  const bar = useBar();
  return <div>{bar}</div>;
}

export function App() {
  return (
    <IsolatedContext.Provider>
      <Foo />
      <Bar />
    </IsolatedContext.Provider>
  );
}

К тому же, есть еще такой паттерн: https://github.com/reactjs/rfcs/issues/168

Но я тут не для этого пишу этот пост, самое интересное, что хук use() в будущем скорее всего станет работать именно так (ответ Дэна):

function useFoo() {
  return useMemo(() => {
    const { foo } = use(SomeContext);
    return foo;
  }, []);
}

К тому же, есть информация, что React Forget будет на этапе компиляции точечно мемоизировать такие участки кода.

Всё это были мои мысли насчет надвигающего хука use(), а что думаете вы? 🤔

Iterator helpers (proposal)

Пропозал расширяет Iterator.prototype новыми методами: drop, every, filter, find, flatMap, forEach, map, reduce, some, take и toArray (уже доступно в Google Chrome 122+).

Cтатический метод Iterator.from создает итератор. Если объект имеет Symbol.iterator, вызывает его для получения итератора. В противном случае создается новый объект Iterator.

class Iter {
  value = 0

  next() {
    return { value: ++this.value, done: this.value > 3 }
  }
}

for (const value of Iterator.from(new Iter())) {
  console.log(value) // 1, 2, 3
}

for (const value of Iterator.from([1, 2, 3])) {
  console.log(value) // 1, 2, 3
}

Один из долгожданных пропозалов, который смог добраться до первой реализации в v8 🎉 Поскорее бы еще увидеть Temporal, ShadowRealm и Pipeline Operator.

https://v8.dev/features/iterator-helpers

P.S. Полифил в core-js https://github.com/zloirock/core-js#iterator-helpers

Заметка будет полезна для тех, кто использует PNPM + Turborepo на GitHub Actions.

Благодаря этому экшену https://github.com/dtinth/setup-github-actions-caching-for-turbo получилось ускорить сборку в несколько раз » FULL TURBO. Ниже прикладываю пример, забирайте, кому будет полезно 🤝🤝

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup turborepo cache
        uses: dtinth/setup-github-actions-caching-for-turbo@v1

      - name: Install pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 8

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Build apps
        run: pnpm build