markup's Introduction

Markup

Reactive HTML Templating System

Markup is a plug-and-play template system for those who need the bare minimal yet powerful way to build user interface. Its small size and ready-to-go nature makes it perfect for quick prototypes, UI components library, browser extensions, and side projects. But make no mistake, it has all the templating features for a big project and serves as a perfect start to build any UI framework or library.

Motivation

Most UI libraries need too much setup and require build with a steep learning curve. If you find a good templating system its either not powerful enough or requires extra things to make it work by itself.

This templating system is standalone system. You don't need anything else to start rendering and reacting to changes.

It requires no build, its tiny, and the API is literally 2 main things to learn, and you are ready to go. It is pretty much HTML and Javascript so the learning curve is extremely small.

Example

Below is a simple todo app and as you can see, its pretty much HTML and Javascript.

import { html, state, repeat } from '@beforesemicolon/markup'

interface TodoItem {
    name: string
    description: string
    id: string
}

const [todos, updateTodos] = state<Array<TodoItem>>([])

const createTodo = () => {
    const name = window.prompt('Enter todo name')
    const description = window.prompt('Enter todo description') ?? ''

    if (name) {
        updateTodos((prev) => [
            ...prev,
            { name, description, id: crypto.randomUUID() },
        ])
    }
}

const deleteTodo = (id) => {
    updateTodos((prev) => prev.filter((todo) => todo.id !== id))
}

const TodoItem = ({ name, description, id }: TodoItem) => html`
    <div class="todo-item">
        <h3>${name}</h3>
        <p>${description}</p>
        <button type="button" onclick="${() => deleteTodo(id)}">delete</button>
    </div>
`

const TodoApp = html`
    <h2>Todo App</h2>
    <button type="button" onclick="${createTodo}">add new</button>
    <div class="todo-list">${repeat(todos, TodoItem)}</div>
`

TodoApp.render(document.body)

More examples

This is a simple example of a button, but you can check:

Install

npm install @beforesemicolon/markup

yarn add @beforesemicolon/markup

Use directly in the Browser

This library requires no build or parsing. The CDN package is one digit killobyte in size, tiny!

<!doctype html>
<html lang="en">
    <head>
        <!-- Grab the latest version -->
        <script src="https://unpkg.com/@beforesemicolon/markup/dist/client.js"></script>

        <!-- Or a specific version -->
        <script src="https://unpkg.com/@beforesemicolon/[email protected]/dist/client.js"></script>
    </head>
</html>

Usage

<div id="app"></div>

<script>
    const { html } = BFS.MARKUP

    html`<h1>Hello World</h1>`.render(document.getElementById('app'))
</script>

markup's People

Contributors

Stargazers

markup's Issues

static html should still update its values

Bellow does NOT update on someValue change

when(condition, html`<p>${someValue}</p>`)

Bellow updates on someValue change

when(condition, () => html`<p>${someValue}</p>`)

Add mount and unmount lifecycles

**Is your feature request related to a problem?
Without components concept its hard to know when to initialize or cleanup things. The template already know about these stuff and can expose a way to tap into them to create rich templates.

Describe the solution you'd like

const temp = html`...`;

temp.onMount(() => {
  /* mount handler */
  return () => {/* unmount handler */}
})

temp.onUnmount(() => {
  /* unmount handler */
})

This in addition to the existing onUpdate

Describe alternatives you've considered
Let everyone set their own observer via mutation observer API.

Make 'attr.' prefix optional for some attributes

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
The attr. can be deprecated, and everything should work just fine. This should be backward compatible.

Additional context
Everything should follow the following patterns

# native html boolean attributes
name="CONDITION"

# style
style.NAME="VALUE | CONDITION"
style="CSS | CONDITION"

# class
class.NAME="VALUE | CONDITION"
class="NAMES | CONDITION"

# data
data.NAME="VALUE | CONDITION"
data-NAME="VALUE | CONDITION"

# everything else
attr.name="value"

The executables should only be triggered when the value is injected.

beforesemicolon / markup Goto Github PK

markup's Introduction

Markup

Motivation

Example

More examples

Install

Use directly in the Browser

Usage

markup's People

Contributors

Stargazers

markup's Issues

static html should still update its values

Add mount and unmount lifecycles

Make 'attr.' prefix optional for some attributes

Handle dynamic refs

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent