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.

Sign up for GitHub

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

Jump to bottom

Use compression to shorten URLs #36

Merged
merged 1 commit into from
Aug 22, 2024
Merged

Use compression to shorten URLs #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Menu } from './Navigation'
import { PreferencesContext } from './Popups/Settings'
import { useWindowDimensions } from './utils/window_width'
import LeanLogo from './assets/logo.svg'
import LZString from 'lz-string';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This library has the MIT license.

I considered using CompressionStream with gzip but it only became supported in Safari last year. I figured it would be bad if some live URLs (generated by people with modern browsers) didn't work on browsers that have a non-trivial amount of users left.

I came across lz-stream because it's used in sharplab.io, a C# REPL : https://github.com/ashmind/SharpLab/blob/078c4e2c5a790f6b7203401c2ec63de22913c0d1/source/WebApp/app/features/persistent-state/handlers/url.ts#L1

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Aside: sharplab does an extra thing it calls "pre-compression" where it replaces some common substrings with shorter ones (@3, @7 etc.) before sending it to this library: https://github.com/ashmind/SharpLab/blob/main/source/WebApp/app/features/persistent-state/handlers/url/precompressor.ts

I did some quick checks and it wasn't a big deal. If you're interested I could get some actual data using the benchmark process I described in the PR description. The trade-off is extra complexity/.js size for a much smaller reduction in URL size.

Copy link
Collaborator

Choose a reason for hiding this comment

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

If you want to further optimise the algorithm, please feel free to do so, I'd happily merge it :)


import CodeMirror, { EditorView } from '@uiw/react-codemirror'

Expand All @@ -26,6 +27,7 @@ interface UrlArgs {
project: string | null
url: string | null
code: string | null
codez: string | null
}

/**
Expand Down Expand Up @@ -286,7 +288,11 @@ function App() {
if (args.code) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The "code" argument is still supported so that old URLs continue to work.

Loading a URL like that will cause the URL to be immediately replaced in the address bar with a codez URL (if the code is compressible -- see below.)

Copy link
Collaborator

Choose a reason for hiding this comment

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

I will update the docs after I merged your PR; the code argument also has to keep working as is, because Zulip needs it for auto generating links from code blocks.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh, that's cool!

let _code = decodeURIComponent(args.code)
setContent(_code)
} else if (args.codez) {
let _code = LZString.decompressFromBase64(args.codez);
setContent(_code);
}

if (args.url) {setUrl(decodeURIComponent(args.url))}
if (args.project && args.project != project) {
console.log(`[Lean4web] setting project to ${args.project}`)
Expand Down Expand Up @@ -320,18 +326,24 @@ function App() {
let _project = (project == 'mathlib-demo' ? null : project)
if (code === contentFromUrl) {
if (url !== null) {
let args = {project: _project, url: encodeURIComponent(url), code: null}
let args = {project: _project, url: encodeURIComponent(url), code: null, codez: null}
history.replaceState(undefined, undefined!, formatArgs(args))
} else {
let args = {project: _project, url: null, code: null}
let args = {project: _project, url: null, code: null, codez: null}
history.replaceState(undefined, undefined!, formatArgs(args))
}
} else if (code === "") {
let args = {project: _project, url: null, code: null}
let args = {project: _project, url: null, code: null, codez: null}
history.replaceState(undefined, undefined!, formatArgs(args))
} else {
let args = {project: _project, url: null, code: fixedEncodeURIComponent(code)}
history.replaceState(undefined, undefined!, formatArgs(args))
const compressed = LZString.compressToBase64(code).replace(/=*$/, '');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Trimming trailing = because (A) it meses with the args parsing (B) it's not necessary anyway (these are padding bytes from base64; but the decompression doesn't actually care if they are there)

if(compressed.length < code.length) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I made this only use compression if its actually a win (see charts in PR description).

For very small character counts it isn't always a win, although it also doesn't really matter anyway.
If you'd like it to always format URLs with codez I can remove this check.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We talked in DM; the check here is biased against compression because code is smaller than fixedEncodeURIComponent(code)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in fa4342d

let args = {project: _project, url: null, code: null, codez: compressed}
history.replaceState(undefined, undefined!, formatArgs(args))
} else {
let args = {project: _project, url: null, code: fixedEncodeURIComponent(code), codez: null}
history.replaceState(undefined, undefined!, formatArgs(args))
}
}
}, [editor, project, code, contentFromUrl])

Expand Down
19 changes: 19 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,14 @@
"@fortawesome/react-fontawesome": "^0.2.2",
"@mui/material": "^5.16.4",
"@types/file-saver": "^2.0.7",
"@types/lz-string": "^1.5.0",
"@uiw/react-codemirror": "^4.23.0",
"concurrently": "^8.2.2",
"express": "^4.19.2",
"file-saver": "^2.0.5",
"ip-anonymize": "^0.1.0",
"lean4monaco": "^1.0.24",
"lz-string": "^1.5.0",
"memfs": "^4.11.1",
"nocache": "^4.0.0",
"node": "^22.6.0",
Expand Down
Loading