From 8300ef348ac0f1f2390296aa8aca143b7d920c86 Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sun, 23 May 2021 12:26:14 -0700 Subject: [PATCH 1/5] added june change history --- ...021-06-01-whats-new-in-svelte-june-2021.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md new file mode 100644 index 000000000000..13a6db727f32 --- /dev/null +++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -0,0 +1,54 @@ +--- +title: What's new in Svelte: June 2021 +description: TBD +author: Daniel Sandoval +authorURL: https://desandoval.net +--- + +Intro + +## New in SvelteKit +- `svelte.config.js` config files can now be loaded in ESM format (`.js` instead of `.cjs` - either can be used). It is recommended to use the `.js` format going forward. +- AMP pages will now use the rendered CSS, rather than emitted CSS +- `trailingSlash: 'never' | 'always' | 'ignore'` is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for `index.html` pages, and provides an escape hatch for anyone that needs more complex behaviour. +- The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have `` elements on the page with the same origin but don't share a base path with the app. +- Hash only changes are now handled by the router - fixing the browser's "back" navigation between hash changes. +- Svelte Kit builds and dev versions should now work on Windows (`pnpm build` and `dev` commands were failing due to lack of an `rm` command) + + + +## New in Svelte & Language Tools +- Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version! +- You can now toggle the TypeScript plugin on and off in the Svelte extension (Extension version [**104.11.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.11.0)) +- Language server users on newer versions of Svelte will now have their sourcemaps preprocessed by Svelte instead of the (now deprecated) logic in language tools. (Extension version [**104.12.2**](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.12.2)) + +--- + +## Community Showcase + +**Apps & Sites** + +- + + +**Demos, Libraries, Tools & Components** + +- + +**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). + + +**Starters** +- + +**Looking for a starter or integration?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other integration examples at [sveltejs/integrations](https://github.com/sveltejs/integrations) + + +**Learning Resources** +- + + + +## See you next month! + +Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! From 49551574e477997f7f7dcf130fb9051eb5815fce Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sun, 23 May 2021 13:21:31 -0700 Subject: [PATCH 2/5] added showcase and intro --- ...021-06-01-whats-new-in-svelte-june-2021.md | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md index 13a6db727f32..8c8eb053fab1 100644 --- a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md +++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -1,11 +1,11 @@ --- title: What's new in Svelte: June 2021 -description: TBD +description: Progress on SvelteKit V1 and tighter TypeScript/Svelte integrations in language tools author: Daniel Sandoval authorURL: https://desandoval.net --- -Intro +This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features alongside some hydration bug fixes in Svelte core. Let's jump into the updates... ## New in SvelteKit - `svelte.config.js` config files can now be loaded in ESM format (`.js` instead of `.cjs` - either can be used). It is recommended to use the `.js` format going forward. @@ -28,27 +28,28 @@ Intro **Apps & Sites** -- +- [vidu](https://github.com/pa-nic/vidu) is a minimal web analytics collector and dashboard +- [River Runner](https://river-runner.samlearner.com/) is a virtual way to follow rivers downstream - built with Mapbox and Svelte. +- [JSDoc Type Generator](https://rafistrauss.github.io/jsdoc-generator/) generates JSDoc types for valid JSON. +- [pagereview.io](https://pagereview.io/) is a website feedback tool that lets you leave comments directly on the site being reviewed. +- [gamesroom.io](https://gamesroom.io/) is an online board game platform with video chat built-in. +- [Greedy Goblin](https://greedygoblin-fe11c.web.app/) is a recipe app for old-school Runescape players. +- [hashbrown.geopjr.dev](https://hashbrown.geopjr.dev/) is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app ([link to source](https://github.com/GeopJr/Hashbrown/tree/website)). -**Demos, Libraries, Tools & Components** +**Libraries, Tools & Components** -- +- [svelte-image-crop](https://novacbn.github.io/svelte-image-crop/) is a simple click'n'drag image cropping library using Web APIs. +- [svelte-datepicker](https://github.com/andrew-secret/svelte-datepicker) is a lightweight and inclusive date picker build with Svelte. +- [svelte-regex-router](https://www.npmjs.com/package/svelte-regex-router) is a simple, lightweight library for you to easily handle routes in your Svelte application. +- [Svelte Micro](https://www.npmjs.com/package/svelte-micro) is a light & reactive one-component router for Svelte. +- [svelte-entity-store](https://www.npmjs.com/package/svelte-entity-store) is to provide a simple, generic solution for storing collections of entity objects. +- [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween. -**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). - - -**Starters** -- - -**Looking for a starter or integration?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other integration examples at [sveltejs/integrations](https://github.com/sveltejs/integrations) - - -**Learning Resources** -- +**Want to contribute a component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json). ## See you next month! -Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! +Did we miss something? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)! From 069e186eac683e9e1c551b56f2c36deeb5c2b856 Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sat, 29 May 2021 07:07:53 -0700 Subject: [PATCH 3/5] respond to feedback --- ...021-06-01-whats-new-in-svelte-june-2021.md | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md index 8c8eb053fab1..133e4e33d453 100644 --- a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md +++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -1,26 +1,35 @@ --- title: What's new in Svelte: June 2021 -description: Progress on SvelteKit V1 and tighter TypeScript/Svelte integrations in language tools +description: Progress towards SvelteKit 1.0 and tighter TypeScript/Svelte integrations in language tools author: Daniel Sandoval authorURL: https://desandoval.net --- -This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features alongside some hydration bug fixes in Svelte core. Let's jump into the updates... +This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let's jump into the updates... ## New in SvelteKit -- `svelte.config.js` config files can now be loaded in ESM format (`.js` instead of `.cjs` - either can be used). It is recommended to use the `.js` format going forward. +- `svelte.config.js` config files are now be loaded in ESM format (`.js` instead of `.cjs`). - AMP pages will now use the rendered CSS, rather than emitted CSS +- `svelte-check` has been added to the TypeScript template ([sveltejs/kit#1556](https://github.com/sveltejs/kit/pull/1556)) +- support for https keypair [sveltejs/kit#1456](https://github.com/sveltejs/kit/pull/1456) +- now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your `package.json` if it's there +- etags for binary responses [sveltejs/kit#1382](https://github.com/sveltejs/kit/pull/1382) +- Renamed `$layout` to `__layout` and `$error` to `__error` +- Removed `getContext` in favor of `request.locals` +- Renamed `.svelte` output directory to `.svelte-kit`. Update your `.gitignore` accordingly - `trailingSlash: 'never' | 'always' | 'ignore'` is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for `index.html` pages, and provides an escape hatch for anyone that needs more complex behaviour. + +## Notable bug fixes in SvelteKit +- `adapter-netlify` got a fix [sveltejs/kit#1467](https://github.com/sveltejs/kit/pull/1467) and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify - The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have `` elements on the page with the same origin but don't share a base path with the app. -- Hash only changes are now handled by the router - fixing the browser's "back" navigation between hash changes. -- Svelte Kit builds and dev versions should now work on Windows (`pnpm build` and `dev` commands were failing due to lack of an `rm` command) +- Hash only changes are now handled by the router fixing the browser's "back" navigation between hash changes in some circumstances. ## New in Svelte & Language Tools - Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version! -- You can now toggle the TypeScript plugin on and off in the Svelte extension (Extension version [**104.11.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.11.0)) -- Language server users on newer versions of Svelte will now have their sourcemaps preprocessed by Svelte instead of the (now deprecated) logic in language tools. (Extension version [**104.12.2**](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.12.2)) +- A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It is turned off by default for now. We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580) +- In the latest version of `svelte-check` you can now provide the path to your `tsconfig.json` or `jsconfig.json`. Example: `svelte-check --tsconfig "./tsconfig.json"`. This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like `tsc --noEmit`) for non-Svelte files (`svelte-check` version [**1.6.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-1.6.0)) --- From 9de0947742e83435b30f727104009d1999d0e6c4 Mon Sep 17 00:00:00 2001 From: Daniel Sandoval Date: Sat, 29 May 2021 11:44:36 -0700 Subject: [PATCH 4/5] Update site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md | 1 + 1 file changed, 1 insertion(+) diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md index 133e4e33d453..6b3efb9e2848 100644 --- a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md +++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -30,6 +30,7 @@ This month, we saw lots of contributions to SvelteKit and its docs. The language - Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version! - A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It is turned off by default for now. We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580) - In the latest version of `svelte-check` you can now provide the path to your `tsconfig.json` or `jsconfig.json`. Example: `svelte-check --tsconfig "./tsconfig.json"`. This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like `tsc --noEmit`) for non-Svelte files (`svelte-check` version [**1.6.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-1.6.0)) +- The VS Code extension and `svelte-check` got a new major release. Previously, properties that had no initializer (`export let foo;`) were only required if the user was using both TypeScript and activated `strict` mode. This is changed now: People using TypeScript, and those using `checkJs` also in JavaScript files, will now always have these properties marked as required (`svelte-check` version [**2.0.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-2.0.0), extension version [**105.0.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.0.0)) --- From 32aff9756a056c4c5994a3db5d3982d03620774f Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Sun, 30 May 2021 15:34:55 +0200 Subject: [PATCH 5/5] cleanup --- .../blog/2021-06-01-whats-new-in-svelte-june-2021.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md index 6b3efb9e2848..ab55f497f7ef 100644 --- a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md +++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md @@ -8,12 +8,12 @@ authorURL: https://desandoval.net This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let's jump into the updates... ## New in SvelteKit -- `svelte.config.js` config files are now be loaded in ESM format (`.js` instead of `.cjs`). +- `svelte.config.js` config files are now loaded in ESM format (`.js` instead of `.cjs`). - AMP pages will now use the rendered CSS, rather than emitted CSS - `svelte-check` has been added to the TypeScript template ([sveltejs/kit#1556](https://github.com/sveltejs/kit/pull/1556)) -- support for https keypair [sveltejs/kit#1456](https://github.com/sveltejs/kit/pull/1456) -- now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your `package.json` if it's there -- etags for binary responses [sveltejs/kit#1382](https://github.com/sveltejs/kit/pull/1382) +- Support for https keypair [sveltejs/kit#1456](https://github.com/sveltejs/kit/pull/1456) +- Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your `package.json` if it's there +- Etags for binary responses [sveltejs/kit#1382](https://github.com/sveltejs/kit/pull/1382) - Renamed `$layout` to `__layout` and `$error` to `__error` - Removed `getContext` in favor of `request.locals` - Renamed `.svelte` output directory to `.svelte-kit`. Update your `.gitignore` accordingly @@ -28,7 +28,7 @@ This month, we saw lots of contributions to SvelteKit and its docs. The language ## New in Svelte & Language Tools - Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version! -- A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It is turned off by default for now. We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580) +- A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It comes packaged with the VS Code extension but is turned off by default for now. You can enable it through [this setting](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#svelteenable-ts-plugin). We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580) - In the latest version of `svelte-check` you can now provide the path to your `tsconfig.json` or `jsconfig.json`. Example: `svelte-check --tsconfig "./tsconfig.json"`. This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like `tsc --noEmit`) for non-Svelte files (`svelte-check` version [**1.6.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-1.6.0)) - The VS Code extension and `svelte-check` got a new major release. Previously, properties that had no initializer (`export let foo;`) were only required if the user was using both TypeScript and activated `strict` mode. This is changed now: People using TypeScript, and those using `checkJs` also in JavaScript files, will now always have these properties marked as required (`svelte-check` version [**2.0.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-2.0.0), extension version [**105.0.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.0.0))