{"_id":"@dytesdk/upgrade-to-rtk","_rev":"4-40853848205766497becac64ddd56ddb","name":"@dytesdk/upgrade-to-rtk","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@dytesdk/upgrade-to-rtk","version":"0.0.1","license":"MIT","_id":"@dytesdk/upgrade-to-rtk@0.0.1","maintainers":[{"name":"dyteindia","email":"dev@dyte.io"}],"bin":{"upgrade-to-rtk":"dist/dyte-codemod.js"},"dist":{"shasum":"ea2fa1087d3d5683aeaccd4376859fc439960dc2","tarball":"https://registry.npmjs.org/@dytesdk/upgrade-to-rtk/-/upgrade-to-rtk-0.0.1.tgz","fileCount":45,"integrity":"sha512-BzwWa3QykNFOF8tVTXr9rCnRBFLLDGwRuWYUG1umHFgLnEnWU9TQ3R/YB+Dty95xyqNEL20V5slktPHiXrttDQ==","signatures":[{"sig":"MEUCIDpCbnsCsAU8T44A7LhufIG+lZ261fWD05mIGTqxGEgnAiEA6C2ZSIkyyC5X54Sx9fbBcaW4mVHi+R+9onc9LWP+jAI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70817},"gitHead":"6635151d17fdb4b21924cc6f0ee9bedc4651a81b","scripts":{"dev":"tsc -d -w -p tsconfig.json","test":"jest","build":"tsc -d -p tsconfig.json"},"_npmUser":{"name":"dyteindia","email":"dev@dyte.io"},"_npmVersion":"10.9.2","description":"Transforms all dyte imports to new cloudflare realtimekit imports","directories":{},"_nodeVersion":"22.14.0","dependencies":{"inquirer":"^12.6.0","commander":"^13.1.0","typescript":"5.8.3","jscodeshift":"^17.3.0","@babel/preset-env":"^7.27.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.3.2","@types/jest":"^29.5.14","@types/node":"^22.15.14","@types/jscodeshift":"^17.3.0"},"_npmOperationalInternal":{"tmp":"tmp/upgrade-to-rtk_0.0.1_1747049700628_0.694489685200407","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@dytesdk/upgrade-to-rtk","version":"0.0.2","license":"MIT","_id":"@dytesdk/upgrade-to-rtk@0.0.2","maintainers":[{"name":"dyteindia","email":"dev@dyte.io"}],"homepage":"https://github.com/dyte-io/upgrade-to-rtk#readme","bugs":{"url":"https://github.com/dyte-io/upgrade-to-rtk/issues"},"bin":{"upgrade-to-rtk":"dist/dyte-codemod.js"},"dist":{"shasum":"3a4ba234208b604b440df5d297eb5f9c9370fc30","tarball":"https://registry.npmjs.org/@dytesdk/upgrade-to-rtk/-/upgrade-to-rtk-0.0.2.tgz","fileCount":45,"integrity":"sha512-1DB0tGzgWjy1xhcvB6uJsQpbaLKH0USOIP2ILtZOhSG2VmomW0wyfdS8G8BMjpIoPAGkMKIdSQTo+fHtEPQKxA==","signatures":[{"sig":"MEUCIQDE7kVE0UuIWZg8IUFNGCRhiVFzKuuhqGduBnMU1G7mDQIgNltZ9KCTlN8AuzWDo1TjWQod0s0OQ7iz/NCPX1HRxV4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70918},"gitHead":"1e1a4f6b09727a2d3e30830ad853642382c7df14","scripts":{"dev":"tsc -d -w -p tsconfig.json","test":"jest","build":"tsc -d -p tsconfig.json"},"_npmUser":{"name":"dyteindia","email":"dev@dyte.io"},"repository":{"url":"git+https://github.com/dyte-io/upgrade-to-rtk.git","type":"git"},"_npmVersion":"10.9.2","description":"Transforms all dyte imports to new cloudflare realtimekit imports","directories":{},"_nodeVersion":"22.14.0","dependencies":{"inquirer":"^12.6.0","commander":"^13.1.0","typescript":"5.8.3","jscodeshift":"^17.3.0","@babel/preset-env":"^7.27.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.3.2","@types/jest":"^29.5.14","@types/node":"^22.15.14","@types/jscodeshift":"^17.3.0"},"_npmOperationalInternal":{"tmp":"tmp/upgrade-to-rtk_0.0.2_1747050181721_0.5833359240727451","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@dytesdk/upgrade-to-rtk","version":"0.0.3","license":"MIT","_id":"@dytesdk/upgrade-to-rtk@0.0.3","maintainers":[{"name":"dyteindia","email":"dev@dyte.io"}],"homepage":"https://github.com/dyte-io/upgrade-to-rtk#readme","bugs":{"url":"https://github.com/dyte-io/upgrade-to-rtk/issues"},"bin":{"upgrade-to-rtk":"dist/dyte-codemod.js"},"dist":{"shasum":"0e6505d087bf835226dc08497ece2e77db7c0a0b","tarball":"https://registry.npmjs.org/@dytesdk/upgrade-to-rtk/-/upgrade-to-rtk-0.0.3.tgz","fileCount":45,"integrity":"sha512-H605kmlEUzI+Kp67yTAmwKPsFn6/zjztxbnh9G3kxI0CzgSXrJ00ybe//gI7cWx+Gi+/i7fAkeWHMdpP8P2Xuw==","signatures":[{"sig":"MEUCIQCTCodNPvaZZtYNZQor0YHJtYocpveXzhcIu3jTbJpngwIgbVBx5gB1aAjs4/8KEWy6ciIzFq35PMjwdxYQaDz5NjE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70902},"gitHead":"146cd00d4ae9ec8b00d2aaa3cbc76fbe9dc58f40","scripts":{"dev":"tsc -d -w -p tsconfig.json","test":"jest","build":"tsc -d -p tsconfig.json"},"_npmUser":{"name":"dyteindia","email":"dev@dyte.io"},"repository":{"url":"git+https://github.com/dyte-io/upgrade-to-rtk.git","type":"git"},"_npmVersion":"10.9.2","description":"Transforms all dyte imports to new cloudflare realtimekit imports","directories":{},"_nodeVersion":"22.14.0","dependencies":{"inquirer":"^12.6.0","commander":"^13.1.0","typescript":"5.8.3","jscodeshift":"^17.3.0","@babel/preset-env":"^7.27.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","ts-jest":"^29.3.2","@types/jest":"^29.5.14","@types/node":"^22.15.14","@types/jscodeshift":"^17.3.0"},"_npmOperationalInternal":{"tmp":"tmp/upgrade-to-rtk_0.0.3_1747120772394_0.7436503266343573","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-05-12T11:35:00.521Z","modified":"2025-09-22T09:13:02.866Z","0.0.1":"2025-05-12T11:35:00.804Z","0.0.2":"2025-05-12T11:43:01.880Z","0.0.3":"2025-05-13T07:19:32.593Z"},"bugs":{"url":"https://github.com/dyte-io/upgrade-to-rtk/issues"},"license":"MIT","homepage":"https://github.com/dyte-io/upgrade-to-rtk#readme","repository":{"url":"git+https://github.com/dyte-io/upgrade-to-rtk.git","type":"git"},"description":"Transforms all dyte imports to new cloudflare realtimekit imports","maintainers":[{"email":"dev@dyte.io","name":"dyteindia"},{"email":"roerohan@gmail.com","name":"roerohan"}],"readme":"# Dyte to RTK Codemod\n\nThis repository contains an executable script to update all your code references that use imports and packages from `@dytesdk/**` packages to `@cloudflare/**` packages.\n\nThe package also removes the previous dytesdk packages and installs the new cloudflare pacakges\n\neg.\n\n```ts\nimport { DyteParticipantTile } from \"@dytesdk/react-ui-kit\";\nimport { useDyteMeeting } from \"@dytesdk/react-web-core\";\n\nfunction Meeting() {\n  const { meeting } = useDyteMeeting();\n  <DyteParticipantTile\n    ...\n    meeting={meeting}\n    ...\n  />;\n}\n```\n\nwill get automatically udpated to\n\n```tsx\nimport { RtkParticipantTile } from '@cloudflare/realtimekit-react-ui';\nimport { useRealtimeKitMeeting } from '@cloudflare/realtimekit-react';\n\nfunction Meeting() {\n  const { meeting } = useRealtimeKitMeeting();\n  <RtkParticipantTile\n    ...\n    meeting={meeting}\n    ...\n  />;\n}\n```\n\nThe script also accomodates\n\n## Alias imports\n\n```tsx\nimport {\n  DyteProvider as YoloProvider,\n  useDyteClient as useYoloClient,\n} from \"@dytesdk/react-web-core\";\n\nfunction App() {\n  const [meeting, initMeeting] = useYoloClient();\n\n  useEffect(() => {\n    initMeeting({\n      authToken: \"\",\n      defaults: {\n        audio: false,\n        video: false,\n      },\n    });\n  }, []);\n\n  <YoloProvider value={meeting}>\n    <Meeting />\n  </YoloProvider>;\n}\n```\n\ngets updated to\n\n```tsx\n// @ts-nocheck\nimport {\n  RealtimeKitProvider as YoloProvider,\n  useRealtimeKitClient as useYoloClient,\n} from \"@cloudflare/realtimekit-react\";\n\nfunction App() {\n  const [meeting, initMeeting] = useYoloClient();\n\n  useEffect(() => {\n    initMeeting({\n      authToken: \"\",\n      defaults: {\n        audio: false,\n        video: false,\n      },\n    });\n  }, []);\n\n  <YoloProvider value={meeting}>\n    <Meeting />\n  </YoloProvider>;\n}\n```\n\n## Namespace imports\n\n```tsx\nimport * as DyteComponents from \"@dytesdk/react-ui-kit\";\n\nfunction Spinner() {\n  return <DyteComponents.DyteSpinner className=\"w-12 h-12 text-blue-600\" />;\n}\n```\n\ngets updated to\n\n```tsx\nimport * as DyteComponents from \"@cloudflare/realtimekit-react-ui\";\n\nfunction Spinner() {\n  return <DyteComponents.RtkSpinner className=\"w-12 h-12 text-blue-600\" />;\n}\n```\n\n(You would have to change your Namespaces accordingly)\n\n## Direct type imports\n\n```tsx\nimport { DyteSidebarView } from \"@dytesdk/ui-kit/dist/types/components/dyte-sidebar-ui/dyte-sidebar-ui\";\nimport { DyteSidebarSection } from \"@dytesdk/ui-kit/dist/types/components/dyte-sidebar/dyte-sidebar\";\nimport type { DyteParticipant, DytePlugin, DyteSelf } from \"@dytesdk/web-core\";\n\nfunction SidebarWithCustomUI() {\n  const [view, setView] = useState<DyteSidebarView>(\"sidebar\");\n  const [section, setSection] = useState<DyteSidebarSection>();\n  const pluginsRef = useRef<DytePlugin[]>([]);\n  const screensharesRef = useRef<(DyteParticipant | DyteSelf)[]>([]);\n}\n```\n\ngets updated to\n\n```tsx\nimport { RtkSidebarView } from \"@cloudflare/realtimekit-ui/dist/types/components/rtk-sidebar-ui/rtk-sidebar-ui\";\nimport { RtkSidebarSection } from \"@cloudflare/realtimekit-ui/dist/types/components/rtk-sidebar/rtk-sidebar\";\nimport type {\n  RTKParticipant,\n  RTKPlugin,\n  RTKSelf,\n} from \"@cloudflare/realtimekit\";\n\nfunction SidebarWithCustomUI() {\n  const [view, setView] = useState<RtkSidebarView>(\"sidebar\");\n  const [section, setSection] = useState<RtkSidebarSection>();\n  const pluginsRef = useRef<RTKPlugin[]>([]);\n  const screensharesRef = useRef<(RTKParticipant | RTKSelf)[]>([]);\n}\n```\n\n## Event listener names\n\nThere was one case from the ui-kit where we had an event being emitted called `dyteStateUpdate` and uses of this are also updated to `rtkStateUpdate`\n\n```tsx\ndocument.body.addEventListener(\"dyteStateUpdate\", handleDyteStateUpdate);\ndocument.body.on(\"dyteStateUpdate\", handleDyteStateUpdate);\n\nreturn () => {\n  document.body.removeEventListener(\"dyteStateUpdate\", handleDyteStateUpdate);\n  document.body.off(\"dyteStateUpdate\", handleDyteStateUpdate);\n};\n```\n\ngets updated to\n\n```tsx\ndocument.body.addEventListener(\"rtkStateUpdate\", handleDyteStateUpdate);\ndocument.body.on(\"rtkStateUpdate\", handleDyteStateUpdate);\n\nreturn () => {\n  document.body.removeEventListener(\"rtkStateUpdate\", handleDyteStateUpdate);\n  document.body.off(\"rtkStateUpdate\", handleDyteStateUpdate);\n};\n```\n\n# Usage\n\n```sh\nnpx @dytesdk/upgrade-to-rtk <path> # . by default\n```\n\nEnsure that the path you are running on is the parent folder containing the `package.json`\n\n# Setting up locally\n\n1. The best way to test is creating an expected \\*.input.\\* file and a corresponding expected \\*.output.\\* file in the `bin/transforms/__testfixtures__` folder\n\n2. After that add the test to `bin/transforms/__tests__/dyte-to-rtk.ts`\n\n3. Finally, running `npm t` should test your changes with all existing files and the new change you have created.\n\nIf you would like to run the codemod locally on a repo you may run,\n\n```sh\nnpm i\nnpm run dev\ncd /path/to/desired/repo\nnpx /path/to/upgrade-to-rtk-repo\n```\n\n# Issues\n\nThe entire codemod was tested with the [dyte react samples repo](https://github.com/dyte-io/react-samples) and hence most test cases and conditions are derived from there, if you see any issues on your codebase please raise and issue! And as always PRs are welcome :)\n","readmeFilename":"README.md"}