docs(api): Update nitro to latest version (#4102)

* update nitro

* try this?

* Try this

* update vercel output

* Add await

* Fix endpoints

* Adjust 404 catch all

* Fix output

* Adjust react in api

* Fix types

* Remove @resvg/resvg-wasm

* Format code

* Fix failing check

* Apply feedback

* Format code

docs/.vitepress/api/categories/index.get.ts

@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';
 
 export default eventHandler((event) => {

docs/.vitepress/api/figma/data.ts

@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconNodes from '../../data/iconNodes/index.ts';
 import { IconNodeWithKeys } from '../../theme/types';
 import iconMetaData from '../../data/iconMetaData';

docs/.vitepress/api/gh-icon/[...data].get.tsx

@@ -1,6 +1,6 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
-import { createElement } from 'react';
+import React from 'react';
 import SvgPreview from '../../lib/SvgPreview/index.tsx';
 import iconNodes from '../../data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
@@ -34,36 +34,29 @@ export default eventHandler((event) => {
     const iconNode = iconNodes[backdropName];
 
     const LucideIcon = createLucideIcon(backdropName, iconNode);
-    const svg = renderToStaticMarkup(createElement(LucideIcon));
+    const svg = renderToStaticMarkup(<LucideIcon />);
     const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');
 
     children.push(
-      createElement(Backdrop, {
-        backdropString,
-        src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
-        color: '#777',
-      }),
+      <Backdrop
+        backdropString={backdropString}
+        src={src.replace(/<svg[^>]*>|<\/svg>/g, '')}
+        color="#777"
+      />,
     );
   }
 
-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(
-      createElement(
-        SvgPreview,
-        {
-          src: src.replace(/<svg[^>]*>|<\/svg>/g, ''),
-          height,
-          width,
-          showGrid: true,
-        },
-        children,
-      ),
-    ),
-  ).toString('utf8');
-
   defaultContentType(event, 'image/svg+xml');
   setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
 
-  return svg;
+  return renderToString(
+    <SvgPreview
+      src={src.replace(/<svg[^>]*>|<\/svg>/g, '')}
+      showGrid
+      height={height}
+      width={width}
+    >
+      {children}
+    </SvgPreview>,
+  );
 });

docs/.vitepress/api/gh-icon/diff/[...data].get.tsx

@@ -1,6 +1,6 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
-import { createElement } from 'react';
+import React from 'react';
 import Diff from '../../../lib/SvgPreview/Diff.tsx';
 import iconNodes from '../../../data/iconNodes';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
@@ -26,21 +26,26 @@ export default eventHandler((event) => {
 
   const children = [];
 
+  const Icon = createLucideIcon(name, iconNodes[name]);
+
   const oldSrc = iconNodes[name]
-    ? renderToStaticMarkup(createElement(createLucideIcon(name, iconNodes[name])))
+    ? renderToStaticMarkup(<Icon />)
         .replaceAll('\n', '')
         .replace(/<svg[^>]*>|<\/svg>/g, '')
     : '';
 
-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(
-      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
-    ),
-  ).toString('utf8');
-
   defaultContentType(event, 'image/svg+xml');
   setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
 
-  return svg;
+  return renderToString(
+    <Diff
+      oldSrc={oldSrc}
+      newSrc={newSrc}
+      showGrid
+      height={height}
+      width={width}
+    >
+      {children}
+    </Diff>,
+  );
 });

docs/.vitepress/api/gh-icon/dpi/[...data].get.ts

@@ -1,17 +1,12 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
-import { Resvg, initWasm } from '@resvg/resvg-wasm';
 import iconNodes from '../../../data/iconNodes';
