als-render

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.

1.1.0
npm

Version published: 2 months ago

Weekly downloads: 47; increased by123.81%

Maintainers: 0

Weekly downloads

Created: 7 months ago

Source

ALS-Render

Development stage Not for production use

Overview

ALS-Render is a versatile library that enables rendering of JS or 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 in browser

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="/node_modules/als-render/render.min.js"></script>
   <title>Todos</title>
</head>
<body>
   
</body>
<script>
const langs = { 
   langs:['ru','he'],
   dictionary:{Increase:['Увеличить','להגדיל'], Decrease:['Уменьшить','להקטין']}
}
const props = {count:0}
const options = {jsx:true,selector:'body',langs,lang:'ru'}
render('./App',props,options)
</script>
</html>

App.js

const Counter = require('./Counter')

class App extends Component{
   constructor(props) {super(props)}
   render({count}) {
      return (<div>
         <Counter count={count} />
      </div>)
   }
}
module.exports = App

Counter.js

class Counter extends Component {
   constructor(props) {super(props)}
   render({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

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) =>  `<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Your Application</title>
</head>
<body>
   ${rawHtml}
</body>
</html>`;

const path = './path/to/your/JSXComponent', options = { langs:{...} };
const todosScreen = new Render(path,options)
app.get('/',(req,res) => {
    const data = {},lang='ru';
    res.end(layout(todoScreen.build(data,lang)))
})

API

Render in NodeJS

global.Component = require('als-component');
Require.minifyOptions = { keep_fnames: true }
class Render {
   static Require = Require // Can set settings for Require (like Require.minified = true)
   static jsx = true

   MainClass // The Main component class
   includebundle // if true including bundle inside script
   bundle // created bundle to include
   langsObj // the dictionary object if options.langs included
   constructor(path, options = {}) {
      const { 
         context = {},  // context for server side rendering
         contextBrowser = {}, // context for bundle version
         langs, // langs object for als-lang
         defaultLang, // default language for als-lang
         includebundle = true, // include bundle script in rawHTML
      } = options
   }

   build(data, lang) { } // return rawHtml or Promise for rawHtml if render isAsync
}

Browser version

async function render(path, data = {}, options = {}) {
   const { 
      selector, // selector for outerHTML. If not provided, updated to [component=MainComponentName]
      version, 
      jsx = true, // if true, parse jsx before running
      context={}, // context for require
      langs,lang  // languages and choosen language for als-lang
   } = options
   
   Require.version = version

   /*...*/

   return context
}

Keywords

FAQs

What is als-render?

Is als-render popular?

Is als-render well maintained?

Package last updated on 25 Nov 2024

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.

Install