Skip to content

Commit

Permalink
Merge pull request #611 from tomoam/follow-up-on-updates-by-20240811
Browse files Browse the repository at this point in the history
2024/08/11 迄の更新に追従
  • Loading branch information
tomoam authored Aug 12, 2024
2 parents 14ad90b + 032fbc5 commit e45abd0
Show file tree
Hide file tree
Showing 34 changed files with 1,156 additions and 1,023 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ It's the last "What's new in Svelte" of the year and there's lots to celebrate!
## New features & impactful bug fixes

1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and `slot` components now support spread props: `<slot {...foo} />` (**3.30.0**)
2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://svelte.dev/docs#run-time-svelte-hascontext))
2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](/docs/svelte#hascontext))
3. There is now a new `SvelteComponentTyped` class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37))
4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (**3.29.5** with some fixes in **3.29.6**, **3.29.7** and **3.30.0**)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ Let's dive into the news 🐬

## What's new in `sveltejs/svelte`

- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
- SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](/docs/server-side-component-api))
- Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
- The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
- Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
- Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
- Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
- A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
- A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](/docs/svelte-compiler#compile))
- Continued improvement to TypeScript definitions

For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ authorURL: https://dreamindani.com
始め方、Sapperとの違い、新しい機能や移行方法を学びたいですか? 今週の[Svelte Radioのエピソード](https://www.svelteradio.com/episodes/svelte-kit-public-beta)で、AntonyとKevとSwyxが深く掘り下げているのでチェックしてみてください。

## SvelteとLanguageツールの新着情報(New in Svelte & Language Tools)
- Slotted components (`<svelte:fragment slot="...">`を含む) を使用すると、コンポーネントの利用者が特定のスロットにリッチなコンテンツを割り当てることができます (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, [docs](https://svelte.dev/docs#template-syntax-svelte-fragment)[tutorial](https://svelte.jp/tutorial/svelte-fragment) をチェックしてみてください)

- Slotted components (`<svelte:fragment slot="...">`を含む) を使用すると、コンポーネントの利用者が特定のスロットにリッチなコンテンツを割り当てることができます (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, [docs](/docs/special-elements#svelte-fragment)[tutorial](https://svelte.jp/tutorial/svelte-fragment) をチェックしてみてください)
- Linked editing がSvelteファイル内のHTMLで機能するようになりました (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**)
- 型定義 `svelte.d.ts` が正常に解決されるようになり、ライブラリの作成者がSvelteコンポーネントと一緒に型定義を配布できるようになりました (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**)
- ViteでSvelteを使用するのに [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) が利用可能になりました。`npm init @vitejs/app` はこのプラグインを使用したSvelteオプションが含まれています。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,9 @@ Happy February, everyone! ここ1か月ほどで、Svelte と SvelteKit の [開
それでは見ていきましょう…

## Highlights from the Svelte changelog
- **3.45.0** では、[新しい a11y の warning である `a11y-no-redundant-roles`](https://svelte.jp/docs#accessibility-warnings-a11y-no-redundant-roles) と、分割代入およびキャッシュの修正が行われました
- **3.46.0** では、要望が多かった [`{@const}` tag](https://svelte.jp/docs#template-syntax-const)[`style:` directive](https://svelte.jp/docs#template-syntax-element-directives-style-property) が追加されました

- **3.45.0** では、[新しい a11y の warning である `a11y-no-redundant-roles`](/docs/accessibility-warnings#a11y-no-redundant-roles) と、分割代入およびキャッシュの修正が行われました
- **3.46.0** では、要望が多かった [`{@const}` tag](/docs/special-tags#const)[`style:` directive](/docs/element-directives#style-property) が追加されました
- **3.46.1 - 3.46.3** では、`{@const}` タグと `style:` ディレクティブの修正、アニメーションに関する多くの修正が行われました
- [Svelte REPL で AST が出力できるようになりました](https://svelte.dev/repl/hello-world)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ authorURL: https://dreamindani.com

## What's new in Svelte

- `<svelte:element>` 要素によって、動的に指定したタイプの要素をレンダリングできます。これは例えば、CMS のリッチなテキストコンテンツをレンダリングする場合などに便利です。詳細は [docs](https://svelte.jp/docs#template-syntax-svelte-element)[tutorial](https://svelte.jp/tutorial/svelte-element) をチェックしてみてください (**3.47.0**)!
- `<svelte:element>` 要素によって、動的に指定したタイプの要素をレンダリングできます。これは例えば、CMS のリッチなテキストコンテンツをレンダリングする場合などに便利です。詳細は [docs](/docs/special-elements#svelte-element)[tutorial](https://svelte.jp/tutorial/svelte-element) をチェックしてみてください (**3.47.0**)!

## Language Tools updates

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ authorURL: https://dreamindani.com

## What's new in Svelte

- `createEventDispatcher` 関数で、カスタムイベントをキャンセルできるようになりました (**3.48.0**, [Docs](https://svelte.jp/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
- `{@const}` タグが `{#if}` ブロックの中で使えるようになり、条件に応じて変数が定義できるようになりました (**3.48.0**, [Docs](https://svelte.jp/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
- `createEventDispatcher` 関数で、カスタムイベントをキャンセルできるようになりました (**3.48.0**, [Docs](/docs/svelte#createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
- `{@const}` タグが `{#if}` ブロックの中で使えるようになり、条件に応じて変数が定義できるようになりました (**3.48.0**, [Docs](/docs/special-tags#const), [PR](https://github.com/sveltejs/svelte/pull/7451))
- `<svelte:element>`、アニメーション、多くの DOM 要素に関するバグが修正されました。詳細は [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) をご覧ください!

## What's new in SvelteKit
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const load: PageServerLoad = () => {
};
```

SvelteKit は自動的にこの `fetchPost` の呼び出しを await してからページのレンダリングを開始します。なぜならそれがトップレベルだからです。しかし、ネストした `fetchComments` の呼び出しが完了するのは待ちません – ページはレンダリングされ、`data.streamed.comments` はリクエストが完了すると解決する promise となります。`+page.svelte` で、Svelte の [await block](https://svelte.jp/docs#template-syntax-await) を使用してロード中の状態を表示することもできます:
SvelteKit は自動的にこの `fetchPost` の呼び出しを await してからページのレンダリングを開始します。なぜならそれがトップレベルだからです。しかし、ネストした `fetchComments` の呼び出しが完了するのは待ちません – ページはレンダリングされ、`data.streamed.comments` はリクエストが完了すると解決する promise となります。`+page.svelte` で、Svelte の [await block](/docs/logic-blocks#await) を使用してロード中の状態を表示することもできます:

```svelte
<script lang="ts">
Expand Down
12 changes: 6 additions & 6 deletions documentation/blog/2023-04-01-whats-new-in-svelte-april-2023.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,18 @@ Happy April、みなさん! 今月は、Svelte コンパイラの全ての新
## What's new in Svelte

- **3.56.0** でたくさんの新機能が使えるようになりました!
- `|stopImmediatePropagation` という `on:eventname` 向けのイベント修飾子(event modifier) が追加されました ([#5085](https://github.com/sveltejs/svelte/issues/5085), [Docs](https://svelte.jp/docs#template-syntax-element-directives-on-eventname))
- `slide` トランジションに `axis` パラメータが追加されました ([#6182](https://github.com/sveltejs/svelte/issues/6182), [Docs](https://svelte.jp/docs#run-time-svelte-transition-slide))
- `writable` ストアを読み取り専用に変換する `readonly` ユーティリティが追加されました ([#6518](https://github.com/sveltejs/svelte/pull/6518), [Docs](https://svelte.jp/docs#run-time-svelte-store-writable))
- メディア要素向けの `readyState` バインディングが追加されました ([#6666](https://github.com/sveltejs/svelte/issues/6666), [Docs](https://svelte.jp/docs#template-syntax-element-directives-bind-property-media-element-bindings))
- 画像(image) に `naturalWidth``naturalHeight` バインディングが追加されました ([#7771](https://github.com/sveltejs/svelte/issues/7771), [Docs](https://svelte.jp/docs#template-syntax-element-directives-bind-property-image-element-bindings))
- `|stopImmediatePropagation` という `on:eventname` 向けのイベント修飾子(event modifier) が追加されました ([#5085](https://github.com/sveltejs/svelte/issues/5085), [Docs](/docs/element-directives#on-eventname))
- `slide` トランジションに `axis` パラメータが追加されました ([#6182](https://github.com/sveltejs/svelte/issues/6182), [Docs](/docs/svelte-transition#slide))
- `writable` ストアを読み取り専用に変換する `readonly` ユーティリティが追加されました ([#6518](https://github.com/sveltejs/svelte/pull/6518), [Docs](/docs/svelte-store#writable))
- メディア要素向けの `readyState` バインディングが追加されました ([#6666](https://github.com/sveltejs/svelte/issues/6666), [Docs](/docs/element-directives#media-element-bindings))
- 画像(image) に `naturalWidth``naturalHeight` バインディングが追加されました ([#7771](https://github.com/sveltejs/svelte/issues/7771), [Docs](/docs/element-directives#image-element-bindings))
- コンポーネントでの `<!-- svelte-ignore ... -->` がサポートされました ([#8082](https://github.com/sveltejs/svelte/issues/8082))
- `bind:group` の input で、値に `undefined` がセットされたときにクリアされるようになりました (**3.56.0**, [#8214](https://github.com/sveltejs/svelte/issues/8214))
- `{#each}` ブロック内にある、spread 属性を持つ `<input>` 要素を入れ替えたとき、その `<input>` の値が保持されるようになりました (**3.56.0**, [#7578](https://github.com/sveltejs/svelte/issues/7578))
- 全体的に警告(warning)が改善されました - `noreferrer` から `aria` ルールまで! (**3.56.0**)
- `<svelte:document>` が追加されました (**3.57.0**, [#3310](https://github.com/sveltejs/svelte/issues/3310))
- `style:` ディレクティブが `style=` 属性より優先されるようになりました (**3.57.0**, [#7475](https://github.com/sveltejs/svelte/issues/7475))
- `fly``blur` トランジションで CSS の単位がサポートされました (**3.57.0**, [#7623](https://github.com/sveltejs/svelte/pull/7623), [Docs](https://svelte.jp/docs#run-time-svelte-transition))
- `fly``blur` トランジションで CSS の単位がサポートされました (**3.57.0**, [#7623](https://github.com/sveltejs/svelte/pull/7623), [Docs](/docs/svelte-transition))

Svelte コンパイラに対する全ての変更については、まだ未リリースの変更も含め、[CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) をご確認ください。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Svelte 4 is out and folks have been building! There's a bunch of new showcases,
## What's new in Svelte
The big news this month was the release of Svelte 4.0! You can read all about it in the [Announcing Svelte 4 post](https://svelte.dev/blog/svelte-4). From performance fixes and developer experience improvements to [a brand new site, docs and tutorial](https://svelte.dev/blog/svelte-dev-overhaul)... this new release sets the stage for Svelte 5 with minimal breaking changes.

If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](https://svelte.dev/docs/v4-migration-guide) for all the details.
If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the [migration guide](/docs/v4-migration-guide) for all the details.

For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ More on all that down below...
## What's new in Svelte & Language Tools
There's been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md).

The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](https://svelte.dev/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!
The **4.1.0 release** added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the [Custom Elements API docs](/docs/custom-elements-api) or the [PR](https://github.com/sveltejs/svelte/pull/8991) for more info!

In addition to supporting SvelteKit's new `HEAD` server method, Svelte's language tools now support Prettier v3 (**extensions-107.9.0**) and workspace trust settings are now used to support all settings in workspace (**extensions-107.8.0**).

Expand All @@ -37,7 +37,7 @@ For all the patches and performance updates from this month, check out the [Svel
- [Maktaba](https://www.maktaba.digital/) is a bookmark manager that "you will actually use"
- [Whispering](https://github.com/braden-w/whispering-extension) is a Chrome extension that lets you access OpenAI's Whisper API for fast transcription in the browser (including ChatGPT)
- [DocuTalk](https://docutalk.co/) is an AI Customer Support chatbot for your website
- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite
- [Krello](https://github.com/iamrishupatel/trello-clone) is a Trello clone built with Svelte, Appwrite and Flowbite
- [Been](https://beeneverywhere.net/) is a map builder with travel stats like visited countries, extreme visited points, etc.
- [image-to-social-media-thumbnail](https://brody.fyi/tools/image-to-social-media-thumbnail) lets you convert any image to a social media thumbnail
- [Svelte Capacitor Store](https://github.com/sdekna/svelte-capacitor-store) is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects
Expand Down Expand Up @@ -85,7 +85,7 @@ _To Read_
- [better-svelte-writable](https://github.com/tnthung/better-svelte-writable) provides a type-safe writable which gives you more control over the container
- [Svetch.ts](https://github.com/Bewinxed/svetch#readme) is a client/types/schema/docs generator for your API endpoints
- [sveltekit-localize-url](https://github.com/rinart73/sveltekit-localize-url) handles URL localization and routing
- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte
- [elegua](https://github.com/howesteve/elegua) is a small, reactive PWA router for Svelte
- [Molly](https://github.com/renefournier/molly/tree/main) is a bash script and npm module that helps you clean up unused Svelte components in your project
- [sveltekit-bot](https://github.com/begoon/sveltekit-bot) is a Telegram bot made with SvelteKit and Vercel

Expand Down
Loading

0 comments on commit e45abd0

Please sign in to comment.