GammmJS v1.0.0

A Simple JavaScript library for embedding Logic inside HTML

Introduction

GammmJS, authored by Angelo S. Octavio, bridges the gap between static HTML and dynamic JavaScript. It allows you to write loops, conditionals, and variables directly inside your HTML using a unique line-based parsing engine.

1. Installation & Mounting

To use GammmJS, you must initialize the GammmJS object and then manually load it using the GammmJSDom controller.

        const myApp = new GammmJS({
            template: document.getElementById('my-template').innerHTML,
            data: { name: 'User' },
            events: {
                greet: function(el, ev) { alert('Hello!'); }
            }
        });

        // Implementation
        GammmJSDom.load(document.getElementById('target'), myApp);

2. The Three Golden Rules

Because GammmJS uses a line-by-line parsing engine, you must follow these rules to avoid eval() errors:

Rule I: The New-Line Rule
Every HTML tag and every line of text must reside on its own line within a <#gammmjs block.
Rule II: The Single-Quote Only Rule
Never use double-quotes (") in your attributes or logic. Always use single-quotes (').
Rule III: Static Text Wrapping
Any text that is not a variable must be wrapped in {{' '}}.

3. Logic Blocks & Continuous Logic

You can mix JavaScript and HTML tags seamlessly. You do not need to re-open tags for nested logic like loops inside an else statement.

        <#gammmjs
            if (this.data.items.length === 0) {
                <p>
                    {{'Empty List'}}
                </p>
            } else {
                <ul>
                    for(let i=0; i < this.data.items.length; i++) {
                        <li>
                            {{this.data.items[i]}}
                        </li>
                    }
                </ul>
            }
        #>

4. Safe-Table Implementation

Standard <table> tags are often destroyed by browser auto-formatting when logic is injected. Use the gammm- prefix to ensure layout stability.

Gammm TagStandard Tag
<gammm-table><table>
<gammm-tr><tr>
<gammm-td><td>

5. API Reference

Properties

  • template: String containing your UI and logic.
  • data: The state object. Use this.state() to refresh the UI after changes.
  • events: Object containing handler functions.

Methods

  • this.state(): Re-renders the entire component.
  • GammmJSDom.load(el, instance): Mounts the component.

6. Troubleshooting

  • Empty/Object Undefined? Check if a tag and text are sharing the same line.
  • Syntax Error? Look for any double quotes (").
  • Table broken? Ensure you used the gammm-table tags.
🔼