elementsSpecial Case: Link Component
The
Link component deserves special attention as it integrates with the MostJS router:* Requires an
href proprender parameter to control whether the new route should be rendered or just change pathLink(props= {}, children= [], render=true)
render parameter is for choosing to just push the path but not render anything you can acheive same result with
router.pushOnly()
$3 MostJS components are functions that return virtual DOM nodes. Unlike some other frameworks, components in MostJS are pure JavaScript functions, making them intuitive and flexible.
The
Component function is used to render and manage reusable components:
`js`Parameters:
*
: The component function to renderprops: Properties to pass to the componenttitle: A unique identifier for the component (required)Example:
`jsconst App = () => {
`Under the hood,
does the following:1. Registers the component function with its title
$3 MostJS provides a simple state management system with the
useState fucntion, inspired by React's hook system.#### useState
The
useState hook allows components to maintain and update state:
`js`Parameters:
*
: Initial state value (can be a value or function)Returns:
* An array containing:
state: Current state valuesetState: Function to update the stateExample:
`jsconst Counter = () => {
Count: ${count},`How it works:
The
implementation:1. Identifies the current component from the component stack
$3 #### useRef
The
useRef hook provides direct access to DOM elements:
`js`Parameters:
*
: A unique string identifier that matches a reference prop on an elementReturns:
* The actual DOM element
Example:
`jsconst SearchField = () => {
`How it works:
The reference system in MostJS:
1. Uses a global map to store references to DOM elements
prop with a unique identifierreference prop are added to the refs mapuseRef function retrieves an element from the refs map using the provided identifier. undefined.> This can happen when elements are rendered conditionally and the reference was never attached.
$3 #### Watch
The
Watch function provides a way to perform side effects when dependencies change:
`js`Parameters:
*
: Function to executedependencies: Array of values to watch (optional)Behavior:
* If no dependency array is provided: The effect runs after every render
[]) is provided: The effect runs only once when the component mountsExample:
`jsconst UserProfile = (props) => {
/api/users/${props.userId})`How it works:
The
implementation:1. Identifies the current component from the component stack
Routing MostJS includes a robust client-side router for creating single-page applications (SPAs). The router enables navigation between different views without full page reloads, making your applications feel more responsive and native-like.
$3 - Path-based routing : Define routes with static paths or dynamic parametersParameter extraction : Use route patterns like
/users/:id to capture URL segmentsQuery string parsing : Access query parameters with router.useQuery()Browser history integration : Seamless integration with the browser's History APICustom 404 handling : Define custom handlers for unmatched routesTitle management : Set document titles for each route
$3 #### Initialization
js// Set up routes
// Set a custom 404 handler
// Start the router (initialize with current URL)
`#### Route Registration
js`Parameters:
: A string path pattern (can include dynamic segments with :paramName syntax)handler: The component function to render when the route matchestitle: The document title to set when this route is active (defaults to window.location.origin)Examples:
`js// Route with parameters
// Root route
`#### Navigation Methods
The router provides several methods for navigation:
#####
Navigates to a new route, updates the browser history, and renders the matching component.
js`#####
Updates the URL and browser history without rendering any component. Useful for updating the URL without triggering a re-render.
js`#####
Re-renders the component for the current route. Useful after state changes that should refresh the current view.
js`#### Accessing Route Parameters
js`Returns: An object containing all route parameters extracted from the current URL.
Example:
js`#### Accessing Query Parameters
js`Returns: An object containing all query parameters from the current URL.
Example:
js`#### Getting Current Path
js`Returns: The current pathname (without query string).
#### Custom 404 Handler
js`Parameters:
: Component function to render when no route matches the current URL
$3 MostJS provides a special
Link component that integrates with the router:
`js// In your component:
`Parameters:
: Object containing attributes for the anchor element (required: href)children: Content of the linkrender: Boolean that controls whether to render the new route (default: true)Features:
render parameter
$3 Here's an example of a complete SPA with routing:
`js// Components
const UserList = () => {
Sorted by: ${sortBy}]),/users?sort=name }, ['Sort by Name'], false),/users?sort=date }, ['Sort by Date'], false)const UserProfile = () => {
User Profile: ${id}]),const NotFound = () => {
// Register routes
// Start the router
`
$3 You can combine the router with state management to create dynamic views:
jsconst FilteredList = () => {
/${filter});Current filter: ${filter}])router.register('/:filter', FilteredList, 'Filtered List');
`
$3 The router automatically handles browser back/forward navigation by listening to the
event. When users navigate using browser controls, the router will update the application state and render the appropriate component.$3 The diffing algorithm is central to MostJS's efficiency. It compares the old and new virtual DOM trees to determine the minimal set of changes required to update the real DOM.
Key Features:
* Node type comparison
How it Works:
1. Compare node types (tag names)
$3 MostJS's rendering system is responsible for converting the virtual DOM into real DOM elements and updating the DOM when state changes.
Primary Rendering Functions:
1. createElement : Creates actual DOM elements from virtual nodesrender : Initial rendering of a component to the DOMrerender : Updates the DOM when component state changes
API Reference
$3 | Function | Description |
Create(tag, props, ...children) | Creates a virtual DOM element |Component(componentFn, props, title) | Renders a reusable component with scoped state |useState(initialValue) | Creates a state variable with getter and setter |useRef(referenceId) | Accesses a DOM element by reference ID |Watch(callback, dependencies) | Runs side effects when dependencies change |render(componentTitle, componentFn, props) | Renders a component to the DOM |createStore(initialState) | Creates a global state store with subscribe/dispatch pattern |diff(oldVNode, newVNode) | Computes differences between virtual DOM trees |createElement(vNode) | Creates a real DOM element from a virtual DOM node |rerender(component, props) | Updates a component's DOM representation after state changes |
$3 | Component | HTML Equivalent | Description |
Button(props, children) | | Button element |Div(props, children) | | Division element |Ul(props, children)
| | Unordered list |Li(props, children) | | List item |H1(props, children) to H6(props, children) | to | Heading elements |Input(props, children) | | Input element |P(props, children) | | Paragraph element |Span(props, children) | | Span element |Link(props, children, render) | | Anchor element with routing support |Aside(props, children) | | Aside element |Header(props, children) | | Header element |Footer(props, children) | | Footer element |Section(props, children) | | Section element |Main(props, children) | | Main content element |Nav(props, children) | | Navigation element |Article(props, children) | | Article element |Hr(props, children) | | Horizontal rule element |Img(props, children) | | Image element |Label(props, children) | | Form label element |Form(props, children) |