18. Интеграции

Qwik City поддерживает множество популярных инструментов и библиотек через официальные интеграции. Добавить их можно командой npm run qwik add.

Доступные интеграции

npm run qwik add
# Выводит список доступных интеграций:
# - tailwind
# - prisma
# - partytown
# - storybook
# - vitest
# - playwright
# - pwa
# - cloudflare-pages
# - vercel-edge
# - netlify-edge
# - express
# - fastify
# - static

Tailwind CSS

Самая популярная интеграция — утилитарный CSS-фреймворк:

npm run qwik add tailwind

После добавления:

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        qwik: '#ac7ef4',
      },
    },
  },
};

export const Hero = component$(() => (
  <section class="min-h-screen bg-slate-950 flex items-center">
    <h1 class="text-5xl font-bold text-purple-400">⚡ Qwik</h1>
  </section>
));

Prisma ORM

Интеграция с базой данных через Prisma:

npm run qwik add prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        String   @id @default(cuid())
  title     String
  content   String
  published Boolean  @default(false)
  createdAt DateTime @default(now())
}

import { routeLoader$ } from '@builder.io/qwik-city';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export const usePosts = routeLoader$(async () => {
  return await prisma.post.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
  });
});

Partytown — третьесторонние скрипты

Partytown переносит тяжёлые сторонние скрипты (Google Analytics, etc.) в Web Worker:

npm run qwik add partytown

import { component$ } from '@builder.io/qwik';
import { QwikPartytown } from '@builder.io/qwik-city';

export default component$(() => (
  <QwikCityProvider>
    <head>
      <QwikPartytown forward={['dataLayer.push']} />
      {/* Google Analytics теперь в Web Worker! */}
      <script
        type="text/partytown"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"
      />
    </head>
    <body>
      <RouterOutlet />
    </body>
  </QwikCityProvider>
));

Storybook

Разработка компонентов в изоляции:

npm run qwik add storybook
npx storybook dev -p 6006

import type { Meta, StoryObj } from '@storybook/qwik';
import { Button } from './button';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Components/Button',
};

export default meta;

export const Primary: StoryObj<typeof Button> = {
  args: {
    label: 'Нажми меня',
    variant: 'primary',
  },
};

export const Secondary: StoryObj<typeof Button> = {
  args: {
    label: 'Вторичная кнопка',
    variant: 'secondary',
  },
};

Auth.js (NextAuth)

npm install @auth/qwik

// src/routes/[email protected]
import { QwikAuth$ } from '@auth/qwik';
import GitHub from '@auth/qwik/providers/github';

export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(() => ({
  providers: [
    GitHub({
      clientId: import.meta.env.GITHUB_ID,
      clientSecret: import.meta.env.GITHUB_SECRET,
    }),
  ],
}));