{"id":20181759,"url":"https://github.com/nichoth/template-tonic-spa","last_synced_at":"2025-03-03T06:12:27.021Z","repository":{"id":170203102,"uuid":"645139479","full_name":"nichoth/template-tonic-spa","owner":"nichoth","description":"Tonic + client-side routing","archived":false,"fork":false,"pushed_at":"2024-12-06T04:25:41.000Z","size":1398,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-12-19T01:32:48.907Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/nichoth.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":"2023-05-25T02:29:05.000Z","updated_at":"2024-12-06T04:25:39.000Z","dependencies_parsed_at":"2023-11-07T05:43:26.039Z","dependency_job_id":"4eaa58b8-c37e-41e5-8e68-f2b929a09597","html_url":"https://github.com/nichoth/template-tonic-spa","commit_stats":null,"previous_names":["nichoth/template-tonic-spa"],"tags_count":0,"template":true,"template_full_name":"nichoth/template-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichoth%2Ftemplate-tonic-spa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichoth%2Ftemplate-tonic-spa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichoth%2Ftemplate-tonic-spa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nichoth%2Ftemplate-tonic-spa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nichoth","download_url":"https://codeload.github.com/nichoth/template-tonic-spa/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241616699,"owners_count":19991543,"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":[],"created_at":"2024-11-14T02:36:39.585Z","updated_at":"2025-03-03T06:12:27.003Z","avatar_url":"https://github.com/nichoth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# template tonic\nAn example of [tonic](https://tonicframework.dev/) + client-side routing.\n\n## use\n1. Use the *template* button in github. Or clone this then `rm -rf .git \u0026\u0026 git init`. Then `npm i \u0026\u0026 npm init`.\n\n2. Edit the source code in `src/index.js`.\n\n3. start a local server\n\n```bash\nnpm start\n```\n\n## see a demonstration\n[template-tonic-spa.netlify.app](https://template-tonic-spa.netlify.app/)\n\n## featuring\n* `preversion` npm hook -- use [@nichoth/check-max-deps](https://github.com/nichoth/check-max-deps) to validate the number of dependencies, and lint.\n* eslint via [standardx](https://www.npmjs.com/package/standardx) -- `npm run lint`\n* type checking via a [jsconfig](https://code.visualstudio.com/docs/languages/jsconfig) file\n\n## Start a local development server\n```bash\nnpm start\n```\n\n## build\nCreate a static website in `public`\n\n```bash\nnpm run build\n```\n\n## structure\nThis uses client side routing and the [single page app pattern](https://developer.mozilla.org/en-US/docs/Glossary/SPA). You would want to serve the same html for any route that is requested. \n\nWe are using application state in the root component\n```js\nthis.state = {\n    route: (location.pathname + location.search),\n    count: 0\n}\n```\n\nAnd passing state to child components as props:\n```js\nthis.html`\u003cmy-count id=\"count\" count=${this.state.count}\u003e\u003c/my-count\u003e`\n```\n\nThis means that the state persists between route changes.\n\n## vite\nThis uses [vite](https://vitejs.dev/) as a development server. This makes it easy to develop as a single page app.\n\n## ESM\nWe are depending on the browser resolving ES modules. The module `@nichoth/tonic` is marked as external in the vite config:\n\n```js\n{\n    build: {\n        rollupOptions: {\n            external: ['@nichoth/tonic']\n        }\n    }\n}\n```\n\nThis pairs with our html file:\n```html\n\u003cscript type=\"importmap\"\u003e\n    {\n        \"imports\": {\n            \"@nichoth/tonic\": \"./tonic.min.js\"\n        }\n    }\n\u003c/script\u003e\n```\n\n[See an article about import maps](https://www.honeybadger.io/blog/import-maps/) \n\n## test\n```sh\nnpm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichoth%2Ftemplate-tonic-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnichoth%2Ftemplate-tonic-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnichoth%2Ftemplate-tonic-spa/lists"}