{"id":18645935,"url":"https://github.com/giosil/wux","last_synced_at":"2025-04-11T12:31:42.086Z","repository":{"id":50315284,"uuid":"222505017","full_name":"giosil/wux","owner":"giosil","description":"Wrapped User Experience - A Javascript library to build component based user interface.","archived":false,"fork":false,"pushed_at":"2025-04-01T18:02:19.000Z","size":3206,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T19:24:51.085Z","etag":null,"topics":["javascript","javascript-applications","javascript-components","javascript-framework","javascript-frameworks","javascript-frontend","javascript-library","typescript","user-interface","web","web-ui","web-ui-framework","wux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/giosil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-18T17:26:28.000Z","updated_at":"2025-04-01T18:02:23.000Z","dependencies_parsed_at":"2025-02-28T09:47:11.086Z","dependency_job_id":"813444bd-6a96-4d1d-bba8-e00d5daa1597","html_url":"https://github.com/giosil/wux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fwux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fwux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fwux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fwux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giosil","download_url":"https://codeload.github.com/giosil/wux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248401970,"owners_count":21097328,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript-applications","javascript-components","javascript-framework","javascript-frameworks","javascript-frontend","javascript-library","typescript","user-interface","web","web-ui","web-ui-framework","wux"],"created_at":"2024-11-07T06:17:45.286Z","updated_at":"2025-04-11T12:31:42.070Z","avatar_url":"https://github.com/giosil.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WUX - Wrapped User Experience ver. 2 \u0026middot; [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript\u0026logoColor=white)\n\nA Javascript library to build component based user interface.\n\nThe project was born from a long experience in the development of portals in the public sector, particularly in the Italian market where the [Bootstrap Italia](https://italia.github.io/bootstrap-italia) theme is recommended by [AGID](https://www.agid.gov.it).\n\nThe main idea was to support the development of modern web applications without using more complicated frameworks.\n\nThe **WUX** library is inspired by [React](https://react.dev) for component lifecycle management, but is designed to be more \n- **lightweight**, \n- **flexible**, \n- **easy-to-use**.\n\nBy installing Typescript globally there are no additional direct dependencies. In other words, **you no longer have to deal with large node_modules directories**. :sunglasses:\n\n**JQuery** is supported, but NOT required.\n\nIt is also suitable for writing microfrontends with [single-spa](https://single-spa.js.org/) (see the [micro-wux](https://github.com/giosil/micro-wux) repository).\n\n[See a sample application.](samples/)\n\n## Build\n\n- `git clone https://github.com/giosil/wux.git`\n- `npm install typescript -g`\n- `npm install uglify-js -g`\n- `npm run build`\n\n## Examples\n\nThe simplest example of WUX.WComponent is as follows:\n\n```typescript\nnamespace APP {\n  export class Main extends WUX.WComponent {\n    protected render() {\n      return '\u003cdiv\u003eHello World!\u003c/div\u003e';\n    }\n  }\n}\n```\n\nThe **render()** method can also return an HTML element.\n\n```typescript\nnamespace APP {\n  export class Main extends WUX.WComponent {\n    protected render() {\n      let ele = document.createElement('div');\n      ele.textContent = 'Hello World!'\n      return ele;\n    }\n  }\n}\n```\n\nFinally, the **render()** method can also return an instance of WUX.WComponent.\n\n```typescript\nnamespace APP {\n  export class Main extends WUX.WComponent {\n    protected render() {\n      return new WUX.Wrapp('Hello World!', 'div');\n    }\n  }\n}\n```\n\nThis way you can develop a view by composing strings, elements and instances of WUX.WComponent.\n\nTo mount a view, simply write:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eWUX ver. 2.0.0\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"view-root\"\u003e\u003c/div\u003e\n\n    \u003cscript src=\"dist/wux.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"dist/app.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n        WuxDOM.render(new APP.Main(), 'view-root');\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Documentation\n\nThe methods that can be implemented in **WUX**, as in React, to control the behavior of components are listed below.\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003econstructor()\u003c/strong\u003e method is called when the component is first created. You use it to initialize the component's state and bind methods to the component's instance.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003erender()\u003c/strong\u003e method is responsible for generating the component's DOM representation based on its current props and state. It is called every time the component needs to be re-rendered, either because its props or state have changed, or because a parent component has been re-rendered.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003ecomponentDidMount()\u003c/strong\u003e method is called once the component has been mounted into the DOM. It is typically used to set up any necessary event listeners and perform other initialization tasks that require access to the browser's DOM API.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003eshouldComponentUpdate()\u003c/strong\u003e method is called before a component is updated. This method returns a boolean value that determines whether the component should update or not. If this method returns true, the component will update, and if it returns false, the component will not update.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003ecomponentWillUpdate()\u003c/strong\u003e method is called just before a component's update cycle starts. It allows you to perform any necessary actions before the component updates.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003ecomponentDidUpdate()\u003c/strong\u003e method is called after a component has been updated and re-rendered. It is useful for performing side effects or additional operations when the component's props or state have changed.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003ecomponentWillUnmount()\u003c/strong\u003e method is called just before the component is removed from the DOM. It allows you to perform any necessary cleanup or clearing any data structures that were set up during the mounting phase.\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\n![WUX Lifecycle](WUX.png)\n\nAdditional methods and properties are listed below.\n\n\u003ctable\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003eupdateState(nextState: S)\u003c/strong\u003e method is called when the \u003cstrong\u003estate\u003c/strong\u003e needs to be updated.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003eupdateProps(nextProps: P)\u003c/strong\u003e method is called when the \u003cstrong\u003eprops\u003c/strong\u003e needs to be updated.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003ebuildRoot, build, make\u003c/strong\u003e methods are called in **render** default implementation.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003eon, off, trigger\u003c/strong\u003e methods allow you to handle events provided by the DOM or custom events (the event name begins with an underscore).\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003estyle, classStyle, attributes\u003c/strong\u003e properties allow you to characterize the component in terms of presentation.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003evisible, enabled\u003c/strong\u003e properties allow you to respectively make the component visible or not and enable or disable it.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003efocus(), blur()\u003c/strong\u003e methods allow you to handle the focus on the component.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003eforceUpdate()\u003c/strong\u003e method forces the component to update.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003egetRoot()\u003c/strong\u003e method returns the root element of the component.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eThe \u003cstrong\u003egetContext()\u003c/strong\u003e method returns the element on which the component was mounted.\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\n## Wrapper like component\n\nIn WUX a component is effectively a wrapper.\n\nIn addition to the development model, WUX offers some ready-to-use wrappers that are frequently used in web applications.\n\nBelow are some of the more relevant wrappers.\n\n### WUX.WContainer\n\n**WContainer** allows you to implement the layout of a component composed of other components.\n\n```typescript\nthis.main = new WUX.WContainer();\nthis.main\n  .addRow()\n    .addCol('col-md-12')\n      .add(this.form)\n  .addRow()\n    .addCol('col-md-8')\n      .addGroup({\"classStyle\": \"form-row\"}, this.btnFind, this.btnReset)\n    .addCol('col-md-4', {a : 'right'})\n      .addGroup({\"classStyle\": \"form-row\"}, this.btnNew)\n  .addRow()\n    .addCol('col-md-12', 'padding-top: 1rem;')\n      .add(this.table);\n```\n\n### WUX.WForm\n\n**WForm** allows you to implement an HTML form.\n\n```typescript\nlet options: WUX.WEntity[] = [\n  {id: 'N', text: ''},\n  {id: 'M', text: 'Male'}, \n  {id: 'F', text: 'Female'}\n];\n\nthis.form = new WUX.WForm(this.subId('form'));\nthis.form\n  .addRow()\n    .addTextField('name', 'Name')\n    .addOptionsField('gender', 'Gender', options, {\"span\": 2})\n  .addRow()\n    .addDateField('date', 'Date')\n    .addTimeField('time', 'Time')\n    .addBooleanField('flag', 'Flag');\n\n// Validation\nthis.form.setMandatory('name', 'gender');\n\nlet returnLabels  = true;\nlet focusOn       = true;\nlet atLeastOne    = false;\nlet invalidFields = this.form.checkMandatory(returnLabels, focusOn, atLeastOne);\nif(invalidFields) {\n  alert('Check: ' + invalidFields);\n  return;\n}\n\n// Utilities\n\n// Clear all fields\nthis.form.clear();\n\n// Enable / Disable a field\nthis.form.setEnabled('date', false);\n\n// Set focus on a field\nthis.form.focusOn('name');\n\n// Find option by text\nthis.form.findOption('gender', 'Male');\n\n// Load options later\nthis.form.setOptions('gender', options);\n\n// Set nested value\nthis.form.setValueOf('name', booking, 'person.name');\n\n// Set single value\nthis.form.setValue('name', 'Jhon');\n\n// Get single value\nlet name = this.form.getValue('name');\n\n// Check blank form\nif(this.form.isBlank()) {\n  console.log('The form is blank.');\n}\n\n// Check blank field\nif(this.form.isBlank('name')) {\n  console.log('name is blank.');\n}\n```\n\n### WUX.WButton\n\n**WButton** allows you to implement an HTML button and handle related events.\n\n```typescript\nthis.btnFind = new WUX.WButton(\n  this.subId('btnFind'),       // Element id\n  'Search',                    // Caption\n  'fa-search',                 // Icon\n  'btn-icon btn btn-primary',  // Style class\n  'margin-right: 0.5rem;'      // Inline style\n);\nthis.btnFind.on('click', (e: PointerEvent) =\u003e {\n  // Perform operation\n});\n\nthis.btnReset = new WUX.WButton(\n  this.subId('btnReset'),      // Element id\n  'Cancel',                    // Caption\n  'fa-undo',                   // Icon\n  'btn-icon btn btn-secondary' // Style class\n);\nthis.btnReset.on('click', (e: PointerEvent) =\u003e {\n  this.form.clear();\n  this.form.focus();\n  this.table.setState([]);\n});\n```\n\n### WUX.WLink\n\n**WLink** allows you to implement an HTML link and handle related events.\n\n```typescript\nlet fid  = 5;\nlet link = new WUX.WLink(\n  this.subId('file-' + fid), // Element id\n  'Link to file',            // Caption\n  'fa-file',                 // Icon\n  'text-primary',            // Style class\n  'cursor:pointer;'          // Inline style\n);\nlink.lock = true; // Inhibits state change (Caption)\nlink.tooltip = 'Download file';\nlink.on('click', (e: MouseEvent) =\u003e {\n  let cid = WUX.getId(e.currentTarget);\n  let fid = WUtil.toNumber(WUX.lastSub(cid));\n  // Perform operation\n});\n```\n\n### WUX.WInput\n\n**WInput** allows you to implement an HTML input and handle related events.\n\n```typescript\nlet input = new WUX.WInput(this.subId('inp'), 'text', 20);\ninput.placeHolder = 'Search...';\ninput.readonly = false;\ninput.enabled = true;\ninput.autofocus = true;\ninput.onEnter((e: KeyboardEvent) =\u003e {\n  // Perform operation\n});\n```\n\n### WUX.WSelect\n\n**WSelect** allows you to implement an HTML select and handle related events.\n\n```typescript\nlet options: WUX.WEntity[] = [\n  {id: 'N', text: ''},\n  {id: 'M', text: 'Male'}, \n  {id: 'F', text: 'Female'}\n];\n\nlet select = new WUX.WSelect(this.subId('sel'));\nselect.setOptions(options);\nselect.on('statechange', (e: WUX.WEvent) =\u003e {\n  console.log('sel statechange', e);\n});\n\n// Find option by text\nlet optM = select.findOption('Male');\n```\n\n### WUX.WLabel\n\n**WLink** allows you to implement an HTML span or label (if \"for\" attribute setted).\n\n```typescript\nlet label = new WUX.WLabel(\n  this.subId('label'),    // Element id\n  'Text',                 // Text\n  'fa-circle-info',       // Icon\n  'text-primary',         // Style class\n  'margin-right: 0.5rem;' // Inline style\n);\n```\n\n### WUX.WTable\n\n**WTable** allows you to implement an HTML table.\n\n```typescript\n// Header captions\nlet h = ['Code', 'Name', 'View', 'Edit', 'Delete'];\n// Header symbols\nlet k = ['code', 'name', '_v',   '_m',   '_d'];\nthis.table = new WUX.WTable(this.subId('tapp'), h, k);\nthis.table.selectionMode = 'single';\nthis.table.div = 'table-responsive';\nthis.table.types = ['s', 's', 'w', 'w', 'w'];\nthis.table.sortable = [0, 1];\n// Click event\nthis.table.on('click', (e: PointerEvent) =\u003e {\n  let a = WUX.getAction(e, this);\n  if(!a || !a.ref) return;\n  if(a.name == 'sort') return;\n  let s = this.table.getState();\n  let x = WUX.WUtil.indexOf(s, 'id', a.ref);\n  if(x \u003c 0) return;\n  // Perform operation\n});\n// DoubleClick event\nthis.table.onDoubleClick((e: {element?: Element; rowElement?: Element; data?: any; rowIndex?: number; }) =\u003e {\n  // Perform operation\n});\n// Selection event\nthis.table.onSelectionChanged((e: {element?: Element, selectedRowsData?: any[]}) =\u003e {\n  let srs = this.table.getSelectedRows();     // array of selected indexes\n  let srd = this.table.getSelectedRowsData(); // array of selected data\n  // Perform operation\n});\n// RowPrepared event \nthis.table.onRowPrepared((e: {element?: Element, rowElement?: Element, data?: any, rowIndex?: number}) =\u003e {\n  let mark = e.data['mark'];\n  if (mark) {\n    WUX.setCss(e.rowElement, 'background-color: #ffffee');\n  }\n});\n\n// Let \"data\" be an array containing the records to be displayed in the table\nlet data = [];\nfor(let r of data) {\n  r[\"_v\"] = WUX.action('view',   r[\"id\"], 'fa-search');\n  r[\"_m\"] = WUX.action('edit',   r[\"id\"], 'fa-edit');\n  r[\"_d\"] = WUX.action('delete', r[\"id\"], 'fa-trash');\n}\n\nthis.table.setState(data);\n```\n\n### WUX.WTab\n\n**WTab** allows you to implement tabs and handle related events.\n\n```typescript\nthis.tab = new WUX.WTab(this.subId('tab'));\nthis.tab.contStyle = 'height:400px;padding-top:24px;';\nthis.tab\n  .addTab('Form', 'fa-edit')\n    .add(this.form);\nthis.tab\n  .addTab('Table', 'fa-list')\n    .addRow()\n      .addCol('col-10')\n        .add(this.table)\n      .addCol('col-2')\n        .add(this.btnAdd)\n        .addDiv(4)\n        .add(this.btnRem)\n        .addDiv(4)\n        .add(this.btnUp)\n        .add(this.btnDw);\n\nthis.tab.on('statechange', (e: WUX.WEvent) =\u003e {\n  let index = this.tab.getState();\n  // Perform operation\n});\n```\n\n### WUX.WPages\n\n**WPages** allows you to display one component at a time in a view. The component also allows you to display a Dialog like a page.\n\n```typescript\nthis.pages = new WUX.WPages();\nthis.pages\n  .before(compBefore)\n  .add(component0)\n  .add(component1)\n  .add(component2)\n  .add(component3);\n\n// Show dialog in same view\ndialog.addToPages(this.pages, false);\n\n// Show single page\nthis.pages.show(0);\n```\n\n### WUX.WDialog\n\n**WDialog** allows you to implement modal dialogs.\n\n```typescript\nexport interface Entity {\n  id:    number;\n  code?: string;\n  name?: string;\n}\n\nexport class DlgEntity extends WUX.WDialog\u003cstring, Entity\u003e {\n  form: WUX.WForm;\n\n  constructor(id: string) {\n    super(id, 'DlgEntity');\n    \n    this.title = 'Entity';\n\n    this.form = new WUX.WForm(this.subId('form'));\n    this.form.addRow();\n    this.form.addTextField('code', 'Code');\n    this.form.addRow();\n    this.form.addTextField('name', 'Name');\n    this.form.addInternalField('id');\n\n    this.form.setMandatory('code', 'name')\n    \n    this.body\n      .addRow()\n        .addCol('col-md-12')\n          .add(this.form);\n  }\n\n  override updateState(nextState: Entity): void {\n    this.state = nextState;\n    if(this.form) {\n      this.form.clear();\n      this.form.setState(this.state);\n    }\n  }\n\n  override getState(): Entity {\n    if(this.form) this.state = this.form.getState();\n    return this.state;\n  }\n\n  override onClickOk(): boolean {\n    if(this.props == 'new' || this.props == 'edit') {\n      let m = this.form.checkMandatory(true, true);\n      if(m) {\n        showWarning('Check: ' + m);\n        return false;\n      }\n    }\n    return true;\n  }\n\n  protected onShown() {\n    if(this.props == 'view') {\n      this.form.enabled = false;\n      this.updButtons('Close', '');\n    }\n    else {\n      this.form.enabled = true;\n      this.updButtons('Save');\n      if(this.props == 'edit') {\n        this.form.setReadOnly('code', true);\n        setTimeout(() =\u003e { this.form.focusOn('name'); });\n      }\n      else {\n        this.form.setReadOnly('code', false);\n        setTimeout(() =\u003e { this.form.focusOn('code'); });\n      }\n    }\n  }\n}\n\n// The Dialog is typically created in the constructor of component that manages it.\nconstructor() {\n  super();\n  this.dlg = new DlgEntity(this.subId('dlg'));\n  // this.dlg.fullscreen = true;\n  this.dlg.onHiddenModal((e: JQueryEventObject) =\u003e {\n    if (!this.dlg.ok) return;\n    // Perform operation\n  }\n}\n\n// To show dialog\nthis.dlg.setProps(props);\nthis.dlg.setState(state);\nthis.dlg.show(this);\n```\n\n### WUX.WUtil\n\n**WUtil** collects utilities for data manipulation.\n\n```typescript\nnamespace APP {\n\n  import WUtil = WUX.WUtil;\n  \n  export function samples() {\n    // es. http://localhost?name=Jhon\n    let pn = WUtil.getParam('name');\n    \n    let n  = WUtil.toNumber('1');\n    \n    let array = [{\"id\": 7, \"name\": 'Jhon'};];\n    let x = WUtil.indexOf(array, 'id', 7);\n    \n    let obj  = {\"name\": 'Jhon', \"age\": 20};\n    let name = WUtil.getString(obj, 'name', 'default');\n    let age  = WUtil.getNumber(obj, 'age',  0);\n    let flg  = WUtil.getBoolean(obj, 'flag');\n    \n    let city = WUtil.get(obj, 'person.address.city');\n    \n    let pg = 3.14159;\n    let p2 = WUtil.round2(pg);\n    \n    let t = 'a \u003e b';\n    let h = WUtil.toText(t); // a \u0026gt; b\n    \n    let d1 = new Date();\n    let d2 = new Date();\n    if (WUtil.isSameDate(d1, d2)) {\n      console.log('Same date');\n    }\n    \n    if (WUtil.is('number', obj, 'age')) {\n      console.log('age is number');\n    }\n    \n    if (WUtil.isEmpty(array)) {\n      console.log('empty');\n    }\n    \n    obj   = { \"person\": 1 };\n    array = [ {\"id\": 1, \"name\": \"John\"}, {\"id\": 2, \"name\": \"Jack\"} ];\n    WUtil.rplObj(obj, 'person', 'id', array);\n    // obj = { \"person\": {\"id\": 1, \"name\": \"John\"} }\n    \n    obj = { \"person\": {\"id\": 1, \"name\": \"John\"} }\n    WUtil.rplVal(obj, 'person', 'id');\n    // obj = { \"person\": 1 };\n    \n    let src = {\"c\": '1', \"n\": 'name', \"i\": '3', \"f\": false};\n    let dst = WUtil.map(\n      src, // source\n      {},  // dest\n      ['c',    'n',    'i',  'f'],    // source fields\n      ['code', 'name', 'id', 'flag'], // dest fields\n      ['s',    's',    'n',  'b'],    // dest types (optional)\n      ['NA',   '-',     0,   false]   // default values (optional)\n    );\n  }\n}\n```\n\n### WuxDOM\n\n**WuxDOM** allows you to render WUX components.\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n  // Render APP.Main component on view-root node\n  WuxDOM.render(new APP.Main(), 'view-root');\n  \n  // Unmount component and remove view-root node\n  WuxDOM.unmount('view-root');\n  \n  // Create view-root node on body\n  WuxDOM.create(document.body, 'div', 'view-root', 'container', 'margin: 2px');\n  \n  // Render APP.Main component on view-root node\n  let c = new APP.Main();\n  WuxDOM.render(c, 'view-root');\n  \n  // Replace component\n  WuxDOM.replace(c, new WUX.Wrapp('Hello World 2!', 'div'));\n\u003c/script\u003e\n```\n\n### WUX ###\n\nThe **WUX** namespace also contains some useful functions for creating your own components.\n\n```typescript\nlet i = WUX.newInstance(\"APP.Main\");\n// -\u003e new instance of WComponent APP.Main\n\nlet f = WUX.getComponent(\"w620572380-form\");\n// -\u003e WComponent instance with id=\"w620572380-form\"\n\nlet ls = WUX.lastSub(f);\n// -\u003e form\n\nlet id = WUX.getId(f);\n// -\u003e w620572380-form\n\nlet s = WUX.style({\"mt\": 4, \"pb\": 8, a: \"center\", c: \"#ffff00\", \"h\": 100, \"minh\": 100});\n// -\u003e 'margin-top:4px;padding-bottom:8px;text-align:center;color:#ffff00;height:100px;min-height:100px;'\n\nlet c = WUX.buildCss('text-center', {\"mt\": 4, \"pb\": 8});\n// -\u003e ' class=\"text-center\" style=\"margin-top:4px;padding-bottom:8px;\"'\n\nWUX.setCss(document.body, 'text-center', {\"mt\": 4, \"pb\": 8});\n// sets class and style of an element\n\nlet ac1 = WUX.addClass('text-center', 'text-red');\n// -\u003e 'text-center text-red'\n// see also WUX.addClassOf(e: Element, name: string) \n\nlet ac2 = WUX.addClass('text-center', 'text-center');\n// -\u003e 'text-center'\n\nlet rc = WUX.removeClass('text-center text-red', 'text-red');\n// -\u003e 'text-center'\n// see also WUX.removeClassOf(e: Element, name: string)\n\nlet tc1 = WUX.toggleClass('text-center', 'text-red');\n// -\u003e 'text-center text-red'\n// see also WUX.toggleClassOf(e: Element, name: string)\n\nlet tc2 = WUX.toggleClass('text-center text-red', 'text-red');\n// -\u003e 'text-center'\n\nlet b = WUX.build('div', '\u003cp\u003eBye\u003c/p\u003e', 'color: red', 'aria-label=\"bye\"', 'id-bye', 'text-center');\n// -\u003e '\u003cdiv id=\"id-bye\" class=\"text-center\" style=\"color: red\" aria-label=\"bye\"\u003e\u003cp\u003eBye\u003c/p\u003e\u003c/div\u003e'\n```\n\n## SVG Logo\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003csvg viewBox=\"0 0 82 72\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n  \u003ctext style=\"fill: rgb(0, 0, 0); font-family: Consolas; font-size: 50px;\" x=\"0\" y=\"40\"\u003e{\u0026#x00B5;}\u003c/text\u003e\n  \u003ctext style=\"fill: rgb(0, 0, 0); font-family: Consolas; font-size: 14px;\" x=\"7\" y=\"65\"\u003emicro-wux\u003c/text\u003e\n\u003c/svg\u003e\n```\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"wux-black.svg\" width=\"300\" height=\"300\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"wux-white.svg\" width=\"300\" height=\"300\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## License\n\n[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)\n\n## Contributors\n\n* [Giorgio Silvestris](https://github.com/giosil)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiosil%2Fwux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiosil%2Fwux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiosil%2Fwux/lists"}