diff --git a/.gitignore b/.gitignore index 20b4814..b104065 100644 --- a/.gitignore +++ b/.gitignore @@ -36,5 +36,5 @@ yarn-error.* assets/emptyWiki.html # result of fetchHTML.mjs for debugging -jsonscript.html +tiddlerStore.json skinny.html diff --git a/scripts/fetchHTML.mjs b/scripts/fetchHTML.mjs index 2ac0b40..7f94589 100644 --- a/scripts/fetchHTML.mjs +++ b/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'; diff --git a/src/constants/paths.ts b/src/constants/paths.ts index 8499738..9a81f0a 100644 --- a/src/constants/paths.ts +++ b/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}`; diff --git a/src/pages/WikiWebView/useStreamChunksToWebView.ts b/src/pages/WikiWebView/useStreamChunksToWebView/index.ts similarity index 52% rename from src/pages/WikiWebView/useStreamChunksToWebView.ts rename to src/pages/WikiWebView/useStreamChunksToWebView/index.ts index f5700fc..e9fb251 100644 --- a/src/pages/WikiWebView/useStreamChunksToWebView.ts +++ b/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 diff --git a/src/pages/WikiWebView/useStreamChunksToWebView/webviewSideReceiver.ts b/src/pages/WikiWebView/useStreamChunksToWebView/webviewSideReceiver.ts new file mode 100644 index 0000000..d46d851 --- /dev/null +++ b/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 + } +} +`; \ No newline at end of file