[{"data":1,"prerenderedAt":291},["ShallowReactive",2],{"navigation":3,"page-projects,radiofrance":55},[4,8,12,16,51],{"title":5,"path":6,"stem":7},"Vivian SARAZIN","\u002F","1.index",{"title":9,"path":10,"stem":11},"AI","\u002Fai","ai",{"title":13,"path":14,"stem":15},"Misc","\u002Fmisc","misc",{"title":17,"path":18,"stem":19,"children":20},"Projects","\u002Fprojects","projects",[21,23,27,31,35,39,43,47],{"title":17,"path":18,"stem":22},"projects\u002Findex",{"title":24,"path":25,"stem":26},"David Poupon","\u002Fprojects\u002Fdavid-poupon","projects\u002Fdavid-poupon",{"title":28,"path":29,"stem":30},"Groupe Nomblot","\u002Fprojects\u002Fgroupe-nomblot","projects\u002Fgroupe-nomblot",{"title":32,"path":33,"stem":34},"My Grandmother's Recipe Notebooks","\u002Fprojects\u002Fles-cahiers-de-jeanine","projects\u002Fles-cahiers-de-jeanine",{"title":36,"path":37,"stem":38},"TrialFinder by OmiCure","\u002Fprojects\u002Fomicure","projects\u002Fomicure",{"title":40,"path":41,"stem":42},"PME Partner","\u002Fprojects\u002Fpme-partner","projects\u002Fpme-partner",{"title":44,"path":45,"stem":46},"Radiofrance","\u002Fprojects\u002Fradiofrance","projects\u002Fradiofrance",{"title":48,"path":49,"stem":50},"Solinum","\u002Fprojects\u002Fsolinum","projects\u002Fsolinum",{"title":52,"path":53,"stem":54},"Resume","\u002Fresume","resume",{"id":56,"title":44,"body":57,"description":282,"extension":283,"layout":284,"meta":285,"navigation":288,"path":45,"seo":289,"stem":46,"__hash__":290},"content\u002Fprojects\u002Fradiofrance.md",{"type":58,"value":59,"toc":275},"minimark",[60,67,72,77,80,89,99,106,109,118,123,126,129,161,164,168,176,179,182,185,193,196,200,203,212,215,219,227,249,253,266,268,271],[61,62,63],"p",{},[64,65,66],"em",{},"At Hublo, we work with SvelteKit. Before starting my new job, I had to learn this framework.",[61,68,69],{},[64,70,71],{},"One of the best ways to do so, is also by contributing on Open Source projects. IMO, the smaller, the better! (again)",[73,74,76],"h1",{"id":75},"radiofrance-svelte-youtube-lite","Radiofrance svelte-youtube-lite",[61,78,79],{},"My goal was to find a small open-source project using Svelte, in order to try to contribute in there.",[61,81,82,83,88],{},"I already did a ",[84,85,87],"a",{"href":86},"\u002Fprojects\u002Fdavid-poupon\u002F","small website",", this time I wanted to make something a little bit more technical.",[61,90,91,92,98],{},"I stumbled upon this ",[84,93,97],{"href":94,"rel":95},"https:\u002F\u002Fgithub.com\u002Fradiofrance\u002Fsvelte-youtube-lite",[96],"nofollow","Radiofrance's project"," by navigating on Github.",[61,100,101,102,105],{},"svelte-youtube-lite is \"",[64,103,104],{},"a simple svelte component for creating YouTube embeds with a focus on performance and privacy (GDPR compliant).","\".",[61,107,108],{},"Around that time, Svelte 5 had just been released, and I thought submitting a PR to migrate the project from Svelte 4 to Svelte 5 would be a great way to contribute.",[61,110,111,112,117],{},"This is basically what I did in this ",[84,113,116],{"href":114,"rel":115},"https:\u002F\u002Fgithub.com\u002Fradiofrance\u002Fsvelte-youtube-lite\u002Fpull\u002F3",[96],"PR",".",[119,120,122],"h2",{"id":121},"migration-script","Migration script",[61,124,125],{},"To be honest, I didn’t have to do much 😉",[61,127,128],{},"Indeed, Svelte provides a powerful migration script:",[130,131,136],"pre",{"className":132,"code":133,"language":134,"meta":135,"style":135},"language-bash shiki shiki-themes github-dark github-light","$ npx sv migrate svelte-5\n","bash","",[137,138,139],"code",{"__ignoreMap":135},[140,141,144,148,152,155,158],"span",{"class":142,"line":143},"line",1,[140,145,147],{"class":146},"s-Z4r","$",[140,149,151],{"class":150},"sg6BJ"," npx",[140,153,154],{"class":150}," sv",[140,156,157],{"class":150}," migrate",[140,159,160],{"class":150}," svelte-5\n",[61,162,163],{},"In most cases, you just need to review the comments left by the script and handle any necessary manual adjustments.",[119,165,167],{"id":166},"playwright","Playwright",[61,169,170,171,175],{},"However, to be sure that my migration was OK, I wrote ",[172,173,174],"strong",{},"before"," the migration some tests.",[61,177,178],{},"This ensures that the migration didn't break anything on the component behavior.",[180,181],"hr",{},[61,183,184],{},"This contribution was a lot of fun, especially because the Radiofrance maintainer was quick to review my PR.",[61,186,187],{},[188,189],"img",{"alt":190,"src":191,"style":192},"radio-france.webp","\u002Fprojects\u002Fradiofrance.webp","border-radius:0px",[61,194,195],{},"Seeing the project reach version 1.0.0 after my PR was far beyond what I expected!",[73,197,199],{"id":198},"radiofrance-svelte-leaflet","Radiofrance svelte-leaflet",[61,201,202],{},"After my contribution on svelte-youtube-lite, I wanted to keep contributing to Radiofrance's open-source projects.",[61,204,205,206,211],{},"I found ",[84,207,210],{"href":208,"rel":209},"https:\u002F\u002Fgithub.com\u002Fradiofrance\u002Fsvelte-leaflet",[96],"svelte-leaflet",", a library that wraps Leaflet classes in domless\u002Frenderless Svelte components.",[61,213,214],{},"A Svelte 5 migration was already underway on the project, and I noticed the maintainer could use a hand. So I jumped in!",[119,216,218],{"id":217},"what-i-did","What I did",[61,220,221,222,226],{},"In this ",[84,223,116],{"href":224,"rel":225},"https:\u002F\u002Fgithub.com\u002Fradiofrance\u002Fsvelte-leaflet\u002Fpull\u002F8",[96],", I worked on:",[228,229,230,237,243],"ul",{},[231,232,233,236],"li",{},[172,234,235],{},"Adding demo specs"," to ensure nothing would break during the migration",[231,238,239,242],{},[172,240,241],{},"Refactoring the routes folder"," by adding aliases to simplify the structure",[231,244,245,248],{},[172,246,247],{},"Creating a docs subfolder"," with all the routes properly organized",[119,250,252],{"id":251},"a-collaborative-effort","A collaborative effort",[61,254,255,256,261,262,265],{},"What I enjoyed about this contribution was the collaborative aspect. I reached out to the maintainer, ",[84,257,260],{"href":258,"rel":259},"https:\u002F\u002Fgithub.com\u002Fromaindurand",[96],"romaindurand",", offering help on the Svelte 5 branch he had been working on. The PR was merged into the ",[137,263,264],{},"svelte5"," branch, bringing the project closer to its 1.0.0 release.",[180,267],{},[61,269,270],{},"Contributing to two Radiofrance projects was a great way to deepen my Svelte knowledge while helping the open-source community. Seeing these projects evolve toward Svelte 5 compatibility felt really rewarding!",[272,273,274],"style",{},"html pre.shiki code .s-Z4r, html code.shiki .s-Z4r{--shiki-dark:#B392F0;--shiki-default:#6F42C1}html pre.shiki code .sg6BJ, html code.shiki .sg6BJ{--shiki-dark:#9ECBFF;--shiki-default:#032F62}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":135,"searchDepth":276,"depth":276,"links":277},2,[278,279,280,281],{"id":121,"depth":276,"text":122},{"id":166,"depth":276,"text":167},{"id":217,"depth":276,"text":218},{"id":251,"depth":276,"text":252},"My very first open source contriubtions on Svelte","md",null,{"stack":286},[287,167],"SvelteKit",true,{"title":44,"description":282},"iBFnXPJh4WUIuBok7A6tLF3QoOipk8ntzHFBsX58ylU",1785077665199]