Share My Creation [Tool] MiniHtml2 Code Generator

GitHub: https://github.com/pyhoon/MiniHtml-Code-Generator

Latest updates:

1. There is now a text input to input the sub name on the top left. By default, it is set to "GeneratePage".
2. The Auto checkbox when checked changes the sub name to "<Auto>" and disable the text input.
3. This will produce the output sub name as "Generate" + "Tag's name" e.g GenerateButton
4. The String checkbox when checked will return the sub signature and return type as String. Uncheck will return as MiniHtml
5. There is a text input on the right of Generate button that reads the mapping of "tag name" to an existing "Create sub" in JSON object format or to simplified CreateTag("div") to Div.

Assuming you have a sub like this:

Sub Div As MiniHtml
    Return CreateTag("div")
End Sub

 

[aeric]

Now I just read the class created by Gemini.
It's simply amazing!

' Auto-format if the tag is complex
If node.Attributes.Size > 3 Then mOutput.Append(mIndent).Append(varName).Append(".FormatAttributes = True").Append(CRLF)

It is so smart to use FormatAttributes = True
I really impressed.

I was wrong. Gemini deserved to be crowned with gold medal.

Thinking back. Am I clever to create MiniHtml2?

 

[aeric]

Tips of using this tool

If the html is too big (a lot of lines) or you want to create a component sub of certain section:

1. Open the html file using a code editor that support collapsible section
2. Identify the section
3. Collapse the section
4. Copy this section
5. Paste to the textarea on the left of this tool
6. Click the Convert to B4X Code button
7. Copy the generated code in the textarea on the right
8. Paste to B4J IDE
9. Rename your sub
10. Repeat with other sections

Maybe on next version I will add a textbox to input the sub name

 

[aeric]

Updates:

1. Add JSON library dependency
2. Update UI layout.
3. Replace/rename UI controls and wiring:
   • add checkbox for string output,
   • rename Generate button,
   • sub-name and sub-map inputs,
   • and auto-name toggle.
4. Generator integration:
   • parse sub-map JSON from UI and set Generator.SubMapper;
   • set Generator.ReturnAsString from the checkbox.
5. MiniHtmlCodeGenerator:
   • add mSubMapper and mReturnAsString, setters,
   • use TAB for indenting,
   • implement auto SubName («<Auto>») logic,
   • emit method signature and return value conditionally (MiniHtml vs String),
   • and apply mapped creation calls
   • and consistent quoting for attributes/text/comments.
   • Overall enables generating either MiniHtml objects or literal code strings and custom tag-to-sub mappings.

 

[Mashiane]

My.... this is actually awesome. When I think about the React projects that I want to convert to SithasoDaisy5, this makes a lot of sense for me.

Continue changing the world @aeric

 

[aeric]

My.... this is actually awesome. When I think about the React projects that I want to convert to SithasoDaisy5, this makes a lot of sense for me.

Continue changing the world @aeric

Not sure it will be useful for you.

I just made a full conversion of a dashboard html file into a pure B4X code.
There are still some bugs like missing for Alpine JS e.g "@click" syntax and standalone attribute e.g "data-fullscreen-toggle" but they are simple fixes.

 

[Mashiane]

Not sure it will be useful for you.

I just made a full conversion of a dashboard html file into a pure B4X code.
There are still some bugs like missing for Alpine JS e.g "@click" syntax and standalone attribute e.g "data-fullscreen-toggle" but they are simple fixes.

View attachment 169688 View attachment 169689

This is extremely awesome @aeric, wow.

 

[aeric]

Since .cls() is a list attribute, we can add the classes multiple times.
We can then turn some of the classes on and off by using commented lines.
Instead of writing an one liner code, we can break it into multiple lines.
Here is an example:

Dim div18 As MiniHtml = CreateDiv.up(div17)
'div18.cls("d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4") ' one liner
div18.cls("d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center")
div18.cls("gap-3")
div18.cls("mb-4")

Commented B4X code will not generate the html output.

We can also use B4X conditional If-Else to turn the code on and off.

Dim BlnMoreGap As Boolean = True
If BlnMoreGap Then
    div18.cls("gap-3")
End If

MiniHtml library also remove duplicate classes and styles.

div18.cls("mb-4")
div18.cls("mb-4")

Will generate the class only once.

While .sty() is a map attribute, so the keys are unique.

'div95.sty("min-height: 400px; width: 100%;")
div95.sty("min-height: 400px")
div95.sty("min-height: 365px") ' final value
div95.sty("width: 100%;")
div95.sty("width: 50%;") ' final value

 

[Mashiane]

This looks cool. Please consider minimizing the learning curve as much as possible.

A simple example is someone who is coming from a pure javascript background. They already use 'attr' for attributes, and use 'css' for classes and then use 'style' for styles.

Yes, 'sty' makes sense for you and 'cls' for classes because its b4x code, can you be kind and add the compatibility methods then? I know you might say, get the github and fork it to meet your needs or not. Its a kind request either way.

Also, whilst I understand i might need to use javascript for this. Would it be sensible to bridge the javascript and add realtime functionality here, for example.

1. ToggleClass
2. RemoveClass
3. AddClass
4. Enable / Disable

etc.

#JustThoughts.

 

[aeric]

This looks cool. Please consider minimizing the learning curve as much as possible.

A simple example is someone who is coming from a pure javascript background. They already use 'attr' for attributes, and use 'css' for classes and then use 'style' for styles.

Yes, 'sty' makes sense for you and 'cls' for classes because its b4x code, can you be kind and add the compatibility methods then? I know you might say, get the github and fork it to meet your needs or not. Its a kind request either way.

Also, whilst I understand i might need to use javascript for this. Would it be sensible to bridge the javascript and add realtime functionality here, for example.

1. ToggleClass
2. RemoveClass
3. AddClass
4. Enable / Disable

etc.

#JustThoughts.

Hi @Mashiane,

1. ToggleClass <-- I don't have this yet but you can use combination of removeClass and addClass
2. RemoveClass <-- removeClass is already available
3. AddClass <-- addClass is already available
4. Enable / Disable <-- disabled is already available, "enabled" is just don't print "disabled"

addStyle and removeStyle are also already available.

Sure, adding more compatibility functions which were already existed in MiniHtml v0.90 is easy.
This tool has the classes from MiniHtml2 added by default in the Modules tab so developer can actually copy and paste any functions not yet available from the old library here if I haven't got time to add them.
Pull requests are always welcome and I will consider to merge it after review.

 

[aeric]

Or your request is to provide an option for developers to choose the longer name functions instead of the shorter name?
i.e the output should be
div2.addClass("xxx") instead of div2.cls("xxx")
div2.addStyle("xxx: yyy") instead of div2.sty("xxx: yyy")

By adding a checkbox in the UI?

 

[aeric]

Or your request is to provide an option for developers to choose the longer name functions instead of the shorter name?
i.e the output should be
div2.addClass("xxx") instead of div2.cls("xxx")
div2.addStyle("xxx: yyy") instead of div2.sty("xxx: yyy")

By adding a checkbox in the UI?

Latest push.

Add long-function-name mode to generator
1. Introduce a mUseLongFunctionName flag and setUseLongFunctionName setter to generate verbose method names when enabled.
2. When true, generated calls use addTo/addClass/addStyle and Attributes.Put (instead of up/cls/sty/attr)
3. Fixed script attribute values are now emitted as string literals.
4. Initialize mIndent, mReturnAsString and mUseLongFunctionName in Initialize
5. Adjust GenerateNodeCode to branch on the flag.
6. Enable the Generator.UseLongFunctionName mode in AppStart for testing.

Usage:

Generator.Initialize
Generator.UseLongFunctionName = True

 

[aeric]

Latest version: 0.50

Add Append "MH." before CreateTag mode.
This is useful when a code module name MH (MiniHtml Helper) is used.

 

[aeric]

version: 0.60

Update MiniHtmlParser to support HTMX or AlpineJS attribute keys e.g @click, :class