1import"../chunks/DsnmJJEf.js";import"../chunks/DIHxWcDZ.js";import{f as Y,s,a as K,b as X,d as a,r as n,n as Z}from"../chunks/hPEmA7oG.js";import{h as t}from"../chunks/DiLKAzFI.js";import{l as ss,s as as}from"../chunks/7zTA4vzK.js";import{A as ns}from"../chunks/DuJsthP_.js";const x={title:"Build A React UI Library (WIP)",published_at:"2024-03-01",layout:"article"},{title:us,published_at:ks,layout:ds}=x;var ts=Y('<p>This article is a collection of notes stemming from my <a href="https://www.youtube.com/playlist?list=PLcfAVClOb1BiA6oIfHQ6Am3lpWzOmMO6J" rel="nofollow">Build React UI Youtube Series</a>. These notes arenât meant to serve as a standalone solution but rather as notes to use while following along with the series â or to refer back to.</p> <blockquote><p>â ï¸ These notes are very much Work In Progress</p></blockquote> <h2 id="setup-ui">Setup UI</h2> <p>For the first video, we setup the React UI library by using <code>vite library mode</code>.</p> <h3 id="steps-1-install-vite"><a class="heading-anchor" aria-label="Link to this section" href="#steps-1-install-vite"><span class="heading-anchor-icon">#</span></a>Steps 1, install Vite:</h3> <p><a href="https://vitejs.dev/guide/build" rel="nofollow">Vite Build Guide</a></p> <pre class="language-bash"><!></pre> <p>React + TypeScript</p> <pre class="language-bash"><!></pre> <h3 id="step-2-setup-library-mode-with-config"><a class="heading-anchor" aria-label="Link to this section" href="#step-2-setup-library-mode-with-config"><span class="heading-anchor-icon">#</span></a>Step 2, setup library mode with config:</h3> <pre class="language-js"><!></pre> <p>Follow rest of guide <a href="https://vitejs.dev/guide/build" rel="nofollow">https://vitejs.dev/guide/build</a>:</p> <ol><li>create lib/main</li> <li>create lib/components/Button</li> <li>update package.json and make sure to use the correct lib name</li> <li>test build</li></ol> <p>Package.json:</p> <pre class="language-json"><!></pre> <h3 id="step-3-ts-config-paths"><a class="heading-anchor" aria-label="Link to this section" href="#step-3-ts-config-paths"><span class="heading-anchor-icon">#</span></a>Step 3, ts config paths:</h3> <p><a href="https://www.npmjs.com/package/vite-tsconfig-paths" rel="nofollow">https://www.npmjs.com/package/vite-tsconfig-paths</a></p> <p>install:</p> <pre class="language-bash"><!></pre> <p>Update Vite and TS configs:</p> <p>TSConfig should reference the paths â directly path to <code>main.tsx</code></p> <p><a href="https://www.typescriptlang.org/tsconfig#paths" rel="nofollow">https://www.typescriptlang.org/tsconfig#paths</a></p> <h3 id="step-4-test-it"><a class="heading-anchor" aria-label="Link to this section" href="#step-4-test-it"><span class="heading-anchor-icon">#</span></a>Step 4, test it!</h3> <ul><li>import a component</li> <li>render it!</li> <li>preview it using <code>npm run dev</code></li></ul> <h2 id="tailwind-and-storybook">Tailwind and Storybook</h2> <h3 id="step-1-install-tailwind"><a class="heading-anchor" aria-label="Link to this section" href="#step-1-install-tailwind"><span class="heading-anchor-icon">#</span></a>Step 1: install tailwind</h3> <p><a href="https://tailwindcss.com/docs/guides/vite" rel="nofollow">official guide</a></p> <pre class="language-bash"><!></pre> <pre class="language-js"><!></pre> <h3 id="step-2-create-libindexcss"><a class="heading-anchor" aria-label="Link to this section" href="#step-2-create-libindexcss"><span class="heading-anchor-icon">#</span></a>Step 2: create ./lib/index.css</h3> <pre class="language-css"><!></pre> <p>Import it in <code>main.tsx</code></p> <h3 id="step-3-test-tailwind"><a class="heading-anchor" aria-label="Link to this section" href="#step-3-test-tailwind"><span class="heading-anchor-icon">#</span></a>Step 3: test Tailwind!</h3> <ul><li>add a color to the button</li> <li>publish it</li> <li>install it and test it in a separate project</li></ul> <h3 id="step-4-storybook"><a class="heading-anchor" aria-label="Link to this section" href="#step-4-storybook"><span class="heading-anchor-icon">#</span></a>Step 4: Storybook</h3> <p><a href="https://storybook.js.org/blog/storybook-for-vite/" rel="nofollow">https://storybook.js.org/blog/storybook-for-vite/</a></p> <p>Initialize storybook for vite</p> <pre class="language-bash"><!></pre> <p>Run it for the first time:</p> <pre class="language-bash"><!></pre> <h3 id="step-5-setup-storybook-for-our-usecase"><a class="heading-anchor" aria-label="Link to this section" href="#step-5-setup-storybook-for-our-usecase"><span class="heading-anchor-icon">#</span></a>Step 5: Setup storybook for our usecase</h3> <p>Delete <code>./src/stories</code></p> <p>Adjust the <code>storybook/main.ts</code> file</p> <pre class="language-ts"><!></pre> <p>Start storybook</p> <pre class="language-ts"><!></pre> <h3 id="step-6-add-first-story"><a class="heading-anchor" aria-label="Link to this section" href="#step-6-add-first-story"><span class="heading-anchor-icon">#</span></a>Step 6: Add First Story</h3> <pre class="language-ts"><!></pre> <p>It should work! :D</p> <h3 id="step-7-add-tailwind-to-storybook"><a class="heading-anchor" aria-label="Link to this section" href="#step-7-add-tailwind-to-storybook"><span class="heading-anchor-icon">#</span></a>Step 7: Add Tailwind to Storybook</h3> <p>I think this is where the complexity starts to get ridiculous and itâll get even more ridiculous. Weâre going to add Tailwind to Storybook.</p> <p>This steps feels like crossing wires but I donât know a better solution <em>yet</em>. Import <code>tailwind.css</code> in <code>.storybook/preview.js</code></p> <pre class="language-bash"><!></pre> <h2 id="export-styles-and-types">Export Styles And Types</h2> <p>In this video, we will export CSS and Types for our React UI Library project for target applications to use when importing Cottage UI.</p> <p>Resources:</p> <ul><li><a href="https://www.npmjs.com/package/vite-plugin-lib-inject-css" rel="nofollow">Vite plugin lib inject CSS</a></li> <li><a href="https://github.com/vitejs/vite/issues/1579" rel="nofollow">Vite issue 1579</a></li> <li><a href="https://www.npmjs.com/package/vite-plugin-dts" rel="nofollow">Vite Plugin DTS</a></li></ul> <p>Styles and types arenât getting exported yet which hampers our ability to use this UI library. Letâs go ahead and add that.</p> <h3 id="reinstall-command"><a class="heading-anchor" aria-label="Link to this section" href="#reinstall-command"><span class="heading-anchor-icon">#</span></a>
1Reinstall command</h3> <p>Add this command to your package.json for easy reinstall:</p> <pre class="language-json"><!></pre> <h3 id="styles"><a class="heading-anchor" aria-label="Link to this section" href="#styles"><span class="heading-anchor-icon">#</span></a>Styles</h3> <p>Add the style export and mark side effects as false in <code>package.json</code>.</p> <pre class="language-json"><!></pre> <p>Target app needs to import it:</p> <pre class="language-undefined"><!></pre> <h4 id="why"><a class="heading-anchor" aria-label="Link to this section" href="#why"><span class="heading-anchor-icon">#</span></a>Why?</h4> <p>Could not get things to work correctly with other solutions and this one seemed to make the most sense â it imports TailwindCSS. This really depends on how you want to structure your CSS.</p> <p>Since this is supposed to be an <em>internal library</em>, I prefer the simplicity of the solution over having to import an additional file</p> <h3 id="types"><a class="heading-anchor" aria-label="Link to this section" href="#types"><span class="heading-anchor-icon">#</span></a>Types</h3> <p><a href="https://www.npmjs.com/package/vite-plugin-dts" rel="nofollow">https://www.npmjs.com/package/vite-plugin-dts</a></p> <pre class="language-bash"><!></pre> <p>add plugin:</p> <pre class="language-ts"><!></pre> <p>add include into typescript:</p> <pre class="language-undefined"><!></pre> <p>Run it!</p> <h2 id="how-about-tree-shaking"><a class="heading-anchor" aria-label="Link to this section" href="#how-about-tree-shaking"><span class="heading-anchor-icon">#</span></a>How about tree-shaking?</h2> <p>Weâll handle that in the future.</p>',1);function gs(L,T){const I=ss(T,["children","$$slots","$$events","$$legacy"]);ns(L,as(()=>I,()=>x,{children:(C,ps)=>{var j=ts(),p=s(K(j),12),A=a(p);t(A,()=>'<code class="language-bash"><span class="token function">npm</span> create vite@latest</code>'),n(p);var o=s(p,4),B=a(o);t(B,()=>`<code class="language-bash"><span class="token builtin class-name">cd</span> <span class="token punctuation">[</span>into project<span class="token punctuation">]</span> 2<span class="token function">npm</span> <span class="token function">install</span> <span class="token operator">&&</span> <span class="token function">npm</span> run dev <span class="token comment"># runs the project</span></code>`),n(o);var e=s(o,4),$=a(e);t($,()=>`<code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span> 3<span class="token keyword">import</span> <span class="token punctuation">{</span> resolve <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'path'</span><span class="token punctuation">;</span> 4<span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-react'</span><span class="token punctuation">;</span> 5 6<span class="token comment">// https://vitejs.dev/config/</span> 7<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 8 <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 9 <span class="token literal-property property">build</span><span class="token operator">:</span> <span class="token punctuation">{</span> 10 <span class="token comment">// library entry (src/main.tsx)</span> 11 <span class="token literal-property property">lib</span><span class="token operator">:</span> <span class="token punctuation">{</span> 12 <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'lib/main.tsx'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> 13 <span class="token literal-property property">
13name</span><span class="token operator">:</span> <span class="token string">'react-ui-library'</span><span class="token punctuation">,</span> 14 <span class="token literal-property property">fileName</span><span class="token operator">:</span> <span class="token string">'react-ui-library'</span> <span class="token comment">// this will add extensions automatically</span> 15 <span class="token punctuation">}</span><span class="token punctuation">,</span> 16 <span class="token comment">// import react and react-dom as external</span> 17 <span class="token literal-property property">rollupOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span> 18 <span class="token literal-property property">external</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'react'</span><span class="token punctuation">,</span> <span class="token string">'react-dom'</span><span class="token punctuation">,</span> <span class="token string">'react/jsx-runtime'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 19 <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span> 20 <span class="token literal-property property">globals</span><span class="token operator">:</span> <span class="token punctuation">{</span> 21 <span class="token literal-property property">react</span><span class="token operator">:</span> <span class="token string">'React'</span><span class="token punctuation">,</span> 22 <span class="token string-property property">'react-dom'</span><span class="token operator">:</span> <span class="token string">'ReactDOM'</span><span class="token punctuation">,</span> 23 <span class="token string-property property">'react/jsx-runtime'</span><span class="token operator">:</span> <span class="token string">'react/jsx-runtime'</span> 24 <span class="token punctuation">}</span> 25 <span class="token punctuation">}</span> 26 <span class="token punctuation">}</span> 27 <span class="token punctuation">}</span> 28<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>`),n(e);var c=s(e,8),R=a(c);t(R,()=>`<code class="language-json"><span class="token punctuation">{</span> 29 <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"react-ui-library"</span><span class="token punctuation">,</span> 30 <span class="token property">"private"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> 31 <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"0.0.0"</span><span class="token punctuation">,</span> 32 <span class="token property">"type"</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span> 33 <span class="token property">"files"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"dist"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 34 <span class="token property">"main"</span><span class="token operator">:</span> <span class="token string">"dist/react-ui-library.cjs"</span><span class="token punctuation">,</span> 35 <span class="token property">"module"</span><span class="token operator">:</span> <span class="token string">"dist/react-ui-library.js"</span><span class="token punctuation">,</span> 36 <span class="token property">"exports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> 37 <span class="token property">"."</span><span class="token operator">:</span> <span class="token punctuation">{</span> 38 <span class="token property">"import"</span><span class="token operator">:</span> <span class="token string">"./dist/react-ui-library.js"</span><span class="token punctuation">,</span> 39 <span class="token property">"require"</span><span class="token operator">:</span> <span class="token string">"./dist/react-ui-library.umd.cjs"</span> 40 <span class="token punctuation">}</span> 41 <span class="token punctuation">}</span><span class="token punctuation">,</span> 42 <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span> 43 <span class="token property">
43"dev"</span><span class="token operator">:</span> <span class="token string">"vite"</span><span class="token punctuation">,</span> 44 <span class="token property">"prebuild"</span><span class="token operator">:</span> <span class="token string">"rm -rf build"</span><span class="token punctuation">,</span> 45 <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"tsc && vite build"</span><span class="token punctuation">,</span> 46 <span class="token property">"lint"</span><span class="token operator">:</span> <span class="token string">"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"</span><span class="token punctuation">,</span> 47 <span class="token property">"preview"</span><span class="token operator">:</span> <span class="token string">"vite preview"</span><span class="token punctuation">,</span> 48 <span class="token property">"prepublish"</span><span class="token operator">:</span> <span class="token string">"npm run build"</span> 49 <span class="token punctuation">}</span><span class="token punctuation">,</span> 50 <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> 51 <span class="token property">"react"</span><span class="token operator">:</span> <span class="token string">"^18.2.0"</span><span class="token punctuation">,</span> 52 <span class="token property">"react-dom"</span><span class="token operator">:</span> <span class="token string">"^18.2.0"</span> 53 <span class="token punctuation">}</span><span class="token punctuation">,</span> 54 <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> 55 <span class="token property">"@types/react"</span><span class="token operator">:</span> <span class="token string">"^18.2.55"</span><span class="token punctuation">,</span> 56 <span class="token property">"@types/react-dom"</span><span class="token operator">:</span> <span class="token string">"^18.2.19"</span><span class="token punctuation">,</span> 57 <span class="token property">"@typescript-eslint/eslint-plugin"</span><span class="token operator">:</span> <span class="token string">"^6.21.0"</span><span class="token punctuation">,</span> 58 <span class="token property">"@typescript-eslint/parser"</span><span class="token operator">:</span> <span class="token string">"^6.21.0"</span><span class="token punctuation">,</span> 59 <span class="token property">"@vitejs/plugin-react"</span><span class="token operator">:</span> <span class="token string">
59"^4.2.1"</span><span class="token punctuation">,</span> 60 <span class="token property">"eslint"</span><span class="token operator">:</span> <span class="token string">"^8.56.0"</span><span class="token punctuation">,</span> 61 <span class="token property">"eslint-plugin-react-hooks"</span><span class="token operator">:</span> <span class="token string">"^4.6.0"</span><span class="token punctuation">,</span> 62 <span class="token property">"eslint-plugin-react-refresh"</span><span class="token operator">:</span> <span class="token string">"^0.4.5"</span><span class="token punctuation">,</span> 63 <span class="token property">"typescript"</span><span class="token operator">:</span> <span class="token string">"^5.2.2"</span><span class="token punctuation">,</span> 64 <span class="token property">"vite"</span><span class="token operator">:</span> <span class="token string">"^5.1.0"</span> 65 <span class="token punctuation">}</span> 66<span class="token punctuation">}</span></code>`),n(c);var r=s(c,8),U=a(r);t(U,()=>'<code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> vite-tsconfig-paths</code>'),n(r);var l=s(r,18),D=a(l);t(D,()=>`<code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> tailwindcss postcss autoprefixer 67npx tailwindcss init <span class="token parameter variable">-p</span></code>`),n(l);var i=s(l,2),O=a(i);t(O,()=>`<code class="language-js"><span class="token comment">/** @type {import('tailwindcss').Config} */</span> 68<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> 69 <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span> 70 <span class="token comment">// reference the library _only_</span> 71 <span class="token string">'./lib/**/*.{js,ts,jsx,tsx}'</span> 72 <span class="token punctuation">]</span><span class="token punctuation">,</span> 73 <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token punctuation">{</span> 74 <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> 75 <span class="token punctuation">}</span><span class="token punctuation">,</span> 76 <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> 77<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`),n(i);var u=s(i,4),V=a(u);t(V,()=>`<code class="language-css"><span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span> 78<span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span> 79<span class="token atrule"><span class="token rule">@tailwind</span> utilities<span class="token punctuation">;</span></span></code>`),n(u);var k=s(u,14),P=a(k);t(P,()=>'<code class="language-bash">npx sb init <span class="token parameter variable">--builder</span> @storybook/builder-vite</code>'),n(k);var d=s(k,4),W=a(d);t(W,()=>'<code class="language-bash"><span class="token function">npm</span> run storybook</code>'),n(d);var g=s(d,8),M=a(g);t(M,()=>`<code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> StorybookConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@storybook/react-vite'</span><span class="token punctuation">;</span> 80 81<span class="token keyword">const</span> config<span class="token operator">:</span> StorybookConfig <span class="token operator">=</span> <span class="token punctuation">{</span> 82 <span class="token comment">// our lib paths</span>
83 stories<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'../lib/**/*.mdx'</span><span class="token punctuation">,</span> <span class="token string">'../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> 84 addons<span class="token operator">:</span> <span class="token punctuation">[</span> 85 <span class="token string">'@storybook/addon-links'</span><span class="token punctuation">,</span> 86 <span class="token string">'@storybook/addon-essentials'</span><span class="token punctuation">,</span> 87 <span class="token string">'@storybook/addon-onboarding'</span><span class="token punctuation">,</span> 88 <span class="token string">'@storybook/addon-interactions'</span> 89 <span class="token punctuation">]</span><span class="token punctuation">,</span> 90 framework<span class="token operator">:</span> <span class="token punctuation">{</span> 91 name<span class="token operator">:</span> <span class="token string">'@storybook/react-vite'</span><span class="token punctuation">,</span> 92 options<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> 93 <span class="token punctuation">}</span><span class="token punctuation">,</span> 94 docs<span class="token operator">:</span> <span class="token punctuation">{</span> 95 autodocs<span class="token operator">:</span> <span class="token string">'tag'</span> 96 <span class="token punctuation">}</span> 97<span class="token punctuation">}</span><span class="token punctuation">;</span> 98<span class="token keyword">export</span> <span class="token keyword">default</span> config<span class="token punctuation">;</span></code>`),n(g);var h=s(g,4),q=a(h);t(q,()=>'<code class="language-ts">npm run storybook</code>'),n(h);var y=s(h,4),z=a(y);t(z,()=>`<code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Meta<span class="token punctuation">,</span> StoryObj <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@storybook/react'</span> 99 100<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./Button'</span> 101 102<span class="token keyword">const</span> meta<span class="token operator">:</span> Meta<span class="token operator"><</span><span class="token keyword">typeof</span> Button<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span> 103 component<span class="token operator">:</span> Button<span class="token punctuation">,</span> 104<span class="token punctuation">}</span> 105 106<span class="token keyword">export</span> <span class="token keyword">default</span> meta 107 108<span class="token keyword">type</span> <span class="token class-name">Story</span> <span class="token operator">=</span> StoryObj<span class="token operator"><</span><span class="token keyword">typeof</span> Button<span class="token operator">></span> 109 110<span class="token keyword">export</span> <span class="token keyword">const</span> Default<span class="token operator">:</span> <span class="token function-variable function">Story</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>Button<span class="token operator">></span>Click me<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span></code>`),n(y);var m=s(y,10),F=a(m);t(F,()=>`<code class="language-bash"><span class="token function">import</span> <span class="token string">'../lib/tailwind.css'</span></code>`),n(m);var f=s(m,16),E=a(f);t(E,()=>'<code class="language-json"><span class="token property">
110"reinstall"</span><span class="token operator">:</span> <span class="token string">"rm -rf node_modules && npm install"</span></code>'),n(f);var b=s(f,6),H=a(b);t(H,()=>`<code class="language-json"><span class="token property">"exports"</span><span class="token operator">:</span> <span class="token punctuation">{</span> 111 <span class="token property">"./dist/style.css"</span><span class="token operator">:</span> <span class="token string">"./dist/style.css"</span> 112<span class="token punctuation">}</span><span class="token punctuation">,</span> 113<span class="token property">"sideEffects"</span><span class="token operator">:</span> <span class="token boolean">false</span></code>`),n(b);var w=s(b,4),G=a(w);t(G,()=>'<code class="language-undefined">import 'cottage-ui/dist/style.css'</code>'),n(w);var v=s(w,12),J=a(v);t(J,()=>'<code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save-dev vite-plugin-dts</code>'),n(v);var _=s(v,4),N=a(_);t(N,()=>`<code class="language-ts"><span class="token keyword">import</span> dts <span class="token keyword">from</span> <span class="token string">'vite-plugin-dts'</span><span class="token punctuation">;</span> 114plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">dts</span><span class="token punctuation">(</span><span class="token punctuation">{</span> rollupTypes<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span></code>`),n(_);var S=s(_,4),Q=a(S);t(Q,()=>'<code class="language-undefined">includes: ['lib']</code>'),n(S),Z(6),X(C,j)},$$slots:{default:!0}}))}export{gs as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.