segify is a compiler that helps you create interactive and super fast web pages. It compiles vanilla HTML code into vanilla JavaScript modules (which has no dependencies!)

<!-- component.html -->
<script>
  $.count = 0;
  setInterval(() => {
    $.count += 1;
  }, 1000);
</script>

<p>{{ $.count }}</p>

import Component from './component.html';

const target = document.body;
new Component({}).render(target);

try on repl!

Table of Contents

• Table of Contents
• Starting new project
  • Try on web.
  • Using vite
    • For Typescript
• Counter
• Compiler Apis
  • compile()
  • parse()
• License

Starting new project

npm i --save-dev segify

Try on web.

Visit repl page to try compiler on web.

Using vite

Experience the segify compiler using the simple vite plugin.

npm i --save-dev vite-plugin-segify segify

// vite.config.ts
import { defineConfig } from 'vite';
import { Segify } from 'vite-plugin-segify';

export default defineConfig({
  plugins: [
    Segify({
      // compile target
      extension: '.seg',
      // client assets
      asset: {
        raw: undefined,
        location: undefined,
      },
    }),
  ],
});

For Typescript

To prevent typescript errors, please add the code below to src/vite-env.d.ts.

// vite-env.d.ts
/// <reference types="vite/client" />
declare module '*.seg' {
  class Component {
    constructor(props: any);
    render(parent: HTMLElement);
  }
  export { Component, Component as default };
}

Counter

Below code is a counter implementation using segify.

<script lang="ts" type="text/typescript">
  $.counter = 0;

  function increase() {
    $.counter += 1;
  }

  function decrease() {
    $.counter -= 1;
  }
</script>

<div class="counter">
  <h1 class="counting">{{ $.counter }}</h1>
  <div>
    <button $onclick="increase">+ 1</button>
    <button $onclick="decrease">- 1</button>
  </div>
</div>

try on repl

In segify, $ is very special.
It works in such a way that when the value of $ is added/updated, elements inserted through {{}} are updated.

[!NOTE] This can be very inefficient for constants because when $ is updated, all inserted data is updated. In this case, add the @const prefix in front, like {{ @const my_data }}.

To see more examples of $, visit our website

Compiler Apis

compile()

segify.compile() compiles html and returns a javascript module

import { compile } from 'segify';

const compiled = await compile(code);

parse()

import { parse } from 'segify';

const { ast, data } = parse('<h1 id="hello">Hello World</h1>', {
  keepComment: true,
});

console.log(ast);

{
  "type": "fragment",
  "attributes": {},
  "children": [
    {
      "type": "element",
      "tag": "h1",
      "attributes": { "id": "hello" },
      "children": [
        {
          "type": "text",
          "attributes": {},
          "children": [],
          "text": "Hello World",
          "value": null,
          "position": { "start": -1, "end": -1 }
        }
      ],
      "text": null,
      "value": null,
      "position": { "start": 14, "end": 30 },
      "raw": "Hello World"
    }
  ],
  "text": null,
  "value": null,
  "position": { "start": -1, "end": -1 }
}

License

MIT