fix: icons tree-shaking for prod and pre-bundling for dev

README.md

@@ -14,13 +14,13 @@ Build performant 3D user interfaces for Three.js using @react-three/fiber and yo
 
 TODO Release
 
+- drag/click threshold
 - add shadcn components
 - cli for kits
 - add apfel components
 - Content "measureContent" flag => allow disabling content measuring and scaling
 - support for visibility="hidden"
 - input
-- Label
 - decrease clipping rect when scrollbar present
 
 TODO Later

docs/getting-started/introduction.md

@@ -42,10 +42,18 @@ createRoot(document.getElementById('root')).render(
 | [View All Components]()             | -   |
 | `uikit add default {Component}` | -   |
 
-## Tutorials
+## How to get started ?
 
 The tutorials expect some level of familarity with react, threejs, and @react-three/fiber.
 
-1. First Layout
+1. Build your [First Layout]()
+2. Learn about the [Available Components and Their Properties]()
+3. Get inspired by our [Examples]()
+4. Learn more about
+- Using [Custom Materials]()
+- Using [Custom Fonts]()
+- Creating [Responsivene User Interfaces]()
+- [Scrolling]()
+- [Sizing]()
+5. Learn about [Common Pitfalls]() and how to [Optimize Performance]()
 
-- Custom Material

examples/dashboard/vite.config.ts

@@ -5,6 +5,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+  },
   resolve: {
     alias: [
       { find: '@', replacement: path.resolve(__dirname, '../../packages/kits/default') },

examples/default/vite.config.ts

@@ -5,6 +5,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+  },
   resolve: {
     alias: [
       { find: '@', replacement: path.resolve(__dirname, '../../packages/kits/default') },

examples/lucide/vite.config.ts

@@ -5,6 +5,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+  },
   resolve: {
     alias: [
       { find: '@', replacement: path.resolve(__dirname, '../../packages/kits/default') },

examples/market/vite.config.ts

@@ -5,6 +5,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+  },
   resolve: {
     alias: [
       { find: '@', replacement: path.resolve(__dirname, '../../packages/kits/default') },

examples/uikit/src/App.tsx

@@ -60,6 +60,7 @@ export default function App() {
           <Container
             onHoverChange={(hover) => (x.value = hover ? 'yellow' : undefined)}
             backgroundColor={x}
+            borderColor="white"
             borderBend={1}
             border={20}
             borderRadius={30}

examples/uikit/vite.config.ts

@@ -5,6 +5,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    include: ['@react-three/uikit-lucide', '@react-three/uikit'],
+  },
   resolve: {
     alias: [
       { find: '@', replacement: path.resolve(__dirname, '../../packages/kits/default') },

packages/icons/lucide/convert.ts

@@ -1,11 +1,11 @@
 //@ts-ignore
-import SVGFixer from 'oslllo-svg-fixer';
+import SVGFixer from 'oslllo-svg-fixer'
 
-const searchDir = "node_modules/lucide-static/icons/";
-const outDir = "./icons/"
+const searchDir = 'node_modules/lucide-static/icons/'
+const outDir = './icons/'
 
 async function main() {
   await SVGFixer(searchDir, outDir).fix()
 }
 
-main();
+main()

packages/icons/lucide/generate.ts

@@ -1,37 +1,40 @@
-import { readdir, readFile, writeFile } from "fs/promises";
+import { readdir, readFile, writeFile } from 'fs/promises'
 
-const baseDir = "icons/";
+const baseDir = 'icons/'
 
 async function main() {
-  const icons = await readdir(baseDir);
+  const icons = await readdir(baseDir)
   for (const icon of icons) {
-    if (icon === ".gitkeep") {
-      continue;
+    if (icon === '.gitkeep') {
+      continue
     }
-    const name = getName(icon);
-    const raw = await readFile(`${baseDir}${icon}`);
-    const svg = raw.toString();
+    const name = getName(icon)
+    const raw = await readFile(`${baseDir}${icon}`)
+    const svg = raw.toString()
     const code = `
       /* eslint-disable no-shadow-restricted-names */
       import { SvgIconFromText, ComponentInternals } from "@react-three/uikit";
       import { ComponentPropsWithoutRef, forwardRef } from "react"; 
       export type ${name}Props = Omit<ComponentPropsWithoutRef<typeof SvgIconFromText>, "text" | "svgWidth" | "svgHeight">;
       const text = \`${svg}\`;
-      export const ${name} = forwardRef<ComponentInternals, ${name}Props>((props, ref) => {
+      export const ${name} = /*@__PURE__*/ forwardRef<ComponentInternals, ${name}Props>((props, ref) => {
         return <SvgIconFromText {...props} ref={ref} text={text} svgWidth={24} svgHeight={24} />
       })
-    `;
-    writeFile(`src/${name}.tsx`, code);
+    `
+    writeFile(`src/${name}.tsx`, code)
   }
   writeFile(
-    "src/index.tsx",
-    icons.filter(icon => icon != ".gitkeep").map((icon) => `export * from "./${getName(icon)}.js";`).join("\n"),
-  );
+    'src/index.tsx',
+    icons
+      .filter((icon) => icon != '.gitkeep')
+      .map((icon) => `export * from "./${getName(icon)}.js";`)
+      .join('\n'),
+  )
 }
 
 function getName(file: string): string {
-  const name = file.slice(0, -4);
-  return name[0].toUpperCase() + name.slice(1).replace(/-./g, (x) => x[1].toUpperCase());
+  const name = file.slice(0, -4)
+  return name[0].toUpperCase() + name.slice(1).replace(/-./g, (x) => x[1].toUpperCase())
 }
 
-main();
+main()