mirror of https://github.com/sveltejs/svelte
Simon Holthausen
5 years ago
commit
7d308cbb95
@ -0,0 +1 @@
|
|||||||
|
open_collective: svelte
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
name: "\U0001F41E Bug report"
|
||||||
|
description: Report an issue with Svelte
|
||||||
|
labels: ["triage: bug"]
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
Thanks for taking the time to fill out this bug report!
|
||||||
|
- type: textarea
|
||||||
|
id: bug-description
|
||||||
|
attributes:
|
||||||
|
label: Describe the bug
|
||||||
|
description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
|
||||||
|
placeholder: Bug description
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
id: reproduction
|
||||||
|
attributes:
|
||||||
|
label: Reproduction
|
||||||
|
description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
|
||||||
|
placeholder: Reproduction
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
id: logs
|
||||||
|
attributes:
|
||||||
|
label: Logs
|
||||||
|
description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
|
||||||
|
render: shell
|
||||||
|
- type: textarea
|
||||||
|
id: system-info
|
||||||
|
attributes:
|
||||||
|
label: System Info
|
||||||
|
description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`
|
||||||
|
render: shell
|
||||||
|
placeholder: System, Binaries, Browsers
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: dropdown
|
||||||
|
id: severity
|
||||||
|
attributes:
|
||||||
|
label: Severity
|
||||||
|
description: Select the severity of this issue
|
||||||
|
options:
|
||||||
|
- annoyance
|
||||||
|
- blocking an upgrade
|
||||||
|
- blocking all usage of svelte
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
blank_issues_enabled: false
|
||||||
|
contact_links:
|
||||||
|
- name: Discord Chat
|
||||||
|
url: https://svelte.dev/chat
|
||||||
|
about: Ask questions and discuss with other Svelte users in real time.
|
||||||
@ -1,28 +0,0 @@
|
|||||||
---
|
|
||||||
name: Feature request
|
|
||||||
about: Suggest an idea for this project
|
|
||||||
title: ''
|
|
||||||
labels: 'New Feature'
|
|
||||||
assignees: ''
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<!--
|
|
||||||
If you'd like to propose an implementation for a large new feature or change then please create an RFC:
|
|
||||||
https://github.com/sveltejs/rfcs
|
|
||||||
-->
|
|
||||||
|
|
||||||
**Is your feature request related to a problem? Please describe.**
|
|
||||||
A clear and concise description of what the problem is. For example: I'm always frustrated when [...]
|
|
||||||
|
|
||||||
**Describe the solution you'd like**
|
|
||||||
A clear and concise description of what you want to happen.
|
|
||||||
|
|
||||||
**Describe alternatives you've considered**
|
|
||||||
A clear and concise description of any alternative solutions or features you've considered.
|
|
||||||
|
|
||||||
**How important is this feature to you?**
|
|
||||||
Note: the more honest and specific you are here the more we will take you seriously.
|
|
||||||
|
|
||||||
**Additional context**
|
|
||||||
Add any other context or screenshots about the feature request here.
|
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
name: "Feature Request"
|
||||||
|
description: Request a new Svelte feature
|
||||||
|
labels: [enhancement]
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs).
|
||||||
|
- type: textarea
|
||||||
|
id: problem
|
||||||
|
attributes:
|
||||||
|
label: Describe the problem
|
||||||
|
description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
|
||||||
|
placeholder: I'm always frustrated when...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
id: solution
|
||||||
|
attributes:
|
||||||
|
label: Describe the proposed solution
|
||||||
|
description: Please provide a clear and concise description of what you would like to happen.
|
||||||
|
placeholder: I would like to see...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
id: alternatives
|
||||||
|
attributes:
|
||||||
|
label: Alternatives considered
|
||||||
|
description: "Please provide a clear and concise description of any alternative solutions or features you've considered."
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: dropdown
|
||||||
|
id: importance
|
||||||
|
attributes:
|
||||||
|
label: Importance
|
||||||
|
description: How important is this feature to you?
|
||||||
|
options:
|
||||||
|
- nice to have
|
||||||
|
- would make my life easier
|
||||||
|
- i cannot use svelte without it
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
@ -1,12 +0,0 @@
|
|||||||
---
|
|
||||||
name: Questions and help
|
|
||||||
about: If you think you need help with something related to Svelte
|
|
||||||
title: ''
|
|
||||||
labels: 'Question'
|
|
||||||
assignees: ''
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
This issue tracker is intended to collect bug reports and feature requests.
|
|
||||||
|
|
||||||
For help with installation, information on how features work, or questions about specific features of Svelte, please come and join us in the [Svelte Discord](https://svelte.dev/chat), or ask your question on [Stack Overflow](https://stackoverflow.com/questions/tagged/svelte). Any issues open for help requests will be closed to keep from clogging up the issue tracker.
|
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
# Configuration for probot-stale - https://github.com/probot/stale
|
||||||
|
|
||||||
|
# Only issues or pull requests with all of these labels are check if stale. Defaults to `[]` (disabled)
|
||||||
|
onlyLabels: []
|
||||||
|
|
||||||
|
# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable
|
||||||
|
exemptLabels:
|
||||||
|
- popular
|
||||||
|
- pinned
|
||||||
|
- security
|
||||||
|
- bug
|
||||||
|
- "[Status] Maybe Later"
|
||||||
|
|
||||||
|
# Set to true to ignore issues in a project (defaults to false)
|
||||||
|
exemptProjects: false
|
||||||
|
|
||||||
|
# Set to true to ignore issues in a milestone (defaults to false)
|
||||||
|
exemptMilestones: false
|
||||||
|
|
||||||
|
# Set to true to ignore issues with an assignee (defaults to false)
|
||||||
|
exemptAssignees: false
|
||||||
|
|
||||||
|
# Label to use when marking as stale
|
||||||
|
staleLabel: stale-bot
|
||||||
|
|
||||||
|
# Comment to post when removing the stale label.
|
||||||
|
# unmarkComment: >
|
||||||
|
# Your comment here.
|
||||||
|
|
||||||
|
# Limit the number of actions per hour, from 1-30. Default is 30
|
||||||
|
limitPerRun: 30
|
||||||
|
|
||||||
|
# Optionally, specify configuration settings that are specific to just 'issues' or 'pulls':
|
||||||
|
pulls:
|
||||||
|
daysUntilStale: 210
|
||||||
|
daysUntilClose: 25
|
||||||
|
markComment: >
|
||||||
|
This pull request has been automatically marked as stale because it has not had
|
||||||
|
recent activity. It will be closed if no further activity occurs. Thank you
|
||||||
|
for your contributions.
|
||||||
|
closeComment: >
|
||||||
|
This pull request has been closed as it was previously marked as stale and saw no subsequent activity.
|
||||||
|
|
||||||
|
issues:
|
||||||
|
daysUntilStale: 180
|
||||||
|
daysUntilClose: 14
|
||||||
|
markComment: >
|
||||||
|
This issue has been automatically marked as stale because it has not had
|
||||||
|
recent activity. It will be closed if no further activity occurs. Thank you
|
||||||
|
for your contributions.
|
||||||
|
closeComment: >
|
||||||
|
This issue has been closed as it was previously marked as stale and saw no subsequent activity.
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
name: Docs
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- master
|
||||||
|
paths:
|
||||||
|
- site/content/**
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
release:
|
||||||
|
name: Deploy docs
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: my-app-install token
|
||||||
|
id: github-app
|
||||||
|
uses: getsentry/action-github-app-token@v1
|
||||||
|
with:
|
||||||
|
app_id: ${{ secrets.GH_APP_ID }}
|
||||||
|
private_key: ${{ secrets.GH_APP_PRIVATE_KEY }}
|
||||||
|
|
||||||
|
- name: run deploy docs workflow
|
||||||
|
uses: 'sveltejs/action-deploy-docs/dispatch@main'
|
||||||
|
with:
|
||||||
|
repo: 'svelte'
|
||||||
|
branch: 'master'
|
||||||
|
docs_path: 'site/content'
|
||||||
|
token: ${{ steps.github-app.outputs.token }}
|
||||||
File diff suppressed because it is too large
Load Diff
@ -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 template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates/)
|
||||||
|
|
||||||
|
**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 template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates)
|
||||||
|
|
||||||
|
|
||||||
|
**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)!
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
---
|
||||||
|
title: What's new in Svelte: July 2021
|
||||||
|
description: Keeping cool with fixes, TypeScript tooling and tonnes of new features
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let's take a peek 👀
|
||||||
|
|
||||||
|
## New in SvelteKit
|
||||||
|
- `adapter-node` now precompresses assets using gzip & brotli ([#1693](https://github.com/sveltejs/kit/pull/1693))
|
||||||
|
- Support for TypeScript transpilation has been added to the `svelte-kit package` tooling ([#1633](https://github.com/sveltejs/kit/pull/1633))
|
||||||
|
- Improved caching defaults in `adapter-node` ([#1416](https://github.com/sveltejs/kit/pull/1416))
|
||||||
|
- Allow configuring Rollup output options ([#1572](https://github.com/sveltejs/kit/pull/1572))
|
||||||
|
- Fixed usage of SSL with HMR ([#1517](https://github.com/sveltejs/kit/pull/1517))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Features & bug fixes from around svelte/*
|
||||||
|
- [Svelte 3.38.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3383) (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, `this` preservation in bubbled events, and more!
|
||||||
|
- The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a `.d.ts` output target in `svelte2tsx` which can be used to create type definitions from Svelte files.
|
||||||
|
- Also in language tools, some long-awaited experimental features for enhanced TypeScript support were added - including explicitly typing all possible component events or slots, and using generics. Have a look at [the RFC](https://github.com/sveltejs/rfcs/pull/38) for more details and leave feedback in [this issue](https://github.com/sveltejs/language-tools/issues/442) if you are using it.
|
||||||
|
- `svelte-scroller` got some quality-of-life fixes in 2.0.7 - fixing an initial width bug and updating its `index` more conservatively
|
||||||
|
|
||||||
|
|
||||||
|
## Coming soon to Svelte
|
||||||
|
- Constants in markup ([RFC](https://github.com/sveltejs/rfcs/blob/master/text/0000-markup-constants.md)): Adds a new `{@const ...}` tag that defines a local constant ([PR](https://github.com/sveltejs/svelte/pull/6413))
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites**
|
||||||
|
- [SvelteThemes](https://sveltethemes.dev/) is a curated list of Svelte themes and templates built using svelte, sveltekit, elderjs, routify etc.
|
||||||
|
- [Beatbump](https://github.com/snuffyDev/Beatbump) is an alternative frontend for YouTube Music created using Svelte/SvelteKit.
|
||||||
|
- [Sveltuir](https://github.com/webspaceadam/sveltuir) is an app help you memorize the guitar fretboard
|
||||||
|
|
||||||
|
|
||||||
|
**Educational Content**
|
||||||
|
- [Svelte Radio: A Jolly Good Svelte Summer](https://share.transistor.fm/s/60880542) is a conversation about what's new in Svelte and a celebration of Svelte Radio's 1-year anniversary
|
||||||
|
- [Class properties in Svelte](https://navillus.dev/blog/svelte-class-props) is a refresher on the power of `class` for developers switching over to Svelte from React
|
||||||
|
- [Sveltekit Tutorial for Beginners](https://www.youtube.com/playlist?list=PLm_Qt4aKpfKjf77S8UD79Ockhwp_699Ms) is a video playlist for learning SvelteKit by WebJeda
|
||||||
|
- [How To Cache Dynamic Pages On Demand With A Service Worker In SvelteKit](https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d) walks through the power of service workers when used within SvelteKit for on-demand caching
|
||||||
|
- [Vue vs Svelte: Comparing Framework Internals](https://www.vuemastery.com/blog/vue-vs-svelte-comparing-framework-internals/) dives deep into the differences between Vue and Svelte from the inside out
|
||||||
|
- [Setting up a development environment for SvelteKit with Docker and Docker Compose](https://jenyus.web.app/blog/2021-05-30-setting-up-a-development-environment-for-sveltekit-with-docker-and-compose) walks through how to use Docker to create reusable development environments, no matter what kind of device you run your code on
|
||||||
|
- Scalable Scripts released three videos this month documenting how to deploy dockerized Svelte Apps to [AWS](https://youtu.be/VOs2Od5jYOc), [Azure](https://youtu.be/gdg4ne_uDm8) and [Google Cloud](https://youtu.be/_-uBb61Tikw)
|
||||||
|
- [Render Katex with Svelte from zero to hero](https://www.youtube.com/watch?v=euowJs9CblA) demonstrates how to implement Katex in a Svelte project
|
||||||
|
- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) shows some of the quirks to look out for when using custom elements in a Svelte site
|
||||||
|
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [svelte-pipeline](https://github.com/novacbn/svelte-pipeline) provides custom Javascript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc.
|
||||||
|
- [Sveltotron](https://github.com/Salemmous/sveltotron) is an Electron-based app made to inspect your Svelte app
|
||||||
|
- [svelte-qr-reader-writer](https://github.com/pleasemarkdarkly/svelte-qr-reader-writer) is a Svelte component that helps read and write data from QR codes
|
||||||
|
- [svelte-stack-router](https://www.npmjs.com/package/svelte-stack-router) Aims to make Svelte apps feel more native by routing with Stacks
|
||||||
|
- [svelte-typed-context](https://www.npmjs.com/package/svelte-typed-context) provides an interface which, when provided to `getContext` or `setContext`, allows for stricter types
|
||||||
|
- [svelte-modals](https://svelte-modals.mattjennings.io/) is a simple, flexible, zero-dependency modal manager for Svelte
|
||||||
|
|
||||||
|
|
||||||
|
**Want to contribute a component? Interested in helping make Svelte's presence on the web better?** Submit a Component to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety-2021/blob/main/src/routes/components/components.json) or check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
|
||||||
|
|
||||||
|
|
||||||
|
## See you next month!
|
||||||
|
|
||||||
|
Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
title: What's new in Svelte: August 2021
|
||||||
|
description: Shadow DOM, export and await - oh my!
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
From The Changelog ([JS Party Ep. 182](https://changelog.com/jsparty/182)) to Svelte Radio (Episodes [29](https://share.transistor.fm/s/adc23e84) and [30](https://share.transistor.fm/s/6316622d)), it seems that folks couldn't help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte.
|
||||||
|
|
||||||
|
## New in Svelte
|
||||||
|
|
||||||
|
July was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features:
|
||||||
|
|
||||||
|
- The `|trusted` event modifier allows you to check if an event is trusted before it's called ([#6137](https://github.com/sveltejs/svelte/issues/6137))
|
||||||
|
- The new `svelte/ssr` package to support work on improving SvelteKit SSR ([#6416](https://github.com/sveltejs/svelte/pull/6416))
|
||||||
|
- A new `errorMode` compiler option to support improved preprocessing of TypeScript files ([#6194](https://github.com/sveltejs/svelte/pull/6194))
|
||||||
|
- You can now specify a `ShadowRoot` as the `target` when creating a component - making it possible to render Svelte components inside the shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869))
|
||||||
|
- The `export { ... } from` ([#2214](https://github.com/sveltejs/svelte/issues/2214)), `export let { ... } =` ([#5612](https://github.com/sveltejs/svelte/issues/5612)) and `{#await ... then/catch}` ([#6270](https://github.com/sveltejs/svelte/issues/6270)) syntaxes are all now supported in Svelte components
|
||||||
|
|
||||||
|
For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
|
||||||
|
|
||||||
|
## SvelteKit Updates
|
||||||
|
- `prerender.force` is now `prerender.onError` which lets you fine-tune which errors fail the build and which do not ([#2007](https://github.com/sveltejs/kit/pull/2007))
|
||||||
|
- esbuild's configuration is now exposed for use with SvelteKit adapters ([#1914](https://github.com/sveltejs/kit/pull/1914))
|
||||||
|
- Error messages are friendlier now for common config errors ([#1910](https://github.com/sveltejs/kit/pull/1910)) and compiler errors ([#1827](https://github.com/sveltejs/kit/pull/1827))
|
||||||
|
- Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it ([#1847](https://github.com/sveltejs/kit/pull/1847))
|
||||||
|
- index.js exports will now be changed to directory exports when packaging - making for nicer imports ([#1905](https://github.com/sveltejs/kit/pull/1905))
|
||||||
|
- Vite.js's `mode` is now exposed from `$app/env` ([#1789](https://github.com/sveltejs/kit/pull/1789))
|
||||||
|
- Better types across the board ([#1778](https://github.com/sveltejs/kit/pull/1778), [#1791](https://github.com/sveltejs/kit/pull/1791), [#1646](https://github.com/sveltejs/kit/pull/1646))
|
||||||
|
|
||||||
|
To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
|
||||||
|
|
||||||
|
## Features & bug fixes from around svelte/*
|
||||||
|
- Language Tools now better support the "Workplace Trust" functionality (used in VS Code)
|
||||||
|
- In svelte2tsx, ambient type declarations are now renamed to avoid conflicting declarations in the future. Users are now expected to provide the ambient type definitions themselves - fixing JS output
|
||||||
|
- Sapper released v0.29.2 which fixes regex routes, status codes when requesting a directory, and exports when a user has not provided a `base` tag ([changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md))
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites**
|
||||||
|
- [Parsnip](https://www.parsnip.ai/) is a mobile-first, progressive-web-app that helps you to learn to cook at home. Check out the [conversation on Reddit](https://www.reddit.com/r/sveltejs/comments/oearb9/learning_to_cook_at_home_with_parsnip_built/) for all the geeky details.
|
||||||
|
- [Central Bank Digital Currency (CBDC) tracker](https://www.atlanticcouncil.org/cbdctracker/) is a site that keeps track of how countries around the world are adopting digital currencies.
|
||||||
|
- [Svelte Commerce](https://github.com/itswadesh/svelte-commerce) is an advanced frontend platform for eCommerce based on Sveltekit.
|
||||||
|
- [neovimcraft](https://neovimcraft.com/) is a SvelteKit site dedicated to neovim plugins
|
||||||
|
|
||||||
|
**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
|
||||||
|
|
||||||
|
**Educational Content**
|
||||||
|
- [How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust](https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/) is a blog post by Luke Edwards, Svelte maintainer and Developer Advocate from Cloudflare.
|
||||||
|
- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi) is a step-by-step tutorial by Aarnav Pai from Strapi
|
||||||
|
- [Sveltekit Markdown Blog](https://www.youtube.com/watch?v=sKKgT0SEioI&list=PLm_Qt4aKpfKgonq1zwaCS6kOD-nbOKx7V) is a YouTube tutorial series by WebJeda.
|
||||||
|
- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) is a deep dive into custom elements by Geoff Rich.
|
||||||
|
- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course course from Hasura.
|
||||||
|
- [How to add Magic Link to a SvelteKit application](https://magic.link/posts/magic-svelte) is a guide to the popular password-less login pattern.
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [Svelte-Capacitor](https://github.com/drannex42/svelte-capacitor/) just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance.
|
||||||
|
- [svelte-remixicon](https://github.com/ABarnob/svelte-remixicon) is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons.
|
||||||
|
- [SveltePress](https://github.com/GeopJr/SveltePress) is a documentation tool built on top of SvelteKit.
|
||||||
|
- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quckly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
|
||||||
|
- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
|
||||||
|
- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
|
||||||
|
|
||||||
|
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
|
||||||
|
|
||||||
|
|
||||||
|
## See you next month!
|
||||||
|
|
||||||
|
Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
title: What's new in Svelte: September 2021
|
||||||
|
description: StackOverflow's most loved web framework
|
||||||
|
author: Daniel Sandoval
|
||||||
|
authorURL: https://desandoval.net
|
||||||
|
---
|
||||||
|
|
||||||
|
This month, Svelte was [voted StackOverflow's most loved web framework](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks), Tan Li Hau [talked to Svelte Radio](https://share.transistor.fm/s/84c7521b) about his [Svelte-filled YouTube channel](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ), and SvelteKit made even more progress towards its 1.0 release!
|
||||||
|
|
||||||
|
## New in Svelte
|
||||||
|
|
||||||
|
- `use:actions` can now be used on `<svelte:body>` (**3.42.0**)
|
||||||
|
- `HTMLElement`, `SVGElement` (**3.42.2**) and `BigInt` (**3.42.3**) are now known globals
|
||||||
|
- There is less code in Svelte's output thanks to the following improvements in **3.42.2**:
|
||||||
|
- Whitespace is now collapsed in class and style attributes
|
||||||
|
- Hydrated components have been updated to only rely upon helpers for creating the types of elements present in the component
|
||||||
|
- Scaling is now accounted for in `flip` animations (**3.42.2**)
|
||||||
|
- All `<option>`s in a `<select>` are now deselected when the bound value doesn't match any of them (**3.42.2**)
|
||||||
|
|
||||||
|
For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
|
||||||
|
|
||||||
|
## SvelteKit Updates
|
||||||
|
|
||||||
|
Svelte maintainers are [looking for help getting SvelteKit to 1.0](https://github.com/sveltejs/kit/issues/2100). We've knocked out over 100 issues that were on the 1.0 milestone. There's only a couple dozen left and we'd love a hand making that list a bit shorter!
|
||||||
|
|
||||||
|
If you'd like to help, please consider working on any of the [1.0 milestone issues](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0).
|
||||||
|
|
||||||
|
The focus this past month was on continuing to iron out any kinks, with well over 100 PRs merged. A few new features went in as well...
|
||||||
|
|
||||||
|
- SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently ([#2104](https://github.com/sveltejs/kit/pull/2104))
|
||||||
|
- `adapter-node` now lets you [add the Kit middleware to your own server](https://kit.svelte.dev/faq#integrations) for use with other middleware. You can also [add middleware in dev mode](https://kit.svelte.dev/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-middleware) with more improvements to come in this area
|
||||||
|
- The new [`sequence` helper lets you chain together multiple `handle` calls](https://kit.svelte.dev/docs#modules-sveltejs-kit-hooks)
|
||||||
|
- A new [`handleError` hook](https://kit.svelte.dev/docs#hooks-handleerror) gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console.
|
||||||
|
- `adapter-node` can now listen on socket path ([#2048](https://github.com/sveltejs/kit/pull/2048))
|
||||||
|
|
||||||
|
To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Community Showcase
|
||||||
|
|
||||||
|
**Apps & Sites**
|
||||||
|
- [macos-web](https://github.com/PuruVJ/macos-web) by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this [Twitter thread](https://twitter.com/puruvjdev/status/1426267327687847939)
|
||||||
|
- [Brave Search](https://search.brave.com/) is using Svelte
|
||||||
|
- [exatorrent](https://github.com/varbhat/exatorrent) is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
|
||||||
|
- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to Typescript Types/Interfaces
|
||||||
|
- [Histogram.dev](https://histogram.dev/) generates histograms for each feature in a CSV
|
||||||
|
- [cybernetic.dev](https://cybernetic.dev/) is a collection of data-centric UI experiments made while learning Svelte
|
||||||
|
- [LunaNotes](https://chrome.google.com/webstore/detail/lunanotes-youtube-video-n/oehoffnnkgcdacmbkhmlbjedinpampak?hl=en) is a Chrome extension to help with taking YouTube video notes
|
||||||
|
- [theia.games](https://theia.games/#dev)'s built-in 3D environment editor lets you create a VR world with a menu built in Svelte
|
||||||
|
- [Ferrum](https://github.com/probablykasper/ferrum) is a music library and player available for Mac, Windows or Linux
|
||||||
|
- [Fluid Earth](https://github.com/byrd-polar/fluid-earth) is an interactive WebGL application for visualizing Earth's atmosphere and oceans
|
||||||
|
|
||||||
|
**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
|
||||||
|
|
||||||
|
**Educational Content**
|
||||||
|
- [Tauri with Standard Svelte or SvelteKit](https://medium.com/@cazanator/tauri-with-standard-svelte-or-sveltekit-ad7f103c37e7) walks through how to setup Svelte with Tauri, a new light-weight framework for developing cross-platform hybrid desktop applications
|
||||||
|
- [Svelte - Web App Development Reimagined [An Intro to Svelte]](https://www.youtube.com/watch?v=4CGzFwHoD0A&list=PLEx5khR4g7PKSASVAXXiAhkyx02_OeruP) is a great intro talk from the goto; conference
|
||||||
|
- [LevelUpTuts - Even More 5 Things I Like More In Svelte Than React](https://www.youtube.com/watch?v=ISmnG2sIOeM) highlights Svelte's approach to refs (don't need them), meta tags and more
|
||||||
|
- [State Management in Svelte Applications](https://auth0.com/blog/state-management-in-svelte-applications/) is a tutorial on how to use the Svelte state management store to manage state in Svelte applications
|
||||||
|
- [Migrating from Sapper to SvelteKit](https://shipbit.de/blog/migrating-from-sapper-to-svelte-kit/) is a review and retrospective of ShipBit's migration from Sapper
|
||||||
|
|
||||||
|
**Libraries, Tools & Components**
|
||||||
|
- [svelte-stripe-js](https://github.com/joshnuss/svelte-stripe-js) is everything you need to add Stripe to your Svelte project. 100% SvelteKit compatible
|
||||||
|
- [svelte-steps](https://github.com/shaozi/svelte-steps) is a customizable step component written in Svelte
|
||||||
|
- [simple-optics-module](https://gitlab.com/Samzelot/simple-optics-module) is an online open source optics tool for experimenting and teaching geometrical optics
|
||||||
|
- [inlang](https://github.com/samuelstroschein/inlang) is an internationalization (i18n) tool for SvelteKit apps
|
||||||
|
- [Sveno](https://github.com/pocinnovation/sveno) is a component transpiler that transforms React components to Svelte components
|
||||||
|
- [svelte-useactions](https://github.com/paolotiu/svelte-useactions) is a fully typed library for passing actions to components
|
||||||
|
- [Svelte-Element-Query](https://github.com/leveluptuts/Svelte-Element-Query) is a 322b library/action for element queries
|
||||||
|
- [svelte-meta-tags](https://github.com/oekazuma/svelte-meta-tags) is a plug-in that makes managing SEO easier in Svelte projects
|
||||||
|
- [svelte-domtree](https://github.com/alex-knyaz/svelte-domtree) lets you visualize the DOM - similar to DOM tree in Chrome DevTools
|
||||||
|
- [Diffx](https://github.com/jbjorge/diffx/tree/master/svelte), a cross-framework state management library, just added Svelte support
|
||||||
|
- [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
|
||||||
|
- [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) is a starter kit for SvelteKit and Sanity, an open source React CMS
|
||||||
|
|
||||||
|
Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
|
||||||
|
|
||||||
|
|
||||||
|
## See you next month!
|
||||||
|
|
||||||
|
Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
|
||||||
@ -0,0 +1,258 @@
|
|||||||
|
---
|
||||||
|
title: Accessibility warnings
|
||||||
|
---
|
||||||
|
|
||||||
|
Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application.
|
||||||
|
|
||||||
|
Here is a list of accessibility checks Svelte will do for you.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-accesskey`
|
||||||
|
|
||||||
|
Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: Avoid using accesskey -->
|
||||||
|
<div accessKey='z'></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-aria-attributes`
|
||||||
|
|
||||||
|
Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: <meta> should not have aria-* attributes -->
|
||||||
|
<meta aria-hidden="false">
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-autofocus`
|
||||||
|
|
||||||
|
Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: Avoid using autofocus -->
|
||||||
|
<input autofocus>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-distracting-elements`
|
||||||
|
|
||||||
|
Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
|
||||||
|
|
||||||
|
The following elements are visually distracting: `<marquee>` and `<blink>`.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: Avoid <marquee> elements -->
|
||||||
|
<marquee />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-hidden`
|
||||||
|
|
||||||
|
Certain DOM elements are useful for screen reader navigation and should not be hidden.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: <h2> element should not be hidden -->
|
||||||
|
<h2 aria-hidden="true">invisible header</h2>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-img-redundant-alt`
|
||||||
|
|
||||||
|
Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<img src="foo" alt="Foo eating a sandwich." />
|
||||||
|
|
||||||
|
<!-- aria-hidden, won't be announced by screen reader -->
|
||||||
|
<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />
|
||||||
|
|
||||||
|
<!-- A11y: Screen readers already announce <img> elements as an image. -->
|
||||||
|
<img src="foo" alt="Photo of foo being weird." />
|
||||||
|
|
||||||
|
<!-- A11y: Screen readers already announce <img> elements as an image. -->
|
||||||
|
<img src="bar" alt="Image of me at a bar!" />
|
||||||
|
|
||||||
|
<!-- A11y: Screen readers already announce <img> elements as an image. -->
|
||||||
|
<img src="foo" alt="Picture of baz fixing a bug." />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-invalid-attribute`
|
||||||
|
|
||||||
|
Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: '' is not a valid href attribute -->
|
||||||
|
<a href=''>invalid</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-label-has-associated-control`
|
||||||
|
|
||||||
|
Enforce that a label tag has a text label and an associated control.
|
||||||
|
|
||||||
|
There are two supported ways to associate a label with a control:
|
||||||
|
|
||||||
|
- Wrapping a control in a label tag.
|
||||||
|
- Adding `for` to a label and assigning it the ID of an input on the page.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<label for="id">B</label>
|
||||||
|
|
||||||
|
<label>C <input type="text" /></label>
|
||||||
|
|
||||||
|
<!-- A11y: A form label must be associated with a control. -->
|
||||||
|
<label>A</label>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-media-has-caption`
|
||||||
|
|
||||||
|
Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
|
||||||
|
|
||||||
|
The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<video><track kind="captions"/></video>
|
||||||
|
|
||||||
|
<audio muted></audio>
|
||||||
|
|
||||||
|
<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
|
||||||
|
<video></video>
|
||||||
|
|
||||||
|
<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
|
||||||
|
<video><track /></video>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-misplaced-role`
|
||||||
|
|
||||||
|
Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: <meta> should not have role attribute -->
|
||||||
|
<meta role="tooltip">
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-misplaced-scope`
|
||||||
|
|
||||||
|
The scope attribute should only be used on `<th>` elements.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: The scope attribute should only be used with <th> elements -->
|
||||||
|
<div scope="row" />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-missing-attribute`
|
||||||
|
|
||||||
|
Enforce that attributes required for accessibility are present on an element. This includes the following checks:
|
||||||
|
|
||||||
|
- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))
|
||||||
|
- `<area>` should have alt, aria-label, or aria-labelledby
|
||||||
|
- `<html>` should have lang
|
||||||
|
- `<iframe>` should have title
|
||||||
|
- `<img>` should have alt
|
||||||
|
- `<object>` should have title, aria-label, or aria-labelledby
|
||||||
|
- `<input type="image">` should have alt, aria-label, or aria-labelledby
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
|
||||||
|
<input type="image">
|
||||||
|
|
||||||
|
<!-- A11y: <html> element should have a lang attribute -->
|
||||||
|
<html></html>
|
||||||
|
|
||||||
|
<!-- A11y: <a> element should have an href attribute -->
|
||||||
|
<a>text</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-missing-content`
|
||||||
|
|
||||||
|
Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: <a> element should have child content -->
|
||||||
|
<a href='/foo'></a>
|
||||||
|
|
||||||
|
<!-- A11y: <h1> element should have child content -->
|
||||||
|
<h1></h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-mouse-events-have-key-events`
|
||||||
|
|
||||||
|
Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and `on:blur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: on:mouseover must be accompanied by on:focus -->
|
||||||
|
<div on:mouseover={handleMouseover} />
|
||||||
|
|
||||||
|
<!-- A11y: on:mouseout must be accompanied by on:blur -->
|
||||||
|
<div on:mouseout={handleMouseout} />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-positive-tabindex`
|
||||||
|
|
||||||
|
Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: avoid tabindex values above zero -->
|
||||||
|
<div tabindex='1'/>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-structure`
|
||||||
|
|
||||||
|
Enforce that certain DOM elements have the correct structure.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: <figcaption> must be an immediate child of <figure> -->
|
||||||
|
<div>
|
||||||
|
<figcaption>Image caption</figcaption>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-unknown-aria-attribute`
|
||||||
|
|
||||||
|
Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
|
||||||
|
<input type="image" aria-labeledby="foo">
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `a11y-unknown-role`
|
||||||
|
|
||||||
|
Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
|
||||||
|
|
||||||
|
```sv
|
||||||
|
<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
|
||||||
|
<div role="toooltip"></div>
|
||||||
|
```
|
||||||
@ -1,5 +1,7 @@
|
|||||||
|
<strong>Blue thing</strong>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
strong { color: blue; }
|
strong {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<strong>blue thing</strong>
|
|
||||||
@ -1,5 +1,7 @@
|
|||||||
|
<strong>Green thing</strong>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
strong { color: green; }
|
strong {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<strong>green thing</strong>
|
|
||||||
@ -1,5 +1,7 @@
|
|||||||
|
<strong>Red thing</strong>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
strong { color: red; }
|
strong {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<strong>red thing</strong>
|
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
question: Is there a tool to automatically format my .svelte files?
|
||||||
|
---
|
||||||
|
|
||||||
|
You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue