[Idea] Draw from existing HTML code and HTML (.html) files

[rubyFeedback]

Hey there Andy,

This is just a semi-random idea.

In the README you show this example:

<div id="application"></div>

And the corresponding glimmer code:

require 'glimmer-dsl-web'

include Glimmer

div('#application') {
  label(class: 'greeting') {
    'Hello, World!'
  }
}

What if the HTML code would already exist, and glimmer would parse that code (as a String), and then automatically create / build the corresponding glimmer code? Optionally to also output this and allow people to re-use it as-is.

This could allow for the functionality to, for instance, download a .html file, and have glimmer parse it into "glimmer elements" so to speak.

It could also allow to work with "glimmer components" and re-use them easily.

I guess you may ask "what is the use case and rationale for this"?

Well, it would allow for a bit more flexibility in using of the glimmer suite, which may be useful. It may also make a transition into glimmer easier. And people could embed and mix HTML code with "glimmer code".

Now that may be a bit messy (PHP code serves as negative example perhaps), but ultimately the flexibility gain may be useful, so that may be a trade off simply.

An additional idea could be to actually write purely in HTML and CSS and then just build glimmer apps "for free", without having to learn or transition into the glimmer DSL (which may take a while for people to learn; not everyone may want to learn ruby either, for instance).

Anyway, this is just an idea. Please feel free to proceed as always in any way you see fit. :)

PS: Actually, as a "spin off" idea to this, if glimmer were to be able to parse HTML/CSS, and if it were to obtain a full (and flexible) specification, people could actually tap into it and have glimmer act as the "translator" between different toolkits AND DSLs, even across different programming languages. And then perhaps become a bit more like rack (a ground for others to build upon) and perhaps also rubocop (e. g. having code elements that can yield glimmer code, or other code, automatically, such as via the autocorrect option for rubocop, kind of like a "glimmer AI", aka "Hello Sir, today I shall take your HTML/CSS/JavaScript code and automatically translate it into ruby + glimmre for you - and then also automatically compile a statically compiled variant via graalVM". Ok a bit of wishful thinking here, but it's just an idea after all.

[AndyObtiva]

The whole point of using the Glimmer DSL though is to NOT write any HTML code and to be able to mix imperative logic with declarative structure in one language (without opening scriptlets like in PHP/ERB or using awkward technologies like JSX). So, it defeats the point completely to have people not learn Glimmer and just use HTML as it does not allow mixing logic code unobtrusively and is going back to the awful unproductive ways of web development. People don't need Glimmer to use HTML. They already are using it, so there is no point in supporting that. If people were to add Glimmer to their project, it would be to use the Glimmer DSL, which provides leaps and bounds of productivity over HTML.

That said, there is merit to the idea of auto-converting plain HTML into Glimmer DSL code to enable web developers to reuse old web app HTML from Ruby by first converting into Glimmer DSL code and then adding Ruby logic to it.

I will keep this issue open till I have implemented an inverse HTML to Glimmer DSL converter in the future.

[AndyObtiva]

The implementation of an automatic HTML to Glimmer Converter has been handled in the newly released Glimmer DSL for XML 1.4.0, which is included in Glimmer DSL for Web 0.2.6 (thus the converter becomes available upon upgrading the glimmer-dsl-xml Ruby gem to version 1.4.0 in a project that is upgraded to glimmer-dsl-web 0.2.6).

An HTML to Glimmer Converter has been included in it that depends on the nokogiri Ruby gem: https://github.com/AndyObtiva/glimmer-dsl-xml?tab=readme-ov-file#html-to-glimmer-converter

So, I am closing this issue as it has been fully handled.

Here is the converter documentation from the Glimmer DSL for XML project readme:

HTML to Glimmer Converter

The Ruby gem includes a HTML to Glimmer converter (html_to_glimmer) to automatically convert legacy HTML code into Glimmer DSL syntax.

Prerequisite: the nokogiri Ruby gem. If not already installed, run gem install nokogiri before using html_to_glimmer.

Script:

bin/html_to_glimmer

Usage:

html_to_glimmer path_to_html_file

Example:

Suppose we have an HTML file called input.html:

<html style='max-height: 100%'>
  <body style="max-height: 100%; font: 'Times New Roman', Arial;">
    <h1 id="top-header" class="header" data-owner='John "Bonham" Doe'>Welcome</h1>
    <p>It is good to have <strong>you</strong> in our <strong><em>platform</em></strong>!</p>
    <form action="/owner" method="post">
      <input type="text" value="you" />
    </form>
  </body>
</html>

We can run this command:

html_to_glimmer input.html

Printout:

Converting from HTML syntax to Glimmer DSL Ruby syntax for input file: input.html
Converted output file: input.html.glimmer.rb

Output file (input.html.glimmer.rb) is a runnable Ruby file containing Glimmer DSL for XML & HTML syntax:

require 'glimmer-dsl-xml'

include Glimmer

html_document = xml {
  html(style: 'max-height: 100%') {
    body(style: "max-height: 100%; font: 'Times New Roman', Arial;") {
      h1(id: 'top-header', class: 'header', 'data-owner': 'John "Bonham" Doe') {
        "Welcome"
      }
      p {
        span {
          "It is good to have "
        }
        strong {
          "you"
        }
        span {
          " in our "
        }
        strong {
          em {
            "platform"
          }
        }
        span {
          "!"
        }
      }
      form(action: '/owner', method: 'post') {
        input(type: 'text', value: 'you')
      }
    }
  }
}

puts html_document.to_s