impl cache mechanism

packages/growi-plugin-lsx/src/lib/util/LsxBeforeRenderPageInterceptor.js

@@ -1,50 +0,0 @@
-const stringReplaceAsync = require('string-replace-async');
-
-const BasicInterceptor = require('./BasicInterceptor');
-const Lsx = require('./Lsx');
-
-/**
- * The interceptor for lsx Server Side Rendering
- *
- *  replace lsx tag to HTML codes
- *  when contextName is 'beforeRenderPage'
- */
-class LsxBeforeRenderPageInterceptor extends BasicInterceptor {
-
-  constructor(crowi, app) {
-    super(crowi, app);
-    this.lsx = new Lsx(crowi, app);
-  }
-
-  /**
-   * @inheritdoc
-   */
-  isInterceptWhen(contextName) {
-    return contextName === 'beforeRenderPage';
-  }
-
-  /**
-   * @inheritdoc
-   */
-  process(contextName, ...args) {
-    const req = args[0];
-    const res = args[1];
-    const renderVars = args[2];
-
-    let promises = [];
-    return stringReplaceAsync(
-      renderVars.page.revision.body,
-      /\$lsx\((.*)\)/g,   // see: https://regex101.com/r/NQq3s9/2
-      (all, group1) => {
-        return this.lsx.renderHtml(req.user, req.path, group1);
-      }
-    ).then((results) => {
-      // replace body
-      renderVars.page.revision.body = results;
-      return Promise.resolve(...args);
-    });
-  }
-
-}
-
-module.exports = LsxBeforeRenderPageInterceptor;

packages/growi-plugin-lsx/src/resource/js/components/Lsx.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 
+import { LsxContext } from '../util/LsxContext';
+import { LsxCacheHelper } from '../util/LsxCacheHelper';
+
 export class Lsx extends React.Component {
 
   constructor(props) {
@@ -14,14 +17,15 @@ export class Lsx extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.lsxCache) {
+    // check cache exists
+    if (this.props.lsxStateCache) {
       this.setState({
         isLoading: false,
-        html: this.props.lsxCache.html,
-        isError: this.props.lsxCache.isError,
-        errorMessage: this.props.lsxCache.errorMessage,
+        html: this.props.lsxStateCache.html,
+        isError: this.props.lsxStateCache.isError,
+        errorMessage: this.props.lsxStateCache.errorMessage,
       });
-      return;
+      return;   // go to render()
     }
 
     const lsxContext = this.props.lsxContext;
@@ -38,11 +42,18 @@ export class Lsx extends React.Component {
         }
       })
       .catch(error => {
-        this.setState({ isError: true, errorMessage: error });
+        console.error(error);
+        const errorMessage = error.response.data.error.message;
+        console.error(errorMessage);
+        this.setState({ isError: true, errorMessage: errorMessage });
       })
       // finally
       .then(() => {
         this.setState({ isLoading: false });
+
+        // store to sessionStorage
+        const cacheKey = LsxCacheHelper.generateCacheKeyFromContext(lsxContext);
+        LsxCacheHelper.cacheState(cacheKey, this.state);
       })
   }
 
