xemplate

<div align="center"> <p> <img width="80" src="https://gist.githubusercontent.com/ImportProgram/ebcfad1a28b7a74f63069cf498f00ee4/raw/b3d5aaadd3b680d36d6d3638f2594afc55e56153/xemplate.svg?sanitize=true"> </p> <h1>Xemplate</h1> A HTML template compon

Usage no npm install needed!

<script type="module">
  import xemplate from 'https://cdn.skypack.dev/xemplate';
</script>

README

Xemplate

A HTML template component compiler, dev server and more!


Example

<template id="Text">
    <p class="@class">$children</p>
</template>

<html>
    <body>
        <Text class="blue">Hello World<Text>
    </body>
<html>

Installation

To use Xemplate, we need to install it globally: npm install xemplate -g

Then to use xemplate we just use the xem command:

  • xem dev <files>
  • xem build <files>

Building (TypeScript)

To modify or add additional features, clone the repo https://github.com/ImportProgram/xemplate

Then install all dependencies npm install

And finally, to start the development server npm run dev

Build

To build the project (out within /build): npm run build


Features

Xemplate by default is a plugin supported CLI. It also forces cache on all HTML Abstract Syntax Tree's (AST) by default, and if any plugin supports it.

Currently Xemplate includes these plugins:

  • Components: Templating components
    • All template ID must start with a capital letter
    • You can not have multiple of the same name in a single file
<template id="Whatever">
    <p>$children</p>
    <p></p
></template>

<Whatever>Hello</Whatever>
  • Imports: Import components from other files
    • Importing changes the component syntax by added the as attribute, which specifies where that component came from.
    • Both attributes are required as shown below
<import src="file.html" as="Library" />

<Library-Whatever>Hello</Library-Whatever>
  • HMR: Hot Module Reloading
    • Web Server for development, with default port of 7500 (WebSocket at 7501)
    • Replaces HTML document on save
    • Supports multiple file editing

Contributing

Make a pull request, add/modify a feature, pretty simple


Team

ImportProgram
ImportProgram
github.com/ImportProgram

FAQ

  • Mulitline comments break the compiler!

    • Yeah this can happen, as currently html-parse-stringify2 doesn't support this, so a fork in the future may happen
  • The TypeScript sucks!

    • This is my first project using typescript, so its not perfect. If you want to help fix my inexperience please make a pull request!
  • Why are files being read sync, and not async?

    • Because of the order which parsing, running plugins and etc was being annoying. This doesn't affect performance.

License

License