Another Frontend Framework: Svelte with TypeScript

栏目: IT技术 · 发布时间: 5年前

内容简介:Recently I implementedThe solution is different from others in that it’s in language level, instead of writing tools such as preprocessor, svelte-draft itself is implemented inIn example

Recently I implemented svelte-draft , which is another way to add complete typescript support to svelte. I rewrote almost all examples in https://svelte.dev/tutorial and the result is repo svelte-draft-tutorial .

The solution is different from others in that it’s in language level, instead of writing tools such as preprocessor, svelte-draft itself is implemented in TypeDraft , which is a superset of typescript with built-in support for DSL extension, code transformation and literate programming.

Language support for reactivity

Another Frontend Framework: Svelte with TypeScript

DSL watch

In example 2-reactivity/reactive-statements , we don’t need to use “$” to denote reactivity, instead we use DSL “watch”. The intention is clear here: watch count, if changed, execute the following statements.

React style component

Another Frontend Framework: Svelte with TypeScript

3-props/declaring-props

Another Frontend Framework: Svelte with TypeScript

3-props/declaring-props

We still use the React way to write component, and we don’t need to return JSX, just write it as is.

JSX as Template

We use JSX, but in template way, see examples in 4-logic :

We have “await ” tag to deal with promise, which is intuitive and straightforward:

Another Frontend Framework: Svelte with TypeScript

await

And traditional “if” and “for” logic:

Another Frontend Framework: Svelte with TypeScript

if

Another Frontend Framework: Svelte with TypeScript

logic “for”, using “each” tag

Slot

We can use slot with full power of typescript as well!

Another Frontend Framework: Svelte with TypeScript

use slot

Another Frontend Framework: Svelte with TypeScript

use slot props

Transition & Animation

Let’s take transition as an example: 10-transitions/transition :

Another Frontend Framework: Svelte with TypeScript

transition

Return 0

That’s the basics of svelte-draft , and we also have template project and TodoMVC implementation .

Any feedback is welcome! :)


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

虚拟经济学

虚拟经济学

威利•莱顿维塔、爱德华•卡斯特罗诺瓦 / 崔毅 / 中国人民大学出版社 / 2015-6 / 49.00元

电子游戏中也存在 “看不见的手”吗?玩虚拟游戏能够创造真实价值吗?为什么现实世界需要虚拟经济?经济学作为一门成熟的学科,起源于对农业、制造业和商业的探究,曾经作为解决饥饿、就业这些人类所面对的真实问题的方法。然而,在虚拟世界,最为稀缺的资源不再是食物和住所,而是人类的关注度。一些基于农业、制造业和商业存在的经济学理论、概念依然适用于游戏中的虚拟世界,比如最为人们所熟知的“看不见的手”这一概念。同时......一起来看看 《虚拟经济学》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试