Code HTML & CSS Directly In JavaScript With MaseJS

MaseJS is a JavaScript library that lets you write HTML and CSS directly in your JavaScript code. It offers a novel approach to creating UI elements, where you can define the structure, styles, and behavior all within your JavaScript object literals.

This means you can build web interfaces with a more streamlined and centralized workflow, where your entire page layout and styling is controlled by a single JavaScript object.

How it works:

Mase JS operates by interpreting the JavaScript object literal you provide and translating it into corresponding HTML elements and styles. Here’s how the process works:

• The MaseJSInterpreter.interpret method is called with the masejs object literal as an argument.
• A document fragment is created to hold the generated elements.
• The interpreter iterates over the top-level properties of the masejs object, treating each property as an HTML tag.
• For each tag, a new element is created using the createElement method.
• The applyElementOptions method is called to apply the specified options (styles, classes, attributes, event listeners, etc.) to the newly created element.
• Any nested elements defined within the current element are recursively processed and appended as children.
• Once all elements have been processed, the document fragment is appended to the document.body.

How to use it:

1. Install the masejs package via NPM and import the MaseJSInterpreter class into your project.

# NPM
$ npm install masejs

import { MaseJSInterpreter } from 'masejs';

2. Alternatively, you can import MaseJSInterpreter from a CDN directly into your HTML document:

<script type="module">
  import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';
</script>

3. Now, you can define your HTML and CSS structures within a JavaScript object:

const masejs = {
  div: {
    class: 'container',
    styles: {
      'justify-content': 'center',
      display: 'flex',
      'align-items': 'center',
      height: '100%',
      width: '100%',
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
      position: 'fixed',
    },
    form: [
      {
        styles: {
          width: '300px',
        },
        input: [
          {
            type: 'email',
            placeholder: 'Email',
            styles: {
              display: 'flex',
              width: '100%',
              height: '38px',
            },
          },
          {
            type: 'password',
            styles: {
              'margin-top': '12px',
              display: 'flex',
              width: '100%',
              height: '38px'
            },
            placeholder: 'Password',
          },
        ],
        label: [
          {
            value: 'Join newsletter',
            styles: {
              display: 'flex',
              'font-family': 'Roboto, sans-serif',
              'margin-top': '28px',
              width: '100%',
              'align-items': 'center'
            },
            input: [
              {
                type: 'checkbox',
                id: 'checkbox',
                styles: 'display: flex;margin-left: 10px;',
              },
            ],
          },
        ],
        button: [
          {
            styles: {
              'margin-top': '20px',
              display: 'flex',
              width: '100%',
              'align-items': 'center',
              height: '32px',
              'justify-content': 'center',
            },
            value: 'Reset',
            type: 'reset',
            class: 'reset-button',
          },
        ],
      },
    ],
  },
};

4. Call the interpreter to render your HTML & CSS.

MaseJSInterpreter.interpret(masejs);

Changelog:

06/20/2024

• Update