{"id":18645925,"url":"https://github.com/giosil/micro-wux","last_synced_at":"2026-04-29T01:07:24.031Z","repository":{"id":116932264,"uuid":"561787377","full_name":"giosil/micro-wux","owner":"giosil","description":"Repository that examines how to integrate the WUX library in single-spa apps for front-end microservices development.","archived":false,"fork":false,"pushed_at":"2026-04-13T16:50:40.000Z","size":1043,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-13T18:30:10.059Z","etag":null,"topics":["javascript","javascript-framework","javascript-library","microfrontend","microfrontends","single-spa"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","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":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-11-04T13:46:28.000Z","updated_at":"2026-04-13T16:50:44.000Z","dependencies_parsed_at":"2023-11-27T16:26:35.471Z","dependency_job_id":"d305ea8e-abac-450a-90f8-3476cb7ed011","html_url":"https://github.com/giosil/micro-wux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/giosil/micro-wux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fmicro-wux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fmicro-wux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fmicro-wux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fmicro-wux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/giosil","download_url":"https://codeload.github.com/giosil/micro-wux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/giosil%2Fmicro-wux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32405937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-framework","javascript-library","microfrontend","microfrontends","single-spa"],"created_at":"2024-11-07T06:17:41.463Z","updated_at":"2026-04-29T01:07:24.026Z","avatar_url":"https://github.com/giosil.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# micro-WUX - Wrapped User Experience \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\n[WUX](https://github.com/giosil/wux) is a simple Javascript library to build component based user interface.\n\nHere we examine how to integrate the WUX library in [single-spa](https://single-spa.js.org/) apps for front-end microservices development through some examples:\n\n- `micro-wux-app`   - typescript application with WUX library\n- `single-spa-app`  - single-spa application\n- `single-spa-root` - single-spa root config \n\nThe single-spa root config has been created with `npx create-single-spa`.\n\n## Build micro-WUX\n\n- `git clone https://github.com/giosil/micro-wux.git`\n- `npm install typescript -g`\n- `tsc --declaration --project ./micro-wux-app/ts/wux/tsconfig.json`\n\n## Build and deploy micro-wux App as microfrontend single-spa\n\n- `cd micro-wux-app`\n- `.\\build.cmd`  or `./build.sh`  - compile micro-wux application\n- `.\\deploy.cmd` or `./deploy.sh` - generate `index.js` in `micro-wux-app/src` folder\n\n## Build and deploy micro-wux App as microfrontend single-spa with npm\n\n- `cd micro-wux-app`\n- `npm run build`  - compile micro-wux application\n- `npm run deploy` - copy `index.js` and `micro-wux-app.js` in `micro-wux-app/src` folder\n\n## Run\n\nStart **single-spa-app**:\n\n- `cd single-spa-app`\n- `npm install`\n- `npm start` - to serve single-spa applications at http://localhost:8080/index.js\n\nStart **single-spa-root**:\n\n- `cd single-spa-root`\n- `npm install`\n- `npm start` - to start single-spa root config at http://localhost:9000\n\n## Example of micro-WUX application\n\n```typescript\nnamespace APP {\n\n  export class Main extends WUX.WComponent {\n    protected render() {\n      return '\u003cdiv\u003eHello World.\u003c/div\u003e';\n    }\n  }\n\n}\n```\n\n## Run micro-WUX application standalone\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMicro WUX\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## Single-spa application\n\n```javascript\nimport APP, {WuxDOM, WUX} from \"./micro-wux-app.js\";\n\nexport function bootstrap(props) {\n  return Promise.resolve().then(() =\u003e {\n    // One-time initialization code goes here\n    console.log('[' + props.name + '] bootstrap...');\n  });\n}\nexport function mount(props) {\n  return Promise.resolve().then(() =\u003e {\n    // Do framework UI rendering here\n    console.log('[' + props.name + '] mount...');\n    WuxDOM.render(new APP.Main(), 'single-spa-application:' + props.name);\n  });\n}\nexport function unmount(props) {\n  return Promise.resolve().then(() =\u003e {\n    // Do framework UI unrendering here\n    console.log('[' + props.name + '] unmount...');\n    WuxDOM.unmount('single-spa-application:' + props.name);\n  });\n}\nexport function unload(props) {\n  return Promise.resolve().then(() =\u003e {\n    // Hot-reloading implementation goes here\n    console.log('[' + props.name + '] unload...');\n  });\n}\n```\n\n## The most minimal single-spa application\n\nStart **minimal-spa-app**:\n\n- `cd minimal-spa-app`\n- `npm install`\n- `npm start` - to serve single-spa applications at http://localhost:8080/index.js\n\nHere is the **public/index.js**:\n\n```javascript\nSystem.register([], function(_export, _context) {\n  // Inject the application here:\n  // var WuxDOM,WUX,APP;\n  // ...\n  return {\n    execute: function() {\n      _export({\n        bootstrap: (props) =\u003e {\n          return Promise.resolve().then(() =\u003e {\n            // One-time initialization code goes here\n            console.log('[' + props.name + '] bootstrap...');\n          });\n        },\n        mount: (props) =\u003e {\n          return Promise.resolve().then(() =\u003e {\n            // Do framework UI rendering here\n            console.log('[' + props.name + '] mount...');\n            // Use micro-wux application here:\n            // WuxDOM.render(new APP.Main(), 'single-spa-application:' + props.name);\n            document.getElementById(\"single-spa-application:\" + props.name).innerHTML = 'Hello world!';\n          });\n        },\n        unmount: (props) =\u003e {\n          return Promise.resolve().then(() =\u003e {\n            // Do framework UI unrendering here\n            console.log('[' + props.name + '] unmount...');\n            // Use micro-wux application here:\n            // WuxDOM.unmount('single-spa-application:' + props.name);\n            document.getElementById(\"single-spa-application:\" + props.name).innerHTML = '';\n          });\n        },\n        unload: (props) =\u003e {\n          return Promise.resolve().then(() =\u003e {\n            // Hot-reloading implementation goes here\n            console.log('[' + props.name + '] unload...');\n          });\n        }\n      });\n    }\n  }\n});\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=\"micro-wux-black.svg\" width=\"300\" height=\"300\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"micro-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%2Fmicro-wux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgiosil%2Fmicro-wux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgiosil%2Fmicro-wux/lists"}