Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"What's new in Svelte" October newsletter #5429

Merged
merged 14 commits into from
Oct 1, 2020
Merged

"What's new in Svelte" October newsletter #5429

Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c1b28e8
october newsletter
DreaminDani Sep 19, 2020
cda9da4
added link to changelog
DreaminDani Sep 19, 2020
bd03a22
Address PR feedback
DreaminDani Sep 30, 2020
4f9f72c
Add svelte summit suggestion
DreaminDani Sep 30, 2020
71f1ac6
Added prettier suggestion
DreaminDani Sep 30, 2020
563ec3b
Remove line RE: sapper contributions
DreaminDani Sep 30, 2020
a3dc85a
Remove exact date from title
dummdidumm Sep 30, 2020
6462b55
Rephrase introduction a little
dummdidumm Sep 30, 2020
ac594e5
Add createEventDispatcher typing feature description
dummdidumm Sep 30, 2020
4c20f8e
Little more info + blog post link for {#key}
dummdidumm Sep 30, 2020
33f565b
fix bullet point
dummdidumm Sep 30, 2020
ddbc34e
code-highlight for $page
dummdidumm Sep 30, 2020
0eabeca
Typos and grammar
DreaminDani Oct 1, 2020
3bfea8d
added a "-" to indepth
DreaminDani Oct 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
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
---

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we could add some short introductionary sentences here, like "it was quiet for some time but we promise to be more active with news from now on".

## New features
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something about $$slots should be in here! It's a pretty dope feature! 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something about the new createEventDispatcher typing for Typescript users and how to use it and its advantages would be cool. I can add a suggestion paragraph tomorrow if you want.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There were a few fixes for await blocks too, they could be gathered together with a short description perhaps?

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)!


Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(cannot make this a suggestion because of the code block unfortunately):

  1. When using TypeScript, you can now type the createEventDispatcher method:
<script lang="ts">
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher<{
        /**
         * you can also add docs
         */
        checked: boolean; // Will translate to `CustomEvent<boolean>`
        hello: string;
    }>();

    // ...
</script>

This will make sure that you can invoke dispatch only with the specified event names and its types. The Svelte for VS Code extension was also updated to deal with this new feature. It will provide autocompletion and hover information for these events and provide strong typing. Note though that this will NOT make the events strict in the sense that you would get type errors when trying to listen to other events when using the component.

## 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**)

DreaminDani marked this conversation as resolved.
Show resolved Hide resolved

## Coming up
- Anything coming down the pipe???
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs Discussion

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On the community side there's both Svelte Society Day France as well as Svelte Summit. But I think you were asking more for development stuff?


See the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) for a full list of features and bugfixes.


---

## 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo: applicaiton


#### 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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure if this one is quite in a shareable state yet 😉 I'm guessing Rich might prefer not to promote it yet given that it's just playing around with ideas and not anything usable

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, it leaked on reddit but i reckon we should keep our powder dry for the minute!

- [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!
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something about helping out with Svelte Society would be nice in here so we can move everything from svelte-community over! 👍


## 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!