0.2.2 • Published 3 years ago
mewjs v0.2.2
Now usable and stable
Todo before 1.0:
- ✓ A similar base to PUG
- ✓ Add a preset system
- ✓ Custom presets
- ✓ Adding variables
- Adding mixins
- Adding loops
- Adding conditions
- Adding includes
...And probably a lot of other things
Instalation
npm i mewjsUsage:
const Mew = require("./Mew")
Mew.Transform({
entry: "./tests", // Default: "./src"
output: "./public", // Default: "./dist"
variables: { // You can pass some variables here
hello: "Hello world"
}
})Exemple:
Now able to transform this
$myCss = "css/main.css"
doctype
html
head
viewport
charset utf-8
css {{myCss}}
title {{bonjour}}
body
$bonjour = "Hello world"
.container
.row.justify-contents-center
.col-6
h1 {{bonjour}}
div#maSuperImage
img#catImage https://unsplash.com/photos/_Kbydj4K7W8 Cat super image!
section#main.col-6
h2 Enjoy the new MEW preprocessor!
button:disabled My super button
p check here
a {{github}} Mew on Github
| if you wantTo this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/secondary.css">
<title>Bonjour le monde!</title>
</head>
<body>
<div class="container">
<div class="row justify-contents-center">
<div class="col-6">
<h1>Hello world</h1>
<div id="maSuperImage"><img id="catImage" src="https://unsplash.com/photos/_Kbydj4K7W8"
alt="Cat super image!"></div>
</div>
<section id="main" class="col-6">
<h2>Enjoy the new MEW preprocessor!</h2>
<button disabled>My super button</button>
<p>check here<a href="https://github.com/antharuu/Mew">Mew on Github</a> if you want</p>
</section>
</div>
</div>
</body>
</html>Beware the syntax may still have to change partially on some things.