{"_id":"@dharmikmidha/recipe-components","name":"@dharmikmidha/recipe-components","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.5":{"name":"@dharmikmidha/recipe-components","version":"0.1.5","description":"Reusable Stencil web components for Recipe Finder & Meal Planner application","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/recipe-components/recipe-components.esm.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs.js"},"./components":{"types":"./dist/components/index.d.ts","import":"./dist/components/index.js"},"./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"},"./loader":{"import":"./loader/index.js","require":"./loader/index.cjs.js","types":"./loader/index.d.ts"}},"repository":{"type":"git","url":"git+https://github.com/dharmik-midha/recipe-components.git"},"keywords":["stencil","web-components","recipe","meal-planner","components"],"author":{"name":"Dharmik Midha"},"publishConfig":{"access":"public"},"scripts":{"build":"stencil build","prepublishOnly":"npm run build","start":"stencil build --dev --watch --serve","test":"stencil-test --prod","test:watch":"stencil-test --prod --watch","generate":"stencil generate"},"devDependencies":{"@stencil/core":"4.44.2","@stencil/vitest":"^1.8.3","@types/node":"^22.13.5","@vitest/browser-playwright":"^4.0.0","playwright":"^1.52.0","vitest":"^4.0.0"},"license":"MIT","_id":"@dharmikmidha/recipe-components@0.1.5","gitHead":"cd864db8ed751692a5707538766b421bd1a53f56","bugs":{"url":"https://github.com/dharmik-midha/recipe-components/issues"},"homepage":"https://github.com/dharmik-midha/recipe-components#readme","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-FhBfPRY6C6t+oUZ6KGb1XZYThWick6JhShk6W80HFFu/b8+FDPk1vvp0IvZkGov7l7ZN+SrRtbi8C9n6A7m/8Q==","shasum":"5f44884fc2a8af65b75e8f6fbe940a6f397dc380","tarball":"https://registry.npmjs.org/@dharmikmidha/recipe-components/-/recipe-components-0.1.5.tgz","fileCount":76,"unpackedSize":354588,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC9zopUM2LGoX7YvkRNbvUIVdtPnUyEiuk2LiKjJosNOwIhAO8wlt9Fc0zmCHO0eS/NRd6soL1nV8RIZ7tZYXkD7mN7"}]},"_npmUser":{"name":"dharmikmidha","email":"dharmikmidha@gmail.com"},"directories":{},"maintainers":[{"name":"dharmikmidha","email":"dharmikmidha@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/recipe-components_0.1.5_1788090492995_0.5214059363801602"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-30T11:48:12.844Z","0.1.5":"2026-08-30T11:48:13.158Z","modified":"2026-08-30T11:48:13.411Z"},"maintainers":[{"name":"dharmikmidha","email":"dharmikmidha@gmail.com"}],"description":"Reusable Stencil web components for Recipe Finder & Meal Planner application","homepage":"https://github.com/dharmik-midha/recipe-components#readme","keywords":["stencil","web-components","recipe","meal-planner","components"],"repository":{"type":"git","url":"git+https://github.com/dharmik-midha/recipe-components.git"},"author":{"name":"Dharmik Midha"},"bugs":{"url":"https://github.com/dharmik-midha/recipe-components/issues"},"license":"MIT","readme":"# dharmik-recipe-components\n\nReusable Stencil web components for the Recipe Finder & Meal Planner app.\n\n## Components\n\n| Component | Props | Events | Slots |\n| --- | --- | --- | --- |\n| `<recipe-card>` | `recipe`, `isFavorite` | `recipeClick`, `favoriteClick` | `actions` |\n| `<recipe-grid>` | `columns` | — | default recipe-card content |\n| `<favorite-button>` | `recipeId`, `isFavorite` | `toggle` | custom label |\n| `<ingredient-list>` | `ingredients` | — | `ingredient` |\n| `<meal-calendar>` | `mealPlan`, `weekDays` | `dayClick`, `mealSlotClick`, `mealRemove` | `header`, `day-header-*`, `empty-meal` |\n\n`recipe`, `ingredients`, and `mealPlan` are JSON strings so the elements can be used consistently in any framework.\n\n## Installation\n\nAfter publishing the package:\n\n```bash\nnpm install dharmik-recipe-components\n```\n\nFor this monorepo's local development, the SvelteKit app uses `file:../recipe-components` until the first publish is complete.\n\n## SvelteKit usage\n\nRegister the custom elements once on the client by importing the self-registering\ncomponent bundles (SSR-safe when done in `onMount`):\n\n```svelte\n<script lang=\"ts\">\n  import { onMount } from 'svelte';\n\n  onMount(async () => {\n    await Promise.all([\n      import('dharmik-recipe-components/components/recipe-card'),\n      import('dharmik-recipe-components/components/recipe-grid'),\n      import('dharmik-recipe-components/components/meal-calendar'),\n      import('dharmik-recipe-components/components/ingredient-list'),\n      import('dharmik-recipe-components/components/favorite-button')\n    ]);\n  });\n</script>\n```\n\n> A lazy loader is also available (`import { defineCustomElements } from 'dharmik-recipe-components/loader'`),\n> but the direct `components/*` imports avoid dynamic-chunk fetching issues with a\n> locally linked package under Vite's dev server.\n\nThen pass JSON-safe data and listen to the component's native custom events:\n\n```svelte\n<recipe-card\n  recipe={JSON.stringify(recipe)}\n  is-favorite={isFavorite}\n  onrecipeClick={(event) => goto(`/recipe/${event.detail}`)}\n  onfavoriteClick={handleFavorite}\n/>\n\n<favorite-button\n  recipe-id={recipe.id}\n  is-favorite={isFavorite}\n  ontoggle={handleFavorite}\n/>\n```\n\n## Development\n\n```bash\nnpm install\nnpm run build\nnpm test\n```\n\n## Publishing\n\nThe package has semantic version `0.1.0` and public-publishable metadata. Publishing requires the package owner's npm authentication:\n\n```bash\nnpm login\nnpm publish --access public\n```\n\nBefore publishing, run `npm run build`; the generated `dist/` and `loader/` directories are included in the package.\n\n## License\n\nMIT\n","readmeFilename":"readme.md","_rev":"1-b5c83113321b5dd56a17d5609ce38a7d"}