docs: use fflate for state compression

This commit is contained in:
Johann Schopplich
2025-11-29 21:52:51 +01:00
parent 0fff9c07bf
commit 22edbc7bf2
3 changed files with 26 additions and 13 deletions

View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import type { Delimiter } from '../../../../packages/toon/src'
import { useClipboard, useDebounceFn } from '@vueuse/core'
import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string'
import { unzlibSync, zlibSync } from 'fflate'
import { base64ToUint8Array, stringToUint8Array, uint8ArrayToBase64, uint8ArrayToString } from 'uint8array-extras'
import { computed, onMounted, ref, shallowRef, watch } from 'vue'
import { DEFAULT_DELIMITER, encode } from '../../../../packages/toon/src'
import VPInput from './VPInput.vue'
@@ -119,12 +120,15 @@ function encodeState() {
indent: indent.value,
}
return compressToEncodedURIComponent(JSON.stringify(state))
const compressedData = zlibSync(stringToUint8Array(JSON.stringify(state)))
return uint8ArrayToBase64(compressedData, { urlSafe: true })
}
function decodeState(hash: string) {
try {
const decodedData = decompressFromEncodedURIComponent(hash)
const bytes = base64ToUint8Array(hash)
const decompressedData = unzlibSync(bytes)
const decodedData = uint8ArrayToString(decompressedData)
if (decodedData)
return JSON.parse(decodedData) as PlaygroundState
}

View File

@@ -9,9 +9,10 @@
},
"devDependencies": {
"@vueuse/core": "^14.1.0",
"fflate": "^0.8.2",
"gpt-tokenizer": "^3.4.0",
"lz-string": "^1.5.0",
"markdown-it-mathjax3": "^4.3.2",
"uint8array-extras": "^1.5.0",
"unocss": "^66.5.9",
"vitepress": "^1.6.4",
"vitepress-plugin-llms": "^1.9.3"

26
pnpm-lock.yaml generated
View File

@@ -92,15 +92,18 @@ importers:
'@vueuse/core':
specifier: ^14.1.0
version: 14.1.0(vue@3.5.24(typescript@5.9.3))
fflate:
specifier: ^0.8.2
version: 0.8.2
gpt-tokenizer:
specifier: ^3.4.0
version: 3.4.0
lz-string:
specifier: ^1.5.0
version: 1.5.0
markdown-it-mathjax3:
specifier: ^4.3.2
version: 4.3.2
uint8array-extras:
specifier: ^1.5.0
version: 1.5.0
unocss:
specifier: ^66.5.9
version: 66.5.9(postcss@8.5.6)(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(tsx@4.20.6)(yaml@2.8.1))
@@ -2177,6 +2180,9 @@ packages:
picomatch:
optional: true
fflate@0.8.2:
resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
file-entry-cache@8.0.0:
resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
engines: {node: '>=16.0.0'}
@@ -2459,10 +2465,6 @@ packages:
lru-cache@10.4.3:
resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
lz-string@1.5.0:
resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
hasBin: true
magic-string@0.30.21:
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
@@ -3200,6 +3202,10 @@ packages:
ufo@1.6.1:
resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
uint8array-extras@1.5.0:
resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
engines: {node: '>=18'}
unconfig-core@7.4.1:
resolution: {integrity: sha512-Bp/bPZjV2Vl/fofoA2OYLSnw1Z0MOhCX7zHnVCYrazpfZvseBbGhwcNQMxsg185Mqh7VZQqK3C8hFG/Dyng+yA==}
@@ -5664,6 +5670,8 @@ snapshots:
optionalDependencies:
picomatch: 4.0.3
fflate@0.8.2: {}
file-entry-cache@8.0.0:
dependencies:
flat-cache: 4.0.1
@@ -5927,8 +5935,6 @@ snapshots:
lru-cache@10.4.3: {}
lz-string@1.5.0: {}
magic-string@0.30.21:
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5
@@ -6856,6 +6862,8 @@ snapshots:
ufo@1.6.1: {}
uint8array-extras@1.5.0: {}
unconfig-core@7.4.1:
dependencies:
'@quansync/fs': 0.1.5