feat: encode minimal data in url search params and the rest in hash params to allow for longer urls while still maintaining server analytics feature

BassemHalim · BassemHalim · commit 80efa446f821 · 2025-05-09T19:56:41.000-07:00
diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
@@ -27,7 +27,8 @@ export const buildConfig = (appConfig: Partial<Config>) => {
   };
 
   // get query string params
-  const params = getParams();
+  // const params = getParams();
+  const params = getHashParams();
 
   const { version, ...paramsConfig } = upgradeAndValidate(loadParamConfig(config, params));
 
@@ -105,6 +106,31 @@ export const getParams = (queryParams = parent.location.search): UrlQueryParams
   return params;
 };
 
+export const getHashParams = (queryParams = parent.location.hash): UrlQueryParams => {
+  let params: { [key: string]: string | boolean } = Object.fromEntries(
+    new URLSearchParams(queryParams.replace('#', '?')),
+  );
+  let encodedParams = {};
+  Object.keys(params).forEach((key) => {
+    try {
+      const value = params[key] as string;
+      if (key === 'params') {
+        encodedParams = JSON.parse(decompress(value) || '{}');
+        if (!encodedParams || typeof encodedParams !== 'object') encodedParams = {};
+      } else {
+        params[key] = decodeURIComponent(value);
+      }
+    } catch {
+      //
+    }
+    params = { ...encodedParams, ...params };
+    if (params[key] === '') params[key] = true;
+    if (params[key] === 'true') params[key] = true;
+    if (params[key] === 'false') params[key] = false;
+  });
+  return params;
+};
+
 export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial<Config> => {
   // ?js
   // ?lang=js
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -93,7 +93,7 @@ import {
   getContentConfig,
   getEditorConfig,
   getFormatterConfig,
-  getParams,
+  getHashParams,
   getUserConfig,
   setConfig,
   upgradeAndValidate,
@@ -194,7 +194,8 @@ let i18n: Await<ReturnType<typeof import('./i18n').init>> | undefined;
 let split: ReturnType<typeof createSplitPanes> | null = null;
 let typeLoader: ReturnType<typeof createTypeLoader>;
 const screens: Screen[] = [];
-const params = getParams(); // query string params
+// const params = getParams(); // query string params
+const params = getHashParams();
 const iframeScrollPosition = { x: 0, y: 0 };
 
 let baseUrl: string;
@@ -1318,13 +1319,16 @@ const share = async (
         },
       }
     : config;
+  
+  const serverContent = { title: content.title, description: content.description }
+  
   const contentParam = shortUrl
     ? '?x=id/' +
       (await shareService.shareProject({
         ...content,
         result: includeResult ? getCache().result : undefined,
       }))
-    : '?x=code/' + compress(JSON.stringify(content));
+    : '?x=/' +compress(JSON.stringify(serverContent)) +'#x=code/' + compress(JSON.stringify(content)); // TODO choose a meaningful name for the param
 
   const currentUrl = (location.origin + location.pathname).split('/').slice(0, -1).join('/') + '/';
 
@@ -5236,7 +5240,14 @@ const importExternalContent = async (options: {
     }
 
     const importModule: typeof import('./UI/import') = await import(baseUrl + '{{hash:import.js}}');
-    urlConfig = await importModule.importCode(validUrl, getParams(), getConfig(), user, baseUrl);
+    // urlConfig = await importModule.importCode(validUrl, getParams(), getConfig(), user, baseUrl);
+    urlConfig = await importModule.importCode(
+      validUrl,
+      getHashParams(),
+      getConfig(),
+      user,
+      baseUrl,
+    );
 
     if (Object.keys(urlConfig).length === 0) {
       notifications.error(
