giosil / wux Goto Github PK

View Code? Open in Web Editor NEW

Wrapped User Experience - A Javascript library to build component based user interface.

License: Apache License 2.0

Batchfile 0.23% CSS 10.34% HTML 0.61% JavaScript 34.58% TypeScript 54.12% Shell 0.12%

wux's Introduction

WUX - Wrapped User Experience

A Javascript library to build component based user interface.

Build

git clone https://github.com/giosil/wux.git
npm install typescript -g
tsc --declaration --project ./ts/wux/tsconfig.json

Gulp

Gulp global installation

npm install gulp -g
npm install gulp-debug -g
npm install gulp-rename -g
npm install gulp-sourcemaps -g
npm install gulp-typescript -g
npm install gulp-uglify -g
npm install merge-stream -g
npm list -g --depth 0

Gulp local installation

npm link gulp
npm link gulp-debug
npm link gulp-rename
npm link gulp-sourcemaps
npm link gulp-typescript
npm link gulp-uglify
npm link merge-stream
npm link typescript
npm list --depth 0
gulp --verify

Gulp build

gulp

Example

class HelloWorld extends WUX.WComponent {
  protected render() {
    return '<h1>Hello world</h1>';
  }
}

<!DOCTYPE html>
<html lang="it">
<head>
  <title>WUX</title>
</head>
<body>
  <div id="view-root">

  <script src="js/jquery-3.6.1.min.js"></script>
  <script src="dist/wux.min.js"></script>
  <script src="out/hello.js"></script>
  <script type="text/javascript">
    WuxDOM.render(new HelloWorld(), 'view-root');
  </script>
</body>
</html>

Documentation

SVG Logo

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 82 72" xmlns="http://www.w3.org/2000/svg">
  <text style="fill: rgb(0, 0, 0); font-family: Consolas; font-size: 50px;" x="0" y="40">{&#x00B5;}</text>
  <text style="fill: rgb(0, 0, 0); font-family: Consolas; font-size: 14px;" x="7" y="65">micro-wux</text>
</svg>