add createPngUrl and createBrowserPreviewUrl, make gzip deterministic by fixing time (#3)

* add createPngUrl

* add createPngUrl and createBrowserPreviewUrl

* format

* update snapshots

* add format check

* update snapshots

* remove gzip time component variable

Author: seveibar

lib/index.ts

@@ -3,7 +3,9 @@ import { base64ToBytes, bytesToBase64 } from "./bytesToBase64"
 
 export function getCompressedBase64SnippetString(text: string) {
   // Compress the input string
-  const compressedData = gzipSync(strToU8(text))
+  const compressedData = gzipSync(strToU8(text.trim()), {
+    mtime: 1739063707691, // Date.now() when i wrote this line, ensures consistent output
+  })
 
   // Convert to base64
   const base64Data = bytesToBase64(compressedData)
@@ -12,7 +14,7 @@ export function getCompressedBase64SnippetString(text: string) {
 }
 
 export function getBase64PoundSnippetString(text: string) {
-  const base64Data = getCompressedBase64SnippetString(text)
+  const base64Data = getCompressedBase64SnippetString(text.trim())
   return `#data:application/gzip;base64,${base64Data}`
 }
 
@@ -33,6 +35,22 @@ export function createSvgUrl(
   return `https://svg.tscircuit.com/?svg_type=${svgType}&code=${encodeURIComponent(base64Data)}`
 }
 
+export function createBrowserPreviewUrl(
+  tscircuitCode: string,
+  view?: "pcb" | "schematic" | "3d",
+) {
+  const base64Data = getCompressedBase64SnippetString(tscircuitCode)
+  return `https://browser-preview.tscircuit.com/?view=${view}&code=${encodeURIComponent(base64Data)}`
+}
+
+export function createPngUrl(
+  tscircuitCode: string,
+  view: "pcb" | "schematic" | "3d",
+) {
+  const base64Data = getCompressedBase64SnippetString(tscircuitCode)
+  return `https://png.tscircuit.com/?view=${view}&code=${encodeURIComponent(base64Data)}`
+}
+
 export function createSnippetUrl(text: string, snippet_type?: string): string {
   // Construct the URL
   const typeParam = snippet_type ? `&snippet_type=${snippet_type}` : ""

package.json

@@ -4,7 +4,9 @@
   "version": "0.0.7",
   "type": "module",
   "scripts": {
-    "build": "tsup-node lib/index.ts --dts --format esm"
+    "build": "tsup-node lib/index.ts --dts --format esm",
+    "format": "biome format --write .",
+    "format:check": "biome format ."
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

tests/test1-basic-url.test.ts

@@ -1,5 +1,9 @@
 import { test, expect } from "bun:test"
-import { createSnippetUrl, getUncompressedSnippetString, getBase64PoundSnippetString } from "lib"
+import {
+  createSnippetUrl,
+  getUncompressedSnippetString,
+  getBase64PoundSnippetString,
+} from "lib"
 
 declare module "bun:test" {
   interface Matchers<T = unknown> {
@@ -16,5 +20,7 @@ export default () => (
 )
 `)
 
-  expect(url).toMatchInlineSnapshot(`"https://tscircuit.com/editor?#data:application/gzip;base64,H4sIAMaEkmcAAy2NTQ7CIBhE95xiwqpdtVWXhUO4ckuBClF+Ap/RxHh30Xb3JvMyw+wrp0IwdlWPO6HrISQ6BsxLUsXg6Q05wacxBA5n/dXRnmSTmlZs9ZVSwQYqatuEG8eaEuXiY/PH03jgiCq06jxxVO0u4n38IOtlg+G3Ng//T8l69gUyPWjAmAAAAA=="`)
+  expect(url).toMatchInlineSnapshot(
+    `"https://tscircuit.com/editor?#data:application/gzip;base64,H4sIAJsBqGcAAy2NTQ7CIBhE9z3FhFW7KlWXhUO4ckuBClF+Ap/RxHh30Xb3JvMyY185FYKxq3rcCf0AIdF3wLwkVQye3pATbOIhMDjrr472JJvUtGKrr5QKNlBR2ybcGNaUKBcfm89P/MAQVWjVeWKo2l3E+/hB1ssG429tHv+fshu+lSYxzJYAAAA="`,
+  )
 })

tests/test2-decompression.test.ts

@@ -17,5 +17,5 @@ pcbX={3} />
 
   const compressed = getBase64PoundSnippetString(originalText)
   const uncompressed = getUncompressedSnippetString(compressed)
-  expect(uncompressed).toEqual(originalText)
+  expect(uncompressed).toEqual(originalText.trim())
 })

tests/test3-svg-url.test.ts

@@ -14,6 +14,6 @@ export default () => (
   )
 
   expect(url).toMatchInlineSnapshot(
-    `"https://svg.tscircuit.com/?svg_type=pcb&code=H4sIAN2jkmcAAy2NTQ7CIBhE95xiwqpdtVWXhUO4ckuBClF%2BAp%2FRxHh30Xb3JvMyw%2Bwrp0IwdlWPO6HrISQ6BsxLUsXg6Q05wacxBA5n%2FdXRnmSTmlZs9ZVSwQYqatuEG8eaEuXiY%2FPH03jgiCq06jxxVO0u4n38IOtlg%2BG3Ng%2F%2FT8l69gUyPWjAmAAAAA%3D%3D"`,
+    `"https://svg.tscircuit.com/?svg_type=pcb&code=H4sIAJsBqGcAAy2NTQ7CIBhE9z3FhFW7KlWXhUO4ckuBClF%2BAp%2FRxHh30Xb3JvMyY185FYKxq3rcCf0AIdF3wLwkVQye3pATbOIhMDjrr472JJvUtGKrr5QKNlBR2ybcGNaUKBcfm89P%2FMAQVWjVeWKo2l3E%2B%2FhB1ssG429tHv%2Bfshu%2BlSYxzJYAAAA%3D"`,
   )
 })