[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_161":162,"_163":164},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_121":-5,"_20":122,"_22":123,"_124":125,"_126":127,"_26":128,"_24":129,"_130":-5,"_131":-5,"_132":51,"_133":134,"_135":42,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","all","name","iconExplorer","branchName","main","version","path","main.tsx","project",{"_32":68,"_13":14,"_43":69,"_70":-5,"_71":42,"_72":73,"_74":73,"_75":-5,"_76":-5,"_77":78,"_79":35,"_80":42,"_81":-5,"_82":-5,"_83":65,"_84":85,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":91,"_92":91,"_93":94,"_95":94,"_96":94,"_97":91,"_98":91,"_99":100,"_101":102,"_103":104,"_105":51},"tree",[54,55],"file",{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","id","cc6fde54-2795-11f0-9d52-569c3dd06744","fileId","cc52d278-2795-11f0-9d52-569c3dd06744","parentId","branchId","cc50840a-2795-11f0-9d52-569c3dd06744","branchVersion",6,"latest",true,"createdAt",["D",1724387919007],5,"fileType","http","content","/**\n * This val creates an enhanced NPM package explorer using the npm registry API.\n * It displays a grid of npm packages with basic information, categories, and navigation.\n * The approach uses React for the frontend and fetch for API calls.\n * It includes a details view for each package, a link to the npm page, and category navigation.\n */\n\n/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst ITEMS_PER_PAGE = 30;\n\nfunction App() {\n const [searchTerm, setSearchTerm] = useState(\"\");\n const [packages, setPackages] = useState([]);\n const [selectedPackage, setSelectedPackage] = useState(null);\n const [category, setCategory] = useState(\"all\");\n const [page, setPage] = useState(1);\n\n useEffect(() => {\n fetchPackages();\n }, [searchTerm, category, page]);\n\n const fetchPackages = () => {\n let url = `/search?q=${encodeURIComponent(searchTerm)}&size=${ITEMS_PER_PAGE}&from=${(page - 1) * ITEMS_PER_PAGE}`;\n if (category !== \"all\") {\n url += `&category=${encodeURIComponent(category)}`;\n }\n fetch(url)\n .then(response => response.json())\n .then(data => setPackages(data.objects));\n };\n\n return (\n

NPM Package Explorer

\n {\n setSearchTerm(e.target.value);\n setPage(1);\n }}\n className=\"search-input\"\n />\n

\n {[\"all\", \"popular\", \"new\", \"frontend\", \"backend\", \"tools\"].map(cat => (\n \n ))}\n

\n {packages.map(pkg => (\n

setSelectedPackage(pkg.package)}>\n

{pkg.package.name}

{pkg.package.description.slice(0, 100)}...

\n ))}\n

\n \n Page {page}\n \n

\n {selectedPackage && (\n

{selectedPackage.name}

{selectedPackage.description}

Version: {selectedPackage.version}

\n View on npm\n \n

\n )}\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/search\") {\n const searchTerm = url.searchParams.get(\"q\") || \"\";\n const size = url.searchParams.get(\"size\") || \"30\";\n const from = url.searchParams.get(\"from\") || \"0\";\n const category = url.searchParams.get(\"category\") || \"\";\n\n let apiUrl = `https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(searchTerm)}&size=${size}&from=${from}`;\n \n if (category === \"popular\") {\n apiUrl += \"&popularity=1.0\";\n } else if (category === \"new\") {\n apiUrl += \"&maintenance=0&quality=0&popularity=0\";\n } else if (category !== \"all\" && category) {\n apiUrl += `&keywords=${encodeURIComponent(category)}`;\n }\n\n const response = await fetch(apiUrl);\n const data = await response.json();\n return new Response(JSON.stringify(data), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n\n return new Response(`\n \n \n \n \n \n NPM Package Explorer\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f0f0f0;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.search-input {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n margin-bottom: 20px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.category-nav {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.category-pill {\n margin: 0 5px;\n padding: 5px 15px;\n border: none;\n border-radius: 20px;\n background-color: #ddd;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.category-pill.active {\n background-color: #007bff;\n color: white;\n}\n\n.package-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.package-item {\n background-color: white;\n border-radius: 8px;\n padding: 15px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.package-item:hover {\n transform: translateY(-5px);\n}\n\n.package-details {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: white;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n z-index: 1000;\n max-width: 80%;\n max-height: 80%;\n overflow-y: auto;\n}\n\n.pagination {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n}\n\n.pagination button {\n margin: 0 10px;\n padding: 5px 10px;\n border: none;\n background-color: #007bff;\n color: white;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.pagination button:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n font-size: 14px;\n}\n\nfooter a {\n color: #666;\n text-decoration: none;\n}\n\nfooter a:hover {\n text-decoration: underline;\n}\n`;\n\nexport default server;","deleted",false,"label",[19],{"_32":60,"_13":61,"_34":62,"_36":-5,"_37":38,"_39":63,"_41":42,"_43":64,"_17":65,"_46":24,"_48":-5,"_50":51,"_52":-5,"_57":66,"_18":67},{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":56,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_57":58,"_18":59},["D",1724387919007],"children",[],[19],"cc52dd22-2795-11f0-9d52-569c3dd06744","README.md","cc52ddcc-2795-11f0-9d52-569c3dd06744",1,["D",1724304875290],0,[],[61],"cc504666-2795-11f0-9d52-569c3dd06744",["D",1746218477989],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","ade6ff6e-2082-407d-ac14-f95835477319","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","ac07f7d9-2f7b-4820-84f1-ee64e6f1c40c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_120":116},"org",{"_11":12,"_114":-5,"_115":116,"_77":78,"_117":118,"_119":51},"branch",{"_17":40,"_13":16,"_32":38,"_106":68,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":14,"_113":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":68,"_13":14,"_43":157,"_70":-5,"_71":42,"_72":73,"_74":73,"_75":-5,"_76":-5,"_77":78,"_79":35,"_80":42,"_81":-5,"_82":-5,"_83":65,"_84":85,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":91,"_92":91,"_93":94,"_95":94,"_96":94,"_97":91,"_98":91,"_99":158,"_101":159,"_103":160,"_105":51},[151,152],"files",[151,152],"counts",{"_141":65,"_142":65,"_143":65,"_144":145,"_146":147},[],{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":140},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls","branches","forks","envVars",{"_148":65,"_150":65},"connections",{"_148":65,"_149":65},"count","unfilledCount","emptyCount",{"_32":60,"_13":61,"_34":62,"_36":-5,"_37":38,"_39":63,"_41":42,"_43":64,"_17":65,"_46":24,"_48":-5,"_50":51,"_52":-5,"_57":155,"_18":156},{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":56,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_57":153,"_18":154},[],[19],[],[61],["D",1746218477989],{"_11":12,"_120":116},{"_11":12,"_114":-5,"_115":116,"_77":78,"_117":118,"_119":51},{"_17":40,"_13":16,"_32":38,"_106":68,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":14,"_113":12},"ctx",{"_99":-5,"_194":195,"_137":196,"_197":198,"_199":200,"_201":51,"_202":51,"_203":51,"_204":42,"_205":-5,"_206":-7,"_207":-7,"_208":65,"_209":51,"_210":51,"_211":-5},"ENV",{"_165":166,"_167":168,"_169":16,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","db46cea2d909ccbd011cfec0e4ddfe291f419728","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","aiChatModels",[212,213,214,215,216],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_217":241,"_52":242,"_220":243,"_75":244,"_223":42,"_224":42,"_225":226,"_227":42},{"_217":236,"_52":237,"_220":238,"_75":239,"_223":42,"_224":51,"_225":240,"_227":51},{"_217":232,"_52":233,"_220":234,"_75":235,"_223":42,"_224":42,"_225":226,"_227":51},{"_217":228,"_52":229,"_220":230,"_75":231,"_223":42,"_224":42,"_225":226,"_227":51},{"_217":218,"_52":219,"_220":221,"_75":222,"_223":42,"_224":42,"_225":226,"_227":51},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku","Claude Haiku 4.5","Haiku","Fastest; best for simple edits",200000,"deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]