Svelte的新功能(2020年12月)

2020-12-04 20:37:20

这是斯维尔特(Svelte)的最新消息今年还有很多值得庆祝的事情!本月的报道包括Rollup-plugin-svelte,Sapper和SvelteKit的更新以及Svelte社区的一系列展示!

现在,自定义Web组件(3.29.5,示例)中都支持$$ props,$$ restProps和$$ slots,并且slot组件现在支持散布道具:< slot {... foo} /> (3.30.0)

新的hasContext生命周期功能使检查父组件上下文中是否已设置键(3.30.0和3.30.1,文档)变得容易。

现在有一个新的SvelteComponentTyped类,它使添加扩展基本Svelte组件的强类型组件变得更加容易。组件库和框架作者很高兴!例如:导出类YourComponent扩展了SvelteComponentTyped< {aProp:boolean},{click:MouseEvent},{default:{aSlot:string}}> {}(3.31.0,RFC)

Svelte现在包括一个导出映射,该映射明确说明可以从其npm软件包(3.29.5以及3.29.6、3.29.7和3.30.0中的一些修复程序)导入哪些文件。

rollup-plugin-svelte具有新的7.0.0版本。最大的变化是css选项已删除。使用该选项的用户应添加另一个插件,如模板所示,如rollup-plugin-css-only

许多新的TypeScript定义改进使编辑Sapper应用程序变得更加容易!动态导入的CSS现在也应该在client.js文件中工作。 (未发行)

我们很高兴您提出要求! 如果您从上个月初没有收到Rich的博客文章,则可以在这里找到! narration.studio(仅适用于Chrome)是一种自动浏览器内音频录制和 叙事语音编辑平台。 句子长度是一种学习和分析工具,可显示一些作者如何发挥不同的长度,而其他作者则坚持使用不同的长度。 u / loopcake使SSR在Java Spring Boot中为所有希望渲染Svelte服务器端的Java商店工作。 Crossfade Link Animation演示了如何使用Crossfade(由Discord社区的Blu制造)在导航链接之间设置动画。 剪切路径过渡展示了如何使用剪切路径和自定义过渡来创建神奇的输入和输出过渡(由Discord社区的Faber制作) 构建静态网站生成器的经验教训分享了Elder.js背后的背景知识和思想-以及在此过程中做出的设计决策。

Svelte教程和项目课程是John Smilga的一个粗体课程,学生通过构建有趣的项目来学习Svelte.js。

在IPFS上构建Pastebin-使用FastAPI,Svelte和IPFS解释了如何制作类似分布式pastebin的应用程序。

Svelte-nStore是通用商店的替代品,可满足Svelte商店合同并增加吸气剂和计算功能。

svelte-slimscroll是一种Svelte Action,可将任何div转换为带有漂亮滚动条的可滚动区域。

svelte-store-router是Svelte的基于存储的路由器,它表明路由只是另一个全局状态,History API更改只是该状态的可选副作用。

svelte-error-boundary为Svelte提供了一个简单的错误边界组件,可以与DOM和SSR目标一起使用。

有想法添加到展示柜中吗?想要更多地参与Svelte吗?我们一直在寻找维护者,贡献者和狂热分子...查看Svelte Society,Reddit和Discord参与其中!