als-render

v0.8.3

Published

2 days ago

Lightweight JS library for transforming JSX into raw HTML, enabling both server-side and client-side rendering without a virtual DOM. It offers a simplified component model with automated event handling and global state management.

Downloads

584

0High
0Medium
0Low

alexsorkin

ALS-Render JSX HTML rendering server-side rendering client-side rendering JavaScript library no virtual DOM web development component model event handling

ALS-Render

Development stage Not for production use

Overview

ALS-Render is a versatile library that enables rendering of JSX like code into raw HTML. It supports both Server-Side Rendering (SSR) and Client-Side Rendering, providing seamless integration for dynamic web applications.

Important Note: ALS-Render does not use React nor is it a complete replacement for React. This library focuses specifically on the transformation of code. The operational behavior of applications using ALS-Render differs significantly from React applications. For example, objects in style attribute use another interface, or various React hooks like useEffect (instead useEffect, used component.update method). Additionally, the context handling in ALS-Render operates differently.

Installation

To use ALS-Render in your project, you need to install it via npm:

npm install als-render

Ensure you have the library properly linked in your project files where you intend to use it.

Usage

Server-Side Rendering (Node.js)

In a Node.js environment, render is used to pre-render JSX to HTML on the server, allowing for faster initial page loads and SEO optimization. Here’s how to use it:

const express = require('express')
const app = express()
const Render = require('als-render');

const layout = (rawHtml,bundle) =>  `<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/path/to/css/style.css">
   <title>Your Application</title>
</head>
<body>
   ${rawHtml}
</body>
<script>${bundle}</script>
</html>`;

const path = './path/to/your/JSXComponent';
Render.contextName = 'context';
const minified = false;

app.get('/',(req,res) => {
    const data = {};
    const { rawHtml, bundle } = Render.render(path,data,minified);
    res.end(layout(rawHtml, bundle))
})

Client-Side Rendering (Browser)

In the browser, render dynamically converts JSX into HTML and handles client-side updates. This method is particularly useful for Single Page Applications (SPAs) where dynamic content loading is necessary.

Include the ALS-Render script in your HTML and call render as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./path/to/css/app.css">
    <title>Your Application</title>
</head>
<body>
    
</body>
<!-- Include ALS-Render library -->
<script src="/path/to/als-render/render.min.js"></script>
<script>
    const data = {}
    const selector = 'body'
    const path = './path/to/your/JSXComponent'
    render(path, selector, data).then(() => {
        console.log('Component rendered successfully');
    });
</script>
</html>

ALS-Render Features Overview

While ALS-Render handles JSX, its usage differs from React. Here's how you can work with React-like code but adapted for ALS-Render:

CommonJs - ALS-Render using CommonJs instead module (require instead import).
Components - Components in ALS-Render are defined as functions that return raw HTML. This approach emphasizes a more direct interaction with the DOM, bypassing the need for a virtual DOM layer typically found in frameworks like React.
State Management - State management in ALS-Render is handled manually. Each component can include an update method that can be called to re-render the component with new state. Unlike React, this method must be explicitly invoked to reflect state changes in the UI.
Event Handling - Event handling in ALS-Render is streamlined by automating the addition of event listeners. All event functions are stored in component.actions and are automatically attached to elements as listeners after each update. This setup allows for a more declarative attachment of events compared to manual management.
Styles - The style attribute in ALS-Render can be only a string
Class Attribute - Unlike React's className attribute for specifying CSS classes, ALS-Render uses the standard HTML class attribute. This simplifies integration with conventional HTML and CSS practices.
Context - ALS-Render provides a global context variable accessible by default in each component. This context can be used to share data and functions across components, simplifying the management of global states or configurations.
Event Naming - Events in ALS-Render follow the standard HTML naming conventions (e.g., onclick instead of onClick). This adherence simplifies the learning curve for those familiar with traditional HTML and JavaScript.
Rendering - Server-Side Rendering (SSR): The server-side render function in ALS-Render returns an object containing rawHtmland bundle, facilitating the generation and manipulation of HTML server-side before sending it to the client.

Browser Rendering: In the browser, ALS-Render directly inserts generated HTML into the DOM, streamlining the rendering process by eliminating additional abstraction layers.

Lifecycle Hooks - ALS-Render provides lifecycle hooks as mount and unmount.
- inside component available this.on('mount',(element) => {}) and this.on('unmount',() => {})
onload - ALS-Render has onload event for each element.
updating - Each component has this.update(props,inner)
context.link - by using context.link(href) you can add link stylesheet to html
context.style - by using context.style(cssStyles) you can add css styles to html
context.browser - true inside browser and false in Nodejs
context.ssr - true if html rendered on NodeJS
context.data - includes data passed in render function

Counter example

App.js

const Counter = require('./Counter')
function App({count}) {
   return (<div>
      <Counter count={count} />
   </div>)
}
module.exports = App

Counter.js

function Counter({count}) {
   return (<div>
      <button onclick={() => this.update({count:count+1})}>Increase</button>
      <span>{count}</span>
      <button onclick={() => this.update({count:count-1})}>Decrease</button>
   </div>)
}

module.exports = Counter

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme