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
}