[{"data":1,"prerenderedAt":475},["ShallowReactive",2],{"navigation_docs":3,"-guides-angular":113,"-guides-angular-surround":470},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":68,"body":115,"description":463,"extension":464,"links":465,"meta":466,"navigation":467,"path":69,"seo":468,"stem":70,"__hash__":469},"docs\u002F2.guides\u002F7.angular.md",{"type":116,"value":117,"toc":458},"minimark",[118,132,137,169,173,256,357,362,366,373,435,442,454],[119,120,121,122,126,127,131],"p",{},"Angular's builder does not expose a place to add a plugin, so quello runs as a ",[123,124,125],"strong",{},"separate process","\nnext to ",[128,129,130],"code",{},"ng serve"," and the page points at it.",[133,134,136],"h2",{"id":135},"install","Install",[138,139,145],"pre",{"className":140,"code":141,"filename":142,"language":143,"meta":144,"style":144},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D quello-cli concurrently\n","Terminal","bash","",[128,146,147],{"__ignoreMap":144},[148,149,152,156,160,163,166],"span",{"class":150,"line":151},"line",1,[148,153,155],{"class":154},"sBMFI","pnpm",[148,157,159],{"class":158},"sfazB"," add",[148,161,162],{"class":158}," -D",[148,164,165],{"class":158}," quello-cli",[148,167,168],{"class":158}," concurrently\n",[133,170,172],{"id":171},"configure","Configure",[138,174,179],{"className":175,"code":176,"filename":177,"language":178,"meta":144,"style":144},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"scripts\": {\n    \"dev\": \"concurrently -r \\\"quello .\\\" \\\"ng serve\\\"\"\n  }\n}\n","package.json","json",[128,180,181,187,206,244,250],{"__ignoreMap":144},[148,182,183],{"class":150,"line":151},[148,184,186],{"class":185},"sMK4o","{\n",[148,188,190,193,197,200,203],{"class":150,"line":189},2,[148,191,192],{"class":185},"  \"",[148,194,196],{"class":195},"spNyl","scripts",[148,198,199],{"class":185},"\"",[148,201,202],{"class":185},":",[148,204,205],{"class":185}," {\n",[148,207,209,212,215,217,219,222,225,229,232,234,237,239,241],{"class":150,"line":208},3,[148,210,211],{"class":185},"    \"",[148,213,214],{"class":154},"dev",[148,216,199],{"class":185},[148,218,202],{"class":185},[148,220,221],{"class":185}," \"",[148,223,224],{"class":158},"concurrently -r ",[148,226,228],{"class":227},"sTEyZ","\\\"",[148,230,231],{"class":158},"quello .",[148,233,228],{"class":227},[148,235,236],{"class":227}," \\\"",[148,238,130],{"class":158},[148,240,228],{"class":227},[148,242,243],{"class":185},"\"\n",[148,245,247],{"class":150,"line":246},4,[148,248,249],{"class":185},"  }\n",[148,251,253],{"class":150,"line":252},5,[148,254,255],{"class":185},"}\n",[138,257,262],{"className":258,"code":259,"filename":260,"language":261,"meta":144,"style":144},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbody>\n  \u003Capp-root>\u003C\u002Fapp-root>\n\n  \u003C!-- development only: remove this tag for a production build -->\n  \u003Cscript defer src=\"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fclient.js\"\n          data-quello-endpoint=\"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fpicks\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n","src\u002Findex.html","html",[128,263,264,276,291,297,303,326,347],{"__ignoreMap":144},[148,265,266,269,273],{"class":150,"line":151},[148,267,268],{"class":185},"\u003C",[148,270,272],{"class":271},"swJcz","body",[148,274,275],{"class":185},">\n",[148,277,278,281,284,287,289],{"class":150,"line":189},[148,279,280],{"class":185},"  \u003C",[148,282,283],{"class":271},"app-root",[148,285,286],{"class":185},">\u003C\u002F",[148,288,283],{"class":271},[148,290,275],{"class":185},[148,292,293],{"class":150,"line":208},[148,294,296],{"emptyLinePlaceholder":295},true,"\n",[148,298,299],{"class":150,"line":246},[148,300,302],{"class":301},"sHwdD","  \u003C!-- development only: remove this tag for a production build -->\n",[148,304,305,307,310,313,316,319,321,324],{"class":150,"line":252},[148,306,280],{"class":185},[148,308,309],{"class":271},"script",[148,311,312],{"class":195}," defer",[148,314,315],{"class":195}," src",[148,317,318],{"class":185},"=",[148,320,199],{"class":185},[148,322,323],{"class":158},"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fclient.js",[148,325,243],{"class":185},[148,327,329,332,334,336,339,341,343,345],{"class":150,"line":328},6,[148,330,331],{"class":195},"          data-quello-endpoint",[148,333,318],{"class":185},[148,335,199],{"class":185},[148,337,338],{"class":158},"http:\u002F\u002F127.0.0.1:5100\u002F__quello\u002Fpicks",[148,340,199],{"class":185},[148,342,286],{"class":185},[148,344,309],{"class":271},[148,346,275],{"class":185},[148,348,350,353,355],{"class":150,"line":349},7,[148,351,352],{"class":185},"\u003C\u002F",[148,354,272],{"class":271},[148,356,275],{"class":185},[119,358,359,361],{},[128,360,130],{}," stays on its usual port; quello listens on 5100 and answers cross-origin, which is why\nthe endpoint is spelled out in full.",[133,363,365],{"id":364},"what-a-pick-will-know","What a pick will know",[119,367,368,369,372],{},"The component name, read from Angular's Ivy debug API (",[128,370,371],{},"window.ng","), which is present in a\ndevelopment build:",[138,374,376],{"className":175,"code":375,"language":178,"meta":144,"style":144},"{ \"framework\": { \"framework\": \"angular\", \"component\": \"GalleryPageComponent\" } }\n",[128,377,378],{"__ignoreMap":144},[148,379,380,383,385,388,390,392,395,397,399,401,403,405,408,410,413,415,418,420,422,424,427,429,432],{"class":150,"line":151},[148,381,382],{"class":185},"{",[148,384,221],{"class":185},[148,386,387],{"class":195},"framework",[148,389,199],{"class":185},[148,391,202],{"class":185},[148,393,394],{"class":185}," {",[148,396,221],{"class":185},[148,398,387],{"class":154},[148,400,199],{"class":185},[148,402,202],{"class":185},[148,404,221],{"class":185},[148,406,407],{"class":158},"angular",[148,409,199],{"class":185},[148,411,412],{"class":185},",",[148,414,221],{"class":185},[148,416,417],{"class":154},"component",[148,419,199],{"class":185},[148,421,202],{"class":185},[148,423,221],{"class":185},[148,425,426],{"class":158},"GalleryPageComponent",[148,428,199],{"class":185},[148,430,431],{"class":185}," }",[148,433,434],{"class":185}," }\n",[119,436,437,438,441],{},"It resolves per element rather than per route — a nav in your layout reports ",[128,439,440],{},"AppComponent"," even\nwhile a page component is open. Angular exposes no source location, but the class name finds the\nfile in one step.",[443,444,445,446,449,450,453],"caution",{},"The script tag lives in ",[128,447,448],{},"index.html",", which is also used for production builds. Remove it before\nshipping, or inject it only in your development configuration via ",[128,451,452],{},"fileReplacements",".",[455,456,457],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":144,"searchDepth":189,"depth":189,"links":459},[460,461,462],{"id":135,"depth":189,"text":136},{"id":171,"depth":189,"text":172},{"id":364,"depth":189,"text":365},"Angular's dev server is not configurable, so quello runs beside it.","md",null,{},{"icon":71},{"title":68,"description":463},"O9fPF3qGruhwg3LVq302I16crNVMIH-F0DzRGHZCZhQ",[471,473],{"title":63,"path":64,"stem":65,"description":472,"icon":66,"children":-1},"The webpack plugin, for projects on webpack-dev-server.",{"title":73,"path":74,"stem":75,"description":474,"icon":76,"children":-1},"No framework, no bundler — quello runs the whole thing.",1788454296706]