1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844684568466847684868496850685168526853685468556856685768586859686068616862686368646865686668676868686968706871687268736874687568766877687868796880688168826883688468856886688768886889689068916892689368946895689668976898689969006901690269036904690569066907690869096910691169126913691469156916691769186919692069216922692369246925692669276928692969306931693269336934693569366937693869396940694169426943694469456946694769486949695069516952695369546955695669576958695969606961696269636964696569666967696869696970697169726973697469756976697769786979698069816982698369846985698669876988698969906991699269936994699569966997699869997000700170027003700470057006700770087009701070117012701370147015701670177018701970207021702270237024702570267027702870297030703170327033703470357036703770387039704070417042704370447045704670477048704970507051705270537054705570567057705870597060706170627063706470657066706770687069707070717072707370747075707670777078707970807081708270837084708570867087708870897090709170927093709470957096709770987099710071017102710371047105710671077108710971107111711271137114711571167117711871197120712171227123712471257126712771287129713071317132713371347135713671377138713971407141714271437144714571467147714871497150715171527153715471557156715771587159716071617162716371647165716671677168716971707171717271737174717571767177717871797180718171827183718471857186718771887189719071917192719371947195719671977198719972007201720272037204720572067207720872097210721172127213721472157216721772187219722072217222722372247225722672277228722972307231723272337234723572367237723872397240724172427243724472457246724772487249725072517252725372547255725672577258725972607261726272637264726572667267726872697270727172727273727472757276727772787279728072817282728372847285728672877288728972907291729272937294729572967297729872997300730173027303730473057306730773087309731073117312731373147315731673177318731973207321732273237324732573267327732873297330733173327333733473357336733773387339734073417342734373447345734673477348734973507351735273537354735573567357735873597360736173627363736473657366736773687369737073717372737373747375737673777378737973807381738273837384738573867387738873897390739173927393739473957396739773987399740074017402740374047405740674077408740974107411741274137414741574167417741874197420742174227423742474257426742774287429743074317432743374347435743674377438743974407441744274437444744574467447744874497450745174527453745474557456745774587459746074617462746374647465746674677468746974707471747274737474747574767477747874797480748174827483748474857486748774887489749074917492749374947495749674977498749975007501750275037504750575067507750875097510751175127513751475157516751775187519752075217522752375247525752675277528752975307531753275337534753575367537753875397540754175427543754475457546754775487549755075517552755375547555755675577558755975607561756275637564756575667567756875697570757175727573757475757576757775787579758075817582758375847585758675877588758975907591759275937594759575967597759875997600760176027603760476057606760776087609761076117612761376147615761676177618761976207621762276237624762576267627762876297630763176327633763476357636763776387639764076417642764376447645764676477648764976507651765276537654765576567657765876597660766176627663766476657666766776687669767076717672767376747675767676777678767976807681768276837684768576867687768876897690769176927693769476957696769776987699770077017702770377047705770677077708770977107711771277137714771577167717771877197720772177227723772477257726772777287729773077317732773377347735773677377738773977407741774277437744774577467747774877497750775177527753775477557756775777587759776077617762776377647765776677677768776977707771777277737774777577767777777877797780778177827783778477857786778777887789779077917792779377947795779677977798779978007801780278037804780578067807780878097810781178127813781478157816781778187819782078217822782378247825782678277828782978307831783278337834783578367837783878397840784178427843784478457846784778487849785078517852785378547855785678577858785978607861786278637864786578667867786878697870787178727873787478757876787778787879788078817882788378847885788678877888788978907891789278937894789578967897789878997900790179027903790479057906790779087909791079117912791379147915791679177918791979207921792279237924792579267927792879297930793179327933793479357936793779387939794079417942794379447945794679477948794979507951795279537954795579567957795879597960796179627963796479657966796779687969797079717972797379747975 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var reactivity = require('@vue/reactivity');
- var shared = require('@vue/shared');
- const stack = [];
- function pushWarningContext(vnode) {
- stack.push(vnode);
- }
- function popWarningContext() {
- stack.pop();
- }
- function warn(msg, ...args) {
- // avoid props formatting or warn handler tracking deps that might be mutated
- // during patch, leading to infinite recursion.
- reactivity.pauseTracking();
- const instance = stack.length ? stack[stack.length - 1].component : null;
- const appWarnHandler = instance && instance.appContext.config.warnHandler;
- const trace = getComponentTrace();
- if (appWarnHandler) {
- callWithErrorHandling(appWarnHandler, instance, 11 /* ErrorCodes.APP_WARN_HANDLER */, [
- msg + args.join(''),
- instance && instance.proxy,
- trace
- .map(({ vnode }) => `at <${formatComponentName(instance, vnode.type)}>`)
- .join('\n'),
- trace
- ]);
- }
- else {
- const warnArgs = [`[Vue warn]: ${msg}`, ...args];
- /* istanbul ignore if */
- if (trace.length &&
- // avoid spamming console during tests
- !false) {
- warnArgs.push(`\n`, ...formatTrace(trace));
- }
- console.warn(...warnArgs);
- }
- reactivity.resetTracking();
- }
- function getComponentTrace() {
- let currentVNode = stack[stack.length - 1];
- if (!currentVNode) {
- return [];
- }
- // we can't just use the stack because it will be incomplete during updates
- // that did not start from the root. Re-construct the parent chain using
- // instance parent pointers.
- const normalizedStack = [];
- while (currentVNode) {
- const last = normalizedStack[0];
- if (last && last.vnode === currentVNode) {
- last.recurseCount++;
- }
- else {
- normalizedStack.push({
- vnode: currentVNode,
- recurseCount: 0
- });
- }
- const parentInstance = currentVNode.component && currentVNode.component.parent;
- currentVNode = parentInstance && parentInstance.vnode;
- }
- return normalizedStack;
- }
- /* istanbul ignore next */
- function formatTrace(trace) {
- const logs = [];
- trace.forEach((entry, i) => {
- logs.push(...(i === 0 ? [] : [`\n`]), ...formatTraceEntry(entry));
- });
- return logs;
- }
- function formatTraceEntry({ vnode, recurseCount }) {
- const postfix = recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``;
- const isRoot = vnode.component ? vnode.component.parent == null : false;
- const open = ` at <${formatComponentName(vnode.component, vnode.type, isRoot)}`;
- const close = `>` + postfix;
- return vnode.props
- ? [open, ...formatProps(vnode.props), close]
- : [open + close];
- }
- /* istanbul ignore next */
- function formatProps(props) {
- const res = [];
- const keys = Object.keys(props);
- keys.slice(0, 3).forEach(key => {
- res.push(...formatProp(key, props[key]));
- });
- if (keys.length > 3) {
- res.push(` ...`);
- }
- return res;
- }
- /* istanbul ignore next */
- function formatProp(key, value, raw) {
- if (shared.isString(value)) {
- value = JSON.stringify(value);
- return raw ? value : [`${key}=${value}`];
- }
- else if (typeof value === 'number' ||
- typeof value === 'boolean' ||
- value == null) {
- return raw ? value : [`${key}=${value}`];
- }
- else if (reactivity.isRef(value)) {
- value = formatProp(key, reactivity.toRaw(value.value), true);
- return raw ? value : [`${key}=Ref<`, value, `>`];
- }
- else if (shared.isFunction(value)) {
- return [`${key}=fn${value.name ? `<${value.name}>` : ``}`];
- }
- else {
- value = reactivity.toRaw(value);
- return raw ? value : [`${key}=`, value];
- }
- }
- const ErrorTypeStrings = {
- ["sp" /* LifecycleHooks.SERVER_PREFETCH */]: 'serverPrefetch hook',
- ["bc" /* LifecycleHooks.BEFORE_CREATE */]: 'beforeCreate hook',
- ["c" /* LifecycleHooks.CREATED */]: 'created hook',
- ["bm" /* LifecycleHooks.BEFORE_MOUNT */]: 'beforeMount hook',
- ["m" /* LifecycleHooks.MOUNTED */]: 'mounted hook',
- ["bu" /* LifecycleHooks.BEFORE_UPDATE */]: 'beforeUpdate hook',
- ["u" /* LifecycleHooks.UPDATED */]: 'updated',
- ["bum" /* LifecycleHooks.BEFORE_UNMOUNT */]: 'beforeUnmount hook',
- ["um" /* LifecycleHooks.UNMOUNTED */]: 'unmounted hook',
- ["a" /* LifecycleHooks.ACTIVATED */]: 'activated hook',
- ["da" /* LifecycleHooks.DEACTIVATED */]: 'deactivated hook',
- ["ec" /* LifecycleHooks.ERROR_CAPTURED */]: 'errorCaptured hook',
- ["rtc" /* LifecycleHooks.RENDER_TRACKED */]: 'renderTracked hook',
- ["rtg" /* LifecycleHooks.RENDER_TRIGGERED */]: 'renderTriggered hook',
- [0 /* ErrorCodes.SETUP_FUNCTION */]: 'setup function',
- [1 /* ErrorCodes.RENDER_FUNCTION */]: 'render function',
- [2 /* ErrorCodes.WATCH_GETTER */]: 'watcher getter',
- [3 /* ErrorCodes.WATCH_CALLBACK */]: 'watcher callback',
- [4 /* ErrorCodes.WATCH_CLEANUP */]: 'watcher cleanup function',
- [5 /* ErrorCodes.NATIVE_EVENT_HANDLER */]: 'native event handler',
- [6 /* ErrorCodes.COMPONENT_EVENT_HANDLER */]: 'component event handler',
- [7 /* ErrorCodes.VNODE_HOOK */]: 'vnode hook',
- [8 /* ErrorCodes.DIRECTIVE_HOOK */]: 'directive hook',
- [9 /* ErrorCodes.TRANSITION_HOOK */]: 'transition hook',
- [10 /* ErrorCodes.APP_ERROR_HANDLER */]: 'app errorHandler',
- [11 /* ErrorCodes.APP_WARN_HANDLER */]: 'app warnHandler',
- [12 /* ErrorCodes.FUNCTION_REF */]: 'ref function',
- [13 /* ErrorCodes.ASYNC_COMPONENT_LOADER */]: 'async component loader',
- [14 /* ErrorCodes.SCHEDULER */]: 'scheduler flush. This is likely a Vue internals bug. ' +
- 'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core'
- };
- function callWithErrorHandling(fn, instance, type, args) {
- let res;
- try {
- res = args ? fn(...args) : fn();
- }
- catch (err) {
- handleError(err, instance, type);
- }
- return res;
- }
- function callWithAsyncErrorHandling(fn, instance, type, args) {
- if (shared.isFunction(fn)) {
- const res = callWithErrorHandling(fn, instance, type, args);
- if (res && shared.isPromise(res)) {
- res.catch(err => {
- handleError(err, instance, type);
- });
- }
- return res;
- }
- const values = [];
- for (let i = 0; i < fn.length; i++) {
- values.push(callWithAsyncErrorHandling(fn[i], instance, type, args));
- }
- return values;
- }
- function handleError(err, instance, type, throwInDev = true) {
- const contextVNode = instance ? instance.vnode : null;
- if (instance) {
- let cur = instance.parent;
- // the exposed instance is the render proxy to keep it consistent with 2.x
- const exposedInstance = instance.proxy;
- // in production the hook receives only the error code
- const errorInfo = ErrorTypeStrings[type] ;
- while (cur) {
- const errorCapturedHooks = cur.ec;
- if (errorCapturedHooks) {
- for (let i = 0; i < errorCapturedHooks.length; i++) {
- if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) {
- return;
- }
- }
- }
- cur = cur.parent;
- }
- // app-level handling
- const appErrorHandler = instance.appContext.config.errorHandler;
- if (appErrorHandler) {
- callWithErrorHandling(appErrorHandler, null, 10 /* ErrorCodes.APP_ERROR_HANDLER */, [err, exposedInstance, errorInfo]);
- return;
- }
- }
- logError(err, type, contextVNode, throwInDev);
- }
- function logError(err, type, contextVNode, throwInDev = true) {
- {
- const info = ErrorTypeStrings[type];
- if (contextVNode) {
- pushWarningContext(contextVNode);
- }
- warn(`Unhandled error${info ? ` during execution of ${info}` : ``}`);
- if (contextVNode) {
- popWarningContext();
- }
- // crash in dev by default so it's more noticeable
- if (throwInDev) {
- throw err;
- }
- else {
- console.error(err);
- }
- }
- }
- let isFlushing = false;
- let isFlushPending = false;
- const queue = [];
- let flushIndex = 0;
- const pendingPostFlushCbs = [];
- let activePostFlushCbs = null;
- let postFlushIndex = 0;
- const resolvedPromise = /*#__PURE__*/ Promise.resolve();
- let currentFlushPromise = null;
- const RECURSION_LIMIT = 100;
- function nextTick(fn) {
- const p = currentFlushPromise || resolvedPromise;
- return fn ? p.then(this ? fn.bind(this) : fn) : p;
- }
- // #2768
- // Use binary-search to find a suitable position in the queue,
- // so that the queue maintains the increasing order of job's id,
- // which can prevent the job from being skipped and also can avoid repeated patching.
- function findInsertionIndex(id) {
- // the start index should be `flushIndex + 1`
- let start = flushIndex + 1;
- let end = queue.length;
- while (start < end) {
- const middle = (start + end) >>> 1;
- const middleJobId = getId(queue[middle]);
- middleJobId < id ? (start = middle + 1) : (end = middle);
- }
- return start;
- }
- function queueJob(job) {
- // the dedupe search uses the startIndex argument of Array.includes()
- // by default the search index includes the current job that is being run
- // so it cannot recursively trigger itself again.
- // if the job is a watch() callback, the search will start with a +1 index to
- // allow it recursively trigger itself - it is the user's responsibility to
- // ensure it doesn't end up in an infinite loop.
- if (!queue.length ||
- !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) {
- if (job.id == null) {
- queue.push(job);
- }
- else {
- queue.splice(findInsertionIndex(job.id), 0, job);
- }
- queueFlush();
- }
- }
- function queueFlush() {
- if (!isFlushing && !isFlushPending) {
- isFlushPending = true;
- currentFlushPromise = resolvedPromise.then(flushJobs);
- }
- }
- function invalidateJob(job) {
- const i = queue.indexOf(job);
- if (i > flushIndex) {
- queue.splice(i, 1);
- }
- }
- function queuePostFlushCb(cb) {
- if (!shared.isArray(cb)) {
- if (!activePostFlushCbs ||
- !activePostFlushCbs.includes(cb, cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex)) {
- pendingPostFlushCbs.push(cb);
- }
- }
- else {
- // if cb is an array, it is a component lifecycle hook which can only be
- // triggered by a job, which is already deduped in the main queue, so
- // we can skip duplicate check here to improve perf
- pendingPostFlushCbs.push(...cb);
- }
- queueFlush();
- }
- function flushPreFlushCbs(seen,
- // if currently flushing, skip the current job itself
- i = isFlushing ? flushIndex + 1 : 0) {
- {
- seen = seen || new Map();
- }
- for (; i < queue.length; i++) {
- const cb = queue[i];
- if (cb && cb.pre) {
- if (checkRecursiveUpdates(seen, cb)) {
- continue;
- }
- queue.splice(i, 1);
- i--;
- cb();
- }
- }
- }
- function flushPostFlushCbs(seen) {
- if (pendingPostFlushCbs.length) {
- const deduped = [...new Set(pendingPostFlushCbs)];
- pendingPostFlushCbs.length = 0;
- // #1947 already has active queue, nested flushPostFlushCbs call
- if (activePostFlushCbs) {
- activePostFlushCbs.push(...deduped);
- return;
- }
- activePostFlushCbs = deduped;
- {
- seen = seen || new Map();
- }
- activePostFlushCbs.sort((a, b) => getId(a) - getId(b));
- for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) {
- if (checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex])) {
- continue;
- }
- activePostFlushCbs[postFlushIndex]();
- }
- activePostFlushCbs = null;
- postFlushIndex = 0;
- }
- }
- const getId = (job) => job.id == null ? Infinity : job.id;
- const comparator = (a, b) => {
- const diff = getId(a) - getId(b);
- if (diff === 0) {
- if (a.pre && !b.pre)
- return -1;
- if (b.pre && !a.pre)
- return 1;
- }
- return diff;
- };
- function flushJobs(seen) {
- isFlushPending = false;
- isFlushing = true;
- {
- seen = seen || new Map();
- }
- // Sort queue before flush.
- // This ensures that:
- // 1. Components are updated from parent to child. (because parent is always
- // created before the child so its render effect will have smaller
- // priority number)
- // 2. If a component is unmounted during a parent component's update,
- // its update can be skipped.
- queue.sort(comparator);
- // conditional usage of checkRecursiveUpdate must be determined out of
- // try ... catch block since Rollup by default de-optimizes treeshaking
- // inside try-catch. This can leave all warning code unshaked. Although
- // they would get eventually shaken by a minifier like terser, some minifiers
- // would fail to do that (e.g. https://github.com/evanw/esbuild/issues/1610)
- const check = (job) => checkRecursiveUpdates(seen, job)
- ;
- try {
- for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
- const job = queue[flushIndex];
- if (job && job.active !== false) {
- if (true && check(job)) {
- continue;
- }
- // console.log(`running:`, job.id)
- callWithErrorHandling(job, null, 14 /* ErrorCodes.SCHEDULER */);
- }
- }
- }
- finally {
- flushIndex = 0;
- queue.length = 0;
- flushPostFlushCbs(seen);
- isFlushing = false;
- currentFlushPromise = null;
- // some postFlushCb queued jobs!
- // keep flushing until it drains.
- if (queue.length || pendingPostFlushCbs.length) {
- flushJobs(seen);
- }
- }
- }
- function checkRecursiveUpdates(seen, fn) {
- if (!seen.has(fn)) {
- seen.set(fn, 1);
- }
- else {
- const count = seen.get(fn);
- if (count > RECURSION_LIMIT) {
- const instance = fn.ownerInstance;
- const componentName = instance && getComponentName(instance.type);
- warn(`Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. ` +
- `This means you have a reactive effect that is mutating its own ` +
- `dependencies and thus recursively triggering itself. Possible sources ` +
- `include component template, render function, updated hook or ` +
- `watcher source function.`);
- return true;
- }
- else {
- seen.set(fn, count + 1);
- }
- }
- }
- /* eslint-disable no-restricted-globals */
- let isHmrUpdating = false;
- const hmrDirtyComponents = new Set();
- // Expose the HMR runtime on the global object
- // This makes it entirely tree-shakable without polluting the exports and makes
- // it easier to be used in toolings like vue-loader
- // Note: for a component to be eligible for HMR it also needs the __hmrId option
- // to be set so that its instances can be registered / removed.
- {
- shared.getGlobalThis().__VUE_HMR_RUNTIME__ = {
- createRecord: tryWrap(createRecord),
- rerender: tryWrap(rerender),
- reload: tryWrap(reload)
- };
- }
- const map = new Map();
- function registerHMR(instance) {
- const id = instance.type.__hmrId;
- let record = map.get(id);
- if (!record) {
- createRecord(id, instance.type);
- record = map.get(id);
- }
- record.instances.add(instance);
- }
- function unregisterHMR(instance) {
- map.get(instance.type.__hmrId).instances.delete(instance);
- }
- function createRecord(id, initialDef) {
- if (map.has(id)) {
- return false;
- }
- map.set(id, {
- initialDef: normalizeClassComponent(initialDef),
- instances: new Set()
- });
- return true;
- }
- function normalizeClassComponent(component) {
- return isClassComponent(component) ? component.__vccOpts : component;
- }
- function rerender(id, newRender) {
- const record = map.get(id);
- if (!record) {
- return;
- }
- // update initial record (for not-yet-rendered component)
- record.initialDef.render = newRender;
- [...record.instances].forEach(instance => {
- if (newRender) {
- instance.render = newRender;
- normalizeClassComponent(instance.type).render = newRender;
- }
- instance.renderCache = [];
- // this flag forces child components with slot content to update
- isHmrUpdating = true;
- instance.update();
- isHmrUpdating = false;
- });
- }
- function reload(id, newComp) {
- const record = map.get(id);
- if (!record)
- return;
- newComp = normalizeClassComponent(newComp);
- // update initial def (for not-yet-rendered components)
- updateComponentDef(record.initialDef, newComp);
- // create a snapshot which avoids the set being mutated during updates
- const instances = [...record.instances];
- for (const instance of instances) {
- const oldComp = normalizeClassComponent(instance.type);
- if (!hmrDirtyComponents.has(oldComp)) {
- // 1. Update existing comp definition to match new one
- if (oldComp !== record.initialDef) {
- updateComponentDef(oldComp, newComp);
- }
- // 2. mark definition dirty. This forces the renderer to replace the
- // component on patch.
- hmrDirtyComponents.add(oldComp);
- }
- // 3. invalidate options resolution cache
- instance.appContext.optionsCache.delete(instance.type);
- // 4. actually update
- if (instance.ceReload) {
- // custom element
- hmrDirtyComponents.add(oldComp);
- instance.ceReload(newComp.styles);
- hmrDirtyComponents.delete(oldComp);
- }
- else if (instance.parent) {
- // 4. Force the parent instance to re-render. This will cause all updated
- // components to be unmounted and re-mounted. Queue the update so that we
- // don't end up forcing the same parent to re-render multiple times.
- queueJob(instance.parent.update);
- }
- else if (instance.appContext.reload) {
- // root instance mounted via createApp() has a reload method
- instance.appContext.reload();
- }
- else if (typeof window !== 'undefined') {
- // root instance inside tree created via raw render(). Force reload.
- window.location.reload();
- }
- else {
- console.warn('[HMR] Root or manually mounted instance modified. Full reload required.');
- }
- }
- // 5. make sure to cleanup dirty hmr components after update
- queuePostFlushCb(() => {
- for (const instance of instances) {
- hmrDirtyComponents.delete(normalizeClassComponent(instance.type));
- }
- });
- }
- function updateComponentDef(oldComp, newComp) {
- shared.extend(oldComp, newComp);
- for (const key in oldComp) {
- if (key !== '__file' && !(key in newComp)) {
- delete oldComp[key];
- }
- }
- }
- function tryWrap(fn) {
- return (id, arg) => {
- try {
- return fn(id, arg);
- }
- catch (e) {
- console.error(e);
- console.warn(`[HMR] Something went wrong during Vue component hot-reload. ` +
- `Full reload required.`);
- }
- };
- }
- let buffer = [];
- let devtoolsNotInstalled = false;
- function emit(event, ...args) {
- if (exports.devtools) {
- exports.devtools.emit(event, ...args);
- }
- else if (!devtoolsNotInstalled) {
- buffer.push({ event, args });
- }
- }
- function setDevtoolsHook(hook, target) {
- var _a, _b;
- exports.devtools = hook;
- if (exports.devtools) {
- exports.devtools.enabled = true;
- buffer.forEach(({ event, args }) => exports.devtools.emit(event, ...args));
- buffer = [];
- }
- else if (
- // handle late devtools injection - only do this if we are in an actual
- // browser environment to avoid the timer handle stalling test runner exit
- // (#4815)
- typeof window !== 'undefined' &&
- // some envs mock window but not fully
- window.HTMLElement &&
- // also exclude jsdom
- !((_b = (_a = window.navigator) === null || _a === void 0 ? void 0 : _a.userAgent) === null || _b === void 0 ? void 0 : _b.includes('jsdom'))) {
- const replay = (target.__VUE_DEVTOOLS_HOOK_REPLAY__ =
- target.__VUE_DEVTOOLS_HOOK_REPLAY__ || []);
- replay.push((newHook) => {
- setDevtoolsHook(newHook, target);
- });
- // clear buffer after 3s - the user probably doesn't have devtools installed
- // at all, and keeping the buffer will cause memory leaks (#4738)
- setTimeout(() => {
- if (!exports.devtools) {
- target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
- devtoolsNotInstalled = true;
- buffer = [];
- }
- }, 3000);
- }
- else {
- // non-browser env, assume not installed
- devtoolsNotInstalled = true;
- buffer = [];
- }
- }
- function devtoolsInitApp(app, version) {
- emit("app:init" /* DevtoolsHooks.APP_INIT */, app, version, {
- Fragment,
- Text,
- Comment,
- Static
- });
- }
- function devtoolsUnmountApp(app) {
- emit("app:unmount" /* DevtoolsHooks.APP_UNMOUNT */, app);
- }
- const devtoolsComponentAdded = /*#__PURE__*/ createDevtoolsComponentHook("component:added" /* DevtoolsHooks.COMPONENT_ADDED */);
- const devtoolsComponentUpdated =
- /*#__PURE__*/ createDevtoolsComponentHook("component:updated" /* DevtoolsHooks.COMPONENT_UPDATED */);
- const _devtoolsComponentRemoved = /*#__PURE__*/ createDevtoolsComponentHook("component:removed" /* DevtoolsHooks.COMPONENT_REMOVED */);
- const devtoolsComponentRemoved = (component) => {
- if (exports.devtools &&
- typeof exports.devtools.cleanupBuffer === 'function' &&
- // remove the component if it wasn't buffered
- !exports.devtools.cleanupBuffer(component)) {
- _devtoolsComponentRemoved(component);
- }
- };
- function createDevtoolsComponentHook(hook) {
- return (component) => {
- emit(hook, component.appContext.app, component.uid, component.parent ? component.parent.uid : undefined, component);
- };
- }
- const devtoolsPerfStart = /*#__PURE__*/ createDevtoolsPerformanceHook("perf:start" /* DevtoolsHooks.PERFORMANCE_START */);
- const devtoolsPerfEnd = /*#__PURE__*/ createDevtoolsPerformanceHook("perf:end" /* DevtoolsHooks.PERFORMANCE_END */);
- function createDevtoolsPerformanceHook(hook) {
- return (component, type, time) => {
- emit(hook, component.appContext.app, component.uid, component, type, time);
- };
- }
- function devtoolsComponentEmit(component, event, params) {
- emit("component:emit" /* DevtoolsHooks.COMPONENT_EMIT */, component.appContext.app, component, event, params);
- }
- function emit$1(instance, event, ...rawArgs) {
- if (instance.isUnmounted)
- return;
- const props = instance.vnode.props || shared.EMPTY_OBJ;
- {
- const { emitsOptions, propsOptions: [propsOptions] } = instance;
- if (emitsOptions) {
- if (!(event in emitsOptions) &&
- !(false )) {
- if (!propsOptions || !(shared.toHandlerKey(event) in propsOptions)) {
- warn(`Component emitted event "${event}" but it is neither declared in ` +
- `the emits option nor as an "${shared.toHandlerKey(event)}" prop.`);
- }
- }
- else {
- const validator = emitsOptions[event];
- if (shared.isFunction(validator)) {
- const isValid = validator(...rawArgs);
- if (!isValid) {
- warn(`Invalid event arguments: event validation failed for event "${event}".`);
- }
- }
- }
- }
- }
- let args = rawArgs;
- const isModelListener = event.startsWith('update:');
- // for v-model update:xxx events, apply modifiers on args
- const modelArg = isModelListener && event.slice(7);
- if (modelArg && modelArg in props) {
- const modifiersKey = `${modelArg === 'modelValue' ? 'model' : modelArg}Modifiers`;
- const { number, trim } = props[modifiersKey] || shared.EMPTY_OBJ;
- if (trim) {
- args = rawArgs.map(a => (shared.isString(a) ? a.trim() : a));
- }
- if (number) {
- args = rawArgs.map(shared.toNumber);
- }
- }
- {
- devtoolsComponentEmit(instance, event, args);
- }
- {
- const lowerCaseEvent = event.toLowerCase();
- if (lowerCaseEvent !== event && props[shared.toHandlerKey(lowerCaseEvent)]) {
- warn(`Event "${lowerCaseEvent}" is emitted in component ` +
- `${formatComponentName(instance, instance.type)} but the handler is registered for "${event}". ` +
- `Note that HTML attributes are case-insensitive and you cannot use ` +
- `v-on to listen to camelCase events when using in-DOM templates. ` +
- `You should probably use "${shared.hyphenate(event)}" instead of "${event}".`);
- }
- }
- let handlerName;
- let handler = props[(handlerName = shared.toHandlerKey(event))] ||
- // also try camelCase event handler (#2249)
- props[(handlerName = shared.toHandlerKey(shared.camelize(event)))];
- // for v-model update:xxx events, also trigger kebab-case equivalent
- // for props passed via kebab-case
- if (!handler && isModelListener) {
- handler = props[(handlerName = shared.toHandlerKey(shared.hyphenate(event)))];
- }
- if (handler) {
- callWithAsyncErrorHandling(handler, instance, 6 /* ErrorCodes.COMPONENT_EVENT_HANDLER */, args);
- }
- const onceHandler = props[handlerName + `Once`];
- if (onceHandler) {
- if (!instance.emitted) {
- instance.emitted = {};
- }
- else if (instance.emitted[handlerName]) {
- return;
- }
- instance.emitted[handlerName] = true;
- callWithAsyncErrorHandling(onceHandler, instance, 6 /* ErrorCodes.COMPONENT_EVENT_HANDLER */, args);
- }
- }
- function normalizeEmitsOptions(comp, appContext, asMixin = false) {
- const cache = appContext.emitsCache;
- const cached = cache.get(comp);
- if (cached !== undefined) {
- return cached;
- }
- const raw = comp.emits;
- let normalized = {};
- // apply mixin/extends props
- let hasExtends = false;
- if (!shared.isFunction(comp)) {
- const extendEmits = (raw) => {
- const normalizedFromExtend = normalizeEmitsOptions(raw, appContext, true);
- if (normalizedFromExtend) {
- hasExtends = true;
- shared.extend(normalized, normalizedFromExtend);
- }
- };
- if (!asMixin && appContext.mixins.length) {
- appContext.mixins.forEach(extendEmits);
- }
- if (comp.extends) {
- extendEmits(comp.extends);
- }
- if (comp.mixins) {
- comp.mixins.forEach(extendEmits);
- }
- }
- if (!raw && !hasExtends) {
- if (shared.isObject(comp)) {
- cache.set(comp, null);
- }
- return null;
- }
- if (shared.isArray(raw)) {
- raw.forEach(key => (normalized[key] = null));
- }
- else {
- shared.extend(normalized, raw);
- }
- if (shared.isObject(comp)) {
- cache.set(comp, normalized);
- }
- return normalized;
- }
- // Check if an incoming prop key is a declared emit event listener.
- // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
- // both considered matched listeners.
- function isEmitListener(options, key) {
- if (!options || !shared.isOn(key)) {
- return false;
- }
- key = key.slice(2).replace(/Once$/, '');
- return (shared.hasOwn(options, key[0].toLowerCase() + key.slice(1)) ||
- shared.hasOwn(options, shared.hyphenate(key)) ||
- shared.hasOwn(options, key));
- }
- /**
- * mark the current rendering instance for asset resolution (e.g.
- * resolveComponent, resolveDirective) during render
- */
- let currentRenderingInstance = null;
- let currentScopeId = null;
- /**
- * Note: rendering calls maybe nested. The function returns the parent rendering
- * instance if present, which should be restored after the render is done:
- *
- * ```js
- * const prev = setCurrentRenderingInstance(i)
- * // ...render
- * setCurrentRenderingInstance(prev)
- * ```
- */
- function setCurrentRenderingInstance(instance) {
- const prev = currentRenderingInstance;
- currentRenderingInstance = instance;
- currentScopeId = (instance && instance.type.__scopeId) || null;
- return prev;
- }
- /**
- * Set scope id when creating hoisted vnodes.
- * @private compiler helper
- */
- function pushScopeId(id) {
- currentScopeId = id;
- }
- /**
- * Technically we no longer need this after 3.0.8 but we need to keep the same
- * API for backwards compat w/ code generated by compilers.
- * @private
- */
- function popScopeId() {
- currentScopeId = null;
- }
- /**
- * Only for backwards compat
- * @private
- */
- const withScopeId = (_id) => withCtx;
- /**
- * Wrap a slot function to memoize current rendering instance
- * @private compiler helper
- */
- function withCtx(fn, ctx = currentRenderingInstance, isNonScopedSlot // false only
- ) {
- if (!ctx)
- return fn;
- // already normalized
- if (fn._n) {
- return fn;
- }
- const renderFnWithContext = (...args) => {
- // If a user calls a compiled slot inside a template expression (#1745), it
- // can mess up block tracking, so by default we disable block tracking and
- // force bail out when invoking a compiled slot (indicated by the ._d flag).
- // This isn't necessary if rendering a compiled `<slot>`, so we flip the
- // ._d flag off when invoking the wrapped fn inside `renderSlot`.
- if (renderFnWithContext._d) {
- setBlockTracking(-1);
- }
- const prevInstance = setCurrentRenderingInstance(ctx);
- let res;
- try {
- res = fn(...args);
- }
- finally {
- setCurrentRenderingInstance(prevInstance);
- if (renderFnWithContext._d) {
- setBlockTracking(1);
- }
- }
- {
- devtoolsComponentUpdated(ctx);
- }
- return res;
- };
- // mark normalized to avoid duplicated wrapping
- renderFnWithContext._n = true;
- // mark this as compiled by default
- // this is used in vnode.ts -> normalizeChildren() to set the slot
- // rendering flag.
- renderFnWithContext._c = true;
- // disable block tracking by default
- renderFnWithContext._d = true;
- return renderFnWithContext;
- }
- /**
- * dev only flag to track whether $attrs was used during render.
- * If $attrs was used during render then the warning for failed attrs
- * fallthrough can be suppressed.
- */
- let accessedAttrs = false;
- function markAttrsAccessed() {
- accessedAttrs = true;
- }
- function renderComponentRoot(instance) {
- const { type: Component, vnode, proxy, withProxy, props, propsOptions: [propsOptions], slots, attrs, emit, render, renderCache, data, setupState, ctx, inheritAttrs } = instance;
- let result;
- let fallthroughAttrs;
- const prev = setCurrentRenderingInstance(instance);
- {
- accessedAttrs = false;
- }
- try {
- if (vnode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */) {
- // withProxy is a proxy with a different `has` trap only for
- // runtime-compiled render functions using `with` block.
- const proxyToUse = withProxy || proxy;
- result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx));
- fallthroughAttrs = attrs;
- }
- else {
- // functional
- const render = Component;
- // in dev, mark attrs accessed if optional props (attrs === props)
- if (true && attrs === props) {
- markAttrsAccessed();
- }
- result = normalizeVNode(render.length > 1
- ? render(props, true
- ? {
- get attrs() {
- markAttrsAccessed();
- return attrs;
- },
- slots,
- emit
- }
- : { attrs, slots, emit })
- : render(props, null /* we know it doesn't need it */));
- fallthroughAttrs = Component.props
- ? attrs
- : getFunctionalFallthrough(attrs);
- }
- }
- catch (err) {
- blockStack.length = 0;
- handleError(err, instance, 1 /* ErrorCodes.RENDER_FUNCTION */);
- result = createVNode(Comment);
- }
- // attr merging
- // in dev mode, comments are preserved, and it's possible for a template
- // to have comments along side the root element which makes it a fragment
- let root = result;
- let setRoot = undefined;
- if (result.patchFlag > 0 &&
- result.patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */) {
- [root, setRoot] = getChildRoot(result);
- }
- if (fallthroughAttrs && inheritAttrs !== false) {
- const keys = Object.keys(fallthroughAttrs);
- const { shapeFlag } = root;
- if (keys.length) {
- if (shapeFlag & (1 /* ShapeFlags.ELEMENT */ | 6 /* ShapeFlags.COMPONENT */)) {
- if (propsOptions && keys.some(shared.isModelListener)) {
- // If a v-model listener (onUpdate:xxx) has a corresponding declared
- // prop, it indicates this component expects to handle v-model and
- // it should not fallthrough.
- // related: #1543, #1643, #1989
- fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions);
- }
- root = cloneVNode(root, fallthroughAttrs);
- }
- else if (!accessedAttrs && root.type !== Comment) {
- const allAttrs = Object.keys(attrs);
- const eventAttrs = [];
- const extraAttrs = [];
- for (let i = 0, l = allAttrs.length; i < l; i++) {
- const key = allAttrs[i];
- if (shared.isOn(key)) {
- // ignore v-model handlers when they fail to fallthrough
- if (!shared.isModelListener(key)) {
- // remove `on`, lowercase first letter to reflect event casing
- // accurately
- eventAttrs.push(key[2].toLowerCase() + key.slice(3));
- }
- }
- else {
- extraAttrs.push(key);
- }
- }
- if (extraAttrs.length) {
- warn(`Extraneous non-props attributes (` +
- `${extraAttrs.join(', ')}) ` +
- `were passed to component but could not be automatically inherited ` +
- `because component renders fragment or text root nodes.`);
- }
- if (eventAttrs.length) {
- warn(`Extraneous non-emits event listeners (` +
- `${eventAttrs.join(', ')}) ` +
- `were passed to component but could not be automatically inherited ` +
- `because component renders fragment or text root nodes. ` +
- `If the listener is intended to be a component custom event listener only, ` +
- `declare it using the "emits" option.`);
- }
- }
- }
- }
- // inherit directives
- if (vnode.dirs) {
- if (!isElementRoot(root)) {
- warn(`Runtime directive used on component with non-element root node. ` +
- `The directives will not function as intended.`);
- }
- // clone before mutating since the root may be a hoisted vnode
- root = cloneVNode(root);
- root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs;
- }
- // inherit transition data
- if (vnode.transition) {
- if (!isElementRoot(root)) {
- warn(`Component inside <Transition> renders non-element root node ` +
- `that cannot be animated.`);
- }
- root.transition = vnode.transition;
- }
- if (setRoot) {
- setRoot(root);
- }
- else {
- result = root;
- }
- setCurrentRenderingInstance(prev);
- return result;
- }
- /**
- * dev only
- * In dev mode, template root level comments are rendered, which turns the
- * template into a fragment root, but we need to locate the single element
- * root for attrs and scope id processing.
- */
- const getChildRoot = (vnode) => {
- const rawChildren = vnode.children;
- const dynamicChildren = vnode.dynamicChildren;
- const childRoot = filterSingleRoot(rawChildren);
- if (!childRoot) {
- return [vnode, undefined];
- }
- const index = rawChildren.indexOf(childRoot);
- const dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1;
- const setRoot = (updatedRoot) => {
- rawChildren[index] = updatedRoot;
- if (dynamicChildren) {
- if (dynamicIndex > -1) {
- dynamicChildren[dynamicIndex] = updatedRoot;
- }
- else if (updatedRoot.patchFlag > 0) {
- vnode.dynamicChildren = [...dynamicChildren, updatedRoot];
- }
- }
- };
- return [normalizeVNode(childRoot), setRoot];
- };
- function filterSingleRoot(children) {
- let singleRoot;
- for (let i = 0; i < children.length; i++) {
- const child = children[i];
- if (isVNode(child)) {
- // ignore user comment
- if (child.type !== Comment || child.children === 'v-if') {
- if (singleRoot) {
- // has more than 1 non-comment child, return now
- return;
- }
- else {
- singleRoot = child;
- }
- }
- }
- else {
- return;
- }
- }
- return singleRoot;
- }
- const getFunctionalFallthrough = (attrs) => {
- let res;
- for (const key in attrs) {
- if (key === 'class' || key === 'style' || shared.isOn(key)) {
- (res || (res = {}))[key] = attrs[key];
- }
- }
- return res;
- };
- const filterModelListeners = (attrs, props) => {
- const res = {};
- for (const key in attrs) {
- if (!shared.isModelListener(key) || !(key.slice(9) in props)) {
- res[key] = attrs[key];
- }
- }
- return res;
- };
- const isElementRoot = (vnode) => {
- return (vnode.shapeFlag & (6 /* ShapeFlags.COMPONENT */ | 1 /* ShapeFlags.ELEMENT */) ||
- vnode.type === Comment // potential v-if branch switch
- );
- };
- function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
- const { props: prevProps, children: prevChildren, component } = prevVNode;
- const { props: nextProps, children: nextChildren, patchFlag } = nextVNode;
- const emits = component.emitsOptions;
- // Parent component's render function was hot-updated. Since this may have
- // caused the child component's slots content to have changed, we need to
- // force the child to update as well.
- if ((prevChildren || nextChildren) && isHmrUpdating) {
- return true;
- }
- // force child update for runtime directive or transition on component vnode.
- if (nextVNode.dirs || nextVNode.transition) {
- return true;
- }
- if (optimized && patchFlag >= 0) {
- if (patchFlag & 1024 /* PatchFlags.DYNAMIC_SLOTS */) {
- // slot content that references values that might have changed,
- // e.g. in a v-for
- return true;
- }
- if (patchFlag & 16 /* PatchFlags.FULL_PROPS */) {
- if (!prevProps) {
- return !!nextProps;
- }
- // presence of this flag indicates props are always non-null
- return hasPropsChanged(prevProps, nextProps, emits);
- }
- else if (patchFlag & 8 /* PatchFlags.PROPS */) {
- const dynamicProps = nextVNode.dynamicProps;
- for (let i = 0; i < dynamicProps.length; i++) {
- const key = dynamicProps[i];
- if (nextProps[key] !== prevProps[key] &&
- !isEmitListener(emits, key)) {
- return true;
- }
- }
- }
- }
- else {
- // this path is only taken by manually written render functions
- // so presence of any children leads to a forced update
- if (prevChildren || nextChildren) {
- if (!nextChildren || !nextChildren.$stable) {
- return true;
- }
- }
- if (prevProps === nextProps) {
- return false;
- }
- if (!prevProps) {
- return !!nextProps;
- }
- if (!nextProps) {
- return true;
- }
- return hasPropsChanged(prevProps, nextProps, emits);
- }
- return false;
- }
- function hasPropsChanged(prevProps, nextProps, emitsOptions) {
- const nextKeys = Object.keys(nextProps);
- if (nextKeys.length !== Object.keys(prevProps).length) {
- return true;
- }
- for (let i = 0; i < nextKeys.length; i++) {
- const key = nextKeys[i];
- if (nextProps[key] !== prevProps[key] &&
- !isEmitListener(emitsOptions, key)) {
- return true;
- }
- }
- return false;
- }
- function updateHOCHostEl({ vnode, parent }, el // HostNode
- ) {
- while (parent && parent.subTree === vnode) {
- (vnode = parent.vnode).el = el;
- parent = parent.parent;
- }
- }
- const isSuspense = (type) => type.__isSuspense;
- // Suspense exposes a component-like API, and is treated like a component
- // in the compiler, but internally it's a special built-in type that hooks
- // directly into the renderer.
- const SuspenseImpl = {
- name: 'Suspense',
- // In order to make Suspense tree-shakable, we need to avoid importing it
- // directly in the renderer. The renderer checks for the __isSuspense flag
- // on a vnode's type and calls the `process` method, passing in renderer
- // internals.
- __isSuspense: true,
- process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized,
- // platform-specific impl passed from renderer
- rendererInternals) {
- if (n1 == null) {
- mountSuspense(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals);
- }
- else {
- patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, rendererInternals);
- }
- },
- hydrate: hydrateSuspense,
- create: createSuspenseBoundary,
- normalize: normalizeSuspenseChildren
- };
- // Force-casted public typing for h and TSX props inference
- const Suspense = (SuspenseImpl
- );
- function triggerEvent(vnode, name) {
- const eventListener = vnode.props && vnode.props[name];
- if (shared.isFunction(eventListener)) {
- eventListener();
- }
- }
- function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
- const { p: patch, o: { createElement } } = rendererInternals;
- const hiddenContainer = createElement('div');
- const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals));
- // start mounting the content subtree in an off-dom container
- patch(null, (suspense.pendingBranch = vnode.ssContent), hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds);
- // now check if we have encountered any async deps
- if (suspense.deps > 0) {
- // has async
- // invoke @fallback event
- triggerEvent(vnode, 'onPending');
- triggerEvent(vnode, 'onFallback');
- // mount the fallback tree
- patch(null, vnode.ssFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
- isSVG, slotScopeIds);
- setActiveBranch(suspense, vnode.ssFallback);
- }
- else {
- // Suspense has no async deps. Just resolve.
- suspense.resolve();
- }
- }
- function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
- const suspense = (n2.suspense = n1.suspense);
- suspense.vnode = n2;
- n2.el = n1.el;
- const newBranch = n2.ssContent;
- const newFallback = n2.ssFallback;
- const { activeBranch, pendingBranch, isInFallback, isHydrating } = suspense;
- if (pendingBranch) {
- suspense.pendingBranch = newBranch;
- if (isSameVNodeType(newBranch, pendingBranch)) {
- // same root type but content may have changed.
- patch(pendingBranch, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
- if (suspense.deps <= 0) {
- suspense.resolve();
- }
- else if (isInFallback) {
- patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
- isSVG, slotScopeIds, optimized);
- setActiveBranch(suspense, newFallback);
- }
- }
- else {
- // toggled before pending tree is resolved
- suspense.pendingId++;
- if (isHydrating) {
- // if toggled before hydration is finished, the current DOM tree is
- // no longer valid. set it as the active branch so it will be unmounted
- // when resolved
- suspense.isHydrating = false;
- suspense.activeBranch = pendingBranch;
- }
- else {
- unmount(pendingBranch, parentComponent, suspense);
- }
- // increment pending ID. this is used to invalidate async callbacks
- // reset suspense state
- suspense.deps = 0;
- // discard effects from pending branch
- suspense.effects.length = 0;
- // discard previous container
- suspense.hiddenContainer = createElement('div');
- if (isInFallback) {
- // already in fallback state
- patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
- if (suspense.deps <= 0) {
- suspense.resolve();
- }
- else {
- patch(activeBranch, newFallback, container, anchor, parentComponent, null, // fallback tree will not have suspense context
- isSVG, slotScopeIds, optimized);
- setActiveBranch(suspense, newFallback);
- }
- }
- else if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
- // toggled "back" to current active branch
- patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, slotScopeIds, optimized);
- // force resolve
- suspense.resolve(true);
- }
- else {
- // switched to a 3rd branch
- patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
- if (suspense.deps <= 0) {
- suspense.resolve();
- }
- }
- }
- }
- else {
- if (activeBranch && isSameVNodeType(newBranch, activeBranch)) {
- // root did not change, just normal patch
- patch(activeBranch, newBranch, container, anchor, parentComponent, suspense, isSVG, slotScopeIds, optimized);
- setActiveBranch(suspense, newBranch);
- }
- else {
- // root node toggled
- // invoke @pending event
- triggerEvent(n2, 'onPending');
- // mount pending branch in off-dom container
- suspense.pendingBranch = newBranch;
- suspense.pendingId++;
- patch(null, newBranch, suspense.hiddenContainer, null, parentComponent, suspense, isSVG, slotScopeIds, optimized);
- if (suspense.deps <= 0) {
- // incoming branch has no async deps, resolve now.
- suspense.resolve();
- }
- else {
- const { timeout, pendingId } = suspense;
- if (timeout > 0) {
- setTimeout(() => {
- if (suspense.pendingId === pendingId) {
- suspense.fallback(newFallback);
- }
- }, timeout);
- }
- else if (timeout === 0) {
- suspense.fallback(newFallback);
- }
- }
- }
- }
- }
- let hasWarned = false;
- function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
- /* istanbul ignore if */
- if (!hasWarned) {
- hasWarned = true;
- // @ts-ignore `console.info` cannot be null error
- console[console.info ? 'info' : 'log'](`<Suspense> is an experimental feature and its API will likely change.`);
- }
- const { p: patch, m: move, um: unmount, n: next, o: { parentNode, remove } } = rendererInternals;
- const timeout = shared.toNumber(vnode.props && vnode.props.timeout);
- const suspense = {
- vnode,
- parent,
- parentComponent,
- isSVG,
- container,
- hiddenContainer,
- anchor,
- deps: 0,
- pendingId: 0,
- timeout: typeof timeout === 'number' ? timeout : -1,
- activeBranch: null,
- pendingBranch: null,
- isInFallback: true,
- isHydrating,
- isUnmounted: false,
- effects: [],
- resolve(resume = false) {
- {
- if (!resume && !suspense.pendingBranch) {
- throw new Error(`suspense.resolve() is called without a pending branch.`);
- }
- if (suspense.isUnmounted) {
- throw new Error(`suspense.resolve() is called on an already unmounted suspense boundary.`);
- }
- }
- const { vnode, activeBranch, pendingBranch, pendingId, effects, parentComponent, container } = suspense;
- if (suspense.isHydrating) {
- suspense.isHydrating = false;
- }
- else if (!resume) {
- const delayEnter = activeBranch &&
- pendingBranch.transition &&
- pendingBranch.transition.mode === 'out-in';
- if (delayEnter) {
- activeBranch.transition.afterLeave = () => {
- if (pendingId === suspense.pendingId) {
- move(pendingBranch, container, anchor, 0 /* MoveType.ENTER */);
- }
- };
- }
- // this is initial anchor on mount
- let { anchor } = suspense;
- // unmount current active tree
- if (activeBranch) {
- // if the fallback tree was mounted, it may have been moved
- // as part of a parent suspense. get the latest anchor for insertion
- anchor = next(activeBranch);
- unmount(activeBranch, parentComponent, suspense, true);
- }
- if (!delayEnter) {
- // move content from off-dom container to actual container
- move(pendingBranch, container, anchor, 0 /* MoveType.ENTER */);
- }
- }
- setActiveBranch(suspense, pendingBranch);
- suspense.pendingBranch = null;
- suspense.isInFallback = false;
- // flush buffered effects
- // check if there is a pending parent suspense
- let parent = suspense.parent;
- let hasUnresolvedAncestor = false;
- while (parent) {
- if (parent.pendingBranch) {
- // found a pending parent suspense, merge buffered post jobs
- // into that parent
- parent.effects.push(...effects);
- hasUnresolvedAncestor = true;
- break;
- }
- parent = parent.parent;
- }
- // no pending parent suspense, flush all jobs
- if (!hasUnresolvedAncestor) {
- queuePostFlushCb(effects);
- }
- suspense.effects = [];
- // invoke @resolve event
- triggerEvent(vnode, 'onResolve');
- },
- fallback(fallbackVNode) {
- if (!suspense.pendingBranch) {
- return;
- }
- const { vnode, activeBranch, parentComponent, container, isSVG } = suspense;
- // invoke @fallback event
- triggerEvent(vnode, 'onFallback');
- const anchor = next(activeBranch);
- const mountFallback = () => {
- if (!suspense.isInFallback) {
- return;
- }
- // mount the fallback tree
- patch(null, fallbackVNode, container, anchor, parentComponent, null, // fallback tree will not have suspense context
- isSVG, slotScopeIds, optimized);
- setActiveBranch(suspense, fallbackVNode);
- };
- const delayEnter = fallbackVNode.transition && fallbackVNode.transition.mode === 'out-in';
- if (delayEnter) {
- activeBranch.transition.afterLeave = mountFallback;
- }
- suspense.isInFallback = true;
- // unmount current active branch
- unmount(activeBranch, parentComponent, null, // no suspense so unmount hooks fire now
- true // shouldRemove
- );
- if (!delayEnter) {
- mountFallback();
- }
- },
- move(container, anchor, type) {
- suspense.activeBranch &&
- move(suspense.activeBranch, container, anchor, type);
- suspense.container = container;
- },
- next() {
- return suspense.activeBranch && next(suspense.activeBranch);
- },
- registerDep(instance, setupRenderEffect) {
- const isInPendingSuspense = !!suspense.pendingBranch;
- if (isInPendingSuspense) {
- suspense.deps++;
- }
- const hydratedEl = instance.vnode.el;
- instance
- .asyncDep.catch(err => {
- handleError(err, instance, 0 /* ErrorCodes.SETUP_FUNCTION */);
- })
- .then(asyncSetupResult => {
- // retry when the setup() promise resolves.
- // component may have been unmounted before resolve.
- if (instance.isUnmounted ||
- suspense.isUnmounted ||
- suspense.pendingId !== instance.suspenseId) {
- return;
- }
- // retry from this component
- instance.asyncResolved = true;
- const { vnode } = instance;
- {
- pushWarningContext(vnode);
- }
- handleSetupResult(instance, asyncSetupResult, false);
- if (hydratedEl) {
- // vnode may have been replaced if an update happened before the
- // async dep is resolved.
- vnode.el = hydratedEl;
- }
- const placeholder = !hydratedEl && instance.subTree.el;
- setupRenderEffect(instance, vnode,
- // component may have been moved before resolve.
- // if this is not a hydration, instance.subTree will be the comment
- // placeholder.
- parentNode(hydratedEl || instance.subTree.el),
- // anchor will not be used if this is hydration, so only need to
- // consider the comment placeholder case.
- hydratedEl ? null : next(instance.subTree), suspense, isSVG, optimized);
- if (placeholder) {
- remove(placeholder);
- }
- updateHOCHostEl(instance, vnode.el);
- {
- popWarningContext();
- }
- // only decrease deps count if suspense is not already resolved
- if (isInPendingSuspense && --suspense.deps === 0) {
- suspense.resolve();
- }
- });
- },
- unmount(parentSuspense, doRemove) {
- suspense.isUnmounted = true;
- if (suspense.activeBranch) {
- unmount(suspense.activeBranch, parentComponent, parentSuspense, doRemove);
- }
- if (suspense.pendingBranch) {
- unmount(suspense.pendingBranch, parentComponent, parentSuspense, doRemove);
- }
- }
- };
- return suspense;
- }
- function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals, hydrateNode) {
- /* eslint-disable no-restricted-globals */
- const suspense = (vnode.suspense = createSuspenseBoundary(vnode, parentSuspense, parentComponent, node.parentNode, document.createElement('div'), null, isSVG, slotScopeIds, optimized, rendererInternals, true /* hydrating */));
- // there are two possible scenarios for server-rendered suspense:
- // - success: ssr content should be fully resolved
- // - failure: ssr content should be the fallback branch.
- // however, on the client we don't really know if it has failed or not
- // attempt to hydrate the DOM assuming it has succeeded, but we still
- // need to construct a suspense boundary first
- const result = hydrateNode(node, (suspense.pendingBranch = vnode.ssContent), parentComponent, suspense, slotScopeIds, optimized);
- if (suspense.deps === 0) {
- suspense.resolve();
- }
- return result;
- /* eslint-enable no-restricted-globals */
- }
- function normalizeSuspenseChildren(vnode) {
- const { shapeFlag, children } = vnode;
- const isSlotChildren = shapeFlag & 32 /* ShapeFlags.SLOTS_CHILDREN */;
- vnode.ssContent = normalizeSuspenseSlot(isSlotChildren ? children.default : children);
- vnode.ssFallback = isSlotChildren
- ? normalizeSuspenseSlot(children.fallback)
- : createVNode(Comment);
- }
- function normalizeSuspenseSlot(s) {
- let block;
- if (shared.isFunction(s)) {
- const trackBlock = isBlockTreeEnabled && s._c;
- if (trackBlock) {
- // disableTracking: false
- // allow block tracking for compiled slots
- // (see ./componentRenderContext.ts)
- s._d = false;
- openBlock();
- }
- s = s();
- if (trackBlock) {
- s._d = true;
- block = currentBlock;
- closeBlock();
- }
- }
- if (shared.isArray(s)) {
- const singleChild = filterSingleRoot(s);
- if (!singleChild) {
- warn(`<Suspense> slots expect a single root node.`);
- }
- s = singleChild;
- }
- s = normalizeVNode(s);
- if (block && !s.dynamicChildren) {
- s.dynamicChildren = block.filter(c => c !== s);
- }
- return s;
- }
- function queueEffectWithSuspense(fn, suspense) {
- if (suspense && suspense.pendingBranch) {
- if (shared.isArray(fn)) {
- suspense.effects.push(...fn);
- }
- else {
- suspense.effects.push(fn);
- }
- }
- else {
- queuePostFlushCb(fn);
- }
- }
- function setActiveBranch(suspense, branch) {
- suspense.activeBranch = branch;
- const { vnode, parentComponent } = suspense;
- const el = (vnode.el = branch.el);
- // in case suspense is the root node of a component,
- // recursively update the HOC el
- if (parentComponent && parentComponent.subTree === vnode) {
- parentComponent.vnode.el = el;
- updateHOCHostEl(parentComponent, el);
- }
- }
- function provide(key, value) {
- if (!currentInstance) {
- {
- warn(`provide() can only be used inside setup().`);
- }
- }
- else {
- let provides = currentInstance.provides;
- // by default an instance inherits its parent's provides object
- // but when it needs to provide values of its own, it creates its
- // own provides object using parent provides object as prototype.
- // this way in `inject` we can simply look up injections from direct
- // parent and let the prototype chain do the work.
- const parentProvides = currentInstance.parent && currentInstance.parent.provides;
- if (parentProvides === provides) {
- provides = currentInstance.provides = Object.create(parentProvides);
- }
- // TS doesn't allow symbol as index type
- provides[key] = value;
- }
- }
- function inject(key, defaultValue, treatDefaultAsFactory = false) {
- // fallback to `currentRenderingInstance` so that this can be called in
- // a functional component
- const instance = currentInstance || currentRenderingInstance;
- if (instance) {
- // #2400
- // to support `app.use` plugins,
- // fallback to appContext's `provides` if the instance is at root
- const provides = instance.parent == null
- ? instance.vnode.appContext && instance.vnode.appContext.provides
- : instance.parent.provides;
- if (provides && key in provides) {
- // TS doesn't allow symbol as index type
- return provides[key];
- }
- else if (arguments.length > 1) {
- return treatDefaultAsFactory && shared.isFunction(defaultValue)
- ? defaultValue.call(instance.proxy)
- : defaultValue;
- }
- else {
- warn(`injection "${String(key)}" not found.`);
- }
- }
- else {
- warn(`inject() can only be used inside setup() or functional components.`);
- }
- }
- // Simple effect.
- function watchEffect(effect, options) {
- return doWatch(effect, null, options);
- }
- function watchPostEffect(effect, options) {
- return doWatch(effect, null, ({ ...options, flush: 'post' }
- ));
- }
- function watchSyncEffect(effect, options) {
- return doWatch(effect, null, ({ ...options, flush: 'sync' }
- ));
- }
- // initial value for watchers to trigger on undefined initial values
- const INITIAL_WATCHER_VALUE = {};
- // implementation
- function watch(source, cb, options) {
- if (!shared.isFunction(cb)) {
- warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` +
- `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
- `supports \`watch(source, cb, options?) signature.`);
- }
- return doWatch(source, cb, options);
- }
- function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = shared.EMPTY_OBJ) {
- if (!cb) {
- if (immediate !== undefined) {
- warn(`watch() "immediate" option is only respected when using the ` +
- `watch(source, callback, options?) signature.`);
- }
- if (deep !== undefined) {
- warn(`watch() "deep" option is only respected when using the ` +
- `watch(source, callback, options?) signature.`);
- }
- }
- const warnInvalidSource = (s) => {
- warn(`Invalid watch source: `, s, `A watch source can only be a getter/effect function, a ref, ` +
- `a reactive object, or an array of these types.`);
- };
- const instance = currentInstance;
- let getter;
- let forceTrigger = false;
- let isMultiSource = false;
- if (reactivity.isRef(source)) {
- getter = () => source.value;
- forceTrigger = reactivity.isShallow(source);
- }
- else if (reactivity.isReactive(source)) {
- getter = () => source;
- deep = true;
- }
- else if (shared.isArray(source)) {
- isMultiSource = true;
- forceTrigger = source.some(s => reactivity.isReactive(s) || reactivity.isShallow(s));
- getter = () => source.map(s => {
- if (reactivity.isRef(s)) {
- return s.value;
- }
- else if (reactivity.isReactive(s)) {
- return traverse(s);
- }
- else if (shared.isFunction(s)) {
- return callWithErrorHandling(s, instance, 2 /* ErrorCodes.WATCH_GETTER */);
- }
- else {
- warnInvalidSource(s);
- }
- });
- }
- else if (shared.isFunction(source)) {
- if (cb) {
- // getter with cb
- getter = () => callWithErrorHandling(source, instance, 2 /* ErrorCodes.WATCH_GETTER */);
- }
- else {
- // no cb -> simple effect
- getter = () => {
- if (instance && instance.isUnmounted) {
- return;
- }
- if (cleanup) {
- cleanup();
- }
- return callWithAsyncErrorHandling(source, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [onCleanup]);
- };
- }
- }
- else {
- getter = shared.NOOP;
- warnInvalidSource(source);
- }
- if (cb && deep) {
- const baseGetter = getter;
- getter = () => traverse(baseGetter());
- }
- let cleanup;
- let onCleanup = (fn) => {
- cleanup = effect.onStop = () => {
- callWithErrorHandling(fn, instance, 4 /* ErrorCodes.WATCH_CLEANUP */);
- };
- };
- // in SSR there is no need to setup an actual effect, and it should be noop
- // unless it's eager or sync flush
- let ssrCleanup;
- if (isInSSRComponentSetup) {
- // we will also not call the invalidate callback (+ runner is not set up)
- onCleanup = shared.NOOP;
- if (!cb) {
- getter();
- }
- else if (immediate) {
- callWithAsyncErrorHandling(cb, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [
- getter(),
- isMultiSource ? [] : undefined,
- onCleanup
- ]);
- }
- if (flush === 'sync') {
- const ctx = useSSRContext();
- ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
- }
- else {
- return shared.NOOP;
- }
- }
- let oldValue = isMultiSource
- ? new Array(source.length).fill(INITIAL_WATCHER_VALUE)
- : INITIAL_WATCHER_VALUE;
- const job = () => {
- if (!effect.active) {
- return;
- }
- if (cb) {
- // watch(source, cb)
- const newValue = effect.run();
- if (deep ||
- forceTrigger ||
- (isMultiSource
- ? newValue.some((v, i) => shared.hasChanged(v, oldValue[i]))
- : shared.hasChanged(newValue, oldValue)) ||
- (false )) {
- // cleanup before running cb again
- if (cleanup) {
- cleanup();
- }
- callWithAsyncErrorHandling(cb, instance, 3 /* ErrorCodes.WATCH_CALLBACK */, [
- newValue,
- // pass undefined as the old value when it's changed for the first time
- oldValue === INITIAL_WATCHER_VALUE
- ? undefined
- : (isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE)
- ? []
- : oldValue,
- onCleanup
- ]);
- oldValue = newValue;
- }
- }
- else {
- // watchEffect
- effect.run();
- }
- };
- // important: mark the job as a watcher callback so that scheduler knows
- // it is allowed to self-trigger (#1727)
- job.allowRecurse = !!cb;
- let scheduler;
- if (flush === 'sync') {
- scheduler = job; // the scheduler function gets called directly
- }
- else if (flush === 'post') {
- scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
- }
- else {
- // default: 'pre'
- job.pre = true;
- if (instance)
- job.id = instance.uid;
- scheduler = () => queueJob(job);
- }
- const effect = new reactivity.ReactiveEffect(getter, scheduler);
- {
- effect.onTrack = onTrack;
- effect.onTrigger = onTrigger;
- }
- // initial run
- if (cb) {
- if (immediate) {
- job();
- }
- else {
- oldValue = effect.run();
- }
- }
- else if (flush === 'post') {
- queuePostRenderEffect(effect.run.bind(effect), instance && instance.suspense);
- }
- else {
- effect.run();
- }
- const unwatch = () => {
- effect.stop();
- if (instance && instance.scope) {
- shared.remove(instance.scope.effects, effect);
- }
- };
- if (ssrCleanup)
- ssrCleanup.push(unwatch);
- return unwatch;
- }
- // this.$watch
- function instanceWatch(source, value, options) {
- const publicThis = this.proxy;
- const getter = shared.isString(source)
- ? source.includes('.')
- ? createPathGetter(publicThis, source)
- : () => publicThis[source]
- : source.bind(publicThis, publicThis);
- let cb;
- if (shared.isFunction(value)) {
- cb = value;
- }
- else {
- cb = value.handler;
- options = value;
- }
- const cur = currentInstance;
- setCurrentInstance(this);
- const res = doWatch(getter, cb.bind(publicThis), options);
- if (cur) {
- setCurrentInstance(cur);
- }
- else {
- unsetCurrentInstance();
- }
- return res;
- }
- function createPathGetter(ctx, path) {
- const segments = path.split('.');
- return () => {
- let cur = ctx;
- for (let i = 0; i < segments.length && cur; i++) {
- cur = cur[segments[i]];
- }
- return cur;
- };
- }
- function traverse(value, seen) {
- if (!shared.isObject(value) || value["__v_skip" /* ReactiveFlags.SKIP */]) {
- return value;
- }
- seen = seen || new Set();
- if (seen.has(value)) {
- return value;
- }
- seen.add(value);
- if (reactivity.isRef(value)) {
- traverse(value.value, seen);
- }
- else if (shared.isArray(value)) {
- for (let i = 0; i < value.length; i++) {
- traverse(value[i], seen);
- }
- }
- else if (shared.isSet(value) || shared.isMap(value)) {
- value.forEach((v) => {
- traverse(v, seen);
- });
- }
- else if (shared.isPlainObject(value)) {
- for (const key in value) {
- traverse(value[key], seen);
- }
- }
- return value;
- }
- function useTransitionState() {
- const state = {
- isMounted: false,
- isLeaving: false,
- isUnmounting: false,
- leavingVNodes: new Map()
- };
- onMounted(() => {
- state.isMounted = true;
- });
- onBeforeUnmount(() => {
- state.isUnmounting = true;
- });
- return state;
- }
- const TransitionHookValidator = [Function, Array];
- const BaseTransitionImpl = {
- name: `BaseTransition`,
- props: {
- mode: String,
- appear: Boolean,
- persisted: Boolean,
- // enter
- onBeforeEnter: TransitionHookValidator,
- onEnter: TransitionHookValidator,
- onAfterEnter: TransitionHookValidator,
- onEnterCancelled: TransitionHookValidator,
- // leave
- onBeforeLeave: TransitionHookValidator,
- onLeave: TransitionHookValidator,
- onAfterLeave: TransitionHookValidator,
- onLeaveCancelled: TransitionHookValidator,
- // appear
- onBeforeAppear: TransitionHookValidator,
- onAppear: TransitionHookValidator,
- onAfterAppear: TransitionHookValidator,
- onAppearCancelled: TransitionHookValidator
- },
- setup(props, { slots }) {
- const instance = getCurrentInstance();
- const state = useTransitionState();
- let prevTransitionKey;
- return () => {
- const children = slots.default && getTransitionRawChildren(slots.default(), true);
- if (!children || !children.length) {
- return;
- }
- let child = children[0];
- if (children.length > 1) {
- let hasFound = false;
- // locate first non-comment child
- for (const c of children) {
- if (c.type !== Comment) {
- if (hasFound) {
- // warn more than one non-comment child
- warn('<transition> can only be used on a single element or component. ' +
- 'Use <transition-group> for lists.');
- break;
- }
- child = c;
- hasFound = true;
- }
- }
- }
- // there's no need to track reactivity for these props so use the raw
- // props for a bit better perf
- const rawProps = reactivity.toRaw(props);
- const { mode } = rawProps;
- // check mode
- if (mode &&
- mode !== 'in-out' &&
- mode !== 'out-in' &&
- mode !== 'default') {
- warn(`invalid <transition> mode: ${mode}`);
- }
- if (state.isLeaving) {
- return emptyPlaceholder(child);
- }
- // in the case of <transition><keep-alive/></transition>, we need to
- // compare the type of the kept-alive children.
- const innerChild = getKeepAliveChild(child);
- if (!innerChild) {
- return emptyPlaceholder(child);
- }
- const enterHooks = resolveTransitionHooks(innerChild, rawProps, state, instance);
- setTransitionHooks(innerChild, enterHooks);
- const oldChild = instance.subTree;
- const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
- let transitionKeyChanged = false;
- const { getTransitionKey } = innerChild.type;
- if (getTransitionKey) {
- const key = getTransitionKey();
- if (prevTransitionKey === undefined) {
- prevTransitionKey = key;
- }
- else if (key !== prevTransitionKey) {
- prevTransitionKey = key;
- transitionKeyChanged = true;
- }
- }
- // handle mode
- if (oldInnerChild &&
- oldInnerChild.type !== Comment &&
- (!isSameVNodeType(innerChild, oldInnerChild) || transitionKeyChanged)) {
- const leavingHooks = resolveTransitionHooks(oldInnerChild, rawProps, state, instance);
- // update old tree's hooks in case of dynamic transition
- setTransitionHooks(oldInnerChild, leavingHooks);
- // switching between different views
- if (mode === 'out-in') {
- state.isLeaving = true;
- // return placeholder node and queue update when leave finishes
- leavingHooks.afterLeave = () => {
- state.isLeaving = false;
- // #6835
- // it also needs to be updated when active is undefined
- if (instance.update.active !== false) {
- instance.update();
- }
- };
- return emptyPlaceholder(child);
- }
- else if (mode === 'in-out' && innerChild.type !== Comment) {
- leavingHooks.delayLeave = (el, earlyRemove, delayedLeave) => {
- const leavingVNodesCache = getLeavingNodesForType(state, oldInnerChild);
- leavingVNodesCache[String(oldInnerChild.key)] = oldInnerChild;
- // early removal callback
- el._leaveCb = () => {
- earlyRemove();
- el._leaveCb = undefined;
- delete enterHooks.delayedLeave;
- };
- enterHooks.delayedLeave = delayedLeave;
- };
- }
- }
- return child;
- };
- }
- };
- // export the public type for h/tsx inference
- // also to avoid inline import() in generated d.ts files
- const BaseTransition = BaseTransitionImpl;
- function getLeavingNodesForType(state, vnode) {
- const { leavingVNodes } = state;
- let leavingVNodesCache = leavingVNodes.get(vnode.type);
- if (!leavingVNodesCache) {
- leavingVNodesCache = Object.create(null);
- leavingVNodes.set(vnode.type, leavingVNodesCache);
- }
- return leavingVNodesCache;
- }
- // The transition hooks are attached to the vnode as vnode.transition
- // and will be called at appropriate timing in the renderer.
- function resolveTransitionHooks(vnode, props, state, instance) {
- const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;
- const key = String(vnode.key);
- const leavingVNodesCache = getLeavingNodesForType(state, vnode);
- const callHook = (hook, args) => {
- hook &&
- callWithAsyncErrorHandling(hook, instance, 9 /* ErrorCodes.TRANSITION_HOOK */, args);
- };
- const callAsyncHook = (hook, args) => {
- const done = args[1];
- callHook(hook, args);
- if (shared.isArray(hook)) {
- if (hook.every(hook => hook.length <= 1))
- done();
- }
- else if (hook.length <= 1) {
- done();
- }
- };
- const hooks = {
- mode,
- persisted,
- beforeEnter(el) {
- let hook = onBeforeEnter;
- if (!state.isMounted) {
- if (appear) {
- hook = onBeforeAppear || onBeforeEnter;
- }
- else {
- return;
- }
- }
- // for same element (v-show)
- if (el._leaveCb) {
- el._leaveCb(true /* cancelled */);
- }
- // for toggled element with same key (v-if)
- const leavingVNode = leavingVNodesCache[key];
- if (leavingVNode &&
- isSameVNodeType(vnode, leavingVNode) &&
- leavingVNode.el._leaveCb) {
- // force early removal (not cancelled)
- leavingVNode.el._leaveCb();
- }
- callHook(hook, [el]);
- },
- enter(el) {
- let hook = onEnter;
- let afterHook = onAfterEnter;
- let cancelHook = onEnterCancelled;
- if (!state.isMounted) {
- if (appear) {
- hook = onAppear || onEnter;
- afterHook = onAfterAppear || onAfterEnter;
- cancelHook = onAppearCancelled || onEnterCancelled;
- }
- else {
- return;
- }
- }
- let called = false;
- const done = (el._enterCb = (cancelled) => {
- if (called)
- return;
- called = true;
- if (cancelled) {
- callHook(cancelHook, [el]);
- }
- else {
- callHook(afterHook, [el]);
- }
- if (hooks.delayedLeave) {
- hooks.delayedLeave();
- }
- el._enterCb = undefined;
- });
- if (hook) {
- callAsyncHook(hook, [el, done]);
- }
- else {
- done();
- }
- },
- leave(el, remove) {
- const key = String(vnode.key);
- if (el._enterCb) {
- el._enterCb(true /* cancelled */);
- }
- if (state.isUnmounting) {
- return remove();
- }
- callHook(onBeforeLeave, [el]);
- let called = false;
- const done = (el._leaveCb = (cancelled) => {
- if (called)
- return;
- called = true;
- remove();
- if (cancelled) {
- callHook(onLeaveCancelled, [el]);
- }
- else {
- callHook(onAfterLeave, [el]);
- }
- el._leaveCb = undefined;
- if (leavingVNodesCache[key] === vnode) {
- delete leavingVNodesCache[key];
- }
- });
- leavingVNodesCache[key] = vnode;
- if (onLeave) {
- callAsyncHook(onLeave, [el, done]);
- }
- else {
- done();
- }
- },
- clone(vnode) {
- return resolveTransitionHooks(vnode, props, state, instance);
- }
- };
- return hooks;
- }
- // the placeholder really only handles one special case: KeepAlive
- // in the case of a KeepAlive in a leave phase we need to return a KeepAlive
- // placeholder with empty content to avoid the KeepAlive instance from being
- // unmounted.
- function emptyPlaceholder(vnode) {
- if (isKeepAlive(vnode)) {
- vnode = cloneVNode(vnode);
- vnode.children = null;
- return vnode;
- }
- }
- function getKeepAliveChild(vnode) {
- return isKeepAlive(vnode)
- ? vnode.children
- ? vnode.children[0]
- : undefined
- : vnode;
- }
- function setTransitionHooks(vnode, hooks) {
- if (vnode.shapeFlag & 6 /* ShapeFlags.COMPONENT */ && vnode.component) {
- setTransitionHooks(vnode.component.subTree, hooks);
- }
- else if (vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- vnode.ssContent.transition = hooks.clone(vnode.ssContent);
- vnode.ssFallback.transition = hooks.clone(vnode.ssFallback);
- }
- else {
- vnode.transition = hooks;
- }
- }
- function getTransitionRawChildren(children, keepComment = false, parentKey) {
- let ret = [];
- let keyedFragmentCount = 0;
- for (let i = 0; i < children.length; i++) {
- let child = children[i];
- // #5360 inherit parent key in case of <template v-for>
- const key = parentKey == null
- ? child.key
- : String(parentKey) + String(child.key != null ? child.key : i);
- // handle fragment children case, e.g. v-for
- if (child.type === Fragment) {
- if (child.patchFlag & 128 /* PatchFlags.KEYED_FRAGMENT */)
- keyedFragmentCount++;
- ret = ret.concat(getTransitionRawChildren(child.children, keepComment, key));
- }
- // comment placeholders should be skipped, e.g. v-if
- else if (keepComment || child.type !== Comment) {
- ret.push(key != null ? cloneVNode(child, { key }) : child);
- }
- }
- // #1126 if a transition children list contains multiple sub fragments, these
- // fragments will be merged into a flat children array. Since each v-for
- // fragment may contain different static bindings inside, we need to de-op
- // these children to force full diffs to ensure correct behavior.
- if (keyedFragmentCount > 1) {
- for (let i = 0; i < ret.length; i++) {
- ret[i].patchFlag = -2 /* PatchFlags.BAIL */;
- }
- }
- return ret;
- }
- // implementation, close to no-op
- function defineComponent(options) {
- return shared.isFunction(options) ? { setup: options, name: options.name } : options;
- }
- const isAsyncWrapper = (i) => !!i.type.__asyncLoader;
- function defineAsyncComponent(source) {
- if (shared.isFunction(source)) {
- source = { loader: source };
- }
- const { loader, loadingComponent, errorComponent, delay = 200, timeout, // undefined = never times out
- suspensible = true, onError: userOnError } = source;
- let pendingRequest = null;
- let resolvedComp;
- let retries = 0;
- const retry = () => {
- retries++;
- pendingRequest = null;
- return load();
- };
- const load = () => {
- let thisRequest;
- return (pendingRequest ||
- (thisRequest = pendingRequest =
- loader()
- .catch(err => {
- err = err instanceof Error ? err : new Error(String(err));
- if (userOnError) {
- return new Promise((resolve, reject) => {
- const userRetry = () => resolve(retry());
- const userFail = () => reject(err);
- userOnError(err, userRetry, userFail, retries + 1);
- });
- }
- else {
- throw err;
- }
- })
- .then((comp) => {
- if (thisRequest !== pendingRequest && pendingRequest) {
- return pendingRequest;
- }
- if (!comp) {
- warn(`Async component loader resolved to undefined. ` +
- `If you are using retry(), make sure to return its return value.`);
- }
- // interop module default
- if (comp &&
- (comp.__esModule || comp[Symbol.toStringTag] === 'Module')) {
- comp = comp.default;
- }
- if (comp && !shared.isObject(comp) && !shared.isFunction(comp)) {
- throw new Error(`Invalid async component load result: ${comp}`);
- }
- resolvedComp = comp;
- return comp;
- })));
- };
- return defineComponent({
- name: 'AsyncComponentWrapper',
- __asyncLoader: load,
- get __asyncResolved() {
- return resolvedComp;
- },
- setup() {
- const instance = currentInstance;
- // already resolved
- if (resolvedComp) {
- return () => createInnerComp(resolvedComp, instance);
- }
- const onError = (err) => {
- pendingRequest = null;
- handleError(err, instance, 13 /* ErrorCodes.ASYNC_COMPONENT_LOADER */, !errorComponent /* do not throw in dev if user provided error component */);
- };
- // suspense-controlled or SSR.
- if ((suspensible && instance.suspense) ||
- (isInSSRComponentSetup)) {
- return load()
- .then(comp => {
- return () => createInnerComp(comp, instance);
- })
- .catch(err => {
- onError(err);
- return () => errorComponent
- ? createVNode(errorComponent, {
- error: err
- })
- : null;
- });
- }
- const loaded = reactivity.ref(false);
- const error = reactivity.ref();
- const delayed = reactivity.ref(!!delay);
- if (delay) {
- setTimeout(() => {
- delayed.value = false;
- }, delay);
- }
- if (timeout != null) {
- setTimeout(() => {
- if (!loaded.value && !error.value) {
- const err = new Error(`Async component timed out after ${timeout}ms.`);
- onError(err);
- error.value = err;
- }
- }, timeout);
- }
- load()
- .then(() => {
- loaded.value = true;
- if (instance.parent && isKeepAlive(instance.parent.vnode)) {
- // parent is keep-alive, force update so the loaded component's
- // name is taken into account
- queueJob(instance.parent.update);
- }
- })
- .catch(err => {
- onError(err);
- error.value = err;
- });
- return () => {
- if (loaded.value && resolvedComp) {
- return createInnerComp(resolvedComp, instance);
- }
- else if (error.value && errorComponent) {
- return createVNode(errorComponent, {
- error: error.value
- });
- }
- else if (loadingComponent && !delayed.value) {
- return createVNode(loadingComponent);
- }
- };
- }
- });
- }
- function createInnerComp(comp, parent) {
- const { ref, props, children, ce } = parent.vnode;
- const vnode = createVNode(comp, props, children);
- // ensure inner component inherits the async wrapper's ref owner
- vnode.ref = ref;
- // pass the custom element callback on to the inner comp
- // and remove it from the async wrapper
- vnode.ce = ce;
- delete parent.vnode.ce;
- return vnode;
- }
- const isKeepAlive = (vnode) => vnode.type.__isKeepAlive;
- const KeepAliveImpl = {
- name: `KeepAlive`,
- // Marker for special handling inside the renderer. We are not using a ===
- // check directly on KeepAlive in the renderer, because importing it directly
- // would prevent it from being tree-shaken.
- __isKeepAlive: true,
- props: {
- include: [String, RegExp, Array],
- exclude: [String, RegExp, Array],
- max: [String, Number]
- },
- setup(props, { slots }) {
- const instance = getCurrentInstance();
- // KeepAlive communicates with the instantiated renderer via the
- // ctx where the renderer passes in its internals,
- // and the KeepAlive instance exposes activate/deactivate implementations.
- // The whole point of this is to avoid importing KeepAlive directly in the
- // renderer to facilitate tree-shaking.
- const sharedContext = instance.ctx;
- // if the internal renderer is not registered, it indicates that this is server-side rendering,
- // for KeepAlive, we just need to render its children
- if (!sharedContext.renderer) {
- return () => {
- const children = slots.default && slots.default();
- return children && children.length === 1 ? children[0] : children;
- };
- }
- const cache = new Map();
- const keys = new Set();
- let current = null;
- {
- instance.__v_cache = cache;
- }
- const parentSuspense = instance.suspense;
- const { renderer: { p: patch, m: move, um: _unmount, o: { createElement } } } = sharedContext;
- const storageContainer = createElement('div');
- sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
- const instance = vnode.component;
- move(vnode, container, anchor, 0 /* MoveType.ENTER */, parentSuspense);
- // in case props have changed
- patch(instance.vnode, vnode, container, anchor, instance, parentSuspense, isSVG, vnode.slotScopeIds, optimized);
- queuePostRenderEffect(() => {
- instance.isDeactivated = false;
- if (instance.a) {
- shared.invokeArrayFns(instance.a);
- }
- const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
- if (vnodeHook) {
- invokeVNodeHook(vnodeHook, instance.parent, vnode);
- }
- }, parentSuspense);
- {
- // Update components tree
- devtoolsComponentAdded(instance);
- }
- };
- sharedContext.deactivate = (vnode) => {
- const instance = vnode.component;
- move(vnode, storageContainer, null, 1 /* MoveType.LEAVE */, parentSuspense);
- queuePostRenderEffect(() => {
- if (instance.da) {
- shared.invokeArrayFns(instance.da);
- }
- const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
- if (vnodeHook) {
- invokeVNodeHook(vnodeHook, instance.parent, vnode);
- }
- instance.isDeactivated = true;
- }, parentSuspense);
- {
- // Update components tree
- devtoolsComponentAdded(instance);
- }
- };
- function unmount(vnode) {
- // reset the shapeFlag so it can be properly unmounted
- resetShapeFlag(vnode);
- _unmount(vnode, instance, parentSuspense, true);
- }
- function pruneCache(filter) {
- cache.forEach((vnode, key) => {
- const name = getComponentName(vnode.type);
- if (name && (!filter || !filter(name))) {
- pruneCacheEntry(key);
- }
- });
- }
- function pruneCacheEntry(key) {
- const cached = cache.get(key);
- if (!current || cached.type !== current.type) {
- unmount(cached);
- }
- else if (current) {
- // current active instance should no longer be kept-alive.
- // we can't unmount it now but it might be later, so reset its flag now.
- resetShapeFlag(current);
- }
- cache.delete(key);
- keys.delete(key);
- }
- // prune cache on include/exclude prop change
- watch(() => [props.include, props.exclude], ([include, exclude]) => {
- include && pruneCache(name => matches(include, name));
- exclude && pruneCache(name => !matches(exclude, name));
- },
- // prune post-render after `current` has been updated
- { flush: 'post', deep: true });
- // cache sub tree after render
- let pendingCacheKey = null;
- const cacheSubtree = () => {
- // fix #1621, the pendingCacheKey could be 0
- if (pendingCacheKey != null) {
- cache.set(pendingCacheKey, getInnerChild(instance.subTree));
- }
- };
- onMounted(cacheSubtree);
- onUpdated(cacheSubtree);
- onBeforeUnmount(() => {
- cache.forEach(cached => {
- const { subTree, suspense } = instance;
- const vnode = getInnerChild(subTree);
- if (cached.type === vnode.type) {
- // current instance will be unmounted as part of keep-alive's unmount
- resetShapeFlag(vnode);
- // but invoke its deactivated hook here
- const da = vnode.component.da;
- da && queuePostRenderEffect(da, suspense);
- return;
- }
- unmount(cached);
- });
- });
- return () => {
- pendingCacheKey = null;
- if (!slots.default) {
- return null;
- }
- const children = slots.default();
- const rawVNode = children[0];
- if (children.length > 1) {
- {
- warn(`KeepAlive should contain exactly one component child.`);
- }
- current = null;
- return children;
- }
- else if (!isVNode(rawVNode) ||
- (!(rawVNode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */) &&
- !(rawVNode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */))) {
- current = null;
- return rawVNode;
- }
- let vnode = getInnerChild(rawVNode);
- const comp = vnode.type;
- // for async components, name check should be based in its loaded
- // inner component if available
- const name = getComponentName(isAsyncWrapper(vnode)
- ? vnode.type.__asyncResolved || {}
- : comp);
- const { include, exclude, max } = props;
- if ((include && (!name || !matches(include, name))) ||
- (exclude && name && matches(exclude, name))) {
- current = vnode;
- return rawVNode;
- }
- const key = vnode.key == null ? comp : vnode.key;
- const cachedVNode = cache.get(key);
- // clone vnode if it's reused because we are going to mutate it
- if (vnode.el) {
- vnode = cloneVNode(vnode);
- if (rawVNode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- rawVNode.ssContent = vnode;
- }
- }
- // #1513 it's possible for the returned vnode to be cloned due to attr
- // fallthrough or scopeId, so the vnode here may not be the final vnode
- // that is mounted. Instead of caching it directly, we store the pending
- // key and cache `instance.subTree` (the normalized vnode) in
- // beforeMount/beforeUpdate hooks.
- pendingCacheKey = key;
- if (cachedVNode) {
- // copy over mounted state
- vnode.el = cachedVNode.el;
- vnode.component = cachedVNode.component;
- if (vnode.transition) {
- // recursively update transition hooks on subTree
- setTransitionHooks(vnode, vnode.transition);
- }
- // avoid vnode being mounted as fresh
- vnode.shapeFlag |= 512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
- // make this key the freshest
- keys.delete(key);
- keys.add(key);
- }
- else {
- keys.add(key);
- // prune oldest entry
- if (max && keys.size > parseInt(max, 10)) {
- pruneCacheEntry(keys.values().next().value);
- }
- }
- // avoid vnode being unmounted
- vnode.shapeFlag |= 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
- current = vnode;
- return isSuspense(rawVNode.type) ? rawVNode : vnode;
- };
- }
- };
- // export the public type for h/tsx inference
- // also to avoid inline import() in generated d.ts files
- const KeepAlive = KeepAliveImpl;
- function matches(pattern, name) {
- if (shared.isArray(pattern)) {
- return pattern.some((p) => matches(p, name));
- }
- else if (shared.isString(pattern)) {
- return pattern.split(',').includes(name);
- }
- else if (pattern.test) {
- return pattern.test(name);
- }
- /* istanbul ignore next */
- return false;
- }
- function onActivated(hook, target) {
- registerKeepAliveHook(hook, "a" /* LifecycleHooks.ACTIVATED */, target);
- }
- function onDeactivated(hook, target) {
- registerKeepAliveHook(hook, "da" /* LifecycleHooks.DEACTIVATED */, target);
- }
- function registerKeepAliveHook(hook, type, target = currentInstance) {
- // cache the deactivate branch check wrapper for injected hooks so the same
- // hook can be properly deduped by the scheduler. "__wdc" stands for "with
- // deactivation check".
- const wrappedHook = hook.__wdc ||
- (hook.__wdc = () => {
- // only fire the hook if the target instance is NOT in a deactivated branch.
- let current = target;
- while (current) {
- if (current.isDeactivated) {
- return;
- }
- current = current.parent;
- }
- return hook();
- });
- injectHook(type, wrappedHook, target);
- // In addition to registering it on the target instance, we walk up the parent
- // chain and register it on all ancestor instances that are keep-alive roots.
- // This avoids the need to walk the entire component tree when invoking these
- // hooks, and more importantly, avoids the need to track child components in
- // arrays.
- if (target) {
- let current = target.parent;
- while (current && current.parent) {
- if (isKeepAlive(current.parent.vnode)) {
- injectToKeepAliveRoot(wrappedHook, type, target, current);
- }
- current = current.parent;
- }
- }
- }
- function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) {
- // injectHook wraps the original for error handling, so make sure to remove
- // the wrapped version.
- const injected = injectHook(type, hook, keepAliveRoot, true /* prepend */);
- onUnmounted(() => {
- shared.remove(keepAliveRoot[type], injected);
- }, target);
- }
- function resetShapeFlag(vnode) {
- // bitwise operations to remove keep alive flags
- vnode.shapeFlag &= ~256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
- vnode.shapeFlag &= ~512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
- }
- function getInnerChild(vnode) {
- return vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */ ? vnode.ssContent : vnode;
- }
- function injectHook(type, hook, target = currentInstance, prepend = false) {
- if (target) {
- const hooks = target[type] || (target[type] = []);
- // cache the error handling wrapper for injected hooks so the same hook
- // can be properly deduped by the scheduler. "__weh" stands for "with error
- // handling".
- const wrappedHook = hook.__weh ||
- (hook.__weh = (...args) => {
- if (target.isUnmounted) {
- return;
- }
- // disable tracking inside all lifecycle hooks
- // since they can potentially be called inside effects.
- reactivity.pauseTracking();
- // Set currentInstance during hook invocation.
- // This assumes the hook does not synchronously trigger other hooks, which
- // can only be false when the user does something really funky.
- setCurrentInstance(target);
- const res = callWithAsyncErrorHandling(hook, target, type, args);
- unsetCurrentInstance();
- reactivity.resetTracking();
- return res;
- });
- if (prepend) {
- hooks.unshift(wrappedHook);
- }
- else {
- hooks.push(wrappedHook);
- }
- return wrappedHook;
- }
- else {
- const apiName = shared.toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ''));
- warn(`${apiName} is called when there is no active component instance to be ` +
- `associated with. ` +
- `Lifecycle injection APIs can only be used during execution of setup().` +
- (` If you are using async setup(), make sure to register lifecycle ` +
- `hooks before the first await statement.`
- ));
- }
- }
- const createHook = (lifecycle) => (hook, target = currentInstance) =>
- // post-create lifecycle registrations are noops during SSR (except for serverPrefetch)
- (!isInSSRComponentSetup || lifecycle === "sp" /* LifecycleHooks.SERVER_PREFETCH */) &&
- injectHook(lifecycle, (...args) => hook(...args), target);
- const onBeforeMount = createHook("bm" /* LifecycleHooks.BEFORE_MOUNT */);
- const onMounted = createHook("m" /* LifecycleHooks.MOUNTED */);
- const onBeforeUpdate = createHook("bu" /* LifecycleHooks.BEFORE_UPDATE */);
- const onUpdated = createHook("u" /* LifecycleHooks.UPDATED */);
- const onBeforeUnmount = createHook("bum" /* LifecycleHooks.BEFORE_UNMOUNT */);
- const onUnmounted = createHook("um" /* LifecycleHooks.UNMOUNTED */);
- const onServerPrefetch = createHook("sp" /* LifecycleHooks.SERVER_PREFETCH */);
- const onRenderTriggered = createHook("rtg" /* LifecycleHooks.RENDER_TRIGGERED */);
- const onRenderTracked = createHook("rtc" /* LifecycleHooks.RENDER_TRACKED */);
- function onErrorCaptured(hook, target = currentInstance) {
- injectHook("ec" /* LifecycleHooks.ERROR_CAPTURED */, hook, target);
- }
- /**
- Runtime helper for applying directives to a vnode. Example usage:
- const comp = resolveComponent('comp')
- const foo = resolveDirective('foo')
- const bar = resolveDirective('bar')
- return withDirectives(h(comp), [
- [foo, this.x],
- [bar, this.y]
- ])
- */
- function validateDirectiveName(name) {
- if (shared.isBuiltInDirective(name)) {
- warn('Do not use built-in directive ids as custom directive id: ' + name);
- }
- }
- /**
- * Adds directives to a VNode.
- */
- function withDirectives(vnode, directives) {
- const internalInstance = currentRenderingInstance;
- if (internalInstance === null) {
- warn(`withDirectives can only be used inside render functions.`);
- return vnode;
- }
- const instance = getExposeProxy(internalInstance) ||
- internalInstance.proxy;
- const bindings = vnode.dirs || (vnode.dirs = []);
- for (let i = 0; i < directives.length; i++) {
- let [dir, value, arg, modifiers = shared.EMPTY_OBJ] = directives[i];
- if (dir) {
- if (shared.isFunction(dir)) {
- dir = {
- mounted: dir,
- updated: dir
- };
- }
- if (dir.deep) {
- traverse(value);
- }
- bindings.push({
- dir,
- instance,
- value,
- oldValue: void 0,
- arg,
- modifiers
- });
- }
- }
- return vnode;
- }
- function invokeDirectiveHook(vnode, prevVNode, instance, name) {
- const bindings = vnode.dirs;
- const oldBindings = prevVNode && prevVNode.dirs;
- for (let i = 0; i < bindings.length; i++) {
- const binding = bindings[i];
- if (oldBindings) {
- binding.oldValue = oldBindings[i].value;
- }
- let hook = binding.dir[name];
- if (hook) {
- // disable tracking inside all lifecycle hooks
- // since they can potentially be called inside effects.
- reactivity.pauseTracking();
- callWithAsyncErrorHandling(hook, instance, 8 /* ErrorCodes.DIRECTIVE_HOOK */, [
- vnode.el,
- binding,
- vnode,
- prevVNode
- ]);
- reactivity.resetTracking();
- }
- }
- }
- const COMPONENTS = 'components';
- const DIRECTIVES = 'directives';
- /**
- * @private
- */
- function resolveComponent(name, maybeSelfReference) {
- return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
- }
- const NULL_DYNAMIC_COMPONENT = Symbol();
- /**
- * @private
- */
- function resolveDynamicComponent(component) {
- if (shared.isString(component)) {
- return resolveAsset(COMPONENTS, component, false) || component;
- }
- else {
- // invalid types will fallthrough to createVNode and raise warning
- return (component || NULL_DYNAMIC_COMPONENT);
- }
- }
- /**
- * @private
- */
- function resolveDirective(name) {
- return resolveAsset(DIRECTIVES, name);
- }
- // implementation
- function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
- const instance = currentRenderingInstance || currentInstance;
- if (instance) {
- const Component = instance.type;
- // explicit self name has highest priority
- if (type === COMPONENTS) {
- const selfName = getComponentName(Component, false /* do not include inferred name to avoid breaking existing code */);
- if (selfName &&
- (selfName === name ||
- selfName === shared.camelize(name) ||
- selfName === shared.capitalize(shared.camelize(name)))) {
- return Component;
- }
- }
- const res =
- // local registration
- // check instance[type] first which is resolved for options API
- resolve(instance[type] || Component[type], name) ||
- // global registration
- resolve(instance.appContext[type], name);
- if (!res && maybeSelfReference) {
- // fallback to implicit self-reference
- return Component;
- }
- if (warnMissing && !res) {
- const extra = type === COMPONENTS
- ? `\nIf this is a native custom element, make sure to exclude it from ` +
- `component resolution via compilerOptions.isCustomElement.`
- : ``;
- warn(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
- }
- return res;
- }
- else {
- warn(`resolve${shared.capitalize(type.slice(0, -1))} ` +
- `can only be used in render() or setup().`);
- }
- }
- function resolve(registry, name) {
- return (registry &&
- (registry[name] ||
- registry[shared.camelize(name)] ||
- registry[shared.capitalize(shared.camelize(name))]));
- }
- /**
- * Actual implementation
- */
- function renderList(source, renderItem, cache, index) {
- let ret;
- const cached = (cache && cache[index]);
- if (shared.isArray(source) || shared.isString(source)) {
- ret = new Array(source.length);
- for (let i = 0, l = source.length; i < l; i++) {
- ret[i] = renderItem(source[i], i, undefined, cached && cached[i]);
- }
- }
- else if (typeof source === 'number') {
- if (!Number.isInteger(source)) {
- warn(`The v-for range expect an integer value but got ${source}.`);
- }
- ret = new Array(source);
- for (let i = 0; i < source; i++) {
- ret[i] = renderItem(i + 1, i, undefined, cached && cached[i]);
- }
- }
- else if (shared.isObject(source)) {
- if (source[Symbol.iterator]) {
- ret = Array.from(source, (item, i) => renderItem(item, i, undefined, cached && cached[i]));
- }
- else {
- const keys = Object.keys(source);
- ret = new Array(keys.length);
- for (let i = 0, l = keys.length; i < l; i++) {
- const key = keys[i];
- ret[i] = renderItem(source[key], key, i, cached && cached[i]);
- }
- }
- }
- else {
- ret = [];
- }
- if (cache) {
- cache[index] = ret;
- }
- return ret;
- }
- /**
- * Compiler runtime helper for creating dynamic slots object
- * @private
- */
- function createSlots(slots, dynamicSlots) {
- for (let i = 0; i < dynamicSlots.length; i++) {
- const slot = dynamicSlots[i];
- // array of dynamic slot generated by <template v-for="..." #[...]>
- if (shared.isArray(slot)) {
- for (let j = 0; j < slot.length; j++) {
- slots[slot[j].name] = slot[j].fn;
- }
- }
- else if (slot) {
- // conditional single slot generated by <template v-if="..." #foo>
- slots[slot.name] = slot.key
- ? (...args) => {
- const res = slot.fn(...args);
- // attach branch key so each conditional branch is considered a
- // different fragment
- if (res)
- res.key = slot.key;
- return res;
- }
- : slot.fn;
- }
- }
- return slots;
- }
- /**
- * Compiler runtime helper for rendering `<slot/>`
- * @private
- */
- function renderSlot(slots, name, props = {},
- // this is not a user-facing function, so the fallback is always generated by
- // the compiler and guaranteed to be a function returning an array
- fallback, noSlotted) {
- if (currentRenderingInstance.isCE ||
- (currentRenderingInstance.parent &&
- isAsyncWrapper(currentRenderingInstance.parent) &&
- currentRenderingInstance.parent.isCE)) {
- if (name !== 'default')
- props.name = name;
- return createVNode('slot', props, fallback && fallback());
- }
- let slot = slots[name];
- if (slot && slot.length > 1) {
- warn(`SSR-optimized slot function detected in a non-SSR-optimized render ` +
- `function. You need to mark this component with $dynamic-slots in the ` +
- `parent template.`);
- slot = () => [];
- }
- // a compiled slot disables block tracking by default to avoid manual
- // invocation interfering with template-based block tracking, but in
- // `renderSlot` we can be sure that it's template-based so we can force
- // enable it.
- if (slot && slot._c) {
- slot._d = false;
- }
- openBlock();
- const validSlotContent = slot && ensureValidVNode(slot(props));
- const rendered = createBlock(Fragment, {
- key: props.key ||
- // slot content array of a dynamic conditional slot may have a branch
- // key attached in the `createSlots` helper, respect that
- (validSlotContent && validSlotContent.key) ||
- `_${name}`
- }, validSlotContent || (fallback ? fallback() : []), validSlotContent && slots._ === 1 /* SlotFlags.STABLE */
- ? 64 /* PatchFlags.STABLE_FRAGMENT */
- : -2 /* PatchFlags.BAIL */);
- if (!noSlotted && rendered.scopeId) {
- rendered.slotScopeIds = [rendered.scopeId + '-s'];
- }
- if (slot && slot._c) {
- slot._d = true;
- }
- return rendered;
- }
- function ensureValidVNode(vnodes) {
- return vnodes.some(child => {
- if (!isVNode(child))
- return true;
- if (child.type === Comment)
- return false;
- if (child.type === Fragment &&
- !ensureValidVNode(child.children))
- return false;
- return true;
- })
- ? vnodes
- : null;
- }
- /**
- * For prefixing keys in v-on="obj" with "on"
- * @private
- */
- function toHandlers(obj, preserveCaseIfNecessary) {
- const ret = {};
- if (!shared.isObject(obj)) {
- warn(`v-on with no argument expects an object value.`);
- return ret;
- }
- for (const key in obj) {
- ret[preserveCaseIfNecessary && /[A-Z]/.test(key)
- ? `on:${key}`
- : shared.toHandlerKey(key)] = obj[key];
- }
- return ret;
- }
- /**
- * #2437 In Vue 3, functional components do not have a public instance proxy but
- * they exist in the internal parent chain. For code that relies on traversing
- * public $parent chains, skip functional ones and go to the parent instead.
- */
- const getPublicInstance = (i) => {
- if (!i)
- return null;
- if (isStatefulComponent(i))
- return getExposeProxy(i) || i.proxy;
- return getPublicInstance(i.parent);
- };
- const publicPropertiesMap =
- // Move PURE marker to new line to workaround compiler discarding it
- // due to type annotation
- /*#__PURE__*/ shared.extend(Object.create(null), {
- $: i => i,
- $el: i => i.vnode.el,
- $data: i => i.data,
- $props: i => (reactivity.shallowReadonly(i.props) ),
- $attrs: i => (reactivity.shallowReadonly(i.attrs) ),
- $slots: i => (reactivity.shallowReadonly(i.slots) ),
- $refs: i => (reactivity.shallowReadonly(i.refs) ),
- $parent: i => getPublicInstance(i.parent),
- $root: i => getPublicInstance(i.root),
- $emit: i => i.emit,
- $options: i => (resolveMergedOptions(i) ),
- $forceUpdate: i => i.f || (i.f = () => queueJob(i.update)),
- $nextTick: i => i.n || (i.n = nextTick.bind(i.proxy)),
- $watch: i => (instanceWatch.bind(i) )
- });
- const isReservedPrefix = (key) => key === '_' || key === '$';
- const hasSetupBinding = (state, key) => state !== shared.EMPTY_OBJ && !state.__isScriptSetup && shared.hasOwn(state, key);
- const PublicInstanceProxyHandlers = {
- get({ _: instance }, key) {
- const { ctx, setupState, data, props, accessCache, type, appContext } = instance;
- // for internal formatters to know that this is a Vue instance
- if (key === '__isVue') {
- return true;
- }
- // data / props / ctx
- // This getter gets called for every property access on the render context
- // during render and is a major hotspot. The most expensive part of this
- // is the multiple hasOwn() calls. It's much faster to do a simple property
- // access on a plain object, so we use an accessCache object (with null
- // prototype) to memoize what access type a key corresponds to.
- let normalizedProps;
- if (key[0] !== '$') {
- const n = accessCache[key];
- if (n !== undefined) {
- switch (n) {
- case 1 /* AccessTypes.SETUP */:
- return setupState[key];
- case 2 /* AccessTypes.DATA */:
- return data[key];
- case 4 /* AccessTypes.CONTEXT */:
- return ctx[key];
- case 3 /* AccessTypes.PROPS */:
- return props[key];
- // default: just fallthrough
- }
- }
- else if (hasSetupBinding(setupState, key)) {
- accessCache[key] = 1 /* AccessTypes.SETUP */;
- return setupState[key];
- }
- else if (data !== shared.EMPTY_OBJ && shared.hasOwn(data, key)) {
- accessCache[key] = 2 /* AccessTypes.DATA */;
- return data[key];
- }
- else if (
- // only cache other properties when instance has declared (thus stable)
- // props
- (normalizedProps = instance.propsOptions[0]) &&
- shared.hasOwn(normalizedProps, key)) {
- accessCache[key] = 3 /* AccessTypes.PROPS */;
- return props[key];
- }
- else if (ctx !== shared.EMPTY_OBJ && shared.hasOwn(ctx, key)) {
- accessCache[key] = 4 /* AccessTypes.CONTEXT */;
- return ctx[key];
- }
- else if (shouldCacheAccess) {
- accessCache[key] = 0 /* AccessTypes.OTHER */;
- }
- }
- const publicGetter = publicPropertiesMap[key];
- let cssModule, globalProperties;
- // public $xxx properties
- if (publicGetter) {
- if (key === '$attrs') {
- reactivity.track(instance, "get" /* TrackOpTypes.GET */, key);
- markAttrsAccessed();
- }
- return publicGetter(instance);
- }
- else if (
- // css module (injected by vue-loader)
- (cssModule = type.__cssModules) &&
- (cssModule = cssModule[key])) {
- return cssModule;
- }
- else if (ctx !== shared.EMPTY_OBJ && shared.hasOwn(ctx, key)) {
- // user may set custom properties to `this` that start with `$`
- accessCache[key] = 4 /* AccessTypes.CONTEXT */;
- return ctx[key];
- }
- else if (
- // global properties
- ((globalProperties = appContext.config.globalProperties),
- shared.hasOwn(globalProperties, key))) {
- {
- return globalProperties[key];
- }
- }
- else if (currentRenderingInstance &&
- (!shared.isString(key) ||
- // #1091 avoid internal isRef/isVNode checks on component instance leading
- // to infinite warning loop
- key.indexOf('__v') !== 0)) {
- if (data !== shared.EMPTY_OBJ && isReservedPrefix(key[0]) && shared.hasOwn(data, key)) {
- warn(`Property ${JSON.stringify(key)} must be accessed via $data because it starts with a reserved ` +
- `character ("$" or "_") and is not proxied on the render context.`);
- }
- else if (instance === currentRenderingInstance) {
- warn(`Property ${JSON.stringify(key)} was accessed during render ` +
- `but is not defined on instance.`);
- }
- }
- },
- set({ _: instance }, key, value) {
- const { data, setupState, ctx } = instance;
- if (hasSetupBinding(setupState, key)) {
- setupState[key] = value;
- return true;
- }
- else if (setupState.__isScriptSetup &&
- shared.hasOwn(setupState, key)) {
- warn(`Cannot mutate <script setup> binding "${key}" from Options API.`);
- return false;
- }
- else if (data !== shared.EMPTY_OBJ && shared.hasOwn(data, key)) {
- data[key] = value;
- return true;
- }
- else if (shared.hasOwn(instance.props, key)) {
- warn(`Attempting to mutate prop "${key}". Props are readonly.`);
- return false;
- }
- if (key[0] === '$' && key.slice(1) in instance) {
- warn(`Attempting to mutate public property "${key}". ` +
- `Properties starting with $ are reserved and readonly.`);
- return false;
- }
- else {
- if (key in instance.appContext.config.globalProperties) {
- Object.defineProperty(ctx, key, {
- enumerable: true,
- configurable: true,
- value
- });
- }
- else {
- ctx[key] = value;
- }
- }
- return true;
- },
- has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) {
- let normalizedProps;
- return (!!accessCache[key] ||
- (data !== shared.EMPTY_OBJ && shared.hasOwn(data, key)) ||
- hasSetupBinding(setupState, key) ||
- ((normalizedProps = propsOptions[0]) && shared.hasOwn(normalizedProps, key)) ||
- shared.hasOwn(ctx, key) ||
- shared.hasOwn(publicPropertiesMap, key) ||
- shared.hasOwn(appContext.config.globalProperties, key));
- },
- defineProperty(target, key, descriptor) {
- if (descriptor.get != null) {
- // invalidate key cache of a getter based property #5417
- target._.accessCache[key] = 0;
- }
- else if (shared.hasOwn(descriptor, 'value')) {
- this.set(target, key, descriptor.value, null);
- }
- return Reflect.defineProperty(target, key, descriptor);
- }
- };
- {
- PublicInstanceProxyHandlers.ownKeys = (target) => {
- warn(`Avoid app logic that relies on enumerating keys on a component instance. ` +
- `The keys will be empty in production mode to avoid performance overhead.`);
- return Reflect.ownKeys(target);
- };
- }
- const RuntimeCompiledPublicInstanceProxyHandlers = /*#__PURE__*/ shared.extend({}, PublicInstanceProxyHandlers, {
- get(target, key) {
- // fast path for unscopables when using `with` block
- if (key === Symbol.unscopables) {
- return;
- }
- return PublicInstanceProxyHandlers.get(target, key, target);
- },
- has(_, key) {
- const has = key[0] !== '_' && !shared.isGloballyWhitelisted(key);
- if (!has && PublicInstanceProxyHandlers.has(_, key)) {
- warn(`Property ${JSON.stringify(key)} should not start with _ which is a reserved prefix for Vue internals.`);
- }
- return has;
- }
- });
- // dev only
- // In dev mode, the proxy target exposes the same properties as seen on `this`
- // for easier console inspection. In prod mode it will be an empty object so
- // these properties definitions can be skipped.
- function createDevRenderContext(instance) {
- const target = {};
- // expose internal instance for proxy handlers
- Object.defineProperty(target, `_`, {
- configurable: true,
- enumerable: false,
- get: () => instance
- });
- // expose public properties
- Object.keys(publicPropertiesMap).forEach(key => {
- Object.defineProperty(target, key, {
- configurable: true,
- enumerable: false,
- get: () => publicPropertiesMap[key](instance),
- // intercepted by the proxy so no need for implementation,
- // but needed to prevent set errors
- set: shared.NOOP
- });
- });
- return target;
- }
- // dev only
- function exposePropsOnRenderContext(instance) {
- const { ctx, propsOptions: [propsOptions] } = instance;
- if (propsOptions) {
- Object.keys(propsOptions).forEach(key => {
- Object.defineProperty(ctx, key, {
- enumerable: true,
- configurable: true,
- get: () => instance.props[key],
- set: shared.NOOP
- });
- });
- }
- }
- // dev only
- function exposeSetupStateOnRenderContext(instance) {
- const { ctx, setupState } = instance;
- Object.keys(reactivity.toRaw(setupState)).forEach(key => {
- if (!setupState.__isScriptSetup) {
- if (isReservedPrefix(key[0])) {
- warn(`setup() return property ${JSON.stringify(key)} should not start with "$" or "_" ` +
- `which are reserved prefixes for Vue internals.`);
- return;
- }
- Object.defineProperty(ctx, key, {
- enumerable: true,
- configurable: true,
- get: () => setupState[key],
- set: shared.NOOP
- });
- }
- });
- }
- function createDuplicateChecker() {
- const cache = Object.create(null);
- return (type, key) => {
- if (cache[key]) {
- warn(`${type} property "${key}" is already defined in ${cache[key]}.`);
- }
- else {
- cache[key] = type;
- }
- };
- }
- let shouldCacheAccess = true;
- function applyOptions(instance) {
- const options = resolveMergedOptions(instance);
- const publicThis = instance.proxy;
- const ctx = instance.ctx;
- // do not cache property access on public proxy during state initialization
- shouldCacheAccess = false;
- // call beforeCreate first before accessing other options since
- // the hook may mutate resolved options (#2791)
- if (options.beforeCreate) {
- callHook(options.beforeCreate, instance, "bc" /* LifecycleHooks.BEFORE_CREATE */);
- }
- const {
- // state
- data: dataOptions, computed: computedOptions, methods, watch: watchOptions, provide: provideOptions, inject: injectOptions,
- // lifecycle
- created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, beforeUnmount, destroyed, unmounted, render, renderTracked, renderTriggered, errorCaptured, serverPrefetch,
- // public API
- expose, inheritAttrs,
- // assets
- components, directives, filters } = options;
- const checkDuplicateProperties = createDuplicateChecker() ;
- {
- const [propsOptions] = instance.propsOptions;
- if (propsOptions) {
- for (const key in propsOptions) {
- checkDuplicateProperties("Props" /* OptionTypes.PROPS */, key);
- }
- }
- }
- // options initialization order (to be consistent with Vue 2):
- // - props (already done outside of this function)
- // - inject
- // - methods
- // - data (deferred since it relies on `this` access)
- // - computed
- // - watch (deferred since it relies on `this` access)
- if (injectOptions) {
- resolveInjections(injectOptions, ctx, checkDuplicateProperties, instance.appContext.config.unwrapInjectedRef);
- }
- if (methods) {
- for (const key in methods) {
- const methodHandler = methods[key];
- if (shared.isFunction(methodHandler)) {
- // In dev mode, we use the `createRenderContext` function to define
- // methods to the proxy target, and those are read-only but
- // reconfigurable, so it needs to be redefined here
- {
- Object.defineProperty(ctx, key, {
- value: methodHandler.bind(publicThis),
- configurable: true,
- enumerable: true,
- writable: true
- });
- }
- {
- checkDuplicateProperties("Methods" /* OptionTypes.METHODS */, key);
- }
- }
- else {
- warn(`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
- `Did you reference the function correctly?`);
- }
- }
- }
- if (dataOptions) {
- if (!shared.isFunction(dataOptions)) {
- warn(`The data option must be a function. ` +
- `Plain object usage is no longer supported.`);
- }
- const data = dataOptions.call(publicThis, publicThis);
- if (shared.isPromise(data)) {
- warn(`data() returned a Promise - note data() cannot be async; If you ` +
- `intend to perform data fetching before component renders, use ` +
- `async setup() + <Suspense>.`);
- }
- if (!shared.isObject(data)) {
- warn(`data() should return an object.`);
- }
- else {
- instance.data = reactivity.reactive(data);
- {
- for (const key in data) {
- checkDuplicateProperties("Data" /* OptionTypes.DATA */, key);
- // expose data on ctx during dev
- if (!isReservedPrefix(key[0])) {
- Object.defineProperty(ctx, key, {
- configurable: true,
- enumerable: true,
- get: () => data[key],
- set: shared.NOOP
- });
- }
- }
- }
- }
- }
- // state initialization complete at this point - start caching access
- shouldCacheAccess = true;
- if (computedOptions) {
- for (const key in computedOptions) {
- const opt = computedOptions[key];
- const get = shared.isFunction(opt)
- ? opt.bind(publicThis, publicThis)
- : shared.isFunction(opt.get)
- ? opt.get.bind(publicThis, publicThis)
- : shared.NOOP;
- if (get === shared.NOOP) {
- warn(`Computed property "${key}" has no getter.`);
- }
- const set = !shared.isFunction(opt) && shared.isFunction(opt.set)
- ? opt.set.bind(publicThis)
- : () => {
- warn(`Write operation failed: computed property "${key}" is readonly.`);
- }
- ;
- const c = computed({
- get,
- set
- });
- Object.defineProperty(ctx, key, {
- enumerable: true,
- configurable: true,
- get: () => c.value,
- set: v => (c.value = v)
- });
- {
- checkDuplicateProperties("Computed" /* OptionTypes.COMPUTED */, key);
- }
- }
- }
- if (watchOptions) {
- for (const key in watchOptions) {
- createWatcher(watchOptions[key], ctx, publicThis, key);
- }
- }
- if (provideOptions) {
- const provides = shared.isFunction(provideOptions)
- ? provideOptions.call(publicThis)
- : provideOptions;
- Reflect.ownKeys(provides).forEach(key => {
- provide(key, provides[key]);
- });
- }
- if (created) {
- callHook(created, instance, "c" /* LifecycleHooks.CREATED */);
- }
- function registerLifecycleHook(register, hook) {
- if (shared.isArray(hook)) {
- hook.forEach(_hook => register(_hook.bind(publicThis)));
- }
- else if (hook) {
- register(hook.bind(publicThis));
- }
- }
- registerLifecycleHook(onBeforeMount, beforeMount);
- registerLifecycleHook(onMounted, mounted);
- registerLifecycleHook(onBeforeUpdate, beforeUpdate);
- registerLifecycleHook(onUpdated, updated);
- registerLifecycleHook(onActivated, activated);
- registerLifecycleHook(onDeactivated, deactivated);
- registerLifecycleHook(onErrorCaptured, errorCaptured);
- registerLifecycleHook(onRenderTracked, renderTracked);
- registerLifecycleHook(onRenderTriggered, renderTriggered);
- registerLifecycleHook(onBeforeUnmount, beforeUnmount);
- registerLifecycleHook(onUnmounted, unmounted);
- registerLifecycleHook(onServerPrefetch, serverPrefetch);
- if (shared.isArray(expose)) {
- if (expose.length) {
- const exposed = instance.exposed || (instance.exposed = {});
- expose.forEach(key => {
- Object.defineProperty(exposed, key, {
- get: () => publicThis[key],
- set: val => (publicThis[key] = val)
- });
- });
- }
- else if (!instance.exposed) {
- instance.exposed = {};
- }
- }
- // options that are handled when creating the instance but also need to be
- // applied from mixins
- if (render && instance.render === shared.NOOP) {
- instance.render = render;
- }
- if (inheritAttrs != null) {
- instance.inheritAttrs = inheritAttrs;
- }
- // asset options.
- if (components)
- instance.components = components;
- if (directives)
- instance.directives = directives;
- }
- function resolveInjections(injectOptions, ctx, checkDuplicateProperties = shared.NOOP, unwrapRef = false) {
- if (shared.isArray(injectOptions)) {
- injectOptions = normalizeInject(injectOptions);
- }
- for (const key in injectOptions) {
- const opt = injectOptions[key];
- let injected;
- if (shared.isObject(opt)) {
- if ('default' in opt) {
- injected = inject(opt.from || key, opt.default, true /* treat default function as factory */);
- }
- else {
- injected = inject(opt.from || key);
- }
- }
- else {
- injected = inject(opt);
- }
- if (reactivity.isRef(injected)) {
- // TODO remove the check in 3.3
- if (unwrapRef) {
- Object.defineProperty(ctx, key, {
- enumerable: true,
- configurable: true,
- get: () => injected.value,
- set: v => (injected.value = v)
- });
- }
- else {
- {
- warn(`injected property "${key}" is a ref and will be auto-unwrapped ` +
- `and no longer needs \`.value\` in the next minor release. ` +
- `To opt-in to the new behavior now, ` +
- `set \`app.config.unwrapInjectedRef = true\` (this config is ` +
- `temporary and will not be needed in the future.)`);
- }
- ctx[key] = injected;
- }
- }
- else {
- ctx[key] = injected;
- }
- {
- checkDuplicateProperties("Inject" /* OptionTypes.INJECT */, key);
- }
- }
- }
- function callHook(hook, instance, type) {
- callWithAsyncErrorHandling(shared.isArray(hook)
- ? hook.map(h => h.bind(instance.proxy))
- : hook.bind(instance.proxy), instance, type);
- }
- function createWatcher(raw, ctx, publicThis, key) {
- const getter = key.includes('.')
- ? createPathGetter(publicThis, key)
- : () => publicThis[key];
- if (shared.isString(raw)) {
- const handler = ctx[raw];
- if (shared.isFunction(handler)) {
- watch(getter, handler);
- }
- else {
- warn(`Invalid watch handler specified by key "${raw}"`, handler);
- }
- }
- else if (shared.isFunction(raw)) {
- watch(getter, raw.bind(publicThis));
- }
- else if (shared.isObject(raw)) {
- if (shared.isArray(raw)) {
- raw.forEach(r => createWatcher(r, ctx, publicThis, key));
- }
- else {
- const handler = shared.isFunction(raw.handler)
- ? raw.handler.bind(publicThis)
- : ctx[raw.handler];
- if (shared.isFunction(handler)) {
- watch(getter, handler, raw);
- }
- else {
- warn(`Invalid watch handler specified by key "${raw.handler}"`, handler);
- }
- }
- }
- else {
- warn(`Invalid watch option: "${key}"`, raw);
- }
- }
- /**
- * Resolve merged options and cache it on the component.
- * This is done only once per-component since the merging does not involve
- * instances.
- */
- function resolveMergedOptions(instance) {
- const base = instance.type;
- const { mixins, extends: extendsOptions } = base;
- const { mixins: globalMixins, optionsCache: cache, config: { optionMergeStrategies } } = instance.appContext;
- const cached = cache.get(base);
- let resolved;
- if (cached) {
- resolved = cached;
- }
- else if (!globalMixins.length && !mixins && !extendsOptions) {
- {
- resolved = base;
- }
- }
- else {
- resolved = {};
- if (globalMixins.length) {
- globalMixins.forEach(m => mergeOptions(resolved, m, optionMergeStrategies, true));
- }
- mergeOptions(resolved, base, optionMergeStrategies);
- }
- if (shared.isObject(base)) {
- cache.set(base, resolved);
- }
- return resolved;
- }
- function mergeOptions(to, from, strats, asMixin = false) {
- const { mixins, extends: extendsOptions } = from;
- if (extendsOptions) {
- mergeOptions(to, extendsOptions, strats, true);
- }
- if (mixins) {
- mixins.forEach((m) => mergeOptions(to, m, strats, true));
- }
- for (const key in from) {
- if (asMixin && key === 'expose') {
- warn(`"expose" option is ignored when declared in mixins or extends. ` +
- `It should only be declared in the base component itself.`);
- }
- else {
- const strat = internalOptionMergeStrats[key] || (strats && strats[key]);
- to[key] = strat ? strat(to[key], from[key]) : from[key];
- }
- }
- return to;
- }
- const internalOptionMergeStrats = {
- data: mergeDataFn,
- props: mergeObjectOptions,
- emits: mergeObjectOptions,
- // objects
- methods: mergeObjectOptions,
- computed: mergeObjectOptions,
- // lifecycle
- beforeCreate: mergeAsArray,
- created: mergeAsArray,
- beforeMount: mergeAsArray,
- mounted: mergeAsArray,
- beforeUpdate: mergeAsArray,
- updated: mergeAsArray,
- beforeDestroy: mergeAsArray,
- beforeUnmount: mergeAsArray,
- destroyed: mergeAsArray,
- unmounted: mergeAsArray,
- activated: mergeAsArray,
- deactivated: mergeAsArray,
- errorCaptured: mergeAsArray,
- serverPrefetch: mergeAsArray,
- // assets
- components: mergeObjectOptions,
- directives: mergeObjectOptions,
- // watch
- watch: mergeWatchOptions,
- // provide / inject
- provide: mergeDataFn,
- inject: mergeInject
- };
- function mergeDataFn(to, from) {
- if (!from) {
- return to;
- }
- if (!to) {
- return from;
- }
- return function mergedDataFn() {
- return (shared.extend)(shared.isFunction(to) ? to.call(this, this) : to, shared.isFunction(from) ? from.call(this, this) : from);
- };
- }
- function mergeInject(to, from) {
- return mergeObjectOptions(normalizeInject(to), normalizeInject(from));
- }
- function normalizeInject(raw) {
- if (shared.isArray(raw)) {
- const res = {};
- for (let i = 0; i < raw.length; i++) {
- res[raw[i]] = raw[i];
- }
- return res;
- }
- return raw;
- }
- function mergeAsArray(to, from) {
- return to ? [...new Set([].concat(to, from))] : from;
- }
- function mergeObjectOptions(to, from) {
- return to ? shared.extend(shared.extend(Object.create(null), to), from) : from;
- }
- function mergeWatchOptions(to, from) {
- if (!to)
- return from;
- if (!from)
- return to;
- const merged = shared.extend(Object.create(null), to);
- for (const key in from) {
- merged[key] = mergeAsArray(to[key], from[key]);
- }
- return merged;
- }
- function initProps(instance, rawProps, isStateful, // result of bitwise flag comparison
- isSSR = false) {
- const props = {};
- const attrs = {};
- shared.def(attrs, InternalObjectKey, 1);
- instance.propsDefaults = Object.create(null);
- setFullProps(instance, rawProps, props, attrs);
- // ensure all declared prop keys are present
- for (const key in instance.propsOptions[0]) {
- if (!(key in props)) {
- props[key] = undefined;
- }
- }
- // validation
- {
- validateProps(rawProps || {}, props, instance);
- }
- if (isStateful) {
- // stateful
- instance.props = isSSR ? props : reactivity.shallowReactive(props);
- }
- else {
- if (!instance.type.props) {
- // functional w/ optional props, props === attrs
- instance.props = attrs;
- }
- else {
- // functional w/ declared props
- instance.props = props;
- }
- }
- instance.attrs = attrs;
- }
- function isInHmrContext(instance) {
- while (instance) {
- if (instance.type.__hmrId)
- return true;
- instance = instance.parent;
- }
- }
- function updateProps(instance, rawProps, rawPrevProps, optimized) {
- const { props, attrs, vnode: { patchFlag } } = instance;
- const rawCurrentProps = reactivity.toRaw(props);
- const [options] = instance.propsOptions;
- let hasAttrsChanged = false;
- if (
- // always force full diff in dev
- // - #1942 if hmr is enabled with sfc component
- // - vite#872 non-sfc component used by sfc component
- !(isInHmrContext(instance)) &&
- (optimized || patchFlag > 0) &&
- !(patchFlag & 16 /* PatchFlags.FULL_PROPS */)) {
- if (patchFlag & 8 /* PatchFlags.PROPS */) {
- // Compiler-generated props & no keys change, just set the updated
- // the props.
- const propsToUpdate = instance.vnode.dynamicProps;
- for (let i = 0; i < propsToUpdate.length; i++) {
- let key = propsToUpdate[i];
- // skip if the prop key is a declared emit event listener
- if (isEmitListener(instance.emitsOptions, key)) {
- continue;
- }
- // PROPS flag guarantees rawProps to be non-null
- const value = rawProps[key];
- if (options) {
- // attr / props separation was done on init and will be consistent
- // in this code path, so just check if attrs have it.
- if (shared.hasOwn(attrs, key)) {
- if (value !== attrs[key]) {
- attrs[key] = value;
- hasAttrsChanged = true;
- }
- }
- else {
- const camelizedKey = shared.camelize(key);
- props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance, false /* isAbsent */);
- }
- }
- else {
- if (value !== attrs[key]) {
- attrs[key] = value;
- hasAttrsChanged = true;
- }
- }
- }
- }
- }
- else {
- // full props update.
- if (setFullProps(instance, rawProps, props, attrs)) {
- hasAttrsChanged = true;
- }
- // in case of dynamic props, check if we need to delete keys from
- // the props object
- let kebabKey;
- for (const key in rawCurrentProps) {
- if (!rawProps ||
- // for camelCase
- (!shared.hasOwn(rawProps, key) &&
- // it's possible the original props was passed in as kebab-case
- // and converted to camelCase (#955)
- ((kebabKey = shared.hyphenate(key)) === key || !shared.hasOwn(rawProps, kebabKey)))) {
- if (options) {
- if (rawPrevProps &&
- // for camelCase
- (rawPrevProps[key] !== undefined ||
- // for kebab-case
- rawPrevProps[kebabKey] !== undefined)) {
- props[key] = resolvePropValue(options, rawCurrentProps, key, undefined, instance, true /* isAbsent */);
- }
- }
- else {
- delete props[key];
- }
- }
- }
- // in the case of functional component w/o props declaration, props and
- // attrs point to the same object so it should already have been updated.
- if (attrs !== rawCurrentProps) {
- for (const key in attrs) {
- if (!rawProps ||
- (!shared.hasOwn(rawProps, key) &&
- (!false ))) {
- delete attrs[key];
- hasAttrsChanged = true;
- }
- }
- }
- }
- // trigger updates for $attrs in case it's used in component slots
- if (hasAttrsChanged) {
- reactivity.trigger(instance, "set" /* TriggerOpTypes.SET */, '$attrs');
- }
- {
- validateProps(rawProps || {}, props, instance);
- }
- }
- function setFullProps(instance, rawProps, props, attrs) {
- const [options, needCastKeys] = instance.propsOptions;
- let hasAttrsChanged = false;
- let rawCastValues;
- if (rawProps) {
- for (let key in rawProps) {
- // key, ref are reserved and never passed down
- if (shared.isReservedProp(key)) {
- continue;
- }
- const value = rawProps[key];
- // prop option names are camelized during normalization, so to support
- // kebab -> camel conversion here we need to camelize the key.
- let camelKey;
- if (options && shared.hasOwn(options, (camelKey = shared.camelize(key)))) {
- if (!needCastKeys || !needCastKeys.includes(camelKey)) {
- props[camelKey] = value;
- }
- else {
- (rawCastValues || (rawCastValues = {}))[camelKey] = value;
- }
- }
- else if (!isEmitListener(instance.emitsOptions, key)) {
- if (!(key in attrs) || value !== attrs[key]) {
- attrs[key] = value;
- hasAttrsChanged = true;
- }
- }
- }
- }
- if (needCastKeys) {
- const rawCurrentProps = reactivity.toRaw(props);
- const castValues = rawCastValues || shared.EMPTY_OBJ;
- for (let i = 0; i < needCastKeys.length; i++) {
- const key = needCastKeys[i];
- props[key] = resolvePropValue(options, rawCurrentProps, key, castValues[key], instance, !shared.hasOwn(castValues, key));
- }
- }
- return hasAttrsChanged;
- }
- function resolvePropValue(options, props, key, value, instance, isAbsent) {
- const opt = options[key];
- if (opt != null) {
- const hasDefault = shared.hasOwn(opt, 'default');
- // default values
- if (hasDefault && value === undefined) {
- const defaultValue = opt.default;
- if (opt.type !== Function && shared.isFunction(defaultValue)) {
- const { propsDefaults } = instance;
- if (key in propsDefaults) {
- value = propsDefaults[key];
- }
- else {
- setCurrentInstance(instance);
- value = propsDefaults[key] = defaultValue.call(null, props);
- unsetCurrentInstance();
- }
- }
- else {
- value = defaultValue;
- }
- }
- // boolean casting
- if (opt[0 /* BooleanFlags.shouldCast */]) {
- if (isAbsent && !hasDefault) {
- value = false;
- }
- else if (opt[1 /* BooleanFlags.shouldCastTrue */] &&
- (value === '' || value === shared.hyphenate(key))) {
- value = true;
- }
- }
- }
- return value;
- }
- function normalizePropsOptions(comp, appContext, asMixin = false) {
- const cache = appContext.propsCache;
- const cached = cache.get(comp);
- if (cached) {
- return cached;
- }
- const raw = comp.props;
- const normalized = {};
- const needCastKeys = [];
- // apply mixin/extends props
- let hasExtends = false;
- if (!shared.isFunction(comp)) {
- const extendProps = (raw) => {
- hasExtends = true;
- const [props, keys] = normalizePropsOptions(raw, appContext, true);
- shared.extend(normalized, props);
- if (keys)
- needCastKeys.push(...keys);
- };
- if (!asMixin && appContext.mixins.length) {
- appContext.mixins.forEach(extendProps);
- }
- if (comp.extends) {
- extendProps(comp.extends);
- }
- if (comp.mixins) {
- comp.mixins.forEach(extendProps);
- }
- }
- if (!raw && !hasExtends) {
- if (shared.isObject(comp)) {
- cache.set(comp, shared.EMPTY_ARR);
- }
- return shared.EMPTY_ARR;
- }
- if (shared.isArray(raw)) {
- for (let i = 0; i < raw.length; i++) {
- if (!shared.isString(raw[i])) {
- warn(`props must be strings when using array syntax.`, raw[i]);
- }
- const normalizedKey = shared.camelize(raw[i]);
- if (validatePropName(normalizedKey)) {
- normalized[normalizedKey] = shared.EMPTY_OBJ;
- }
- }
- }
- else if (raw) {
- if (!shared.isObject(raw)) {
- warn(`invalid props options`, raw);
- }
- for (const key in raw) {
- const normalizedKey = shared.camelize(key);
- if (validatePropName(normalizedKey)) {
- const opt = raw[key];
- const prop = (normalized[normalizedKey] =
- shared.isArray(opt) || shared.isFunction(opt) ? { type: opt } : { ...opt });
- if (prop) {
- const booleanIndex = getTypeIndex(Boolean, prop.type);
- const stringIndex = getTypeIndex(String, prop.type);
- prop[0 /* BooleanFlags.shouldCast */] = booleanIndex > -1;
- prop[1 /* BooleanFlags.shouldCastTrue */] =
- stringIndex < 0 || booleanIndex < stringIndex;
- // if the prop needs boolean casting or default value
- if (booleanIndex > -1 || shared.hasOwn(prop, 'default')) {
- needCastKeys.push(normalizedKey);
- }
- }
- }
- }
- }
- const res = [normalized, needCastKeys];
- if (shared.isObject(comp)) {
- cache.set(comp, res);
- }
- return res;
- }
- function validatePropName(key) {
- if (key[0] !== '$') {
- return true;
- }
- else {
- warn(`Invalid prop name: "${key}" is a reserved property.`);
- }
- return false;
- }
- // use function string name to check type constructors
- // so that it works across vms / iframes.
- function getType(ctor) {
- const match = ctor && ctor.toString().match(/^\s*function (\w+)/);
- return match ? match[1] : ctor === null ? 'null' : '';
- }
- function isSameType(a, b) {
- return getType(a) === getType(b);
- }
- function getTypeIndex(type, expectedTypes) {
- if (shared.isArray(expectedTypes)) {
- return expectedTypes.findIndex(t => isSameType(t, type));
- }
- else if (shared.isFunction(expectedTypes)) {
- return isSameType(expectedTypes, type) ? 0 : -1;
- }
- return -1;
- }
- /**
- * dev only
- */
- function validateProps(rawProps, props, instance) {
- const resolvedValues = reactivity.toRaw(props);
- const options = instance.propsOptions[0];
- for (const key in options) {
- let opt = options[key];
- if (opt == null)
- continue;
- validateProp(key, resolvedValues[key], opt, !shared.hasOwn(rawProps, key) && !shared.hasOwn(rawProps, shared.hyphenate(key)));
- }
- }
- /**
- * dev only
- */
- function validateProp(name, value, prop, isAbsent) {
- const { type, required, validator } = prop;
- // required!
- if (required && isAbsent) {
- warn('Missing required prop: "' + name + '"');
- return;
- }
- // missing but optional
- if (value == null && !prop.required) {
- return;
- }
- // type check
- if (type != null && type !== true) {
- let isValid = false;
- const types = shared.isArray(type) ? type : [type];
- const expectedTypes = [];
- // value is valid as long as one of the specified types match
- for (let i = 0; i < types.length && !isValid; i++) {
- const { valid, expectedType } = assertType(value, types[i]);
- expectedTypes.push(expectedType || '');
- isValid = valid;
- }
- if (!isValid) {
- warn(getInvalidTypeMessage(name, value, expectedTypes));
- return;
- }
- }
- // custom validator
- if (validator && !validator(value)) {
- warn('Invalid prop: custom validator check failed for prop "' + name + '".');
- }
- }
- const isSimpleType = /*#__PURE__*/ shared.makeMap('String,Number,Boolean,Function,Symbol,BigInt');
- /**
- * dev only
- */
- function assertType(value, type) {
- let valid;
- const expectedType = getType(type);
- if (isSimpleType(expectedType)) {
- const t = typeof value;
- valid = t === expectedType.toLowerCase();
- // for primitive wrapper objects
- if (!valid && t === 'object') {
- valid = value instanceof type;
- }
- }
- else if (expectedType === 'Object') {
- valid = shared.isObject(value);
- }
- else if (expectedType === 'Array') {
- valid = shared.isArray(value);
- }
- else if (expectedType === 'null') {
- valid = value === null;
- }
- else {
- valid = value instanceof type;
- }
- return {
- valid,
- expectedType
- };
- }
- /**
- * dev only
- */
- function getInvalidTypeMessage(name, value, expectedTypes) {
- let message = `Invalid prop: type check failed for prop "${name}".` +
- ` Expected ${expectedTypes.map(shared.capitalize).join(' | ')}`;
- const expectedType = expectedTypes[0];
- const receivedType = shared.toRawType(value);
- const expectedValue = styleValue(value, expectedType);
- const receivedValue = styleValue(value, receivedType);
- // check if we need to specify expected value
- if (expectedTypes.length === 1 &&
- isExplicable(expectedType) &&
- !isBoolean(expectedType, receivedType)) {
- message += ` with value ${expectedValue}`;
- }
- message += `, got ${receivedType} `;
- // check if we need to specify received value
- if (isExplicable(receivedType)) {
- message += `with value ${receivedValue}.`;
- }
- return message;
- }
- /**
- * dev only
- */
- function styleValue(value, type) {
- if (type === 'String') {
- return `"${value}"`;
- }
- else if (type === 'Number') {
- return `${Number(value)}`;
- }
- else {
- return `${value}`;
- }
- }
- /**
- * dev only
- */
- function isExplicable(type) {
- const explicitTypes = ['string', 'number', 'boolean'];
- return explicitTypes.some(elem => type.toLowerCase() === elem);
- }
- /**
- * dev only
- */
- function isBoolean(...args) {
- return args.some(elem => elem.toLowerCase() === 'boolean');
- }
- const isInternalKey = (key) => key[0] === '_' || key === '$stable';
- const normalizeSlotValue = (value) => shared.isArray(value)
- ? value.map(normalizeVNode)
- : [normalizeVNode(value)];
- const normalizeSlot = (key, rawSlot, ctx) => {
- if (rawSlot._n) {
- // already normalized - #5353
- return rawSlot;
- }
- const normalized = withCtx((...args) => {
- if (true && currentInstance) {
- warn(`Slot "${key}" invoked outside of the render function: ` +
- `this will not track dependencies used in the slot. ` +
- `Invoke the slot function inside the render function instead.`);
- }
- return normalizeSlotValue(rawSlot(...args));
- }, ctx);
- normalized._c = false;
- return normalized;
- };
- const normalizeObjectSlots = (rawSlots, slots, instance) => {
- const ctx = rawSlots._ctx;
- for (const key in rawSlots) {
- if (isInternalKey(key))
- continue;
- const value = rawSlots[key];
- if (shared.isFunction(value)) {
- slots[key] = normalizeSlot(key, value, ctx);
- }
- else if (value != null) {
- {
- warn(`Non-function value encountered for slot "${key}". ` +
- `Prefer function slots for better performance.`);
- }
- const normalized = normalizeSlotValue(value);
- slots[key] = () => normalized;
- }
- }
- };
- const normalizeVNodeSlots = (instance, children) => {
- if (!isKeepAlive(instance.vnode) &&
- !(false )) {
- warn(`Non-function value encountered for default slot. ` +
- `Prefer function slots for better performance.`);
- }
- const normalized = normalizeSlotValue(children);
- instance.slots.default = () => normalized;
- };
- const initSlots = (instance, children) => {
- if (instance.vnode.shapeFlag & 32 /* ShapeFlags.SLOTS_CHILDREN */) {
- const type = children._;
- if (type) {
- // users can get the shallow readonly version of the slots object through `this.$slots`,
- // we should avoid the proxy object polluting the slots of the internal instance
- instance.slots = reactivity.toRaw(children);
- // make compiler marker non-enumerable
- shared.def(children, '_', type);
- }
- else {
- normalizeObjectSlots(children, (instance.slots = {}));
- }
- }
- else {
- instance.slots = {};
- if (children) {
- normalizeVNodeSlots(instance, children);
- }
- }
- shared.def(instance.slots, InternalObjectKey, 1);
- };
- const updateSlots = (instance, children, optimized) => {
- const { vnode, slots } = instance;
- let needDeletionCheck = true;
- let deletionComparisonTarget = shared.EMPTY_OBJ;
- if (vnode.shapeFlag & 32 /* ShapeFlags.SLOTS_CHILDREN */) {
- const type = children._;
- if (type) {
- // compiled slots.
- if (isHmrUpdating) {
- // Parent was HMR updated so slot content may have changed.
- // force update slots and mark instance for hmr as well
- shared.extend(slots, children);
- }
- else if (optimized && type === 1 /* SlotFlags.STABLE */) {
- // compiled AND stable.
- // no need to update, and skip stale slots removal.
- needDeletionCheck = false;
- }
- else {
- // compiled but dynamic (v-if/v-for on slots) - update slots, but skip
- // normalization.
- shared.extend(slots, children);
- // #2893
- // when rendering the optimized slots by manually written render function,
- // we need to delete the `slots._` flag if necessary to make subsequent updates reliable,
- // i.e. let the `renderSlot` create the bailed Fragment
- if (!optimized && type === 1 /* SlotFlags.STABLE */) {
- delete slots._;
- }
- }
- }
- else {
- needDeletionCheck = !children.$stable;
- normalizeObjectSlots(children, slots);
- }
- deletionComparisonTarget = children;
- }
- else if (children) {
- // non slot object children (direct value) passed to a component
- normalizeVNodeSlots(instance, children);
- deletionComparisonTarget = { default: 1 };
- }
- // delete stale slots
- if (needDeletionCheck) {
- for (const key in slots) {
- if (!isInternalKey(key) && !(key in deletionComparisonTarget)) {
- delete slots[key];
- }
- }
- }
- };
- function createAppContext() {
- return {
- app: null,
- config: {
- isNativeTag: shared.NO,
- performance: false,
- globalProperties: {},
- optionMergeStrategies: {},
- errorHandler: undefined,
- warnHandler: undefined,
- compilerOptions: {}
- },
- mixins: [],
- components: {},
- directives: {},
- provides: Object.create(null),
- optionsCache: new WeakMap(),
- propsCache: new WeakMap(),
- emitsCache: new WeakMap()
- };
- }
- let uid = 0;
- function createAppAPI(render, hydrate) {
- return function createApp(rootComponent, rootProps = null) {
- if (!shared.isFunction(rootComponent)) {
- rootComponent = { ...rootComponent };
- }
- if (rootProps != null && !shared.isObject(rootProps)) {
- warn(`root props passed to app.mount() must be an object.`);
- rootProps = null;
- }
- const context = createAppContext();
- const installedPlugins = new Set();
- let isMounted = false;
- const app = (context.app = {
- _uid: uid++,
- _component: rootComponent,
- _props: rootProps,
- _container: null,
- _context: context,
- _instance: null,
- version,
- get config() {
- return context.config;
- },
- set config(v) {
- {
- warn(`app.config cannot be replaced. Modify individual options instead.`);
- }
- },
- use(plugin, ...options) {
- if (installedPlugins.has(plugin)) {
- warn(`Plugin has already been applied to target app.`);
- }
- else if (plugin && shared.isFunction(plugin.install)) {
- installedPlugins.add(plugin);
- plugin.install(app, ...options);
- }
- else if (shared.isFunction(plugin)) {
- installedPlugins.add(plugin);
- plugin(app, ...options);
- }
- else {
- warn(`A plugin must either be a function or an object with an "install" ` +
- `function.`);
- }
- return app;
- },
- mixin(mixin) {
- {
- if (!context.mixins.includes(mixin)) {
- context.mixins.push(mixin);
- }
- else {
- warn('Mixin has already been applied to target app' +
- (mixin.name ? `: ${mixin.name}` : ''));
- }
- }
- return app;
- },
- component(name, component) {
- {
- validateComponentName(name, context.config);
- }
- if (!component) {
- return context.components[name];
- }
- if (context.components[name]) {
- warn(`Component "${name}" has already been registered in target app.`);
- }
- context.components[name] = component;
- return app;
- },
- directive(name, directive) {
- {
- validateDirectiveName(name);
- }
- if (!directive) {
- return context.directives[name];
- }
- if (context.directives[name]) {
- warn(`Directive "${name}" has already been registered in target app.`);
- }
- context.directives[name] = directive;
- return app;
- },
- mount(rootContainer, isHydrate, isSVG) {
- if (!isMounted) {
- // #5571
- if (rootContainer.__vue_app__) {
- warn(`There is already an app instance mounted on the host container.\n` +
- ` If you want to mount another app on the same host container,` +
- ` you need to unmount the previous app by calling \`app.unmount()\` first.`);
- }
- const vnode = createVNode(rootComponent, rootProps);
- // store app context on the root VNode.
- // this will be set on the root instance on initial mount.
- vnode.appContext = context;
- // HMR root reload
- {
- context.reload = () => {
- render(cloneVNode(vnode), rootContainer, isSVG);
- };
- }
- if (isHydrate && hydrate) {
- hydrate(vnode, rootContainer);
- }
- else {
- render(vnode, rootContainer, isSVG);
- }
- isMounted = true;
- app._container = rootContainer;
- rootContainer.__vue_app__ = app;
- {
- app._instance = vnode.component;
- devtoolsInitApp(app, version);
- }
- return getExposeProxy(vnode.component) || vnode.component.proxy;
- }
- else {
- warn(`App has already been mounted.\n` +
- `If you want to remount the same app, move your app creation logic ` +
- `into a factory function and create fresh app instances for each ` +
- `mount - e.g. \`const createMyApp = () => createApp(App)\``);
- }
- },
- unmount() {
- if (isMounted) {
- render(null, app._container);
- {
- app._instance = null;
- devtoolsUnmountApp(app);
- }
- delete app._container.__vue_app__;
- }
- else {
- warn(`Cannot unmount an app that is not mounted.`);
- }
- },
- provide(key, value) {
- if (key in context.provides) {
- warn(`App already provides property with key "${String(key)}". ` +
- `It will be overwritten with the new value.`);
- }
- context.provides[key] = value;
- return app;
- }
- });
- return app;
- };
- }
- /**
- * Function for handling a template ref
- */
- function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
- if (shared.isArray(rawRef)) {
- rawRef.forEach((r, i) => setRef(r, oldRawRef && (shared.isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));
- return;
- }
- if (isAsyncWrapper(vnode) && !isUnmount) {
- // when mounting async components, nothing needs to be done,
- // because the template ref is forwarded to inner component
- return;
- }
- const refValue = vnode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */
- ? getExposeProxy(vnode.component) || vnode.component.proxy
- : vnode.el;
- const value = isUnmount ? null : refValue;
- const { i: owner, r: ref } = rawRef;
- if (!owner) {
- warn(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
- `A vnode with ref must be created inside the render function.`);
- return;
- }
- const oldRef = oldRawRef && oldRawRef.r;
- const refs = owner.refs === shared.EMPTY_OBJ ? (owner.refs = {}) : owner.refs;
- const setupState = owner.setupState;
- // dynamic ref changed. unset old ref
- if (oldRef != null && oldRef !== ref) {
- if (shared.isString(oldRef)) {
- refs[oldRef] = null;
- if (shared.hasOwn(setupState, oldRef)) {
- setupState[oldRef] = null;
- }
- }
- else if (reactivity.isRef(oldRef)) {
- oldRef.value = null;
- }
- }
- if (shared.isFunction(ref)) {
- callWithErrorHandling(ref, owner, 12 /* ErrorCodes.FUNCTION_REF */, [value, refs]);
- }
- else {
- const _isString = shared.isString(ref);
- const _isRef = reactivity.isRef(ref);
- if (_isString || _isRef) {
- const doSet = () => {
- if (rawRef.f) {
- const existing = _isString
- ? shared.hasOwn(setupState, ref)
- ? setupState[ref]
- : refs[ref]
- : ref.value;
- if (isUnmount) {
- shared.isArray(existing) && shared.remove(existing, refValue);
- }
- else {
- if (!shared.isArray(existing)) {
- if (_isString) {
- refs[ref] = [refValue];
- if (shared.hasOwn(setupState, ref)) {
- setupState[ref] = refs[ref];
- }
- }
- else {
- ref.value = [refValue];
- if (rawRef.k)
- refs[rawRef.k] = ref.value;
- }
- }
- else if (!existing.includes(refValue)) {
- existing.push(refValue);
- }
- }
- }
- else if (_isString) {
- refs[ref] = value;
- if (shared.hasOwn(setupState, ref)) {
- setupState[ref] = value;
- }
- }
- else if (_isRef) {
- ref.value = value;
- if (rawRef.k)
- refs[rawRef.k] = value;
- }
- else {
- warn('Invalid template ref type:', ref, `(${typeof ref})`);
- }
- };
- if (value) {
- doSet.id = -1;
- queuePostRenderEffect(doSet, parentSuspense);
- }
- else {
- doSet();
- }
- }
- else {
- warn('Invalid template ref type:', ref, `(${typeof ref})`);
- }
- }
- }
- let hasMismatch = false;
- const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject';
- const isComment = (node) => node.nodeType === 8 /* DOMNodeTypes.COMMENT */;
- // Note: hydration is DOM-specific
- // But we have to place it in core due to tight coupling with core - splitting
- // it out creates a ton of unnecessary complexity.
- // Hydration also depends on some renderer internal logic which needs to be
- // passed in via arguments.
- function createHydrationFunctions(rendererInternals) {
- const { mt: mountComponent, p: patch, o: { patchProp, createText, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;
- const hydrate = (vnode, container) => {
- if (!container.hasChildNodes()) {
- warn(`Attempting to hydrate existing markup but container is empty. ` +
- `Performing full mount instead.`);
- patch(null, vnode, container);
- flushPostFlushCbs();
- container._vnode = vnode;
- return;
- }
- hasMismatch = false;
- hydrateNode(container.firstChild, vnode, null, null, null);
- flushPostFlushCbs();
- container._vnode = vnode;
- if (hasMismatch && !false) {
- // this error should show up in production
- console.error(`Hydration completed but contains mismatches.`);
- }
- };
- const hydrateNode = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized = false) => {
- const isFragmentStart = isComment(node) && node.data === '[';
- const onMismatch = () => handleMismatch(node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragmentStart);
- const { type, ref, shapeFlag, patchFlag } = vnode;
- let domType = node.nodeType;
- vnode.el = node;
- if (patchFlag === -2 /* PatchFlags.BAIL */) {
- optimized = false;
- vnode.dynamicChildren = null;
- }
- let nextNode = null;
- switch (type) {
- case Text:
- if (domType !== 3 /* DOMNodeTypes.TEXT */) {
- // #5728 empty text node inside a slot can cause hydration failure
- // because the server rendered HTML won't contain a text node
- if (vnode.children === '') {
- insert((vnode.el = createText('')), parentNode(node), node);
- nextNode = node;
- }
- else {
- nextNode = onMismatch();
- }
- }
- else {
- if (node.data !== vnode.children) {
- hasMismatch = true;
- warn(`Hydration text mismatch:` +
- `\n- Client: ${JSON.stringify(node.data)}` +
- `\n- Server: ${JSON.stringify(vnode.children)}`);
- node.data = vnode.children;
- }
- nextNode = nextSibling(node);
- }
- break;
- case Comment:
- if (domType !== 8 /* DOMNodeTypes.COMMENT */ || isFragmentStart) {
- nextNode = onMismatch();
- }
- else {
- nextNode = nextSibling(node);
- }
- break;
- case Static:
- if (isFragmentStart) {
- // entire template is static but SSRed as a fragment
- node = nextSibling(node);
- domType = node.nodeType;
- }
- if (domType === 1 /* DOMNodeTypes.ELEMENT */ || domType === 3 /* DOMNodeTypes.TEXT */) {
- // determine anchor, adopt content
- nextNode = node;
- // if the static vnode has its content stripped during build,
- // adopt it from the server-rendered HTML.
- const needToAdoptContent = !vnode.children.length;
- for (let i = 0; i < vnode.staticCount; i++) {
- if (needToAdoptContent)
- vnode.children +=
- nextNode.nodeType === 1 /* DOMNodeTypes.ELEMENT */
- ? nextNode.outerHTML
- : nextNode.data;
- if (i === vnode.staticCount - 1) {
- vnode.anchor = nextNode;
- }
- nextNode = nextSibling(nextNode);
- }
- return isFragmentStart ? nextSibling(nextNode) : nextNode;
- }
- else {
- onMismatch();
- }
- break;
- case Fragment:
- if (!isFragmentStart) {
- nextNode = onMismatch();
- }
- else {
- nextNode = hydrateFragment(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized);
- }
- break;
- default:
- if (shapeFlag & 1 /* ShapeFlags.ELEMENT */) {
- if (domType !== 1 /* DOMNodeTypes.ELEMENT */ ||
- vnode.type.toLowerCase() !==
- node.tagName.toLowerCase()) {
- nextNode = onMismatch();
- }
- else {
- nextNode = hydrateElement(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized);
- }
- }
- else if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
- // when setting up the render effect, if the initial vnode already
- // has .el set, the component will perform hydration instead of mount
- // on its sub-tree.
- vnode.slotScopeIds = slotScopeIds;
- const container = parentNode(node);
- mountComponent(vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), optimized);
- // component may be async, so in the case of fragments we cannot rely
- // on component's rendered output to determine the end of the fragment
- // instead, we do a lookahead to find the end anchor node.
- nextNode = isFragmentStart
- ? locateClosingAsyncAnchor(node)
- : nextSibling(node);
- // #4293 teleport as component root
- if (nextNode &&
- isComment(nextNode) &&
- nextNode.data === 'teleport end') {
- nextNode = nextSibling(nextNode);
- }
- // #3787
- // if component is async, it may get moved / unmounted before its
- // inner component is loaded, so we need to give it a placeholder
- // vnode that matches its adopted DOM.
- if (isAsyncWrapper(vnode)) {
- let subTree;
- if (isFragmentStart) {
- subTree = createVNode(Fragment);
- subTree.anchor = nextNode
- ? nextNode.previousSibling
- : container.lastChild;
- }
- else {
- subTree =
- node.nodeType === 3 ? createTextVNode('') : createVNode('div');
- }
- subTree.el = node;
- vnode.component.subTree = subTree;
- }
- }
- else if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
- if (domType !== 8 /* DOMNodeTypes.COMMENT */) {
- nextNode = onMismatch();
- }
- else {
- nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, rendererInternals, hydrateChildren);
- }
- }
- else if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- nextNode = vnode.type.hydrate(node, vnode, parentComponent, parentSuspense, isSVGContainer(parentNode(node)), slotScopeIds, optimized, rendererInternals, hydrateNode);
- }
- else {
- warn('Invalid HostVNode type:', type, `(${typeof type})`);
- }
- }
- if (ref != null) {
- setRef(ref, null, parentSuspense, vnode);
- }
- return nextNode;
- };
- const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
- optimized = optimized || !!vnode.dynamicChildren;
- const { type, props, patchFlag, shapeFlag, dirs } = vnode;
- // #4006 for form elements with non-string v-model value bindings
- // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
- const forcePatchValue = (type === 'input' && dirs) || type === 'option';
- // skip props & children if this is hoisted static nodes
- // #5405 in dev, always hydrate children for HMR
- {
- if (dirs) {
- invokeDirectiveHook(vnode, null, parentComponent, 'created');
- }
- // props
- if (props) {
- if (forcePatchValue ||
- !optimized ||
- patchFlag & (16 /* PatchFlags.FULL_PROPS */ | 32 /* PatchFlags.HYDRATE_EVENTS */)) {
- for (const key in props) {
- if ((forcePatchValue && key.endsWith('value')) ||
- (shared.isOn(key) && !shared.isReservedProp(key))) {
- patchProp(el, key, null, props[key], false, undefined, parentComponent);
- }
- }
- }
- else if (props.onClick) {
- // Fast path for click listeners (which is most often) to avoid
- // iterating through props.
- patchProp(el, 'onClick', null, props.onClick, false, undefined, parentComponent);
- }
- }
- // vnode / directive hooks
- let vnodeHooks;
- if ((vnodeHooks = props && props.onVnodeBeforeMount)) {
- invokeVNodeHook(vnodeHooks, parentComponent, vnode);
- }
- if (dirs) {
- invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');
- }
- if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {
- queueEffectWithSuspense(() => {
- vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
- dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');
- }, parentSuspense);
- }
- // children
- if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */ &&
- // skip if element has innerHTML / textContent
- !(props && (props.innerHTML || props.textContent))) {
- let next = hydrateChildren(el.firstChild, vnode, el, parentComponent, parentSuspense, slotScopeIds, optimized);
- let hasWarned = false;
- while (next) {
- hasMismatch = true;
- if (!hasWarned) {
- warn(`Hydration children mismatch in <${vnode.type}>: ` +
- `server rendered element contains more child nodes than client vdom.`);
- hasWarned = true;
- }
- // The SSRed DOM contains more nodes than it should. Remove them.
- const cur = next;
- next = next.nextSibling;
- remove(cur);
- }
- }
- else if (shapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
- if (el.textContent !== vnode.children) {
- hasMismatch = true;
- warn(`Hydration text content mismatch in <${vnode.type}>:\n` +
- `- Client: ${el.textContent}\n` +
- `- Server: ${vnode.children}`);
- el.textContent = vnode.children;
- }
- }
- }
- return el.nextSibling;
- };
- const hydrateChildren = (node, parentVNode, container, parentComponent, parentSuspense, slotScopeIds, optimized) => {
- optimized = optimized || !!parentVNode.dynamicChildren;
- const children = parentVNode.children;
- const l = children.length;
- let hasWarned = false;
- for (let i = 0; i < l; i++) {
- const vnode = optimized
- ? children[i]
- : (children[i] = normalizeVNode(children[i]));
- if (node) {
- node = hydrateNode(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized);
- }
- else if (vnode.type === Text && !vnode.children) {
- continue;
- }
- else {
- hasMismatch = true;
- if (!hasWarned) {
- warn(`Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
- `server rendered element contains fewer child nodes than client vdom.`);
- hasWarned = true;
- }
- // the SSRed DOM didn't contain enough nodes. Mount the missing ones.
- patch(null, vnode, container, null, parentComponent, parentSuspense, isSVGContainer(container), slotScopeIds);
- }
- }
- return node;
- };
- const hydrateFragment = (node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
- const { slotScopeIds: fragmentSlotScopeIds } = vnode;
- if (fragmentSlotScopeIds) {
- slotScopeIds = slotScopeIds
- ? slotScopeIds.concat(fragmentSlotScopeIds)
- : fragmentSlotScopeIds;
- }
- const container = parentNode(node);
- const next = hydrateChildren(nextSibling(node), vnode, container, parentComponent, parentSuspense, slotScopeIds, optimized);
- if (next && isComment(next) && next.data === ']') {
- return nextSibling((vnode.anchor = next));
- }
- else {
- // fragment didn't hydrate successfully, since we didn't get a end anchor
- // back. This should have led to node/children mismatch warnings.
- hasMismatch = true;
- // since the anchor is missing, we need to create one and insert it
- insert((vnode.anchor = createComment(`]`)), container, next);
- return next;
- }
- };
- const handleMismatch = (node, vnode, parentComponent, parentSuspense, slotScopeIds, isFragment) => {
- hasMismatch = true;
- warn(`Hydration node mismatch:\n- Client vnode:`, vnode.type, `\n- Server rendered DOM:`, node, node.nodeType === 3 /* DOMNodeTypes.TEXT */
- ? `(text)`
- : isComment(node) && node.data === '['
- ? `(start of fragment)`
- : ``);
- vnode.el = null;
- if (isFragment) {
- // remove excessive fragment nodes
- const end = locateClosingAsyncAnchor(node);
- while (true) {
- const next = nextSibling(node);
- if (next && next !== end) {
- remove(next);
- }
- else {
- break;
- }
- }
- }
- const next = nextSibling(node);
- const container = parentNode(node);
- remove(node);
- patch(null, vnode, container, next, parentComponent, parentSuspense, isSVGContainer(container), slotScopeIds);
- return next;
- };
- const locateClosingAsyncAnchor = (node) => {
- let match = 0;
- while (node) {
- node = nextSibling(node);
- if (node && isComment(node)) {
- if (node.data === '[')
- match++;
- if (node.data === ']') {
- if (match === 0) {
- return nextSibling(node);
- }
- else {
- match--;
- }
- }
- }
- }
- return node;
- };
- return [hydrate, hydrateNode];
- }
- /* eslint-disable no-restricted-globals */
- let supported;
- let perf;
- function startMeasure(instance, type) {
- if (instance.appContext.config.performance && isSupported()) {
- perf.mark(`vue-${type}-${instance.uid}`);
- }
- {
- devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
- }
- }
- function endMeasure(instance, type) {
- if (instance.appContext.config.performance && isSupported()) {
- const startTag = `vue-${type}-${instance.uid}`;
- const endTag = startTag + `:end`;
- perf.mark(endTag);
- perf.measure(`<${formatComponentName(instance, instance.type)}> ${type}`, startTag, endTag);
- perf.clearMarks(startTag);
- perf.clearMarks(endTag);
- }
- {
- devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
- }
- }
- function isSupported() {
- if (supported !== undefined) {
- return supported;
- }
- if (typeof window !== 'undefined' && window.performance) {
- supported = true;
- perf = window.performance;
- }
- else {
- supported = false;
- }
- return supported;
- }
- const queuePostRenderEffect = queueEffectWithSuspense
- ;
- /**
- * The createRenderer function accepts two generic arguments:
- * HostNode and HostElement, corresponding to Node and Element types in the
- * host environment. For example, for runtime-dom, HostNode would be the DOM
- * `Node` interface and HostElement would be the DOM `Element` interface.
- *
- * Custom renderers can pass in the platform specific types like this:
- *
- * ``` js
- * const { render, createApp } = createRenderer<Node, Element>({
- * patchProp,
- * ...nodeOps
- * })
- * ```
- */
- function createRenderer(options) {
- return baseCreateRenderer(options);
- }
- // Separate API for creating hydration-enabled renderer.
- // Hydration logic is only used when calling this function, making it
- // tree-shakable.
- function createHydrationRenderer(options) {
- return baseCreateRenderer(options, createHydrationFunctions);
- }
- // implementation
- function baseCreateRenderer(options, createHydrationFns) {
- const target = shared.getGlobalThis();
- target.__VUE__ = true;
- {
- setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target);
- }
- const { insert: hostInsert, remove: hostRemove, patchProp: hostPatchProp, createElement: hostCreateElement, createText: hostCreateText, createComment: hostCreateComment, setText: hostSetText, setElementText: hostSetElementText, parentNode: hostParentNode, nextSibling: hostNextSibling, setScopeId: hostSetScopeId = shared.NOOP, insertStaticContent: hostInsertStaticContent } = options;
- // Note: functions inside this closure should use `const xxx = () => {}`
- // style in order to prevent being inlined by minifiers.
- const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
- if (n1 === n2) {
- return;
- }
- // patching & not same type, unmount old tree
- if (n1 && !isSameVNodeType(n1, n2)) {
- anchor = getNextHostNode(n1);
- unmount(n1, parentComponent, parentSuspense, true);
- n1 = null;
- }
- if (n2.patchFlag === -2 /* PatchFlags.BAIL */) {
- optimized = false;
- n2.dynamicChildren = null;
- }
- const { type, ref, shapeFlag } = n2;
- switch (type) {
- case Text:
- processText(n1, n2, container, anchor);
- break;
- case Comment:
- processCommentNode(n1, n2, container, anchor);
- break;
- case Static:
- if (n1 == null) {
- mountStaticNode(n2, container, anchor, isSVG);
- }
- else {
- patchStaticNode(n1, n2, container, isSVG);
- }
- break;
- case Fragment:
- processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- break;
- default:
- if (shapeFlag & 1 /* ShapeFlags.ELEMENT */) {
- processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
- processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
- type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals);
- }
- else if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals);
- }
- else {
- warn('Invalid VNode type:', type, `(${typeof type})`);
- }
- }
- // set ref
- if (ref != null && parentComponent) {
- setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2);
- }
- };
- const processText = (n1, n2, container, anchor) => {
- if (n1 == null) {
- hostInsert((n2.el = hostCreateText(n2.children)), container, anchor);
- }
- else {
- const el = (n2.el = n1.el);
- if (n2.children !== n1.children) {
- hostSetText(el, n2.children);
- }
- }
- };
- const processCommentNode = (n1, n2, container, anchor) => {
- if (n1 == null) {
- hostInsert((n2.el = hostCreateComment(n2.children || '')), container, anchor);
- }
- else {
- // there's no support for dynamic comments
- n2.el = n1.el;
- }
- };
- const mountStaticNode = (n2, container, anchor, isSVG) => {
- [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG, n2.el, n2.anchor);
- };
- /**
- * Dev / HMR only
- */
- const patchStaticNode = (n1, n2, container, isSVG) => {
- // static nodes are only patched during dev for HMR
- if (n2.children !== n1.children) {
- const anchor = hostNextSibling(n1.anchor);
- // remove existing
- removeStaticNode(n1);
- [n2.el, n2.anchor] = hostInsertStaticContent(n2.children, container, anchor, isSVG);
- }
- else {
- n2.el = n1.el;
- n2.anchor = n1.anchor;
- }
- };
- const moveStaticNode = ({ el, anchor }, container, nextSibling) => {
- let next;
- while (el && el !== anchor) {
- next = hostNextSibling(el);
- hostInsert(el, container, nextSibling);
- el = next;
- }
- hostInsert(anchor, container, nextSibling);
- };
- const removeStaticNode = ({ el, anchor }) => {
- let next;
- while (el && el !== anchor) {
- next = hostNextSibling(el);
- hostRemove(el);
- el = next;
- }
- hostRemove(anchor);
- };
- const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- isSVG = isSVG || n2.type === 'svg';
- if (n1 == null) {
- mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else {
- patchElement(n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- };
- const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- let el;
- let vnodeHook;
- const { type, props, shapeFlag, transition, dirs } = vnode;
- el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is, props);
- // mount children first, since some props may rely on child content
- // being already rendered, e.g. `<select value>`
- if (shapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
- hostSetElementText(el, vnode.children);
- }
- else if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- mountChildren(vnode.children, el, null, parentComponent, parentSuspense, isSVG && type !== 'foreignObject', slotScopeIds, optimized);
- }
- if (dirs) {
- invokeDirectiveHook(vnode, null, parentComponent, 'created');
- }
- // props
- if (props) {
- for (const key in props) {
- if (key !== 'value' && !shared.isReservedProp(key)) {
- hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
- }
- }
- /**
- * Special case for setting value on DOM elements:
- * - it can be order-sensitive (e.g. should be set *after* min/max, #2325, #4024)
- * - it needs to be forced (#1471)
- * #2353 proposes adding another renderer option to configure this, but
- * the properties affects are so finite it is worth special casing it
- * here to reduce the complexity. (Special casing it also should not
- * affect non-DOM renderers)
- */
- if ('value' in props) {
- hostPatchProp(el, 'value', null, props.value);
- }
- if ((vnodeHook = props.onVnodeBeforeMount)) {
- invokeVNodeHook(vnodeHook, parentComponent, vnode);
- }
- }
- // scopeId
- setScopeId(el, vnode, vnode.scopeId, slotScopeIds, parentComponent);
- {
- Object.defineProperty(el, '__vnode', {
- value: vnode,
- enumerable: false
- });
- Object.defineProperty(el, '__vueParentComponent', {
- value: parentComponent,
- enumerable: false
- });
- }
- if (dirs) {
- invokeDirectiveHook(vnode, null, parentComponent, 'beforeMount');
- }
- // #1583 For inside suspense + suspense not resolved case, enter hook should call when suspense resolved
- // #1689 For inside suspense + suspense resolved case, just call it
- const needCallTransitionHooks = (!parentSuspense || (parentSuspense && !parentSuspense.pendingBranch)) &&
- transition &&
- !transition.persisted;
- if (needCallTransitionHooks) {
- transition.beforeEnter(el);
- }
- hostInsert(el, container, anchor);
- if ((vnodeHook = props && props.onVnodeMounted) ||
- needCallTransitionHooks ||
- dirs) {
- queuePostRenderEffect(() => {
- vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
- needCallTransitionHooks && transition.enter(el);
- dirs && invokeDirectiveHook(vnode, null, parentComponent, 'mounted');
- }, parentSuspense);
- }
- };
- const setScopeId = (el, vnode, scopeId, slotScopeIds, parentComponent) => {
- if (scopeId) {
- hostSetScopeId(el, scopeId);
- }
- if (slotScopeIds) {
- for (let i = 0; i < slotScopeIds.length; i++) {
- hostSetScopeId(el, slotScopeIds[i]);
- }
- }
- if (parentComponent) {
- let subTree = parentComponent.subTree;
- if (subTree.patchFlag > 0 &&
- subTree.patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */) {
- subTree =
- filterSingleRoot(subTree.children) || subTree;
- }
- if (vnode === subTree) {
- const parentVNode = parentComponent.vnode;
- setScopeId(el, parentVNode, parentVNode.scopeId, parentVNode.slotScopeIds, parentComponent.parent);
- }
- }
- };
- const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => {
- for (let i = start; i < children.length; i++) {
- const child = (children[i] = optimized
- ? cloneIfMounted(children[i])
- : normalizeVNode(children[i]));
- patch(null, child, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- };
- const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- const el = (n2.el = n1.el);
- let { patchFlag, dynamicChildren, dirs } = n2;
- // #1426 take the old vnode's patch flag into account since user may clone a
- // compiler-generated vnode, which de-opts to FULL_PROPS
- patchFlag |= n1.patchFlag & 16 /* PatchFlags.FULL_PROPS */;
- const oldProps = n1.props || shared.EMPTY_OBJ;
- const newProps = n2.props || shared.EMPTY_OBJ;
- let vnodeHook;
- // disable recurse in beforeUpdate hooks
- parentComponent && toggleRecurse(parentComponent, false);
- if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {
- invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
- }
- if (dirs) {
- invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');
- }
- parentComponent && toggleRecurse(parentComponent, true);
- if (isHmrUpdating) {
- // HMR updated, force full diff
- patchFlag = 0;
- optimized = false;
- dynamicChildren = null;
- }
- const areChildrenSVG = isSVG && n2.type !== 'foreignObject';
- if (dynamicChildren) {
- patchBlockChildren(n1.dynamicChildren, dynamicChildren, el, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds);
- if (parentComponent && parentComponent.type.__hmrId) {
- traverseStaticChildren(n1, n2);
- }
- }
- else if (!optimized) {
- // full diff
- patchChildren(n1, n2, el, null, parentComponent, parentSuspense, areChildrenSVG, slotScopeIds, false);
- }
- if (patchFlag > 0) {
- // the presence of a patchFlag means this element's render code was
- // generated by the compiler and can take the fast path.
- // in this path old node and new node are guaranteed to have the same shape
- // (i.e. at the exact same position in the source template)
- if (patchFlag & 16 /* PatchFlags.FULL_PROPS */) {
- // element props contain dynamic keys, full diff needed
- patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);
- }
- else {
- // class
- // this flag is matched when the element has dynamic class bindings.
- if (patchFlag & 2 /* PatchFlags.CLASS */) {
- if (oldProps.class !== newProps.class) {
- hostPatchProp(el, 'class', null, newProps.class, isSVG);
- }
- }
- // style
- // this flag is matched when the element has dynamic style bindings
- if (patchFlag & 4 /* PatchFlags.STYLE */) {
- hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG);
- }
- // props
- // This flag is matched when the element has dynamic prop/attr bindings
- // other than class and style. The keys of dynamic prop/attrs are saved for
- // faster iteration.
- // Note dynamic keys like :[foo]="bar" will cause this optimization to
- // bail out and go through a full diff because we need to unset the old key
- if (patchFlag & 8 /* PatchFlags.PROPS */) {
- // if the flag is present then dynamicProps must be non-null
- const propsToUpdate = n2.dynamicProps;
- for (let i = 0; i < propsToUpdate.length; i++) {
- const key = propsToUpdate[i];
- const prev = oldProps[key];
- const next = newProps[key];
- // #1471 force patch value
- if (next !== prev || key === 'value') {
- hostPatchProp(el, key, prev, next, isSVG, n1.children, parentComponent, parentSuspense, unmountChildren);
- }
- }
- }
- }
- // text
- // This flag is matched when the element has only dynamic text children.
- if (patchFlag & 1 /* PatchFlags.TEXT */) {
- if (n1.children !== n2.children) {
- hostSetElementText(el, n2.children);
- }
- }
- }
- else if (!optimized && dynamicChildren == null) {
- // unoptimized, full diff
- patchProps(el, n2, oldProps, newProps, parentComponent, parentSuspense, isSVG);
- }
- if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
- queuePostRenderEffect(() => {
- vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
- dirs && invokeDirectiveHook(n2, n1, parentComponent, 'updated');
- }, parentSuspense);
- }
- };
- // The fast path for blocks.
- const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => {
- for (let i = 0; i < newChildren.length; i++) {
- const oldVNode = oldChildren[i];
- const newVNode = newChildren[i];
- // Determine the container (parent element) for the patch.
- const container =
- // oldVNode may be an errored async setup() component inside Suspense
- // which will not have a mounted element
- oldVNode.el &&
- // - In the case of a Fragment, we need to provide the actual parent
- // of the Fragment itself so it can move its children.
- (oldVNode.type === Fragment ||
- // - In the case of different nodes, there is going to be a replacement
- // which also requires the correct parent container
- !isSameVNodeType(oldVNode, newVNode) ||
- // - In the case of a component, it could contain anything.
- oldVNode.shapeFlag & (6 /* ShapeFlags.COMPONENT */ | 64 /* ShapeFlags.TELEPORT */))
- ? hostParentNode(oldVNode.el)
- : // In other cases, the parent container is not actually used so we
- // just pass the block element here to avoid a DOM parentNode call.
- fallbackContainer;
- patch(oldVNode, newVNode, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, true);
- }
- };
- const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
- if (oldProps !== newProps) {
- if (oldProps !== shared.EMPTY_OBJ) {
- for (const key in oldProps) {
- if (!shared.isReservedProp(key) && !(key in newProps)) {
- hostPatchProp(el, key, oldProps[key], null, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
- }
- }
- }
- for (const key in newProps) {
- // empty string is not valid prop
- if (shared.isReservedProp(key))
- continue;
- const next = newProps[key];
- const prev = oldProps[key];
- // defer patching value
- if (next !== prev && key !== 'value') {
- hostPatchProp(el, key, prev, next, isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
- }
- }
- if ('value' in newProps) {
- hostPatchProp(el, 'value', oldProps.value, newProps.value);
- }
- }
- };
- const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));
- const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));
- let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
- if (// #5523 dev root fragment may inherit directives
- (isHmrUpdating || patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */)) {
- // HMR updated / Dev root fragment (w/ comments), force full diff
- patchFlag = 0;
- optimized = false;
- dynamicChildren = null;
- }
- // check if this is a slot fragment with :slotted scope ids
- if (fragmentSlotScopeIds) {
- slotScopeIds = slotScopeIds
- ? slotScopeIds.concat(fragmentSlotScopeIds)
- : fragmentSlotScopeIds;
- }
- if (n1 == null) {
- hostInsert(fragmentStartAnchor, container, anchor);
- hostInsert(fragmentEndAnchor, container, anchor);
- // a fragment can only have array children
- // since they are either generated by the compiler, or implicitly created
- // from arrays.
- mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else {
- if (patchFlag > 0 &&
- patchFlag & 64 /* PatchFlags.STABLE_FRAGMENT */ &&
- dynamicChildren &&
- // #2715 the previous fragment could've been a BAILed one as a result
- // of renderSlot() with no valid children
- n1.dynamicChildren) {
- // a stable fragment (template root or <template v-for>) doesn't need to
- // patch children order, but it may contain dynamicChildren.
- patchBlockChildren(n1.dynamicChildren, dynamicChildren, container, parentComponent, parentSuspense, isSVG, slotScopeIds);
- if (parentComponent && parentComponent.type.__hmrId) {
- traverseStaticChildren(n1, n2);
- }
- else if (
- // #2080 if the stable fragment has a key, it's a <template v-for> that may
- // get moved around. Make sure all root level vnodes inherit el.
- // #2134 or if it's a component root, it may also get moved around
- // as the component is being moved.
- n2.key != null ||
- (parentComponent && n2 === parentComponent.subTree)) {
- traverseStaticChildren(n1, n2, true /* shallow */);
- }
- }
- else {
- // keyed / unkeyed, or manual fragments.
- // for keyed & unkeyed, since they are compiler generated from v-for,
- // each child is guaranteed to be a block so the fragment will never
- // have dynamicChildren.
- patchChildren(n1, n2, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- }
- };
- const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- n2.slotScopeIds = slotScopeIds;
- if (n1 == null) {
- if (n2.shapeFlag & 512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */) {
- parentComponent.ctx.activate(n2, container, anchor, isSVG, optimized);
- }
- else {
- mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized);
- }
- }
- else {
- updateComponent(n1, n2, optimized);
- }
- };
- const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
- const instance = (initialVNode.component = createComponentInstance(initialVNode, parentComponent, parentSuspense));
- if (instance.type.__hmrId) {
- registerHMR(instance);
- }
- {
- pushWarningContext(initialVNode);
- startMeasure(instance, `mount`);
- }
- // inject renderer internals for keepAlive
- if (isKeepAlive(initialVNode)) {
- instance.ctx.renderer = internals;
- }
- // resolve props and slots for setup context
- {
- {
- startMeasure(instance, `init`);
- }
- setupComponent(instance);
- {
- endMeasure(instance, `init`);
- }
- }
- // setup() is async. This component relies on async logic to be resolved
- // before proceeding
- if (instance.asyncDep) {
- parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect);
- // Give it a placeholder if this is not hydration
- // TODO handle self-defined fallback
- if (!initialVNode.el) {
- const placeholder = (instance.subTree = createVNode(Comment));
- processCommentNode(null, placeholder, container, anchor);
- }
- return;
- }
- setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized);
- {
- popWarningContext();
- endMeasure(instance, `mount`);
- }
- };
- const updateComponent = (n1, n2, optimized) => {
- const instance = (n2.component = n1.component);
- if (shouldUpdateComponent(n1, n2, optimized)) {
- if (instance.asyncDep &&
- !instance.asyncResolved) {
- // async & still pending - just update props and slots
- // since the component's reactive effect for render isn't set-up yet
- {
- pushWarningContext(n2);
- }
- updateComponentPreRender(instance, n2, optimized);
- {
- popWarningContext();
- }
- return;
- }
- else {
- // normal update
- instance.next = n2;
- // in case the child component is also queued, remove it to avoid
- // double updating the same child component in the same flush.
- invalidateJob(instance.update);
- // instance.update is the reactive effect.
- instance.update();
- }
- }
- else {
- // no update needed. just copy over properties
- n2.el = n1.el;
- instance.vnode = n2;
- }
- };
- const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
- const componentUpdateFn = () => {
- if (!instance.isMounted) {
- let vnodeHook;
- const { el, props } = initialVNode;
- const { bm, m, parent } = instance;
- const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
- toggleRecurse(instance, false);
- // beforeMount hook
- if (bm) {
- shared.invokeArrayFns(bm);
- }
- // onVnodeBeforeMount
- if (!isAsyncWrapperVNode &&
- (vnodeHook = props && props.onVnodeBeforeMount)) {
- invokeVNodeHook(vnodeHook, parent, initialVNode);
- }
- toggleRecurse(instance, true);
- if (el && hydrateNode) {
- // vnode has adopted host node - perform hydration instead of mount.
- const hydrateSubTree = () => {
- {
- startMeasure(instance, `render`);
- }
- instance.subTree = renderComponentRoot(instance);
- {
- endMeasure(instance, `render`);
- }
- {
- startMeasure(instance, `hydrate`);
- }
- hydrateNode(el, instance.subTree, instance, parentSuspense, null);
- {
- endMeasure(instance, `hydrate`);
- }
- };
- if (isAsyncWrapperVNode) {
- initialVNode.type.__asyncLoader().then(
- // note: we are moving the render call into an async callback,
- // which means it won't track dependencies - but it's ok because
- // a server-rendered async wrapper is already in resolved state
- // and it will never need to change.
- () => !instance.isUnmounted && hydrateSubTree());
- }
- else {
- hydrateSubTree();
- }
- }
- else {
- {
- startMeasure(instance, `render`);
- }
- const subTree = (instance.subTree = renderComponentRoot(instance));
- {
- endMeasure(instance, `render`);
- }
- {
- startMeasure(instance, `patch`);
- }
- patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);
- {
- endMeasure(instance, `patch`);
- }
- initialVNode.el = subTree.el;
- }
- // mounted hook
- if (m) {
- queuePostRenderEffect(m, parentSuspense);
- }
- // onVnodeMounted
- if (!isAsyncWrapperVNode &&
- (vnodeHook = props && props.onVnodeMounted)) {
- const scopedInitialVNode = initialVNode;
- queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, scopedInitialVNode), parentSuspense);
- }
- // activated hook for keep-alive roots.
- // #1742 activated hook must be accessed after first render
- // since the hook may be injected by a child keep-alive
- if (initialVNode.shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */ ||
- (parent &&
- isAsyncWrapper(parent.vnode) &&
- parent.vnode.shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */)) {
- instance.a && queuePostRenderEffect(instance.a, parentSuspense);
- }
- instance.isMounted = true;
- {
- devtoolsComponentAdded(instance);
- }
- // #2458: deference mount-only object parameters to prevent memleaks
- initialVNode = container = anchor = null;
- }
- else {
- // updateComponent
- // This is triggered by mutation of component's own state (next: null)
- // OR parent calling processComponent (next: VNode)
- let { next, bu, u, parent, vnode } = instance;
- let originNext = next;
- let vnodeHook;
- {
- pushWarningContext(next || instance.vnode);
- }
- // Disallow component effect recursion during pre-lifecycle hooks.
- toggleRecurse(instance, false);
- if (next) {
- next.el = vnode.el;
- updateComponentPreRender(instance, next, optimized);
- }
- else {
- next = vnode;
- }
- // beforeUpdate hook
- if (bu) {
- shared.invokeArrayFns(bu);
- }
- // onVnodeBeforeUpdate
- if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
- invokeVNodeHook(vnodeHook, parent, next, vnode);
- }
- toggleRecurse(instance, true);
- // render
- {
- startMeasure(instance, `render`);
- }
- const nextTree = renderComponentRoot(instance);
- {
- endMeasure(instance, `render`);
- }
- const prevTree = instance.subTree;
- instance.subTree = nextTree;
- {
- startMeasure(instance, `patch`);
- }
- patch(prevTree, nextTree,
- // parent may have changed if it's in a teleport
- hostParentNode(prevTree.el),
- // anchor may have changed if it's in a fragment
- getNextHostNode(prevTree), instance, parentSuspense, isSVG);
- {
- endMeasure(instance, `patch`);
- }
- next.el = nextTree.el;
- if (originNext === null) {
- // self-triggered update. In case of HOC, update parent component
- // vnode el. HOC is indicated by parent instance's subTree pointing
- // to child component's vnode
- updateHOCHostEl(instance, nextTree.el);
- }
- // updated hook
- if (u) {
- queuePostRenderEffect(u, parentSuspense);
- }
- // onVnodeUpdated
- if ((vnodeHook = next.props && next.props.onVnodeUpdated)) {
- queuePostRenderEffect(() => invokeVNodeHook(vnodeHook, parent, next, vnode), parentSuspense);
- }
- {
- devtoolsComponentUpdated(instance);
- }
- {
- popWarningContext();
- }
- }
- };
- // create reactive effect for rendering
- const effect = (instance.effect = new reactivity.ReactiveEffect(componentUpdateFn, () => queueJob(update), instance.scope // track it in component's effect scope
- ));
- const update = (instance.update = () => effect.run());
- update.id = instance.uid;
- // allowRecurse
- // #1801, #2043 component render effects should allow recursive updates
- toggleRecurse(instance, true);
- {
- effect.onTrack = instance.rtc
- ? e => shared.invokeArrayFns(instance.rtc, e)
- : void 0;
- effect.onTrigger = instance.rtg
- ? e => shared.invokeArrayFns(instance.rtg, e)
- : void 0;
- update.ownerInstance = instance;
- }
- update();
- };
- const updateComponentPreRender = (instance, nextVNode, optimized) => {
- nextVNode.component = instance;
- const prevProps = instance.vnode.props;
- instance.vnode = nextVNode;
- instance.next = null;
- updateProps(instance, nextVNode.props, prevProps, optimized);
- updateSlots(instance, nextVNode.children, optimized);
- reactivity.pauseTracking();
- // props update may have triggered pre-flush watchers.
- // flush them before the render update.
- flushPreFlushCbs();
- reactivity.resetTracking();
- };
- const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
- const c1 = n1 && n1.children;
- const prevShapeFlag = n1 ? n1.shapeFlag : 0;
- const c2 = n2.children;
- const { patchFlag, shapeFlag } = n2;
- // fast path
- if (patchFlag > 0) {
- if (patchFlag & 128 /* PatchFlags.KEYED_FRAGMENT */) {
- // this could be either fully-keyed or mixed (some keyed some not)
- // presence of patchFlag means children are guaranteed to be arrays
- patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- return;
- }
- else if (patchFlag & 256 /* PatchFlags.UNKEYED_FRAGMENT */) {
- // unkeyed
- patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- return;
- }
- }
- // children has 3 possibilities: text, array or no children.
- if (shapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
- // text children fast path
- if (prevShapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- unmountChildren(c1, parentComponent, parentSuspense);
- }
- if (c2 !== c1) {
- hostSetElementText(container, c2);
- }
- }
- else {
- if (prevShapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- // prev children was array
- if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- // two arrays, cannot assume anything, do full diff
- patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else {
- // no new children, just unmount old
- unmountChildren(c1, parentComponent, parentSuspense, true);
- }
- }
- else {
- // prev children was text OR null
- // new children is array OR null
- if (prevShapeFlag & 8 /* ShapeFlags.TEXT_CHILDREN */) {
- hostSetElementText(container, '');
- }
- // mount new if array
- if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- }
- }
- };
- const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- c1 = c1 || shared.EMPTY_ARR;
- c2 = c2 || shared.EMPTY_ARR;
- const oldLength = c1.length;
- const newLength = c2.length;
- const commonLength = Math.min(oldLength, newLength);
- let i;
- for (i = 0; i < commonLength; i++) {
- const nextChild = (c2[i] = optimized
- ? cloneIfMounted(c2[i])
- : normalizeVNode(c2[i]));
- patch(c1[i], nextChild, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- if (oldLength > newLength) {
- // remove old
- unmountChildren(c1, parentComponent, parentSuspense, true, false, commonLength);
- }
- else {
- // mount new
- mountChildren(c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, commonLength);
- }
- };
- // can be all-keyed or mixed
- const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
- let i = 0;
- const l2 = c2.length;
- let e1 = c1.length - 1; // prev ending index
- let e2 = l2 - 1; // next ending index
- // 1. sync from start
- // (a b) c
- // (a b) d e
- while (i <= e1 && i <= e2) {
- const n1 = c1[i];
- const n2 = (c2[i] = optimized
- ? cloneIfMounted(c2[i])
- : normalizeVNode(c2[i]));
- if (isSameVNodeType(n1, n2)) {
- patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else {
- break;
- }
- i++;
- }
- // 2. sync from end
- // a (b c)
- // d e (b c)
- while (i <= e1 && i <= e2) {
- const n1 = c1[e1];
- const n2 = (c2[e2] = optimized
- ? cloneIfMounted(c2[e2])
- : normalizeVNode(c2[e2]));
- if (isSameVNodeType(n1, n2)) {
- patch(n1, n2, container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else {
- break;
- }
- e1--;
- e2--;
- }
- // 3. common sequence + mount
- // (a b)
- // (a b) c
- // i = 2, e1 = 1, e2 = 2
- // (a b)
- // c (a b)
- // i = 0, e1 = -1, e2 = 0
- if (i > e1) {
- if (i <= e2) {
- const nextPos = e2 + 1;
- const anchor = nextPos < l2 ? c2[nextPos].el : parentAnchor;
- while (i <= e2) {
- patch(null, (c2[i] = optimized
- ? cloneIfMounted(c2[i])
- : normalizeVNode(c2[i])), container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- i++;
- }
- }
- }
- // 4. common sequence + unmount
- // (a b) c
- // (a b)
- // i = 2, e1 = 2, e2 = 1
- // a (b c)
- // (b c)
- // i = 0, e1 = 0, e2 = -1
- else if (i > e2) {
- while (i <= e1) {
- unmount(c1[i], parentComponent, parentSuspense, true);
- i++;
- }
- }
- // 5. unknown sequence
- // [i ... e1 + 1]: a b [c d e] f g
- // [i ... e2 + 1]: a b [e d c h] f g
- // i = 2, e1 = 4, e2 = 5
- else {
- const s1 = i; // prev starting index
- const s2 = i; // next starting index
- // 5.1 build key:index map for newChildren
- const keyToNewIndexMap = new Map();
- for (i = s2; i <= e2; i++) {
- const nextChild = (c2[i] = optimized
- ? cloneIfMounted(c2[i])
- : normalizeVNode(c2[i]));
- if (nextChild.key != null) {
- if (keyToNewIndexMap.has(nextChild.key)) {
- warn(`Duplicate keys found during update:`, JSON.stringify(nextChild.key), `Make sure keys are unique.`);
- }
- keyToNewIndexMap.set(nextChild.key, i);
- }
- }
- // 5.2 loop through old children left to be patched and try to patch
- // matching nodes & remove nodes that are no longer present
- let j;
- let patched = 0;
- const toBePatched = e2 - s2 + 1;
- let moved = false;
- // used to track whether any node has moved
- let maxNewIndexSoFar = 0;
- // works as Map<newIndex, oldIndex>
- // Note that oldIndex is offset by +1
- // and oldIndex = 0 is a special value indicating the new node has
- // no corresponding old node.
- // used for determining longest stable subsequence
- const newIndexToOldIndexMap = new Array(toBePatched);
- for (i = 0; i < toBePatched; i++)
- newIndexToOldIndexMap[i] = 0;
- for (i = s1; i <= e1; i++) {
- const prevChild = c1[i];
- if (patched >= toBePatched) {
- // all new children have been patched so this can only be a removal
- unmount(prevChild, parentComponent, parentSuspense, true);
- continue;
- }
- let newIndex;
- if (prevChild.key != null) {
- newIndex = keyToNewIndexMap.get(prevChild.key);
- }
- else {
- // key-less node, try to locate a key-less node of the same type
- for (j = s2; j <= e2; j++) {
- if (newIndexToOldIndexMap[j - s2] === 0 &&
- isSameVNodeType(prevChild, c2[j])) {
- newIndex = j;
- break;
- }
- }
- }
- if (newIndex === undefined) {
- unmount(prevChild, parentComponent, parentSuspense, true);
- }
- else {
- newIndexToOldIndexMap[newIndex - s2] = i + 1;
- if (newIndex >= maxNewIndexSoFar) {
- maxNewIndexSoFar = newIndex;
- }
- else {
- moved = true;
- }
- patch(prevChild, c2[newIndex], container, null, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- patched++;
- }
- }
- // 5.3 move and mount
- // generate longest stable subsequence only when nodes have moved
- const increasingNewIndexSequence = moved
- ? getSequence(newIndexToOldIndexMap)
- : shared.EMPTY_ARR;
- j = increasingNewIndexSequence.length - 1;
- // looping backwards so that we can use last patched node as anchor
- for (i = toBePatched - 1; i >= 0; i--) {
- const nextIndex = s2 + i;
- const nextChild = c2[nextIndex];
- const anchor = nextIndex + 1 < l2 ? c2[nextIndex + 1].el : parentAnchor;
- if (newIndexToOldIndexMap[i] === 0) {
- // mount new
- patch(null, nextChild, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- else if (moved) {
- // move if:
- // There is no stable subsequence (e.g. a reverse)
- // OR current node is not among the stable sequence
- if (j < 0 || i !== increasingNewIndexSequence[j]) {
- move(nextChild, container, anchor, 2 /* MoveType.REORDER */);
- }
- else {
- j--;
- }
- }
- }
- }
- };
- const move = (vnode, container, anchor, moveType, parentSuspense = null) => {
- const { el, type, transition, children, shapeFlag } = vnode;
- if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
- move(vnode.component.subTree, container, anchor, moveType);
- return;
- }
- if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- vnode.suspense.move(container, anchor, moveType);
- return;
- }
- if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
- type.move(vnode, container, anchor, internals);
- return;
- }
- if (type === Fragment) {
- hostInsert(el, container, anchor);
- for (let i = 0; i < children.length; i++) {
- move(children[i], container, anchor, moveType);
- }
- hostInsert(vnode.anchor, container, anchor);
- return;
- }
- if (type === Static) {
- moveStaticNode(vnode, container, anchor);
- return;
- }
- // single nodes
- const needTransition = moveType !== 2 /* MoveType.REORDER */ &&
- shapeFlag & 1 /* ShapeFlags.ELEMENT */ &&
- transition;
- if (needTransition) {
- if (moveType === 0 /* MoveType.ENTER */) {
- transition.beforeEnter(el);
- hostInsert(el, container, anchor);
- queuePostRenderEffect(() => transition.enter(el), parentSuspense);
- }
- else {
- const { leave, delayLeave, afterLeave } = transition;
- const remove = () => hostInsert(el, container, anchor);
- const performLeave = () => {
- leave(el, () => {
- remove();
- afterLeave && afterLeave();
- });
- };
- if (delayLeave) {
- delayLeave(el, remove, performLeave);
- }
- else {
- performLeave();
- }
- }
- }
- else {
- hostInsert(el, container, anchor);
- }
- };
- const unmount = (vnode, parentComponent, parentSuspense, doRemove = false, optimized = false) => {
- const { type, props, ref, children, dynamicChildren, shapeFlag, patchFlag, dirs } = vnode;
- // unset ref
- if (ref != null) {
- setRef(ref, null, parentSuspense, vnode, true);
- }
- if (shapeFlag & 256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */) {
- parentComponent.ctx.deactivate(vnode);
- return;
- }
- const shouldInvokeDirs = shapeFlag & 1 /* ShapeFlags.ELEMENT */ && dirs;
- const shouldInvokeVnodeHook = !isAsyncWrapper(vnode);
- let vnodeHook;
- if (shouldInvokeVnodeHook &&
- (vnodeHook = props && props.onVnodeBeforeUnmount)) {
- invokeVNodeHook(vnodeHook, parentComponent, vnode);
- }
- if (shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
- unmountComponent(vnode.component, parentSuspense, doRemove);
- }
- else {
- if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- vnode.suspense.unmount(parentSuspense, doRemove);
- return;
- }
- if (shouldInvokeDirs) {
- invokeDirectiveHook(vnode, null, parentComponent, 'beforeUnmount');
- }
- if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
- vnode.type.remove(vnode, parentComponent, parentSuspense, optimized, internals, doRemove);
- }
- else if (dynamicChildren &&
- // #1153: fast path should not be taken for non-stable (v-for) fragments
- (type !== Fragment ||
- (patchFlag > 0 && patchFlag & 64 /* PatchFlags.STABLE_FRAGMENT */))) {
- // fast path for block nodes: only need to unmount dynamic children.
- unmountChildren(dynamicChildren, parentComponent, parentSuspense, false, true);
- }
- else if ((type === Fragment &&
- patchFlag &
- (128 /* PatchFlags.KEYED_FRAGMENT */ | 256 /* PatchFlags.UNKEYED_FRAGMENT */)) ||
- (!optimized && shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */)) {
- unmountChildren(children, parentComponent, parentSuspense);
- }
- if (doRemove) {
- remove(vnode);
- }
- }
- if ((shouldInvokeVnodeHook &&
- (vnodeHook = props && props.onVnodeUnmounted)) ||
- shouldInvokeDirs) {
- queuePostRenderEffect(() => {
- vnodeHook && invokeVNodeHook(vnodeHook, parentComponent, vnode);
- shouldInvokeDirs &&
- invokeDirectiveHook(vnode, null, parentComponent, 'unmounted');
- }, parentSuspense);
- }
- };
- const remove = vnode => {
- const { type, el, anchor, transition } = vnode;
- if (type === Fragment) {
- if (vnode.patchFlag > 0 &&
- vnode.patchFlag & 2048 /* PatchFlags.DEV_ROOT_FRAGMENT */ &&
- transition &&
- !transition.persisted) {
- vnode.children.forEach(child => {
- if (child.type === Comment) {
- hostRemove(child.el);
- }
- else {
- remove(child);
- }
- });
- }
- else {
- removeFragment(el, anchor);
- }
- return;
- }
- if (type === Static) {
- removeStaticNode(vnode);
- return;
- }
- const performRemove = () => {
- hostRemove(el);
- if (transition && !transition.persisted && transition.afterLeave) {
- transition.afterLeave();
- }
- };
- if (vnode.shapeFlag & 1 /* ShapeFlags.ELEMENT */ &&
- transition &&
- !transition.persisted) {
- const { leave, delayLeave } = transition;
- const performLeave = () => leave(el, performRemove);
- if (delayLeave) {
- delayLeave(vnode.el, performRemove, performLeave);
- }
- else {
- performLeave();
- }
- }
- else {
- performRemove();
- }
- };
- const removeFragment = (cur, end) => {
- // For fragments, directly remove all contained DOM nodes.
- // (fragment child nodes cannot have transition)
- let next;
- while (cur !== end) {
- next = hostNextSibling(cur);
- hostRemove(cur);
- cur = next;
- }
- hostRemove(end);
- };
- const unmountComponent = (instance, parentSuspense, doRemove) => {
- if (instance.type.__hmrId) {
- unregisterHMR(instance);
- }
- const { bum, scope, update, subTree, um } = instance;
- // beforeUnmount hook
- if (bum) {
- shared.invokeArrayFns(bum);
- }
- // stop effects in component scope
- scope.stop();
- // update may be null if a component is unmounted before its async
- // setup has resolved.
- if (update) {
- // so that scheduler will no longer invoke it
- update.active = false;
- unmount(subTree, instance, parentSuspense, doRemove);
- }
- // unmounted hook
- if (um) {
- queuePostRenderEffect(um, parentSuspense);
- }
- queuePostRenderEffect(() => {
- instance.isUnmounted = true;
- }, parentSuspense);
- // A component with async dep inside a pending suspense is unmounted before
- // its async dep resolves. This should remove the dep from the suspense, and
- // cause the suspense to resolve immediately if that was the last dep.
- if (parentSuspense &&
- parentSuspense.pendingBranch &&
- !parentSuspense.isUnmounted &&
- instance.asyncDep &&
- !instance.asyncResolved &&
- instance.suspenseId === parentSuspense.pendingId) {
- parentSuspense.deps--;
- if (parentSuspense.deps === 0) {
- parentSuspense.resolve();
- }
- }
- {
- devtoolsComponentRemoved(instance);
- }
- };
- const unmountChildren = (children, parentComponent, parentSuspense, doRemove = false, optimized = false, start = 0) => {
- for (let i = start; i < children.length; i++) {
- unmount(children[i], parentComponent, parentSuspense, doRemove, optimized);
- }
- };
- const getNextHostNode = vnode => {
- if (vnode.shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
- return getNextHostNode(vnode.component.subTree);
- }
- if (vnode.shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- return vnode.suspense.next();
- }
- return hostNextSibling((vnode.anchor || vnode.el));
- };
- const render = (vnode, container, isSVG) => {
- if (vnode == null) {
- if (container._vnode) {
- unmount(container._vnode, null, null, true);
- }
- }
- else {
- patch(container._vnode || null, vnode, container, null, null, null, isSVG);
- }
- flushPreFlushCbs();
- flushPostFlushCbs();
- container._vnode = vnode;
- };
- const internals = {
- p: patch,
- um: unmount,
- m: move,
- r: remove,
- mt: mountComponent,
- mc: mountChildren,
- pc: patchChildren,
- pbc: patchBlockChildren,
- n: getNextHostNode,
- o: options
- };
- let hydrate;
- let hydrateNode;
- if (createHydrationFns) {
- [hydrate, hydrateNode] = createHydrationFns(internals);
- }
- return {
- render,
- hydrate,
- createApp: createAppAPI(render, hydrate)
- };
- }
- function toggleRecurse({ effect, update }, allowed) {
- effect.allowRecurse = update.allowRecurse = allowed;
- }
- /**
- * #1156
- * When a component is HMR-enabled, we need to make sure that all static nodes
- * inside a block also inherit the DOM element from the previous tree so that
- * HMR updates (which are full updates) can retrieve the element for patching.
- *
- * #2080
- * Inside keyed `template` fragment static children, if a fragment is moved,
- * the children will always be moved. Therefore, in order to ensure correct move
- * position, el should be inherited from previous nodes.
- */
- function traverseStaticChildren(n1, n2, shallow = false) {
- const ch1 = n1.children;
- const ch2 = n2.children;
- if (shared.isArray(ch1) && shared.isArray(ch2)) {
- for (let i = 0; i < ch1.length; i++) {
- // this is only called in the optimized path so array children are
- // guaranteed to be vnodes
- const c1 = ch1[i];
- let c2 = ch2[i];
- if (c2.shapeFlag & 1 /* ShapeFlags.ELEMENT */ && !c2.dynamicChildren) {
- if (c2.patchFlag <= 0 || c2.patchFlag === 32 /* PatchFlags.HYDRATE_EVENTS */) {
- c2 = ch2[i] = cloneIfMounted(ch2[i]);
- c2.el = c1.el;
- }
- if (!shallow)
- traverseStaticChildren(c1, c2);
- }
- // #6852 also inherit for text nodes
- if (c2.type === Text) {
- c2.el = c1.el;
- }
- // also inherit for comment nodes, but not placeholders (e.g. v-if which
- // would have received .el during block patch)
- if (c2.type === Comment && !c2.el) {
- c2.el = c1.el;
- }
- }
- }
- }
- // https://en.wikipedia.org/wiki/Longest_increasing_subsequence
- function getSequence(arr) {
- const p = arr.slice();
- const result = [0];
- let i, j, u, v, c;
- const len = arr.length;
- for (i = 0; i < len; i++) {
- const arrI = arr[i];
- if (arrI !== 0) {
- j = result[result.length - 1];
- if (arr[j] < arrI) {
- p[i] = j;
- result.push(i);
- continue;
- }
- u = 0;
- v = result.length - 1;
- while (u < v) {
- c = (u + v) >> 1;
- if (arr[result[c]] < arrI) {
- u = c + 1;
- }
- else {
- v = c;
- }
- }
- if (arrI < arr[result[u]]) {
- if (u > 0) {
- p[i] = result[u - 1];
- }
- result[u] = i;
- }
- }
- }
- u = result.length;
- v = result[u - 1];
- while (u-- > 0) {
- result[u] = v;
- v = p[v];
- }
- return result;
- }
- const isTeleport = (type) => type.__isTeleport;
- const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === '');
- const isTargetSVG = (target) => typeof SVGElement !== 'undefined' && target instanceof SVGElement;
- const resolveTarget = (props, select) => {
- const targetSelector = props && props.to;
- if (shared.isString(targetSelector)) {
- if (!select) {
- warn(`Current renderer does not support string target for Teleports. ` +
- `(missing querySelector renderer option)`);
- return null;
- }
- else {
- const target = select(targetSelector);
- if (!target) {
- warn(`Failed to locate Teleport target with selector "${targetSelector}". ` +
- `Note the target element must exist before the component is mounted - ` +
- `i.e. the target cannot be rendered by the component itself, and ` +
- `ideally should be outside of the entire Vue component tree.`);
- }
- return target;
- }
- }
- else {
- if (!targetSelector && !isTeleportDisabled(props)) {
- warn(`Invalid Teleport target: ${targetSelector}`);
- }
- return targetSelector;
- }
- };
- const TeleportImpl = {
- __isTeleport: true,
- process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) {
- const { mc: mountChildren, pc: patchChildren, pbc: patchBlockChildren, o: { insert, querySelector, createText, createComment } } = internals;
- const disabled = isTeleportDisabled(n2.props);
- let { shapeFlag, children, dynamicChildren } = n2;
- // #3302
- // HMR updated, force full diff
- if (isHmrUpdating) {
- optimized = false;
- dynamicChildren = null;
- }
- if (n1 == null) {
- // insert anchors in the main view
- const placeholder = (n2.el = createComment('teleport start')
- );
- const mainAnchor = (n2.anchor = createComment('teleport end')
- );
- insert(placeholder, container, anchor);
- insert(mainAnchor, container, anchor);
- const target = (n2.target = resolveTarget(n2.props, querySelector));
- const targetAnchor = (n2.targetAnchor = createText(''));
- if (target) {
- insert(targetAnchor, target);
- // #2652 we could be teleporting from a non-SVG tree into an SVG tree
- isSVG = isSVG || isTargetSVG(target);
- }
- else if (!disabled) {
- warn('Invalid Teleport target on mount:', target, `(${typeof target})`);
- }
- const mount = (container, anchor) => {
- // Teleport *always* has Array children. This is enforced in both the
- // compiler and vnode children normalization.
- if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- mountChildren(children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized);
- }
- };
- if (disabled) {
- mount(container, mainAnchor);
- }
- else if (target) {
- mount(target, targetAnchor);
- }
- }
- else {
- // update content
- n2.el = n1.el;
- const mainAnchor = (n2.anchor = n1.anchor);
- const target = (n2.target = n1.target);
- const targetAnchor = (n2.targetAnchor = n1.targetAnchor);
- const wasDisabled = isTeleportDisabled(n1.props);
- const currentContainer = wasDisabled ? container : target;
- const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
- isSVG = isSVG || isTargetSVG(target);
- if (dynamicChildren) {
- // fast path when the teleport happens to be a block root
- patchBlockChildren(n1.dynamicChildren, dynamicChildren, currentContainer, parentComponent, parentSuspense, isSVG, slotScopeIds);
- // even in block tree mode we need to make sure all root-level nodes
- // in the teleport inherit previous DOM references so that they can
- // be moved in future patches.
- traverseStaticChildren(n1, n2, true);
- }
- else if (!optimized) {
- patchChildren(n1, n2, currentContainer, currentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, false);
- }
- if (disabled) {
- if (!wasDisabled) {
- // enabled -> disabled
- // move into main container
- moveTeleport(n2, container, mainAnchor, internals, 1 /* TeleportMoveTypes.TOGGLE */);
- }
- }
- else {
- // target changed
- if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
- const nextTarget = (n2.target = resolveTarget(n2.props, querySelector));
- if (nextTarget) {
- moveTeleport(n2, nextTarget, null, internals, 0 /* TeleportMoveTypes.TARGET_CHANGE */);
- }
- else {
- warn('Invalid Teleport target on update:', target, `(${typeof target})`);
- }
- }
- else if (wasDisabled) {
- // disabled -> enabled
- // move into teleport target
- moveTeleport(n2, target, targetAnchor, internals, 1 /* TeleportMoveTypes.TOGGLE */);
- }
- }
- }
- updateCssVars(n2);
- },
- remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) {
- const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode;
- if (target) {
- hostRemove(targetAnchor);
- }
- // an unmounted teleport should always remove its children if not disabled
- if (doRemove || !isTeleportDisabled(props)) {
- hostRemove(anchor);
- if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- for (let i = 0; i < children.length; i++) {
- const child = children[i];
- unmount(child, parentComponent, parentSuspense, true, !!child.dynamicChildren);
- }
- }
- }
- },
- move: moveTeleport,
- hydrate: hydrateTeleport
- };
- function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2 /* TeleportMoveTypes.REORDER */) {
- // move target anchor if this is a target change.
- if (moveType === 0 /* TeleportMoveTypes.TARGET_CHANGE */) {
- insert(vnode.targetAnchor, container, parentAnchor);
- }
- const { el, anchor, shapeFlag, children, props } = vnode;
- const isReorder = moveType === 2 /* TeleportMoveTypes.REORDER */;
- // move main view anchor if this is a re-order.
- if (isReorder) {
- insert(el, container, parentAnchor);
- }
- // if this is a re-order and teleport is enabled (content is in target)
- // do not move children. So the opposite is: only move children if this
- // is not a reorder, or the teleport is disabled
- if (!isReorder || isTeleportDisabled(props)) {
- // Teleport has either Array children or no children.
- if (shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- for (let i = 0; i < children.length; i++) {
- move(children[i], container, parentAnchor, 2 /* MoveType.REORDER */);
- }
- }
- }
- // move main view anchor if this is a re-order.
- if (isReorder) {
- insert(anchor, container, parentAnchor);
- }
- }
- function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, { o: { nextSibling, parentNode, querySelector } }, hydrateChildren) {
- const target = (vnode.target = resolveTarget(vnode.props, querySelector));
- if (target) {
- // if multiple teleports rendered to the same target element, we need to
- // pick up from where the last teleport finished instead of the first node
- const targetNode = target._lpa || target.firstChild;
- if (vnode.shapeFlag & 16 /* ShapeFlags.ARRAY_CHILDREN */) {
- if (isTeleportDisabled(vnode.props)) {
- vnode.anchor = hydrateChildren(nextSibling(node), vnode, parentNode(node), parentComponent, parentSuspense, slotScopeIds, optimized);
- vnode.targetAnchor = targetNode;
- }
- else {
- vnode.anchor = nextSibling(node);
- // lookahead until we find the target anchor
- // we cannot rely on return value of hydrateChildren() because there
- // could be nested teleports
- let targetAnchor = targetNode;
- while (targetAnchor) {
- targetAnchor = nextSibling(targetAnchor);
- if (targetAnchor &&
- targetAnchor.nodeType === 8 &&
- targetAnchor.data === 'teleport anchor') {
- vnode.targetAnchor = targetAnchor;
- target._lpa =
- vnode.targetAnchor && nextSibling(vnode.targetAnchor);
- break;
- }
- }
- hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
- }
- }
- updateCssVars(vnode);
- }
- return vnode.anchor && nextSibling(vnode.anchor);
- }
- // Force-casted public typing for h and TSX props inference
- const Teleport = TeleportImpl;
- function updateCssVars(vnode) {
- // presence of .ut method indicates owner component uses css vars.
- // code path here can assume browser environment.
- const ctx = vnode.ctx;
- if (ctx && ctx.ut) {
- let node = vnode.children[0].el;
- while (node !== vnode.targetAnchor) {
- if (node.nodeType === 1)
- node.setAttribute('data-v-owner', ctx.uid);
- node = node.nextSibling;
- }
- ctx.ut();
- }
- }
- const Fragment = Symbol('Fragment' );
- const Text = Symbol('Text' );
- const Comment = Symbol('Comment' );
- const Static = Symbol('Static' );
- // Since v-if and v-for are the two possible ways node structure can dynamically
- // change, once we consider v-if branches and each v-for fragment a block, we
- // can divide a template into nested blocks, and within each block the node
- // structure would be stable. This allows us to skip most children diffing
- // and only worry about the dynamic nodes (indicated by patch flags).
- const blockStack = [];
- let currentBlock = null;
- /**
- * Open a block.
- * This must be called before `createBlock`. It cannot be part of `createBlock`
- * because the children of the block are evaluated before `createBlock` itself
- * is called. The generated code typically looks like this:
- *
- * ```js
- * function render() {
- * return (openBlock(),createBlock('div', null, [...]))
- * }
- * ```
- * disableTracking is true when creating a v-for fragment block, since a v-for
- * fragment always diffs its children.
- *
- * @private
- */
- function openBlock(disableTracking = false) {
- blockStack.push((currentBlock = disableTracking ? null : []));
- }
- function closeBlock() {
- blockStack.pop();
- currentBlock = blockStack[blockStack.length - 1] || null;
- }
- // Whether we should be tracking dynamic child nodes inside a block.
- // Only tracks when this value is > 0
- // We are not using a simple boolean because this value may need to be
- // incremented/decremented by nested usage of v-once (see below)
- let isBlockTreeEnabled = 1;
- /**
- * Block tracking sometimes needs to be disabled, for example during the
- * creation of a tree that needs to be cached by v-once. The compiler generates
- * code like this:
- *
- * ``` js
- * _cache[1] || (
- * setBlockTracking(-1),
- * _cache[1] = createVNode(...),
- * setBlockTracking(1),
- * _cache[1]
- * )
- * ```
- *
- * @private
- */
- function setBlockTracking(value) {
- isBlockTreeEnabled += value;
- }
- function setupBlock(vnode) {
- // save current block children on the block vnode
- vnode.dynamicChildren =
- isBlockTreeEnabled > 0 ? currentBlock || shared.EMPTY_ARR : null;
- // close block
- closeBlock();
- // a block is always going to be patched, so track it as a child of its
- // parent block
- if (isBlockTreeEnabled > 0 && currentBlock) {
- currentBlock.push(vnode);
- }
- return vnode;
- }
- /**
- * @private
- */
- function createElementBlock(type, props, children, patchFlag, dynamicProps, shapeFlag) {
- return setupBlock(createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, true /* isBlock */));
- }
- /**
- * Create a block root vnode. Takes the same exact arguments as `createVNode`.
- * A block root keeps track of dynamic nodes within the block in the
- * `dynamicChildren` array.
- *
- * @private
- */
- function createBlock(type, props, children, patchFlag, dynamicProps) {
- return setupBlock(createVNode(type, props, children, patchFlag, dynamicProps, true /* isBlock: prevent a block from tracking itself */));
- }
- function isVNode(value) {
- return value ? value.__v_isVNode === true : false;
- }
- function isSameVNodeType(n1, n2) {
- if (n2.shapeFlag & 6 /* ShapeFlags.COMPONENT */ &&
- hmrDirtyComponents.has(n2.type)) {
- // #7042, ensure the vnode being unmounted during HMR
- // bitwise operations to remove keep alive flags
- n1.shapeFlag &= ~256 /* ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE */;
- n2.shapeFlag &= ~512 /* ShapeFlags.COMPONENT_KEPT_ALIVE */;
- // HMR only: if the component has been hot-updated, force a reload.
- return false;
- }
- return n1.type === n2.type && n1.key === n2.key;
- }
- let vnodeArgsTransformer;
- /**
- * Internal API for registering an arguments transform for createVNode
- * used for creating stubs in the test-utils
- * It is *internal* but needs to be exposed for test-utils to pick up proper
- * typings
- */
- function transformVNodeArgs(transformer) {
- vnodeArgsTransformer = transformer;
- }
- const createVNodeWithArgsTransform = (...args) => {
- return _createVNode(...(vnodeArgsTransformer
- ? vnodeArgsTransformer(args, currentRenderingInstance)
- : args));
- };
- const InternalObjectKey = `__vInternal`;
- const normalizeKey = ({ key }) => key != null ? key : null;
- const normalizeRef = ({ ref, ref_key, ref_for }) => {
- return (ref != null
- ? shared.isString(ref) || reactivity.isRef(ref) || shared.isFunction(ref)
- ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for }
- : ref
- : null);
- };
- function createBaseVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, shapeFlag = type === Fragment ? 0 : 1 /* ShapeFlags.ELEMENT */, isBlockNode = false, needFullChildrenNormalization = false) {
- const vnode = {
- __v_isVNode: true,
- __v_skip: true,
- type,
- props,
- key: props && normalizeKey(props),
- ref: props && normalizeRef(props),
- scopeId: currentScopeId,
- slotScopeIds: null,
- children,
- component: null,
- suspense: null,
- ssContent: null,
- ssFallback: null,
- dirs: null,
- transition: null,
- el: null,
- anchor: null,
- target: null,
- targetAnchor: null,
- staticCount: 0,
- shapeFlag,
- patchFlag,
- dynamicProps,
- dynamicChildren: null,
- appContext: null,
- ctx: currentRenderingInstance
- };
- if (needFullChildrenNormalization) {
- normalizeChildren(vnode, children);
- // normalize suspense children
- if (shapeFlag & 128 /* ShapeFlags.SUSPENSE */) {
- type.normalize(vnode);
- }
- }
- else if (children) {
- // compiled element vnode - if children is passed, only possible types are
- // string or Array.
- vnode.shapeFlag |= shared.isString(children)
- ? 8 /* ShapeFlags.TEXT_CHILDREN */
- : 16 /* ShapeFlags.ARRAY_CHILDREN */;
- }
- // validate key
- if (vnode.key !== vnode.key) {
- warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);
- }
- // track vnode for block tree
- if (isBlockTreeEnabled > 0 &&
- // avoid a block node from tracking itself
- !isBlockNode &&
- // has current parent block
- currentBlock &&
- // presence of a patch flag indicates this node needs patching on updates.
- // component nodes also should always be patched, because even if the
- // component doesn't need to update, it needs to persist the instance on to
- // the next vnode so that it can be properly unmounted later.
- (vnode.patchFlag > 0 || shapeFlag & 6 /* ShapeFlags.COMPONENT */) &&
- // the EVENTS flag is only for hydration and if it is the only flag, the
- // vnode should not be considered dynamic due to handler caching.
- vnode.patchFlag !== 32 /* PatchFlags.HYDRATE_EVENTS */) {
- currentBlock.push(vnode);
- }
- return vnode;
- }
- const createVNode = (createVNodeWithArgsTransform );
- function _createVNode(type, props = null, children = null, patchFlag = 0, dynamicProps = null, isBlockNode = false) {
- if (!type || type === NULL_DYNAMIC_COMPONENT) {
- if (!type) {
- warn(`Invalid vnode type when creating vnode: ${type}.`);
- }
- type = Comment;
- }
- if (isVNode(type)) {
- // createVNode receiving an existing vnode. This happens in cases like
- // <component :is="vnode"/>
- // #2078 make sure to merge refs during the clone instead of overwriting it
- const cloned = cloneVNode(type, props, true /* mergeRef: true */);
- if (children) {
- normalizeChildren(cloned, children);
- }
- if (isBlockTreeEnabled > 0 && !isBlockNode && currentBlock) {
- if (cloned.shapeFlag & 6 /* ShapeFlags.COMPONENT */) {
- currentBlock[currentBlock.indexOf(type)] = cloned;
- }
- else {
- currentBlock.push(cloned);
- }
- }
- cloned.patchFlag |= -2 /* PatchFlags.BAIL */;
- return cloned;
- }
- // class component normalization.
- if (isClassComponent(type)) {
- type = type.__vccOpts;
- }
- // class & style normalization.
- if (props) {
- // for reactive or proxy objects, we need to clone it to enable mutation.
- props = guardReactiveProps(props);
- let { class: klass, style } = props;
- if (klass && !shared.isString(klass)) {
- props.class = shared.normalizeClass(klass);
- }
- if (shared.isObject(style)) {
- // reactive state objects need to be cloned since they are likely to be
- // mutated
- if (reactivity.isProxy(style) && !shared.isArray(style)) {
- style = shared.extend({}, style);
- }
- props.style = shared.normalizeStyle(style);
- }
- }
- // encode the vnode type information into a bitmap
- const shapeFlag = shared.isString(type)
- ? 1 /* ShapeFlags.ELEMENT */
- : isSuspense(type)
- ? 128 /* ShapeFlags.SUSPENSE */
- : isTeleport(type)
- ? 64 /* ShapeFlags.TELEPORT */
- : shared.isObject(type)
- ? 4 /* ShapeFlags.STATEFUL_COMPONENT */
- : shared.isFunction(type)
- ? 2 /* ShapeFlags.FUNCTIONAL_COMPONENT */
- : 0;
- if (shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */ && reactivity.isProxy(type)) {
- type = reactivity.toRaw(type);
- warn(`Vue received a Component which was made a reactive object. This can ` +
- `lead to unnecessary performance overhead, and should be avoided by ` +
- `marking the component with \`markRaw\` or using \`shallowRef\` ` +
- `instead of \`ref\`.`, `\nComponent that was made reactive: `, type);
- }
- return createBaseVNode(type, props, children, patchFlag, dynamicProps, shapeFlag, isBlockNode, true);
- }
- function guardReactiveProps(props) {
- if (!props)
- return null;
- return reactivity.isProxy(props) || InternalObjectKey in props
- ? shared.extend({}, props)
- : props;
- }
- function cloneVNode(vnode, extraProps, mergeRef = false) {
- // This is intentionally NOT using spread or extend to avoid the runtime
- // key enumeration cost.
- const { props, ref, patchFlag, children } = vnode;
- const mergedProps = extraProps ? mergeProps(props || {}, extraProps) : props;
- const cloned = {
- __v_isVNode: true,
- __v_skip: true,
- type: vnode.type,
- props: mergedProps,
- key: mergedProps && normalizeKey(mergedProps),
- ref: extraProps && extraProps.ref
- ? // #2078 in the case of <component :is="vnode" ref="extra"/>
- // if the vnode itself already has a ref, cloneVNode will need to merge
- // the refs so the single vnode can be set on multiple refs
- mergeRef && ref
- ? shared.isArray(ref)
- ? ref.concat(normalizeRef(extraProps))
- : [ref, normalizeRef(extraProps)]
- : normalizeRef(extraProps)
- : ref,
- scopeId: vnode.scopeId,
- slotScopeIds: vnode.slotScopeIds,
- children: patchFlag === -1 /* PatchFlags.HOISTED */ && shared.isArray(children)
- ? children.map(deepCloneVNode)
- : children,
- target: vnode.target,
- targetAnchor: vnode.targetAnchor,
- staticCount: vnode.staticCount,
- shapeFlag: vnode.shapeFlag,
- // if the vnode is cloned with extra props, we can no longer assume its
- // existing patch flag to be reliable and need to add the FULL_PROPS flag.
- // note: preserve flag for fragments since they use the flag for children
- // fast paths only.
- patchFlag: extraProps && vnode.type !== Fragment
- ? patchFlag === -1 // hoisted node
- ? 16 /* PatchFlags.FULL_PROPS */
- : patchFlag | 16 /* PatchFlags.FULL_PROPS */
- : patchFlag,
- dynamicProps: vnode.dynamicProps,
- dynamicChildren: vnode.dynamicChildren,
- appContext: vnode.appContext,
- dirs: vnode.dirs,
- transition: vnode.transition,
- // These should technically only be non-null on mounted VNodes. However,
- // they *should* be copied for kept-alive vnodes. So we just always copy
- // them since them being non-null during a mount doesn't affect the logic as
- // they will simply be overwritten.
- component: vnode.component,
- suspense: vnode.suspense,
- ssContent: vnode.ssContent && cloneVNode(vnode.ssContent),
- ssFallback: vnode.ssFallback && cloneVNode(vnode.ssFallback),
- el: vnode.el,
- anchor: vnode.anchor,
- ctx: vnode.ctx
- };
- return cloned;
- }
- /**
- * Dev only, for HMR of hoisted vnodes reused in v-for
- * https://github.com/vitejs/vite/issues/2022
- */
- function deepCloneVNode(vnode) {
- const cloned = cloneVNode(vnode);
- if (shared.isArray(vnode.children)) {
- cloned.children = vnode.children.map(deepCloneVNode);
- }
- return cloned;
- }
- /**
- * @private
- */
- function createTextVNode(text = ' ', flag = 0) {
- return createVNode(Text, null, text, flag);
- }
- /**
- * @private
- */
- function createStaticVNode(content, numberOfNodes) {
- // A static vnode can contain multiple stringified elements, and the number
- // of elements is necessary for hydration.
- const vnode = createVNode(Static, null, content);
- vnode.staticCount = numberOfNodes;
- return vnode;
- }
- /**
- * @private
- */
- function createCommentVNode(text = '',
- // when used as the v-else branch, the comment node must be created as a
- // block to ensure correct updates.
- asBlock = false) {
- return asBlock
- ? (openBlock(), createBlock(Comment, null, text))
- : createVNode(Comment, null, text);
- }
- function normalizeVNode(child) {
- if (child == null || typeof child === 'boolean') {
- // empty placeholder
- return createVNode(Comment);
- }
- else if (shared.isArray(child)) {
- // fragment
- return createVNode(Fragment, null,
- // #3666, avoid reference pollution when reusing vnode
- child.slice());
- }
- else if (typeof child === 'object') {
- // already vnode, this should be the most common since compiled templates
- // always produce all-vnode children arrays
- return cloneIfMounted(child);
- }
- else {
- // strings and numbers
- return createVNode(Text, null, String(child));
- }
- }
- // optimized normalization for template-compiled render fns
- function cloneIfMounted(child) {
- return (child.el === null && child.patchFlag !== -1 /* PatchFlags.HOISTED */) ||
- child.memo
- ? child
- : cloneVNode(child);
- }
- function normalizeChildren(vnode, children) {
- let type = 0;
- const { shapeFlag } = vnode;
- if (children == null) {
- children = null;
- }
- else if (shared.isArray(children)) {
- type = 16 /* ShapeFlags.ARRAY_CHILDREN */;
- }
- else if (typeof children === 'object') {
- if (shapeFlag & (1 /* ShapeFlags.ELEMENT */ | 64 /* ShapeFlags.TELEPORT */)) {
- // Normalize slot to plain children for plain element and Teleport
- const slot = children.default;
- if (slot) {
- // _c marker is added by withCtx() indicating this is a compiled slot
- slot._c && (slot._d = false);
- normalizeChildren(vnode, slot());
- slot._c && (slot._d = true);
- }
- return;
- }
- else {
- type = 32 /* ShapeFlags.SLOTS_CHILDREN */;
- const slotFlag = children._;
- if (!slotFlag && !(InternalObjectKey in children)) {
- children._ctx = currentRenderingInstance;
- }
- else if (slotFlag === 3 /* SlotFlags.FORWARDED */ && currentRenderingInstance) {
- // a child component receives forwarded slots from the parent.
- // its slot type is determined by its parent's slot type.
- if (currentRenderingInstance.slots._ === 1 /* SlotFlags.STABLE */) {
- children._ = 1 /* SlotFlags.STABLE */;
- }
- else {
- children._ = 2 /* SlotFlags.DYNAMIC */;
- vnode.patchFlag |= 1024 /* PatchFlags.DYNAMIC_SLOTS */;
- }
- }
- }
- }
- else if (shared.isFunction(children)) {
- children = { default: children, _ctx: currentRenderingInstance };
- type = 32 /* ShapeFlags.SLOTS_CHILDREN */;
- }
- else {
- children = String(children);
- // force teleport children to array so it can be moved around
- if (shapeFlag & 64 /* ShapeFlags.TELEPORT */) {
- type = 16 /* ShapeFlags.ARRAY_CHILDREN */;
- children = [createTextVNode(children)];
- }
- else {
- type = 8 /* ShapeFlags.TEXT_CHILDREN */;
- }
- }
- vnode.children = children;
- vnode.shapeFlag |= type;
- }
- function mergeProps(...args) {
- const ret = {};
- for (let i = 0; i < args.length; i++) {
- const toMerge = args[i];
- for (const key in toMerge) {
- if (key === 'class') {
- if (ret.class !== toMerge.class) {
- ret.class = shared.normalizeClass([ret.class, toMerge.class]);
- }
- }
- else if (key === 'style') {
- ret.style = shared.normalizeStyle([ret.style, toMerge.style]);
- }
- else if (shared.isOn(key)) {
- const existing = ret[key];
- const incoming = toMerge[key];
- if (incoming &&
- existing !== incoming &&
- !(shared.isArray(existing) && existing.includes(incoming))) {
- ret[key] = existing
- ? [].concat(existing, incoming)
- : incoming;
- }
- }
- else if (key !== '') {
- ret[key] = toMerge[key];
- }
- }
- }
- return ret;
- }
- function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
- callWithAsyncErrorHandling(hook, instance, 7 /* ErrorCodes.VNODE_HOOK */, [
- vnode,
- prevVNode
- ]);
- }
- const emptyAppContext = createAppContext();
- let uid$1 = 0;
- function createComponentInstance(vnode, parent, suspense) {
- const type = vnode.type;
- // inherit parent app context - or - if root, adopt from root vnode
- const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
- const instance = {
- uid: uid$1++,
- vnode,
- type,
- parent,
- appContext,
- root: null,
- next: null,
- subTree: null,
- effect: null,
- update: null,
- scope: new reactivity.EffectScope(true /* detached */),
- render: null,
- proxy: null,
- exposed: null,
- exposeProxy: null,
- withProxy: null,
- provides: parent ? parent.provides : Object.create(appContext.provides),
- accessCache: null,
- renderCache: [],
- // local resolved assets
- components: null,
- directives: null,
- // resolved props and emits options
- propsOptions: normalizePropsOptions(type, appContext),
- emitsOptions: normalizeEmitsOptions(type, appContext),
- // emit
- emit: null,
- emitted: null,
- // props default value
- propsDefaults: shared.EMPTY_OBJ,
- // inheritAttrs
- inheritAttrs: type.inheritAttrs,
- // state
- ctx: shared.EMPTY_OBJ,
- data: shared.EMPTY_OBJ,
- props: shared.EMPTY_OBJ,
- attrs: shared.EMPTY_OBJ,
- slots: shared.EMPTY_OBJ,
- refs: shared.EMPTY_OBJ,
- setupState: shared.EMPTY_OBJ,
- setupContext: null,
- // suspense related
- suspense,
- suspenseId: suspense ? suspense.pendingId : 0,
- asyncDep: null,
- asyncResolved: false,
- // lifecycle hooks
- // not using enums here because it results in computed properties
- isMounted: false,
- isUnmounted: false,
- isDeactivated: false,
- bc: null,
- c: null,
- bm: null,
- m: null,
- bu: null,
- u: null,
- um: null,
- bum: null,
- da: null,
- a: null,
- rtg: null,
- rtc: null,
- ec: null,
- sp: null
- };
- {
- instance.ctx = createDevRenderContext(instance);
- }
- instance.root = parent ? parent.root : instance;
- instance.emit = emit$1.bind(null, instance);
- // apply custom element special handling
- if (vnode.ce) {
- vnode.ce(instance);
- }
- return instance;
- }
- let currentInstance = null;
- const getCurrentInstance = () => currentInstance || currentRenderingInstance;
- const setCurrentInstance = (instance) => {
- currentInstance = instance;
- instance.scope.on();
- };
- const unsetCurrentInstance = () => {
- currentInstance && currentInstance.scope.off();
- currentInstance = null;
- };
- const isBuiltInTag = /*#__PURE__*/ shared.makeMap('slot,component');
- function validateComponentName(name, config) {
- const appIsNativeTag = config.isNativeTag || shared.NO;
- if (isBuiltInTag(name) || appIsNativeTag(name)) {
- warn('Do not use built-in or reserved HTML elements as component id: ' + name);
- }
- }
- function isStatefulComponent(instance) {
- return instance.vnode.shapeFlag & 4 /* ShapeFlags.STATEFUL_COMPONENT */;
- }
- let isInSSRComponentSetup = false;
- function setupComponent(instance, isSSR = false) {
- isInSSRComponentSetup = isSSR;
- const { props, children } = instance.vnode;
- const isStateful = isStatefulComponent(instance);
- initProps(instance, props, isStateful, isSSR);
- initSlots(instance, children);
- const setupResult = isStateful
- ? setupStatefulComponent(instance, isSSR)
- : undefined;
- isInSSRComponentSetup = false;
- return setupResult;
- }
- function setupStatefulComponent(instance, isSSR) {
- var _a;
- const Component = instance.type;
- {
- if (Component.name) {
- validateComponentName(Component.name, instance.appContext.config);
- }
- if (Component.components) {
- const names = Object.keys(Component.components);
- for (let i = 0; i < names.length; i++) {
- validateComponentName(names[i], instance.appContext.config);
- }
- }
- if (Component.directives) {
- const names = Object.keys(Component.directives);
- for (let i = 0; i < names.length; i++) {
- validateDirectiveName(names[i]);
- }
- }
- if (Component.compilerOptions && isRuntimeOnly()) {
- warn(`"compilerOptions" is only supported when using a build of Vue that ` +
- `includes the runtime compiler. Since you are using a runtime-only ` +
- `build, the options should be passed via your build tool config instead.`);
- }
- }
- // 0. create render proxy property access cache
- instance.accessCache = Object.create(null);
- // 1. create public instance / render proxy
- // also mark it raw so it's never observed
- instance.proxy = reactivity.markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers));
- {
- exposePropsOnRenderContext(instance);
- }
- // 2. call setup()
- const { setup } = Component;
- if (setup) {
- const setupContext = (instance.setupContext =
- setup.length > 1 ? createSetupContext(instance) : null);
- setCurrentInstance(instance);
- reactivity.pauseTracking();
- const setupResult = callWithErrorHandling(setup, instance, 0 /* ErrorCodes.SETUP_FUNCTION */, [reactivity.shallowReadonly(instance.props) , setupContext]);
- reactivity.resetTracking();
- unsetCurrentInstance();
- if (shared.isPromise(setupResult)) {
- setupResult.then(unsetCurrentInstance, unsetCurrentInstance);
- if (isSSR) {
- // return the promise so server-renderer can wait on it
- return setupResult
- .then((resolvedResult) => {
- handleSetupResult(instance, resolvedResult, isSSR);
- })
- .catch(e => {
- handleError(e, instance, 0 /* ErrorCodes.SETUP_FUNCTION */);
- });
- }
- else {
- // async setup returned Promise.
- // bail here and wait for re-entry.
- instance.asyncDep = setupResult;
- if (!instance.suspense) {
- const name = (_a = Component.name) !== null && _a !== void 0 ? _a : 'Anonymous';
- warn(`Component <${name}>: setup function returned a promise, but no ` +
- `<Suspense> boundary was found in the parent component tree. ` +
- `A component with async setup() must be nested in a <Suspense> ` +
- `in order to be rendered.`);
- }
- }
- }
- else {
- handleSetupResult(instance, setupResult, isSSR);
- }
- }
- else {
- finishComponentSetup(instance, isSSR);
- }
- }
- function handleSetupResult(instance, setupResult, isSSR) {
- if (shared.isFunction(setupResult)) {
- // setup returned an inline render function
- if (instance.type.__ssrInlineRender) {
- // when the function's name is `ssrRender` (compiled by SFC inline mode),
- // set it as ssrRender instead.
- instance.ssrRender = setupResult;
- }
- else {
- instance.render = setupResult;
- }
- }
- else if (shared.isObject(setupResult)) {
- if (isVNode(setupResult)) {
- warn(`setup() should not return VNodes directly - ` +
- `return a render function instead.`);
- }
- // setup returned bindings.
- // assuming a render function compiled from template is present.
- {
- instance.devtoolsRawSetupState = setupResult;
- }
- instance.setupState = reactivity.proxyRefs(setupResult);
- {
- exposeSetupStateOnRenderContext(instance);
- }
- }
- else if (setupResult !== undefined) {
- warn(`setup() should return an object. Received: ${setupResult === null ? 'null' : typeof setupResult}`);
- }
- finishComponentSetup(instance, isSSR);
- }
- let compile;
- let installWithProxy;
- /**
- * For runtime-dom to register the compiler.
- * Note the exported method uses any to avoid d.ts relying on the compiler types.
- */
- function registerRuntimeCompiler(_compile) {
- compile = _compile;
- installWithProxy = i => {
- if (i.render._rc) {
- i.withProxy = new Proxy(i.ctx, RuntimeCompiledPublicInstanceProxyHandlers);
- }
- };
- }
- // dev only
- const isRuntimeOnly = () => !compile;
- function finishComponentSetup(instance, isSSR, skipOptions) {
- const Component = instance.type;
- // template / render function normalization
- // could be already set when returned from setup()
- if (!instance.render) {
- // only do on-the-fly compile if not in SSR - SSR on-the-fly compilation
- // is done by server-renderer
- if (!isSSR && compile && !Component.render) {
- const template = Component.template ||
- resolveMergedOptions(instance).template;
- if (template) {
- {
- startMeasure(instance, `compile`);
- }
- const { isCustomElement, compilerOptions } = instance.appContext.config;
- const { delimiters, compilerOptions: componentCompilerOptions } = Component;
- const finalCompilerOptions = shared.extend(shared.extend({
- isCustomElement,
- delimiters
- }, compilerOptions), componentCompilerOptions);
- Component.render = compile(template, finalCompilerOptions);
- {
- endMeasure(instance, `compile`);
- }
- }
- }
- instance.render = (Component.render || shared.NOOP);
- // for runtime-compiled render functions using `with` blocks, the render
- // proxy used needs a different `has` handler which is more performant and
- // also only allows a whitelist of globals to fallthrough.
- if (installWithProxy) {
- installWithProxy(instance);
- }
- }
- // support for 2.x options
- {
- setCurrentInstance(instance);
- reactivity.pauseTracking();
- applyOptions(instance);
- reactivity.resetTracking();
- unsetCurrentInstance();
- }
- // warn missing template/render
- // the runtime compilation of template in SSR is done by server-render
- if (!Component.render && instance.render === shared.NOOP && !isSSR) {
- /* istanbul ignore if */
- if (!compile && Component.template) {
- warn(`Component provided template option but ` +
- `runtime compilation is not supported in this build of Vue.` +
- (``) /* should not happen */);
- }
- else {
- warn(`Component is missing template or render function.`);
- }
- }
- }
- function createAttrsProxy(instance) {
- return new Proxy(instance.attrs, {
- get(target, key) {
- markAttrsAccessed();
- reactivity.track(instance, "get" /* TrackOpTypes.GET */, '$attrs');
- return target[key];
- },
- set() {
- warn(`setupContext.attrs is readonly.`);
- return false;
- },
- deleteProperty() {
- warn(`setupContext.attrs is readonly.`);
- return false;
- }
- }
- );
- }
- function createSetupContext(instance) {
- const expose = exposed => {
- if (instance.exposed) {
- warn(`expose() should be called only once per setup().`);
- }
- instance.exposed = exposed || {};
- };
- let attrs;
- {
- // We use getters in dev in case libs like test-utils overwrite instance
- // properties (overwrites should not be done in prod)
- return Object.freeze({
- get attrs() {
- return attrs || (attrs = createAttrsProxy(instance));
- },
- get slots() {
- return reactivity.shallowReadonly(instance.slots);
- },
- get emit() {
- return (event, ...args) => instance.emit(event, ...args);
- },
- expose
- });
- }
- }
- function getExposeProxy(instance) {
- if (instance.exposed) {
- return (instance.exposeProxy ||
- (instance.exposeProxy = new Proxy(reactivity.proxyRefs(reactivity.markRaw(instance.exposed)), {
- get(target, key) {
- if (key in target) {
- return target[key];
- }
- else if (key in publicPropertiesMap) {
- return publicPropertiesMap[key](instance);
- }
- },
- has(target, key) {
- return key in target || key in publicPropertiesMap;
- }
- })));
- }
- }
- const classifyRE = /(?:^|[-_])(\w)/g;
- const classify = (str) => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '');
- function getComponentName(Component, includeInferred = true) {
- return shared.isFunction(Component)
- ? Component.displayName || Component.name
- : Component.name || (includeInferred && Component.__name);
- }
- /* istanbul ignore next */
- function formatComponentName(instance, Component, isRoot = false) {
- let name = getComponentName(Component);
- if (!name && Component.__file) {
- const match = Component.__file.match(/([^/\\]+)\.\w+$/);
- if (match) {
- name = match[1];
- }
- }
- if (!name && instance && instance.parent) {
- // try to infer the name based on reverse resolution
- const inferFromRegistry = (registry) => {
- for (const key in registry) {
- if (registry[key] === Component) {
- return key;
- }
- }
- };
- name =
- inferFromRegistry(instance.components ||
- instance.parent.type.components) || inferFromRegistry(instance.appContext.components);
- }
- return name ? classify(name) : isRoot ? `App` : `Anonymous`;
- }
- function isClassComponent(value) {
- return shared.isFunction(value) && '__vccOpts' in value;
- }
- const computed = ((getterOrOptions, debugOptions) => {
- // @ts-ignore
- return reactivity.computed(getterOrOptions, debugOptions, isInSSRComponentSetup);
- });
- // dev only
- const warnRuntimeUsage = (method) => warn(`${method}() is a compiler-hint helper that is only usable inside ` +
- `<script setup> of a single file component. Its arguments should be ` +
- `compiled away and passing it at runtime has no effect.`);
- // implementation
- function defineProps() {
- {
- warnRuntimeUsage(`defineProps`);
- }
- return null;
- }
- // implementation
- function defineEmits() {
- {
- warnRuntimeUsage(`defineEmits`);
- }
- return null;
- }
- /**
- * Vue `<script setup>` compiler macro for declaring a component's exposed
- * instance properties when it is accessed by a parent component via template
- * refs.
- *
- * `<script setup>` components are closed by default - i.e. variables inside
- * the `<script setup>` scope is not exposed to parent unless explicitly exposed
- * via `defineExpose`.
- *
- * This is only usable inside `<script setup>`, is compiled away in the
- * output and should **not** be actually called at runtime.
- */
- function defineExpose(exposed) {
- {
- warnRuntimeUsage(`defineExpose`);
- }
- }
- /**
- * Vue `<script setup>` compiler macro for providing props default values when
- * using type-based `defineProps` declaration.
- *
- * Example usage:
- * ```ts
- * withDefaults(defineProps<{
- * size?: number
- * labels?: string[]
- * }>(), {
- * size: 3,
- * labels: () => ['default label']
- * })
- * ```
- *
- * This is only usable inside `<script setup>`, is compiled away in the output
- * and should **not** be actually called at runtime.
- */
- function withDefaults(props, defaults) {
- {
- warnRuntimeUsage(`withDefaults`);
- }
- return null;
- }
- function useSlots() {
- return getContext().slots;
- }
- function useAttrs() {
- return getContext().attrs;
- }
- function getContext() {
- const i = getCurrentInstance();
- if (!i) {
- warn(`useContext() called without active instance.`);
- }
- return i.setupContext || (i.setupContext = createSetupContext(i));
- }
- /**
- * Runtime helper for merging default declarations. Imported by compiled code
- * only.
- * @internal
- */
- function mergeDefaults(raw, defaults) {
- const props = shared.isArray(raw)
- ? raw.reduce((normalized, p) => ((normalized[p] = {}), normalized), {})
- : raw;
- for (const key in defaults) {
- const opt = props[key];
- if (opt) {
- if (shared.isArray(opt) || shared.isFunction(opt)) {
- props[key] = { type: opt, default: defaults[key] };
- }
- else {
- opt.default = defaults[key];
- }
- }
- else if (opt === null) {
- props[key] = { default: defaults[key] };
- }
- else {
- warn(`props default key "${key}" has no corresponding declaration.`);
- }
- }
- return props;
- }
- /**
- * Used to create a proxy for the rest element when destructuring props with
- * defineProps().
- * @internal
- */
- function createPropsRestProxy(props, excludedKeys) {
- const ret = {};
- for (const key in props) {
- if (!excludedKeys.includes(key)) {
- Object.defineProperty(ret, key, {
- enumerable: true,
- get: () => props[key]
- });
- }
- }
- return ret;
- }
- /**
- * `<script setup>` helper for persisting the current instance context over
- * async/await flows.
- *
- * `@vue/compiler-sfc` converts the following:
- *
- * ```ts
- * const x = await foo()
- * ```
- *
- * into:
- *
- * ```ts
- * let __temp, __restore
- * const x = (([__temp, __restore] = withAsyncContext(() => foo())),__temp=await __temp,__restore(),__temp)
- * ```
- * @internal
- */
- function withAsyncContext(getAwaitable) {
- const ctx = getCurrentInstance();
- if (!ctx) {
- warn(`withAsyncContext called without active current instance. ` +
- `This is likely a bug.`);
- }
- let awaitable = getAwaitable();
- unsetCurrentInstance();
- if (shared.isPromise(awaitable)) {
- awaitable = awaitable.catch(e => {
- setCurrentInstance(ctx);
- throw e;
- });
- }
- return [awaitable, () => setCurrentInstance(ctx)];
- }
- // Actual implementation
- function h(type, propsOrChildren, children) {
- const l = arguments.length;
- if (l === 2) {
- if (shared.isObject(propsOrChildren) && !shared.isArray(propsOrChildren)) {
- // single vnode without props
- if (isVNode(propsOrChildren)) {
- return createVNode(type, null, [propsOrChildren]);
- }
- // props without children
- return createVNode(type, propsOrChildren);
- }
- else {
- // omit props
- return createVNode(type, null, propsOrChildren);
- }
- }
- else {
- if (l > 3) {
- children = Array.prototype.slice.call(arguments, 2);
- }
- else if (l === 3 && isVNode(children)) {
- children = [children];
- }
- return createVNode(type, propsOrChildren, children);
- }
- }
- const ssrContextKey = Symbol(`ssrContext` );
- const useSSRContext = () => {
- {
- const ctx = inject(ssrContextKey);
- if (!ctx) {
- warn(`Server rendering context not provided. Make sure to only call ` +
- `useSSRContext() conditionally in the server build.`);
- }
- return ctx;
- }
- };
- function isShallow(value) {
- return !!(value && value["__v_isShallow" /* ReactiveFlags.IS_SHALLOW */]);
- }
- function initCustomFormatter() {
- /* eslint-disable no-restricted-globals */
- if (typeof window === 'undefined') {
- return;
- }
- const vueStyle = { style: 'color:#3ba776' };
- const numberStyle = { style: 'color:#0b1bc9' };
- const stringStyle = { style: 'color:#b62e24' };
- const keywordStyle = { style: 'color:#9d288c' };
- // custom formatter for Chrome
- // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
- const formatter = {
- header(obj) {
- // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
- if (!shared.isObject(obj)) {
- return null;
- }
- if (obj.__isVue) {
- return ['div', vueStyle, `VueInstance`];
- }
- else if (reactivity.isRef(obj)) {
- return [
- 'div',
- {},
- ['span', vueStyle, genRefFlag(obj)],
- '<',
- formatValue(obj.value),
- `>`
- ];
- }
- else if (reactivity.isReactive(obj)) {
- return [
- 'div',
- {},
- ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
- '<',
- formatValue(obj),
- `>${reactivity.isReadonly(obj) ? ` (readonly)` : ``}`
- ];
- }
- else if (reactivity.isReadonly(obj)) {
- return [
- 'div',
- {},
- ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
- '<',
- formatValue(obj),
- '>'
- ];
- }
- return null;
- },
- hasBody(obj) {
- return obj && obj.__isVue;
- },
- body(obj) {
- if (obj && obj.__isVue) {
- return [
- 'div',
- {},
- ...formatInstance(obj.$)
- ];
- }
- }
- };
- function formatInstance(instance) {
- const blocks = [];
- if (instance.type.props && instance.props) {
- blocks.push(createInstanceBlock('props', reactivity.toRaw(instance.props)));
- }
- if (instance.setupState !== shared.EMPTY_OBJ) {
- blocks.push(createInstanceBlock('setup', instance.setupState));
- }
- if (instance.data !== shared.EMPTY_OBJ) {
- blocks.push(createInstanceBlock('data', reactivity.toRaw(instance.data)));
- }
- const computed = extractKeys(instance, 'computed');
- if (computed) {
- blocks.push(createInstanceBlock('computed', computed));
- }
- const injected = extractKeys(instance, 'inject');
- if (injected) {
- blocks.push(createInstanceBlock('injected', injected));
- }
- blocks.push([
- 'div',
- {},
- [
- 'span',
- {
- style: keywordStyle.style + ';opacity:0.66'
- },
- '$ (internal): '
- ],
- ['object', { object: instance }]
- ]);
- return blocks;
- }
- function createInstanceBlock(type, target) {
- target = shared.extend({}, target);
- if (!Object.keys(target).length) {
- return ['span', {}];
- }
- return [
- 'div',
- { style: 'line-height:1.25em;margin-bottom:0.6em' },
- [
- 'div',
- {
- style: 'color:#476582'
- },
- type
- ],
- [
- 'div',
- {
- style: 'padding-left:1.25em'
- },
- ...Object.keys(target).map(key => {
- return [
- 'div',
- {},
- ['span', keywordStyle, key + ': '],
- formatValue(target[key], false)
- ];
- })
- ]
- ];
- }
- function formatValue(v, asRaw = true) {
- if (typeof v === 'number') {
- return ['span', numberStyle, v];
- }
- else if (typeof v === 'string') {
- return ['span', stringStyle, JSON.stringify(v)];
- }
- else if (typeof v === 'boolean') {
- return ['span', keywordStyle, v];
- }
- else if (shared.isObject(v)) {
- return ['object', { object: asRaw ? reactivity.toRaw(v) : v }];
- }
- else {
- return ['span', stringStyle, String(v)];
- }
- }
- function extractKeys(instance, type) {
- const Comp = instance.type;
- if (shared.isFunction(Comp)) {
- return;
- }
- const extracted = {};
- for (const key in instance.ctx) {
- if (isKeyOfType(Comp, key, type)) {
- extracted[key] = instance.ctx[key];
- }
- }
- return extracted;
- }
- function isKeyOfType(Comp, key, type) {
- const opts = Comp[type];
- if ((shared.isArray(opts) && opts.includes(key)) ||
- (shared.isObject(opts) && key in opts)) {
- return true;
- }
- if (Comp.extends && isKeyOfType(Comp.extends, key, type)) {
- return true;
- }
- if (Comp.mixins && Comp.mixins.some(m => isKeyOfType(m, key, type))) {
- return true;
- }
- }
- function genRefFlag(v) {
- if (isShallow(v)) {
- return `ShallowRef`;
- }
- if (v.effect) {
- return `ComputedRef`;
- }
- return `Ref`;
- }
- if (window.devtoolsFormatters) {
- window.devtoolsFormatters.push(formatter);
- }
- else {
- window.devtoolsFormatters = [formatter];
- }
- }
- function withMemo(memo, render, cache, index) {
- const cached = cache[index];
- if (cached && isMemoSame(cached, memo)) {
- return cached;
- }
- const ret = render();
- // shallow clone
- ret.memo = memo.slice();
- return (cache[index] = ret);
- }
- function isMemoSame(cached, memo) {
- const prev = cached.memo;
- if (prev.length != memo.length) {
- return false;
- }
- for (let i = 0; i < prev.length; i++) {
- if (shared.hasChanged(prev[i], memo[i])) {
- return false;
- }
- }
- // make sure to let parent block track it when returning cached
- if (isBlockTreeEnabled > 0 && currentBlock) {
- currentBlock.push(cached);
- }
- return true;
- }
- // Core API ------------------------------------------------------------------
- const version = "3.2.45";
- const _ssrUtils = {
- createComponentInstance,
- setupComponent,
- renderComponentRoot,
- setCurrentRenderingInstance,
- isVNode,
- normalizeVNode
- };
- /**
- * SSR utils for \@vue/server-renderer. Only exposed in ssr-possible builds.
- * @internal
- */
- const ssrUtils = (_ssrUtils );
- /**
- * @internal only exposed in compat builds
- */
- const resolveFilter = null;
- /**
- * @internal only exposed in compat builds.
- */
- const compatUtils = (null);
- exports.EffectScope = reactivity.EffectScope;
- exports.ReactiveEffect = reactivity.ReactiveEffect;
- exports.customRef = reactivity.customRef;
- exports.effect = reactivity.effect;
- exports.effectScope = reactivity.effectScope;
- exports.getCurrentScope = reactivity.getCurrentScope;
- exports.isProxy = reactivity.isProxy;
- exports.isReactive = reactivity.isReactive;
- exports.isReadonly = reactivity.isReadonly;
- exports.isRef = reactivity.isRef;
- exports.isShallow = reactivity.isShallow;
- exports.markRaw = reactivity.markRaw;
- exports.onScopeDispose = reactivity.onScopeDispose;
- exports.proxyRefs = reactivity.proxyRefs;
- exports.reactive = reactivity.reactive;
- exports.readonly = reactivity.readonly;
- exports.ref = reactivity.ref;
- exports.shallowReactive = reactivity.shallowReactive;
- exports.shallowReadonly = reactivity.shallowReadonly;
- exports.shallowRef = reactivity.shallowRef;
- exports.stop = reactivity.stop;
- exports.toRaw = reactivity.toRaw;
- exports.toRef = reactivity.toRef;
- exports.toRefs = reactivity.toRefs;
- exports.triggerRef = reactivity.triggerRef;
- exports.unref = reactivity.unref;
- exports.camelize = shared.camelize;
- exports.capitalize = shared.capitalize;
- exports.normalizeClass = shared.normalizeClass;
- exports.normalizeProps = shared.normalizeProps;
- exports.normalizeStyle = shared.normalizeStyle;
- exports.toDisplayString = shared.toDisplayString;
- exports.toHandlerKey = shared.toHandlerKey;
- exports.BaseTransition = BaseTransition;
- exports.Comment = Comment;
- exports.Fragment = Fragment;
- exports.KeepAlive = KeepAlive;
- exports.Static = Static;
- exports.Suspense = Suspense;
- exports.Teleport = Teleport;
- exports.Text = Text;
- exports.callWithAsyncErrorHandling = callWithAsyncErrorHandling;
- exports.callWithErrorHandling = callWithErrorHandling;
- exports.cloneVNode = cloneVNode;
- exports.compatUtils = compatUtils;
- exports.computed = computed;
- exports.createBlock = createBlock;
- exports.createCommentVNode = createCommentVNode;
- exports.createElementBlock = createElementBlock;
- exports.createElementVNode = createBaseVNode;
- exports.createHydrationRenderer = createHydrationRenderer;
- exports.createPropsRestProxy = createPropsRestProxy;
- exports.createRenderer = createRenderer;
- exports.createSlots = createSlots;
- exports.createStaticVNode = createStaticVNode;
- exports.createTextVNode = createTextVNode;
- exports.createVNode = createVNode;
- exports.defineAsyncComponent = defineAsyncComponent;
- exports.defineComponent = defineComponent;
- exports.defineEmits = defineEmits;
- exports.defineExpose = defineExpose;
- exports.defineProps = defineProps;
- exports.getCurrentInstance = getCurrentInstance;
- exports.getTransitionRawChildren = getTransitionRawChildren;
- exports.guardReactiveProps = guardReactiveProps;
- exports.h = h;
- exports.handleError = handleError;
- exports.initCustomFormatter = initCustomFormatter;
- exports.inject = inject;
- exports.isMemoSame = isMemoSame;
- exports.isRuntimeOnly = isRuntimeOnly;
- exports.isVNode = isVNode;
- exports.mergeDefaults = mergeDefaults;
- exports.mergeProps = mergeProps;
- exports.nextTick = nextTick;
- exports.onActivated = onActivated;
- exports.onBeforeMount = onBeforeMount;
- exports.onBeforeUnmount = onBeforeUnmount;
- exports.onBeforeUpdate = onBeforeUpdate;
- exports.onDeactivated = onDeactivated;
- exports.onErrorCaptured = onErrorCaptured;
- exports.onMounted = onMounted;
- exports.onRenderTracked = onRenderTracked;
- exports.onRenderTriggered = onRenderTriggered;
- exports.onServerPrefetch = onServerPrefetch;
- exports.onUnmounted = onUnmounted;
- exports.onUpdated = onUpdated;
- exports.openBlock = openBlock;
- exports.popScopeId = popScopeId;
- exports.provide = provide;
- exports.pushScopeId = pushScopeId;
- exports.queuePostFlushCb = queuePostFlushCb;
- exports.registerRuntimeCompiler = registerRuntimeCompiler;
- exports.renderList = renderList;
- exports.renderSlot = renderSlot;
- exports.resolveComponent = resolveComponent;
- exports.resolveDirective = resolveDirective;
- exports.resolveDynamicComponent = resolveDynamicComponent;
- exports.resolveFilter = resolveFilter;
- exports.resolveTransitionHooks = resolveTransitionHooks;
- exports.setBlockTracking = setBlockTracking;
- exports.setDevtoolsHook = setDevtoolsHook;
- exports.setTransitionHooks = setTransitionHooks;
- exports.ssrContextKey = ssrContextKey;
- exports.ssrUtils = ssrUtils;
- exports.toHandlers = toHandlers;
- exports.transformVNodeArgs = transformVNodeArgs;
- exports.useAttrs = useAttrs;
- exports.useSSRContext = useSSRContext;
- exports.useSlots = useSlots;
- exports.useTransitionState = useTransitionState;
- exports.version = version;
- exports.warn = warn;
- exports.watch = watch;
- exports.watchEffect = watchEffect;
- exports.watchPostEffect = watchPostEffect;
- exports.watchSyncEffect = watchSyncEffect;
- exports.withAsyncContext = withAsyncContext;
- exports.withCtx = withCtx;
- exports.withDefaults = withDefaults;
- exports.withDirectives = withDirectives;
- exports.withMemo = withMemo;
- exports.withScopeId = withScopeId;
|