-import wasm from './loadWasm';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import createLucideIcon from 'lucide-react/src/createLucideIcon';
-
-var initializedResvg = initWasm(wasm);
+import sharp from 'sharp';
 
 export default eventHandler(async (event) => {
   const { params = {} } = event.context;
-  await initializedResvg;
-
   const imageSize = 96;
   const name = params.data.split('/').at(-3);
   const iconSizeString = params.data.split('/').at(-2);
@@ -45,9 +40,7 @@ export default eventHandler(async (event) => {
     )
     .replace(/<\/svg>/, '</g></svg>');
 
-  const resvg = new Resvg(svg, { background: '#000' });
-  const pngData = resvg.render();
-  const pngBuffer = Buffer.from(pngData.asPng());
+  const pngBuffer = await sharp(Buffer.from(svg)).png().toBuffer();
 
   defaultContentType(event, 'image/svg+xml');
   setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
@@ -67,7 +60,7 @@ export default eventHandler(async (event) => {
     <image
       width="${imageSize}"
       height="${prevSvg ? imageSize * 2 : imageSize}"
-      href="data:image/png;base64,${pngBuffer.toString('base64')}"
+       href="data:image/png;base64,${pngBuffer.toString('base64')}"
       image-rendering="pixelated"
     />
   </mask>

docs/.vitepress/api/gh-icon/dpi/loadWasm.ts

@@ -1,16 +0,0 @@
-import fs from 'fs';
-import module from 'node:module';
-/* WASM_IMPORT */
-
-let wasm;
-
-if (process.env.NODE_ENV === 'development') {
-  const require = module.createRequire(import.meta.url);
-
-  wasm = fs.readFileSync(require.resolve('@resvg/resvg-wasm/index_bg.wasm'));
-} else {
-  // @ts-ignore
-  wasm = resvg_wasm;
-}
-
-export default wasm;

docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts

@@ -1,44 +0,0 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
-import { renderToString } from 'react-dom/server';
-import { createElement } from 'react';
-import SvgPreview from '../../../lib/SvgPreview/index.tsx';
-import createLucideIcon, { IconNode } from 'lucide-react/src/createLucideIcon';
-import { parseSync } from 'svgson';
-
-export default eventHandler((event) => {
-  const { params } = event.context;
-
-  const [strokeWidth, svgData] = params.data.split('/');
-  const data = svgData.slice(0, -4);
-
-  const src = Buffer.from(data, 'base64').toString('utf8');
-
-  const Icon = createLucideIcon(
-    'icon',
-    parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
-      ({ name, attributes }) => [name, attributes],
-    ) as IconNode,
-  );
-
-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(Icon, { strokeWidth }))
-      .replace(/fill\="none"/, 'fill="#fff"')
-      .replace(
-        />/,
-        `><style>
-        @media screen and (prefers-color-scheme: light) {
-          svg { fill: transparent !important; }
-        }
-        @media screen and (prefers-color-scheme: dark) {
-          svg { stroke: #fff; fill: transparent !important; }
-        }
-      </style>`,
-      ),
-  ).toString('utf8');
-
-  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
-
-  return svg;
-});

docs/.vitepress/api/gh-icon/stroke-width/[...data].get.tsx

@@ -0,0 +1,37 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString } from 'react-dom/server';
+import React from 'react';
+import Icon from 'lucide-react/src/Icon';
+import type { IconNode } from 'lucide-react/src/types';
+import { parseSync } from 'svgson';
+
+export default eventHandler((event) => {
+  const { params } = event.context;
+
+  const [strokeWidth, svgData] = params.data.split('/');
+  const data = svgData.slice(0, -4);
+
+  const src = Buffer.from(data, 'base64').toString('utf8');
+  const iconNode = parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
+    ({ name, attributes }) => [name, attributes],
+  ) as IconNode;
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return renderToString(
+    <Icon
+      iconNode={iconNode}
+      strokeWidth={strokeWidth}
+    >
+      <style>
+        {`@media screen and (prefers-color-scheme: light) {
+          svg { fill: transparent !important; }
+        }
+        @media screen and (prefers-color-scheme: dark) {
+          svg { stroke: #fff; fill: transparent !important; }
+        }`}
+      </style>
+    </Icon>,
+  );
+});

