{"_id":"@4kizuki/rsc-component-types","_rev":"1-26de75d745b21b782d9e690cb13adbe9","name":"@4kizuki/rsc-component-types","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@4kizuki/rsc-component-types","version":"1.0.0","dependencies":{"@swc/helpers":"~0.5.2"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","devDependencies":{"@types/react":"^18.0.0"},"peerDependencies":{"react":"^18.0.0"},"publishConfig":{"access":"public"},"_id":"@4kizuki/rsc-component-types@1.0.0","gitHead":"86384594a28608d32c87fd11e353454c80f041cd","description":"The snippet below is a simple example of a React Client Component unintentionally using async function syntax.","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-kyPQHAi4nbRMiwlMs9FUsv9/GstHvZVus0hFHMUEMaGWHI2JtVpXlOyIIjwn2wRE8sVR005wegm2OPlrgCbfAg==","shasum":"5b9f15c22de3caa8a8e3225e3aeef8be817e313b","tarball":"https://registry.npmjs.org/@4kizuki/rsc-component-types/-/rsc-component-types-1.0.0.tgz","fileCount":11,"unpackedSize":2848,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBx8AI7XRTPyBocWYL9NIIH/67tVJxqSP2vmo4gr4a6/AiEAq6TL7y9gYf6c21z7yEr09xlygzlm4Yst2pI5gfmRoKY="}]},"_npmUser":{"name":"4kizuki","email":"4kizuki@h4dz.io"},"directories":{},"maintainers":[{"name":"4kizuki","email":"4kizuki@h4dz.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rsc-component-types_1.0.0_1712583839877_0.8463262897337513"},"_hasShrinkwrap":false},"1.1.0":{"name":"@4kizuki/rsc-component-types","version":"1.1.0","dependencies":{"@swc/helpers":"~0.5.2"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","devDependencies":{"@types/react":"^18.0.0"},"peerDependencies":{"react":"^18.0.0"},"publishConfig":{"access":"public"},"_id":"@4kizuki/rsc-component-types@1.1.0","gitHead":"91fb52d0bafcaaac0361b9c0839e6c08dd8344e1","description":"The snippet below is a simple example of a React Client Component unintentionally using async function syntax.","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-E5px4sNOGOEKd4CZLWMqB53aiM+NrwtxHo5QnV1g6Vki403IzTvbvfapWCHlg6a9frkvkPE/ibqB2lE9ObAzDw==","shasum":"75ade768b63becdb2deb43cf7a9497898c19c600","tarball":"https://registry.npmjs.org/@4kizuki/rsc-component-types/-/rsc-component-types-1.1.0.tgz","fileCount":11,"unpackedSize":2814,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmye7j1Rlk7vpr5tGqdCEWlfqwO8K5Jlev6QXF048yYAIhAPn4TlR3XPO6s6hEPPbjJzV6wXAH/kcGLpkyBs2T3Prt"}]},"_npmUser":{"name":"4kizuki","email":"4kizuki@h4dz.io"},"directories":{},"maintainers":[{"name":"4kizuki","email":"4kizuki@h4dz.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rsc-component-types_1.1.0_1712839651438_0.7110049642169867"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-08T13:43:59.776Z","1.0.0":"2024-04-08T13:44:00.022Z","modified":"2024-04-11T12:47:31.749Z","1.1.0":"2024-04-11T12:47:31.592Z"},"maintainers":[{"name":"4kizuki","email":"4kizuki@h4dz.io"}],"description":"The snippet below is a simple example of a React Client Component unintentionally using async function syntax.","readme":"# rsc-component-types\n\nThe snippet below is a simple example of a React Client Component unintentionally using async function syntax.\n\n```tsx\n\"use client\";\n\nconst MyComponent: FunctionComponent = async () => {\n  return <div>MyComponent</div>;\n};\n```\n\nNo build time error is reported for the above code snippet. However, the code will fail at runtime.\n\nWith the `rsc-component-types` package, you can prevent such unintentional usage of async function syntax in React Client Components.\n\n```tsx\n// OK\nconst GoodClientComponent: ClientComponent<{ children?: ReactNode }> = ({ children }) => {\n  // do something\n  return <div>{children}</div>;\n};\n\n// NG (compile error)\nconst WrongAsyncClientComponent: ClientComponent<{ children?: ReactNode }> = async ({ children }) => {\n  // do something\n  return <div>{children}</div>;\n};\n\n// OK\nconst GoodServerComponent: ServerComponent<{ children?: ReactNode }> = ({ children }) => {\n  // do something\n  return <div>{children}</div>;\n};\n\n// OK\nconst GoodAnyComponent: ServerComponent<{ children?: ReactNode }> = async ({ children }) => {\n  await assertSession(); // pseudo auth library\n\n  return <div>{children}</div>;\n};\n```\n","readmeFilename":"README.md"}