{"_id":"svelte-fragment-component","_rev":"3-a27e678b5dbc3e80e8c84fe9ddd60584","name":"svelte-fragment-component","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"svelte-fragment-component","version":"1.0.0","description":"fragment component for svelte","source":"src/fragment.svelte","main":"./dist/cjs/fragment.js","exports":{"./package.json":"./package.json",".":{"import":"./dist/esm/fragment.js","require":"./dist/cjs/fragment.js","umd":"./dist/umd/fragment.js"},"./src/fragment.svelte":{"default":"./src/fragment.svelte"}},"module":"./dist/esm/fragment.js","unpkg":"./dist/umd/fragment.js","svelte":"src/fragment.svelte","sideEffects":false,"scripts":{"build":"rollup -c && echo '{\"type\":\"module\"}' > dist/esm/package.json","test":"jest","test:watch":"npm test -- --watch","test:coverage":"npm test -- --coverage"},"engines":{"node":">=10"},"peerDependencies":{"svelte":"3.x"},"repository":{"type":"git","url":"git+https://github.com/sastan/svelte-fragment-component.git"},"keywords":["svelte","jsx"],"author":{"name":"Sascha Tandel","email":"s.tandel@me.com"},"license":"MIT","bugs":{"url":"https://github.com/sastan/svelte-fragment-component/issues"},"homepage":"https://github.com/sastan/svelte-fragment-component#readme","devDependencies":{"@jest/globals":"^26.0.1","@rollup/plugin-commonjs":"^13.0.0","@rollup/plugin-node-resolve":"^8.0.1","@testing-library/jest-dom":"^5.7.0","@testing-library/svelte":"^3.0.0","jest":"^26.0.1","prettier":"^2.0.5","rollup":"^2.17.1","rollup-plugin-node-externals":"^2.2.0","rollup-plugin-svelte":"^5.2.3","rollup-plugin-terser":"^6.1.0","svelte":"^3.22.3","svelte-jester":"^1.0.6"},"gitHead":"9df82f7415b9fc6bea6deee2e1387f8e6a3cf023","_id":"svelte-fragment-component@1.0.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-3IGQUWVbMEXn/BKqnLB4ZGQU1tZFYj0GYehjeNPtR+gk5K21hyl2hXPj9HOmpkpqz3SpW2Ve/RThAjyPCH48IA==","shasum":"666af65e78d34d249045b4824ba75c361733f816","tarball":"https://registry.npmjs.org/svelte-fragment-component/-/svelte-fragment-component-1.0.0.tgz","fileCount":11,"unpackedSize":70176,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7ni6CRA9TVsSAnZWagAAaW8P/0OmibUBT9fOj9zvuuyn\n23WKk5F6URQM4rhPD777X8Q57BR/xa1t6m6U+N/tSHeNutXr4vtwjSixnPpm\nDTlLTW+MjofW7z1G9f+5DMu8whIK+qumkaalftENRuUmfFkRpPI2iA9LxpNy\nJbnfF2ZTU1G8MrieE2WmiS1gsJegSUSXybTpOnTT1fG5aO1JwxeWTRne0wsn\nx3nnuAjQJNJJZm7JbSMn5pQr87ZprOVLyEfLs8TmZh5PFk5hMmaxAhRojJ03\nxZJov0GhhChKOhrmwbXqyjaQfweNAVgLw+RqvqJKpttLbGkDhS8CPUs6KA18\nil1TG9WNbR+FCgcsTiW3yocDVpgEird8pIKg545mxzdNYQ8sxUvteHkd0zDH\n60lui2+cBM2toQRkVjRicu3Er0iI65PhVdeWxBHwDAp2f1AnhGe8ZuSlot76\nVblNa1mPsQSjD8N0J1BkluaZautsuhskEfGfrLHxjotpQfCjSTa/uYwMvsI8\n+jp2gPpKbOBtAzE5rUbpBIPcgFTz5mlRC3agmsxw3gohiPtbK1r0LQsIPoQc\nkU9O6z/t3DddN+EdiNbgNN/pxzLWBuv4VqowH5dEAuXNumkrS0lTzMF34QPM\nt5l/fiTX7iKry9gFfQxnG/mcCKP8hnoAGgK/6Odlu1oAZWPeM5C5EpJGYSX+\n+PBz\r\n=btYk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICO9EXdUwXWqPGLmim3gRsa18Uq7IQXdlNNUWJ9xKZMoAiEAjzb7pDd0G1Uy9A6LxWuvQV4HS32J8v1Azm/Xnq3jPhk="}]},"maintainers":[{"name":"sastan","email":"s.tandel@me.com"}],"_npmUser":{"name":"sastan","email":"s.tandel@me.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-fragment-component_1.0.0_1592686778277_0.994279536187213"},"_hasShrinkwrap":false},"1.1.0":{"name":"svelte-fragment-component","version":"1.1.0","description":"fragment component for svelte","source":"src/fragment.svelte","main":"./dist/cjs/fragment.js","exports":{"./package.json":"./package.json",".":{"import":"./dist/esm/fragment.js","require":"./dist/cjs/fragment.js","umd":"./dist/umd/fragment.js"},"./src/fragment.svelte":{"default":"./src/fragment.svelte"}},"module":"./dist/esm/fragment.js","unpkg":"./dist/umd/fragment.js","svelte":"src/fragment.svelte","sideEffects":false,"scripts":{"prebuild":"rimraf dist","build":"rollup -c && echo '{\"type\":\"module\"}' > dist/esm/package.json","lint":"xo","fix":"xo --fix && prettier --ignore-path .gitignore --write .","prepublishOnly":"npm run build","test":"jest","test:watch":"npm test -- --watch","test:coverage":"npm test -- --coverage"},"engines":{"node":">=10"},"peerDependencies":{"svelte":"3.x"},"repository":{"type":"git","url":"git+https://github.com/sastan/svelte-fragment-component.git"},"keywords":["svelte","jsx"],"author":{"name":"Sascha Tandel","email":"s.tandel@me.com"},"license":"MIT","bugs":{"url":"https://github.com/sastan/svelte-fragment-component/issues"},"homepage":"https://github.com/sastan/svelte-fragment-component#readme","devDependencies":{"@rollup/plugin-commonjs":"^13.0.0","@rollup/plugin-node-resolve":"^8.0.1","@testing-library/jest-dom":"^5.7.0","@testing-library/svelte":"^3.0.0","eslint":"^6.8.0","eslint-plugin-jest":"^23.13.1","eslint-plugin-jest-dom":"^2.1.0","eslint-plugin-testing-library":"^3.1.3","jest":"^26.0.1","jest-environment-jsdom-sixteen":"^1.0.3","prettier":"^2.0.5","rollup":"^2.17.1","rollup-plugin-node-externals":"^2.2.0","rollup-plugin-svelte":"^5.2.3","rollup-plugin-terser":"^6.1.0","svelte":"^3.22.3","svelte-jester":"^1.0.6","xo":"^0.30.0"},"gitHead":"4320e2690e1b61ed73338deeeab9ba88b5735a1f","_id":"svelte-fragment-component@1.1.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-zL9t0DcAc7bVFDpp8kr8v8H7qivxhVXHKJ/yhhH/BFyyKCNYZ5xdH1CMJsDC4CLiHeWvyMS0GnkMPBDHxnA+UA==","shasum":"22fec3bea4f2b34fb80d9a45cc0d6e6a1d0a435f","tarball":"https://registry.npmjs.org/svelte-fragment-component/-/svelte-fragment-component-1.1.0.tgz","fileCount":12,"unpackedSize":84629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8MCzCRA9TVsSAnZWagAAS+UQAJh6p1YonDMK5B9jSTWo\nnwX4S7ZbhL14nO6bqSqzKK+aez4ULFfzjXA2D61XQQgfbIvrjQFENee5suv7\nfVNhDoTP7Gmsxj3/j/cSuIORhEkZWjQW2nzlzQh+LUeYAooxONnoM5CUFK8e\n9MR5cnmHslCAOW2K2x2tkD2p22bGtUUSztM43DxmPaKjLoKLJOQstg+xeyMN\n+T97BvykODhQ8MyIwBIka9alP/NbtLEqbHxJCsqcU2w1d/BbqsWg+VSpEMYU\nNWz4LKXFlU5knue0+5LeNSSgLGV/hQUJF8cLmVlRlpxEis5Bpr/31ZlBQ202\nx2zBQXjGtsIK9Nr8nA60hZoTFwX1mF1D/sJpmUiOkvj75rUj0eQ8bx/Uhv1R\n5UCRY97bS7BCYPCUgBoM7t4xnPDP2vRuMvZs/q7J9Cw/qCHrVJqBC42gYHGo\ncq39aupUmwZsljEJ2lshZi++7nlfCGiH3+xVkA6efRGVrjtBV4yUbSvpaRPJ\nSjQJxRg952nEKu3mxrUus/m8Mx4WdJ1ztEUDn1ZYY/Yk/TBj0cgg4Kh5HvLV\nCLEv6odUPQNF8tj2wMdrfDNMA1fXZGikUiVKaS5wM7lXUf4Rq7Kf9fQ8J807\njQC5DEBYt/VgyCED+toTnHjiU+CfwN3QcDnd0SxDO1xlHIirTZuNCBf1Lwzl\n/+0W\r\n=81KF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3rwK68rLlU0eqgVmVDtHjOtAKglYGvLXBYLS1pxbnfAiB7i+s8UO6+4aRuxa1YQywh8G3NwkByHg7vkOyj8uaQWg=="}]},"maintainers":[{"name":"sastan","email":"s.tandel@me.com"}],"_npmUser":{"name":"sastan","email":"s.tandel@me.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-fragment-component_1.1.0_1592836274481_0.6316920637871328"},"_hasShrinkwrap":false},"1.2.0":{"name":"svelte-fragment-component","version":"1.2.0","description":"Svelte component that renders its children with lifecycle hooks to simplify testing","source":"src/fragment.svelte","main":"./dist/cjs/fragment.js","exports":{"./package.json":"./package.json",".":{"require":"./dist/cjs/fragment.js","umd":"./dist/umd/fragment.js","default":"./dist/esm/fragment.js"},"./src/fragment.svelte":{"default":"./src/fragment.svelte"}},"module":"./dist/esm/fragment.js","unpkg":"./dist/umd/fragment.js","jsdelivr":"./dist/umd/fragment.js","svelte":"./src/fragment.svelte","types":"./fragment.d.ts","sideEffects":false,"scripts":{"prebuild":"rimraf dist","build":"rollup -c && echo '{\"type\":\"module\"}' > dist/esm/package.json","lint":"xo","fix":"xo --fix && prettier --ignore-path .gitignore --write .","prepublishOnly":"npm run build","test":"jest","test:watch":"npm test -- --watch","test:coverage":"npm test -- --coverage"},"engines":{"node":">=10"},"peerDependencies":{"svelte":"3.x"},"repository":{"type":"git","url":"git+https://github.com/kenoxa/svelte-fragment-component.git"},"keywords":["svelte","testing","ui","unit","functional"],"author":{"name":"Sascha Tandel","email":"s.tandel@kenoxa.de"},"license":"MIT","bugs":{"url":"https://github.com/kenoxa/svelte-fragment-component/issues"},"homepage":"https://github.com/kenoxa/svelte-fragment-component#readme","devDependencies":{"@rollup/plugin-commonjs":"^13.0.0","@rollup/plugin-node-resolve":"^8.1.0","@testing-library/jest-dom":"^5.7.0","@testing-library/svelte":"^3.0.0","eslint":"^6.8.0","eslint-plugin-jest":"^23.17.1","eslint-plugin-jest-dom":"^2.1.0","eslint-plugin-testing-library":"^3.1.3","husky":"^4.2.5","jest":"^26.1.0","jest-environment-jsdom-sixteen":"^1.0.3","lint-staged":"^10.2.11","prettier":"^2.0.5","rollup":"^2.17.1","rollup-plugin-node-externals":"^2.2.0","rollup-plugin-svelte":"^5.2.3","rollup-plugin-terser":"^6.1.0","svelte":"^3.22.3","svelte-jester":"^1.0.6","xo":"^0.32.0"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.js":"xo --fix","*.{js,css,json,md,svelte,yml,yaml}":"prettier --ignore-path .gitignore --write"},"gitHead":"ce9d2d86e5dd72ab4870ed6d31f080bcc5105a2f","_id":"svelte-fragment-component@1.2.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-rRstmz2oAy2Y/7X57tRaIAJdMYsa2K/MOx/YJN/ETb7Bj9U3vjgioz27dMG1hl2vAKFTtQpxDhC31ur7ECwpog==","shasum":"36842c609a15c934b9d32a8bc99c460b0374d796","tarball":"https://registry.npmjs.org/svelte-fragment-component/-/svelte-fragment-component-1.2.0.tgz","fileCount":13,"unpackedSize":86847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDDI1CRA9TVsSAnZWagAAqnIP/i9GVz0VFT6wZLyVUoJq\n3zS874rYhtjmbExro+kYgdA5VJXZBee4FgnNUUoL9ap2lDgeKuH40EKqiBK6\njiCSIs1Ytoz/+c2C3aHdGL6POFGPWDrtnLU54fykoTtDGY9H6kfP1nRZAs9t\nXOZ4msxZqsRS1sT2IZ/F1pHuVlfNKR9zaPJVcIg9ijPXbeCKVHxGBWapV87b\nhWCz31N5kw0G4NtZyCnkt0GZgA5iPa5nl4GXUHMxHAYFpRCRahIC75YubJKd\nD9vJEeM6w9/f36aB1+Wx4AX+eJ+VFst3g8jZQZBPZikgsxmcc4RpUSl0vn3z\nmooNg6/P0W6meaIMA+4r+p1ZoLP96Nw2rUBlS1R+hCTSKedFs20uJtHIvts6\nwsQ/tgfu+Orf5l10SkATXRh6rri2Q4Bb78DnHC9VIzh7Wcn2ufsonlr7LR6s\n1fFh7jAvCbsx/SZEYxP/vvFUEq9NMX0oGuhieAHnZh9W4gu7YbmjCme2uJ7w\nwLWMjaqnqT1+5doS5qFmi4OLnmfoa8Z9FceJUAI7XOM8Lnj7xzEi7nGlWI2C\nHVnHtQkfHlYiefCMgBfb4zD7nUafy3fOa5E9EeiQSFrJNdhzkN6N5yYyxei5\nlPwsGYEBU/lLGxXNl7YxerkAB0vfHmsYpy884vZfOQj3m5e/Pss+esmTXAbc\nJ+6J\r\n=LWfo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiXltZB5W5IuyFr1gAGJve9sB0iwiIxdpUcdVxnvwChAiEA1utQIagM73ut7VqOJGuzHKjG9inUxaMdjnLEULyKLjA="}]},"maintainers":[{"name":"sastan","email":"s.tandel@me.com"}],"_npmUser":{"name":"sastan","email":"s.tandel@me.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-fragment-component_1.2.0_1594634805270_0.7858903557770203"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-20T20:59:38.277Z","1.0.0":"2020-06-20T20:59:38.386Z","modified":"2022-05-19T02:46:38.219Z","1.1.0":"2020-06-22T14:31:14.685Z","1.2.0":"2020-07-13T10:06:45.377Z"},"maintainers":[{"name":"sastan","email":"s.tandel@me.com"}],"description":"Svelte component that renders its children with lifecycle hooks to simplify testing","homepage":"https://github.com/kenoxa/svelte-fragment-component#readme","keywords":["svelte","testing","ui","unit","functional"],"repository":{"type":"git","url":"git+https://github.com/kenoxa/svelte-fragment-component.git"},"author":{"name":"Sascha Tandel","email":"s.tandel@kenoxa.de"},"bugs":{"url":"https://github.com/kenoxa/svelte-fragment-component/issues"},"license":"MIT","readme":"# svelte-fragment-component\n\n> A [svelte](https:/svelte.dev) component that renders its children with lifecycle hooks.\n\n[![License](https://badgen.net/npm/license/svelte-fragment-component)](https://github.com/kenoxa/svelte-fragment-component/blob/main/LICENSE)\n[![Latest Release](https://badgen.net/npm/v/svelte-fragment-component)](https://www.npmjs.com/package/svelte-fragment-component)\n[![View changelog](https://badgen.net/badge/%E2%80%8B/Explore%20Changelog/green?icon=awesome)](https://changelogs.xyz/svelte-fragment-component)\n\n[![CI](https://github.com/kenoxa/svelte-fragment-component/workflows/CI/badge.svg)](https://github.com/kenoxa/svelte-fragment-component/actions?query=branch%3Amain+workflow%3ACI)\n[![Coverage Status](https://badgen.net/coveralls/c/github/kenoxa/svelte-fragment-component/main)](https://coveralls.io/github/kenoxa/svelte-fragment-component?branch=main)\n[![PRs Welcome](https://badgen.net/badge/PRs/welcome/purple)](http://makeapullrequest.com)\n[![Conventional Commits](https://badgen.net/badge/Conventional%20Commits/1.0.0/cyan)](https://conventionalcommits.org)\n\n## What?\n\nDeclarative version of [Svelte](https://svelte.dev) component inspired by [reach-ui/component-component](https://reacttraining.com/reach-ui/component-component/).\n\n## Why?\n\nBecause sometimes (within tests) you want a lifecycle or some state but don't want to create a new component.\n\n_This is most likely only useful for libraries like [svelte-jsx](https://www.npmjs.com/package/svelte-jsx) or [svelte-htm](https://www.npmjs.com/package/svelte-htm)._\n\n## Installation\n\n```sh\nnpm install svelte-fragment-component\n```\n\nAnd then import it:\n\n```js\n// using es modules\nimport Fragment from 'svelte-fragment-component'\n\n// common.js\nconst Fragment = require('svelte-fragment-component')\n```\n\nOr use script tags and globals ([UNPKG](https://unpkg.com/svelte-fragment-component/) | [jsDelivr](https://cdn.jsdelivr.net/npm/svelte-fragment-component/)).\n\n```html\n<!-- UNPKG -->\n<script src=\"https://unpkg.com/svelte-fragment-component\"></script>\n\n<!-- jsDelivr -->\n<script src=\"https://cdn.jsdelivr.net/npm/svelte-fragment-component\"></script>\n\n<script>\n  <!-- And then grab it off the global like so: -->\n  const Fragment = svelteFragment\n</script>\n```\n\nHotlinking from unpkg: _(no build tool needed!)_\n\n```js\nimport Fragment from 'https://unpkg.com/svelte-fragment-component?module'\n```\n\n## Usage\n\n> The examples below are using [svelte-jsx](https://www.npmjs.com/package/svelte-jsx) for the jsx syntax support.\n\n```js\nimport Fragment from 'svelte-fragment-component'\n\nconst Lifecycle = (\n  <Fragment\n    onCreate={() => {}}\n    onMount={() => {}}\n    beforeUpdate={() => {}}\n    afterUpdate={() => {}}\n    onDestroy={() => {}}\n  >\n    some content\n  </Fragment>\n)\n```\n\nThis allows to simplify testing of [context API](https://svelte.dev/docs#setContext):\n\n```js\nimport Fragment from 'svelte-fragment-component'\nimport { setContext } from 'svelte'\n\nconst Lifecycle = (\n  <Fragment\n    onCreate={() => {\n      setContext('some context key', theValue)\n    }}\n  >\n    children can now access this context value\n  </Fragment>\n)\n\n// or using the context property\nconst Lifecycle = (\n  <Fragment context={{ 'some context key': theValue }}>\n    children can now access this context value\n  </Fragment>\n)\n```\n\n## API\n\nThe component renders only the default slot children.\n\n### Properties\n\n> All properties are optional.\n\n- `context`: an key-value object where each pair is passed to [setContext](https://svelte.dev/docs#setContext)\n\nExcept for `onCreate` these functions are passed to their corresponding svelte lifecycle method and have the same call signature `({ props }): void` where `props` are the `$$restProps`:\n\n- `onCreate`: called during component initialization\n- [onMount](https://svelte.dev/docs#onMount)\n- [beforeUpdate](https://svelte.dev/docs#beforeUpdate)\n- [afterUpdate](https://svelte.dev/docs#afterUpdate)\n- [onDestroy](https://svelte.dev/docs#onDestroy)\n\n## Related Projects\n\n- [svelte-jsx] - write svelte components using [jsx]\n- [svelte-htm] - [**H**yperscript **T**agged **M**arkup](https://www.npmjs.com/package/htm) for svelte; a [jsx]-like [syntax](https://www.npmjs.com/package/htm#syntax-like-jsx-but-also-lit) using [Tagged Templates]\n- [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro) - helps to test UI components in a user-centric way\n\n## Support\n\nThis project is free and open-source, so if you think this project can help you or anyone else, you may [star it on GitHub](https://github.com/kenoxa/svelte-fragment-component). Feel free to [open an issue](https://github.com/kenoxa/svelte-fragment-component/issues) if you have any idea, question, or you've found a bug.\n\n## Contribute\n\nThanks for being willing to contribute!\n\n**Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)\n\nWe are following the [Conventional Commits](https://www.conventionalcommits.org) convention.\n\n### Develop\n\n- `npm test`: Run test suite\n- `npm run build`: Generate bundles\n- `npm run lint`: Lints code\n\n## NPM Statistics\n\n[![NPM](https://nodei.co/npm/svelte-fragment-component.png)](https://nodei.co/npm/svelte-fragment-component/)\n\n## License\n\n`svelte-fragment-component` is open source software [licensed as MIT](https://github.com/kenoxa/svelte-fragment-component/blob/main/LICENSE).\n\n[tagged templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates\n[jsx]: https://reactjs.org/docs/introducing-jsx.html\n[svelte-jsx]: https://www.npmjs.com/package/svelte-jsx\n[svelte-hyperscript]: https://www.npmjs.com/package/svelte-hyperscript\n[svelte-htm]: https://www.npmjs.com/package/svelte-htm\n","readmeFilename":"README.md"}