Roost.js - Framework that allows default JSON to productional HTML code!

WojtekGame

Roost.js

(disclaimer: this is built with ChatGPT originally, i'm now writing this myself…)
It's a HTML builder that just parses JSON to HTML
NOTE: Better to use Node.js/Deno to host the converted HTML, unless you embed it.
Features

1. Allows to parse JSON into HTML:

import roost from "roostjs";
roost.compile(JHTML); //Actual JSON HTML, not some boring things...

Where i can get it?
Gist (outated): https://gist.github.com/WojtekCodesToday/7d7aa6fb21c0acae76cb0e0021cfac1e
NPM (published): https://www.npmjs.com/package/roostjs
GitHub (not pushed, but repo exists): https://github.com/JSInventions/roostjs
How do i use JHTML?
Well, it's just a JSON representation of the HTML, like here:

{
    "doctype": true,
    "lang": "en",
    "stylesheets":[
        "index.css"
    ],
    "head": {
        "metaTags": true,
        "title": "My website",
        "content":{
            "link-0": {
                "ref": "stylesheet",
                "href": "index.css"
            }
        }
    },
    "body": {
        "div-1": {
            "id": "nav",
            "content": {
                "h1-2": {
                    "id": "logo",
                    "content": "A JSON website"
                }
            }
        }
    }
}

To this HTML:

<!DOCTYPE HTML>
<html lang="en">
  <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My website</title>
     <link rel="stylesheet" href="index.css">
     <!-- HTML Document generated by Roost. -->
  </head>
  <body>
     <div id="nav">
         <h1 id="logo">
            A JSON website
         </h1>
      </div>
 </body>
</html>

People that built this project

ChatGPT <50% of code
WojtekGame <Tests and some cool stuff, admin of project, 50% of code
[/code]

Last edited by WojtekGame (June 15, 2023 19:37:01)

bigspeedfpv

you don't need babel to use react

why would you want this? what is the use case

WojtekGame

bigspeedfpv wrote:
you don't need babel to use react

why would you want this? what is the use case

JSX to JSON and JSON to HTML ofc, but if needed, i might add more if possible.

Also a quick note that the library is built with GPT because i know JS but JS is too complex.

bigspeedfpv

yeah we can tell it's made with chatgpt lol.

what advantages does this have over regular HTML? it's not reactive which is like the main benefit of using react (sort of)

WojtekGame

bigspeedfpv wrote:
1.yeah we can tell it's made with chatgpt lol.

2.what advantages does this have over regular HTML? it's not reactive which is like the main benefit of using react (sort of)

1.I'm not too lazy but i sometimes actually code.
2.bro compared a markup language to a library that can turn into a markup language -_-

Last edited by WojtekGame (April 8, 2023 15:51:30)

bigspeedfpv

WojtekGame wrote:
bigspeedfpv wrote:
1.yeah we can tell it's made with chatgpt lol.

2.what advantages does this have over regular HTML? it's not reactive which is like the main benefit of using react (sort of)
1.I'm not too lazy but i sometimes actually code.
2.bro compared a markup language to a library that can turn into a markup language -_-

you're turning plain jsx, which is literally just html with a class around it, into html i'm beyond confused

WojtekGame

bigspeedfpv wrote:
WojtekGame wrote:
bigspeedfpv wrote:
1.yeah we can tell it's made with chatgpt lol.

2.what advantages does this have over regular HTML? it's not reactive which is like the main benefit of using react (sort of)
1.I'm not too lazy but i sometimes actually code.
2.bro compared a markup language to a library that can turn into a markup language -_-
you're turning plain jsx, which is literally just html with a class around it, into html i'm beyond confused

yeah it has error check also, but i might add plain JS support, i might not be beyond Babel's JSX but i'm still working on roost.js lmao.

WojtekGame

bump

WojtekGame

not a bump and just difficulties i have with the GPT model.

ajskateboarder

https://github.com/developit/htm

Also if ChatGPT can make your program, it's probably not original

Last edited by ajskateboarder (April 9, 2023 22:19:45)

WojtekGame

ajskateboarder wrote:
https://github.com/developit/htm

Also if ChatGPT can make your program, it's probably not original

I'm trying to rewrite it myself, lol

WojtekGame

bump, i'm doing something bad to great, <3

WojtekGame

i made it too cool now, not yet released, also using it is by making a JSON website though…

preview of JSON:

{
    "doctype": true,
    "lang": "en",
    "head": {
        "metaTags": true,
        "title": "My website",
        "content":{
            "link-0": {
                "ref": "stylesheet",
                "href": "index.css"
            },
        }
    },
    "body": {
        "div-1": {
            "id": "nav",
            "content": {
                "h1-2": {
                    "id": "logo",
                    "content": "Wojtek's website"
                }
            }
        }
    }
}

preview of generated JSON:

<!DOCTYPE HTML>
<html lang="en">
  <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My website</title>
     <!-- HTML Document generated by Roost. -->
  </head>
  <body>
     <div id="nav">
         <h1 id="logo">
            Wojtek's website
         </h1>
      </div>
 </body>
</html>

who might use this when i release it?

i_eat_coffee

https://scratch.mit.edu/discuss/topic/540502/
is this not the same thing?

ajskateboarder

Is this AI-generated

MagicCrayon9342

Literally html.

WojtekGame

ajskateboarder wrote:
Is this AI-generated

Yes, but 50% of the code of roost.js, the half of it is just myself.

i_eat_coffee wrote:
https://scratch.mit.edu/discuss/topic/540502/
is this not the same thing?

Nein, this is not the same thing, but depends on the same property
this uses some other syntax, Roost uses literally what like in HTML.
also that is a ded topic, this is kinda a game changer, and also this supports more keys, so this is the syntax of elements:

<div>Hi</div>
     || (equals sign)

"div-0":{
  "contents":"Hi"
}

MagicCrayon9342 wrote:
Literally html.

Yup, Roost.js converts JHTML to HTML, and it can also pretty print it without dependecies

Last edited by WojtekGame (May 1, 2023 21:44:45)

MagicCrayon9342

Yes, literally HTML. Both HTML and JSON are structured languages and excluding brackets and things the code will look near identical to HTML.

bigspeedfpv

WojtekGame wrote:

{
    "doctype": true,
    "lang": "en",
    "head": {
        "metaTags": true,
        "title": "My website",
        "content":{
            "link-0": {
                "ref": "stylesheet",
                "href": "index.css"
            },
        }
    },
    "body": {
        "div-1": {
            "id": "nav",
            "content": {
                "h1-2": {
                    "id": "logo",
                    "content": "Wojtek's website"
                }
            }
        }
    }
}

what does doctype: true mean

WojtekGame

bigspeedfpv wrote:

WojtekGame wrote:

{
    "doctype": true,
    "lang": "en",
    "head": {
        "metaTags": true,
        "title": "My website",
        "content":{
            "link-0": {
                "ref": "stylesheet",
                "href": "index.css"
            },
        }
    },
    "body": {
        "div-1": {
            "id": "nav",
            "content": {
                "h1-2": {
                    "id": "logo",
                    "content": "Wojtek's website"
                }
            }
        }
    }
}

what does doctype: true mean

it's if to add this to the html, if that option dosen't exist, Roost.js might kick a Quirks Mode detection.
it's just this part:

<!DOCTYPE HTML>

MagicCrayon9342 wrote:
Yes, literally HTML. Both HTML and JSON are structured languages and excluding brackets and things the code will look near identical to HTML.

They look similar but look:

JSON:

Can be used to send data
Can be rendered by browsers (roost.js just converts it to html)
Anything that supports JSON can open and get it's contents.
Can be parsed and stringified, unless you encounter a [object Object]

HTML

Can be used to create websites
Ekements can be styled.
Stylesheets and scripts can be inserted to look better.
Can import anything from the web.

Discuss Scratch