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 渲染的顶级组件。

你可以使用 svelte_component() 在 Twig 中渲染任何 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 文件的“built”控制器目录

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 框架相同的向后兼容性承诺：http://symfony.ac.cn/doc/current/contributing/code/bc.html