search

vuejs / repl

Vue SFC REPL as a Vue 3 component
https://repl-vuejs.vercel.app
MIT License
908 stars 163 forks source link

feat: gzip serialized state #43

Closed KaelWD closed 2 years ago

KaelWD commented 2 years ago

The repl produces very long URLs, we can shorten them by gzipping the stringified state before converting to base64

backwards compatible, atou checks if the string was gzipped

Example Before (2156 bytes): eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cblx0aW1wb3J0IEdyb3VwIGZyb20gJy4vR3JvdXAuanMnXG4gIGltcG9ydCBJdGVtIGZyb20gJy4vSXRlbS52dWUnXG4gIGltcG9ydCBXcmFwcGVkSXRlbSBmcm9tICcuL1dyYXBwZWRJdGVtLnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxHcm91cD5cbiAgICA8SXRlbT5PbmU8L0l0ZW0+XG4gICAgPEl0ZW0+VHdvPC9JdGVtPlxuICAgIDxJdGVtPlRocmVlPC9JdGVtPlxuICA8L0dyb3VwPlxuXG4gIDxHcm91cD5cbiAgICA8V3JhcHBlZEl0ZW0+T25lPC9XcmFwcGVkSXRlbT5cbiAgICA8V3JhcHBlZEl0ZW0+VHdvPC9XcmFwcGVkSXRlbT5cbiAgICA8V3JhcHBlZEl0ZW0+VGhyZWU8L1dyYXBwZWRJdGVtPlxuICA8L0dyb3VwPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcInZ1ZS9zZXJ2ZXItcmVuZGVyZXJcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkdyb3VwLmpzIjoiaW1wb3J0IHsgcmVmLCBjb21wdXRlZCwgcHJvdmlkZSwgRnJhZ21lbnQsIFN1c3BlbnNlLCBoIH0gZnJvbSAndnVlJ1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIHNldHVwIChwcm9wcywgeyBzbG90cyB9KSB7XG4gICAgY29uc3QgaXRlbXMgPSByZWYoW10pXG4gICAgZnVuY3Rpb24gcmVnaXN0ZXIgKGlkKSB7XG4gICAgICBpdGVtcy52YWx1ZS5wdXNoKHsgaWQgfSlcbiAgICB9XG5cbiAgICBwcm92aWRlKCdncm91cCcsIHsgcmVnaXN0ZXIsIGl0ZW1zIH0pXG4gICAgXG4gICAgcmV0dXJuICgpID0+IChcbiAgICAgIGgoJ2RpdicsIHsgY2xhc3M6ICdncm91cCcgfSwgW1xuICAgICAgICBoKFN1c3BlbnNlLCBbXG4gICAgICAgICAgaChGcmFnbWVudCwgc2xvdHMuZGVmYXVsdD8uKCkpXG4gICAgICAgIF0pXG4gICAgICBdKVxuICAgIClcbiAgfVxufVxuIiwiSXRlbS52dWUiOiI8c2NyaXB0PlxuICBpbXBvcnQgeyBpbmplY3QsIG5leHRUaWNrIH0gZnJvbSAndnVlJ1xuICBcbiAgbGV0IF9pZCA9IDBcbiAgZnVuY3Rpb24gZ2V0SWQgKCkge1xuICAgIHJldHVybiBfaWQrK1xuICB9XG4gIFxuICBleHBvcnQgZGVmYXVsdCB7XG4gICAgYXN5bmMgc2V0dXAgKCkge1xuICAgICAgY29uc3QgaWQgPSBnZXRJZCgpXG4gICAgICBjb25zdCBncm91cCA9IGluamVjdCgnZ3JvdXAnKVxuICAgICAgXG4gICAgICBncm91cC5yZWdpc3RlcihpZClcbiAgICAgIGF3YWl0IG5leHRUaWNrKClcbiAgICAgIFxuICAgICAgcmV0dXJuIHsgZ3JvdXAgfVxuICAgIH1cbiAgfVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cIml0ZW1cIj5cbiAgICA8c2xvdCAvPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiV3JhcHBlZEl0ZW0udnVlIjoiPHNjcmlwdCBzZXR1cD5cblx0aW1wb3J0IEl0ZW0gZnJvbSAnLi9JdGVtLnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxJdGVtPlxuICAgIDxzbG90IC8+XG4gIDwvSXRlbT5cbjwvdGVtcGxhdGU+In0= After (832 bytes): eNqFVE2Pm0AM/SsWl4CWQM8RSdVLqz310JV6WFYVBSchDTOjmSHbCvHf6/ki5KPpJZmx3zzbz8ZD9EmI7NRjtIoKVctWaFCoe7EpWanbTnCp4YvkvYCt5B0sstzesoNalAzAI541dhPAXAzlHPBdVkJgc4Gb2Ty8yF0KJjgryC6OlcaN4SlsWHuki3mz+cqwsMEurC/v/J51L3GOLvLAd0s+y8vFmBvuYGzE/2Fc/GvUOY0in8qN0siptuwqIzRn1JzBwEvvUGW0gsGFKSPSztzLaK+1UKs8V9vaCHpQGZe7nE6Z7Bk1EzNU3fKn5O8KJRGXUTrjyMl4QrmUyBqUKB9xXkFveA3tWLKRSgnjQjX4WRhA4jaFmnei19ikICQ/tQ2m8FlWuw6ZTuFbrwQyRbY9jH5i3IyUDH9bmga3VX/UTgc7sxATk1ApRVBHrhWMSVCp5kxpaEljBWsTP359S5xr27Nat5yRddcqjRLitpkegnuUnaoj6Sh6tY8HaBuidv7RTRCEIuLFzhS8SG2ZjjD1gcMb9yspZckgTmC9gThE28eLpj3Z5/WxUmoFnhDGFF4DyuDOEs3MxnFW0aqQeaE+ZnGSnJFv0zmcktC1klHfwmd5Xgyb2fdMGrAD1hSD2qFf2vrXVZtclUfU8IPUWsMHc52k3qF+bkzpw4UWBH168lk4gnu9BqjUH1aHns9a5bts4tkIcXLpsUqS0+UeWjWBwr81Z6F7ZhqCp3qvWj2VHN+89HUMPtI4zYj9ebTeqOmu4Wv6yMlVRmGNmCZC7tcFwW6WxdUefbTJ/7WnH2U2X2kXuXjHPJnxL/fhD+k=
yyx990803 commented 2 years ago

Consider using fflate instead since it's significantly smaller (8kb vs 45kb): https://github.com/101arrowz/fflate