{"id":13806873,"url":"https://github.com/abraham/nutmeg","last_synced_at":"2025-12-15T17:25:28.952Z","repository":{"id":38550243,"uuid":"101871966","full_name":"abraham/nutmeg","owner":"abraham","description":"Build, test, and publish vanilla Web Components with a little spice","archived":false,"fork":false,"pushed_at":"2024-06-16T14:28:29.000Z","size":4714,"stargazers_count":115,"open_issues_count":31,"forks_count":8,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-02T08:05:23.811Z","etag":null,"topics":["cli","custom-elements","hacktoberfest","javascript","karma","lit-element","lit-html","shadow-dom","typescript","web-components","webcomponents","webpack"],"latest_commit_sha":null,"homepage":"https://nutmeg.dev","language":"TypeScript","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/abraham.png","metadata":{"funding":{"github":"abraham"},"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-08-30T11:10:36.000Z","updated_at":"2024-10-21T09:40:06.000Z","dependencies_parsed_at":"2024-01-01T23:56:08.799Z","dependency_job_id":"dd28d941-99db-429d-bee2-f798253563df","html_url":"https://github.com/abraham/nutmeg","commit_stats":{"total_commits":1996,"total_committers":8,"mean_commits":249.5,"dds":0.2535070140280561,"last_synced_commit":"f9930e2e41ec43d6de9fb5f11c97688f60cad7bb"},"previous_names":["abraham/nutmeg-cli"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abraham%2Fnutmeg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abraham%2Fnutmeg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abraham%2Fnutmeg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abraham%2Fnutmeg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abraham","download_url":"https://codeload.github.com/abraham/nutmeg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008629,"owners_count":21032556,"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":["cli","custom-elements","hacktoberfest","javascript","karma","lit-element","lit-html","shadow-dom","typescript","web-components","webcomponents","webpack"],"created_at":"2024-08-04T01:01:17.366Z","updated_at":"2025-12-15T17:25:23.643Z","avatar_url":"https://github.com/abraham.png","language":"TypeScript","readme":"\u003cimg src=\"https://nutmeg.tools/img/icon-medium.png\" itemprop=\"image\" alt=\"Nutmeg icon\" width=\"0\"\u003e\n\u003cimg src=\"https://nutmeg.tools/img/logo-small.png\" alt=\"Nutmeg logo\"\u003e\n\nBuild, test, and publish vanilla Web Components with a little spice\n\n[![Version Status](https://img.shields.io/npm/v/@nutmeg/cli.svg?style=flat\u0026label=version\u0026colorB=4bc524)](https://npmjs.com/package/@nutmeg/cli)\n[![macOS Build Status](https://img.shields.io/circleci/project/github/abraham/nutmeg.svg?style=flat\u0026label=macos)](https://circleci.com/gh/abraham/nutmeg)\n[![Linux Build Status](https://img.shields.io/travis/abraham/nutmeg.svg?style=flat\u0026label=linux)](https://travis-ci.org/abraham/nutmeg)\n[![Windows Build Status](https://img.shields.io/appveyor/ci/abraham/nutmeg.svg?style=flat\u0026label=windows)](https://ci.appveyor.com/project/abraham/nutmeg)\n[![Dependency Status](https://david-dm.org/abraham/nutmeg.svg?path=packages/seed\u0026style=flat)](https://david-dm.org/abraham/nutmeg)\n\n🚧 _Nutmeg is in active development and it's APIs are still in flux._\n\n## 👌 Overview\n\nNutmeg is here to help you build, test, and publish Web Components in minutes.\n\nBy default you get the following:\n\n- Custom Elements v1\n- Shadow DOM v1\n- TypeScript\n- lit-html\n- Karma test runner with headless browser launchers\n- Git\n- MIT license\n- Web Component best practices\n\n## 🌱 Build\n\nGenerating a Nutmeg Web Component skeleton with [npm init](https://docs.npmjs.com/cli/init) has the API `\u003celement-name\u003e [property:type...]`.\n\n```bash\nnpm init @nutmeg hello-world name:string\n```\n\nThis will create a `hello-world` directory, stub out a base Web Component class `HelloWorld` that extends the Nutmeg `Seed` base class, and install the default dependencies. You can use either `fullName` or `full-name` for multi-word properties and `full-name` will be used for HTML attributes and `fullName` will be used in JavaScript.\n\n\u003c!-- ### 📌 Install\n\nOptionally you can install the full CLI.\n\n```bash\nnpm install --global @nutmeg/cli\n```\n\nThen generating a component is done with the `new` subcommand.\n\n```bash\nnutmeg new hello-world name:string\n``` --\u003e\n\n_Note: Yarn is not supported but may work._\n\n### 🏡 Properties\n\nProperties must be valid TypeScript types. For example `string`, `boolean`, `number`, `string[]`, `Element`.\n\n```bash\nnpm init @nutmeg grilled-cheese quantity:number pickles:boolean cheese:string[]\n```\n\nProperties are the public API of your Web Component and external code can set/get them.\n\n```javascript\nexport class GrilledCheese extends Seed {\n  @property() public bread: string;\n  @property() public cheese: string[];\n  @property() public pickles: boolean;\n  @property() public quantity: number;\n  ...\n}\n```\n\nThe `@property()` decorator provides some nice features out of the box. There are two kinds of properties.\n\n- Primitive: `boolean`, `string`, and `number`.\n- Complex: any types that are not primitive.\n\n#### ✍️ Automatic rendering\n\nAny properties decorated with `@property` will automatically render when set.\n\n#### 📟 Primitive properties are reflected to the DOM\n\n- **boolean**: `grilledCheese.pickle = true;` =\u003e `\u003cgrilled-cheese pickle\u003e\u003c/grilled-cheese\u003e`\n- **number**: `grilledCheese.quantity = 5;` =\u003e `\u003cgrilled-cheese quantity=\"5\"\u003e\u003c/grilled-cheese\u003e`\n- **string**: `grilledCheese.bread = 'sourdough';` =\u003e `\u003cgrilled-cheese bread=\"sourdough\"\u003e\u003c/grilled-cheese\u003e`\n\n#### 📱 One-time complex property loading from attributes\n\nOn instantiation of a Web Component a one-time loading and JSON parsing happens of complex properties. In the following example `cheese` has the type of `string[]`. When connected the component will have the attribute removed and the value set as a property after `JSON.parse`.\n\nThe following example:\n\n```html\n\u003cgrilled-cheese cheese=\"[\\\"sharp cheddar\\\"]\"\u003e\u003c/grilled-cheese\u003e\n```\n\nYields:\n\n```javascript\ngrilledCheese.cheese.includes('sharp cheddar') === true;\n```\n\n```html\n\u003cgrilled-cheese\u003e\u003c/grilled-cheese\u003e\n```\n\n#### `$` and `$$`\n\n`$` and `$$` are shortcuts provided for quickly selecting elements within the shadowRoot.\n\n- `$` is a shortcut for `this.shadowRoot.querySelector`.\n- `$$` is a shortcut for `this.shadowRoot.querySelectorAll`.\n\n### 🍽️ Serve\n\nYou can now serve the component for development on http://localhost:8080 by running:\n\n```bash\nnpm start\n```\n\nWith `start` running you can make edits to the component and see the changes take effect automatically without manually refreshing.\n\n## 🧪 Test\n\nRunning the tests from within `hello-world`.\n\n```bash\nnpm test\n```\n\n### 🔭 Continuous Integration\n\nComponents are generated with [AppVeyor](https://www.appveyor.com/), [CircleCI](https://circleci.com/), and [TravisCI](https://travis-ci.org/) pre-configured to run tests on Windows, macOS, and Linux respectively.\n\n## 🗞️ Publish\n\nPublishing to NPM is easy but make sure you are logged in first with `npm login`. Be sure to fill out `package.json` values like author and update the name in `readme.md` if you change it.\n\n```bash\nnpm publish\n```\n\n### 📇 Dependencies\n\nOnce published, it's recommended that you set up [Renovate](https://renovateapp.com/) to keep your dependencies current. Nutmeg has already setup a default renovate config for you, you just have to [install the free GitHub app](https://github.com/apps/renovate).\n\n## 😎 Best practices\n\nOut of the box many of the [Google Web Fundamentals Custom Element Best Practices](https://developers.google.com/web/fundamentals/web-components/best-practices#place-any-children-the-element-creates-into-its-shadow-root) are handled automatically.\n\n## 🔍 Examples\n\n- [HelloWorld](https://github.com/abraham/nutmeg-hello-world) built using `nutmeg new hello-world name:string`.\n- [TwitterStatus](https://github.com/abraham/twitter-status) for embedding tweets.\n\n## 👔 License\n\nNutmeg is released under an MIT license.\n","funding_links":["https://github.com/sponsors/abraham"],"categories":["Meta Frameworks"],"sub_categories":["Starter Kits"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabraham%2Fnutmeg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabraham%2Fnutmeg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabraham%2Fnutmeg/lists"}