segify
v0.0.0-beta.17
Published
A lightweight, compiler that transforms vanilla HTML into interactive and dependency-free JavaScript modules.
Downloads
352
Readme
Segify
A lightweight, compiler that transforms vanilla HTML into interactive and dependency-free JavaScript modules.
Features
- ⚡ Super fast compilation
- 🎯 Simple syntax with reactive
$
state - 📦 Works with Vite out of the box
Quick Start
Installation
npm i --save-dev segify
Or try it out in the REPL.
Basic Example
<!-- counter.html -->
<script>
$.count = 0;
function increment() {
$.count += 1;
}
</script>
<div>
<p>Count: {{ $.count }}</p>
<button $onclick="increment">Add</button>
</div>
import Counter from './counter.html';
const app = new Counter({});
app.render(document.body);
Documentation
State Management
Segify uses the special $
object for reactive state management:
<script>
// Reactive state
$.user = {
name: 'John',
age: 25,
};
// Updates will trigger re-renders
function updateName(newName) {
$.user.name = newName;
}
</script>
<div>
<h2>{{ $.user.name }}</h2>
<p>Age: {{ $.user.age }}</p>
</div>
Component Props
Components can receive props from their parent:
<!-- UserCard.html -->
<div class="user-card">
<h3>{{ $.name }}</h3>
<p>{{ $.role }}</p>
<div class="content">{{ $.children }}</div>
</div>
<!-- App.html -->
<script>
import UserCard from './UserCard.seg';
</script>
<UserCard name="Alice" role="Developer">
<p>Custom content goes here</p>
</UserCard>
Performance Optimization
Use @const
for non-reactive content:
<script>
$.staticData = "This won't change";
$.dynamicData = 'This will update';
</script>
<!-- Won't trigger re-renders -->
<h1>{{ @const $.staticData }}</h1>
<!-- Will update when $.dynamicData changes -->
<p>{{ $.dynamicData }}</p>
API Reference
Compiler API
compile(source: string, options?: CompileOptions): Promise<string>
Compiles HTML source into a JavaScript module.
import { compile } from 'segify';
const js = await compile(`
<script>
$.message = 'Hello';
</script>
<h1>{{ $.message }}</h1>
`);
Options:
keepComments?: boolean
- Preserve HTML commentsfilename?: string
- Source filename for better error messagessourceMap?: boolean
- Generate source maps
parse(source: string, options?: ParseOptions)
Parses HTML into an AST (Abstract Syntax Tree).
import { parse } from 'segify';
const { ast, data } = parse('<div>Hello</div>');
Vite Plugin
// vite.config.ts
import { defineConfig } from 'vite';
import { Segify } from 'vite-plugin-segify';
export default defineConfig({
plugins: [
Segify({
extension: '.seg',
asset: {
raw: undefined,
location: undefined,
},
}),
],
});
TypeScript Support
Add type definitions for your components:
// vite-env.d.ts
declare module '*.seg' {
class Component {
constructor(props: Record<string, any>);
render(parent: HTMLElement): void;
}
export { Component, Component as default };
}
License
MIT