docs/.vitepress/api/gh-icon/symmetry/[...data].get.tsx

@@ -1,6 +1,6 @@
 import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
 import { renderToString } from 'react-dom/server';
-import { createElement } from 'react';
+import React from 'react';
 import Diff from '../../../lib/SvgPreview/Diff.tsx';
 
 export default eventHandler((event) => {
@@ -41,15 +41,18 @@ export default eventHandler((event) => {
     return '';
   }
 
-  const svg = Buffer.from(
-    // We can't use jsx here, is not supported here by nitro.
-    renderToString(
-      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
-    ),
-  ).toString('utf8');
-
   defaultContentType(event, 'image/svg+xml');
   setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
 
-  return svg;
+  return renderToString(
+    <Diff
+      oldSrc={oldSrc}
+      newSrc={newSrc}
+      showGrid
+      height={height}
+      width={width}
+    >
+      {children}
+    </Diff>,
+  );
 });

docs/.vitepress/api/tags/index.get.ts

@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';
 
 export default eventHandler((event) => {

docs/.vitepress/api/test.ts

@@ -1,3 +0,0 @@
-export default eventHandler(() => {
-  return { nitro: 'Is Awesome! asda' };
-});

docs/.vitepress/lib/SvgPreview/Backdrop.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 interface BackdropProps {
   src: string;

docs/.vitepress/lib/SvgPreview/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { PathProps, Path } from './types';
 import getPaths, { assert } from './utils';
 import { GapViolationHighlight } from './GapViolationHighlight.tsx';
@@ -389,15 +389,18 @@ const Handles = ({
   </g>
 );
 
-const SvgPreview = React.forwardRef<
-  SVGSVGElement,
-  {
-    height?: number;
-    width?: number;
-    src: string | ReturnType<typeof getPaths>;
-    showGrid?: boolean;
-  } & React.SVGProps<SVGSVGElement>
->(({ src, children, height = 24, width = 24, showGrid = false, ...props }, ref) => {
+interface SvgPreviewProps extends React.SVGProps<SVGSVGElement> {
+  height?: number;
+  width?: number;
+  src: string | ReturnType<typeof getPaths>;
+  showGrid?: boolean;
+  children?: React.ReactNode;
+}
+
+const SvgPreview = (
+  { src, children, height = 24, width = 24, showGrid = false, ...props }: SvgPreviewProps,
+  ref,
+) => {
   const subGridSize =
     Math.max(height, width) % 3 === 0
       ? Math.max(height, width) > 24
@@ -494,7 +497,7 @@ const SvgPreview = React.forwardRef<
       {children}
     </svg>
   );
-});
+};
 
 SvgPreview.displayName = 'SvgPreview';
 

docs/.vitepress/lib/SvgPreview/path-to-points.ts

@@ -1,4 +1,4 @@
-import memoize from 'lodash/memoize';
+import { memoize } from 'lodash-es';
 import SVGPathCommander from 'svg-path-commander';
 import { Path } from './types';
 

docs/.vitepress/lib/SvgPreview/types.ts

@@ -8,7 +8,7 @@ export type Path = {
   prev: Point;
   next: Point;
   isStart: boolean;
-  circle?: { x: number; y: number; r: number };
+  circle?: { x: number; y: number; r: number; tangentIntersection?: Point };
   cp1?: Point;
   cp2?: Point;
   c: ReturnType<typeof getCommands>[number];

docs/.vitepress/lib/SvgPreview/utils.ts

@@ -1,10 +1,8 @@
 import { INode, parseSync } from 'svgson';
-// @ts-ignore
 import toPath from 'element-to-path';
-// @ts-ignore
 import { SVGPathData, encodeSVGPath } from 'svg-pathdata';
 import { Path, Point } from './types';
-import memoize from 'lodash/memoize';
+import { memoize } from 'lodash-es';
 
 function assertNever(x: never): never {
   throw new Error('Unknown type: ' + x['type']);

docs/.vitepress/lib/codeExamples/createCodeExamples.ts

@@ -113,16 +113,16 @@ import { LucideAngularModule, $PascalCase } from 'lucide-angular';
   ];
 };
 
+const highlighter = await createHighlighter({
+  themes: ['github-light', 'github-dark'],
+  langs: Object.keys(bundledLanguages),
+});
+
 export type ThemeOptions =
   | ThemeRegistration
   | { light: ThemeRegistration; dark: ThemeRegistration };
 
-const highLightCode = async (code: string, lang: string, active?: boolean) => {
-  const highlighter = await createHighlighter({
-    themes: ['github-light', 'github-dark'],
-    langs: Object.keys(bundledLanguages),
-  });
-
+export const highLightCode = async (code: string, lang: string, active?: boolean) => {
   const highlightedCode = highlighter
     .codeToHtml(code, {
       lang,

docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts

@@ -1,5 +1,4 @@
-import { bundledLanguages, type ThemeRegistration } from 'shiki';
-import { createHighlighter } from 'shiki';
+import { highLightCode } from './createCodeExamples';
 
 type CodeExampleType = {
   title: string;
@@ -116,34 +115,6 @@ import { $CamelCase } from '@lucide/lab';
   ];
 };
 
-export type ThemeOptions =
-  | ThemeRegistration
-  | { light: ThemeRegistration; dark: ThemeRegistration };
-
-const highLightCode = async (code: string, lang: string, active?: boolean) => {
-  const highlighter = await createHighlighter({
-    themes: ['github-light', 'github-dark'],
-    langs: Object.keys(bundledLanguages),
-  });
-
-  const highlightedCode = highlighter
-    .codeToHtml(code, {
-      lang,
-      themes: {
-        light: 'github-light',
-        dark: 'github-dark',
-      },
-      defaultColor: false,
-    })
-    .replace('shiki-themes', 'shiki-themes vp-code');
-
-  return `<div class="language-${lang} ${active ? 'active' : ''}">
-  <button title="Copy Code" class="copy"></button>
-  <span class="lang">${lang}</span>
-  ${highlightedCode}
-  </div>`;
-};
-
 export default async function createCodeExamples() {
   const codes = getIconCodes();
 

docs/nitro.config.ts

@@ -1,32 +1,10 @@
-import copy from 'rollup-plugin-copy';
-import replace from '@rollup/plugin-replace';
-
 export default defineNitroConfig({
-  compatibilityDate: '2025-07-30',
-  preset: 'vercel_edge',
+  compatibilityDate: '2026-02-26',
+  preset: 'vercel',
   srcDir: '.vitepress',
   routeRules: {
     '/api/**': { cors: false },
   },
-  rollupConfig: {
-    external: ['@resvg/resvg-wasm/index_bg.wasm', './index_bg.wasm?module'],
-    plugins: [
-      copy({
-        targets: [
-          {
-            src: './node_modules/@resvg/resvg-wasm/index_bg.wasm',
-            dest: './.vercel/output/functions/__nitro.func',
-          },
-        ],
-      }),
-      replace({
-        include: ['./**/*.ts'],
-        '/* WASM_IMPORT */': 'import resvg_wasm from "./index_bg.wasm?module";',
-        delimiters: ['', ''],
-        preventAssignment: false,
-      }),
-    ],
-  },
   esbuild: {
     options: {
       jsxFactory: 'React.createElement',

docs/package.json

@@ -20,7 +20,7 @@
     "dev": "npx nitropack dev",
     "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",
-    "build": "pnpm run /^prebuild:.*/ && pnpm run /^build:.*/ && pnpm postbuild:vercelJson",
+    "build": "pnpm run /^prebuild:.*/ && pnpm run build:api && pnpm run build:docs && pnpm postbuild:vercelJson",
     "preview": "node .output/server/index.mjs"
   },
   "author": "Eric Fennis",
@@ -31,7 +31,8 @@
     "@lucide/shared": "workspace:*",
     "@rollup/plugin-replace": "^6.0.3",
     "@types/semver": "^7.7.1",
-    "nitropack": "2.8.1",
+    "h3": "^1.15.4",
+    "nitropack": "^2.12.4",
     "rollup-plugin-copy": "^3.5.0",
     "svg-path-commander": "^2.1.11",
     "vitepress": "^1.6.4"
@@ -39,20 +40,19 @@
   "dependencies": {
     "@floating-ui/vue": "^1.1.9",
     "@headlessui/vue": "^1.7.23",
-    "@resvg/resvg-wasm": "^2.6.2",
     "@vueuse/components": "^14.0.0",
     "@vueuse/core": "^14.0.0",
     "element-to-path": "^1.2.1",
     "fuse.js": "^7.1.0",
     "jszip": "^3.10.1",
-    "lodash": "^4.17.23",
     "lodash-es": "^4.17.23",
     "lucide-react": "workspace:*",
     "lucide-vue-next": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sandpack-vue3": "3.1.11",
     "semver": "^7.7.3",
+    "sharp": "^0.34.5",
     "shiki": "^3.15.0",
     "simple-git": "^3.30.0",
     "sitemap": "^7.1.2",

docs/scripts/writeVercelOutput.mjs

@@ -22,24 +22,30 @@ const iconAliasesRedirectRoutes = Object.entries(iconMetaData)
     };
   });
 
-const vercelRouteConfig = {
-  version: 3,
-  overrides: {},
-  cleanUrls: true,
-  routes: [
-    {
-      handle: 'filesystem',
-    },
-    {
-      src: '(?<url>/api/.*)',
-      dest: '/__nitro?url=$url',
-    },
-    ...iconAliasesRedirectRoutes,
-  ],
-};
+const vercelOutputJSON = path.resolve(currentDir, '.vercel/output/config.json');
+
+const vercelConfig = await fs.promises.readFile(vercelOutputJSON, 'utf-8');
+
+const vercelRouteConfig = JSON.parse(vercelConfig);
+
+vercelRouteConfig.routes = [...iconAliasesRedirectRoutes, ...vercelRouteConfig.routes];
+
+// Adjust the existing catch-all route to only catch API routes, so that we can add a new catch-all route for 404s
+const allCatchRoute = '/(.*)';
+const fallBackIndex = vercelRouteConfig.routes.findIndex((route) => route.src === allCatchRoute);
+
+if (fallBackIndex === -1) {
+  throw new Error(
+    `Could not find the expected catch-all route with src "${allCatchRoute}" in the existing Vercel config. Please make sure that the existing config has a catch-all route and that its src is "${allCatchRoute}".`,
+  );
+}
+
+vercelRouteConfig.routes[fallBackIndex].src = '/api/(.*)';
+vercelRouteConfig.routes.push({
+  src: allCatchRoute,
+  dest: '/404.html',
+});
 
 const output = JSON.stringify(vercelRouteConfig, null, 2);
 
-const vercelOutputJSON = path.resolve(currentDir, '.vercel/output/config.json');
-
 await fs.promises.writeFile(vercelOutputJSON, output, 'utf-8');

docs/tsconfig.json

@@ -2,6 +2,8 @@
   "extends": "./.nitro/types/tsconfig.json",
   "compilerOptions": {
     "jsx": "react",
+    "jsxFactory": "React.createElement",
+    "jsxFragmentFactory": "React.Fragment",
     "allowImportingTsExtensions": true,
     "allowSyntheticDefaultImports": true,
     "noEmit": true,

docs/vercel.json

@@ -1,4 +1,6 @@
 {
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "fluid": true,
   "cleanUrls": true,
   "github": {
     "silent": true