PageSourceSearch

https://farm-nightly.netlify.app/assets/js/98b7c949.be9469dd.js

js farm-nightly.netlify.app collected 2026-10-03 10:45:25 UTC 16,515 bytes, 1 lines download raw bytes

1"use strict";(self.webpackChunkfarm_docs=self.webpackChunkfarm_docs||[]).push([[6880],{15553:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>m,frontMatter:()=>i,metadata:()=>o,toc:()=>d});var a=t(49214),r=t(36906),s=t(37620);const i={},c="React",o={id:"frameworks/react",title:"React",description:"Create a React project based on Farm.",source:"@site/docs/frameworks/react.mdx",sourceDirName:"frameworks",slug:"/frameworks/react",permalink:"/docs/frameworks/react",draft:!1,unlisted:!1,editUrl:"https://github.com/farm-fe/farm-fe.github.io/tree/main/docs/frameworks/react.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Vanilla",permalink:"/docs/frameworks/vanilla"},next:{title:"Vue",permalink:"/docs/frameworks/vue"}},l={},d=[{value:"Creating a React Project",id:"creating-a-react-project",level:3},{value:"Integrating emotion",id:"integrating-emotion",level:3},{value:"Integrating svgr",id:"integrating-svgr",level:3}];function p(e){const n={a:"a",code:"code",h1:"h1",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"react",children:"React"})}),"\n",(0,a.jsxs)(n.p,{children:["Create a ",(0,a.jsx)(n.code,{children:"React"})," project based on ",(0,a.jsx)(n.code,{children:"Farm"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"Farm"})," provides two approaches to support creating ",(0,a.jsx)(n.code,{children:"React"})," projects:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Use the ",(0,a.jsx)(n.code,{children:"create-farm"})," scaffold to create a scaffold project"]}),"\n",(0,a.jsxs)(n.li,{children:["You can manually create a ",(0,a.jsx)(n.code,{children:"React"})," project following the current documentation"]}),"\n"]}),"\n",(0,a.jsx)(n.h3,{id:"creating-a-react-project",children:"Creating a React Project"}),"\n",(0,a.jsx)(s.k,{command:"npm create farm@latest"}),"\n",(0,a.jsxs)(n.p,{children:["Select ",(0,a.jsx)(n.code,{children:"React"})," template in ",(0,a.jsx)(n.code,{children:"Select Framework"})]}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"Farm"})," requires the registration of the ",(0,a.jsx)(n.code,{children:"@farmfe/plugin-react"})," plugin to support ",(0,a.jsx)(n.code,{children:"React"})," projects."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:'title="farm.config.ts"',children:"import { defineConfig } from '@farmfe/core';\n\nexport default defineConfig({\n  plugins: ['@farmfe/plugin-react'],\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"@farmfe/plugin-react"})," plugin is written in ",(0,a.jsx)(n.code,{children:"Rust"}),", so you do not need to explicitly import it; you can register it by passing a string package name."]}),"\n",(0,a.jsx)(n.h3,{id:"integrating-emotion",children:"Integrating emotion"}),"\n",(0,a.jsxs)(n.p,{children:["You can support ",(0,a.jsx)(n.code,{children:"emotion"})," by registering the ",(0,a.jsx)(n.code,{children:"@swc/plugin-emotion"})," plugin."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:'title="farm.config.ts"',children:"import { defineConfig } from '@farmfe/core';\n\nexport default defineConfig({\n  compilation: {\n    script: {\n      plugins: [\n        {\n          name: '@swc/plugin-emotion',\n          options: {},\n          filters: {\n            moduleTypes: ['tsx'],\n          },\n        },\n      ],\n    },\n  },\n  plugins: [['@farmfe/plugin-react', { \"importSource\": \"@emotion/react\" }]],\n});\n\n"})}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:'title="src/index.tsx"',children:"import { css } from '@emotion/react';\n\nconst color = 'white';\n\nexport function Main() {\n  return (\n    <div\n      onClick={() => setCount((c) => c + 1)}\n      css={css`\n        padding: 32px;\n        background-color: hotpink;\n        font-size: 24px;\n        border-radius: 4px;\n        &:hover {\n          color: ${color};\n        }\n      `}\n    >\n      {a}: {count}\n    </div>\n  );\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"integrating-svgr",children:"Integrating svgr"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"SVGR"})," is a tool for transforming svgs into React components. Farm offers a Js plugin to support SVGR."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:'title="farm.config.ts"',children:"import { defineConfig } from '@farmfe/core';\nimport farmJsPluginSvgr from '@farmfe/js-plugin-svgr';
1\n\nexport default defineConfig(async (env) => {\n  return {\n    plugins: [\n      [\n        '@farmfe/plugin-react',\n        {\n          refresh: process.env.NODE_ENV === 'development',\n          development: process.env.NODE_ENV === 'development'\n        }\n      ],\n      farmJsPluginSvgr()\n    ]\n  };\n});\n\n\n"})}),"\n",(0,a.jsx)(n.p,{children:"If you want to start DevServer"}),"\n",(0,a.jsx)(s.k,{command:"pnpm dev"}),"\n",(0,a.jsx)(n.p,{children:"If you need to run the build production environment product command"}),"\n",(0,a.jsx)(s.k,{command:"pnpm build"}),"\n",(0,a.jsx)(n.p,{children:"If you need to preview your build product"}),"\n",(0,a.jsx)(s.k,{command:"pnpm preview"}),"\n",(0,a.jsxs)(n.p,{children:["For more example details: ",(0,a.jsx)(n.a,{href:"https://github.com/farm-fe/farm/tree/main/examples/react",children:"React Example"})]})]})}function m(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},37620:(e,n,t)=>{t.d(n,{k:()=>j});var a=t(48318);const r=(0,a.createContext)({tabData:{},setTabData:()=>{}}),s={container:"container__nVC","tab-list":"tab-list_aJ1t",tab:"tab_J4Y8",selected:"selected_erAK","no-scrollbar":"no-scrollbar_vtMC"};var i=t(49214);const c=e=>function(e){return!(!e||"object"!=typeof e||!("label"in e))}(e)?e.label||e.value:e,o=(0,a.forwardRef)(((e,n)=>{const{values:t,defaultValue:o,onChange:l,children:d,groupId:p,tabPosition:m="left",tabContainerClassName:u}=e,h=a.Children.toArray(d).filter((e=>!("string"==typeof e&&""===e.trim())));let f=t||[];0===f.length&&(f=a.Children.map(h,(e=>(0,a.isValidElement)(e)?{label:e.props?.label,value:e.props?.value||e.props?.label}:{label:void 0,value:void 0})));const{tabData:g,setTabData:x}=(0,a.useContext)(r),[j,v]=(0,a.useState)((()=>void 0===o?0:f.findIndex((e=>"string"==typeof e?e===o:!(!e||"object"!=typeof e||!("value"in e))&&e.value===o)))),[b,w]=function(e,n){void 0===n&&(n=null);const[t,r]=(0,a.useState)((()=>"undefined"==typeof window?n:localStorage.getItem(e)??n)),s=(0,a.useCallback)((n=>{r((t=>{const a="function"==typeof n?n(t):n;return null==a?localStorage.removeItem(e):localStorage.setItem(e,a),a}))}),[e]);return(0,a.useEffect)((()=>{const t=t=>{t.key===e&&r(localStorage.getItem(e)??n)};return window.addEventListener("storage",t),()=>{window.removeEventListener("storage",t)}}),[e,n]),[t,s]}(`tabs.${p}`,j),y=(0,a.useMemo)((()=>p?void 0!==g[p]?g[p]:Number.parseInt(b):j),[g[p]]);(0,a.useEffect)((()=>{if(p){const e=Number.parseInt(b);y!==e&&x({...g,[p]:e})}}),[b]),(0,a.useEffect)((()=>{k(p?y:j)}),[p,y,j]);const[C,k]=(0,a.useState)(p?y:j);return(0,i.jsxs)("div",{className:s.container,ref:n,children:[(0,i.jsx)("div",{className:u,children:f.length?(0,i.jsx)("div",{className:`${s["tab-list"]} ${s["no-scrollbar"]}`,style:{display:"flex",justifyContent:"center"===m?"center":"flex-start"},children:f.map(((e,n)=>(0,i.jsx)("div",{className:`${s.tab} ${C===n?s.selected:s["not-selected"]}`,onClick:()=>{const e=n;l?.(e),k(e),p?(x({...g,[p]:e}),w(e)):v(e)},children:c(e)},n)))}):null}),(0,i.jsx)("div",{children:a.Children.toArray(h)[C]})]})}));function l(e){let{children:n,...t}=e;return(0,i.jsx)("div",{...t,className:"rounded-md",children:n})}function d(e){return(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 256 256",...e,children:[(0,i.jsx)("path",{fill:"#C12127",d:"M0 256V0h256v256z"}),(0,i.jsx)("path",{fill:"#FFF",d:"M48 48h160v160h-32V80h-48v128H48z"})]})}function p(e){return(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 128 128",...e,children:(0,i.jsxs)("g",{fill:"#2c8ebb",children:[(0,i.jsx)("path",{d:"M99.24 80.71C94.9 80.76 91.1 83 87.89 85c-6 3.71-9 3.47-9 3.47l-.1-.17c-.41-.67 1.92-6.68-.69-13.84c-2.82-7.83-7.3-9.72-6.94-10.32c1.53-2.59 5.36-6.7 6.89-14.36c.91-4.64.67-12.28-1.39-16.28c-.38-.74-3.78 1.24-3.78 1.24s-3.18-7.09-4.07-7.66c-2.87-1.84-6 7.61-6 7.61a14 14 0 0 0-11.71 4.5a9.64 9.64 0 0 1-3.85 2.27c-.41.14-.91.12-2.15 3.47c-1.9 5.07 3.24 10.81 3.24 10.81s-6.13 4.33-8.4 9.72a24.78 24.78 0 0 0-1.75 11.68s-4.36 3.78-4.64 7.68a12.87 12.87 0 0 0 1.77 7.83a1.94 1.94 0 0 0 2.63.91s-2.9 3.38-.19 4.81c2.47 1.29 6.63 2 8.83-.19c1.6-1.6 1.92-5.17 2.51-6.63c.14-.34.62.57 1.08 1a10 10 0 0 0 1.36 1s-3.9 1.68-2.3 5.51c.53 1.27 2.42 2.08 5.51 2.06c1.15 0 13.76-.72 17.12-1.53a4.33 4.33 0 0 0 2.61-1.46a63 63 0 0 0 15.49-7c4.74-3.09 6.68-3.93 10.51-4.84c3.16-.75 2.95-5.65-1.24-5.58z"}),(0,i.jsx)("path",{d:"M64 2a62 62 0 1 0 62 62A62 62 0 0 0 64 2zm37.3 87.83c-3.35.81-4.91 1.44-9.41 4.36a67 67 0 0 1-15.56 7.18a8.71 8.71 0 0 1-3.64 1.77c-3.81.93-16.88 1.63-17.91 1.63h-.24c-4 0-6.27-1.24-7.49-2.54c-3.4 1.7-7.8 1-11-.69a5.55 5.55 0 0 1-3-3.9a6 6 0 0 1 0-2.06a6.66 6.66 0 0 1-.79-1A16.38 16.38 0 0 1 3
10 84.52c.29-3.73 2.87-7.06 4.55-8.83A28.56 28.56 0 0 1 36.61 64a26.82 26.82 0 0 1 6.82-9c-1.65-2.78-3.33-7.06-1.7-11.42c1.17-3.11 2.13-4.84 4.24-5.58a6.84 6.84 0 0 0 2.51-1.34A17.65 17.65 0 0 1 60.34 31c.19-.48.41-1 .65-1.46c1.6-3.4 3.3-5.31 5.29-6a4.88 4.88 0 0 1 4.4.5c.65.43 1.48 1 3.9 6a4.69 4.69 0 0 1 2.85-.1a3.81 3.81 0 0 1 2.39 1.94c2.47 4.74 2.8 13.19 1.72 18.62a33.8 33.8 0 0 1-5.84 13.31a25.73 25.73 0 0 1 5.77 9.43a25.42 25.42 0 0 1 1.41 10.41A28.7 28.7 0 0 0 86 81.91c3.06-1.89 7.68-4.74 13.19-4.81a6.62 6.62 0 0 1 7 5.7a6.35 6.35 0 0 1-4.89 7.03z"})]})})}function m(e){return(0,i.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 128 128",...e,children:[(0,i.jsx)("path",{fill:"#f8ab00",d:"M0 .004V40h39.996V.004Zm43.996 0V40h40V.004Zm44.008 0V40H128V.004Zm0 43.996v39.996H128V44Z"}),(0,i.jsx)("path",{fill:"#4c4c4c",d:"M43.996 44v39.996h40V44ZM0 87.996v40h39.996v-40Zm43.996 0v40h40v-40Zm44.008 0v40H128v-40Z"})]})}function u(e){return(0,i.jsxs)("svg",{id:"Bun",width:"1.2em",height:"1.2em",viewBox:"0 0 80 70",...e,children:[(0,i.jsx)("path",{id:"Shadow",d:"M71.09,20.74c-.16-.17-.33-.34-.5-.5s-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5-.33-.34-.5-.5A26.46,26.46,0,0,1,75.5,35.7c0,16.57-16.82,30.05-37.5,30.05-11.58,0-21.94-4.23-28.83-10.86l.5.5.5.5.5.5.5.5.5.5.5.5.5.5C19.55,65.3,30.14,69.75,42,69.75c20.68,0,37.5-13.48,37.5-30C79.5,32.69,76.46,26,71.09,20.74Z"}),(0,i.jsxs)("g",{id:"Body",children:[(0,i.jsx)("path",{id:"Backgroun
1d",d:"M73,35.7c0,15.21-15.67,27.54-35,27.54S3,50.91,3,35.7C3,26.27,9,17.94,18.22,13S33.18,3,38,3s8.94,4.13,19.78,10C67,17.94,73,26.27,73,35.7Z",style:{fill:"#fbf0df"}}),(0,i.jsx)("path",{id:"Bottom_Shadow","data-name":"Bottom Shadow",d:"M73,35.7a21.67,21.67,0,0,0-.8-5.78c-2.73,33.3-43.35,34.9-59.32,24.94A40,40,0,0,0,38,63.24C57.3,63.24,73,50.89,73,35.7Z",style:{fill:"#f6dece"}}),(0,i.jsx)("path",{id:"Light_Shine","data-name":"Light Shine",d:"M24.53,11.17C29,8.49,34.94,3.46,40.78,3.45A9.29,9.29,0,0,0,38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7c0,.4,0,.8,0,1.19C9.06,15.48,20.07,13.85,24.53,11.17Z",style:{fill:"#fffefc"}}),(0,i.jsx)("path",{id:"Top",d:"M35.12,5.53A16.41,16.41,0,0,1,29.49,18c-.28.25-.06.73.3.59,3.37-1.31,7.92-5.23,6-13.14C35.71,5,35.12,5.12,35.12,5.53Zm2.27,0A16.24,16.24,0,0,1,39,19c-.12.35.31.65.55.36C41.74,16.56,43.65,11,37.93,5,37.64,4.74,37.19,5.14,37.39,5.49Zm2.76-.17A16.42,16.42,0,0,1,47,17.12a.33.33,0,0,0,.65.11c.92-3.49.4-9.44-7.17-12.53C40.08,4.54,39.82,5.08,40.15,5.32ZM21.69,15.76a16.94,16.94,0,0,0,10.47-9c.18-.36.75-.22.66.18-1.73,8-7.52,9.67-11.12,9.45C21.32,16.4,21.33,15.87,21.69,15.76Z",style:{fill:"#ccbea7",fillRule:"evenodd"}}),(0,i.jsx)("path",{id:"Outline",d:"M38,65.75C17.32,65.75.5,52.27.5,35.7c0-10,6.18-19.33,16.53-24.92,3-1.6,5.57-3.21,7.86-4.62,1.26-.78,2.45-1.51,3.6-2.19C32,1.89,35,.5,38,.5s5.62,1.2,8.9,3.14c1,.57,2,1.19,3.07,1.87,2.49,1.54,5.3,3.28,9,5.27C69.32,16.37,75.5,25.69,75.5,35.7,75.5,52.27,58.68,65.75,38,65.75ZM38,3c-2.42,0-5,1.25-8.25,3.13-1.13.66-2.3,1.39-3.54,2.15-2.33,1.44-5,3.07-8,4.7C8.69,18.13,3,26.62,3,35.7,3,50.89,18.7,63.25,38,63.25S73,50.89,73,35.7C73,26.62,67.31,18.13,57.78,13,54,11,51.05,9.12,48.66,7.64c-1.09-.67-2.09-1.29-3-1.84C42.63,4,40.42,3,38,3Z"})]}),(0,i.jsxs)("g",{id:"Mouth",children:[(0,i.jsx)("g",{id:"Backgroun
1d-2","data-name":"Background",children:(0,i.jsx)("path",{d:"M45.05,43a8.93,8.93,0,0,1-2.92,4.71,6.81,6.81,0,0,1-4,1.88A6.84,6.84,0,0,1,34,47.71,8.93,8.93,0,0,1,31.12,43a.72.72,0,0,1,.8-.81H44.26A.72.72,0,0,1,45.05,43Z",style:{fill:"#b71422"}})}),(0,i.jsxs)("g",{id:"Tongue",children:[(0,i.jsx)("path",{id:"Background-3","data-name":"Background",d:"M34,47.79a6.91,6.91,0,0,0,4.12,1.9,6.91,6.91,0,0,0,4.11-1.9,10.63,10.63,0,0,0,1-1.07,6.83,6.83,0,0,0-4.9-2.31,6.15,6.15,0,0,0-5,2.78C33.56,47.4,33.76,47.6,34,47.79Z",style:{fill:"#ff6164"}}),(0,i.jsx)("path",{id:"Outline-2","data-name":"Outline",d:"M34.16,47a5.36,5.36,0,0,1,4.19-2.08,6,6,0,0,1,4,1.69c.23-.25.45-.51.66-.77a7,7,0,0,0-4.71-1.93,6.36,6.36,0,0,0-4.89,2.36A9.53,9.53,0,0,0,34.16,47Z"})]}),(0,i.jsx)("path",{id:"Outline-3","data-name":"Outline",d:"M38.09,50.19a7.42,7.42,0,0,1-4.45-2,9.52,9.52,0,0,1-3.11-5.05,1.2,1.2,0,0,1,.26-1,1.41,1.41,0,0,1,1.13-.51H44.26a1.44,1.44,0,0,1,1.13.51,1.19,1.19,0,0,1,.25,1h0a9.52,9.52,0,0,1-3.11,5.05A7.42,7.42,0,0,1,38.09,50.19Zm-6.17-7.4c-.16,0-.2.07-.21.09a8.29,8.29,0,0,0,2.73,4.37A6.23,6.23,0,0,0,38.09,49a6.28,6.28,0,0,0,3.65-1.73,8.3,8.3,0,0,0,2.72-4.37.21.21,0,0,0-.2-.09Z"})]}),(0,i.jsxs)("g",{id:"Face",children:[(0,i.jsx)("ellipse",{id:"Right_Blush","data-name":"Right Blush",cx:"53.22",cy:"40.18",rx:"5.85",ry:"3.44",style:{fill:"#febbd0"}}),(0,i.jsx)("ellipse",{id:"Left_Bluch","data-name":"Left Bluch",cx:"22.95",cy:"40.18",rx:"5.85",ry:"3.44",style:{fill:"#febbd0"}}),(0,i.jsx)("path",{id:"Eyes",d:"M25.7,38.8a5.51,5.51,0,1,0-5.5-5.51A5.51,5.51,0,0,0,25.7,38.8Zm24.77,0A5.51,5.51,0,1,0,45,33.29,5.5,5.5,0,0,0,50.47,38.8Z",style:{fillRule:"evenodd"}}),(0,i.jsx)("path",{id:"Iris",d:"M24,33.64a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,24,33.64Zm24.77,0a2.07,2.07,0,1,0-2.06-2.07A2.07,2.07,0,0,0,48.75,33.64Z",style:{fill:"#fff",fillRule:"evenodd"}})]})]})}var h=t(3662),f=t(21970);function g(e){if(!e?.includes("install"))return e;const n=e.split(" ").filter((e=>!e.startsWith("-")&&!e.startsWith("--"))).join(" ");return"yarn install"===n||"bun install"===n?e:e.replace("install","add")}function x(e,n){let t=e;return["npm","yarn","pnpm","bun"].forEach((e=>{const a=new RegExp(`\\b${e}\\b`,"g");t=t.replace(a,n)})),t}function j(e){let n,{command:r,skip:s=!0,additionalTabs:c=[]}=e;const j={npm:(0,i.jsx)(d,{}),yarn:(0,i.jsx)(p,{}),pnpm:(0,i.jsx)(m,{}),bun:(0,i.jsx)(u,{})};if(c.forEach((e=>{j[e.tool]=e.icon})),"string"==typeof r?(n={npm:`npm ${r}`,yarn:`yarn ${r}`,pnpm:`pnpm ${r}`,bun:`bun ${r}`},c.forEach((e=>{n[e.tool]=s?x(r,e.tool):`${e.tool} ${r}`}))):n=r,n.yarn&&(n.yarn=g(n.yarn)),n.bun&&(n.bun=g(n.bun)),s){["npm","yarn","pnpm","bun"].forEach((e=>{n[e]=x(r,e)}))}const[v,b]=(0,a.useState)({}),{colorMode:w}=(0,f.G)(),y=(0,h.A)();return(0,a.useEffect)((()=>{!async function(){if(y){const{codeToHtml:e}=await Promise.all([t.e(2632),t.e(3605)]).then(t.bind(t,43605)),a={};for(const[t,r]of Object.entries(n))a[t]=await e(r,{lang:"bash",theme:"dark"===w?"vitesse-dark":"vitesse-light"});b(a)}}()}),[r,w,y]),(0,i.jsx)("div",{className:"border-solid my-4 rounded-md border-package",children:(0,i.jsx)(o,{groupId:"package.manager",values:Object.entries(n).map((e=>{let[n]=e;return(0,i.jsxs)("div",{className:"package-manager-tab",style:{display:"flex",alignItems:"center",padding:"2px 4px",borderRadius:"4px",transition:"background-color 0.3s ease"},children:[j[n],(0,i.jsx)("span",{className:"package-manager-name ",children:n})]},n)})),children:Object.entries(n).map((e=>{let[n,t]=e;return(0,i.jsx)(l,{children:(0,i.jsx)("div",{className:"codeBlock-tab shadow-md",dangerouslySetInnerHTML:{__html:v[n]||""}})},n)}))})})}}}]);

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.