Expand description
Sauron is an web framework for creating fast and interactive client side web application, as well as server-side rendering for back-end web applications.
Modules§
- provides diffing algorithm which returns patches
- This module provides functionalities for manipulating the actual Document Object Model in the browser
- Provides functions and macros to build html elements
- prelude
- This is a native integration of Serde with wasm-bindgen. It allows to convert Rust data types into native JavaScript types and vice versa.
- Provides functions and macros to build svg elements
- vdom stands for virtual-dom. This module contains types that are derived from mt-dom where we assign concrete types into the generics.
- Converting between JavaScript
Promise
s to RustFuture
s. - Raw API bindings for Web APIs
Macros§
- declare a function with the name corresponds to attribute name for easy usage in html elements Example:
- Generate a skip diff list based on the node used in the view
- build a css string
- build css string that has media selector or any other conditional group
- creates a key attribute using a formatter
- Quasi-quoting macro for building sauron Nodes.
- build a style attribute
- creates a text node using a formatter
Structs§
- The
AnimationEvent
class. - request animation frame handle
- These are the plain attributes of an element
- A handle to both a closure in Rust as well as JS closure which will invoke the Rust closure.
- Cmd is a way to tell the Runtime that something needs to be executed
- Dispatch is a command to be executed by the system. This is returned at the init function of a component and is executed right after instantiation of that component. Dispatch required a DSP object which is the Program as an argument The emit function is called with the program argument. The callback is supplied with the program an is then executed/emitted.
- Provides function for document related functions
- Effects is a convenient way to group Msg for component to execute subsequent updates based on certain conditions. This can be used for doing animation and incremental changes to the view to provide an effect of transition or animation.
- Represents an element of the virtual node An element has a generic tag, this tag could be a static str tag, such as usage in html dom. Example of which are
div
,a
,input
,img
, etc. - The
FocusEvent
class. - The
HashChangeEvent
class. - TODO: expand this much farther by getting the InputEvent data, data_transfer, event_type, is_composing events. a custom InputEvent to contain the input string value
- Convenience type for use on exported
fn() -> Result<T, JsError>
functions, where you wish to throw a JavaScriptError
object. - Representation of an object owned by JS.
- The
KeyboardEvent
class. - Contains the time it took for the last app update call for the component TODO: Maybe rename to Diagnostics
- an event when a virtual Node is mounted the field node is the actual dom node where the virtual Node is created in the actual dom
- The
MouseEvent
class. - A Patch encodes an operation that modifies a real DOM element or native UI element
- Program handle the lifecycle of the APP
- The
Selection
class. - if the expression evaluates to true, diffing at this node will be skipped entirely
- Provides function related to Time
- handle for request_idle_callback calls
- The
TouchEvent
class. - The
TransitionEvent
class. - Describe the path traversal of a Node starting from the root node
- Provides function for window related functions
Enums§
- Values of an attribute can be in these variants
- a dom version of the Attribute value, thereby removing the MSG generic
- specify how the App is mounted to the DOM
- specify whether to attach the Node in shadow_root
- Mouse button used in the MouseEvent
- represents a node in a virtual dom A node could be an element which can contain one or more children of nodes. A node could also be just a text node which contains a string
- Wraps different primitive variants used as values in html This is needed since html attributes can have different value types such as checked(bool), name(String), tab_index(i32) Note: memory size of Value is 32 bytes, in comparison String is 24 bytes
Constants§
- These are most commonly used html attributes such as class, id, etc
- html events
- These are the comonly used html tags such as div, input, buttons,.. etc
- These are most commonly used svg attributes
- These are svg attributes with names that are non proper rust identifier therefore they are handled differently. ie: (color-profile, accent-height, etc)
- Svg attributes with xlink namespace
- These are the commonly used svg tags such as rect, circle, path, arc, ..etc.
- These are svg tags which the tags are non proper rust identifier, so they are handled differently
Traits§
- An Application is the root component of your program. Everything that happens in your application is done here.
- A component has a view and can update itself.
- A trait for checked and unchecked casting between JS types.
- A component that can be used directly in the view without mapping
- An extension trait for
Option<T>
andResult<T, E>
for unwrapping theT
value, or throwing a JS error if it is not available.
Functions§
- Creates an html a element
- Creates an html abbr element
- Creates html accent-height attribute
- Creates html accept attribute
- Creates html accesskey attribute
- Creates html accumulate attribute
- Creates html action attribute
- Creates html additive attribute
- Creates an html address element
- Creates html align attribute
- Creates html alignment-baseline attribute
- Creates html allow attribute
- Creates html allowReorder attribute
- Creates html alphabetic attribute
- Creates html alt attribute
- Creates html amplitude attribute
- Creates an svg animate element
- Creates an svg animateMotion element
- Creates an svg animateTransform element
- Creates html arabic-form attribute
- Creates an html article element
- Creates html ascent attribute
- Creates an html aside element
- a utility function to convert simple value into attribute
- Creates html attributeName attribute
- Creates html attributeType attribute
- Creates an html audio element
- Creates html autoReverse attribute
- Creates html autocapitalize attribute
- Creates html autocomplete attribute
- Creates html autofocus attribute
- Creates html autoplay attribute
- Creates html azimuth attribute
- Creates an html b element
- Creates html background attribute
- Creates html baseFrequency attribute
- Creates html baseProfile attribute
- Creates html baseline-shift attribute
- Creates html bbox attribute
- Creates an html bdi element
- Creates an html bdo element
- Creates html begin attribute
- Creates html bgcolor attribute
- Creates html bias attribute
- Creates an html blockquote element
- Creates an html body element
- Creates html border attribute
- Creates an html br element
- Creates html buffered attribute
- Creates an html button element
- Creates html by attribute
- Creates html calcMode attribute
- Creates an html canvas element
- Creates html cap-height attribute
- Creates an html caption element
- Relative to the width of the “0” (zero)
- Creates html challenge attribute
- Creates html charset attribute
- set the checked value, used checkbox and radio buttons
- Creates an svg circle element
- Creates an html cite element
- Creates html class attribute
- a helper function to add multiple classes to a node
- A helper function which takes an array of tuple of class and a flag. The final class is assembled using only the values that has a flag which evaluates to true.
- Creates html clip attribute
- Creates an svg clipPath element
- Creates html clip-path attribute
- Creates html clipPathUnits attribute
- Creates html clip-rule attribute
- centimeters
- Creates an html code element
- Creates html codebase attribute
- Creates an html colgroup element
- Creates html color attribute
- Creates html color-interpolation attribute
- Creates html color-interpolation-filters attribute
- Creates an svg color-profile element
- Creates html color-rendering attribute
- Creates html cols attribute
- Creates html colspan attribute
- create a comment node
- Creates html content attribute
- Creates html contentScriptType attribute
- Creates html contentStyleType attribute
- Creates html contenteditable attribute
- Creates html contextmenu attribute
- Creates html controls attribute
- Creates html coords attribute
- Creates html crossorigin attribute
- Creates html csp attribute
- Creates html cursor attribute
- Creates html cx attribute
- Creates html cy attribute
- Creates html d attribute
- Creates an html datalist element
- Creates html datetime attribute
- Creates an html dd element
- Creates html decelerate attribute
- Creates html decoding attribute
- Creates html default attribute
- Creates html defer attribute
- Creates an svg defs element
- Represent an angle in degrees https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- Creates an html del element
- Creates an svg desc element
- Creates html descent attribute
- Creates an html details element
- Creates an html dfn element
- Creates an html dialog element
- Return the patches needed for
old_node
to have the same DOM asnew_node
- Creates html diffuseConstant attribute
- Creates html dir attribute
- Creates html direction attribute
- Creates html dirname attribute
- set whether an element is disabled or not
- Creates an svg discard element
- Creates html display attribute
- Creates an html div element
- Creates html divisor attribute
- Creates an html dl element
- provides access to the document element
- Creates html dominant-baseline attribute
- Creates html download attribute
- Creates html draggable attribute
- Creates html dropzone attribute
- Creates an html dt element
- Creates html dur attribute
- Creates html dx attribute
- Creates html dy attribute
- Creates html edgeMode attribute
- Creates html elevation attribute
- Creates an svg ellipse element
- Creates an html em element
- a utility function to return create an empty attr, useful for cases where branch expression need to return an attribute which otherwise it can not produce example:
- Creates html enable-background attribute
- Creates html enctype attribute
- Creates html end attribute
- Creates html enterkeyhint attribute
- Relative to the x-height of the current font (rarely used)
- Creates html exponent attribute
- Creates html externalResourcesRequired attribute
- Creates an svg feBlend element
- Creates an svg feColorMatrix element
- Creates an svg feComponentTransfer element
- Creates an svg feComposite element
- Creates an svg feConvolveMatrix element
- Creates an svg feDiffuseLighting element
- Creates an svg feDisplacementMap element
- Creates an svg feDistantLight element
- Creates an svg feDropShadow element
- Creates an svg feFlood element
- Creates an svg feFuncA element
- Creates an svg feFuncB element
- Creates an svg feFuncG element
- Creates an svg feFuncR element
- Creates an svg feGaussianBlur element
- Creates an svg feImage element
- Creates an svg feMerge element
- Creates an svg feMergeNode element
- Creates an svg feMorphology element
- Creates an svg feOffset element
- Creates an svg fePointLight element
- Creates an svg feSpecularLighting element
- Creates an svg feSpotLight element
- Creates an svg feTile element
- Creates an svg feTurbulence element
- Creates an html fieldset element
- Creates an html figcaption element
- Creates an html figure element
- Creates html fill attribute
- Creates html fill-opacity attribute
- Creates html fill-rule attribute
- Creates an svg filter element
- Creates html filterRes attribute
- Creates html filterUnits attribute
- Creates html flood-color attribute
- Creates html flood-opacity attribute
- Creates html font-size-adjust attribute
- Creates html font-stretch attribute
- Creates html font-style attribute
- Creates html font-variant attribute
- Creates html font-weight attribute
- Creates an html footer element
- Creates an svg foreignObject element
- Creates an html form element
- Creates html formaction attribute
- Creates html format attribute
- Creates html formnovalidate attribute
- Creates html fr attribute
- Creates html from attribute
- Creates html fx attribute
- Creates html fy attribute
- Creates an svg g element
- Creates html g1 attribute
- Creates html g2 attribute
- Creates html glyph-name attribute
- Creates html glyph-orientation-horizontal attribute
- Creates html glyph-orientation-vertical attribute
- Creates html glyphRef attribute
- Represents an angle in gradians https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- Creates html gradientTransform attribute
- Creates html gradientUnits attribute
- Creates an html h1 element
- Creates an html h2 element
- Creates an html h3 element
- Creates an html h4 element
- Creates an html h5 element
- Creates an html h6 element
- Creates html hanging attribute
- Creates an svg hatch element
- Creates an svg hatchpath element
- Creates an html head element
- Creates an html header element
- Creates html headers attribute
- Creates html height attribute
- Creates an html hgroup element
- Creates html hidden attribute
- Creates html high attribute
- Creates html horiz-adv-x attribute
- Creates html horiz-origin-x attribute
- Creates an html hr element
- Creates html href attribute
- Creates html hreflang attribute
- Creates an html html element
- Creates html http attribute
- Creates an html i element
- Creates html icon attribute
- Creates html id attribute
- Creates html ideographic attribute
- Creates an html iframe element
- Creates an svg image element
- Creates html image-rendering attribute
- Creates an html img element
- Creates html importance attribute
- Creates html in attribute
- Creates html in2 attribute
- Creates an html input element
- Creates html inputmode attribute
- Creates an html ins element
- Creates html integrity attribute
- Creates html intercept attribute
- Creates html intrinsicsize attribute
- Creates html ismap attribute
- Creates html itemprop attribute
- Creates html k attribute
- Creates html k1 attribute
- Creates html k2 attribute
- Creates html k3 attribute
- Creates html k4 attribute
- Creates an html kbd element
- Creates html kernelMatrix attribute
- Creates html kernelUnitLength attribute
- Creates html kerning attribute
- key attributes is used to match old element and new element when diffing
- Creates html keyPoints attribute
- Creates html keySplines attribute
- Creates html keyTimes attribute
- Creates html keytype attribute
- Creates html kind attribute
- Creates an html label element
- Creates html lang attribute
- Creates html language attribute
- evaluate the fn_node only if flag is true and return the evaluated Node
- Creates an html legend element
- Creates html lengthAdjust attribute
- Creates html letter-spacing attribute
- Creates an html li element
- Creates html lighting-color attribute
- Creates html limitingConeAngle attribute
- Creates an svg line element
- Creates an svg linearGradient element
- Creates html list attribute
- Creates html loading attribute
- Creates html local attribute
- Creates html low attribute
- Creates an html main element
- Creates html manifest attribute
- Creates an html map element
- Creates an html mark element
- Creates an svg marker element
- Creates html marker-end attribute
- Creates html markerHeight attribute
- Creates html marker-mid attribute
- Creates html marker-start attribute
- Creates html markerUnits attribute
- Creates html markerWidth attribute
- Creates an svg mask element
- Creates html maskContentUnits attribute
- Creates html maskUnits attribute
- Creates html mathematical attribute
- Creates html max attribute
- Creates html maxlength attribute
- Creates html media attribute
- Creates an html menu element
- Creates an html menuitem element
- Creates an svg mesh element
- Creates an svg meshgradient element
- Creates an svg meshpatch element
- Creates an svg meshrow element
- Creates an svg metadata element
- Creates an html meter element
- Creates html method attribute
- Creates html min attribute
- Creates html minlength attribute
- milimeters
- Creates html mode attribute
- Creates an svg mpath element
- Represents a time in milliseconds. https://developer.mozilla.org/en-US/docs/Web/CSS/time
- Creates html multiple attribute
- Creates html muted attribute
- Creates html name attribute
- Creates an html nav element
- Creates an html noscript element
- Creates html novalidate attribute
- return the instantaneous time
- Creates html numOctaves attribute
- Creates an html object element
- Creates html offset attribute
- Creates an html ol element
- an event builder
- attach an on_animationend event to the html element
- attach an on_auxclick event to the html element
- attach an on_blur event to the html element
- attach an on_broadcast event to the html element
- attach an on_change event to the html element
- attach an on_checked event to the html element
- on click event
- custom mount event
- attach an on_contextmenu event to the html element
- attach an on_dblclick event to the html element
- attach an on_doubleclick event to the html element
- attach an on_focus event to the html element
- attach an on_hashchange event to the html element
- attach an on_input event to the html element
- attach an on_keydown event to the html element
- attach an on_keypress event to the html element
- attach an on_keyup event to the html element
- custom mount event
- attach an on_mousedown event to the html element
- attach an on_mouseenter event to the html element
- attach an on_mouseleave event to the html element
- attach an on_mousemove event to the html element
- attach an on_mouseout event to the html element
- attach an on_mouseover event to the html element
- attach an on_mouseup event to the html element
- attach an on_pointerlockchange event to the html element
- attach an on_pointerlockerror event to the html element
- attach an on_popstate event to the html element
- attach an on_readystatechange event to the html element
- attach an on_reset event to the html element
- attach callback to the scroll event
- attach an on_select event to the html element
- attach an on_selectionchange event to the html element
- attach an on_submit event to the html element
- attach an on_toggle event to the html element
- attach an on_touchend event to the html element
- attach an on_touchmove event to the html element
- attach an on_touchstart event to the html element
- attach an on_transitionend event to the html element
- attach an on_wheel event to the html element
- Creates html opacity attribute
- Creates html operator attribute
- Creates an html optgroup element
- Creates html optimum attribute
- Creates an html option element
- Creates html order attribute
- Creates html orient attribute
- Creates html orientation attribute
- Creates html origin attribute
- Creates an html output element
- Creates html overflow attribute
- Creates html overline-position attribute
- Creates html overline-thickness attribute
- Creates an html p element
- Creates html paint-order attribute
- Creates html panose-1 attribute
- the document is not wrapped with html
- Creates an svg path element
- Creates html pathLength attribute
- Creates an svg pattern element
- Creates html patternContentUnits attribute
- Creates html patternTransform attribute
- Creates html patternUnits attribute
- percentage Example:
- Creates an html picture element
- Creates html ping attribute
- Creates html placeholder attribute
- Creates html pointer-events attribute
- Creates html points attribute
- Creates html pointsAtX attribute
- Creates html pointsAtY attribute
- Creates html pointsAtZ attribute
- Creates an svg polygon element
- Creates an svg polyline element
- Creates html poster attribute
- Creates an html pre element
- Creates html preload attribute
- Creates html preserveAlpha attribute
- Creates html preserveAspectRatio attribute
- Creates html primitiveUnits attribute
- Creates an html progress element
- points (1pt = 1/72 of 1in)
- pixels (1px = 1/96th of 1in)
- Creates an html q element
- Creates html r attribute
- Represent an angle in radians https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- Creates an svg radialGradient element
- Creates html radiogroup attribute
- Creates html radius attribute
- parse the html string and build a node tree
- Creates an html rb element
- Creates html readonly attribute
- Creates an svg rect element
- Creates html refX attribute
- Creates html refY attribute
- Creates html referrerPolicy attribute
- Creates html referrerpolicy attribute
- Creates html rel attribute
- Creates html rendering-intent attribute
- Creates html repeatCount attribute
- Creates html repeatDur attribute
- Creates html required attribute
- Creates html requiredExtensions attribute
- Creates html requiredFeatures attribute
- Creates html restart attribute
- Creates html result attribute
- Creates html reversed attribute
- the rgb css function
- the rgba css function
- Creates html rotate attribute
- Creates html rows attribute
- Creates html rowspan attribute
- Creates an html rp element
- Creates an html rt element
- Creates an html rtc element
- Creates an html ruby element
- Creates html rx attribute
- Creates html ry attribute
- Represents a time in seconds. https://developer.mozilla.org/en-US/docs/Web/CSS/time
- Creates an html samp element
- Creates html sandbox attribute
- Creates html scale attribute
- Creates html scope attribute
- Creates html scoped attribute
- Creates an html script element
- Creates an html section element
- Creates html seed attribute
- Creates an html select element
- Creates html selected attribute
- Creates an svg set element
- Creates html shape attribute
- Creates html shape-rendering attribute
- Creates html size attribute
- Creates html sizes attribute
- skip diffing the node is the val is true
- Creates html slope attribute
- Creates html slot attribute
- Creates an html small element
- Creates an svg solidcolor element
- Creates html spacing attribute
- Creates an html span element
- Creates html specularConstant attribute
- Creates html specularExponent attribute
- Creates html speed attribute
- Creates html spellcheck attribute
- Creates html spreadMethod attribute
- Creates html src attribute
- Creates html srcdoc attribute
- Creates html srclang attribute
- Creates html srcset attribute
- Creates html start attribute
- Creates html startOffset attribute
- create a stateful component node
- Creates html stdDeviation attribute
- Creates html stemh attribute
- Creates html stemv attribute
- Creates html step attribute
- Creates html stitchTiles attribute
- Creates an svg stop element
- Creates html stop-color attribute
- Creates html stop-opacity attribute
- Creates html strikethrough-position attribute
- Creates html strikethrough-thickness attribute
- Creates html string attribute
- Creates html stroke attribute
- Creates html stroke-dasharray attribute
- Creates html stroke-dashoffset attribute
- Creates html stroke-linecap attribute
- Creates html stroke-linejoin attribute
- Creates html stroke-miterlimit attribute
- Creates html stroke-opacity attribute
- Creates html stroke-width attribute
- Creates an html strong element
- A helper function which creates a style attribute by assembling only the parts that passed the boolean flag.
- Creates an html sub element
- Creates an html summary element
- Creates an html sup element
- Creates html surfaceScale attribute
- Creates an svg svg element
- Creates an svg switch element
- Creates an svg symbol element
- Creates html systemLanguage attribute
- Creates html tabindex attribute
- Creates an html table element
- Creates html tableValues attribute
- Creates html target attribute
- Creates html targetX attribute
- Creates html targetY attribute
- Creates an html tbody element
- Creates an html td element
- Creates an html template element
- Create a text node element
- Creates html text-anchor attribute
- Creates html text-decoration attribute
- Creates html textLength attribute
- Creates an svg textPath element
- Creates html text-rendering attribute
- Creates an html textarea element
- Creates an html tfoot element
- Creates an html th element
- Creates an html thead element
- Creates an html time element
- Creates html title attribute
- Creates html to attribute
- Creates an html tr element
- Creates html transform attribute
- Creates html translate attribute
- Creates an svg tspan element
- Represents an angle in a number of turns. One full circle is 1turn. https://developer.mozilla.org/en-US/docs/Web/CSS/angle
- Creates html type attribute
- Creates an html u element
- Creates html u1 attribute
- Creates html u2 attribute
- Creates an html ul element
- Creates html underline-position attribute
- Creates html underline-thickness attribute
- Creates html unicode attribute
- Creates html unicode-bidi attribute
- Creates html unicode-range attribute
- Creates html units-per-em attribute
- Creates an svg unknown element
- Creates an svg use element
- Creates html usemap attribute
- Creates html v-alphabetic attribute
- Creates html v-hanging attribute
- Creates html v-ideographic attribute
- Creates html v-mathematical attribute
- Creates html value attribute
- Creates html values attribute
- Creates an html var element
- Creates html vector-effect attribute
- Creates html version attribute
- Creates html vert-adv-y attribute
- Creates html vert-origin-x attribute
- Creates html vert-origin-y attribute
- Relative to 1% of the height of the viewport*
- Creates an html video element
- Creates an svg view element
- Creates html viewBox attribute
- A help function which render the view when the condition is met, otherwise just display a
span(vec![], vec![])
- Creates html viewTarget attribute
- Creates html visibility attribute
- Relative to 1% of the width of the viewport*
- Creates html width attribute
- Creates html widths attribute
- utility function which returns the Window element
- Creates html word-spacing attribute
- Creates html wrap attribute
- Creates html writing-mode attribute
- Creates html x attribute
- Creates html x1 attribute
- Creates html x2 attribute
- Creates html xChannelSelector attribute
- Creates html x-height attribute
- creates a function where the function name is the attribute name of the svg element
- creates a function where the function name is the attribute name of the svg element
- creates a function where the function name is the attribute name of the svg element
- creates a function where the function name is the attribute name of the svg element
- creates a function where the function name is the attribute name of the svg element
- creates a function where the function name is the attribute name of the svg element
- creates a function where the function name is the attribute name of the svg element
- Creates html xml:base attribute
- Creates html xml:lang attribute
- Creates html xml:space attribute
- Creates html xmlns attribute
- Creates html xmlns:xlink attribute
- Creates html y attribute
- Creates html y1 attribute
- Creates html y2 attribute
- Creates html yChannelSelector attribute
- Creates html z attribute
- Creates html zoomAndPan attribute
Type Aliases§
- Callback where Event type is supplied for Components