Compress code with snappyjs (#755)

* Compress Base64 strings with snappy

* Move wrapper fix to different PR

* Added snappy typescript declaration

* type str and ch

* Updated yarn.lock

packages/app-js/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@babel/runtime": "^7.2.0",
     "@polkadot/ui-app": "^0.24.15",
-    "codeflask": "1.4.0"
+    "codeflask": "1.4.0",
+    "snappyjs": "^0.6.0"
   }
 }

packages/app-js/src/Playground.tsx

@@ -11,6 +11,7 @@ import { Log, LogType, Snippet } from './types';
 import React from 'react';
 import { withRouter } from 'react-router';
 import { Transition } from 'semantic-ui-react';
+import snappy from 'snappyjs';
 import { withApi, withMulti } from '@polkadot/ui-api/index';
 import { Button, Dropdown } from '@polkadot/ui-app/index';
 import uiKeyring from '@polkadot/ui-keyring';
@@ -92,6 +93,7 @@ class Playground extends React.PureComponent<Props, State> {
       selectedValue: localStorage.getItem(STORE_SELECTED)
     };
     const customExamples = localData.examples ? JSON.parse(localData.examples) : [];
+
     const options: Array<Snippet> = sharedExample
       ? [sharedExample, ...customExamples, ...this.snippets]
       : [...customExamples, ...this.snippets];
@@ -288,19 +290,34 @@ class Playground extends React.PureComponent<Props, State> {
   }
 
   private decodeBase64 = (base64: string) => {
-    try {
-      const decoded = atob(base64);
+    const sharedExample = {
+      code: '',
+      label: { basic: true, children: 'URL', size: 'tiny' },
+      text: 'Shared code example (unsaved)',
+      type: 'shared',
+      value: `custom-${Date.now()}`
+    } as Snippet;
 
-      return ({
-        code: decoded,
-        label: { basic: true, children: 'URL', size: 'tiny' },
-        text: 'Shared code example (unsaved)',
-        type: 'shared',
-        value: `custom-${Date.now()}`
+    try {
+      const compStr = atob(base64);
+      const compU8a = new Uint8Array(compStr.length);
+
+      compU8a.forEach((_, i) => {
+        compU8a[i] = compStr.charCodeAt(i);
       });
-    } catch (e) {
-      return undefined;
+
+      const u8a = snappy.uncompress(compU8a);
+      const code = util.u8aToString(u8a);
+
+      sharedExample.code = code;
+    } catch (error) {
+      const errorMessage = this.props.t('ERROR: Unable to decode code example from URL');
+
+      console.error(`${errorMessage}: \n${error}`);
+      sharedExample.code = `// ${errorMessage}`;
     }
+
+    return sharedExample;
   }
 
   private generateLink = (): void => {
@@ -308,7 +325,14 @@ class Playground extends React.PureComponent<Props, State> {
       props: { history, match: { params: { base64 } } },
       state: { selected: { code } }
     } = this;
-    const base64code = btoa(code);
+
+    const u8a = util.stringToU8a(code);
+    const compU8a = snappy.compress(u8a);
+    const compStr = compU8a.reduce((str: string, ch: number) => {
+      return str + String.fromCharCode(ch);
+    }, '');
+
+    const base64code = btoa(compStr);
     const path = `/js/share/${base64code}`;
 
     if (base64code !== base64) {

packages/app-js/src/snappyjs.d.ts

@@ -0,0 +1,5 @@
+// Copyright 2017-2019 @polkadot/app-js authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+declare module 'snappyjs';

yarn.lock

@@ -11974,6 +11974,11 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+snappyjs@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/snappyjs/-/snappyjs-0.6.0.tgz#2bd550e5767fb1bc28140bf8d53bf9590576a386"
+  integrity sha512-VTBBV4C9SHLuNEw8qrxw3EnkYmzwe8ml5VA8zS6XChr/yQ/CEDobofC6j4S25QJQR0htRGD68Oh4TZxv/mpf7w==
+
 sntp@1.x.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"