Mase JS is a new way to write HTML entirely in your JavaScript.
#webdev#javascript#programming#html
GreenestGoat

GreenestGoat @greenestgoat

About: Currently developing masejs

Location:
UK
Joined:
Jun 9, 2024

Mase JS is a new way to write HTML entirely in your JavaScript.

Publish Date: Jun 15 '24
16 13

Mase JS is a new way to write HTML entirely in your JavaScript.

Introducing Mase JS a new way to write and structure html entirely inside your JavaScript. Also leaving a small footprint on your website as the library comes in at only 800 bytes in size. it uses a custom JSON like format that converts JavaScript to html on the frontend.

Planned:

Server side / Backend rendering with nodejs or express.
plugin support.

check out the GitHub to get started, also a star would be awesome, if you find an error or wanna ask me a question have a look at our Discord server.

Installation

CDN

Import Mase JS using CDN.

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';
Enter fullscreen mode Exit fullscreen mode

🚧 Specific Version 

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';
Enter fullscreen mode Exit fullscreen mode

NPM

Install Mase JS using npm and node.

npm install masejs
Enter fullscreen mode Exit fullscreen mode

Import

Import Mase JS definitions from MaseJSInterpreter.

index.js

import { MaseJSInterpreter } from 'masejs';

MaseJSInterpreter.interpret(masejs);
Enter fullscreen mode Exit fullscreen mode

Usage

Use the tree structure in your Javascript. That's it 🎉.

script.js

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';

const masejs = {
  div: {
    center: 'true',
    class: 'button-container',
    styles: {
      height: '100%',
      width: '100%',
      inset: '0px',
      position: 'fixed',
    },
    button: [
      {
        value: 'Click me',
        styles: {
          color: 'white',
          'background-color': '#000000',
          outline: 'none',
          border: 'none',
          height: '38px',
          width: '88px',
          'border-radius': '5px',
          cursor: 'pointer',
        },
        class: 'button',
        id: 'button',
        events: {
          click: () => alert('Button clicked!')
        },
      }
    ]
  }
};

MaseJSInterpreter.interpret(masejs);
Enter fullscreen mode Exit fullscreen mode

Examples

Comments 13 total

  • Chibuzo Franklin Odigbo
    Chibuzo Franklin OdigboJun 16, 2024

    Why would I use this? What does it solve?

    • GreenestGoat
      GreenestGoatJun 16, 2024

      it would mostly be used to have all you code in one place in a single language.

      • Eckehard
        EckehardJun 16, 2024

        Beside the fact that JSX solves the same task in a more natural way, there are lot´s of mature libraries featuring the same idea. See Mithril or VanJS. Most of them use a "composition by code"-approach, where the structure of the code controls the structure of the DOM.

        You might have a look on DML, which implements (like VanJS) all HTML-tags as functions, so you can just write
        h1("headline") to create a headline. But as it features an "auto-mount" feature, you can use Javascript commands to build your DOM. An ordered list can be created like this:

        begin(ol())
["apple","banana","kiwi"].forEach(fruit => li(fruit))
end()
        Enter fullscreen mode Exit fullscreen mode

        DML allows to easily build functional componentes, so many commands are extended like this:

        ol(["apple","banana","kiwi"])
        Enter fullscreen mode Exit fullscreen mode

        There is definitively a place for DOM in JS-solutions, but it would be better if people would cotribute to existing projects instead of reinventing the wheel every second week.

      • Chibuzo Franklin Odigbo
        Chibuzo Franklin OdigboJun 16, 2024

        Yeah, that is great, but I am more focused on the "functionality" side of things. HTML/JSX is already great, plus, this then contains the Vanilla-CSS dread. So...

        Whilst I understand how this wold be okay, it is not great, in the grand scheme. I see it as removing the flexibility from creating a modular structure, with more robust reusable component structure. So... What is the happs to this?

  • GreenestGoat
    GreenestGoatJun 16, 2024

    ty for the feedback

  • Ryan Hoffman
    Ryan HoffmanJun 16, 2024

    it seems like you made a virtual dom, while it is impressive (found that most people dont know how they would implement this) the current solution is for very basic functionality and doesn't take into consideration many things other frameworks have already have a mature solution for.
    mostly under render performance.
    its a cool project dont get me wrong, and good job for creating the logic for it, but lets keep it at that IMO , not trying to discourage you or anything just being realistic

  • Red Ochsenbein (he/him)
    Red Ochsenbein (he/him)Jun 16, 2024

    Not everything needs to be Javascript. Maybe HTML should stay HTML.

    • Eckehard
      EckehardJun 16, 2024

      The way, HTML and Javascript are coupled (via global ID´s) can be impractical, so there are cases where you have a benefit to build the DOM directly without using HTML. But as always - it depends much on your task.

  • SalladShooter
    SalladShooterJun 16, 2024

    This is impressive. I’m working on something similar but for Python instead -> github.com/SalladShooter/phyal. My motive is sometimes people don’t want to or can’t learn HTML but know another language instead. Keep up the work!

  • Eckehard
    EckehardJun 17, 2024

    Just a question:

    why did you not use innerHTML? HTML-rendering his highly optimized, so probably faster than any JS solution. So, your code would be something like this:

    const masejs = document.createDocumentFragment();
masejs.innerHTML = ' <div class = 'button-container' style = '...' >
  <button>
         Click me
  </button>
</div>
'
    Enter fullscreen mode Exit fullscreen mode
  • Hussein Kizz
    Hussein Kizz Jun 21, 2024

    Hmm nice, am also working on a framework, just finishing up final touches, my initial draft was like what you have there, later realized its not dx friendly and so unnatural so I can say just continue!

Add comment