Symfony UX Svelte

安裝

使用 Composer 和 Symfony Flex 安裝套件

1
2
3
4

$ composer require symfony/ux-svelte

$ npm install --force
$ npm run watch

Flex recipe 將自動為您設定，例如將 .enableSvelte() 新增到您的 webpack.config.js 檔案，以及新增程式碼以載入 assets/app.js 內的 Svelte 元件。

接下來，安裝一個套件來協助 Svelte

1

$ npm install svelte-loader --save-dev

就是這樣！現在可以將 assets/svelte/controllers/ 內的任何檔案渲染為 Svelte 元件。

如果您使用 Svelte 4，您將必須將 browser、import 和 svelte 新增到 conditionNames 陣列。根據 Svelte 4 遷移指南 中針對 webpack 等打包器的說明，這是必要的，以確保生命週期回呼在內部被調用。

若要修改 conditionNames 陣列，請將以下變更附加到您的 webpack.config.js 檔案底部

1
2
3
4
5

// webpack.config.js
- module.exports = Encore.getWebpackConfig();
+ const config = Encore.getWebpackConfig();
+ config.resolve.conditionNames = ['browser', 'import', 'svelte'];
+ module.exports = config;

用法

Flex recipe 應該已經將 registerSvelteControllerComponents() 程式碼新增到您的 assets/app.js 檔案中

1
2
3
4

// assets/app.js
import { registerSvelteControllerComponents } from '@symfony/ux-svelte';

registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));

這將載入位於 assets/svelte/controllers 目錄中的所有 Svelte 元件。這些元件稱為Svelte 控制器元件：旨在從 Twig 渲染的頂層元件。

您可以使用 Twig 中的 svelte_component() 渲染任何 Svelte 控制器元件。

例如

1
2
3
4
5
6

// assets/svelte/controllers/Hello.svelte
<script>
    export let name = "Svelte";
</script>

<div>Hello {name}</div>

1
2

{# templates/home.html.twig #}
<div {{ svelte_component('Hello', { 'name': app.user.fullName }) }}></div>

如果您的 Svelte 元件具有您想要在初始渲染時播放的轉場效果，您可以使用 svelte_component() 函式的第三個引數 intro，就像您使用 Svelte 用戶端元件 API 一樣

1
2
3
4
5
6
7

// assets/svelte/controllers/MyAnimatedComponent.svelte
<script>
    import { fade } from 'svelte/transition';
    export let name = "Svelte";
</script>

<div transition:fade|global>Hello {name}</div>

1
2

{# templates/home.html.twig #}
<div {{ svelte_component('MyAnimatedComponent', { 'name': app.user.fullName }, true) }}></div>

搭配 AssetMapper 使用

由於 .svelte 檔案格式不是純 JavaScript，因此搭配 AssetMapper 使用此程式庫需要一些額外步驟。

1. 將您的 .svelte 檔案編譯為純 JavaScript 檔案。這可以使用 svelte/compiler 程式庫來完成，但這是一個有點非標準的流程。如需範例，請參閱 https://github.com/symfony/ux/blob/2.x/ux.symfony.com/assets/svelte/build/build.js。
2. 將此程式庫指向包含最終 JavaScript 檔案的「已建置」控制器目錄

1
2
3

# config/packages/svelte.yaml
svelte:
    controllers_path: '%kernel.project_dir%/assets/build/svelte/controllers'

此外，在您的 .svelte 檔案中，匯入另一個元件時，請使用 .js 副檔名

1
2

// use PackageList.js even though the file is named PackageList.svelte
import PackageList from '../components/PackageList.js';

回溯相容性承諾

此套件旨在遵循與 Symfony 框架相同的回溯相容性承諾：https://symfony.dev.org.tw/doc/current/contributing/code/bc.html