Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: gzip serialized state #43

Merged
merged 4 commits into from
Jun 26, 2022
Merged

feat: gzip serialized state #43

merged 4 commits into from
Jun 26, 2022

Conversation

KaelWD
Copy link
Contributor

@KaelWD KaelWD commented Jun 7, 2022

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=

@KaelWD KaelWD force-pushed the feat/gzip branch 3 times, most recently from 212a0e9 to 5d50299 Compare June 7, 2022 17:35
removes checksum and header
src/env.d.ts Outdated Show resolved Hide resolved
src/utils.ts Outdated
return btoa(unescape(encodeURIComponent(data)))
const zipped = deflate(data, { level: 9 })
const b = Array.from(zipped, v => String.fromCharCode(v)).join('')
return btoa(b)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's no longer necessary to encode the data before passing it to btoa because the zipped string will only have ASCII characters?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct. Uint8Array is 0-255, btoa accepts Latin1 characters.

src/utils.ts Outdated

// old unicode hacks for backward compatibility
// https://base64.guru/developers/javascript/examples/unicode-strings
return decodeURIComponent(escape(b))
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it necessary to decode if the string wasn't initially encoded?

Copy link
Contributor Author

@KaelWD KaelWD Jun 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is so it still supports old links. Line 21 is checking for the zlib header and has an early return.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah of course 🤦‍♂️

@yyx990803
Copy link
Member

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

@yyx990803 yyx990803 merged commit b12eb88 into vuejs:main Jun 26, 2022
@KaelWD KaelWD deleted the feat/gzip branch June 27, 2022 04:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants