HTML Template Builder

HTML Template Builder (Htb.js) is a 50-line HTML template engine that uses JavaScript syntax.

Htb.js was not invented. Htb.js was discovered at the intersection of HTML and JavaScript. Htb.js takes inspiration from Ruby's Jbuilder and JavaScript's json2html, and can be seen as a synthesis of the two, or a 'what if Jbuilder and json2html were combined'.

Examples

Getting started

const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    Htb('head', {}, () => [
      Htb('title', {}, 'Simple Example'),
      Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
      Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
    ]),
    Htb('body', {}, () => [
      Htb('h1', {}, () => 
        'Hello, John Doe!'
      ),
      Htb('p', {}, () => [
        Htb('b', {}, 'This is bold text. '),
        Htb('i', {}, 'This is italic text. '),
        Htb('u', {}, 'This is underlined text.')
      ])
    ])
  ]);
console.log(htb.html)

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      p {
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Hello, John Doe!</h1>
    <p><b>This is bold text.</b><i>This is italic text.</i><u>This is underlined text.</u></p>
  </body>
</html>

Conditionals & variables

const user = {
  isAdmin: false,
  isMember: true,
  name: 'John Doe'
};
const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    Htb('head', {}, () => [
      Htb('title', {}, 'Conditionals Example'),
      Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
      Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
    ]),
    Htb('body', {}, () => [
      Htb('h1', {}, 'User Profile'),
      user.isAdmin
        ? Htb('p', {}, `Welcome, Admin ${user.name}!`)
        : user.isMember
          ? Htb('p', {}, `Welcome, Member ${user.name}!`)
          : Htb('p', {}, 'Welcome, Guest!')
    ])
  ]);
console.log(htb.html)

<!DOCTYPE html>
<html>
  <head>
    <title>Conditionals Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      p {
          font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>User Profile</h1>
    <p>Welcome, Member John Doe!</p>
  </body>
</html>

Nested Loops

const categories = [
  { name: 'Fruits', items: ['Apple', 'Banana', 'Orange'] },
  { name: 'Vegetables', items: ['Carrot', 'Broccoli', 'Spinach'] }
];
const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    Htb('head', {}, () => [
      Htb('title', {}, 'Nested Loops Example'),
      Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
      Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
    ]),
    Htb('body', {}, () => {
      const elements = [Htb('h1', {}, 'Categories and Items')];
      for (const category of categories) {
        elements.push(Htb('h2', {}, category.name)
          ('ul', {}, () =>
            category.items.map(item =>
              Htb('li', {}, item)
            )
          ));
      }
      return elements;
    })
  ]);
console.log(htb.html)

<!DOCTYPE html>
<html>
  <head>
    <title>Nested Loops Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      p {
          font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Categories and Items</h1>
    <h2>Fruits</h2>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
    <h2>Vegetables</h2>
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </body>
</html>

Partial Templates

const headerTemplate = Htb
  ('header', {}, () => [
    Htb('h1', {}, 'My Website'),
    Htb('nav', {}, () => [
      Htb('a', { href: '/' }, 'Home'),
      Htb('a', { href: '/about' }, 'About'),
      Htb('a', { href: '/contact' }, 'Contact')
    ])
  ]);
const footerTemplate = Htb
  ('footer', {}, () => [
    Htb('p', {}, 'Made with <3 and coffee.')
  ]);
const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    Htb('head', {}, () => [
      Htb('title', {}, 'Partial Templates Example'),
      Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
      Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
    ]),
    Htb('body', {}, () => [
      headerTemplate,
      Htb('main', {}, () => [
        Htb('h2', {}, 'Page Content'),
        Htb('p', {}, 'Welcome to the page!')
      ]),
      footerTemplate
    ])
  ]);
console.log(htb.html)

<!DOCTYPE html>
<html>
  <head>
    <title>Partial Templates Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      p {
          font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav><a href="/">Home</a><a href="/about">About</a><a href="/contact">Contact</a></nav>
    </header>
    <main>
      <h2>Page Content</h2>
      <p>Welcome to the page!</p>
    </main>
    <footer>
      <p>Made with &lt;3 and coffee.</p>
    </footer>
  </body>
</html>

Numbers

const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    Htb('head', {}, () => [
      Htb('title', {}, 'Arithmetic Operations Example'),
      Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
      Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
    ]),
    Htb('body', {}, () => [
      Htb('h1', {}, 'Basic Arithmetic'),
      Htb('p', {}, [
        'Sum of ', Htb('span', {}, '10'), ' and ', Htb('span', {}, '5'), ': ',
        Htb('span', {}, `${10 + 5}`) // a number
      ]),
      Htb('p', {}, [
        'Product of ', Htb('span', {}, '7'), ' and ', Htb('span', {}, '3'), ': ',
        Htb('span', {}, `${7 * 3}`) // a number
      ]),
      Htb('p', {}, [
        'Division of ', Htb('span', {}, '20'), ' by ', Htb('span', {}, '4'), ': ',
        Htb('span', {}, `${20 / 4}`) // a number
      ])
    ])
  ]);
console.log(htb.html)

<!DOCTYPE html>
<html>
  <head>
    <title>Arithmetic Operations Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      p {
          font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Basic Arithmetic</h1>
    <p>Sum of <span>10</span> and <span>5</span>: <span>15</span></p>
    <p>Product of <span>7</span> and <span>3</span>: <span>21</span></p>
    <p>Division of <span>20</span> by <span>4</span>: <span>5</span></p>
  </body>
</html>

FAQ

1. Is this JSX?

JSX is a syntactic extension of JavaScript. Htb.js is closer to React.createElement(), although without the React part.

2. Is JSX to Htb.js compiler planned?

No.

3. Should I use this in production?

Fortune favours the brave.

4. How to use this in my project?

It's best to copy paste the htb.ts file into your repo. Although an NPM package is also available.

5. Is there a way to generate Htb.js code from HTML?

Use this LLM prompt: llm-prompt.txt

Dynamically loading Webpack assets using loader plugin

I would like a functionality to import static assets using webpack like
simple-pug-loader - Webpack Plugin

Found this Blog post - Adding asset files to webpack for use-case.
See under heading: Adding asset files directly to HTML file where the author uses 'pug', a similar html template library to yours.

I'm currently using your library like so:

// index.htb.js
const Htb = require("htb");

module.exports = (title, withBundleAnalyzer = false) => ((
  Htb('!DOCTYPE', { html: true })
  ('html', {}, () => [
    Htb('head', {}, () => [
      Htb('meta', { charset: 'utf-8' }),
      Htb('link', { rel: "icon", href: "/favicon.ico" }),
      Htb('meta', { 
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
       }),
      Htb('title', {}, title),
    ]),
    Htb('body', {}, () => [
      Htb('noscript', {}, "You need to enable JavaScript to run this app."),
      withBundleAnalyzer ? 
          Htb('a', {href: '/report.html' ,style: "background: pink;" }, 'Bundle Analyzer') 
        :  Htb('a'),
      Htb('div', {id: 'app'}, ''),
    ]),
    Htb('a', {href: '/bundle.js.LICENSE.txt'}, 'LICENSES')
  ])
).html);

Where, unless I'm using CopyWebpackPlugin there is no guarantee that bundle.js.LICENSES.txt would exists, furthermore, I'm looking to replace a static bundle.js.LICENSE.txt to using the dynamically created one from Webpack, which could maybe be passed as an asset from webpack config inte index.htb.js, that might be the solution I'm looking at currently.

NOTE: The current usage of LICENSE.txt as a pure link is just temporary, I could solve this particular issue by creating another htb.js template for 'license.html', but the problem remains in dynamically loading the content or getting the src of LICENSE.txt in the htb template.

Also, for conditionals, how would I add an empty Htb() element as a fallback?

Aside from that, my immediate usage of htb has been positive; I previously used this snippet in my webpack config:

      new HtmlWebpackPlugin({
        templateContent: ({ htmlWebpackPlugin }) =>
          '<!DOCTYPE html><html><head><meta charset="utf-8"><title>' +
          htmlWebpackPlugin.options.title +
          '</title></head><body>' +
            '<a href="/report.html" style="background: pink;">Bundle Analyzer</a>' +
          '<div id="app"></div>' +
          '</body></html>',
        filename: "index.html",
      }),

For now though, I'm still using the HtmlWebpackPlugin:

const createIndexHTML = require("./index.htb.js");

...

      new HtmlWebpackPlugin({
        templateContent: ({ htmlWebpackPlugin }) => createIndexHTML(htmlWebpackPlugin.options.title, true),
        filename: "index.html"
     })

But I would like to see a more streamlined integration.

noway / htb Goto Github PK

htb's Introduction

HTML Template Builder

Examples

Getting started

Conditionals & variables

Nested Loops

Partial Templates

Numbers

FAQ

1. Is this JSX?

2. Is JSX to Htb.js compiler planned?

3. Should I use this in production?

4. How to use this in my project?

5. Is there a way to generate Htb.js code from HTML?

htb's People

Contributors

Stargazers

Watchers

htb's Issues

Recommend Projects

Recommend Topics

Recommend Org