support caching

packages/app/src/components/ReactMarkdownComponents/Lsx/Lsx.tsx

@@ -180,28 +180,35 @@ export const Lsx = ({
         options: lsxContext.options,
       });
 
-      const basisViewersCount = result.toppageViewersCount;
       newNodeTree = generatePageNodeTree(pagePath, result.pages);
       setNodeTree(newNodeTree);
-      setBasisViewersCount(basisViewersCount);
+      setBasisViewersCount(result.toppageViewersCount);
+      setError(false);
+
+      // store to sessionStorage
+      tagCacheManager.cacheState(lsxContext, {
+        isError: false,
+        errorMessage: '',
+        isCacheExists,
+        basisViewersCount,
+        nodeTree: newNodeTree,
+      });
     }
     catch (error) {
       setError(true);
       setErrorMessage(error.message);
+
+      // store to sessionStorage
+      tagCacheManager.cacheState(lsxContext, {
+        isError: true,
+        errorMessage: error.message,
+        isCacheExists,
+      });
     }
     finally {
       setLoading(false);
-
-      // store to sessionStorage
-      // tagCacheManager.cacheState(lsxContext, {
-      //   isError,
-      //   isCacheExists,
-      //   basisViewersCount,
-      //   errorMessage,
-      //   nodeTree: newNodeTree,
-      // });
     }
-  }, [generatePageNodeTree, lsxContext]);
+  }, [basisViewersCount, generatePageNodeTree, isCacheExists, lsxContext]);
 
   useEffect(() => {
     // get state object cache
@@ -232,17 +239,20 @@ export const Lsx = ({
       );
     }
 
+    const showListView = nodeTree != null && (!isLoading || nodeTree.length > 0);
 
     return (
       <div className={isLoading ? 'lsx-blink' : ''}>
         { isLoading && (
           <div className="text-muted">
-            <i className="fa fa-spinner fa-pulse mr-1"></i>
-            {lsxContext.toString()}
-            { isCacheExists && <small>&nbsp;(Showing cache..)</small> }
+            <small>
+              <i className="fa fa-spinner fa-pulse mr-1"></i>
+              {lsxContext.toString()}
+              { isCacheExists && <>&nbsp;(Showing cache..)</> }
+            </small>
           </div>
         ) }
-        { nodeTree && (
+        { showListView && (
           <LsxListView nodeTree={nodeTree} lsxContext={lsxContext} basisViewersCount={basisViewersCount} />
         ) }
       </div>

packages/app/src/components/ReactMarkdownComponents/Lsx/lsx-context.ts

@@ -2,6 +2,7 @@ import { customTagUtils } from '@growi/core';
 
 const { OptionParser } = customTagUtils;
 
+
 export class LsxContext {
 
   pagePath: string;
@@ -24,19 +25,24 @@ export class LsxContext {
     return OptionParser.parseRange(this.options.depth);
   }
 
-  /**
-   * for printing errors
-   * @returns
-   */
-  toString(): string {
+  getStringifiedAttributes(separator = ', '): string {
     const attributeStrs = [`prefix=${this.pagePath}`];
     if (this.options != null) {
+      const optionEntries = Object.entries(this.options).sort();
       attributeStrs.push(
-        ...Object.entries(this.options).map(([key, val]) => `${key}=${val || 'true'}`),
+        ...optionEntries.map(([key, val]) => `${key}=${val || 'true'}`),
       );
     }
 
-    return `$lsx(${attributeStrs.join(', ')})`;
+    return attributeStrs.join(separator);
+  }
+
+  /**
+   * for printing errors
+   * @returns
+   */
+  toString(): string {
+    return `$lsx(${this.getStringifiedAttributes()})`;
   }
 
 }

packages/app/src/components/ReactMarkdownComponents/Lsx/tag-cache-manager.ts

@@ -1,5 +1,7 @@
 import { TagCacheManager } from '@growi/core';
 
+import { LsxContext } from './lsx-context';
+
 const LSX_STATE_CACHE_NS = 'lsx-state-cache';
 
 
@@ -8,8 +10,8 @@ let _instance;
 export function getInstance(): TagCacheManager {
   if (_instance == null) {
     // create generateCacheKey implementation
-    const generateCacheKey = (lsxContext) => {
-      return `${lsxContext.fromPagePath}__${lsxContext.args}`;
+    const generateCacheKey = (lsxContext: LsxContext) => {
+      return `${lsxContext.pagePath}__${lsxContext.getStringifiedAttributes('_')}`;
     };
 
     _instance = new TagCacheManager(LSX_STATE_CACHE_NS, generateCacheKey);

packages/app/src/services/renderer/renderer.ts → packages/app/src/services/renderer/renderer.tsx

@@ -365,7 +365,7 @@ export const generateViewOptions = (
     components.h1 = Header;
     components.h2 = Header;
     components.h3 = Header;
-    components.lsx = Lsx;
+    components.lsx = props => <Lsx {...props} forceToFetchData />;
   }
 
   // // Add configurers for viewer