{"_id":"next-ssr-form","_rev":"30-e02d8f99aaf7641ff9e6dfb0b765e724","name":"next-ssr-form","dist-tags":{"latest":"1.0.4","next":"1.0.0-7"},"versions":{"0.1.0-1":{"name":"next-ssr-form","version":"0.1.0-1","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":"^>=1"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"description":"Work in progress. Might not be discontinued.","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-1","dist":{"shasum":"de4a8deec6f9ab9385e126c553bb31db4d001651","integrity":"sha512-el3M0sn9PqpwdkVNop6AGqieWW5svss05XbBjcWCcBv4VUj4A7/lq8jV43+JZV61NpXvGNTl1TeN3jVUo03zRw==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-1.tgz","fileCount":21,"unpackedSize":306746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6pIDCRA9TVsSAnZWagAAA7gQAJieAqTtYyT+qro8zaV4\nP1KmCRGdHm6ViT+cdCCeSqdm1UAiQb3Hpne1lNBqTAZY9ftALA69ez/Z9GDu\ngHcQeWAua9aWl8lzF8s0DTIH1p5Ybgo63WvGk8ENQKft9QdlkjhBmSt8W5u/\n6LqdrFloyUemzXp51nVpjWjvmZ/Cdt4xc96b41KfwlDoKlXj+tiZL1qdH4qs\nNojUSQrTHo+utFlyzvyNG2M19ydjbaPX2+LRQ2BPoSJIc0vGhH0AMQEHLoTj\nuyFE/U+edxabn02VyC5hcP8Y+clnK5Y8DNjduOWkWOoqm+tJWrBdhZ+gHUWG\n30VQ6k3J8ki0c6CGNfPJ2uBjDlbQ1LOhD341k7UVJJWvPnQYH2ZAIVxf5NrG\nAgRSS2tMWuIYELWwW3S6nZel8PmbFoGBpLOxdC+GLsu6Hj5Gzjrn5BEE4fhW\nGXsdZN8cwtt63d5eNyAMLXRYqr15AwnQkbFMJ3eDPQxsjEm/RKdUs+WT121g\nWN7MK7xuJ8B00ZewJGFK0DYYylCtHCzP520yAAYpEk/LPIcdbvlzGf3OFwVo\ncHC1pc+/5qbtAYP8yAuKN/o63d9sQ6cSgpc3P9PebpDYqahxYvCNNHmFw378\nC6sagV5tUpOPdIDz3ynfDShwIs2hnW05j5oO4rcS1dz3LH9oCo41xGyYGZNn\n15mN\r\n=2Fg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxNANOl+sEuLifkEWcbQZTMXzPPJwNKPGdOuMzaksO+AiByGYJYpyC2tbu8geZqgiV5mNSh9BDXaxbbAxYr7LpB1Q=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-1_1609208322582_0.5599240737792723"},"_hasShrinkwrap":false},"0.1.0-2":{"name":"next-ssr-form","version":"0.1.0-2","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":"^>=1"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n\nWork in progress. Might be discontinued.\n\n","description":"Work in progress. Might be discontinued.","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-2","dist":{"shasum":"4ea86cf8392b8679fe9197621736b81225b9d906","integrity":"sha512-aLb2oU/xKEngw57mbm/lsgB3gkeEUWFdsjUe0EdLPZnztw9gWBAQb0ThikTjuNeiBxBmBFH4jfwFaMcU9B8+AQ==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-2.tgz","fileCount":21,"unpackedSize":306743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6paMCRA9TVsSAnZWagAAdPgP/ic4DbsvOuUxyMFkg6NG\n1/TSQDfZtG6pR1urCiIStD3F4pivw4JZv9avmG94I2md7bfXxSrmzv6k6y5I\nPa69wSHZLpjl/OMyNJxy6z5MTPqSFYn2K4r8i6sjLrGPemMBIJ7iF7XbeBno\nemyNXZKVtQVt/SQa0tphlR7dtCKUmP/b2rFanbgHbKzYtGPwGgpgFZ40Zshg\n7nvz203fauP4IsW3/svrk85YP7z4jm1KAD1nE2tBf0Ssz9uyZmTevGUHPcUR\nOmZLEwXnHttge60XGRLdZ80h+NVISNB7V/ocb9D5Xof3hLS0bMkaqeV8xPu1\nUl3xxAiilmYjk/smeJj0q4eB1Dndz7yh23UcpZxBXLnctGLQrnuXe6Ds8mye\n85Lbj7CoSa76OBpsqYh4h1CO6b7YqmdKzNoKctvIzYhdL+sBSXy5f43/VT9z\n6ux0P99xFtbllmWglQT8lbfi37D5OtuKeT80iPSfVPuhfRbuzjTHcZDrMt64\nCAoXbCedQPcduK8wNa2iFQ2Q25us6sQ0Mitp6uIsh5bxd6PTrmxR36SxAtBT\nPUYrcgfSnYKuqUxjumunxZiJHTA43mB1/KYDLULzx0hkpmPbhE99Wcp+x51V\nM8ULVPNWLm6Bi+Ke4VkBnnXGOGNQrhe+EW9aFh5GbNG9sphtnAqfUJktDF9+\nJehY\r\n=qTHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLL+pE6T4L1S5XDpeTDCojoDWd0zD4VfMIjISu7lK30wIgMOqDa4Alxf2EalYm3rDX72tkjKKpmLipv+VCXVMspvU="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-2_1609209484124_0.0662827202637295"},"_hasShrinkwrap":false},"0.1.0-3":{"name":"next-ssr-form","version":"0.1.0-3","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n\nWork in progress. Might be discontinued.\n\n","description":"Work in progress. Might be discontinued.","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-3","dist":{"shasum":"d1dc6cfc9d613820925fb3e1c2deb3fa079bd035","integrity":"sha512-ckzIiHJY+xL4+GAnB83lXPJzmbYSeJk+/3ZnJYqJmPpbaJr4Tb5yS5bsE5h64eGL+Zg3y2cga+BsXzE48iFn/g==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-3.tgz","fileCount":21,"unpackedSize":300855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6qjsCRA9TVsSAnZWagAAEzcQAJOJed0LjdNfJ5FlfuzZ\nHM6WoSDnz98x8rXoFGPOCjWnoFaiJb8fmvuSkRo3iOFlWkwFmxo+NrYSEvtY\nwsqZawCY+OujCAuJmed7jkRgzrsDPEl4g2MG5g3wnkF0q41zs8g5ut0o5wNc\noOG252k6Lqj/+pjIYmNO6A+1TElNM/Upw9ZoZkzD6hgnBGMgksT2eH960PG3\nGY+Fm2Ka0vpx7HVEOmwhmvmCQVDaF4UDZX6o/qY6YnmZb2ZTQjZg6lFEI98B\nuY/P2M+NYgU9bgmsdq5SiGgCc1PcgGZmX93YkQCnx43KP89HUcVdn3HuG59i\nPh4nzA5SAwtzumZbdgPIwSAHk9bqschN2qsShN2JynLG0XvJLKcPLd3WG33z\nnSubYplRIQ6MgRntkauujgux5ceRAcccdBYr2wDmhKjPKvnJW1Tb+aaBqFoc\nFnxwB/07aRPJaoJXBnaA0xjpH+HQTAQB6W19D6ob27lp4UXilf+nJ9HYHK3P\n1DgLVhwTfdtZzm0EAxflJB5B9RvNdmMUL32u8HKv3K06JR3G3e86Zg+JpZk+\nS0+XySZEd8354qZqKMWbIzIdOdV4K3y5aaqfA8WuBnHIugpaeHHe2Qs4Udda\nj2XGGRu3LAB/F+SWRyftuqLQszvecn0Y4IXRUIgtnRCA0glxpvZhj+TwsGjw\ngVLZ\r\n=PEam\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe2Seu5kp8NIUX5/3mesVUNi76epnTWWwuJTk41nOEcwIgVICAZl1P+Pd01zhfyqZeawCsorgoRR9TJv8gdp7qy4E="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-3_1609214188564_0.2668728252405823"},"_hasShrinkwrap":false},"0.1.0-5":{"name":"next-ssr-form","version":"0.1.0-5","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=14"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n- Experimental library\n- Work in progress. \n- Might be discontinued.\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n## About\n\n- Uses Next.js' `getServerSideProps` to both fetch and provide helpers to write data straight to the db\n- No `/api`-routes used 😳\n- Server-side data validation that's propagated to page props\n- Works without JS enabled!\n- E2E type safety! TypeScript types inferred between client <-> server with all the nice autocomplete jazz\n\n### (Peer) Dependencies\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as a form library\n\n\n## Get started\n\nℹ️ Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n```bash\nyarn add next-ssr-form zod formik\n```\n\n","description":"⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ - Experimental library - Work in progress. - Might be discontinued. ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-5","dist":{"shasum":"381158c8b012f51bac9eaa62c2a220b177ca3c3d","integrity":"sha512-nDG4OF0NELEr95xfKX7JEx2e/UYCBe4t/Rv+2ve5JYWQymqBWF5pf6XTp5ks3TNbz7UrhXPETsvDkanM9zuPEg==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-5.tgz","fileCount":21,"unpackedSize":307804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf60a+CRA9TVsSAnZWagAAxrkP/j0OSkdc9to6WTHPWzEx\neY6fJUsFy9FyskZ5avZ1MHycV/GOrInzwalUdmQbFRJK/PHVJJVwbyzaZNxx\nH3dsUEkg4wkI82YG13uo9lj40X3arCHMxwOZYBVUIq/exr8rKKYJ+xReLNFm\nAwYvBCXdGUOHpxqx8CIBeQdPH41MIvWcZC2nGSRgFEk1wq34NIL5sMBasaSr\n2Z0OEMleZcGZKRs2Yx8nS6Gmb9lYxFsymwPl3wVOQyM02h+doS8ey4tgUKE+\ncJyVswLc9bwUBf4tI6Y2awzse485Skai4xrkJ5J9vmn0qyTA+WIoWY5yBNpm\nSxtCUjDefuNQsL3eLBCoGPK6/hLI1/LUrnJwiAgHCGDAT5Jb1NG0tlNcnWUD\nab2sPKkRPDaaxMt95WqjSDdf43VVMs2JxSBRlVnZZRTt6U4yk0RRzeZ8EtL+\nWAeowLGs3j7YJAcKaqVBMNbDi8KZAtC8bnpmdU5NRYE+Y+g1FpJJi5MHFdHh\nm+urKGz9t3Ro3DhofgzrGVZZKBY6UfodMHHT4gA+piRA1nlub0IMU6Bj7RgF\n3gu9qjVjoEsYUgiJ38u3yEgSdxJLOzaOUhg15BBTvdH9dPbl1KGqAxPhJrsQ\nzRlEHpzJ+KZ8Sw/uMKvCy5TKayubdB6lliilCSniGbN+voEEhPqDwJGMn/6y\nD3Ho\r\n=OEbn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEka2utZcPx0tsllbUepxANBlAbdEmszS6Z9GU4uOUvpAiEA7Y2O0D/bmXuToXkRWIf1yejOUDlaiz6irNNc04F5aPg="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-5_1609254589559_0.11261629650344251"},"_hasShrinkwrap":false},"0.1.0-6":{"name":"next-ssr-form","version":"0.1.0-6","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=14"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n- Experimental library\n- Work in progress. \n- Might be discontinued.\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n## About\n\n- Uses Next.js' `getServerSideProps` to both fetch and provide helpers to write data straight to the db\n- No `/api`-routes used 😳\n- Server-side data validation that's propagated to page props\n- Works without JS enabled!\n- E2E type safety! TypeScript types inferred between client <-> server with all the nice autocomplete jazz\n\n### (Peer) Dependencies\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as a form library\n\n\n## Get started\n\nℹ️ Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n```bash\nyarn add next-ssr-form zod formik\n```\n\n","description":"⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ - Experimental library - Work in progress. - Might be discontinued. ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-6","dist":{"shasum":"5bed838ed2cce7a92911fb6a353206c077845b8b","integrity":"sha512-w9gfR21vqZT24epCpgxyS7r2+OD6m4TgFCy6UReJ/p3RIYsPpIE5bb7aiKN90Ht/6tDeDxnKQnuVRlTgZXZCjg==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-6.tgz","fileCount":21,"unpackedSize":308034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf60dNCRA9TVsSAnZWagAASSAP+gNUCMc++vz7C4nMT2Td\nvCb2UJBZ7ZBhbWbKAumjKL3ZkVLPsafbAafyjtz31H9LwVLCtjex53i7E2kY\n0A0+xtsqHBVsMxH9OGxhCVoAJSn2jRk7ZYm1Cbr0WvYKCCYGpnqXzQJnMHhB\nDVP1MZWe64doDjz/KOHxRMq2aEyszM9wSbn+CMMXj7mT2cz/vCNE4NGXpCmc\n2Vmzahwxnlhihc7C88O23MTGAH84Y7bR9EXTkOqtZmkc2lO6k7tVRuC+EYap\nnUUW3B/WoPVQcsE8BtLgUsv82aAOcPzdzL43FbnRsUMkfxL4NMHal5xA0Q09\nt7P9o4jVo/8LtDTBZvvSPHkzQHTUHp3x6mkEIJ+IvofAC4IzEvWNdPySNO4l\nbjmOvL3BiH19Lzctfsg3wDr6oWtIPeN16kaeuKsSyqch+RPpZ7xITchMyVoi\nWoU6JYSZfEGXp1KCrTexYs3RqOz12X8Y5STt7fetI324GXw+7QdvC/uxCXJJ\nbXv3/Y3E2A8qsvL+bRNfAJbNiCFK3DsQn4Xbgz3Jbj0e00v+Ak970BKKGsqB\nWXcl/pcSiIEqY19i4C4po51O2P8rHA7L5T5+3mm9+TOS0ANVEHtGedhOGQRu\nVoo00BFJ/QlNUNPiLdARcC0D9M5dp8jkJidAQNZkWIQJU7jSLNLmUz/MOdgm\nP+oR\r\n=wEfD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmOeOOwJf1bUsRwB+EguFLoS/o6YZaX3xLimzAjCtPbAiEA4ey9Ni2Nkb6e50EkVuat41je3+0s6/hZflL8xeo1EGA="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-6_1609254733205_0.49286270522615894"},"_hasShrinkwrap":false},"0.1.0-7":{"name":"next-ssr-form","version":"0.1.0-7","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n- Experimental library\n- Work in progress. \n- Might be discontinued.\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n## About\n\n- Uses Next.js' `getServerSideProps` to both fetch and provide helpers to write data straight to the db\n- No `/api`-routes used 😳\n- Server-side data validation that's propagated to page props\n- Works without JS enabled!\n- E2E type safety! TypeScript types inferred between client <-> server with all the nice autocomplete jazz\n\n### (Peer) Dependencies\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as a form library\n\n\n## Get started\n\nℹ️ Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n```bash\nyarn add next-ssr-form zod formik\n```\n\n","description":"⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ - Experimental library - Work in progress. - Might be discontinued. ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-7","dist":{"shasum":"3c5778420a94d2d51fa379a39f8961e0406bda2e","integrity":"sha512-6+fQuNDRaxlf3d3520ZNRfIVa80EeYpA0G2jSQyvoA9kj5ouGc0PTE4rPp1AWnR29Fbu+VDsZFcnE4TvIYQlzA==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-7.tgz","fileCount":21,"unpackedSize":308110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf60jLCRA9TVsSAnZWagAAV3oP/3DOxkAP3OH+BZ37c/wJ\nGRDZnvO56jzPd2+Inq4YxbJJS3J4Zvnk+9Ghq88OSVc7Uk67IW8BqMG3+jL2\n/tnknBUcu26XHW03Q/V9Xwsa3fm1rCkZh1uDUxypEKdcbOKVnRx5JDjESJqv\n7Qr4ruFa5ytJxBlmpAC10GQK3mZR8sUjLSMU4F63BxVa/SM3NxUmOT+g4NBC\nU1q2wzC2S0nTC5IVEn5HyfIk+9KCL8RBRLW2Ki/RxPD4DU3Qu1KIjDlLIJRj\nrone9emhlVLa7Z+1eTOHvp9NIowkvtgtMZVAapsgSwCkLBaOAyQrpQapcbKM\nmE4biXEmyrhKVmaBjIfZndSHbyweAVN3VDlUC2lGqi6XHHqvHpqNkip21nCS\nOWl2KNma2JyJz6c1hO5DvkYYO5bY9ueG62mpPgJmXhJVZf/3l5UqynDZGC1Q\naEukHe8HrKILxhJ2FqSj2feVs6nCKHT45ooiSR9XolGqBu0HfPOzpPhFww5A\na+Nwh3gH2fh0TLb1cX6dohAZrk/qmdEqXzsaByN7qf6lFzQMBWoXfbWwMflZ\n8i71FmYqKLpeuL1SiC/vrs5O6ZvhvLbLDvwz1OoEfh5HTiNs/qbjhzHLfwIM\noBJtBUzfQRZwkl1j9zN7zKDH23O5grDfvokk4sBS0+93i8AeBb/YRDvuopin\n3mOX\r\n=fhi7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAjJInHXpyr3gY2dpsXEomN/lEDpNHPTBYQrJs32ajPAiEAjSEt4im/yWr2BUCT2GunvB48QlVlBs5h+EjPorc2K1c="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-7_1609255114901_0.9696915033943585"},"_hasShrinkwrap":false},"0.1.0-8":{"name":"next-ssr-form","version":"0.1.0-8","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add . && git commit -m bump && git push"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n- Experimental library\n- Work in progress. \n- Might be discontinued.\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n## About\n\n- Uses Next.js' `getServerSideProps` to both fetch and provide helpers to write data straight to the db\n- No `/api`-routes used 😳\n- Server-side data validation that's propagated to page props\n- Works without JS enabled!\n- E2E type safety! TypeScript types inferred between client <-> server with all the nice autocomplete jazz\n\n### (Peer) Dependencies\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as a form library\n\n\n## Get started\n\nℹ️ Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n```bash\nyarn add next-ssr-form zod formik\n```\n\n\n\n## How to use the \"library\"\n\nIn a Next.js `page/..`:\n\n### 1. Add form to top of page\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutations to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    async mutation(input) {\n      // 🌟 `input` will be type inferred!\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n  const form = props.createPost;\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {prettyDate(item.createdAt)}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ - Experimental library - Work in progress. - Might be discontinued. ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-8","dist":{"shasum":"f4a84ee1df8a578e6d1c7b64e1cc0e49a53875ef","integrity":"sha512-3uncisPnm0J7kMoNkjtZv2gJus/jccip4M6Y3wUo/9+ppcshV36dgamA077l/XOANngeupMpYCXscH62w17X6w==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-8.tgz","fileCount":21,"unpackedSize":312081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf60xpCRA9TVsSAnZWagAAxlcP/0ieDHpg4zq1VxGjo8kq\ntXC+RVTJ6CvBGQZfkw5odt02T/XSI/DF2+oMKiJqT9qZj48UbUxhY3pWC7+p\n7/t5NIvs631VGxBPPm+kY61UXyrEEt7WIqu5c0/4twvOnTKv8/1xQYqDTJ4f\nYUnLkM80cEHAdxwu4+1DhTCHpcAWkx/HwKHd0TxVYgQbI2TmUWm0Aa46ICET\nR+hcYjDL0nzdPPSDm9h5W8/q2/AnEQrRDL9HyeWtnx2DgjtB0rYpus59sOiy\n7iAOlxVp+lxsgQHF/Ves84cRFQzEechTXDyAZMrPzYofFMUssQ8XrI6ydGoy\nVJjF56GFLpayynXtK2/6UNMhFVgRG9Fi9nmtqZixSjIJyDQLu+iEHseyFYeE\nd2hj2qVQISYvCPyBceu7l3tDvcNbgrnfxi3GF15Ygh9cBw/MIDL1ODGgB65A\ngcugMDgaU2kTsaBioS+uGnUPlW94BX69udWBHehv6g/FzwRIm5xfwboHUmH9\n5ctWvyU8hOvfmFZ36isTxwzBFZuAn+hEeFPBHcMwxLdvMj+2EGSLDt4ubEE/\nOaDSwTVUf2+H/Q74uoIA6VHYELCPtTMFmGtWubPPvrYZaeNUuNmS7bRwkuvU\nWPsjGhD1OfIE8LuhYmAd8Q7/jMbygfOqjNzMNllaperNH8CIl8Ut+nwbYRTN\n1lLm\r\n=JOO2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSyrIa1REVYAXt+jlrADIzA1K7gk444Y9SvCGzpi6TjgIhALRfrzTDpLmCNdyaAgc+y1cVuyZdJTvAQQkUG+ztWIdn"}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-8_1609256041190_0.4190767321800486"},"_hasShrinkwrap":false},"0.1.0-9":{"name":"next-ssr-form","version":"0.1.0-9","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add . && git commit -m bump"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form`\n\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n- Experimental library\n- Work in progress. \n- Might be discontinued.\n⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️\n\n\n## About\n\n- Uses Next.js' `getServerSideProps` to both fetch and provide helpers to write data straight to the db\n- No `/api`-routes used 😳\n- Server-side data validation that's propagated to page props\n- Works without JS enabled!\n- E2E type safety! TypeScript types inferred between client <-> server with all the nice autocomplete jazz\n\n### (Peer) Dependencies\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as a form library\n\n\n## Get started\n\nℹ️ Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n```bash\nyarn add next-ssr-form zod formik\n```\n\n\n\n## How to use the \"library\"\n\nIn a Next.js `page/..`:\n\n### 1. Add form to top of page\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutations to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    async mutation(input) {\n      // 🌟 `input` will be type inferred!\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n  const form = props.createPost;\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {prettyDate(item.createdAt)}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️ - Experimental library - Work in progress. - Might be discontinued. ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-9","dist":{"shasum":"a20682ca50b940d83a073e4296f8e728bab4a12c","integrity":"sha512-GcqZPFmdBADMlvYoq7KfH8BQs3hPhBYjvbuIa0+q41p+88cC2L5lbF3J9hGgPsYezoDT6gBcExuzysFH7Pg6Cw==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-9.tgz","fileCount":21,"unpackedSize":312069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf601ICRA9TVsSAnZWagAALQgP/imhSPPRtoCh/Jj+1J/E\nTJnBFy/JetzZVlrMaiVnw43aP8q8CUA4+qmzy9azL9o4If0JcDngD0ZTwXrT\nKE/zJV0KyI2EDRgcPL/U2SZv58ZB1i08QPLMimsgMh2HWyIuf3OqeaEXPlDr\nrjY2fGRZlFkF3KpS79b9GM1biycS9cINrsZLmnt0FZ/mHjIcpemGXLfn5d8b\nRU9gs9feGwVX6LRztdJqqx3kqpBw9WMK8lrnwT3LQB5x1TNQieAgLWctCDTs\nOH+bICGb4f9kOQx624CukTFJ4xoAaTFztbCCqPdLwHjCo9W5sCjg/T71s6SD\nyupVbHHf7p9vlX16EbHBz8wm+qoAZeqc+15clCYx/S8jtkrFror7jjsmEaGe\nmthbzMJfMTPlFCzTnQTZEZU+qoaYyEBCm43SzPlGp/wEJMHskDGzpaWj9Lny\nCPoFmcd1wPvduB6EZHvvlrxVm/iGEOy9NLtunWuMoreHldVSoUaMVHK00yyq\ne+2JdS88AlbQ99ml12TH7V3FD9ROpn36R2nzAzJPP6BNjVD0iw6XyIvywnfK\nhkrYgDfZEvFkaiS4V2/umy8L0PJAlYVF26Jn7vWDyXpaYY8gHk6n4Rrm6/pa\nlvUXsQehsOJ7oUK/CawMaBtynkBBUU5YKOsDECT26NVFQze0t2o1KwHiw2vv\n0wdj\r\n=OnZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhovdM2VNEH9plF3EpO86QkMmMBCOTf94UgPE4Bct8FAiALJw45PTGiDAhxjyIa30H4tKwym9Vxl+8l2N0m5/1v0g=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-9_1609256263741_0.15199002546801132"},"_hasShrinkwrap":false},"0.1.0-10":{"name":"next-ssr-form","version":"0.1.0-10","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add . && git commit -m bump"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n**⚠️⚠️ This is an experimental library and is likely to be discontinued ⚠️⚠️**\n\n## About\n\n- 🔨  Uses Next.js' `getServerSideProps` to both fetch and provide helpers to \n- ♻️  E2E type safety! TypeScript types inferred between \n- ☁️  Allow you to write data straight to the db with confidence\nclient <-> server with all the nice autocomplete jazz\n- 🔐  Server-side data validation that's propagated to page props\n- 🤘  Works without JS enabled!\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    async mutation(input) {\n      // 🌟 `input` will be type inferred!\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n  const form = props.createPost;\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {prettyDate(item.createdAt)}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"**⚠️⚠️ This is an experimental library and is likely to be discontinued ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@0.1.0-10","dist":{"shasum":"aea59166712cc087d7d793280c7f1ae6f807e98a","integrity":"sha512-uM9tAGUuuN6Yak6F2vbLah863bTjY4ncDw+gGWG5sWzZGWVY8UnKypBStuojutOXPMN9HzXh4E+Z9/I1bIlE3g==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-0.1.0-10.tgz","fileCount":21,"unpackedSize":312044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf61G2CRA9TVsSAnZWagAA+bAQAKB5V1SveFLfW5tqqo0z\nJ/BUo0EO5LzINKwNvHnhOTyhSzd0UPqmohCcqHvOAgIp1ETZI9itL/Va18nQ\nQbtKkJMIEL/aE2FcelWqNizrBxCw75kAASv7KvAcNgz8FWunmzyUDQ1xyMoK\nl/MYRNcVBv848IpwsOCSDWVA23C3SnmP2dvDYyseGxKYKsD1NbI9CGRxvvUI\n5PbdjcAFBwEvl3wqfsCDkLhf5lR2Iq1nDpQ/1VZqcjm2l7Wvi/3zdTab98BT\nomqIM6OQ+CSZePNv7Ab3X4QD4ToE0T57lubq/xYZl2K+tVuqdiBPzSE9S2zS\njBuRO2GkpRafkd59LjWMsvZk/0YsBQwPqO9Cm87srQgKAnmj5wy6hKvuKFQC\nxKluW0JpBA9NXZ+sGTJYLWHigMTDQ54hf4dapbIx48LS1+P0ijY9aXamWTcs\nSLcp05BsakeT1shVbP8x57e6ILSP5HT6r1RpHanVxeVCfB/mQzNQhA1aCzNJ\ncS81R7vtCj5UQdS4zMPGOPxQcs8tuWdKf28zjePRHSqtMOPyvLxrNQXaJVov\nkACVxiJgEmhUlOfF4LWIh3IGRMFqDLodYTcFRmJ8Ar/hmMqugtsz/8kJ5Urg\nWlPfaWcQLqQ5UaNVJRkFqDl2lfIWb8tEk0ua+J+tcB2qSsaG+gNc3YW4ht7w\nHNuQ\r\n=wjZE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAydfxnXvlxNLTx+0t3MfApWNmdJQtrNBaRCYyT50BTIAiBcbLq9byyvg3MTEYFHi1ESH3CWpZc2dxBraZ5H8AFIEQ=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_0.1.0-10_1609257398301_0.0558361154985485"},"_hasShrinkwrap":false},"1.0.0-1":{"name":"next-ssr-form","version":"1.0.0-1","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../."},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-1","dist":{"shasum":"207bbb5ae61fa5876cdae1ae8fe0ce411c990d04","integrity":"sha512-B+UsrJes8Fc6BBpVabx4tccYNb7ItbXk+mqR43vWrCVtIXLtb6Z08GWaHTppGLA7raOls2tJ+a5YMSxfn+86RA==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-1.tgz","fileCount":21,"unpackedSize":312315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf643UCRA9TVsSAnZWagAAy3sP/06GGH6BK1RN257J/rY9\nJhs8JxDXkkOOdo3TIbyh+J+5yPk2d0hsGV9tGq0wqwoNDeB29q/XZXt3eUZ1\nSGcD5IaGvM4jdeesK7pvaVqp3PE6AEzDoACQto9i2vvgEWU4/ibwss7fYVgW\nm9yCnbHRX5ieMt+yBa4hB2pUtGAqx2sHwK2tJACpl0IbCM5DnCIhZynxul2y\nqlkzHxnoJmnf1bRXjVoN86qC8lZpLr97Xikhi+8TPSnnZDp6IsioM/0GAC2K\n3IkSRMfLqD473HP+jgnFOdHe8i5U/ncjQKqrMM0x17TDKnsr5t2NnMys4neR\n1LRNxnbI194QQe2qPAaEAMoJnor4dJ5w1zLCAX4+XJhttbMkdBoc+7+ba70h\nWdJdepHYIFUhmsdROv24kbgNwI+Ldz/Ra5am7iioyvqKVv4yRXdlXPBnV2uE\nckQWRYfYiwZFaOPsFMrhq6WCIg5pbGKsAWK3QiaHGcrSY7IQ2MMCBbzpRn8k\n+NZbjzcU1GpZsQ3zbOfUHaDzS5JMGVm9lBuDGu2vM1bOK8GTcr5d0dziJTz6\nz66+lNjfDzWSfaDbxr5Z8T/e213VbiMrH8uE5RpYm6I8xqcgupDytXnevPrD\nKrAaBecyTilRTQICy/6rPf1s4roVGSAJiMXUHM8Wt60v/zYhycXJpbiQU9R2\ntGx6\r\n=MyNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtnWtpcGj4rHC+g2fN6azfVTsp71XoEeEU2VLFKwh34gIgFDhDnYgh6+K6sYWSW4U1UTChx67URMyIPqozRjWvdg4="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-1_1609272787639_0.2595180941800195"},"_hasShrinkwrap":false},"1.0.0-2":{"name":"next-ssr-form","version":"1.0.0-2","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../."},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-2","dist":{"shasum":"46f710d808e71722e51b93fac234131fa76d2fb2","integrity":"sha512-mzzdwhvxnNQd96TJKIqizzc61n695XAEWjq6y4Atm/rJspF7a3wz1OcoRzCeS46ImRC4z/AzqVwpW2y5VAvAOw==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-2.tgz","fileCount":21,"unpackedSize":312889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7G+2CRA9TVsSAnZWagAAsagP/14RQ5te5iF7L4Kv3WQ8\nb2dHUF5PZOH0Ts7c/fr0YUEbfkiFSIogP+zWQxoTn9zSB7M2zivZhh5IAxBz\niztVI0SvdjZwO5guHtzu0AkYKSUONxxlpSWHZ2q+iWeGBI92NqIz4VI4bBi+\nFcK4imqZgBsJ6azhtNurNSZGGmdaemgHBFeYM37f0XSI94J5jkTjo6Dn5fIu\n0km07xr9BA5a/Jy0dMdyEGEDU/ujMqeZcyhdr301r06DsN2X9iZve0dA/wY2\nZ9KUep57UylYpB9DQ/+qppXagvoEuzspnbhttD5olXAJ+Zd42m1K75YWZ6kB\ni7aPTaY28cdsqRTffTbZR2hAUDM31tiPoS1dx7mWNhco1Itcu+9nFojg9sJR\n0Wuzlp05Mc+JJzwD6JkUz66k38+zbXQt8iG+FxMGkdrPjuvv5h/jgvmTsj50\nEdBI7uj+JDdMmuDR6LwVNmB1Okwcx/j1bOSiwqs6qe8gOokDKu2+5Cv4l/4p\nkBAS5mVINtVej8Perhnp+m1W9y2movyMXeRF+LJjEaSPmYzfK/MrsbOmA0pS\nN0ovBiRAooyaUhLOw8sA5CslOoKMsO3aXt4t+wgPw5M3Qx6C4Ye6XJjkZE+S\nAyOLHDQzNitOi1TemvZ+TKkxtj3tLwTUbRO7Fdrsc3FhEECSgMVwdXwrk/6i\nGUeA\r\n=TyYc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7DOaU1ok+yBQGCwMihFxKtCibSHvb2QEiDqXaM9ZN6AiANmI50j1xl76eHza+3QcXfQXhdSn0Hr7Tvnh0TONHMzA=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-2_1609330614416_0.5218981066279236"},"_hasShrinkwrap":false},"1.0.0-3":{"name":"next-ssr-form","version":"1.0.0-3","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../."},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-3","dist":{"shasum":"e544aaa5c64e5ca5d0dcc339f52430c6d8b63c83","integrity":"sha512-RnG9lMcSQvXdSZoMy9eAWbC7zJrej8cOz2k0o7786AmXxlgyr4J2Gx93tTzwqCPm47eSw2k/uqFarJ2uh/2V4A==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-3.tgz","fileCount":21,"unpackedSize":313899,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7LNBCRA9TVsSAnZWagAAoOoP/2poe4yQDsGpoe7O1NWh\n1kkQHEiZkaowNwr0p+EwPVCAd8wPR1k02iZY7yueHjVSOICwolCZbrleCb+O\nRWeZvG6JbnA2DuVsortQq/e+iqNuOMIA0fpEYCyXgzPQJ/EZ5wLGprp21WBP\nCf+PdfFvgBl0J1TDGhIdTP7b2EodtC/h5N0oi08J3+VX1f20EhWUZgsunZdO\nnhTF9OnExEPvOO7BE9D06LJ3gpMBrI0sKvp2X6Wvff96uAk+x7PA3DnvOVN8\nBkXbLBXQ1Kl5EuUkwdilQJmJZRhynN7w3cn0HbKQMEdFVr5wLhN3dKDM8br/\nEMH2BzPVOxWGviwaG1oCEpDraJRwct7AoSkm82A8b2DuY/rNsf12cPHLhzn/\noRarMNH+aQjBa+cHVL/t7okiElvFEZOUS8cpfEmMfQXKdeF+Jpg0AGZEzNY+\nKpcrUuyz2VmHIl66wdGSsmhkL3udpRv8dPjA6ZO87p4uvGwt9AkJ1jzb9Tb4\nZuaW+F7QWeW8ePA10s057E4ddAoZqjiCDw4EaQmhiKpIYngtGKezurnpisl0\nsuCIx04yaVVg1LmjUBVfpAt/Xokr8Fd6gBRd1LgjvD1dOAW1Ofq1rZ3wNRoD\npGvlM5lqWi19OaGIGNlgqrBp5tZfxbb0dDm3OmwIM98H01RaziFAQCCpx+3T\nGqlQ\r\n=NLbr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVejxl+yiFShtXrgmyZaQ6VlATJpDwCbsOoUmHgy9+rAiBxqGFIanaRMGiNxwxyCbh4fDA1EBgjVzLimOAa6dNZbg=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-3_1609347905399_0.41172830056814247"},"_hasShrinkwrap":false},"1.0.0-4":{"name":"next-ssr-form","version":"1.0.0-4","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../."},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-4","dist":{"shasum":"a35b47c9443cc2dc2f98e7d8a93a3a340b0b27fe","integrity":"sha512-WT/6Qj6fIm9Z1mQID/Yp6Oep5RDVi2XieXKHJhZO4RKVYHp3OJB8IosV7kweZrM/WwKFQFi0GKWOOYGSO2wnUA==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-4.tgz","fileCount":21,"unpackedSize":315065,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7MJQCRA9TVsSAnZWagAAoSIP/3M3zCeU5plxCrDU3vLG\nESucQ8dwu/RT1laQYlmEvGEWUgjgq7v1hmwp3ReTh1u57pDjlSgW1oYjGrqf\n3kAfJbEIsMte/AtPaVuTc2UzpQVqTmwSB8K7YG1qfXXcaPgSdtYYoeD7vXEb\no/Rgz9BoYnC9Yl/OaNxIlfHbR8KcHOmybJvKw2xVGB9+e2ggCij/xTs/j6lu\npiWB1KYbkIDvJVbFn4v8ryMK6kF8o8DbaZOTYu+8v+2JfGowLwPInakv7Q58\nze8nDwspCMavwkb8lVuW+dtiIbM5ceaTGa0H/I7i4out3qamxRdclEzlDROu\nilSGhxnrqLgpj2DMAPr5Ci22vyCFiqJMZ/+zsPkbn61njTxqEJxeqh1kWisF\nzHIg68TYHrRIfMv8i2H9dZS/Jtb+JQPWObHNRjOGgWEnGsNXyA/GPta+HlCq\nJPRkqBKwcEjzFZ786PvyZ7lBdYii7hDSWAe60zzlGYerLecWqgO8kiG3mevT\nGBaK9uQB5iOIgnYd6bj2rriMKyShbXA1BQf2PfsjbcVTrcaC2OT2O0q97nsP\ny1JIluCsekBoqUe8xt4M9xBbLjyhbo1oOG7eY9lsmdaA6S1gtHZkrRdbgb9i\nTiOaicC/vvSI26mNdmNEvZhytJDBXsdkMduSlhYQHT1odcTPnBfxz+UI7ww5\nVF8n\r\n=1aBV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEI2Ehg77890KNceK/UTqfrnKMxwwUKhzpzaz9wiY6wnAiAxyrLS9luBE50fi7l2TVLD1+g0iAXIDhWY6kDbmYVclg=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-4_1609351760243_0.6562380431958359"},"_hasShrinkwrap":false},"1.0.0-5":{"name":"next-ssr-form","version":"1.0.0-5","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../."},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-5","dist":{"shasum":"9c7bf85f90d2cc3a8297e3a430a0fa40700d2519","integrity":"sha512-4PIeqWhADIuoyvODIh6xbh0o1CsX6j8GN+MZXFfuV1OuJ5qhVQZysxjHnUwtw0NeDZbc0b23WWn8tIeJiK0e1Q==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-5.tgz","fileCount":25,"unpackedSize":337000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7OhQCRA9TVsSAnZWagAAuB4P+weVzzFMTg3hEdGGKMNb\noe+865HYxnCFgYGaMp7K9ud+cSXvi6ggbyQzJxPVkp1V89sfrfFg2eP4NzU7\nxBYCLTgxj9KFKUaH5Qu2fCi4QJ/mEQuOYMB4phXWVr/QgxOnE4HQWCljz5rC\nrEUm44JeIoFPPK31Zn/6hQ32M3WLHNfxoTp1AdoSTI2mHQBseycYRR1fqIEF\ntwhxDAM4ZL4b9xU/LludCH97nir65SUq1gAsw9jl7SNqgFUsjl26GKDFZRmT\nuUQ0FErO63Bd2HtKhybujQvGwq50MtrLH/rhUVdeYbQrTjBT+X7AlOxDU6b2\n5woit6jOpUU0+FJPpAO9R0uaG9wWUVjVTjtDxGbAlMtROTVw8criIQk0YH8n\nfRuQ/sXQlGEdRG0I4zsagZ8+MHPEvWHzgQtA9LS0PzsudqTo2JNmJQmNcF23\n2iuFlfmdC8/XNNakdz1ebHVrE2d/I97Ewcwgo6yD6FcYaKY5fjosHQicBBSB\nUwU7w6hGAHJaitpWpfdlhJaRjVtl+8M+cdWbpTRXDMFPiAXcBr/6Ugd6teYF\n7Zy1oFBhAX6hN3c3sS8M6mNcp3oEdonsxEEBpRT+qq6w9CfBQF9ta+bxhR0R\nQYxYhBjCBJN2vIyv0fhytM/VH7qu1tRIq8e5YHHF+/rtt8d3WTOr7AV8dn9f\nH6ba\r\n=yZhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAl1MJZ6sbK5Z+JW2wD1zXqagFnskjKOE85IHiMCpzcQIhANlGyWImxnrCUh6miTQEByPMDoB8HDvl8JdfCKQyw1xl"}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-5_1609361487511_0.4426639402144392"},"_hasShrinkwrap":false},"1.0.0-6":{"name":"next-ssr-form","version":"1.0.0-6","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch --tsconfig ./tsconfig.tsdx.json","build":"tsdx build --tsconfig ./tsconfig.tsdx.json","test":"tsdx test","lint":"tsdx lint --tsconfig ./tsconfig.tsdx.json","prepare":"tsdx build --tsconfig ./tsconfig.tsdx.json","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../.","dev-symlink":"cd examples/typescript/node_modules/next-ssr-form && rm -rf src dist && ln -s ../../../../src src && ln -s ../../../../dist dist","dev-next":"next dev --tsconfig tsconfig.tsdx.json"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"globals":{"ts-jest":{"tsConfig":"tsconfig.tsdx.json"}},"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-6","dist":{"shasum":"84cb422352f3d42f4e066c374bca1b74ea5d24a6","integrity":"sha512-mN1ECY/hFnF42KLdYI98p342UL/1YbyFkkqkc5cjjt9nrQPT8WyXBqnPaxmy+w4s+9ZtSMrvtGiu7zc11Dx1SQ==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-6.tgz","fileCount":25,"unpackedSize":335544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7P6nCRA9TVsSAnZWagAAiHEP/jsj/h716kaB207EGDxc\nmFVFrvzZAIU52h8gXU5dWLYNROEJXXr0JQm2FvrOyrv/HSEwISI/iQ7ZDD1d\nuS1jT6tQiMU/yVIdDJr/MhihrwG1tQa4+8/y5hRRyibk0yYlx9rZfyzxBPhn\n21ZmV7xLXnMsxGU/vgS7MhqkfVTde6oC8rfW5RCDwpOpVXPkTMXExElCAdUw\neVmcQZLGLk9YWRg5ze/k8FKt46HPzMJN5QQZJao5BWdtfQVLBmZxchMCtVEc\nc2ivDmvhWs85oVxmHYYOCawRomh/5oyV9mtyO9TcGnWKKpBR8Qc56+wpRTki\nKyHXN/xy7cWrxms8qx9AYp0Co3744nYOHlCL0WAW4GKpEzWny8D4oj/s6x8J\njjqCV13viyEoYKaxtvU8iQgCMi1qRQ/9KZDLE5w9BH1TpOHgU+Si/I6b7rLb\n7Sb2t3ruk9/mB+FUjSDSdaq0E9WOIYUTp/6iXGQ/9+e+3qnYSdy2wps2sjiu\n4FDVuAS8nDpw/hGoPxSgbg3Lt1B2GT7TiV9jwqyOfgPj8ycEyCWRnloG3Yva\nmBwwod7Ae/igi4EChpz222AUvU56zM2cPp0F79AjwNkyV+h9GxC+TG0I1YQB\nO+c6ujesjwf+8hM0EnAPG3uqGLEY/mwSkVYKc4ufrMl3okI7BPFAO5R/wBQn\nUhA1\r\n=1h72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpLV76/hQB7W4BGFAM/Qfbab2zVO1kb/7bHAepSN8GzAiEA/FOAQFO5YKP+0MNFVQRwwEHlgsC/k8t8G0hZQgDt5rk="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-6_1609367207439_0.5153642801930429"},"_hasShrinkwrap":false},"1.0.0-7":{"name":"next-ssr-form","version":"1.0.0-7","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch --tsconfig ./tsconfig.tsdx.json","build":"tsdx build --tsconfig ./tsconfig.tsdx.json","test":"tsdx test","lint":"tsdx lint --tsconfig ./tsconfig.tsdx.json","prepare":"tsdx build --tsconfig ./tsconfig.tsdx.json","size":"size-limit","analyze":"size-limit --why","postpublish":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../.","dev-symlink":"cd examples/typescript/node_modules/next-ssr-form && rm -rf src dist && ln -s ../../../../src src && ln -s ../../../../dist dist","dev-next":"next dev"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"globals":{"ts-jest":{"tsConfig":"tsconfig.tsdx.json"}},"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"readmeFilename":"README.md","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will works without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form@next zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.0-7","dist":{"shasum":"1e21c964843ba60e3f4794d5eb8a7562cd0ce039","integrity":"sha512-kSn8dMbMrffVfaHQith91dnAct2becBAJ4YIHPmOhBwm68MlkteeTS2KLeg/ppJWlG+Nkuvro6H5GLaAVip1cA==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.0-7.tgz","fileCount":25,"unpackedSize":347714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf700WCRA9TVsSAnZWagAAm3cP/2f881sq+54eBWZPY1qk\nS07HHSonFxWmjKBrpe9dTBdowR64Tr9XeEX3+NiqTylf4jLb9b/Y0WBy8TMz\nQGaXChSXNdVH3+75EAgWPCgHorhvNegeYgWCHGPwS/uvSte3m5ktSY3lqhrW\nEDFbLfssQ9bm0OLqIS60k84tIgMkrzLuL9Wj5/DvgB6ohs+45g779nZYSX7o\n8Jay3YLzpvHF5+Q6AywDQdyurSqFVqh3Ce3F5e4MeAhKAJwpePXPCy4UfRvv\nuK0mEavPyq/ry5uJe32a83QDZmVJsY+AuGbUWABYS29jTDMBd8nNQhP1aICA\nnLL9QjbSUrIKp2G9ys6FSzytjsOdUDLVUSundIuc9VF43Th9I+nl6URp80td\nEdpMpImi5m8oV/Du7OJmfxTY9jn0YxGNkvSzq7O1WPGngfoTpUwHNDjLGOS9\nAuMrTxlVBSKUeLPCEPOzWqRsKHhIjaOs5HKoVQVdmU/Z9RU1njY/K/AI9mm9\nQHPEfclRHZucEnBEatwY+5iGZDX6G/9hPFRQzuN91qy1CIRr+6M8VsvSu31u\nIshvgszBEtAq4P/EtO+4fnFc9PhyGq1iPyr9yyV6Ax2za9gXjxedHIjgZjt9\nvWT48m3Y/q0DnOFVfizG1XQ28fW5QuvvuPqQNtgMLAzBNqI6jLFSyL8jiZPV\nTZYJ\r\n=+mZj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3WLrR39p96i4BAn/7hJpjS3rrWptFMNt7Z79pdq1I7AiBaL6JIXjAlwZTnEW0dTSodE2q5I/fdUx0VAzIHq0zZkg=="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.0-7_1609518358146_0.0537395228926576"},"_hasShrinkwrap":false},"1.0.3":{"name":"next-ssr-form","version":"1.0.3","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"scripts":{"dev":"yarn start","start":"tsdx watch --tsconfig ./tsconfig.tsdx.json","build":"tsdx build --tsconfig ./tsconfig.tsdx.json","test":"tsdx test","lint":"tsdx lint --tsconfig ./tsconfig.tsdx.json","prepare":"tsdx build --tsconfig ./tsconfig.tsdx.json","size":"size-limit","analyze":"size-limit --why","bump-example":"cd examples/typescript && yarn add next-ssr-form@next && git add ../../. && git commit -m 'bump example' && git push","dev-next":"next dev"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"globals":{"ts-jest":{"tsConfig":"tsconfig.tsdx.json"}},"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.3","dist":{"shasum":"09fafceef6c99ec667ad330407c2e55838d81f55","integrity":"sha512-tC2oHaN4GUSz7iaSLE4uwWilPc14X/4i95GgP/VFVpQwPLAZBPS864W1IzJJBBqf/EnyX6y9o4gLlCRM6hgAOQ==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.3.tgz","fileCount":25,"unpackedSize":347600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8xIzCRA9TVsSAnZWagAAlZoP/jUvNqm58p4QSgmyWMMW\np/fQZGjTJzClKapcVOwT/Zq1ri0Z45Rd4Ig+7SEQMVwUdcMm46LjvKBrXhV2\nllNG3CqHbtStBwOSb8dFkKCuska6iMYnhAgJsnM9U1vWyWzeiD+kcKopiet5\n4XWVAkklYEJhh0gTPyAV7u1fPizUsjbV5SNQRyt7D2l8G2NV58c0u954twRi\nxtiYPkpoxpFnAnau82LE4Rfe24wQMirFFCWLUQNIo1DMLiIG1veHb7u8HHHQ\nX3/eONBqVdabLEuQQr9W/ESNyJ/Z8tzyzPtytIzD6wJscxdZedGPCPjqIFfS\nX0/10aOy2ocdhatkI41wJJTGFwmYn94XatKDEWEeH0245ES6bOu6c1rC+Z3y\nGK/Ke563B3YlbDiuQAtMjalekQhejdfOTTSdeIzwfKNS+/2kLDxhz5/6NL9x\nO7cVN9UGtcX+oAbty+dl5nk4WD0zLPMCWkTD8v/HZwknvBxAOw5gVXzh2lx6\ng6Mt3paLSq7Gq3yVo9kSUR7mlUKSlp65TNdnE86wAzNK+BBwBD5oAqOJ5BHZ\nL5IWSW9bVimXKHDylykU+fsgIzIgEgCRsXkm4JRW0HoxHKlCYM1BYdvfUPLA\nujufdjlMfGh5XQKvXAZndnz23BQjdvkgJ4bFbeAETVuebZpTAkG/LagEo1iJ\nvZsj\r\n=ZRT0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyNFn2umA5+C1BBYuXDMgb+qhQ1R2LDbiemdQO8rWhrwIhALRSfMqwaBIVqOMLVlfpLgU51uWLDsgDiOQSIA23JMwa"}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.3_1609765427346_0.5072842263591615"},"_hasShrinkwrap":false},"1.0.4":{"name":"next-ssr-form","version":"1.0.4","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=12"},"homepage":"https://github.com/KATT/next-ssr-form","scripts":{"dev":"yarn start","start":"tsdx watch --tsconfig ./tsconfig.tsdx.json","build":"tsdx build --tsconfig ./tsconfig.tsdx.json","test":"tsdx test","lint":"tsdx lint --tsconfig ./tsconfig.tsdx.json","prepare":"tsdx build --tsconfig ./tsconfig.tsdx.json","size":"size-limit","analyze":"size-limit --why","bump-example":"cd examples/typescript && yarn add next-ssr-form && git add ../../. && git commit -m 'bump example' && git push","dev-next":"next dev"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"jest":{"globals":{"ts-jest":{"tsConfig":"tsconfig.tsdx.json"}},"testPathIgnorePatterns":["/examples/"]},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"author":{"name":"KATT"},"module":"dist/next-ssr-form.esm.js","size-limit":[{"path":"dist/next-ssr-form.cjs.production.min.js","limit":"10 KB"},{"path":"dist/next-ssr-form.esm.js","limit":"10 KB"}],"dependencies":{},"peerDependencies":{"formik":">=2","next":">=10","react":">=17","zod":">=1.10"},"devDependencies":{"@size-limit/preset-small-lib":"^4.9.1","@testing-library/jest-dom":"^5.11.8","@testing-library/react":"^11.2.2","@types/node-fetch":"^2.5.7","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","formik":"^2.2.6","husky":"^4.3.6","next":"^10.0.4","playwright":"^1.7.1","react":"^17.0.1","react-dom":"^17.0.1","size-limit":"^4.9.1","tsdx":"^0.14.1","tslib":"^2.0.3","typescript":"^4.1.3","zod":"^1.11.11"},"description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","licenseText":"MIT License\n\nCopyright (c) 2020 KATT\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"next-ssr-form@1.0.4","dist":{"shasum":"64c620f54500502ab842b12c3ea0665a0895d38a","integrity":"sha512-5dcQ3Riiu+sLW4RjdZMSRZWW09K+xV0NCQvM2kEvQD359qrYbBYUfxNvftkN5g1Cb+Tw6SPdkdvuNqTcPyDnOg==","tarball":"https://registry.npmjs.org/next-ssr-form/-/next-ssr-form-1.0.4.tgz","fileCount":25,"unpackedSize":347650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf8xnaCRA9TVsSAnZWagAAXaAP/0D9+rj7DHXXnOPeQy1p\nEp/U1EI0PpRTnLjchvYINeVvF42s+C051NVeZeRyRlzFzfjyiF3Q4EZTP1Q2\n0YDfK0ixaFUCqSmFn7KPIE4yZwpcUSEgM/Fs9xY2M9egYsgFpOe+C1KmvKK/\n37FdrvLKXUarb31kGJvbLSCX7D3da/fmXJ2TIG7l8Fz+CTolngw+nd02/awK\n/Pl70W2DY1gulxERDGRZOke00gLjScYOEE1zSrPCDZlmSFHqlulN365kbE8+\nMTiBs15VqxhFjaj04D39/tPR9NPfzwTn6bkdt3EtHbYpssVp8qJVSTZg8v1N\nSVsLmMWTwI5MkkpSDok0P+t+QGfiulDoJaYTDmLLGWGq5f9bPkJMukwgCYI5\nEdin/K6PvdySHNv3cfCfG8MjM/neKpmal/tvoFmwbOsbFeCXvkKYuLBjvAOp\nqkEoigDcg3xT1LCFmtsgE1T+8C/GzWu0GYwZmj1ALa6/GpDemPA182x6r/uI\nodcwDxCFTSxOIH6CMLgnsGfIw8Pd+EKpn152mAMynrNEonrbN4uWM7qUd0cS\nLbgLsLdVX+alv7TYi4lZn8PDqTtxt1zFZTnoxo8M0xs8wCtcSETORh0YJna6\nYrKWIBfb8Bw45gBLJr+dwWwyo/2MHXKt6gOCep3TzoeCo3adxbyd56T4nRaq\nfpyC\r\n=ZB+3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBeBeruEL8iI2OLBJMfKxK/AayzSfh2ILyWwBQacE31IAiEAjPMVldIZnQoECvbT+vd+9mHpyX4gsfSnVrFh/p+5jzc="}]},"_npmUser":{"name":"katt","email":"alexander@n1s.se"},"directories":{},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-ssr-form_1.0.4_1609767386564_0.05662938018400432"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-29T02:18:42.582Z","0.1.0-1":"2020-12-29T02:18:42.736Z","modified":"2022-05-10T15:04:37.109Z","0.1.0-2":"2020-12-29T02:38:04.275Z","0.1.0-3":"2020-12-29T03:56:28.709Z","0.1.0-5":"2020-12-29T15:09:49.700Z","0.1.0-6":"2020-12-29T15:12:13.407Z","0.1.0-7":"2020-12-29T15:18:35.019Z","0.1.0-8":"2020-12-29T15:34:01.318Z","0.1.0-9":"2020-12-29T15:37:43.877Z","0.1.0-10":"2020-12-29T15:56:38.552Z","0.1.0":"2020-12-29T19:42:21.825Z","1.0.0":"2020-12-29T19:48:33.422Z","2.0.0":"2020-12-29T19:53:07.612Z","1.0.0-0":"2020-12-29T19:59:40.697Z","1.0.0-1":"2020-12-29T20:13:07.801Z","1.0.0-2":"2020-12-30T12:16:54.544Z","1.0.0-3":"2020-12-30T17:05:05.594Z","1.0.0-4":"2020-12-30T18:09:20.358Z","1.0.0-5":"2020-12-30T20:51:27.722Z","1.0.0-6":"2020-12-30T22:26:47.611Z","1.0.0-7":"2021-01-01T16:25:58.412Z","1.0.1":"2021-01-04T12:46:58.344Z","1.0.2":"2021-01-04T12:53:47.752Z","1.0.3":"2021-01-04T13:03:47.493Z","1.0.4":"2021-01-04T13:36:26.668Z"},"maintainers":[{"name":"katt","email":"alexander@n1s.se"}],"description":"> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**","author":{"name":"KATT"},"license":"MIT","readme":"# `next-ssr-form` \n\n> **⚠️⚠️  This is an experimental library and is likely to be discontinued  ⚠️⚠️**\n\n## About\n\n- 🔨   Uses Next.js' `getServerSideProps` to receive post data and provide helpers to the page to render the form\n- 🎷   E2E type safety! TypeScript types inferred between client & server with all the nice autocomplete jazz\n- 🔐   Server-side data validation that's propagated to page props & your `mutation`s' return values are inferred.\n- ☁️   Allows you to write data straight to the db with confidence\n- 🤘   Your page will wors without JS enabled (if you want it to)\n\n**(Peer) Dependencies:**\n\n- [zod](https://github.com/colinhacks/zod) for data validation\n- [Formik](https://github.com/formium/formik) as the form library\n\n\n**Table of contents:**\n\n- [`next-ssr-form`](#next-ssr-form)\n  - [About](#about)\n  - [Get started](#get-started)\n    - [0. Install](#0-install)\n    - [1. Add form to top of page](#1-add-form-to-top-of-page)\n    - [2. Add mutation to `getServerSideProps`](#2-add-mutation-to-getserversideprops)\n    - [3. Infer data types](#3-infer-data-types)\n    - [4. Use form](#4-use-form)\n  - [Author](#author)\n## Get started\n\n> ℹ️  Easiest thing to do is to look at the pages in [`examples/typescript`](./examples/typescript).\n\n### 0. Install\n```bash\nyarn add next-ssr-form zod formik\n```\n\n### 1. Add form to top of page\n\nIn a Next.js `page/..`:\n\n```tsx\nexport const createPostForm = createForm({\n  schema: z.object({\n    from: z.string().min(2),\n    message: z.string().min(4),\n  }),\n  defaultValues: {\n    message: \"\",\n    from: \"\",\n  },\n  formId: \"createPost\",\n});\n```\n\n### 2. Add mutation to `getServerSideProps`\n\n\n```tsx\nexport const getServerSideProps = async (ctx: GetServerSidePropsContext) => {\n  const createPostProps = await createPostForm.getPageProps({\n    ctx,\n    /**\n     * Your mutation function\n     * - Will only be called when there's a POST to this form based on the `formId`\n     * - 🌟 The `input` will be validated by the schema & the types inferred!\n     */\n    async mutation(input) {\n      return DB.createPost(input);\n    },\n  });\n\n  return {\n    props: {\n      // spread properties onto the prop\n      ...createPostProps,\n      posts: await DB.getAllPosts(),\n    },\n  };\n};\n```\n\n### 3. Infer data types\n\n```tsx\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\n\nexport default function Home(props: Props) {\n  // ...\n```\n\nYour data usage is now typesafe!\n\n### 4. Use form\n\n- Formik: Simple example with code scaffolding: [`pages/formik-scaffold.tsx`](./pages/formik-scaffold.tsx) or \n- Formik: More verbose example: [`pages/index.tsx`](./pages/index.tsx)\n- Without form library: [`pages/vanilla.tsx`](./pages/vanilla.tsx)\n\n<details>\n<summary>Basic form w/o JS</summary>\n\n```tsx\n\ntype Props = InferGetServerSidePropsType<typeof getServerSideProps>;\nexport default function Home(props: Props) {\n  const [feedback, setFeedback] = useState(\n    createPostForm.getFeedbackFromProps(props)\n  );\n  const initalValues = createPostForm.getInitialValues(props);\n  const initialErrors = createPostForm.getInitialErrors(props);\n\n  return (\n    <>\n      <h1>Normal http post (zod for validation)</h1>\n      <p>\n        Uses a standard <code>&lt;form&gt;</code> with the <code>action</code>\n        -attribute to post to the same page. Form data is handled in{' '}\n        <code>getServerSideProps</code> and feedback is passed through page\n        props.\n      </p>\n      <h2>My guestbook</h2>\n      {props.posts.map(item => (\n        <article key={item.id}>\n          <strong>\n            From {item.from} at {item.createdAt}:\n          </strong>\n          <p className=\"message\">{item.message}</p>\n        </article>\n      ))}\n      <h3>Add post</h3>\n\n      <form action={props.createPost.endpoints.action} method=\"post\">\n        <p className={`field ${initialErrors?.from ? 'field--error' : ''}`}>\n          <label>\n            Your name:\n            <br />\n            <input type=\"text\" name=\"from\" defaultValue={initalValues.from} />\n            {initialErrors?.from && (\n              <span className=\"field__error\">{initialErrors.from}</span>\n            )}\n          </label>\n        </p>\n        <p className={`field ${initialErrors?.message ? 'field--error' : ''}`}>\n          <label>\n            Your message:\n            <br />\n            <textarea name=\"message\" defaultValue={initalValues.message} />\n            {initialErrors?.message && (\n              <span className=\"field__error\">{initialErrors.message}</span>\n            )}\n          </label>\n        </p>\n        <input type=\"submit\" />\n\n        <br />\n        {feedback?.state === 'success' && (\n          <span className=\"feedback success\">Yay! Your entry was added</span>\n        )}\n\n        {feedback?.state === 'error' && (\n          <>\n            <span className=\"feedback error\">\n              Something went wrong: {feedback.error.message}. Full Error:{' '}\n              <pre>\n                {JSON.stringify(\n                  {\n                    ...feedback.error,\n                    message: feedback.error.message,\n                    stack: feedback.error.stack,\n                  },\n                  null,\n                  4\n                )}\n              </pre>\n            </span>\n          </>\n        )}\n      </form>\n    </>\n  );\n}\n```\n\n</details>\n\n## Author\n\n[@alexdotjs](https://twitter.com/alexdotjs)\n","readmeFilename":"README.md","homepage":"https://github.com/KATT/next-ssr-form"}