Skip to content

Latest commit

 

History

History
332 lines (225 loc) · 5.88 KB

README.md

File metadata and controls

332 lines (225 loc) · 5.88 KB

Exility

The language is based on the CSS-like syntax with JS and XHTML inserts.
If you are familiar with Slim/Jade/Pug, then problems with understanding will not arise.

WARNING

The project is in active development and it can be collected only in one way:

  • git clone [email protected]:artifact-project/exility.git
  • cd exility
  • npm i
  • npm run dev
  • npm test — running all tests

Quick start

  1. todo

Features

  • Ultimate isomorphic render
  • Out of the box
    • CSS Modules and Hot reloading
    • Storybook for development ui-blocks (Wrapper over the original storybook)
    • Very easy work with forms(validation, masks and etc)
    • Localization
    • Testing, see jacket
  • Ready to use UI libraries:
  • Flexible and easy syntax :]
  • Several compilation modes: string, dom
  • Compiling into a pure function without dependencies
  • Generating a minimum code with preliminary optimizations
  • NativeDOM (no slow VirtualDOM)
  • The single ecosystem on TypeScript.
  • etc.

Modules

  • block — Basic "Block" for building UI (based on web components spec).
  • css — CSS in JS (minimally necessary functional).
  • dom — DOM Renderer (isomorphic)
  • form — Working with forms in all its glory.
  • jacket — Utility for testing your ui-blocks.
  • parser — Language parser.
  • stdlib — A set of standard libraries.
  • storybook — A special wrapper over the original storybook.
  • string — String Renderer
  • ts-transformer — TypeScript transformer for template precompilation

Syntax

Basic

  • .foo.bar -> <div class="foo bar"/>
  • h1.caption -> <h1 class="caption"/>
  • .welcome | Hi! -> <h2 class="welcome">Hi!</h2>
  • form[method="post"] -> <form method="post"/>

Attributes

  • input[type="text"][value="..."] — css-like enumerable
  • input[type="text" value="..."] — space separated

Interpolation

  • className: .is-${state}.${someClassName}
  • tag + className: ${tagName}.is-${state}
  • attributes: form[method=${type} action="api/${method}"]
  • text: h1 | Hi, ${username}!

Comments

// Bla-bla-bla
.text | ok

Multiline text

.text |>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean mattis at sapien elementum tempor.
Aliquam consequat egestas nisl quis pharetra.<|

HTML fragment

.main |# Click <a href="#next">me</a>. #|

Nesting and Adjacent sibling operator

> / Nesting
.panel
	.&-title > h1 | ${title}
	p.&-text | ${text}

          ⏬ ⏬ ⏬

<div class="panel">
	<div class="panel-title"><h1>...</h1></div>
	<p class="panel-text">...</p>
</div>
+ / Adjacent sibling operator
i.left + i.right

          ⏬ ⏬ ⏬

<i class="left"></i><i class="right"></i>

Parent reference

.panel
	.&-title > .&-close + | Wow!
	.&-content | Bla-bla-bal

          ⏬ ⏬ ⏬

<div class="panel">
	<div class="panel-title">
		<div class="panel-title-close"><div>
		Wow!
	</div>
	<p class="panel-content">Bla-bla-bal</p>
</div>

Parent reference and BEM modifiers

.button[class.&_${attrs.type}=${true}]
	| ${attrs.text}

          ⏬ ⏬ ⏬

<div class="button button_primary">
	OK
</div>

Custom elements

// Define
btn = [text, type]
	button.btn[class.&_${attrs.type}=${true}]
		| ${text}

// Usage
btn[text="Continue"]
btn[text="Send" type="primary"]

          ⏬ ⏬ ⏬

<button class="btn">Continue</div>
<button class="btn btn_primary">Send</div>

Custom elements + slots

Default slot
// Define
box = []
	.box > ::children // Call default

// Usage
box
	h2 | News
	p | ...

          ⏬ ⏬ ⏬

<div class="box">
	<h2>News</h2>
	<p>...</p>
</div>
Multi slots
// Define
panel = []
	.&__head > ::head // Call slot
	.&__body > ::body

// Usage
panel
	// Define slot
	::head > h2 | Wow!
	::body > p | Bla-bla-bla...

          ⏬ ⏬ ⏬

<div class="panel">
	<div class="panel__head"><h2>Wow!</h2></div>
	<div class="panel__body"><p>Bla-bla-bla...</p></div>
</div>

Space around the tag

  • a[<] — before
  • a[>] — after
  • a[<>] — at both sides
p > img[<] + img[<>] + img[>]

          ⏬ ⏬ ⏬

<p> <img/> <img/> <img/> </p>

Keywords

if/else

	if (js-expr)
 		| Yes
 	else if (!attrs.value)
 		| No
 	else
 		| Unknown

for

	// Basic
	ul > for (val in attrs.values) > li | ${val}

	// Key/Value
	ul > for ([key, val] in attrs.values) > li | ${key}: ${val}

	// Track By (best practices)
	ul > for (item in attrs.list) track by id
		li[data-id=${item.id}] | ${item.text}

const

	const value = attrs.x + attrs.y;

	b | ${value}

Development

  • npm run dev — the only way
  • npm test — run tests on all subprojects
  • npm run release -- [major|minor|patch] — publish the current version and put the tag