Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

A virtual DOM library in calcit-js

NotificationsYou must be signed in to change notification settings

Respo/respo.calcit

Repository files navigation

Inspired by React and Reagent. PreviouslyRespo/respo.cljs.

Usage

Inpackage.cirru and runcaps:

{}  :dependencies${}    |Respo/respo.calcit|main

Latest

DOM syntax

div  {}    :class-name"|demo-container"    :style${}(:color:red)    :on-click$fn(eventdispatch!)  div${}

Text Node:

<>content;withstyles<>content${}  :color:red  :font-size14})

Component definition:

defcompcomp-container(content)  div    {}      :class-name|demo-container      :style${}(:color:red)    <>content

App initialization:

;initializestoreandupdatestoredefatom*store${}(:point0)  :states${}defndispatch!(op)  reset!*store(updater@*storeop);TODOdefnupdater(storeop)  tag-matchop(:TODOab)TODO    _(do(eprintln"|Unknown op:"op)store);rendertotheDOMrender!mount-point(comp-container@*store)dispatch!

Rerender on store changes:

defnrender-app!()  render!mount-point(comp-container@*store)dispatch!add-watch*store:changes$fn()  render-app!

Reset virtual DOM caching during hot code swapping, and rerender:

defnreload!()  remove-watch*store:changes  add-watch*store:changes$fn()    render-app!  clear-cache!  render-app!

Adding effects to component:

defeffecteffect-a(text)(actionparent-elementat-place?)  printlnaction  ;actioncouldbe:mount:update:amount  when(=:mountaction)    donildefcompcomp-a(text)  []    effect-atext    div{}

Define a hooks plugin based on Calcit Record, better use a pure function:

defnplugin-x(statesoptions)  %::    %{}PluginX      :render$fn(self)(nthself1)      :show$fn(selfd!?text)    ,:plugin-name    div({})(<>"|Demo")

License

MIT


[8]ページ先頭

©2009-2025 Movatter.jp