mirror of https://github.com/sveltejs/svelte
andirady
4 years ago
committed by
GitHub
commit
48b60bafe8
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,87 @@
|
||||
---
|
||||
title: "What's new in Svelte: March 2022"
|
||||
description: "Svelte Summit Spring is coming... and page endpoints are here!"
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
Just announced: [Svelte Summit Spring](https://www.sveltesummit.com/) will be taking place on April 30, 2022. The 5th Virtual Svelte Conference is [looking for speakers](https://www.sveltesummit.com/#speakers) and [sponsors](https://www.sveltesummit.com/sponsors)... so it's time to dust off those proposals!
|
||||
|
||||
Also, some long-requested features were added to SvelteKit this month... including page endpoints! This change in how the `load` function works makes it easier to fetch data required for basic pages, redirect from POST responses and handle 404s and other errors.
|
||||
|
||||
More on that and other new features and fixes below!
|
||||
|
||||
## What's new in SvelteKit
|
||||
- The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at [kit.svelte.dev/docs](https://kit.svelte.dev/docs/)
|
||||
- Page endpoints significantly decrease the boilerplate needed when loading a page ([Issue](https://github.com/sveltejs/kit/issues/3532), [PR](https://github.com/sveltejs/kit/pull/3679), [Docs](https://kit.svelte.dev/docs/routing#endpoints-page-endpoints))
|
||||
- Application versioning and update detection support lets you determine what to do when a route fails to load after an app update ([Issue](https://github.com/sveltejs/kit/issues/87), [PR](https://github.com/sveltejs/kit/pull/3412), [Docs](https://kit.svelte.dev/docs/configuration#version))
|
||||
- A new option in `npm init svelte@next` will now set up Playwright automatically for testing ([PR](https://github.com/sveltejs/kit/pull/4056))
|
||||
|
||||
|
||||
**Breaking Changes**
|
||||
- The `target` option is no longer available. Instead, the `init` script hydrates its `parentNode` ([#3674](https://github.com/sveltejs/kit/pull/3674))
|
||||
- App-level types now live in the `App` namespace which allows you to type global types like `Stuff` or `Session` ([#3670](https://github.com/sveltejs/kit/pull/3670))
|
||||
- `JSONString` is now `JSONValue` ([#3683](https://github.com/sveltejs/kit/pull/3683))
|
||||
- `createIndexFiles` has been removed — it is now controlled by the `trailingSlash` option ([#3801](https://github.com/sveltejs/kit/pull/3801))
|
||||
- SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom [`prerender.onError`](https://kit.svelte.dev/docs/configuration#prerender) handler if you need to ignore them ([#3826](https://github.com/sveltejs/kit/pull/3826))
|
||||
|
||||
|
||||
## New in Language Tools
|
||||
- Accessing properties in markups has been improved in the Svelte language tools ([105.12.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.12.0)) - working around some known issues with autocomplete ([#538](https://github.com/sveltejs/language-tools/issues/538) / [#1302](https://github.com/sveltejs/language-tools/issues/1302))
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites**
|
||||
- [SvelteStorm](https://github.com/open-source-labs/SvelteStorm) is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
|
||||
- [Supachat](https://github.com/Lleweraf/supachat) is a real-time chat app using Svelte and Supabase
|
||||
- [Radicle](https://radicle.xyz/) is a peer-to-peer stack for building software together
|
||||
- [The Making Known](https://the-making-known.com/) is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
|
||||
- [Svelte Kanban](https://github.com/V-Py/svelte-kanban) is a simple Svelte Kanban made in pure CSS
|
||||
- [fngrng](https://github.com/nvlgzr/fngrng) is a typing trainer focussed on accuracy over speed
|
||||
- [Generative grids](https://svelte.dev/repl/873988ce33db43f097c0ca69df57b3ac?version=3.46.4) is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
|
||||
- [LifeHash](https://github.com/BlockchainCommons/lifehash.info) is a method of hash visualization that creates beautiful, deterministic icons
|
||||
- [TypedWebhook.tools](https://typedwebhook.tools/) is a webhook testing tool for checking payloads, with automatic type generation
|
||||
- [Speedskating](https://github.com/spiegelgraphics/speedskating) is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
|
||||
- [Web tail](https://github.com/mishankov/web-tail) is a web application to view lines from file on local system or on remote server
|
||||
|
||||
Want to work on a SvelteKit site with others? [Contribute to the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
|
||||
|
||||
|
||||
**Learning Resources**
|
||||
|
||||
_To Read_
|
||||
- [Svelte Components as Web Components](https://medium.com/@yesmeno/svelte-components-as-web-components-b400d1253504) by Matias Meno
|
||||
- [Simple Svelte Routing with Reactive URLs](https://bjornlu.com/blog/simple-svelte-routing-with-reactive-urls) by Bjorn Lu
|
||||
- [Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting](https://ryanboddy.net/level-up-blog) by Ryan Boddy
|
||||
- [How This Blog Makes the Most of GitHub](https://paullj.github.io/posts/how-this-blog-makes-the-most-of-github/) by paullj
|
||||
- [FullStack JWT Auth: Introducing SvelteKit](https://dev.to/sirneij/fullstack-jwt-introducing-sveltekit-3jcn) by John Idogun
|
||||
- [Svelte-Cubed: Adding Motion to 3D Scenes](https://dev.to/alexwarnes/svelte-cubed-adding-motion-to-3d-scenes-51lo) by Alex Warnes
|
||||
- [Creating a RSS feed with Sanity and Svelte Kit](https://ghostdev.xyz/posts/creating-a-rss-feed-with-sanity-and-svelte-kit) by GHOST
|
||||
- [How to use Svelte's style directive](https://geoffrich.net/posts/style-directives/) by Geoff Rich
|
||||
- [SvelteKit and the "Client pattern"](https://retro.cloud/sveltekit-and-the-client-pattern/) by Julian Laubstein
|
||||
|
||||
_To Watch_
|
||||
- [~~Shadow~~ Page Endpoints In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=PoYPZT7ruqI) by LevelUpTuts
|
||||
- [Testing For Beginners (Playlist)](https://www.youtube.com/watch?v=y53wwdBr5AI&list=PLA9WiRZ-IS_z7KpqhPELfEMbhAGRwZrzn) by Joy of Code
|
||||
- [KitQL - The native SvelteKit library for GraphQL](https://www.youtube.com/watch?v=6pH4fnFN70w) by Jean-Yves COUËT
|
||||
|
||||
|
||||
**Libraries, Tools & Components**
|
||||
- [gosvelte](https://github.com/sachinbhutani/gosvelte) is a proof of concept to serve Svelte-generated pages on GoLang HTTP server with server data being sent as props to svelte components
|
||||
- [svelte-ethers-store](https://www.npmjs.com/package/svelte-ethers-store) uses the ethers.js library as a collection of readable Svelte stores for Svelte, Sapper or SvelteKit
|
||||
- [Fluid Grid](https://fluid-grid.com/) is a CSS grid system for future web
|
||||
- [stirstack](https://github.com/seeReadCode/stirstack) is an opinionated framework that combines Svelte.js, TailwindCSS, InertiaJS and Ruby on Rails
|
||||
- [OATHqr](https://codeberg.org/vhs/oathqr) helps users create security credentials for use with 2FA/MFA and other OATH-enabled apps. Use it to generate scannable QR codes for one-time password authenticator apps such as Aegis or YubiKey
|
||||
- [svelte-GridTiles](https://github.com/honeybeeSunshine/svelte-GridTiles) is a drag and drop resizable tiles library built on a responsive grid
|
||||
- [Miscellaneous Svelte Components](https://github.com/alex-knyaz/Miscellaneous-svelte-components/) is a collection of miscellaneous svelte components alex-knyaz often use in my projects
|
||||
- [walk-and-graph-svelte-components](https://github.com/j2l/walk-and-graph-svelte-components) is a CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka "imports"
|
||||
- [Felte](https://www.npmjs.com/package/felte) is a simple to use form library for Svelte
|
||||
- [svelte-use-tooltip](https://github.com/untemps/svelte-use-tooltip) is a Svelte action to display a tooltip
|
||||
- [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
|
||||
|
||||
What'd we miss? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
|
||||
|
||||
See y'all next month!
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
title: "What's new in Svelte: April 2022"
|
||||
description: "Goodbye fallthrough routes, hello param validators!"
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.
|
||||
|
||||
More on that, and what else is new in Svelte, as we dive in...
|
||||
|
||||
## What's new in SvelteKit
|
||||
- Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-matching), [#4334](https://github.com/sveltejs/kit/pull/4334))
|
||||
- Explicit redirects can now be handled directly from endpoints ([#4260](https://github.com/sveltejs/kit/pull/4260))
|
||||
- `svelte-kit sync` ([#4182](https://github.com/sveltejs/kit/pull/4182)), TypeScript 4.6 ([#4190](https://github.com/sveltejs/kit/pull/4190)) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team ([#4468](https://github.com/sveltejs/kit/pull/4468))
|
||||
|
||||
|
||||
**New Config Options**
|
||||
- `outDir` fixes path issues in monorepos and other situations where the desired output directory is outside the project directory ([Docs](https://kit.svelte.dev/docs/configuration#outdir), [#4176](https://github.com/sveltejs/kit/pull/4176))
|
||||
- `endpointExtensions` prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions ([Docs](https://kit.svelte.dev/docs/configuration#endpointextensions), [#4197](https://github.com/sveltejs/kit/pull/4197))
|
||||
- `prerender.default` lets you prerender every page without having to write `export const prerender = true` in every page file ([Docs](https://kit.svelte.dev/docs/configuration#prerender), [#4192](https://github.com/sveltejs/kit/pull/4192))
|
||||
|
||||
|
||||
**Breaking Changes**
|
||||
- Fallthrough routes have been removed. For migration tips, check out the PR ([#4330](https://github.com/sveltejs/kit/pull/4330))
|
||||
- `tabindex="-1"` is only added to `<body>` during navigation ([#4140](https://github.com/sveltejs/kit/pull/4140) and [#4184](https://github.com/sveltejs/kit/pull/4184))
|
||||
- Adapters are now required to supply a `getClientAddress` function ([#4289](https://github.com/sveltejs/kit/pull/4289))
|
||||
- `InputProps` and `OutputProps` can now be typed separately in generated `Load` ([#4305](https://github.com/sveltejs/kit/pull/4305))
|
||||
- The `\$` character is no longer allowed in dynamic parameters ([#4334](https://github.com/sveltejs/kit/pull/4334))
|
||||
- `svelte-kit package` has been marked as experimental so changes to it after Kit 1.0 will not be considered breaking ([#4164](https://github.com/sveltejs/kit/pull/4164))
|
||||
|
||||
|
||||
## New across the Svelte ecosystem
|
||||
- Svelte: Lots of new types for TypeScript and Svelte plugin users - including `style:` directives and Svelte Actions (**3.46.4** and **3.46.5**)
|
||||
- Language Tools: Svelte project files are now importable/findable through references without having them imported in a TS file ([105.13.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.13.0))
|
||||
- Language Tools: Region folding is now supported in html with `<!--#region-->`/`<!--#endregion-->` ([105.13.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.13.0))
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites built with Svelte**
|
||||
- [Launcher](https://launcher.team/) is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
|
||||
- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, Typescript, Python, Starlette, rclone & Docker.
|
||||
- [Simple AF Video Converter](https://github.com/berlyozzy/Simple-AF-Video-Converter) is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
|
||||
- [Streamchaser](https://github.com/streamchaser/streamchaser) seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
|
||||
- [Svelte Color Picker](https://github.com/V-Py/svelte-material-color-picker) is a simple color picker made with Svelte
|
||||
- [ConcertMash](https://github.com/mcmxcdev/ConcertMash) is a small website that interacts with the Spotify API and generates new playlists based on the upcoming concerts you're attending
|
||||
- [Modulus](https://modulus.vision/) is a Design+Code Think Tank conceived with the main mission to evolve design and technology
|
||||
- [Multiply](https://www.multiply.us/) is an integrated PR and Social agency moving at the speed of culture
|
||||
- [yia!](https://www.yia.co.nz/) is a Young Innovator Award competition in New Zealand
|
||||
- [Write to Russia](https://www.writetorussia.org/index) is a community email writing platform to communicate with public `.ru` email addresses
|
||||
- [Markdown Playground](https://github.com/Petros-K/markdown-playground) is an online playground dedicated for your markdown experiments.
|
||||
- [RatherMisty](https://rathermisty.com/) is a no frills weather app with weather data from Open-Meteo
|
||||
- [Minecraft Profile Pic (MCPFP)](https://github.com/MauritsWilke/mcpfp) is a site to generate Minecraft profile pictures with ease
|
||||
- [WebGL Fluid Simulation](https://github.com/jpaquim/svelte-webgl-fluid-simulation) is a configurable fluid simulation built with Svelte and WebGL
|
||||
- [This @NobelPeaceOslo exhibition](https://twitter.com/perbyhring/status/1504754949791621120) was built using printed graphics, projected motion graphics, particle animations and generative sound design
|
||||
|
||||
Itching to contribute to a modern SvelteKit website? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
|
||||
|
||||
|
||||
**Learning Resources**
|
||||
|
||||
_To Attend_
|
||||
- [Svelte Summit: Spring](https://www.sveltesummit.com/) will take place on April 30, 2022! Join us for the 5th virtual Svelte conference on [YouTube](https://www.sveltesummit.com/) and Discord 🍾
|
||||
|
||||
_To Read_
|
||||
- [Svelte(Kit) TypeScript Showcase + general TypeScript tips](https://github.com/ivanhofer/sveltekit-typescript-showcase) by Hofer Ivan
|
||||
- [Local constants in Svelte with the @const tag](https://geoffrich.net/posts/local-constants/) by Geoff Rich
|
||||
- [Design Patterns for Building Reusable Svelte Components](https://render.com/blog/svelte-design-patterns) by Eric Liu
|
||||
- [Svelte is better than React](https://labs.hamy.xyz/posts/svelte-is-better-than-react/) by Hamilton Greene
|
||||
- [Making Visualizations Literally with Svelte and D3](https://www.connorrothschild.com/post/svelte-and-d3) by Connor Rothschild
|
||||
- [Coordinating Multiple Elements with Svelte Deferred Transitions](https://imfeld.dev/writing/svelte_deferred_transitions) by Daniel Imfeld
|
||||
- [Animate on scroll with Svelte Inview - Little Bits](https://dev.to/maciekgrzybek/animate-on-scroll-with-svelte-inview-266f) by Maciek Grzybek
|
||||
- [Lazy-Loading Firebase with SvelteKit](https://www.captaincodeman.com/lazy-loading-firebase-with-sveltekit) and [HeadlessUI Components with Svelte](https://www.captaincodeman.com/headlessui-components-with-svelte) by Captain Codeman
|
||||
- [SvelteKit Accessibility Testing: Automated CI A11y Tests](https://rodneylab.com/sveltekit-accessibility-testing/) by Rodney Lab
|
||||
- [Getting Started with KitQL and GraphCMS](https://scottspence.com/posts/getting-started-with-kitql-and-graphcms) by Scott Spence
|
||||
- [React ⇆ Svelte Cheatsheet](https://dev.to/joshnuss/react-to-svelte-cheatsheet-1a2a) lists the similarities and differences between the two libraries - by Joshua Nussbaum
|
||||
|
||||
_To Watch_
|
||||
- [Svelte Extravaganza | Async](https://www.youtube.com/watch?v=mT4CLVHgtSg) by pngwn
|
||||
- [6 Svelte Packages You Should Know](https://www.youtube.com/watch?v=y5SrUKcX_Co) and [Basic React To Svelte Conversion](https://www.youtube.com/watch?v=DiSuwLlhOxs) by LevelUpTuts
|
||||
- [Page/Shadow Endpoint in SvelteKit](https://www.youtube.com/watch?v=j-9D5UDyVOM) by WebJeda
|
||||
- [Custom Svelte Store: Higher Order Store](https://www.youtube.com/watch?v=p1aPfVyZ1IY) by lihautan
|
||||
- [SvelteKit For Beginners (Playlist)](https://www.youtube.com/watch?v=bLBHecY4-ak&list=PLA9WiRZ-IS_zXZZyW4qfj0akvOAtk6MFS) by Joy of Code - follow along with the [blog guide](https://joyofcode.xyz/sveltekit-for-beginners)
|
||||
- [Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄](https://www.youtube.com/watch?v=MAHE4iQgh5Q) by Johnny Magrippis
|
||||
- [Firebase Authentication in SvelteKit! Full Stack App](https://www.youtube.com/watch?v=N6Y3hqhZvNI) by Ryan Boddy
|
||||
|
||||
|
||||
**Libraries, Tools & Components**
|
||||
- [SvelTable](https://sveltable.io/) is a feature rich, data table component built with Svelte
|
||||
- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and Typescript
|
||||
- [Flowbite Svelte](https://github.com/shinokada/flowbite-svelte) is an unofficial Flowbite component library for Svelte
|
||||
- [Svelte-Tide-Project](https://github.com/jbertovic/svelte-tide-project) is a starter template for Svelte frontend apps with Rust Tide backend server
|
||||
- [Fetch Inject](https://github.com/vhscom/fetch-inject#sveltekit) implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
|
||||
- [svelte-utterances](https://github.com/shinokada/svelte-utterances) is a lightweight comments widget built on GitHub issues
|
||||
- [Liquivelte](https://github.com/malipetek/liquivelte-vscode) allows you to create your Shopify theme with Svelte-like components
|
||||
- [@storyblok/svelte](https://github.com/storyblok/storyblok-svelte) is the Svelte SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience
|
||||
- [@svelte-on-solana/wallet-adapter](https://github.com/svelte-on-solana/wallet-adapter) is a modular TypeScript wallet adapter and UI components for Solana/Anchor applications using SvelteJS as framework
|
||||
- [svelte-lookat](https://www.npmjs.com/package/svelte-lookat) creates a div which makes all its children follow the mouse cursor or the user's face when using a mobile phone
|
||||
|
||||
Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
|
||||
|
||||
See y'all next month!
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
title: "What's new in Svelte: May 2022"
|
||||
description: "Dynamically switch between HTML element types with `<svelte:element>`"
|
||||
author: Daniel Sandoval
|
||||
authorURL: https://desandoval.net
|
||||
---
|
||||
|
||||
With yesterday's Svelte Summit behind us, we've got a lot of news to share! Check out all of the recordings on the [Svelte Society YouTube Channel](https://www.youtube.com/sveltesociety) and the rest of this month's updates below...
|
||||
|
||||
## What's new in Svelte
|
||||
- The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](https://svelte.dev/tutorial/svelte-element) for more info (**3.47.0**)!
|
||||
|
||||
|
||||
## Language Tools updates
|
||||
- `svelte:element` and `sveltekit:reload` are now supported
|
||||
- Invalid Svelte import paths will now be automatically detected - see PR for getting back the old behavior ([#1448](https://github.com/sveltejs/language-tools/pull/1448))
|
||||
- `source.sortImports` lets you sort imports without deleting unused imports ([#1338](https://github.com/sveltejs/language-tools/issues/1338))
|
||||
- Hovering over HTML attributes will now show HTML hover info instead of the TS hover info - resulting in much more useful information ([#1447](https://github.com/sveltejs/language-tools/pull/1447))
|
||||
- In VS Code, you can now wrap existing blocks of code in control flow tags using the `Insert Snippet` command ([#1373](https://github.com/sveltejs/language-tools/pull/1373))
|
||||
|
||||
## What's new in SvelteKit
|
||||
- Files and directories can now be named `__tests__` and `__test__` in the routes directory ([#4438](https://github.com/sveltejs/kit/pull/4438))
|
||||
- Netlify Edge Functions ([#4657](https://github.com/sveltejs/kit/pull/4657)) and the Vercel build output API ([#4663](https://github.com/sveltejs/kit/pull/4663)) are now supported
|
||||
- Custom `load` dependencies, array of strings representing URLs the page depends on, are now available when loading routes ([Docs](https://kit.svelte.dev/docs/loading#output-dependencies), [#4536](https://github.com/sveltejs/kit/pull/4536))
|
||||
|
||||
|
||||
**Breaking Changes**
|
||||
- Validators are now called "matchers" ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-matching), [#4358](https://github.com/sveltejs/kit/pull/4358))
|
||||
- `__layout.reset` has been replaced by named layouts - which have much configurability for shared layout elements ([Docs](https://kit.svelte.dev/docs/layouts#named-layouts), [#4388](https://github.com/sveltejs/kit/pull/4388))
|
||||
- Prerendering is now skipped for `rel="external"` links ([#4545](https://github.com/sveltejs/kit/pull/4545))
|
||||
- `maxage` is now `cache` in `LoadOutput` ([#4690](https://github.com/sveltejs/kit/pull/4690))
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Community Showcase
|
||||
|
||||
**Apps & Sites built with Svelte**
|
||||
- [polySpectra AR](https://ar.polyspectra.com/) lets you prototype faster 3D Printing with seamless AR file handoffs ([video demo](https://www.youtube.com/watch?v=VhYCeVGcG3E))
|
||||
- [Pixel Art Together](https://github.com/liveblocks/pixel-art-together) is a free multiplayer pixel art editor powered by Liveblocks
|
||||
- [Tooling Manager](https://tooling-manager.netlify.app/) lets you compare your JavaScript tech stack against industry standard boilerplates
|
||||
- [Easy Portfolio](https://easy-portfolio.com/) generates a portfolio based on your GitHub profile
|
||||
- [FLOAT](https://github.com/muttoni/float) is an attendance tracking program for events
|
||||
- [The Coin Perspective](https://thecoinperspective.com/) is a cryptocurrency price tracker and portfolio management tool
|
||||
- [Locutionis](https://github.com/pbouillon/locutionis) is a small, online reference of figures of speech (en français)
|
||||
- [ASM Editor](https://asm-editor.specy.app/) is an all in one web editor for M68K and MIPS
|
||||
- [Otium](https://github.com/alombi/otium) is a free and open source book manager and bookshelf organiser, that helps you managing your books and the ones you would like to read
|
||||
- [Sinwaver](https://github.com/Hugo-Dz/Sinwaver) is an SVG sine wave generator
|
||||
|
||||
Want to contribute to a modern SvelteKit website? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
|
||||
|
||||
|
||||
**Learning Resources**
|
||||
|
||||
_To Read_
|
||||
- [4 tips for cleaner Svelte components](https://geoffrich.net/posts/clean-component-tips/) by Geoff Rich
|
||||
- [Building a Clubhouse clone with Svelte and 100ms](https://www.100ms.live/blog/clubhouse-clone-with-svelte) By Seun Taiwo
|
||||
- [SvelteKit uvu Testing: Fast Component Unit Tests](https://rodneylab.com/sveltekit-uvu-testing/) by Rodney Lab
|
||||
- [SvelteKit JWT authentication tutorial](https://dev.to/pilcrowonpaper/sveltekit-jwt-authentication-tutorial-2m34) by pilcrowOnPaper
|
||||
- [Converting a Rollup-based Svelte SPA to SvelteKit](https://github.com/sveltejs/kit/discussions/4595) by Simon H
|
||||
- [Add Commitint, Commitizen, Standard Version, and Husky to SvelteKit Project](https://davipon.hashnode.dev/add-commitint-commitizen-standard-version-and-husky-to-sveltekit-project) by David Peng
|
||||
|
||||
_To Watch or Hear_
|
||||
- [Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC)](https://www.youtube.com/watch?v=s6a1pbTVcUs) by Svelte Society
|
||||
- [Svelte Fundamentals - Intro to Svelte](https://codingcat.dev/course/intro-to-svelte) by Coding Cat
|
||||
- [Svelte Components Using Custom Markdown Renderers - Weekly Svelte](https://www.youtube.com/watch?v=ZiEROAqobwM) by LevelUpTuts
|
||||
- [Implementing {@const} in if block](https://www.youtube.com/watch?v=f5iReGqjmG0) by lihautan
|
||||
- [Svelte and Contributing to Open-Source with Geoff Rich](https://podcast.20minjs.com/1952066/10417700-episode-6-svelte-and-contributing-to-open-source-with-geoff-rich) by 20minJS
|
||||
|
||||
|
||||
**Libraries, Tools & Components**
|
||||
- [KitDocs](https://github.com/svelteness/kit-docs) is a documentation integration for SvelteKit - like VitePress for Svelte.
|
||||
- [Svelte Copy](https://github.com/ghostdevv/svelte-copy) is a click/tap-to-copy library that makes it easy to copy to the clipboard
|
||||
- [Svend3r](https://github.com/oslabs-beta/svend3r) provides beautiful visualizations that harness the power of D3 to bring your data to life while abstracting away its imperative-style code
|
||||
- [Svelte Hamburgers](https://github.com/ghostdevv/svelte-hamburgers) is the easy to use Hamburger menu component for Svelte
|
||||
- [Svelte Droplet](https://github.com/probablykasper/svelte-droplet) is a file dropzone for Svelte
|
||||
- [Svelte MP3](https://www.npmjs.com/package/svelte-mp3) is a light blazingly fast yet simple minimalistic audio player for Svelte
|
||||
- [SvelteUI](https://github.com/Brisklemonade/svelteui) is a component library for building fully functional & accessible web applications faster than ever
|
||||
- [svelte-spotlight](https://github.com/beynar/svelte-spotlight) is a headless spotlight component to help you build your site's global search box in minutes
|
||||
- [svelte-pdf-simple](https://github.com/gspasov/svelte-pdf-simple) is a simple svelte library for displaying PDFs and giving you all the control
|
||||
- [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
|
||||
- [svelte-exmarkdown](https://github.com/ssssota/svelte-exmarkdown) is Svelte component to render markdown dynamically
|
||||
- [Bookit](https://github.com/leveluptuts/bookit) is a storybook-like component rendering environment - finely tuned to work directly within your SvelteKit projects
|
||||
|
||||
Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
|
||||
|
||||
If you'd prefer to join us in person, Svelte Summit is finally transitioning properly into the real world. Come join us for two days of awesome Svelte content! [Get your tickets now!](https://ti.to/svelte/svelte-summit-fall-edition)
|
||||
|
||||
See y'all next month!
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
const options = ['h1', 'h3', 'p'];
|
||||
let selected = options[0];
|
||||
</script>
|
||||
|
||||
<select bind:value={selected}>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "<svelte:element>"
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
question: Are there any third-party resources?
|
||||
---
|
||||
|
||||
Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
question: Are there any video courses?
|
||||
---
|
||||
|
||||
Rich Harris, the creator of Svelte, taught a course:
|
||||
|
||||
- [Frontend Masters](https://frontendmasters.com/courses/svelte/)
|
||||
|
||||
There are also a number of third-party courses:
|
||||
|
||||
- [Egghead](https://egghead.io/browse/frameworks/svelte)
|
||||
- [Udemy](https://www.udemy.com/courses/search/?q=sveltejs+svelte) (Note: Udemy frequently has discounts over 90%)
|
||||
- [Pluralsight](https://www.pluralsight.com/search?q=svelte)
|
||||
|
||||
Finally, there are also YouTube channels and playlists that teach Svelte:
|
||||
|
||||
- [Svelte Master](https://www.youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA)
|
||||
- [Svelte Tutorial for Beginners](https://www.youtube.com/watch?v=zojEMeQGGHs&list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) by The Net Ninja
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
question: Are there any books?
|
||||
---
|
||||
|
||||
There are a few books:
|
||||
|
||||
- [Svelte Handbook](https://flaviocopes.com/page/svelte-handbook/) by Flavio Copes
|
||||
- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/) by Alessandro Segala
|
||||
- [Svelte and Sapper in Action](https://www.manning.com/books/svelte-and-sapper-in-action) by R. Mark Volkmann
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let bgOpacity = 0.5;
|
||||
$: color = bgOpacity < 0.6 ? '#000' : '#fff';
|
||||
</script>
|
||||
|
||||
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||
|
||||
<p>This is a paragraph.</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
background: rgba(255, 62, 0, var(--opacity));
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let bgOpacity = 0.5;
|
||||
$: color = bgOpacity < 0.6 ? '#000' : '#fff';
|
||||
</script>
|
||||
|
||||
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||
|
||||
<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
background: rgba(255, 62, 0, var(--opacity));
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Inline styles
|
||||
---
|
||||
|
||||
Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
|
||||
|
||||
Add the following style attribute to the paragraph element:
|
||||
`style="color: {color}; --opacity: {bgOpacity};"`
|
||||
|
||||
Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let bgOpacity = 0.5;
|
||||
$: color = bgOpacity < 0.6 ? '#000' : '#fff';
|
||||
</script>
|
||||
|
||||
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||
|
||||
<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
background: rgba(255, 62, 0, var(--opacity));
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
let bgOpacity = 0.5;
|
||||
$: color = bgOpacity < 0.6 ? "#000" : "#fff";
|
||||
</script>
|
||||
|
||||
<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
|
||||
|
||||
<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
background: rgba(255, 62, 0, var(--opacity));
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: The style directive
|
||||
---
|
||||
|
||||
Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
|
||||
|
||||
Change the style attribute of the paragraph to the following:
|
||||
|
||||
```html
|
||||
<p
|
||||
style:color
|
||||
style:--opacity="{bgOpacity}"
|
||||
>
|
||||
```
|
||||
|
||||
The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So `style:color="{color}"` can be written as just `style:color`.
|
||||
|
||||
Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "Advanced styling"
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"title": "Classes"
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
const options = ['h1', 'h3', 'p'];
|
||||
let selected = options[0];
|
||||
</script>
|
||||
|
||||
<select bind:value={selected}>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
{#if selected === 'h1'}
|
||||
<h1>I'm a h1 tag</h1>
|
||||
{:else if selected === 'h3'}
|
||||
<h3>I'm a h3 tag</h3>
|
||||
{:else if selected === 'p'}
|
||||
<p>I'm a p tag</p>
|
||||
{/if}
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
const options = ['h1', 'h3', 'p'];
|
||||
let selected = options[0];
|
||||
</script>
|
||||
|
||||
<select bind:value={selected}>
|
||||
{#each options as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: <svelte:element>
|
||||
---
|
||||
|
||||
Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
|
||||
|
||||
```html
|
||||
{#if selected === 'h1'}
|
||||
<h1>I'm a h1 tag</h1>
|
||||
{:else if selected === 'h3'}
|
||||
<h3>I'm a h3 tag</h3>
|
||||
{:else if selected === 'p'}
|
||||
<p>I'm a p tag</p>
|
||||
{/if}
|
||||
```
|
||||
|
||||
...we can have a single dynamic component:
|
||||
|
||||
```html
|
||||
<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
|
||||
```
|
||||
|
||||
The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.
|
||||
@ -1,5 +1,5 @@
|
||||
import Tag from './shared/Tag';
|
||||
|
||||
export default class RawMustacheTag extends Tag {
|
||||
type: 'RawMustacheTag'
|
||||
type: 'RawMustacheTag';
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue