Традиционный способ написания веб-компонентов не очень дружелюбен к SSR (рендеринг на стороне сервера). В этом посте я покажу вам, как создавать реактивные веб-компоненты, которые работают с SSR и с любой платформой JavaScript (Vue, React, Svelte, Solid, Brisa) или Vanilla JS.

• Введение
• Написание веб-компонента с помощью Brisa
• Создание веб-компонента
• Загрузка веб-компонента в проект Vanilla JS
• SSR веб-компонента
• Расскажите мне больше о Брисе... Пожалуйста...
• Примечание для создателей библиотеки веб-компонентов
• Пример
• Заключение

Введение

Мы собираемся использовать компилятор веб-компонентов Brisa. Brisa — это веб-фреймворк, который, помимо того, что похож на другие фреймворки, такие как Next.js или Nuxt.js, также позволяет создавать реактивные веб-компоненты, которые работают с сигналами реактивности, с JSX и с SSR.

Для этого вам нужно знать только синтаксис Brisa при написании веб-компонентов. Brisa еще не опубликована, поскольку в настоящее время она находится на 95,48% карты маршрутов версии 0.1, но по нашим оценкам, через 1 месяц она будет готова к запуску и каждый сможет получить к ней доступ. Однако, даже если он вообще не является общедоступным, вы уже можете использовать его для создания собственных библиотек веб-компонентов.

Написание веб-компонента с помощью Brisa

В качестве примера мы собираемся написать веб-компонент счетчика, как всегда, классический пример.

counter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

Brisa использует имя файла, чтобы узнать селектор, здесь селектором будет counter-wc.

СОВЕТ: Хотя Brisa еще не является общедоступной, вы можете использовать типы TypeScript, чтобы научиться писать веб-компоненты.

В приведенном выше примере состояние используется для создания сигнала, а затем с помощью .value вы делаете его реактивным внутри JSX. Свойства также являются специальными сигналами, поскольку, поскольку они доступны только для чтения, .value не используется для упрощения использования и облегчения определения значений по умолчанию. Это делается посредством оптимизации во время сборки, аналогично React, который действует как если бы они использовали сигналы, но наоборот.

Литерал шаблона CSS позволяет ему реагировать на реактивные изменения в данном случае свойства цвета. Этот литерал шаблона CSS за пределами этого примера очень полезен для простого создания реактивной анимации. Важно помнить, что веб-компоненты работают с Shadow DOM, поэтому CSS не влияет на остальную часть страницы.

Создание веб-компонента

Чтобы создать веб-компонент, вам необходимо выполнить следующую команду:

brisa build -w counter-wc.tsx

Эта команда сгенерирует 2 файла:

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

Эти файлы не являются веб-компонентом, это всего лишь функция рендеринга веб-компонента, оптимизированная во время сборки, чтобы быть максимально легкой (выходящие байты не содержат gzip).

Итак, как нам загрузить веб-компонент?

Загрузка веб-компонента в проект Vanilla JS

Для этого вам нужно добавить карту импорта в HTML с помощью brisa/client, а затем импортировать файл counter-wc.client.js:

Здесь в каждый файл веб-компонента будет перенесена только часть рендеринга, в то время как все они будут использовать одну и ту же оболочку Brisa, определенную в карте импорта, которая отвечает за создание веб-компонента с сигналами и теневым DOM.

SSR веб-компонента

SSR веб-компонента теперь можно выполнить благодаря декларативному теневому DOM. Файл counter-wc.server.js уже скомпилирован с таким поведением, поэтому вам нужно только импортировать его на свой сервер, отобразить в HTML и адаптировать к вашей серверной структуре.

Вот пример с Bun.js или Node.js без использования JSX:

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

Затем запустите Bun run ssr.js, и вы увидите HTML с визуализированным веб-компонентом с использованием декларативного теневого DOM.

Расскажи мне больше о Брисе... Пожалуйста...

Интеграция этих библиотек веб-компонентов с Brisa осуществляется через файл конфигурации:

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

Таким образом, типы SSR и TypeScript автоматически интегрируются в ваш проект. Вы можете использовать веб-компонент в любом серверном компоненте или в другом веб-компоненте.

Если вам интересно узнать больше, я приглашаю вас подписаться на информационный бюллетень Brisa, чтобы получать последние новости и обновления о Brisa. По нашим оценкам, к концу сентября он будет готов к запуску.

Примечание для создателей библиотек веб-компонентов.

Мы рекомендуем вам попробовать Brisa для создания собственных библиотек веб-компонентов. Если вы поставите значок «Сделано с помощью Brisa», мы разместим ссылку на вашу библиотеку на странице Brisa.

Пример

Если вы хотите увидеть репозиторий GitHub с примером счетчика, который мы объяснили в этой статье, вы можете просмотреть и использовать его в качестве ссылки для своих собственных творений:

• https://github.com/aralroca/counter-wc

Заключение

В этом посте мы увидели, как создавать реактивные веб-компоненты, которые работают с SSR и с любой платформой JavaScript или Vanilla JS. Мы использовали Brisa для создания веб-компонента и увидели, как загрузить его в проект Vanilla JS и как с его помощью выполнить SSR.

Надеюсь, вам понравился этот пост и вы узнали что-то новое. Если у вас есть какие-либо вопросы, не стесняйтесь задавать их мне в комментариях ниже. Я буду рад вам помочь.

Удачного программирования и приятного остатка лета! ??