+
Skip to content

ongsalt/sway

Repository files navigation

Sway

🌟☄️🌸🎼

svelte 5 clone (hopefully)

What's done

  • Templating syntax: literally svelte, you can even use svelte lsp.
    • you can do interpolation e.g. {count.value}.
    • #if :else :else if
    • one component can contain multiple root nodes like svelte
  • Reactivity: i want it to look like svelte but i hate doing transformation so .value it is then.
    • signal behave the same as svelte $state except you need to use .value. (i should say "more like vue" tho)
    • there is also effect and computed
  • event listener
  • each syntax should be ok now. see each.ts for more technical note.
  • value binding for input and textarea
    • auto coerce type to number for <input type="number">
    • the same go for checkbox
  • Dynamic attribute class="border {someExpression}" or placeholder={anotherExpression}
  • a reactive proxy like vue reactive for deep reactivity
    • we also do array patching.
  • pass getter and setter instead of a Signal to a binding
  • Component
    • no generated props type becuase im too lazy
    • you can access props via $$props
    • mount(...), #if, #each, #key (not yet implemented) do produce effect scope.
  • shorthand props syntax name={name} -> {name}, bind:name={name} -> bind:name
  • lifecycle hooks: onMount, onDestroy
  • Component instance binding bind:this
    • you cant use export function something(...) syntax yet. for now use $$exports.something = ...
  • non dom support with custom renderer

What's not yet

  • think about each binding: should we make each item a signal or not.
  • parse more complex expression here #each {expression} as something, index
    • #each cats.filter(it => it.id.length < lenght) as cat, i
    • currently, this is parse failure
  • Async stuff
    • await block
    • some kind of react-like suspense boundary
    • async derived 💀💀💀
  • do transpiling magic that allow you to use signal without .value like runes
  • typescript support
    • type definitions of stuff exported form sway is for some reason all gone when used in .sway file. maybe its becuase of svelte lsp
  • SSR
    • i need to create a new transformer and maybe a new parser too
    • hydration look like pain in the ass
    • think about vite integration or may be we could offload this to sway/kit lmao
  • a router (or sway/kit, beside from ssr thing this look quite fun to make, especially ts magic for PageData)
  • realworld (frontend only)
  • value binding for select
  • scoped style

Unlikely to implement

  • :else block under #each
  • transition, animation

Packages

About

another attempt of me trying to build a frontend framework

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载