{"id":19090719,"url":"https://github.com/kodedninja/nanoconstruct","last_synced_at":"2025-04-30T10:23:05.724Z","repository":{"id":57155693,"uuid":"172590603","full_name":"kodedninja/nanoconstruct","owner":"kodedninja","description":"Tiny tool to test and develop nanocomponents","archived":false,"fork":false,"pushed_at":"2019-07-11T20:20:15.000Z","size":1572,"stargazers_count":13,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T00:41:25.379Z","etag":null,"topics":["choo","nanocomponent"],"latest_commit_sha":null,"homepage":"","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/kodedninja.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}},"created_at":"2019-02-25T21:48:55.000Z","updated_at":"2023-06-19T02:42:11.000Z","dependencies_parsed_at":"2022-08-26T09:50:17.225Z","dependency_job_id":null,"html_url":"https://github.com/kodedninja/nanoconstruct","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fnanoconstruct","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fnanoconstruct/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fnanoconstruct/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kodedninja%2Fnanoconstruct/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kodedninja","download_url":"https://codeload.github.com/kodedninja/nanoconstruct/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251503964,"owners_count":21599853,"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":["choo","nanocomponent"],"created_at":"2024-11-09T03:08:43.043Z","updated_at":"2025-04-30T10:23:05.698Z","avatar_url":"https://github.com/kodedninja.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nanoconstruct\n\u003ca href=\"https://nodejs.org/api/documentation.html#documentation_stability_index\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square\" alt=\"Stability\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/nanoconstruct\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/nanoconstruct.svg?style=flat-square\" alt=\"NPM version\"/\u003e\n\u003c/a\u003e\n\nTiny tool to test and develop [nanocomponents](https://github.com/choojs/nanocomponent).\n\n`nanoconstruct` provides a very simple wrapper around your components and serves them on a simple interface you can access with your browser. It's inspired by [Kit](https://github.com/c8r/kit) and uses [budo](https://github.com/mattdesl/budo) under the hood.\n\nIt includes [`choo-devtools`](https://github.com/choojs/choo-devtools), so you have access to the state and other Choo things, and [`tape`](https://github.com/substack/tape) for [testing](#tests).\n\n![Demo of nanoconstruct](demo.gif)\n\n## Installation\n```\nnpm i nanoconstruct\n```\n\n## Usage\nIf your component depends on a custom state or parameters, you can wrap it into a simple wrapper function. Otherwise, a neutral wrapper will be used around the component.\n\nA simple wrapper function looks like this:\n```javascript\nvar html = require('choo/html')\nvar Component = require('./components/component')\n\nvar c = new Component()\n\nmodule.exports = () =\u003e html`${c.render()}`\n```\nThen just point `nanoconstruct` to the file with:\n```\nnanoconstruct example.js\n```\n\n### Multiple Components\nIt's also possible to use your whole component library at once. Use the `--library` mode and point `nanoconstruct` to a directory of wrapper functions or components.\n\nHowever, if the structure of your components isn't that simple, export all the wrappers or components from a `.js` file and use this as input.\n\nLike this:\n```javascript\nmodule.exports = {\n  Title: require('./title-wrapper'),\n  Content: require('./component/content')\n}\n```\n\n## CLI\n```\nusage\n  nanoconstruct [opts] \u003centry\u003e\noptions\n  --help, -h              show this help text\n  --library, -l           use all the files from a library\n  --open, -o              open the page in the browser\n  --port, -p              server port\n  --version, -v           print version\nexamples\n  start server\n  nanoconstruct example.js\n\n  start server on port 3000 and open it\n  nanoconstruct example.js -p 3000 -o\n\n  start server with library mode\n  nanoconstruct components --library\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodedninja%2Fnanoconstruct","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkodedninja%2Fnanoconstruct","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkodedninja%2Fnanoconstruct/lists"}