-
Notifications
You must be signed in to change notification settings - Fork 88
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Simple notes from Migrating to PlusKit #92
Comments
Thanks you for the notes. Good to know before starting out. The git annotations bluish text on violent green background is hard to read. 👴 |
yes i know - first time i am using the diff annotations thing so i never knew about this clash. made an issue here #93 |
Nice! I'm not sure if |
@kevmodrome good point, i should look into that. |
The colors are too bright, I mean the ones in the code tag |
@kudadam agree, i just lowered the opacity #160 |
cover_image: https://user-images.githubusercontent.com/6764957/185548551-cdbe7da1-a15f-43dd-9c8c-4aa10a15d1ef.png
tags: svelte, sveltekit, changelog
"PlusKit" is my affectionate name for the Great SvelteKit Redesign of 2022. I was a little apprehensive at the amount of work and learning curve there would be, but it took about 1 hour all told (for admittedly a very simple sveltekit app like swyxkit).
You can see the final PR here: #88
What follows are just raw notes for "simple" sveltekit users like me. I want to stress that this is an incomplete list - however, I guess that if a "simple" usecase required these refactors, then they are the essential ones that most people will run into.
Run the migrate script
This is pretty straightforward - the migration script moves your code around and sometimes indiscriminately - in some cases you may have to move back some code (by uncommenting it back in) and in others you may have to refactor return signatures and imports. I found all the
@migration
hints to give enough warning - I solely looked at the@migration
hints and that was sufficient.Follow the instructions, but you'll want to upgrade your sveltekit version as well:
npm i @sveltejs/kit@1.0.0-next.423
.The 4 kinds of refactors
Static imports
Since we no longer have
<script context="module">
, if you did some static imports in a layout/page component, you'll need to just move that into a<script>
:This was fairly easy.
Special page values
Now that we don't have
load()
in a page, we dont have access tourl
,status
, orerror
fromload()
. Pull them from thepage
store instead:You'll want to look up what you can get from the Page store but otherwise it's also pretty straightforward.
Refactor return values
I think this took the most time for me. There a few refactors to do:
See migration docs.
Refactoring Errors:
Refactoring return values and headers (using the new
setHeaders
api):This refactor looks slightly different for API routes:
SvelteKit has a little
json
helper for thenew Response(JSON.stringify
stuff, so the last part simplifies to:data
propsPer docs, we now no longer have individual
export let
declarations for a+page.svelte
- everything comes intoexport let data
and the types are supposed to flow from its corresponding+page.js
:(in practice I found
PageData
to still beany
here but I am assuming those are growing pains)Done
There are more smaller changes to handle (I dont use
stuff
, I don't usesession
, I dont have a+page.server.js
, etc), but the above was all that affected me and so I guess will be the major ones to take care of for most people, hence me writing this up. All told, about 400 lines of code affected for me.Once again, you can see the final PR here: #88
The text was updated successfully, but these errors were encountered: