{"id":20170260,"url":"https://github.com/marcodpt/spa","last_synced_at":"2025-11-28T17:06:02.557Z","repository":{"id":111252773,"uuid":"380350190","full_name":"marcodpt/spa","owner":"marcodpt","description":"A very simple micro frontend single page app","archived":false,"fork":false,"pushed_at":"2022-06-15T14:38:45.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-03T04:15:57.078Z","etag":null,"topics":["element","microframework","microfrontend","microfrontends","router","spa"],"latest_commit_sha":null,"homepage":"https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fspa%2Fsamples.js","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcodpt.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}},"created_at":"2021-06-25T20:44:58.000Z","updated_at":"2022-05-11T18:52:27.000Z","dependencies_parsed_at":"2023-07-20T04:15:10.597Z","dependency_job_id":null,"html_url":"https://github.com/marcodpt/spa","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/marcodpt/spa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fspa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fspa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fspa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fspa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcodpt","download_url":"https://codeload.github.com/marcodpt/spa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcodpt%2Fspa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27318108,"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","status":"online","status_checked_at":"2025-11-28T02:00:06.623Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["element","microframework","microfrontend","microfrontends","router","spa"],"created_at":"2024-11-14T01:18:03.006Z","updated_at":"2025-11-28T17:06:02.538Z","avatar_url":"https://github.com/marcodpt.png","language":"JavaScript","readme":"# spa\n\u003e A\n[spa](https://en.wikipedia.org/wiki/Single-page_application)\n[micro frontend](https://martinfowler.com/articles/micro-frontends.html)\nelement based on [router](https://github.com/marcodpt/router)\n\n[Live demo](https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fspa%2Fsamples.js)\n\n## Usage\n```js\nimport spa from 'https://cdn.jsdelivr.net/gh/marcodpt/spa/index.js'\n\nwindow.updateRoute = () =\u003e {}\n\ndocument.body = spa({\n  routes: [\n    {\n      path: '/hi/:name',\n      view: ({name}) =\u003e `\u003ch1\u003eHello ${name}\u003c/h1\u003e`\n    }, {\n      path: '*',\n      view: () =\u003e `\u003cbutton onclick=\"updateRoute('/hi/John')\"\u003eSay hi!\u003c/button\u003e`\n    }\n  ],\n  update: callback =\u003e {window.updateRoute = callback}\n})\n```\n\n## Params\n - string `url`: the default url when component mounted (default: '')\n - string `root`: the root DOM element of the spa (default: 'div')\n - function `update(callback)`: a required function to register\n`callback`(`url`) every time `url` changes!\n - boolean `grow`: normal spinner or grow spinner?\n(default: false =\u003e normal spinner)\n - number `size`: rem size of the spinner (default: 5)\n - string `color`: one of the bootstrap5 text colors ex: primary (default: '')\n - array `routes`: array of object with the possible routes, properties:\n   - string `path`: an url with optional variables. ex: user/:id\n   - function `view(params, extra)`: returns `DOM` node or `HTML` string or a\n     promise for that.\n     - object `params`: `path` declared variables\n     - object `extra`:\n       - string `query`: associate query string\n       - function `update(listener(query))`: register an listener function in\n         case query string change, if no listener is registered query string\n         changes will refresh the route\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fspa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcodpt%2Fspa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcodpt%2Fspa/lists"}