{"_id":"@elo7/fastify-svelte-partial-hydration","_rev":"3-ecbc744a62d5aaeb4c6cc983ddd9b128","name":"@elo7/fastify-svelte-partial-hydration","dist-tags":{"latest":"2.1.0"},"versions":{"1.0.0":{"name":"@elo7/fastify-svelte-partial-hydration","version":"1.0.0","description":"Fastify plugin for using Svelte with partial hydration support","repository":{"type":"git","url":"git+https://github.com/elo7/fastify-svelte-partial-hydration.git"},"main":"index.js","author":{"name":"Elo7"},"license":"MIT","gitHead":"c7157cb4778855da3c02bb400afca513d65da95b","bugs":{"url":"https://github.com/elo7/fastify-svelte-partial-hydration/issues"},"homepage":"https://github.com/elo7/fastify-svelte-partial-hydration#readme","_id":"@elo7/fastify-svelte-partial-hydration@1.0.0","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-AXZ4wxskZqKml3Zje3lpjvWb7o7xFxbMaLCARq+OvKC+xgwHwBo1Pi/IBbz/K6GKlzdzPzd/cy0oEm/WeaRXmQ==","shasum":"94c461e729dce864d05dc5d9f0fbbeb0d677b3e7","tarball":"https://registry.npmjs.org/@elo7/fastify-svelte-partial-hydration/-/fastify-svelte-partial-hydration-1.0.0.tgz","fileCount":6,"unpackedSize":6575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDBnfCRA9TVsSAnZWagAAIu4P/AzkfDDIG9gyd9YeLP0J\nse4UZWXac2UO3LUnShWpVzyeQnIEqe8YaXaFURFjNQ7D1aych7wGSW/7m3AI\nj9FMnYpkV4rqCsZHo80MKA38i1akhT+6k4tmiIb3Qf3mQu70s6hzLqxSyX1S\nIva/63UvAaG6ZS59cEzwvUH+l+tk52XU2/WCDEBHX6jJPnzKz9la9rLeiqnn\n6RxNpCaHtJVKBy0hUfvRs6b3iRbHgnjBqMRYunz93CBEU60531iTzDMV8tli\ncrBqc7gSeU6waTHcDx4mI/vQ8+zTpvV6QsT0590sZ7zpFjNrdyh2g9oD9syv\nWYAcZgVvQhbof+wcfj9CttQRxV+f/yShZ8Ebkwofsqz60nKHO+04IPXjngTa\n20spOa7fS5T6YGk5kXNcOrDYKVCgmIGwEY51PHX7R+EnwDXHcD8SC6LalOID\nkOU2dBUyjxdQLjs0YMOVn9zGEAPSoRhv/5wq4xY0PI/bcB6mAz709Yy7yXLV\nBEWv9xdVpSnMK2Skpu55VcPdSoU/plRHZ0M6emljg08at4I0Ltz1BhYCDoE8\njv+yHq516OsJstpuVBtpa+eNiftZeXCRhHZ+HPq13gvfNf1Lad7DkeatiRY6\nSstgofOVrvHlZR/Z9cPKJrLMqjrmoaBnd1O19v3MWFojnT/WDAvBgDy3Fp/3\nzLGw\r\n=EVN7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXS1ZpUxxghwswOX1Uz8s4ZH5HO1CE2hLL6LUUzXHQ6wIhAJTatUNevEZmXKnEds0tSclisRwQfgxACz4236mX42x9"}]},"_npmUser":{"name":"elo7tech","email":"login+npm@elo7.com"},"directories":{},"maintainers":[{"name":"elo7tech","email":"login+npm@elo7.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fastify-svelte-partial-hydration_1.0.0_1628183007052_0.9682996115556881"},"_hasShrinkwrap":false},"2.0.0":{"name":"@elo7/fastify-svelte-partial-hydration","version":"2.0.0","description":"Fastify plugin for using Svelte with partial hydration support","repository":{"type":"git","url":"git+https://github.com/elo7/fastify-svelte-partial-hydration.git"},"main":"index.js","author":{"name":"Elo7"},"license":"MIT","type":"module","gitHead":"2177f85ac5f961b8517ed1199352ebdb91637858","bugs":{"url":"https://github.com/elo7/fastify-svelte-partial-hydration/issues"},"homepage":"https://github.com/elo7/fastify-svelte-partial-hydration#readme","_id":"@elo7/fastify-svelte-partial-hydration@2.0.0","_nodeVersion":"12.22.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-k61zbWyW8PDpgj03lNA7NJ4xgOxYrCDcX8prm4m+4B/sBl5Ptn2xmZA/k6rtXvi3Je9WTWQze7Hout550ZY42A==","shasum":"2e84456ea478507205896a461f82ef90bcf3826d","tarball":"https://registry.npmjs.org/@elo7/fastify-svelte-partial-hydration/-/fastify-svelte-partial-hydration-2.0.0.tgz","fileCount":6,"unpackedSize":6587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlicCRA9TVsSAnZWagAA38YP/jqc2a4zHErhRYTHELR4\nh5Hs1zOh7mN6+Ci41DZc3FHPltL/zTggO1iUW1SnzWY0SXqnqWhcvhnyn6Zd\nZIj3ZkmcuXV3EiCPFrSeMygi79zW1VuQylpB9HHV0a7O9qOzcRuR/28BKGtu\nSF9xBmJKD3DH4B2A7DTpR4lw8H9sqL9QAm7o8SN0WHzUvWSQd0vRCW2coKy5\nCQHJ6kSfHhUviySNN/K2WS41lw1BELdAw7MHRHurhji0idPbZIqlf9HxlMbG\nBFzfvXDrNnJu1gg0+xzQ4CWzODc6+DXJ8S+eELnFrCfuWg+qASVtGulvsT3r\nwGkDK8q86o4+85B4L7nX/4TZeGFRow213JerXuxLU4nXYO4gYu3uFulmxnhr\nJVS2BEluyUDIYGGPuEZ4D6nE5wEKL6RVNyCu9BnCI9CoHH1R3rJd2bax21c8\nbgcYuv9pmshSn3hSKQg/8odtN+DbUIf4BfgvvXvvUKfjrxkNM2mL7kxIYkvR\nzqnCIZMr/XmqpkJrPWzsXcGdR0CTOa0bpqEDEkk7+IrGqLcU9UtF/1cq479X\nQCiqZRPJGnx/ozQrV2WCJJuh62jR5AJQlVUXjPL1/Et/9GmmcE7WRjsnk5Yv\n5X9Xl0e5bgf89jENGnt5bJWP98Uot698GTK72hIRat52qab40dYgTzeMDEnX\n1R4t\r\n=vl//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKDuinh2/4N0KopaUY/vY21PzL8kayXptD9ZQmlqQTOAiEA1M0DrSWMxnDJkToLYyFtqlTYYXHzuhpBmY3FpsnEems="}]},"_npmUser":{"name":"elo7tech","email":"login+npm@elo7.com"},"directories":{},"maintainers":[{"name":"elo7tech","email":"login+npm@elo7.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fastify-svelte-partial-hydration_2.0.0_1631738012753_0.1261103027055912"},"_hasShrinkwrap":false},"2.1.0":{"name":"@elo7/fastify-svelte-partial-hydration","version":"2.1.0","description":"Fastify plugin for using Svelte with partial hydration support","repository":{"type":"git","url":"git+https://github.com/elo7/fastify-svelte-partial-hydration.git"},"main":"index.js","author":{"name":"Elo7"},"license":"MIT","type":"module","gitHead":"d441927a776ed8e71fb0edaac04dff3510e34d9b","bugs":{"url":"https://github.com/elo7/fastify-svelte-partial-hydration/issues"},"homepage":"https://github.com/elo7/fastify-svelte-partial-hydration#readme","_id":"@elo7/fastify-svelte-partial-hydration@2.1.0","_nodeVersion":"16.9.0","_npmVersion":"7.21.1","dist":{"integrity":"sha512-7BLKV9lsWkal6kgwD/QvAB2/+gFkuA2vNGHbHZr2GKD4jfpfe1M61h3KZKmis9zCLbq77q8Ief69UmatpPIeeQ==","shasum":"dd949fd32e4292906c14f02722452efd06005b07","tarball":"https://registry.npmjs.org/@elo7/fastify-svelte-partial-hydration/-/fastify-svelte-partial-hydration-2.1.0.tgz","fileCount":6,"unpackedSize":6581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5sgyCRA9TVsSAnZWagAAprMP/3c6PO1wXDi19Ff1h+86\nv0I2WyBsyd2zR3C5X0zODNuqq1mQyLQTd6SkgckSqpt+bzMFoX2wRM7nzJvT\nK/yfbeFQSpsoTJiOMU6eowf0Akv+QPsU6fkXOt5zAuCVG2fcyXAZ6SZloXRF\nSCH9/AkGekBczQNzf77q5N8hjZcTJd2NvfvdBWt4B4q5c8dukM4kJP+D+ObY\n0RpzIi2WS+3JvyKlKgCwjU/W3JMx3zoWqrAU6ykjoIlMvM0b2+7RER1s28M6\ndunAjGWIpLshGlDUG3H44Hwp0Su8qb5H+OT/gUfrxmi9GJ5HzGGeOtJGeZi+\nqqppuPl/buX2woxa7jMDAvyQY7mM/iyrQEFBbaUjQQl1UHZmmIvllQursvlx\nZ69a1AfyT/fvQOs2OF45u+C9pmCiwl6mj2sYKHqUbKd+0XSWHTefw2gEuPHe\ntMdvunNlwkCurLsISMMWdkSNii2meGaNgKMDR+buFCX0w75gIcZzP2G/t2GY\nFUeQWtU3y/OjQ3kI0JhlTtWLojQYnByJWMk8fFsQJeR2PjbToEB1HgIM1FLr\nDwWG25n2ctqZ8bHFSTnkpJsu/pINAancIiZt0CFQS11GkIVEh6qKOtx2+CTm\n9SpDPbVtYD/tADYBo5zt6BbT3lQaJr5AUFCffMJ53ajSJdRNY+XV2IBHpnM0\nrizW\r\n=w7A5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFV2LryxIwSLRlh+iTS4CXBQPM/U9DwFzIWM1V5jIs8cAiEArdu9r4rJyUdzbvvgwYaKgiUQbl2jn1A8oAKr6JSv8gc="}]},"_npmUser":{"name":"elo7tech","email":"login+npm@elo7.com"},"directories":{},"maintainers":[{"name":"elo7tech","email":"login+npm@elo7.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/fastify-svelte-partial-hydration_2.1.0_1642514482422_0.3843553550872909"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-05T17:03:26.970Z","1.0.0":"2021-08-05T17:03:27.205Z","modified":"2022-04-05T07:22:39.190Z","2.0.0":"2021-09-15T20:33:32.930Z","2.1.0":"2022-01-18T14:01:22.595Z"},"maintainers":[{"name":"elo7tech","email":"login+npm@elo7.com"}],"description":"Fastify plugin for using Svelte with partial hydration support","homepage":"https://github.com/elo7/fastify-svelte-partial-hydration#readme","repository":{"type":"git","url":"git+https://github.com/elo7/fastify-svelte-partial-hydration.git"},"author":{"name":"Elo7"},"bugs":{"url":"https://github.com/elo7/fastify-svelte-partial-hydration/issues"},"license":"MIT","readme":"# Fastify Svelte Partial Hydration\n\nThis plugin will help you add partially hydrated pages\nto your `fastify-svelte` application.\n\n## Table of contents\n\n1. [Installation](#installation)\n2. [Usage](#usage)\n\n## Installation\n\nTo install this plugin, run the command:\n\n```bash\n# npm\nnpm install --save @elo7/fastify-svelte-partial-hydration\n# yarn\nyarn add @elo7/fastify-svelte-partial-hydration\n```\n\n## Usage\nTo use this plugin, we have to pass through 4 steps: to register, to make\nthe hydratable components globally callable, to add the hydration script\nand to use the hydration component.\n\n#### Steps\n1. [Register](#register)\n2. [Register hydratable-components](#register-hydratable-components)\n3. [Hydration script](#hydration-script)\n4. [Hydration component](#hydration-component)\n\n#### Register\n\nThe first part is to register the plugin with the fastify-svelte, by passing\nthe default export of the plugin to the `plugins` array for the `fastify-svelte`:\n\n```javascript\nimport sveltePartialHydration from\n'@elo7/fastify-svelte-parital-hydration`;\n\napp.register(sveltePlugin, {\n\tplugins: [sveltePartialHydration],\n});\n```\n\n#### Register hydratable components\n\nThe second part is divided by two steps: generate scripts that will make\nthe components globally available and the register these scripts on your\npage.\n\nThe hydratable components need to generate scripts that make them globally\navailable, below, you will see an example on how to do that using the `window`\nobject and the virtual module plugin for Rollup. Note that the generated\nscripts are placed under\n\n`/static/js/mobile/components/<component-name>/template.js`\n\n```javascript\nconst componentsPath = 'src/views/mobile/components/';\nconst hydrateTemplates = glob.sync(`${componentsPath}/**/template.svelte`);\n\nconst clientSideConfig = (template) => {\n\tconst { component } = template.match(/.+\\/mobile\\/.+\\/(?<component>.+)\\/template.svelte/).groups;\n\n\treturn {\n\t\tinput: component,\n\t\toutput: {\n\t\t\tfile: template.replace('src', 'static/js').replace('svelte', 'js'),\n\t\t\tformat: 'iife',\n\t\t},\n\t\tplugins: [\n\t\t\tvirtual({\n\t\t\t\t[component]: `\n\t\t\t\t\timport ${component} from './${template}';\n\t\t\t\t\twindow[${component}] = ${component};\n\t\t\t\t`,\n\t\t\t}),\n\t\t\tsvelte({\n\t\t\t\tcss: false,\n\t\t\t\tdev,\n\t\t\t\thydratable: true,\n\t\t\t}),\n\t\t\tresolve(),\n\t\t\tcommonjs(),\n\t\t],\n\t};\n};\n\nexport default [\n\t...hydrateTemplates.map(clientSideConfig);\n];\n```\n\nThis plugins makes the key `componentsToHydrate` available, which will contain\nall components's names that should be hydrated. In this step, we are calling\nthe scripts generated by the rollup configuration above:\n\n```javascript\n// template.js\nexport default ({ head, css, componentsToHydrate, content }) => `\n// ...\n<body>\n\t// ...\n\n\t${componentsToHydrate.map(component => `<script async src='/static/js/views/mobile/components/${component}/template.js'></script>`)}\n</body>\n`;\n```\n\n#### Hydration script\n\nThe third part is to create your component hydrator, which is a\nfunction that will receive the name of the component, the props and the\nDOM's element where the component will be mounted, and call the Svelte\ncomponent constructor:\n\n```javascript\nimport hydrate from '@elo7/fastify-svelte-partial-hydration/hydrate';\n\nconst componentBuilder = ({ component, element, props }) => {\n\tnew window[component]({\n\t\thydrate: true,\n\t\tprops: JSON.parse(props),\n\t\ttarget: element,\n\t});\n};\n\nhydrate(componentBuilder);\n```\n\nRegister the script above on your `template.js`;\n\n```javascript\n// template.js\nexport default (...) => `\n// ...\n<body>\n\t// ...\n\t<script async src='/static/js/hydrate.js'></script>\n</body>\n`;\n```\n\n**NOTE**: The code above assumes that the client side compilation of your\nsvelte plugins are stored within the `window` object, this can be achieved\nby using virtual modules with rollup. There is an example on how to do this\nin the [Register hydratable components](#register-hydratable-components) section.\n\n#### Hydration component\n\nThe fourth and final part is using the Hydrate Svelte component, you need to pass\nthe name of the component, the component itself and the props object that will\nbe passed to the components.\n\n```javascript\nimport Hydrate from '@elo7/fastify-svelte-partial-hydration/Hydrate.svelte';\nimport SearchBar from './SearchBar.svelte';\n\n<Hydrate\n\tcomponent={SearchBar}\n\tname=\"SearchBar\"\n\tprops={{\n\t\tautocomplete: true,\n\t}}\n/>\n```\n","readmeFilename":"README.md"}