Skip to content
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

SvelteKit migration #349

Open
wants to merge 60 commits into
base: main
Choose a base branch
from
Open

SvelteKit migration #349

wants to merge 60 commits into from

Conversation

aabounegm
Copy link
Collaborator

@aabounegm aabounegm commented Jul 5, 2022

A previous PR (#312) was made with the target of rewriting the docs in SvelteKit. It quickly became outdated and was only targeting the docs, so this PR supersedes it since it started from a fresh SvelteKit template and targets the entire app (not just docs).

Important tasks

The migration is large and some of the tasks may be split into other smaller PRs. The general outline of the tasks is as follows:

  • Move all files to the correct locations in SvelteKit convention, fixing imports and layout props accordingly
  • Remove Custom Elements support (SvelteKit is just not ready for them yet, and they weren't even working properly)
  • Replace any Sapper reference with SvelteKit
  • Fix GitHub Actions and pre-commit hooks
  • Investigate why some :global selectors are not working as they should
  • Figure out what to do with theming and SCSS variables (related to Improvement: use css custom properties instead of scss variables for themeing #181 - should probably convert/open a discussion)

Additional tasks

These are the nice-to-haves that theoretically shouldn't block the migration to SvelteKit, but also make use of some features that were not possible/easy before.

  • Migrate everything to TypeScript
  • Turn off router and/or hydration for pages that don't need them
    Hydration is required for all pages (at the very least, for the "Components" dropdown to work), and in that case there is no compelling reason to disable the router.
  • Remove deprecated interfaces (only right and top props in Dropdown)
  • Update documentation
    • Theming
    • Migration
    • Installation
    • Changelog

Blocking issues

  • The PR is currently blocked by Setting paths.base in svelte.config.js causes adapter-static to fail (404) sveltejs/kit#4528 and the {base}/... workaround is not practical. Some links cannot be transformed that way (ex: ones inside CHANGELOG.md). Since <base href="/" /> is allowed (and actually fixes the problem), I'm wondering why base: '/' is not allowed.
    Update: This turned out to be feasible. I was initially under the impression that kit.paths.base would add the base tag as Sapper did, but that turned out to not be the case. It was definitely tiresome but possible to update all URLs everywhere.

Other issues

  • Forwarded slots (<slot name="loading-options" slot="loading-options">) are detected as taking a slot prop called slot in the generated types.
  • Svelte Language Server (VS Code extension) does not understand import assertions (import pkg from './package.json' assert { type: 'json' }) even with latest Node.js installed
    Update: Doesn't matter any more since I moved the package import to vite.config.js

Closes #311

This is a mega-commit since everything is tied together (it is a framework migration after all),
but it mostly consists of renames and minor adjustments.
This includes the following:
- Move files to the appropriate locations for SvelteKit
- Change any "attractions" imports in docs to use "$lib"
- Define aliases in CSS without a custom importer (for client usage)
- Move SCSS of component docs (`.svx` files) into the component itself (path aliases didn't work here)
- Remove clipboard-polyfill
When segment is an empty string
@aabounegm aabounegm changed the title Sveltekit migration SvelteKit migration Jul 5, 2022
@metaory
Copy link

metaory commented Dec 19, 2022

any updates on sveltekit migration"?

@aabounegm
Copy link
Collaborator Author

Hello @metaory, sorry for the delays from my side, but I just finished my final exams (at uni) today. I plan to come back to this issue soon, but I was also hoping to get more feedback on #360 first

@benmccann
Copy link

Is there anything you're blocked on in terms of getting this in?

I feel like this task has maybe become too large. I think migrating only the docs first as #312 was doing might have been more approachable vs trying to boil the ocean. But given how much progress has been made with this approach, maybe it could just be merged with a few things broken and some cleanup can happen later?

@aabounegm
Copy link
Collaborator Author

Well, the main issue is that both maintainers (me and @illright) got busy with other things in their lives, be it study or work or both. Still, I wanted to continue with the migration because it didn't seem so difficult. The main stopping point was #360, in which we decided to move away from Sass to CSS with variables (custom properties), but SCSS/CSS are not really my strong point. I did some work in the sass-migration branch but it's far from complete.

TL;DR: I need to muster up some energy to continue the CSS migration and the rest should be straightforward

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Migrate to SvelteKit
3 participants