|
|
|
@ -0,0 +1,57 @@
|
|
|
|
|
---
|
|
|
|
|
title: What's new in Svelte: October 1, 2020
|
|
|
|
|
description: New object methods, in-depth learning resources and tons of integration examples!
|
|
|
|
|
author: Daniel Sandoval
|
|
|
|
|
authorURL: https://desandoval.net
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## New features
|
|
|
|
|
1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](https://svelte.dev/repl/c305722adb4a4545b27b198ea8ff9bde?version=3.26.0), **3.26.0**)
|
|
|
|
|
2. `_` is now supported as a "numerical seperator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/6612cec5c50b44cbab7f4a64ff930153?version=3.26.0), **3.26.0**)
|
|
|
|
|
3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**)
|
|
|
|
|
|
|
|
|
|
These last two updates come from an update to Svelte’s upstream dependency, [acorn](https://github.com/acornjs/acorn). Acorn generates Svelte’s Abstract Syntax Tree (AST) and is explained in detail [here](https://github.com/sveltejs/svelte/issues/1011#issuecomment-351262252)!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Impactful bug fixes
|
|
|
|
|
1. CSS compilation will no longer remove rules for the `open` attribute on `<details>` elements ([Example](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## Coming up
|
|
|
|
|
- Anything coming down the pipe???
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## Svelte Showcase
|
|
|
|
|
- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
|
|
|
|
|
- [Github Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
|
|
|
|
|
- [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives
|
|
|
|
|
- [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte!
|
|
|
|
|
|
|
|
|
|
#### In-depth learning:
|
|
|
|
|
- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/ref=cm_sw_r_tw_dp_x_OQMtFb3GPQCB2) is a new book about building production-ready static web apps with Svelte 3
|
|
|
|
|
- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) walks through the ins-and-outs of Sapper, the Svelte-powered applicaiton framework
|
|
|
|
|
|
|
|
|
|
#### Plug-and-play components:
|
|
|
|
|
- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile
|
|
|
|
|
- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components
|
|
|
|
|
- [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:`
|
|
|
|
|
- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
|
|
|
|
|
|
|
|
|
|
#### Lots of examples of how use JS tech came out this month:
|
|
|
|
|
- [Snowpack + Svelte + SSR](https://github.com/Rich-Harris/snowpack-svelte-ssr)
|
|
|
|
|
- [Sapper with PostCSS and Tailwind](https://codechips.me/sapper-with-postcss-and-tailwind/)
|
|
|
|
|
- [PrismJS (Code block syntax highlighting)](https://github.com/phptuts/Svelte-PrismJS)
|
|
|
|
|
- [Filepond (Drag-and-drop file upload)](https://github.com/pqina/svelte-filepond)
|
|
|
|
|
- [Ionic (UI Components)](https://github.com/Tommertom/svelte-ionic-app)
|
|
|
|
|
- [Pell (WYSIWYG Editor)](https://github.com/Demonicious/svelte-pell/)
|
|
|
|
|
- [Leaflet (Mapping)](https://github.com/anoram/leaflet-svelte)
|
|
|
|
|
|
|
|
|
|
**Reminder**: There's a [Svelte integrations repo](https://github.com/sveltejs/integrations) that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you've got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you've gotten something to work with Svelte, consider contributing!
|
|
|
|
|
|
|
|
|
|
For more amazing Svelte projects, check out the [Svelte Community showcase](https://svelte-community.netlify.app/showcase/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)… and be sure to post your own!
|
|
|
|
|
|
|
|
|
|
## See you next month!
|
|
|
|
|
|
|
|
|
|
By the way, Svelte now has an [OpenCollective](https://opencollective.com/svelte)! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where is that money going, submit expenses, get reimbursed and more!
|