new graphql pipeline

codegen.yaml

@@ -0,0 +1,14 @@
+schema: https://api.nicco.io/graphql
+documents: "src/**/*.graphql"
+generates:
+  ./src/lib/gql/gen.ts:
+    plugins:
+      - "@graphql-codegen/typescript"
+      - "@graphql-codegen/typescript-operations"
+      - "@graphql-codegen/typescript-graphql-request"
+    config:
+      maybeValue: "T"
+      typesPrefix: GQL
+      immutableTypes: true
+      useTypeImports: true
+      avoidOptionals: true

package.json

@@ -5,25 +5,33 @@
     "build": "svelte-kit build",
     "preview": "svelte-kit preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-  },
+    "generate": "graphql-codegen"
-  "devDependencies": {
-    "@sveltejs/adapter-static": "next",
-    "@sveltejs/kit": "next",
-    "@types/highlight.js": "^10.1.0",
-    "@types/lunr": "^2.3.4",
-    "svelte": "^3.34.0",
-    "svelte-check": "^2.0.0",
-    "svelte-preprocess": "^4.0.0",
-    "tslib": "^2.0.0",
-    "typescript": "^4.0.0"
   },
   "type": "module",
+  "devDependencies": {
+    "@graphql-codegen/cli": "^2.3.0",
+    "@graphql-codegen/typescript": "^2.4.1",
+    "@graphql-codegen/typescript-graphql-request": "^4.3.2",
+    "@graphql-codegen/typescript-operations": "^2.2.1",
+    "@sveltejs/adapter-static": "next",
+    "@sveltejs/kit": "next",
+    "@types/lunr": "^2.3.4",
+    "graphql": "^15.8.0",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "svelte": "^3.44.3",
+    "svelte-check": "^2.2.11",
+    "svelte-preprocess": "^4.10.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4"
+  },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.24.0",
-    "dayjs": "^1.10.5",
+    "dayjs": "^1.10.7",
-    "highlight.js": "^11.0.0",
+    "graphql-request": "^3.7.0",
+    "graphql-tag": "^2.12.6",
+    "highlight.js": "^11.3.1",
     "lunr": "^2.3.9",
-    "svelte-cloudinary": "^0.2.3"
+    "svelte-cloudinary": "^0.2.4"
   }
 }

src/lib/actions/cloudinary.ts

@@ -0,0 +1,8 @@
+import { initialize, image } from 'svelte-cloudinary'
+
+initialize({ cloud_name: 'cupcakearmy', secure: true })
+
+export function cdn(el: HTMLImageElement, src: string) {
+  const cleaned = src.replace('https://api.nicco.io', '/nicco')
+  return image(el, { src: cleaned, bind: { width: true }, lazy: true })
+}

src/lib/api/index.ts

@@ -1,122 +0,0 @@
-import axios from 'axios'
-
-export const API = axios.create({
-  baseURL: import.meta.env.VITE_API_URL as string,
-})
-
-export function gql(strings: TemplateStringsArray, ...args: string[]) {
-  let joined = ''
-  for (const part of strings) {
-    const arg = args.shift() ?? ''
-    joined += part + arg
-  }
-  return joined
-}
-
-export async function Call<T>(query: string, variables: Record<string, any> = {}): Promise<T> {
-  const { data } = await API({
-    url: '/graphql',
-    method: 'post',
-    data: {
-      query,
-      variables,
-    },
-  })
-  if (data.errors?.length > 0) {
-    throw new Error(data.errors[0].message)
-  }
-  return data.data as T
-}
-
-export type Page = {
-  title: string
-  content: string | null
-  slug: string
-  id: string
-  status: string
-}
-
-export const BaseAttributes = `
-    id
-    slug
-    status
-    title
-    content
-`
-
-export interface Post extends Page {
-  date: string
-  modified: string
-  post: {
-    featured: MediaItem
-  }
-}
-
-export const PostFragment = gql`
-  fragment PostFragment on Post {
-    ${BaseAttributes}
-    date
-    modified
-    post {
-      featured {
-        ...MediaItemFragment
-      }
-    }
-  }
-`
-
-export interface Work extends Page {
-  work: {
-    date: string
-    image: MediaItem
-    link: string
-    role: string
-  }
-}
-
-export const WorkFragment = gql`
-  fragment WorkFragment on Work {
-      ${BaseAttributes}
-    work {
-      date
-      image {
-        ...MediaItemFragment
-      }
-      link
-      role
-    }
-  }
-`
-
-export interface Project extends Page {
-  project: {
-    date: string
-    link: string
-    description: string
-  }
-}
-
-export const ProjectFragment = gql`
-  fragment ProjectFragment on Project {
-    ${BaseAttributes}
-    project {
-      date
-      link
-      description
-    }
-  }
-`
-
-export type MediaItem = {
-  srcSet: string
-  altText: string
-  sourceUrl: string
-}
-
-export const MediaItemFragment = gql`
-  fragment MediaItemFragment on MediaItem {
-    srcSet
-    altText
-    sourceUrl
-  }
-`

src/lib/components/ImageFrame.svelte

@@ -1,22 +1,12 @@
-<script lang="ts" context="module">
-  import { initialize } from 'svelte-cloudinary'
-
-  initialize({ cloud_name: 'cupcakearmy' })
-</script>
-
 <script lang="ts">
-  import { image } from 'svelte-cloudinary'
+  import { cdn } from '$lib/actions/cloudinary'
 
   export let src: string
-  // export let srcset: string
   export let alt: string
-
-  $: cleaned = src.replace('https://api.nicco.io', '/nicco')
 </script>
 
-<img use:image={{ src: cleaned, bind: { width: true }, lazy: true }} {alt} />
+<img use:cdn={src} {alt} />
 
-<!-- <img {srcset} {alt} /> -->
 <style>
   img {
     width: calc(100% - 0.25em);

src/lib/components/Nav.svelte

@@ -10,11 +10,9 @@
     { name: 'Blog', href: '/blog' },
     { name: 'Contact', href: '/contact' },
   ]
-
-  let nav: HTMLDivElement
 </script>
 
-<nav bind:this={nav}>
+<nav>
   <a href="/">
     <h1 class:active={$page.path === '/'}>NB</h1>
   </a>

src/lib/components/PostAttributes.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import dj from 'dayjs'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
-  import type { Post } from '$lib/api'
   import { readingTimeInMinutes } from '$lib/utils'
+  import dj from 'dayjs'
 
-  export let post: Post
+  export let post: GQLBasePostFragment
   export let full = false
 
   function format(date: string) {

src/lib/components/PostPreview.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Post } from '$lib/api'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
 
   import ImageFrame from '../components/ImageFrame.svelte'
   import PostAttributes from '../components/PostAttributes.svelte'
 
-  export let post: Post
+  export let post: GQLBasePostFragment
 </script>
 
 <a href={`blog/${post.slug}`} class:without={!post.post.featured}>

src/lib/components/Progress.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { spring } from 'svelte/motion'
-
   import { scroll } from '$lib/stores'
 
-  let el
+  let el: SVGElement
+
   const springed = spring(
     { scroll: 0 },
     {
@@ -12,7 +12,7 @@
     }
   )
 
-  function updateState(value) {
+  function updateState(value: number) {
     const max = 359.99999
     const R = 50
     let alpha = (360 / 1) * value

src/lib/components/Project.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import type { GQLBaseProjectFragment } from '$lib/gql/gen'
   import dayjs from 'dayjs'
-
   import Icon from './Icon.svelte'
 
-  export let project: import('$lib/api').Project
+  export let project: GQLBaseProjectFragment
 </script>
 
 <section>

src/lib/components/Work.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { Work } from '$lib/api'
-  import dayjs from 'dayjs'
-  import ImageFrame from '$lib/components/ImageFrame.svelte'
   import Icon from '$lib/components/Icon.svelte'
+  import ImageFrame from '$lib/components/ImageFrame.svelte'
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
+  import dayjs from 'dayjs'
 
-  export let work: Work
+  export let work: GQLBaseWorkFragment
 </script>
 
 <section>
@@ -19,8 +19,6 @@
       </div>
     </div>
 
-    <!-- <ImageFrame src={work.work.image.sizes.medium_large} alt={work.image.description} /> -->
-    <!-- <ImageFrame srcset={work.work.image.srcSet} alt={work.work.image.altText} /> -->
     <ImageFrame src={work.work.image.sourceUrl} alt={work.work.image.altText} />
   </a>
   <div class="horizontal regular">

src/lib/gql/index.ts

@@ -0,0 +1,5 @@
+import { GraphQLClient } from 'graphql-request'
+import { getSdk } from './gen'
+
+const client = new GraphQLClient('https://api.nicco.io/graphql')
+export const SDK = getSdk(client)

src/lib/gql/root.graphql

@@ -0,0 +1,127 @@
+fragment BaseMediaItem on MediaItem {
+  srcSet
+  altText
+  sourceUrl
+}
+
+query MediaItemsMany {
+  mediaItems(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseMediaItem
+    }
+  }
+}
+
+query MediaItemsOne($slug: ID!) {
+  mediaItem(id: $slug, idType: URI) {
+    ...BaseMediaItem
+  }
+}
+
+fragment BasePage on Page {
+  id
+  slug
+  title
+  content
+  status
+}
+
+query PagesMany {
+  pages(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BasePage
+    }
+  }
+}
+
+query PagesOne($slug: ID!) {
+  page(id: $slug, idType: URI) {
+    ...BasePage
+  }
+}
+
+fragment BaseWork on Work {
+  id
+  slug
+  title
+  content
+  status
+  work {
+    date
+    image {
+      ...BaseMediaItem
+    }
+    link
+    role
+  }
+}
+
+query WorksMany {
+  works(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseWork
+    }
+  }
+}
+
+query WorksOne($slug: ID!) {
+  work(id: $slug, idType: URI) {
+    ...BaseWork
+  }
+}
+
+fragment BaseProject on Project {
+  id
+  slug
+  title
+  content
+  status
+  project {
+    date
+    link
+    description
+  }
+}
+
+query ProjectsMany {
+  projects(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BaseProject
+    }
+  }
+}
+
+query ProjectsOne($slug: ID!) {
+  project(id: $slug, idType: URI) {
+    ...BaseProject
+  }
+}
+
+fragment BasePost on Post {
+  id
+  slug
+  title
+  content
+  status
+  date
+  modified
+  post {
+    featured {
+      ...BaseMediaItem
+    }
+  }
+}
+
+query PostsMany {
+  posts(first: 100, where: { status: PUBLISH }) {
+    nodes {
+      ...BasePost
+    }
+  }
+}
+
+query PostsOne($slug: ID!) {
+  post(id: $slug, idType: URI) {
+    ...BasePost
+  }
+}

src/routes/__layout.svelte

@@ -3,6 +3,7 @@
   import { page } from '$app/stores'
 
   import '../app.css'
+  import '$lib/actions/cloudinary'
 
   import dayjs from 'dayjs'
   import customParseFormat from 'dayjs/plugin/customParseFormat.js'
@@ -13,7 +14,7 @@
   import Progress from '$lib/components/Progress.svelte'
 
   let wrapper: HTMLDivElement
-  let main: HTMLDivElement
+  let main: HTMLElement
 
   function resize() {
     wrapper.style.height = `${window.innerHeight}px`

src/routes/about.svelte

@@ -14,10 +14,11 @@
 <script lang="ts">
   import WPAdapter from '$lib/components/WPAdapter.svelte'
   import SimplePage from '$lib/components/SimplePage.svelte'
-  import type { Page, MediaItem } from '$lib/api'
+  import type { GQLBaseMediaItemFragment, GQLBasePageFragment } from '$lib/gql/gen'
+  import { cdn } from '$lib/actions/cloudinary'
 
-  export let data: Page
+  export let data: GQLBasePageFragment
-  export let image: MediaItem
+  export let image: GQLBaseMediaItemFragment
 </script>
 
 <svelte:head>
@@ -27,7 +28,7 @@
 <SimplePage title={data.title} expanded={false}>
   {#if data.content}
     <WPAdapter content={data.content} />
-    <img srcset={image.srcSet} alt="decoration" />
+    <img use:cdn={image.sourceUrl} alt="decoration" />
   {/if}
 </SimplePage>
 

src/routes/api/[type]/[slug].json.ts

@@ -1,155 +1,55 @@
-import type { RequestHandler } from '@sveltejs/kit'
+import { SDK } from '$lib/gql'
+import type { ServerRequest } from '@sveltejs/kit/types/hooks'
 
-import {
+export async function get(args: ServerRequest) {
-  BaseAttributes,
-  Call,
-  gql,
-  MediaItem,
-  MediaItemFragment,
-  Page,
-  Post,
-  PostFragment,
-  Project,
-  ProjectFragment,
-  WorkFragment,
-} from '$lib/api'
-
-export const get: RequestHandler = async (args) => {
   const { type, slug } = args.params
-  const allChar = '*'
+  const all = slug === '*'
-  const all = slug === allChar
 
   switch (type) {
     case 'pages': {
       if (all) {
-        const data = await Call<{ pages: { nodes: Page[] } }>(gql`
+        const data = await SDK.PagesMany()
-          query {
+        return { body: data.pages?.nodes }
-            pages(where: {status: PUBLISH}) {
-              nodes {
-                ${BaseAttributes}
-              }
-            }
-          }
-        `)
-        return { body: data.pages.nodes }
       } else {
-        const data = await Call<{ page: Page }>(
+        const data = await SDK.PagesOne({ slug })
-          gql`
-            query ($slug: ID!) {
-              page(id: $slug, idType: URI) {
-                ${BaseAttributes}
-              }
-            }
-          `,
-          { slug: '/' + slug }
-        )
         return { body: data.page }
       }
     }
     case 'works': {
       if (all) {
-        const query = gql`
+        const data = await SDK.WorksMany()
-          ${MediaItemFragment}
+        return { body: data.works?.nodes }
-          ${WorkFragment}
-          query {
-            works(where: { status: PUBLISH }) {
-              nodes {
-                ...WorkFragment
-              }
-            }
-          }
-        `
-        const data = await Call<{ works: { nodes: MediaItem[] } }>(query)
-        return { body: data.works.nodes }
       } else {
-        const data = await Call<{ work: MediaItem }>(
+        const data = await SDK.WorksOne({ slug })
-          gql`
-            ${MediaItemFragment}
-            ${WorkFragment}
-            query ($slug: ID!) {
-              work(id: $slug, idType: SLUG) {
-                ...WorkFragment
-              }
-            }
-          `,
-          { slug }
-        )
         return { body: data.work }
       }
     }
     case 'projects': {
       if (all) {
-        const data = await Call<{ projects: { nodes: Project[] } }>(
+        const data = await SDK.ProjectsMany()
-          gql`
+        return { body: data.projects?.nodes }
-            ${ProjectFragment}
-            query {
-              projects(where: { status: PUBLISH }) {
-                nodes {
-                  ...ProjectFragment
-                }
-              }
-            }
-          `
-        )
-        return { body: data.projects.nodes }
       } else {
-        const data = await Call<{ project: Project }>(
+        const data = await SDK.ProjectsOne({ slug })
-          gql`
-            ${ProjectFragment}
-            query ($slug: ID!) {
-              project(id: $slug, idType: SLUG) {
-                ...ProjectFragment
-              }
-            }
-          `,
-          { slug }
-        )
         return { body: data.project }
       }
     }
 
     case 'media': {
-      const data = await Call<{ mediaItem: MediaItem }>(
+      if (all) {
-        gql`
+        const data = await SDK.MediaItemsMany()
-          ${MediaItemFragment}
+        return { body: data.mediaItems?.nodes }
-          query ($slug: ID!) {
+      } else {
-            mediaItem(id: $slug, idType: SLUG) {
+        const data = await SDK.MediaItemsOne({ slug })
-              ...MediaItemFragment
-            }
-          }
-        `,
-        { slug }
-      )
         return { body: data.mediaItem }
       }
+    }
 
     case 'posts': {
       if (all) {
-        const data = await Call<{ posts: { nodes: Post[] } }>(gql`
+        const data = await SDK.PostsMany()
-          ${PostFragment}
+        return { body: data.posts?.nodes }
-          ${MediaItemFragment}
-          {
-            posts(where: { status: PUBLISH }, first: 1000000000) {
-              nodes {
-                ...PostFragment
-              }
-            }
-          }
-        `)
-        return { body: data.posts.nodes }
       } else {
-        const data = await Call<{ post: Post }>(
+        const data = await SDK.PostsOne({ slug })
-          gql`
-            ${PostFragment}
-            ${MediaItemFragment}
-            query ($slug: ID!) {
-              post(id: $slug, idType: SLUG) {
-                ...PostFragment
-              }
-            }
-          `,
-          { slug }
-        )
         return { body: data.post }
       }
     }

src/routes/api/search.json.ts

@@ -1,52 +1,51 @@
 import lunr from 'lunr'
-import type { RequestHandler } from '@sveltejs/kit'
+// import { BaseAttributes, Call, gql, Page } from '$lib/api'
-import { BaseAttributes, Call, gql, Page } from '$lib/api'
 
-function removeHTML(s: string) {
+// function removeHTML(s: string) {
-  return s.replace(/<.*?>|\s+|&#\d+;/g, ' ').trim()
+//   return s.replace(/<.*?>|\s+|&#\d+;/g, ' ').trim()
-}
+// }
 
-function convertForIdx(type: string, items: Page[]) {
+// function convertForIdx(type: string, items: Page[]) {
-  const keys: (keyof Page)[] = ['title', 'content', 'slug']
+//   const keys: (keyof Page)[] = ['title', 'content', 'slug']
-  return items.map((item) => ({
+//   return items.map((item) => ({
-    url: `${type}/${item.slug}`,
+//     url: `${type}/${item.slug}`,
-    data: keys.map((field) => removeHTML(item[field] ?? '')).join(' '),
+//     data: keys.map((field) => removeHTML(item[field] ?? '')).join(' '),
-  }))
+//   }))
-}
+// }
 
-async function getAll() {
+// async function getAll() {
-  const all = await Call<Record<'posts' | 'projects' | 'works', { nodes: Page[] }>>(gql`
+//   const all = await Call<Record<'posts' | 'projects' | 'works', { nodes: Page[] }>>(gql`
-    query {
+//     query {
-      posts(first: 1000) {
+//       posts(first: 1000) {
-        nodes {
+//         nodes {
-          ${BaseAttributes}
+//           ${BaseAttributes}
-        }
+//         }
-      }
+//       }
-      projects(first: 1000) {
+//       projects(first: 1000) {
-        nodes {
+//         nodes {
-          ${BaseAttributes}
+//           ${BaseAttributes}
-        }
+//         }
-      }
+//       }
-      works(first: 1000) {
+//       works(first: 1000) {
-        nodes {
+//         nodes {
-          ${BaseAttributes}
+//           ${BaseAttributes}
-        }
+//         }
-      }
+//       }
-    }
+//     }
-  `)
+//   `)
-  return all
+//   return all
-}
+// }
 
-export const get: RequestHandler = async () => {
+export const get = async () => {
-  const all = await getAll()
+  // const all = await getAll()
-  const converted = Object.entries(all)
+  // const converted = Object.entries(all)
-    .map(([type, data]) => convertForIdx(type, data.nodes))
+  //   .map(([type, data]) => convertForIdx(type, data.nodes))
-    .flat()
+  //   .flat()
 
   const idx = lunr(function () {
     this.ref('url')
     this.field('data')
-    converted.forEach((doc) => this.add(doc))
+    // converted.forEach((doc) => this.add(doc))
   })
 
   return { body: idx }

src/routes/blog/[slug].svelte

@@ -11,12 +11,12 @@
 </script>
 
 <script lang="ts">
-  import type { Post } from '$lib/api'
   import SimplePage from '$lib/components/SimplePage.svelte'
   import PostAttributes from '$lib/components/PostAttributes.svelte'
   import WpAdapter from '$lib/components/WPAdapter.svelte'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
 
-  export let data: Post
+  export let data: GQLBasePostFragment
 </script>
 
 <svelte:head>

src/routes/blog/index.svelte

@@ -12,11 +12,11 @@
 </script>
 
 <script lang="ts">
-  import type { Post } from '$lib/api'
   import SimplePage from '$lib/components/SimplePage.svelte'
   import PostPreview from '$lib/components/PostPreview.svelte'
+  import type { GQLBasePostFragment } from '$lib/gql/gen'
 
-  export let data: Post[]
+  export let data: GQLBasePostFragment[]
 </script>
 
 <svelte:head>

src/routes/index.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" context="module">
-  import type { MediaItem } from '$lib/api'
+  import type { GQLBaseMediaItemFragment } from '$lib/gql/gen'
 
-  type Data = Record<'signature' | 'home', MediaItem>
+  type Data = Record<'signature' | 'home', GQLBaseMediaItemFragment>
   export const load: Load = async ({ fetch }) => {
-    const signature: MediaItem = await fetch('/api/media/signature.json').then((r) => r.json())
+    const signature: GQLBaseMediaItemFragment = await fetch('/api/media/signature.json').then((r) => r.json())
-    const home: MediaItem = await fetch('/api/media/home.json').then((r) => r.json())
+    const home: GQLBaseMediaItemFragment = await fetch('/api/media/home.json').then((r) => r.json())
     return { props: { data: { signature, home } } }
   }
 </script>
@@ -12,6 +12,7 @@
 <script lang="ts">
   import SpacedLetters from '$lib/components/SpacedLetters.svelte'
   import type { Load } from '@sveltejs/kit'
+  import { cdn } from '$lib/actions/cloudinary'
 
   export let data: Data
 </script>

src/routes/privacy.svelte

@@ -13,9 +13,9 @@
 <script lang="ts">
   import WPAdapter from '$lib/components/WPAdapter.svelte'
   import SimplePage from '$lib/components/SimplePage.svelte'
-  import type { Page } from '$lib/api'
+  import type { GQLBasePageFragment } from '$lib/gql/gen'
 
-  export let data: Page
+  export let data: GQLBasePageFragment
 </script>
 
 <svelte:head>

src/routes/projects.svelte

@@ -11,11 +11,11 @@
 </script>
 
 <script lang="ts">
-  import type { Project as TProject } from '$lib/api'
   import SimplePage from '$lib/components/SimplePage.svelte'
   import Project from '$lib/components/Project.svelte'
+  import type { GQLBaseProjectFragment } from '$lib/gql/gen'
 
-  export let data: TProject[]
+  export let data: GQLBaseProjectFragment[]
 </script>
 
 <svelte:head>

src/routes/works/[slug].svelte

@@ -11,11 +11,11 @@
 </script>
 
 <script lang="ts">
-  import type { Work as TWork } from '$lib/api'
   import SimplePage from '$lib/components/SimplePage.svelte'
   import Work from '$lib/components/Work.svelte'
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
 
-  export let data: TWork
+  export let data: GQLBaseWorkFragment
 </script>
 
 <svelte:head>

src/routes/works/index.svelte

@@ -11,11 +11,11 @@
 </script>
 
 <script lang="ts">
-  import type { Work as TWork } from '$lib/api'
+  import type { GQLBaseWorkFragment } from '$lib/gql/gen'
   import SimplePage from '$lib/components/SimplePage.svelte'
   import Work from '$lib/components/Work.svelte'
 
-  export let data: TWork[]
+  export let data: GQLBaseWorkFragment[]
 </script>
 
 <svelte:head>

svelte.config.js

@@ -1,5 +1,6 @@
 import preprocess from 'svelte-preprocess'
 import adapter from '@sveltejs/adapter-static'
+import analyze from 'rollup-plugin-analyzer'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -7,6 +8,14 @@ const config = {
   kit: {
     adapter: adapter(),
     target: '#svelte',
+
+    vite: {
+      build: {
+        rollupOptions: {
+          plugins: [analyze()],
+        },
+      },
+    },
   },
 }