【Svelte入門】Svelte5で値の変化を監視するObservableなパターンをRuneで実装する

            + letを宣言する位置による作用(トップレベルかそれ以外か)
+ 「export let」
+ 「$: ...」等のリアクティブ構文
+ <script>と<script context="module">との違い
+ $$props/$$restProps
+ ライフサイクル (onMountなど)
+ Store APIと「$」プレフィックス

        

            $: hoge = '初期化！';
$: console.log(`HOGE曰く「${hoge}」`);

        

            $: hoge = '初期化！';
$: hogeSays(hoge);

function hogeSays(_msg) {
    console.log(`HOGE曰く「${_msg}」`);
}

        

            $: hoge = '初期化！';
$: hoge, (() => {
    console.log(`HOGE曰く「${hoge}」`);
})();

        

            $: hoge = '初期化！';
$: piyo = '初期化！';
$: hoge, (() => {
    console.log(`HOGE曰く「${hoge}」`);
})(), piyo, (() => {
    console.log(`PIYO曰く「${piyo}」`);
})();

        

            import { writable } from "svelte/store";

const hoge = writable('初期化！');

$: $hoge, hogeSays();
function hogeSays() {
    console.log(`HOGE曰く「${$hoge}」`);
}

        

            import { writable } from "svelte/store";

const hoge = writable('初期化！');

$: $hoge, (() => {
    console.log(`HOGE曰く「${$hoge}」`);
})();

        

            $: hoge = '初期化！';

///👇構文的に等価

const hoge = writable('初期化！');

        

            const hoge = writable('初期化！');
hoge.subscribe(v => {
    console.log(`HOGE曰く「${v}」`);
});

        

            import { writable } from "svelte/store";
export const hoge = writable('初期化！');

        

            import { hoge } from "./store.js";

hoge.subscribe(v => {
    console.log(`HOGE曰く「${v}」`);
});

        

            + 「$: ...」(リアクティブ構文)
    --> 廃止

+ Store API
    --> 非推奨とはならないまでも、後方互換のためしばらく残される

        

            const count = ko.observable(0);

const doubleCount = ko.pureComputed(() => count() * 2);

//Logs whenever doubleCount updates
ko.computed(() => console.log(doubleCount()))

        

            $ yarn add svelte@latest

        

            Uncaught Svelte error: component_api_invalid_new
Attempted to instantiate src/App.svelte with `new App`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
    component_api_invalid_new errors.js:86
    check_target legacy.js:9
    App App.svelte:13
    <anonymous> main.ts:4
errors.js:86:16
    component_api_invalid_new errors.js:86
    check_target legacy.js:9
    App App.svelte:13
    <匿名> main.ts:4

        

            import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app')!,
})

export default app

        

            import './app.css';
import App from './App.svelte';

//👇追加
import { mount } from 'svelte';

const app = mount(App, {
    target: document.getElementById('app')!
});

export default app;

        

            let hoge = $state('初期化した状態');

$effect(() => {
    console.log(`HOGE曰く「${hoge}」`);
});