refactor: save store as json

.gitignore

@@ -36,5 +36,5 @@ yarn-error.*
 assets/emptyWiki.html
 
 # result of fetchHTML.mjs for debugging
-jsonscript.html
+tiddlerStore.json
 skinny.html

scripts/fetchHTML.mjs

@@ -6,7 +6,7 @@ const jsonscript = await fetch(`http://${host}/tw-mobile-sync/get-skinny-tiddlyw
 console.log(Buffer.byteLength(html));
 console.log(Buffer.byteLength(jsonscript));
 fs.writeFileSync('skinny.html', html);
-fs.writeFileSync('jsonscript.html', jsonscript);
+fs.writeFileSync('tiddlerStore.json', jsonscript);
 
 // const getSkinnyTiddlywikiTiddlerStoreScriptUrl = new URL(`http://${host}/tw-mobile-sync/get-skinny-html`);
 // getSkinnyTiddlywikiTiddlerStoreScriptUrl.pathname = '/tw-mobile-sync/get-skinny-tiddlywiki-tiddler-store-script';

src/constants/paths.ts

@@ -4,5 +4,5 @@ import type { IWikiWorkspace } from '../store/wiki';
 export const WIKI_FOLDER_PATH = fs.documentDirectory === null ? undefined : `${fs.documentDirectory}wikis/`;
 export const WIKI_FILE_NAME = 'index.html';
 export const getWikiFilePath = (workspace: IWikiWorkspace) => `${workspace.wikiFolderLocation}/${WIKI_FILE_NAME}`;
-export const WIKI_STORE_NAME = 'store.html';
+export const WIKI_STORE_NAME = 'tiddlerStore.json';
 export const getWikiTiddlerStorePath = (workspace: IWikiWorkspace) => `${workspace.wikiFolderLocation}/${WIKI_STORE_NAME}`;

src/pages/WikiWebView/useStreamChunksToWebView.ts → src/pages/WikiWebView/useStreamChunksToWebView/index.ts

@@ -1,77 +1,10 @@
 import { MutableRefObject, useCallback, useEffect } from 'react';
 import { WebView } from 'react-native-webview';
-import { IHtmlContent } from './useTiddlyWiki';
+import { IHtmlContent } from '../useTiddlyWiki';
+import { webviewSideReceiver } from './webviewSideReceiver';
 
 const CHUNK_SIZE = 1_000_000;
 
-const webviewSideReceiver = `// Initialize an empty string to start with
-let tiddlersStoreAccumulatedContent = '';
-let wikiHTML = '';
-
-window.onChunk = function (event) {
-  const data = event.data;
-
-  switch (event.type) {
-    case 'TIDDLYWIKI_HTML': {
-      wikiHTML += data;
-      break;
-    }
-    case 'TIDDLER_STORE_SCRIPT_CHUNK': {
-      tiddlersStoreAccumulatedContent += data;
-      break;
-    }
-    case 'TIDDLER_STORE_SCRIPT_CHUNK_END': {
-      /**
-       * All information needed are collected.
-       * Start using html and store.
-       */
-
-      /**
-       * Use MutationObserver to watch if wikiHTML is loaded.
-       * We execute the script tags after this.
-       */
-      const observer = new MutationObserver((mutationsList, observer) => {
-      for (let mutation of mutationsList) {
-        if (mutation.type === 'childList') {
-          executeScripts();
-          observer.disconnect(); // Important: disconnect the observer once done.
-        }
-      }
-    });
-
-    // Start observing the body with the configured parameters
-    observer.observe(document.body, { childList: true });
-
-    // this ignores all script tags, so we need 'executeScripts()' later.
-    document.body.innerHTML = wikiHTML;
-    }
-  }
-};
-
-/**
- * Manually execute each of the script tags.
- * Delay the script execution slightly, until MutationObserver found document.body is ready.
- */
-function executeScripts() {
-  // load tiddlers store
-  const tiddlersStoreScript = document.createElement("script");
-  tiddlersStoreScript.textContent = tiddlersStoreAccumulatedContent;
-  document.body.appendChild(tiddlersStoreScript);
-
-  // load other scripts
-  const scriptElements = document.querySelectorAll("script");
-  for (let script of scriptElements) {
-    const newScript = document.createElement("script");
-    if (script.src) {
-      newScript.src = script.src;
-    } else {
-      newScript.textContent = script.textContent;
-    }
-    document.body.appendChild(newScript);
-    script.parentNode.removeChild(script);  // Remove the old script element
-  }
-}
-`;
 /**
  * WebView can't load large html string, so we have to send it using postMessage and load it inside the webview
  * @url https://github.com/react-native-webview/react-native-webview/issues/3126

src/pages/WikiWebView/useStreamChunksToWebView/webviewSideReceiver.ts

@@ -0,0 +1,73 @@
+export const webviewSideReceiver = `// Initialize an empty string to start with
+let tiddlersStoreAccumulatedContent = '';
+let wikiHTML = '';
+
+window.onChunk = function (event) {
+  const data = event.data;
+
+  switch (event.type) {
+    case 'TIDDLYWIKI_HTML': {
+      wikiHTML += data;
+      break;
+    }
+    case 'TIDDLER_STORE_SCRIPT_CHUNK': {
+      tiddlersStoreAccumulatedContent += data;
+      break;
+    }
+    case 'TIDDLER_STORE_SCRIPT_CHUNK_END': {
+      /**
+       * All information needed are collected.
+       * Start using html and store.
+       */
+
+      /**
+       * Use MutationObserver to watch if wikiHTML is loaded.
+       * We execute the script tags after this.
+       */
+      const observer = new MutationObserver((mutationsList, observer) => {
+      for (let mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          executeScripts();
+          observer.disconnect(); // Important: disconnect the observer once done.
+        }
+      }
+    });
+
+    // Start observing the body with the configured parameters
+    observer.observe(document.body, { childList: true });
+
+    // this ignores all script tags, so we need 'executeScripts()' later.
+    document.body.innerHTML = wikiHTML;
+    }
+  }
+};
+
+/**
+ * Manually execute each of the script tags.
+ * Delay the script execution slightly, until MutationObserver found document.body is ready.
+ */
+function executeScripts() {
+  // load tiddlers store
+  const tiddlersStoreScript = document.createElement("script");
+  tiddlersStoreScript.type = 'application/json';
+  tiddlersStoreScript.class = 'tiddlywiki-tiddler-store';
+  tiddlersStoreScript.textContent = tiddlersStoreAccumulatedContent;
+  document.body.appendChild(tiddlersStoreScript);
+
+  // load other scripts
+  const scriptElements = document.querySelectorAll("script");
+  for (let script of scriptElements) {
+    const newScript = document.createElement("script");
+    if (script.src) {
+      newScript.src = script.src;
+      newScript.class = script.class;
+      newScript.type = script.type;
+      newScript.id = script.id;
+    } else {
+      newScript.textContent = script.textContent;
+    }
+    document.body.appendChild(newScript);
+    script.parentNode.removeChild(script);  // Remove the old script element
+  }
+}
+`;