@@ -55,7 +66,7 @@ export class Lsx extends React.Component {
 
     if (this.state.isLoading) {
       return (
-        <div>
+        <div className="text-muted">
           <i className="fa fa-spinner fa-pulse fa-fw"></i>
           <span className="lsx-blink">{lsxContext.tagExpression}</span>
         </div>
@@ -63,9 +74,9 @@ export class Lsx extends React.Component {
     }
     if (this.state.isError) {
       return (
-        <div>
+        <div className="text-warning">
           <i className="fa fa-exclamation-triangle fa-fw"></i>
-          {lsxContext.tagExpression} (-> <small>{this.state.message})</small>
+          {lsxContext.tagExpression} (-> <small>{this.state.errorMessage})</small>
         </div>
       )
     }
@@ -80,5 +91,5 @@ Lsx.propTypes = {
   crowi: React.PropTypes.object.isRequired,
 
   lsxContext: React.PropTypes.instanceOf(LsxContext).isRequired,
-  lsxCache: React.PropTypes.instanceOf(LsxCache),
+  lsxStateCache: React.PropTypes.object,
 };

packages/growi-plugin-lsx/src/resource/js/util/Interceptor/LsxPostRenderInterceptor.js

@@ -5,6 +5,7 @@ import BasicInterceptor from '../../../../lib/util/BasicInterceptor';
 
 import { Lsx } from '../../components/Lsx';
 import { LsxContext } from '../LsxContext';
+import { LsxCacheHelper } from '../LsxCacheHelper';
 
 /**
  * The interceptor for lsx
@@ -34,8 +35,6 @@ export class LsxPostRenderInterceptor extends BasicInterceptor {
   process(contextName, ...args) {
     const context = Object.assign(args[0]);   // clone
 
-    let lsxCacheMap = JSON.parse(sessionStorage.getItem('lsx-cache')) || {};
-
     // forEach keys of lsxContextMap
     Object.keys(context.lsxContextMap).forEach((renderId) => {
       const elem = document.getElementById(renderId);
@@ -44,17 +43,16 @@ export class LsxPostRenderInterceptor extends BasicInterceptor {
         // get LsxContext instance from context
         let lsxContext = context.lsxContextMap[renderId];
 
-        // get cache container obj from sessionStorage
-        const cacheKey = lsxContext.generateCacheKey();
-
         // check cache exists
-        if (lsxCacheMap[cacheKey]) {
+        const cacheKey = LsxCacheHelper.generateCacheKeyFromContext(lsxContext);
+        const lsxStateCache = LsxCacheHelper.getStateCache(cacheKey);
+        if (lsxStateCache) {
           // render with cache
-          this.renderReactDOM(lsxContext, lsxCacheMap[cacheKey], elem);
+          this.renderReactDOM(lsxContext, lsxStateCache, elem);
         }
         else {
           // render without cache
-          this.renderReactDOM(lsxContext, false, elem);
+          this.renderReactDOM(lsxContext, undefined, elem);
         }
 
       }
@@ -63,9 +61,9 @@ export class LsxPostRenderInterceptor extends BasicInterceptor {
     return Promise.resolve();
   }
 
-  renderReactDOM(lsxContext, lsxCache, elem) {
+  renderReactDOM(lsxContext, lsxStateCache, elem) {
     ReactDOM.render(
-      <Lsx crowi={this.crowi} lsxContext={lsxContext} lsxCache={lsxCache} />,
+      <Lsx crowi={this.crowi} lsxContext={lsxContext} lsxStateCache={lsxStateCache} />,
       elem
     );
   }

packages/growi-plugin-lsx/src/resource/js/util/Interceptor/LsxPreRenderInterceptor.js

@@ -43,8 +43,8 @@ export class LsxPreRenderInterceptor extends BasicInterceptor {
     // TODO retrieve from args for interceptor
     const fromPagePath = currentPagePath;
 
-    // see: https://regex101.com/r/NQq3s9/2
-    context.parsedHTML = parsedHTML.replace(/\$lsx\((.*)\)/g, (all, group1) => {
+    // see: https://regex101.com/r/NQq3s9/3
+    context.parsedHTML = parsedHTML.replace(/\$lsx\((.*?)\)/g, (all, group1) => {
       const tagExpression = all;
       const lsxArgs = group1.trim();
 
@@ -56,19 +56,18 @@ export class LsxPreRenderInterceptor extends BasicInterceptor {
       lsxContext.lsxArgs = lsxArgs;
 
       const renderId = 'lsx-' + this.createRandomStr(8);
-      lsxContext.renderId = renderId;
 
       context.lsxContextMap[renderId] = lsxContext;
 
       // return replace strings
-      return this.createReactTargetDom(renderId, tagExpression);
+      return this.createReactTargetDom(renderId);
     });
 
     // resolve
     return Promise.resolve(context);
   }
 
-  createReactTargetDom(renderId, tagExpression) {
+  createReactTargetDom(renderId) {
     return `<div id="${renderId}" />`;
   }
 

packages/growi-plugin-lsx/src/resource/js/util/LsxCache.js

@@ -1,5 +0,0 @@
-export class LsxCache {
-  isError;
-  errorMessage;
-  html;
-}

packages/growi-plugin-lsx/src/resource/js/util/LsxCacheHelper.js

@@ -0,0 +1,26 @@
+export class LsxCacheHelper {
+
+  static retrieveFromSessionStorage() {
+    return JSON.parse(sessionStorage.getItem('lsx-cache')) || {};
+  }
+
+  static saveToSessionStorage(cacheObj) {
+    sessionStorage.setItem('lsx-cache', JSON.stringify(cacheObj));
+  }
+
+  static generateCacheKeyFromContext(lsxContext) {
+    return `${lsxContext.fromPagePath}__${lsxContext.lsxArgs}`;
+  }
+
+  static getStateCache(key) {
+    let cacheObj = LsxCacheHelper.retrieveFromSessionStorage();
+    return cacheObj[key];
+  }
+
+  static cacheState(key, lsxState) {
+    let cacheObj = LsxCacheHelper.retrieveFromSessionStorage();
+    cacheObj[key] = lsxState;
+
+    LsxCacheHelper.saveToSessionStorage(cacheObj);
+  }
+}

packages/growi-plugin-lsx/src/resource/js/util/LsxCacheManager.js

@@ -1,7 +0,0 @@
-class LsxCacheManager {
-
-  static retrieveFromSessionStorage() {
-    return JSON.parse(sessionStorage.getItem('lsx-cache')) || {};
-  }
-
-}

packages/growi-plugin-lsx/src/resource/js/util/LsxContext.js

@@ -1,13 +1,8 @@
 export class LsxContext {
 
-  renderId;
-
   currentPagePath;
   tagExpression;
   fromPagePath;
   lsxArgs;
 
-  generateCacheKey() {
-    return `${this.fromPagePath}__${this.lsxArgs}`;
-  }
 }