[{"data":1,"prerenderedAt":648},["ShallowReactive",2],{"navigation":3,"-guide-quick-start":61,"-guide-quick-start-surround":645},[4,19,37,55],{"title":5,"path":6,"stem":7,"children":8,"icon":10},"Compdi","\u002Fguide","1.guide\u002F1.index",[9,11,15],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-book-open",{"title":12,"path":13,"stem":14,"icon":10},"Quick start","\u002Fguide\u002Fquick-start","1.guide\u002F2.quick-start",{"title":16,"path":17,"stem":18,"icon":10},"Imports and packages","\u002Fguide\u002Fimports","1.guide\u002F3.imports",{"title":20,"path":21,"stem":22,"children":23},"Lifecycles","\u002Fconcepts","2.concepts\u002F1.index",[24,25,29,33],{"title":20,"path":21,"stem":22},{"title":26,"path":27,"stem":28},"Targets, factories, and inference","\u002Fconcepts\u002Ffactories-and-inference","2.concepts\u002F2.factories-and-inference",{"title":30,"path":31,"stem":32},"Scoped dependencies","\u002Fconcepts\u002Fscopes","2.concepts\u002F3.scopes",{"title":34,"path":35,"stem":36},"Application teardown","\u002Fconcepts\u002Fteardown","2.concepts\u002F4.teardown",{"title":38,"path":39,"stem":40,"children":41},"Build-tool integrations","\u002Fintegrations","3.integrations\u002F1.index",[42,43,47,51],{"title":38,"path":39,"stem":40},{"title":44,"path":45,"stem":46},"Vite","\u002Fintegrations\u002Fvite","3.integrations\u002F2.vite",{"title":48,"path":49,"stem":50},"Rollup and Rolldown","\u002Fintegrations\u002Frollup-and-rolldown","3.integrations\u002F3.rollup-and-rolldown",{"title":52,"path":53,"stem":54},"Rspack and esbuild","\u002Fintegrations\u002Frspack-and-esbuild","3.integrations\u002F4.rspack-and-esbuild",{"title":56,"path":57,"stem":58,"children":59},"API","\u002Fapi","4.api\u002F1.index",[60],{"title":56,"path":57,"stem":58},{"id":62,"title":12,"body":63,"description":85,"extension":640,"meta":641,"navigation":642,"path":13,"seo":643,"stem":14,"__hash__":644},"content\u002F1.guide\u002F2.quick-start.md",{"type":64,"value":65,"toc":634,"icon":10},"minimark",[66,70,75,78,168,172,534,538,590,593,603,607,630],[67,68,69],"p",{},"This walkthrough creates one shared dependency, one transient service, and one lazy singleton accessor.",[71,72,74],"h2",{"id":73},"_1-register-the-build-plugin","1. Register the build plugin",[67,76,77],{},"For Vite, add the Compdi plugin before writing any macros:",[79,80,86],"pre",{"className":81,"code":82,"filename":83,"language":84,"meta":85,"style":85},"language-ts shiki shiki-themes github-light github-dark github-dark","import { defineConfig } from \"vite\";\nimport compdi from \"compdi\u002Fplugin\u002Fvite\";\n\nexport default defineConfig({\n  plugins: [compdi()],\n});\n","vite.config.ts","ts","",[87,88,89,112,127,134,150,162],"code",{"__ignoreMap":85},[90,91,94,98,102,105,109],"span",{"class":92,"line":93},"line",1,[90,95,97],{"class":96},"so5gQ","import",[90,99,101],{"class":100},"slsVL"," { defineConfig } ",[90,103,104],{"class":96},"from",[90,106,108],{"class":107},"sfrk1"," \"vite\"",[90,110,111],{"class":100},";\n",[90,113,115,117,120,122,125],{"class":92,"line":114},2,[90,116,97],{"class":96},[90,118,119],{"class":100}," compdi ",[90,121,104],{"class":96},[90,123,124],{"class":107}," \"compdi\u002Fplugin\u002Fvite\"",[90,126,111],{"class":100},[90,128,130],{"class":92,"line":129},3,[90,131,133],{"emptyLinePlaceholder":132},true,"\n",[90,135,137,140,143,147],{"class":92,"line":136},4,[90,138,139],{"class":96},"export",[90,141,142],{"class":96}," default",[90,144,146],{"class":145},"shcOC"," defineConfig",[90,148,149],{"class":100},"({\n",[90,151,153,156,159],{"class":92,"line":152},5,[90,154,155],{"class":100},"  plugins: [",[90,157,158],{"class":145},"compdi",[90,160,161],{"class":100},"()],\n",[90,163,165],{"class":92,"line":164},6,[90,166,167],{"class":100},"});\n",[71,169,171],{"id":170},"_2-define-dependencies","2. Define dependencies",[79,173,176],{"className":81,"code":174,"filename":175,"language":84,"meta":85,"style":85},"import {\n  createSingleton,\n  createTransient,\n  defineSingleton,\n} from \"compdi\u002Fmacros\";\n\nclass Database {\n  query(sql: string) {\n    return `Result for: ${sql}`;\n  }\n}\n\nclass UserService {\n  constructor(private readonly database: Database) {}\n\n  findAll() {\n    return this.database.query(\"SELECT * FROM users\");\n  }\n}\n\nclass Analytics {\n  constructor(private readonly database: Database) {}\n}\n\n\u002F\u002F Constructed once during module evaluation.\nexport const database = createSingleton({ target: Database });\n\n\u002F\u002F A new service is constructed on every call.\nexport const createUserService = createTransient({\n  target: UserService,\n  deps: [database],\n});\n\n\u002F\u002F Constructed on the first accessor call, then shared.\nexport const useAnalytics = defineSingleton({\n  target: Analytics,\n  deps: [database],\n  lazy: true,\n});\n","src\u002Fdependencies.ts",[87,177,178,185,190,195,200,212,216,227,250,266,272,278,283,293,317,322,331,353,358,363,368,378,397,402,407,414,433,438,444,461,467,473,478,483,489,506,512,517,529],{"__ignoreMap":85},[90,179,180,182],{"class":92,"line":93},[90,181,97],{"class":96},[90,183,184],{"class":100}," {\n",[90,186,187],{"class":92,"line":114},[90,188,189],{"class":100},"  createSingleton,\n",[90,191,192],{"class":92,"line":129},[90,193,194],{"class":100},"  createTransient,\n",[90,196,197],{"class":92,"line":136},[90,198,199],{"class":100},"  defineSingleton,\n",[90,201,202,205,207,210],{"class":92,"line":152},[90,203,204],{"class":100},"} ",[90,206,104],{"class":96},[90,208,209],{"class":107}," \"compdi\u002Fmacros\"",[90,211,111],{"class":100},[90,213,214],{"class":92,"line":164},[90,215,133],{"emptyLinePlaceholder":132},[90,217,219,222,225],{"class":92,"line":218},7,[90,220,221],{"class":96},"class",[90,223,224],{"class":145}," Database",[90,226,184],{"class":100},[90,228,230,233,236,240,243,247],{"class":92,"line":229},8,[90,231,232],{"class":145},"  query",[90,234,235],{"class":100},"(",[90,237,239],{"class":238},"sQHwn","sql",[90,241,242],{"class":96},":",[90,244,246],{"class":245},"suiK_"," string",[90,248,249],{"class":100},") {\n",[90,251,253,256,259,261,264],{"class":92,"line":252},9,[90,254,255],{"class":96},"    return",[90,257,258],{"class":107}," `Result for: ${",[90,260,239],{"class":100},[90,262,263],{"class":107},"}`",[90,265,111],{"class":100},[90,267,269],{"class":92,"line":268},10,[90,270,271],{"class":100},"  }\n",[90,273,275],{"class":92,"line":274},11,[90,276,277],{"class":100},"}\n",[90,279,281],{"class":92,"line":280},12,[90,282,133],{"emptyLinePlaceholder":132},[90,284,286,288,291],{"class":92,"line":285},13,[90,287,221],{"class":96},[90,289,290],{"class":145}," UserService",[90,292,184],{"class":100},[90,294,296,299,301,304,307,310,312,314],{"class":92,"line":295},14,[90,297,298],{"class":96},"  constructor",[90,300,235],{"class":100},[90,302,303],{"class":96},"private",[90,305,306],{"class":96}," readonly",[90,308,309],{"class":238}," database",[90,311,242],{"class":96},[90,313,224],{"class":145},[90,315,316],{"class":100},") {}\n",[90,318,320],{"class":92,"line":319},15,[90,321,133],{"emptyLinePlaceholder":132},[90,323,325,328],{"class":92,"line":324},16,[90,326,327],{"class":145},"  findAll",[90,329,330],{"class":100},"() {\n",[90,332,334,336,339,342,345,347,350],{"class":92,"line":333},17,[90,335,255],{"class":96},[90,337,338],{"class":245}," this",[90,340,341],{"class":100},".database.",[90,343,344],{"class":145},"query",[90,346,235],{"class":100},[90,348,349],{"class":107},"\"SELECT * FROM users\"",[90,351,352],{"class":100},");\n",[90,354,356],{"class":92,"line":355},18,[90,357,271],{"class":100},[90,359,361],{"class":92,"line":360},19,[90,362,277],{"class":100},[90,364,366],{"class":92,"line":365},20,[90,367,133],{"emptyLinePlaceholder":132},[90,369,371,373,376],{"class":92,"line":370},21,[90,372,221],{"class":96},[90,374,375],{"class":145}," Analytics",[90,377,184],{"class":100},[90,379,381,383,385,387,389,391,393,395],{"class":92,"line":380},22,[90,382,298],{"class":96},[90,384,235],{"class":100},[90,386,303],{"class":96},[90,388,306],{"class":96},[90,390,309],{"class":238},[90,392,242],{"class":96},[90,394,224],{"class":145},[90,396,316],{"class":100},[90,398,400],{"class":92,"line":399},23,[90,401,277],{"class":100},[90,403,405],{"class":92,"line":404},24,[90,406,133],{"emptyLinePlaceholder":132},[90,408,410],{"class":92,"line":409},25,[90,411,413],{"class":412},"sCsY4","\u002F\u002F Constructed once during module evaluation.\n",[90,415,417,419,422,424,427,430],{"class":92,"line":416},26,[90,418,139],{"class":96},[90,420,421],{"class":96}," const",[90,423,309],{"class":245},[90,425,426],{"class":96}," =",[90,428,429],{"class":145}," createSingleton",[90,431,432],{"class":100},"({ target: Database });\n",[90,434,436],{"class":92,"line":435},27,[90,437,133],{"emptyLinePlaceholder":132},[90,439,441],{"class":92,"line":440},28,[90,442,443],{"class":412},"\u002F\u002F A new service is constructed on every call.\n",[90,445,447,449,451,454,456,459],{"class":92,"line":446},29,[90,448,139],{"class":96},[90,450,421],{"class":96},[90,452,453],{"class":245}," createUserService",[90,455,426],{"class":96},[90,457,458],{"class":145}," createTransient",[90,460,149],{"class":100},[90,462,464],{"class":92,"line":463},30,[90,465,466],{"class":100},"  target: UserService,\n",[90,468,470],{"class":92,"line":469},31,[90,471,472],{"class":100},"  deps: [database],\n",[90,474,476],{"class":92,"line":475},32,[90,477,167],{"class":100},[90,479,481],{"class":92,"line":480},33,[90,482,133],{"emptyLinePlaceholder":132},[90,484,486],{"class":92,"line":485},34,[90,487,488],{"class":412},"\u002F\u002F Constructed on the first accessor call, then shared.\n",[90,490,492,494,496,499,501,504],{"class":92,"line":491},35,[90,493,139],{"class":96},[90,495,421],{"class":96},[90,497,498],{"class":245}," useAnalytics",[90,500,426],{"class":96},[90,502,503],{"class":145}," defineSingleton",[90,505,149],{"class":100},[90,507,509],{"class":92,"line":508},36,[90,510,511],{"class":100},"  target: Analytics,\n",[90,513,515],{"class":92,"line":514},37,[90,516,472],{"class":100},[90,518,520,523,526],{"class":92,"line":519},38,[90,521,522],{"class":100},"  lazy: ",[90,524,525],{"class":245},"true",[90,527,528],{"class":100},",\n",[90,530,532],{"class":92,"line":531},39,[90,533,167],{"class":100},[71,535,537],{"id":536},"_3-use-the-graph","3. Use the graph",[79,539,542],{"className":81,"code":540,"filename":541,"language":84,"meta":85,"style":85},"import { createUserService, useAnalytics } from \".\u002Fdependencies\";\n\nconst users = createUserService();\nconst analytics = useAnalytics();\n","src\u002Fmain.ts",[87,543,544,558,562,577],{"__ignoreMap":85},[90,545,546,548,551,553,556],{"class":92,"line":93},[90,547,97],{"class":96},[90,549,550],{"class":100}," { createUserService, useAnalytics } ",[90,552,104],{"class":96},[90,554,555],{"class":107}," \".\u002Fdependencies\"",[90,557,111],{"class":100},[90,559,560],{"class":92,"line":114},[90,561,133],{"emptyLinePlaceholder":132},[90,563,564,567,570,572,574],{"class":92,"line":129},[90,565,566],{"class":96},"const",[90,568,569],{"class":245}," users",[90,571,426],{"class":96},[90,573,453],{"class":145},[90,575,576],{"class":100},"();\n",[90,578,579,581,584,586,588],{"class":92,"line":136},[90,580,566],{"class":96},[90,582,583],{"class":245}," analytics",[90,585,426],{"class":96},[90,587,498],{"class":145},[90,589,576],{"class":100},[67,591,592],{},"There is no container to initialize or query. The plugin replaces these macros with the corresponding constructors, factories, cached values, and accessors.",[594,595,596],"warning",{},[67,597,598,599,602],{},"If a Compdi macro reaches runtime, it throws. This normally means the build plugin is missing or its ",[87,600,601],{},"include"," option excludes the source file.",[71,604,606],{"id":605},"next-steps","Next steps",[608,609,610,618,624],"ul",{},[611,612,613,617],"li",{},[614,615,616],"a",{"href":21},"Compare lifecycles"," before choosing macros for a larger graph.",[611,619,620,623],{},[614,621,622],{"href":27},"Use targets and factories"," for synchronous or asynchronous construction.",[611,625,626,629],{},[614,627,628],{"href":39},"Configure another build tool"," if your project does not use Vite.",[631,632,633],"style",{},"html pre.shiki code .so5gQ, html code.shiki .so5gQ{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .slsVL, html code.shiki .slsVL{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sfrk1, html code.shiki .sfrk1{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .shcOC, html code.shiki .shcOC{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#B392F0}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 .sQHwn, html code.shiki .sQHwn{--shiki-light:#E36209;--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .suiK_, html code.shiki .suiK_{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":85,"searchDepth":114,"depth":114,"links":635},[636,637,638,639],{"id":73,"depth":114,"text":74},{"id":170,"depth":114,"text":171},{"id":536,"depth":114,"text":537},{"id":605,"depth":114,"text":606},"md",{"icon":10},{"icon":10},{"title":12,"description":85},"xmkiWcoDcxW3pVI_5vNfA46GcH2Q5aZ5jXEdFvT2bkA",[646,647],{"title":5,"path":6,"stem":7,"description":85,"icon":10,"children":-1},{"title":16,"path":17,"stem":18,"description":85,"icon":10,"children":-1},1785705021605]