Release Notes

v0.11.0 (22-Feb-2023)

It is time to go! The first version on Sveltin was out about one year ago (Dec 30, 2021). Until v0.10.1 release I used to run a monthly release cycle except for urgent fixes. Starting working on the v0.11.0 I realized the backlog for fixes, refactorings and features I had in mind increased a lot. Meanwhile, SvelteKit v1.0.0 was out (congrats and a big thank to the Svelte team 👏)! Althought Sveltin v0.10.1 was tested against one of the latest SvelteKit ”next” version and easily adoptable for the SvelteKit first major version with few tunings, the desire to release a new Sveltin version just to be compliant with SvelteKit major release was impressive. But…

I was unsatisfied about several things I did with previous version as well as I learned something more. Then I took the decision to stop there and enjoyining the fact to have a side project like Sveltin I wanted to continue working on it. I looked at the backlog and started working on it focusing on fixings and completings as much as I can. It was really the right time to do so!

Sveltin v0.11.0 is SvelteKit v1.8.x ready! and it comes after several reworking, refactoring, fixes and a bunch of new feature that should allow me to continue working on it with less stress. That is why this release took definetely more than I expected. Today, I am fine with that and do not want to procrastinate more, there will be time to make more adjustments.

As per today, I personally run 7 customer websites based on Sveltin. All the changes introduced by v0.11.0 were not affordable in a manual way. That is why a spent some time working on the newly introduced sveltin migrate command. It does not cover everything but it helped a lot updating the customer websites plus the one you are reading here and the landing page in very short time.

Let’s stop here and see what is in with this release.

🚫 Bug Fixes

  • mdsvex.config.js: missed comma after rehypeSlug usage;
  • pages created as “markdown” were not well formatted;
  • logo on Footer.svelte when sveltin theme not properly loaded;
  • wrong import string for ScrollToTopButton component on +layout.svelte when sveltin theme.

✂️ Breakings

  • add content command: uniforming how cmd works compared to others, introducing the –to flag. The new way it works is, e.g.:

    $ sveltin add content <title> --to <resource>
  • new page command: set the language used to compose the page: --svelte or --markdown. The new way it works is, e.g.:

    $ sveltin new page about --markdown

📐 Improvements

  • the whole @sveltinio packages set has been re-designed and fixed;
  • a new @sveltinio/remark-headings replaces a local function to extract the headings tree from the markdown content to be used by the TOC component;
  • markdown pages missed a layout component to speed up the styling for those pages as well as mdsvex was not configured to handle it;
  • the execution of the commands after the project creation takes into account the theme choice. So, if you choose a “blank” theme when creating the project, by running commands to create pages, resources etc. consider that choice and scaffold the right artifacts without the need to cleanup code coming from the “sveltin” theme;
  • Improved SEO per page: set the keywords as string array on the YAML frontmatter for your markdown content or by using the pageKeywords on the svelte pages. If not present, the ones defined at website level in the sveltin.json file are considered the default ones;
  • Consistent TUI across commands replacing the progress bar when deploy with a new one from prompti.

🚀 New Features

sveltin.json

Scaffolding a new project will add a new sveltin.json file. It is supposed to simplify the settings across parts of the project. The overall idea is to use it as unique config file.

Note: Although importing JSON module is feasible today with some warnings informing about the experimental feature, we prefer to park its usage for now. When nodejs importing JSON module will not be an experimental feature anymore, we could think to use sveltin.json as unique config file for settings to be passed to svelte.config.js, mdsvex.config.js or vite.config.[js|ts].

Deploy

deploy command takes into account if adapter-static has been configured to output pages and assets in different folders. In this case, make sure to reflect them to sveltin.json

Completion

A new completion command has been added to generate the autocompletion script for the specified shell (bash, zsh, fish, powershell).

Active Helps

active helps added to the supported commands. By using TAB after the command name shows a message informing about what is needed for the command to properly be executed (params or flags).

Migrate

A new migrate command has been added. Its goal is to easily upgrade/migrate existing Sveltin based projects to the latest Sveltin release. From now on, upcoming Sveltin releases will make use of it in case some changes are needed.

→ Note 1: The command takes care of Sveltin based projects starting for the v0.10.1 version.

→ Note 2: sveltin migrate command has nothing to do with the svelte-migrate package. sveltin migrate command takes care of Sveltin related files. You do not need to use svelte-migrate because your routes etc. generated by Sveltin commands are already compliants with the latest changes introduced to SvelteKit.

Sveltin release 0.11.0 introduces several changes. Below are just some samples:

  • the content for some autogenerated files (e.g. defaults.ts, theme.config.js etc.) has been updated to leverage the new sveltin.json file;
  • an alias on vite.config.ts has been added;
  • a new path entry and include in tsconfig.json have been added;
  • remark-external-links has been replaced by rehype-external-links;
  • remark-slug has been removed;
  • mdast-util-to-string has been removed;
  • unist-util-visit has been removed;

By running sveltin migrate your project will make use of the latest introduced by version 0.11.0.

The migrate command works with a concept similar to migrations. For 0.11.0 release it applies the following migrations in the order:

Target Path Actions
sveltin.json create or update the file.
config/defaults.js.ts make use of sveltin.json.
config/website.js.ts update the props names and types accordingly to the new ones from sveltin.d.ts.
config/menu.js.ts make use of sveltin.d.ts.
src/sveltin.d.ts update the content with revisited types.
src/lib/**/*.ts make use of sveltin.d.ts.
src/routes/layout.ts add trailingSlash as per [#7719].
src/routes/**/+page.[svelte|svx]
  • replace props and types on SEO components from @sveltinio/seo;
  • replace data-sveltekit-preload-data="hover" with data-sveltekit-preload-data="hover".
src/routes/**/*.svelte if using some components from older version of sveltinio packages, add a comment just above the line informing to check the latest package version documentation.
src/routes/**/+page.server.ts replace props and types on SEO components from @sveltinio/seo.
themes/**/theme.config.js make use of sveltin.json.
themes/**/*.svelte if using some components from older version of sveltinio packages, add a comment just above the line informing to check the latest package version documentation.
mdsvex.config.js
  • fix usage of rehype-autolink-headings;
  • replace remark-external-links with rehype-external-links;
  • replace usage of src/lib/utils/headings.js with @sveltinio/remark-headings;
  • remove remark-slug import and usage.
svelte.config.js
  • remove trailingSlash as per [#7719];
  • remove config.kit.prerender.enabled as per [#7762];
.env.production remove props available in sveltin.json.
vite.config.ts add an entry to the aliases to map sveltin.d.ts.
tsconfig.json add an entry to the compilerOptions.path to re-map imports from sveltin.d.ts.
package.json
  • replace remark-external-links with rehype-external-links;
  • remove remark-slug as dev dependency;
  • overall dependencies updated to the latest versions.

Read the Full Changelog.

Last updated: 22-Feb-2023

Apache 2.0 License @ 2021-present Sveltin.io and contributors .

The Sveltin logos are copyright © Mirco Veltri.