als-render
Advanced tools
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.
Development stage Not for production use
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.
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.
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))
})
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>
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.
Lifecycle Hooks - ALS-Render provides lifecycle hooks as mount and unmount.
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
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
FAQs
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.
The npm package als-render receives a total of 15 weekly downloads. As such, als-render popularity was classified as not popular.
We found that als-render demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.