mirror of https://github.com/sveltejs/svelte
Andrew Lee
5 years ago
commit
189a5c6f8e
@ -0,0 +1 @@
|
||||
open_collective: svelte
|
||||
@ -0,0 +1,4 @@
|
||||
if (!process.env.PUBLISH) {
|
||||
console.error('npm publish must be run with the PUBLISH environment variable set');
|
||||
process.exit(1);
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
title: What's new in Svelte: March 2021
|
||||
description: Call for Svelte Summit Speakers! Improved SSR, non-HTML5 compilation targets, and ESLint TypeScript support
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an [Open Call for Speakers](https://sessionize.com/svelte-summit-spring-2021). **The deadline is March 14** so if you have an idea for a talk, submit it now!
|
||||
|
||||
Let's dive into the news 🐬
|
||||
|
||||
## What's new in `sveltejs/svelte`
|
||||
* SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples#custom-stores) and [Server-side component API ](https://svelte.dev/docs#Server-side_component_API))
|
||||
* Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
|
||||
* The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
|
||||
* Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
|
||||
* Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
|
||||
* Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
|
||||
* A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#svelte_compile))
|
||||
* Continued improvement to Typescript definitions
|
||||
|
||||
For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
|
||||
|
||||
|
||||
## New from `sveltejs/language-tools`
|
||||
|
||||
- For language server clients that don't support `didChangeWatchedFiles`, a fallback file watcher will be used instead
|
||||
- New highlighting rules for store accessors and element directives (like `bind:` and `class:`)
|
||||
- HTML tags can now be renamed together
|
||||
- Mustache tags parsing is now more robust and will provide better intellisense in more situations
|
||||
|
||||
Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or find a plugin for your favorite IDE!
|
||||
|
||||
## Other changes from `sveltejs/*`
|
||||
|
||||
- [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3) now supports TypeScript as of 3.1.0
|
||||
- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte/) released a number of minor versions to address whitespace and comment trimming issues.
|
||||
- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/) bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of `postcss-load-config`
|
||||
- [sapper](https://github.com/sveltejs/sapper/)'s 0.29.1 release fixes some bad imports in type definitions, updates typings to be compatible with express/polka, and restores hashing of all CSS file names.
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites**
|
||||
|
||||
- [Tracking the Coronavirus](https://www.nytimes.com/interactive/2021/us/new-york-city-new-york-covid-cases.html) from NYTimes is an example of SvelteKit in production
|
||||
- [Budibase](https://github.com/Budibase/budibase) is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure.
|
||||
- [Track the Parcel](https://tracktheparcel.com/) is a one-stop tool for tracking parcel status with all major package shippers.
|
||||
- [Memo](https://sendmemo.app/features/) is a replacement for email that uses Svelte for modern messaging
|
||||
- [Userscripts Safari](https://github.com/quoid/userscripts) is an open-source userscript editor for Safari... a native Svelte app for Mac OS!
|
||||
- [SVGX](https://svgx.app/) is "the desktop SVG asset manager designers and developers wished they had."
|
||||
- [Armoria](https://azgaar.github.io/Armoria/) is a procedural heraldry generator and editor
|
||||
- [FictionBoard](https://www.fictionboard.com) is a virtual table top (VTT) platform that just released fillable and responsive character sheets
|
||||
- [Castles & Crusades Treasure Generator](https://treasure.playaheadgames.com/) is a treasure generator for the table top RPG: Castles and Crusades.
|
||||
- [NESBit Studio](https://jensa.org/NESBitStudio-web/graphics/spritesheets) is a toolkit to help the development of homebrew NES games
|
||||
- [ElectroBlocks](https://electroblocks.org/) is an online Arduino IDE with a built-in simulator (Chrome Only)
|
||||
- [Goblin.life](https://store.steampowered.com/app/552180/GoblinLife/) is a 3D world builder whose UI is built with Svelte
|
||||
- [farmbox](https://farmbox.ae/) is a UAE-based grocery delivery services
|
||||
- [heroeswearmasks.fun](https://heroeswearmasks.fun/) is a client-side machine learning tool that determines whether or not you're wearing a mask.
|
||||
- [weatherify](https://brdtheo-weatherify.netlify.app/) is a very pretty (and [open source](https://github.com/brdtheo/weatherify)) weather app
|
||||
- [DSN Live](https://dsn-live.netlify.app/#/) lets you monitor connections between NASA/JPL and interplanetary spacecraft missions in real time.
|
||||
|
||||
|
||||
|
||||
**Demos, Libraries, Tools & Components**
|
||||
|
||||
- [spc](https://github.com/khang-nd/spc) is a special characters picker component for the web
|
||||
- [svelte-injector](https://www.npmjs.com/package/svelte-injector) lets you inject Svelte components in React, Angular, Vue, jQuery, Vanilla JS.
|
||||
- [Felte](https://felte.dev/) is a form library for Svelte with simple validation reporting.
|
||||
- [svelte-use-form](https://github.com/noahsalvi/svelte-use-form#readme) is form library that "is easy to use and has 0 boilerplate."
|
||||
- [Formula](https://formula.svelte.codes/) provides "Zero Configuration Reactive Forms for Svelte."
|
||||
- [Houdini](https://github.com/AlecAivazis/houdini) is "the disappearing GraphQL client built for Sapper and Sveltekit."
|
||||
- [svelte-split-pane](https://www.reddit.com/r/sveltejs/comments/leoe33/sveltesplitpane/) is a draggable split pane component
|
||||
- [svelte-virtualized-auto-sizer](https://github.com/micha-lmxt/svelte-virtualized-auto-sizer) is a high-order component that automatically adjusts the width and height of a single child.
|
||||
- [svelte-window](https://github.com/micha-lmxt/svelte-window) are components for efficiently rendering large, scrollable lists and tabular data.
|
||||
- [Svelte Persistent store](https://github.com/MacFJA/svelte-persistent-store) is a Svelte store that keep its value through pages and reloads
|
||||
- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VSCode theme inspired by the svelte.dev REPL
|
||||
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) has been updated to support Svelte libraries and help developers keep their bundle size under control.
|
||||
- [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) provides tree-sitter grammar for svelte
|
||||
- [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord)
|
||||
- [Analog SVG Clock](https://svelte.dev/repl/270e83f43e7a48918d8f2d497760904f?version=3.32.1) is a great example of easing functions (made by @tonmcg in the Svelte Discord)
|
||||
- [Console Log Styler](https://svelte.dev/repl/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
|
||||
- [svelte-heroicons](https://github.com/martinse/svelte-heroicons) is a handy wrapper for the Heroicons icon library
|
||||
- [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) are UI components for Supabase authentication
|
||||
|
||||
**Have your own Svelte Component to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
|
||||
|
||||
|
||||
**Learning Resources & Starters**
|
||||
|
||||
- [The **unofficial** SvelteKit docs](https://sk-incognito.vercel.app/learn/what-is-sveltekit) were built using SvelteKit and are [open for contributions](https://github.com/GrygrFlzr/kit-docs)
|
||||
- [📦 Svelte Store](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK) course by lihautan covers the basics of Svelte Stores and best practices.
|
||||
- [Svelte Events](https://www.youtube.com/watch?v=cbxxbBofjAw&feature=youtu.be) by WebJeda explains how directives like `on:` can be used to listen to DOM events.
|
||||
- [How to Set Up Protected Routes in Your Svelte Application](https://www.webtips.dev/how-to-set-up-protected-routes-in-your-svelte-application) describes how to authenticate your users to access your routes
|
||||
- [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
|
||||
- [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper
|
||||
- [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
|
||||
- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + Typescript template
|
||||
- [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier
|
||||
|
||||
## 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)!
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: SvelteKit is in public beta
|
||||
description: And we'd love to have your feedback
|
||||
author: Rich Harris
|
||||
authorURL: https://twitter.com/rich_harris
|
||||
---
|
||||
|
||||
<aside><p>Previously: <a href="/blog/whats-the-deal-with-sveltekit">What's the deal with SvelteKit?</a></p></aside>
|
||||
|
||||
It's time. After five months and hundreds of commits, you're finally invited to try out the SvelteKit beta. It's not finished — there are a few known bugs and several missing features — but we're really happy with how it's shaping up and can't wait for you to try it.
|
||||
|
||||
Starting a new project is easy:
|
||||
|
||||
```bash
|
||||
# create the project
|
||||
mkdir my-app
|
||||
cd my-app
|
||||
npm init svelte@next
|
||||
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# start dev server and open a browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
You'll find documentation at [kit.svelte.dev/docs](https://kit.svelte.dev/docs). If you have a [Sapper](https://sapper.svelte.dev) app that you'd like to migrate to SvelteKit, you'll find instructions at [kit.svelte.dev/migrating](https://kit.svelte.dev/migrating).
|
||||
|
||||
The source code is available at [github.com/sveltejs/kit](https://github.com/sveltejs/kit). Issues and pull requests are disabled while we finish getting our house in order, but we'll be making it fully open in the near future.
|
||||
|
||||
|
||||
## Wait, what is SvelteKit?
|
||||
|
||||
Think of it as [Next](https://nextjs.org/) for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.
|
||||
|
||||
If you're familiar with [Sapper](https://sapper.svelte.dev), SvelteKit is Sapper's successor.
|
||||
|
||||
## From Snowpack to Vite
|
||||
|
||||
One thing that might seem surprising after the [announcement video](/blog/whats-the-deal-with-sveltekit), in which I waxed lyrical about [Snowpack](https://www.snowpack.dev/), is that SvelteKit uses [Vite](https://vitejs.dev) under the hood. When we tried Snowpack back when we started thinking about what form SvelteKit should take, it was love at first sight.
|
||||
|
||||
Snowpack created an entirely new category of dev tooling. Rather than _bundling_ your app in development, as we've been doing with webpack and Rollup for the last several years, Snowpack is an _unbundled dev server_ that uses the browser's native `import` and does 1:1 transformations of things like Svelte components on the fly. As a result you get quick startup, simple caching and instant hot module reloading. Once you experience this way of working, it will ruin you for anything else.
|
||||
|
||||
Vite falls into the same category as Snowpack. While Vite 1 wasn't suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by [Evan You](https://twitter.com/youyuxi)) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit's requirements and would give us the best chance to deliver the framework of our imaginations.
|
||||
|
||||
We owe a deep debt of gratitude to the Snowpack team, both for the close collaboration earlier in development and for lighting the path that web development will take over the next few years. It's a wonderful tool, and you should absolutely try it out.
|
||||
|
||||
|
||||
## Dogfooding as extreme sport
|
||||
|
||||
SvelteKit is very much in beta, but that doesn't mean it hasn't been used in production.
|
||||
|
||||
My day job is at the New York Times, where I've spent much of the last twelve months working on our [coronavirus tracker](https://www.nytimes.com/interactive/2020/us/coronavirus-us-cases.html). It uses a customised version of the workflow that powers the majority of graphics at the Times, which isn't designed for large multi-page projects. When we decided late last year to create pages for each of the ~3,000 counties in the US, we quickly realised we would need to completely rearchitect the project.
|
||||
|
||||
Even though it was far from ready, SvelteKit was the only framework that matched our esoteric requirements. (Anyone who has worked in a newsroom and done battle with their CMS will know what I'm talking about.) Today it powers our [county risk pages](https://www.nytimes.com/interactive/2021/us/tom-green-texas-covid-cases.html) and we're in the process of migrating existing pages to the SvelteKit app.
|
||||
|
||||
<aside><p>I am eternally grateful for my coworkers' forbearance.</p></aside>
|
||||
|
||||
Using unfinished software to build an app that will be seen by millions of people is a risk, and in general I don't recommend it. But it has enabled us to develop the app much faster, and has made the framework itself much stronger than it otherwise would be.
|
||||
|
||||
## The road to 1.0
|
||||
|
||||
You can see the list of outstanding issues with the 1.0 milestone on our [issue tracker](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0). Alongside that work, we plan to upgrade the documentation and add more [adapters](https://kit.svelte.dev/docs#adapters).
|
||||
|
||||
Most importantly though, we need your feedback to help us make the best possible app framework. Try it out, and let us know which pieces are missing.
|
||||
|
||||
Many thanks to everyone who has tried SvelteKit out despite the 'here be dragons' warnings and lack of documentation; your back-channel feedback has been invaluable. In particular, I want to acknowledge the work of [GrygrFlzr](https://github.com/GrygrFlzr), who maintained unofficial docs and a fork that added Windows support when we lacked it; and [dominikg](https://github.com/dominikg) whose work on [Svite](https://github.com/svitejs/svite) laid essential groundwork for SvelteKit's Vite integration. Both have now been welcomed onto the team.
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
title: What's new in Svelte: April 2021
|
||||
description: SvelteKit beta and new way to use slots
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!
|
||||
|
||||
## What's up with SvelteKit?
|
||||
[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](https://svelte.dev/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2).
|
||||
|
||||
Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's [episode of Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) for a deep dive with Antony, Kev and Swyx.
|
||||
|
||||
## New in Svelte & Language Tools
|
||||
- Slotted components, including `<svelte:fragment slot="...">` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, check out the [docs](https://svelte.dev/docs#svelte_fragment) and the [tutorial](https://svelte.dev/tutorial/svelte-fragment))
|
||||
- Linked editing now works for HTML in Svelte files (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**)
|
||||
- Type definitions `svelte.d.ts` are now resolved in order, allowing library authors to ship type definitions with their svelte components (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**)
|
||||
- [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is available for general use of Svelte in Vite. `npm init @vitejs/app` includes Svelte options using this plugin.
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites**
|
||||
|
||||
- [Nagato](https://nagato.app/) is a task management tool that connects popular time tracking and to-do tools all in one place.
|
||||
- [type-kana](https://type-kana.cass.moe/setup) is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries.
|
||||
- [Pittsburgh Steps](https://pittsburgh-steps.samlearner.com/) is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA.
|
||||
- [Music Mode Wheels](https://tobx.github.io/music-mode-wheels/) is a website that displays music modes as interactive wheels.
|
||||
- [Critical Notes](https://www.critical-notes.com/) helps game masters and players keep track of their roleplaying games campaigns and adventures.
|
||||
- [Svelte Game of Life](https://github.com/alanrsoares/svelte-game-of-life) is an educational implementation of Conway's Game of Life in TypeScript + Svelte
|
||||
- [foxql](https://github.com/foxql) is a peer to peer full text search engine that runs on your browser.
|
||||
|
||||
|
||||
**Demos, Libraries, Tools & Components**
|
||||
|
||||
- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui) is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte
|
||||
- [Svelte Story Format](https://www.npmjs.com/package/@storybook/addon-svelte-csf) allows you to write your "stories" in Storybook using the Svelte syntax. More info in the [Storybook blog](https://storybook.js.org/blog/storybook-for-svelte/)
|
||||
- [SelectMadu](https://github.com/pavish/select-madu) is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
|
||||
- [Svelte Checklist](https://www.npmjs.com/package/svelte-checklist) is a customizable CheckList built with Svelte.
|
||||
- [Suspense for Svelte](https://www.npmjs.com/package/@jamcart/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`.
|
||||
- [MiniRx](https://spierala.github.io/mini-rx-store/) is a RxJS Redux Store that works with Svelte and TypeScript
|
||||
- [svelte-formly](https://github.com/arabdevelop/svelte-formly) generates dynamic forms for Svelte and Sapper
|
||||
- [7ty](https://www.npmjs.com/package/@jamcart/7ty) is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty.
|
||||
|
||||
**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**
|
||||
|
||||
- [sveltekit-electron](https://github.com/FractalHQ/sveltekit-electron) is a starter kit for Electron using SvelteKit
|
||||
- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
|
||||
- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function.
|
||||
|
||||
|
||||
**Looking for a particular starter?** 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**
|
||||
- [How to Build a Website with Svelte and SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) is a step-by-step tutorial walking through the new SvelteKit setup.
|
||||
- [A Svelte store for prefers-reduced-motion](https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/) demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility.
|
||||
- [TypeScript support in Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) is an MDN guide to using TypeScript in Svelte.
|
||||
- [How to merge cells with svelte-window](https://gradientdescent.de/merging-cells/) is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see [from react-window 1:1 to svelte-window](https://gradientdescent.de/porting-react-window/).
|
||||
- [Easy-to-Embed Svelte Components](https://codeandlife.com/2021/03/06/easy-to-embed-svelte-components/) explains how to use Rollup and a script tag to embed Svelte components anywhere.
|
||||
- [Convert Svelte project from Rollup to Snowpack](https://www.youtube.com/watch?v=-sHcqj4YLeQ) walks through a common migration pattern on video.
|
||||
- [How to internationalize routing in Svelte & Sapper](https://www.leaf.cloud/blog/how-to-internationalize-routing-in-svelte-sapper?utm_medium=story&utm_source=reddit.com&utm_campaign=awareness&utm_content=sapper_routing) explains how leaf.cloud translated their site to Dutch.
|
||||
- [Svelte Store: Reactive context using Svelte Store](https://www.youtube.com/watch?v=-rTnWlbdjoY) is a video answer to the question, "How do we make [a] context value reactive?"
|
||||
- [Creating Social Sharing Images with Cloudinary and Svelte](https://www.youtube.com/watch?v=-Si5o-R7KHY) is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website.
|
||||
|
||||
|
||||
## 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)!
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
title: What's new in Svelte: May 2021
|
||||
description: Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites!
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
Last week, Svelte Summit blew us away with a mountain of content! [Check out the full recording](https://www.youtube.com/watch?v=fnr9XWvjJHw) or an audio-only (p)review [on Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-party-episode). Now let's get into this month's news...
|
||||
|
||||
## New features in the Svelte Compiler
|
||||
- `:global()` is now supported as part of compound CSS selectors (**3.38.0**, [Example](https://svelte.dev/repl/54148fd2af484f2c84977c94e523c7c5?version=3.38.0))
|
||||
- CSS custom properties can now be passed to components for use cases such as theming (**3.38.0**, [Docs coming soon](https://github.com/sveltejs/svelte/issues/6268))
|
||||
|
||||
## New in SvelteKit
|
||||
- [kit.svelte.dev](https://kit.svelte.dev/) has a fresh new look and the [SvelteKit Demo Site](https://netlify.demo.svelte.dev/) got a fresh set of paint. Check it out by running `npm init svelte@next`
|
||||
- You can now use `@sveltejs/adapter-static` to create a single-page app or SPA by specifying a fallback page ([PR](https://github.com/sveltejs/kit/pull/1181), [Docs](https://github.com/sveltejs/kit/tree/master/packages/adapter-static))
|
||||
- Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis ([PR](https://github.com/sveltejs/kit/pull/713), [Docs](https://kit.svelte.dev/docs#ssr-and-javascript-ssr))
|
||||
- Error messages thrown during pre-rendering are now much more informative and readable ([PR](https://github.com/sveltejs/kit/pull/1062), [Docs](https://kit.svelte.dev/docs#layouts-error-pages))
|
||||
- Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation ([PR](https://github.com/sveltejs/kit/pull/1061), [Docs](https://kit.svelte.dev/docs#layouts-resets))
|
||||
- `fetch` in SvelteKit code will now use the environment-provided implementation, whenever possible. If `fetch` is unavailable, it will be polyfilled by adapters ([PR](https://github.com/sveltejs/kit/pull/1066), [Docs](https://kit.svelte.dev/docs#loading-input-fetch))
|
||||
|
||||
## New in Svelte & Language Tools
|
||||
- `svelte-preprocess` now supports the "extends" field of the tsconfig.json (4.7.2)
|
||||
- HTML `style` attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions
|
||||
- The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites**
|
||||
|
||||
- [gitpod.io](https://github.com/gitpod-io/website) recently rewrote its site with SvelteKit
|
||||
- [highlight eel](https://highlighteel.com/) is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone
|
||||
- [The Far Star Mission](https://thefarstar.apotheus.net/) is an interactive audiobook companion to the album, The Far Star by Apotheus
|
||||
- [JavaScript quiz](https://github.com/nclskfm/javascript-quiz) is a small quiz application that saves your answers locally
|
||||
- [ExtensionPay](https://extensionpay.com/) lets developers accept secure payments in browser extensions with no backend server code.
|
||||
- [mk48.io](https://mk48.io/) is a naval warship game made with SvelteKit
|
||||
- [Frog Safety](https://frog-safety.vercel.app/) is a guide for African Dwarf Frogs and the API freshwater master kit
|
||||
- [Stardew Valley Character Preview](https://github.com/overscore-media/stardew-valley-character-preview) loads your character's attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.
|
||||
|
||||
|
||||
**Demos, Libraries, Tools & Components**
|
||||
|
||||
- [svelte-parallax](https://github.com/kindoflew/svelte-parallax) is a spring-based parallax component for Svelte
|
||||
- [@svelte-plugins/viewable](https://github.com/svelte-plugins/viewable) is a simple rule-based approach to tracking element viewability.
|
||||
- [Sveltekit-JUI](https://github.com/Wolfr/sveltekit-jui) is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.
|
||||
- [EZGesture](https://github.com/mhmd-22/ezgesture#integrating-with-other-frameworks) makes it easy to add gestures functionality with simple native DOM events
|
||||
|
||||
**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**
|
||||
- [How to use Vercel Analytics with SvelteKit](https://ivoberger.com/posts/using-vercel-analytics-with-svelte-kit) teaches how to track Web Vitals across your users' devices
|
||||
- [Asp.NETCore + Svelte + Vite](https://github.com/Kiho/aspcore-spa-cli/tree/master/samples/SviteSample) connects the three frameworks with SpaCliMiddleware (VS2019)
|
||||
- [Add CoffeeScript to Svelte](https://github.com/Leftium/coffeescript-adder) is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app
|
||||
- [Adds Supabase to Svelte](https://github.com/joshnuss/svelte-supabase) is an experimental command to run to add Supabase to your SvelteKit project
|
||||
- [svelte-babylon](https://github.com/SectorXUSA/svelte-babylon) lets you use BabylonJS like A-Frame through reactive Svelte Components
|
||||
|
||||
**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**
|
||||
- [Amazing macOS Dock animation in Svelte](https://dev.to/puruvj/amazing-macos-dock-animation-in-svelte-5hfb) demonstrates how nice Svelte and popmotion look together
|
||||
- [Solving the Tower of Hanoi with recursive Svelte templates](https://geoffrich.net/posts/svelte-tower-of-hanoi/) incorporates the `<svelte:self>` element into a common computer science problem
|
||||
- [DIY SvelteKit CDK adapter](https://dev.to/juranki/diy-sveltekit-cdk-adapter-3enp) puts together SvelteKit and AWS CDK
|
||||
- Fireship's [Svelte in 100 Seconds](https://www.youtube.com/watch?v=rv3Yq-B8qp4) is a quick and easy introduction to Svelte's core concepts
|
||||
- [Tech Downtime](https://www.youtube.com/watch?v=tsePBA2JC7o&list=PLualcIC6WNK1LHIYx2Tg9AQfTQDv4zNPu) has been diving into SvelteKit in this playlist - from getting up and running to debugging.
|
||||
- lihautan's latest video updates in the [Svelte 101](https://www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59) and [Svelte Store](https://www.youtube.com/watch?v=p4GmT0trCPE&list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK&index=19) playlists cover slots, stores and context - and when to use which
|
||||
- [DavidParkerW](https://www.youtube.com/c/DavidParkerW/playlists) has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like [displaying a blog post list from an API](https://www.youtube.com/watch?v=kAPVFgFnxaM&list=PLPqKsyEGhUna6cvm6d4vZNI6gbt_0S4Xx&index=15)
|
||||
|
||||
|
||||
|
||||
## 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)!
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
title: What's new in Svelte: June 2021
|
||||
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, 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 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 `<a>` 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 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!
|
||||
- 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))
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**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)).
|
||||
|
||||
|
||||
**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 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!
|
||||
|
||||
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)!
|
||||
@ -1,9 +1,9 @@
|
||||
<p>Styled!</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
color: purple;
|
||||
font-family: 'Comic Sans MS', cursive;
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Styled!</p>
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<style>
|
||||
strong { color: blue; }
|
||||
</style>
|
||||
<strong>Blue thing</strong>
|
||||
|
||||
<strong>blue thing</strong>
|
||||
<style>
|
||||
strong {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<style>
|
||||
strong { color: green; }
|
||||
</style>
|
||||
<strong>Green thing</strong>
|
||||
|
||||
<strong>green thing</strong>
|
||||
<style>
|
||||
strong {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<style>
|
||||
strong { color: red; }
|
||||
</style>
|
||||
<strong>Red thing</strong>
|
||||
|
||||
<strong>red thing</strong>
|
||||
<style>
|
||||
strong {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<!-- https://eugenkiss.github.io/7guis/tasks#counter -->
|
||||
<script>
|
||||
let count = 0;
|
||||
</script>
|
||||
|
||||
<!-- https://github.com/eugenkiss/7guis/wiki#counter -->
|
||||
<input type=number bind:value={count}>
|
||||
<button on:click="{() => count += 1}">count</button>
|
||||
@ -1,5 +1,5 @@
|
||||
<p>This is a paragraph.</p>
|
||||
|
||||
<style>
|
||||
/* styles goes here */
|
||||
/* Write your CSS here */
|
||||
</style>
|
||||
|
||||
<p>This is a paragraph.</p>
|
||||
@ -1 +1 @@
|
||||
<p>This is another paragraph.</p>
|
||||
<p>This is another paragraph.</p>
|
||||
|
||||
@ -1 +1 @@
|
||||
<p>This is another paragraph.</p>
|
||||
<p>This is another paragraph.</p>
|
||||
|
||||
@ -1,24 +1,32 @@
|
||||
<script>
|
||||
// `current` is updated whenever the prop value changes...
|
||||
export let current;
|
||||
const emojis = {
|
||||
apple: "🍎",
|
||||
banana: "🍌",
|
||||
carrot: "🥕",
|
||||
doughnut: "🍩",
|
||||
egg: "🥚"
|
||||
}
|
||||
|
||||
// the name is updated whenever the prop value changes...
|
||||
export let name;
|
||||
|
||||
// ...but `initial` is fixed upon initialisation
|
||||
const initial = current;
|
||||
// ...but the "emoji" variable is fixed upon initialisation of the component
|
||||
const emoji = emojis[name];
|
||||
</script>
|
||||
|
||||
<p>
|
||||
<span style="background-color: {initial}">initial</span>
|
||||
<span style="background-color: {current}">current</span>
|
||||
<span>The emoji for { name } is { emoji }</span>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
width: 4em;
|
||||
padding: 0.2em 1em 0.3em;
|
||||
text-align: center;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
background-color: #FFDFD3;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,32 @@
|
||||
<script>
|
||||
// `current` is updated whenever the prop value changes...
|
||||
export let current;
|
||||
const emojis = {
|
||||
apple: "🍎",
|
||||
banana: "🍌",
|
||||
carrot: "🥕",
|
||||
doughnut: "🍩",
|
||||
egg: "🥚"
|
||||
}
|
||||
|
||||
// the name is updated whenever the prop value changes...
|
||||
export let name;
|
||||
|
||||
// ...but `initial` is fixed upon initialisation
|
||||
const initial = current;
|
||||
// ...but the "emoji" variable is fixed upon initialisation of the component
|
||||
const emoji = emojis[name];
|
||||
</script>
|
||||
|
||||
<p>
|
||||
<span style="background-color: {initial}">initial</span>
|
||||
<span style="background-color: {current}">current</span>
|
||||
<span>The emoji for { name } is { emoji }</span>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 0.5em;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
width: 4em;
|
||||
padding: 0.2em 1em 0.3em;
|
||||
text-align: center;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
background-color: #FFDFD3;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<button>
|
||||
Click me
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
height: 4rem;
|
||||
width: 8rem;
|
||||
background-color: #aaa;
|
||||
border-color: #f1c40f;
|
||||
color: #f1c40f;
|
||||
font-size: 1.25rem;
|
||||
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
|
||||
background-position: 100%;
|
||||
background-size: 400%;
|
||||
transition: background 300ms ease-in-out;
|
||||
background: #E2E8F0;
|
||||
color: #64748B;
|
||||
border: unset;
|
||||
border-radius: 6px;
|
||||
padding: .75rem 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-position: 0;
|
||||
color: #aaa;
|
||||
background: #CBD5E1;
|
||||
color: #475569;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button>
|
||||
Click me
|
||||
</button>
|
||||
button:focus {
|
||||
background: #94A3B8;
|
||||
color: #F1F5F9;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,22 @@
|
||||
<button on:click>
|
||||
Click me
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
height: 4rem;
|
||||
width: 8rem;
|
||||
background-color: #aaa;
|
||||
border-color: #f1c40f;
|
||||
color: #f1c40f;
|
||||
font-size: 1.25rem;
|
||||
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
|
||||
background-position: 100%;
|
||||
background-size: 400%;
|
||||
transition: background 300ms ease-in-out;
|
||||
background: #E2E8F0;
|
||||
color: #64748B;
|
||||
border: unset;
|
||||
border-radius: 6px;
|
||||
padding: .75rem 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-position: 0;
|
||||
color: #aaa;
|
||||
background: #CBD5E1;
|
||||
color: #475569;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button on:click>
|
||||
Click me
|
||||
</button>
|
||||
button:focus {
|
||||
background: #94A3B8;
|
||||
color: #F1F5F9;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue