diff --git a/latest/rumext.v2.html b/latest/rumext.v2.html index 1250a56..8bd048c 100644 --- a/latest/rumext.v2.html +++ b/latest/rumext.v2.html @@ -10,24 +10,24 @@

)

view source

check-props

macro

(check-props props & [eq-f :as rest])

A macro version of the check-props function

-
view source

Component

The react.Component class

+
view source

Component

The react.Component class

view source

create-context

Create a react context

view source

create-ref

view source

create-root

Creates react root

view source

defc

macro

(defc & args)

A macro for defining component functions. Look the user guide for understand how to use it.

-
view source

defc

macro

(defc & args)

A macro for defining component functions. Look the user guide for understand how to use it.

-
view source

deferred

(deferred component)(deferred component sfn)

A higher-order component that just deffers the first render to the next tick

+
view source

defc

macro

(defc & args)

A macro for defining component functions. Look the user guide for understand how to use it.

+
view source

deferred

(deferred component)(deferred component sfn)

A higher-order component that just deffers the first render to the next tick

view source

deps

(deps)(deps a)(deps a b)(deps a b c)(deps a b c d)(deps a b c d e)(deps a b c d e f)(deps a b c d e f g)(deps a b c d e f g h)(deps a b c d e f g h & rest)

A helper for creating hook deps array, that handles some adaptations for clojure specific data types such that UUID and keywords

view source

deref

(deref iref)

A rumext hook for deref and watch an atom or atom like object. It internally uses the react.useSyncExternalSource API

view source

element

(element klass)(element klass props)

Create a react element. This is a public API for the internal jsx function

view source

fnc

macro

(fnc & args)

A macro for defining inline component functions. Look the user guide for understand how to use it.

-
view source

fnc

macro

(fnc & args)

A macro for defining inline component functions. Look the user guide for understand how to use it.

-
view source

forward-ref

lets your component expose a DOM node to parent component with a ref.

+
view source

fnc

macro

(fnc & args)

A macro for defining inline component functions. Look the user guide for understand how to use it.

+
view source

forward-ref

lets your component expose a DOM node to parent component with a ref.

view source

Fragment

The `react.Fragment class

-
view source

html

macro

(html body)
view source

html

macro

(html body)
view source

hydrate-root

Lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server

+
view source

html

macro

(html body)
view source

html

macro

(html body)
view source

hydrate-root

Lets you display React components inside a browser DOM node whose HTML content was previously generated by react-dom/server

view source

lazy

A helper for creating lazy loading components.

view source

lazy-component

macro

(lazy-component ns-sym)

A macro that helps defining lazy-loading components with the help of shadow-cljs tooling.

-
view source

lazy-component

macro

(lazy-component ns-sym)

A macro that helps defining lazy-loading components with the help of shadow-cljs tooling.

-
view source

memo

(memo component)(memo component eq?)

High order component for memoizing component props. Is a rumext variant of React.memo what accepts a value comparator function (instead of props comparator)

+
view source

lazy-component

macro

(lazy-component ns-sym)

A macro that helps defining lazy-loading components with the help of shadow-cljs tooling.

+
view source

memo

(memo component)(memo component eq?)

High order component for memoizing component props. Is a rumext variant of React.memo what accepts a value comparator function (instead of props comparator)

view source

memo'

A raw variant of React.memo.

view source

merge-props

(merge-props props1 props2)
view source

mount

Add element to the DOM tree. Idempotent. Subsequent mounts will just update element.

view source

noop

view source

portal

Render element in a DOM node that is ouside of current DOM hierarchy.

@@ -35,10 +35,10 @@
view source

provider

(provider ctx)

Get the current provider for specified context

view source

ref-val

(ref-val ref)

Given state and ref handle, returns React component.

view source

render!

(render! root element)
view source

set-ref-val!

(set-ref-val! ref val)
view source

spread

macro

(spread target & [other :as rest])

A helper for create spread js object operations. Leaves the keys untouched.

-
view source

spread

macro

(spread target & [other :as rest])

A helper for create spread js object operations. Leaves the keys untouched.

-
view source

spread-props

macro

(spread-props target & [other :as rest])

A helper for create spread js object operations. Adapts compile time known keys to the react props standard transformations.

-
view source

spread-props

macro

(spread-props target & [other :as rest])

A helper for create spread js object operations. Adapts compile time known keys to the react props standard transformations.

-
view source

start-transition

An alias for react.startTransition function

+
view source

spread

macro

(spread target & [other :as rest])

A helper for create spread js object operations. Leaves the keys untouched.

+
view source

spread-props

macro

(spread-props target & [other :as rest])

A helper for create spread js object operations. Adapts compile time known keys to the react props standard transformations.

+
view source

spread-props

macro

(spread-props target & [other :as rest])

A helper for create spread js object operations. Adapts compile time known keys to the react props standard transformations.

+
view source

start-transition

An alias for react.startTransition function

view source

Suspense

The react.Suspense class

view source

throttle

(throttle component ms)

A higher-order component that throttles the rendering

view source

undefined

view source

unmount

Removes component from the DOM tree.

@@ -74,9 +74,9 @@
view source

useState

The react.useState hook function

view source

useTransition

The react.useTransition hook function

view source

with-effect

macro

(with-effect deps & body)

A convenience syntactic abstraction (macro) for useEffect

-
view source

with-effect

macro

(with-effect deps & body)

A convenience syntactic abstraction (macro) for useEffect

-
view source

with-layout-effect

macro

(with-layout-effect deps & body)

A convenience syntactic abstraction (macro) for useLayoutEffect

-
view source

with-layout-effect

macro

(with-layout-effect deps & body)

A convenience syntactic abstraction (macro) for useLayoutEffect

-
view source

with-memo

macro

(with-memo deps & body)

A convenience syntactic abstraction (macro) for useMemo

-
view source

with-memo

macro

(with-memo deps & body)

A convenience syntactic abstraction (macro) for useMemo

-
view source
\ No newline at end of file +
view source

with-effect

macro

(with-effect deps & body)

A convenience syntactic abstraction (macro) for useEffect

+
view source

with-layout-effect

macro

(with-layout-effect deps & body)

A convenience syntactic abstraction (macro) for useLayoutEffect

+
view source

with-layout-effect

macro

(with-layout-effect deps & body)

A convenience syntactic abstraction (macro) for useLayoutEffect

+
view source

with-memo

macro

(with-memo deps & body)

A convenience syntactic abstraction (macro) for useMemo

+
view source

with-memo

macro

(with-memo deps & body)

A convenience syntactic abstraction (macro) for useMemo

+
view source
\ No newline at end of file diff --git a/latest/user-guide.html b/latest/user-guide.html index 5113c79..190e789 100644 --- a/latest/user-guide.html +++ b/latest/user-guide.html @@ -4,8 +4,8 @@

Simple and Decomplected UI library based on React >= 18 focused on performance.

Add to deps.edn:

funcool/rumext
-{:git/tag "v2.10"
- :git/sha "d96ea18"
+{:git/tag "v2.11"
+ :git/sha "4140a50"
  :git/url "https://github.com/funcool/rumext.git"}

First Steps

@@ -158,8 +158,7 @@

Hand [:> my-label {:name "foobar" :on-click some-fn}])

So, all the the props passed to the :> handler on creating an element from my-label component are transformed at compile-time to an js object following react convention (camelcasing keys, etc.); This greatly facilitates the task of passing the props to the next element without performing any additional transformation.

-

For this last case and to make the work even easier but preserving the same code style as the rest of the application, rumext offers a way for the destructuring to also take into account the rules and conventions of react for the props keys.

-

This is achieved with the metadata {::mf/props :react} or by putting the suffix * in the component name. And then, the destructuring can use the lisp-case and the macro will automatically access the value with camelCase from the props, respecting the react convention.

+

And finally, to help preserve the code style, rumext offers a way for the destructuring to also take into account the rules and conventions of react for the props keys. This is achieved with the metadata {::mf/props :react} or by putting the suffix * in the component name. With that, the destructuring can use the lisp-case for keys and the macro will automatically generate the appropriate access code to the value with camelCase from the props, respecting the react convention.

(mf/defc my-label*
   {::mf/props :obj}
   [{:keys [name class] :rest props}]
@@ -169,15 +168,15 @@ 
Hand

But remember: the * only changes the behavior of destructuring. The call convention is determined by the used handler: [:& or [:>.

Props Checking

-

Rumext comes with basic props checking that allows basic existence checking or with simple predicate checking. For simple existence checking, just pass a set with prop names.

+

The rumext library comes with two approaches for checking props: simple and malli.

+

Lets start with the simple, which consists on simple existence check or plain predicate checking:

(mf/defc button
   {::mf/props :obj
    ::mf/expect #{:name :on-click}}
   [{:keys [name on-click]}]
   [:button {:on-click on-click} name])
-

The prop names obeys the same rules as the destructuring so you should use the same names in destructuring.

-

You also can add some predicates:

+

The prop names obeys the same rules as the destructuring so you should use the same names in destructuring. Sometimes a simple existence check is not enought, for that cases you can pass a map where keys are props and values predicates:

(mf/defc button
   {::mf/props :obj
    ::mf/expect {:name string?
@@ -185,7 +184,21 @@ 
Props Checking

   [{:keys [name on-click]}]
   [:button {:on-click on-click} name])
-

The props checking obey the :elide-asserts compiler option and they are removed on production builds.

+

If that is not enough, it also supports malli as validation mechanism for props:

+
(def ^:private schema:props
+  [:map {:title "button:props"}
+   [:name string?]
+   [:class {:optional true} string?]
+   [:on-click fn?]])
+
+(mf/defc button
+  {::mf/props :obj
+   ::mf/schema schema:props}
+  [{:keys [name on-click]}]
+  [:button {:on-click on-click} name])
+
+

The prop names on schema obeys the destructuring rules for key casing.

+

NOTE: The props checking obey the :elide-asserts compiler option and they are removed on production builds.

Higher-Order Components

This is the way you have to extend/add additional functionality to a function component. Rumext exposes one:

WARNING: it is mainly implemented to be used in penpot and released as separated project for conveniendce. Don’t expect compromise for backward compatibility beyond what the penpot project needs.

License

-

Licensed under Eclipse Public License (see LICENSE).

+

Licensed under MPL-2.0 (see LICENSE file on the root of the repository)

\ No newline at end of file