add Lsx (React.Component) and LsxPostRenderInterceptor

packages/growi-plugin-lsx/.babelrc

@@ -1,9 +1,10 @@
 {
   "presets": [
-    "es2015"
+    "es2015", "react"
   ],
   "plugins": [
-    "add-module-exports"
+    "add-module-exports",
+    "transform-class-properties"
   ],
   "env": {
     "development": {

packages/growi-plugin-lsx/package.json

@@ -23,13 +23,16 @@
   },
   "homepage": "https://github.com/yuki-takei/crowi-plugin-lsx#readme",
   "dependencies": {
-    "string-replace-async": "^1.2.0"
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
   },
   "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-power-assert": "^1.0.0",
+    "babel-preset-react": "^6.23.0",
     "babel-register": "^6.23.0",
     "ncp": "^2.0.0",
     "power-assert": "^1.4.2"

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

@@ -0,0 +1,68 @@
+import React from 'react';
+
+export class Lsx extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoading: true,
+      html: '',
+      isError: false,
+      errorMessage: '',
+    };
+  }
+
+  componentDidMount() {
+    this.props.crowi.apiGet('/plugins/lsx', {currentPath: this.props.currentPath, args: this.props.lsxArgs})
+      .then((res) => {
+        if (res.ok) {
+          this.setState({ html: res.html });
+        }
+        else {
+          return Promise.reject(res.error);
+        }
+      })
+      .catch(error => {
+        this.setState({ isError: true, errorMessage: error });
+      })
+      // finally
+      .then(() => {
+        this.setState({ isLoading: false });
+      })
+  }
+
+  getInnerHTMLObj() {
+    return { __html: this.state.html };
+  }
+
+  render() {
+    if (this.state.isLoading) {
+      return (
+        <div>
+          <i class="fa fa-spinner fa-pulse fa-fw"></i>
+          <span class="lsx-blink">{this.props.tagExpression}</span>
+        </div>
+      );
+    }
+    if (this.isError) {
+      return (
+        <div>
+          <i class="fa fa-exclamation-triangle fa-fw"></i>
+          {this.props.tagExpression} (-> <small>{this.state.message})</small>
+        </div>
+      )
+    }
+    else {
+      const innerHtml = this.getInnerHTMLObj();
+      return <div dangerouslySetInnerHTML={innerHtml} />
+    }
+  }
+}
+
+PageHistory.propTypes = {
+  crowi: React.PropTypes.object.isRequired,
+  tagExpression: React.PropTypes.string.isRequired,
+  currentPath: React.PropTypes.string.isRequired,
+  lsxArgs: React.PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import BasicInterceptor from '../../../../lib/util/BasicInterceptor';
+
+/**
+ * The interceptor for lsx
+ *
+ *  replace lsx tag to HTML codes
+ *  when contextName is 'postRenderPreview' and '...' <- TODO
+ */
+export class LsxPostRenderInterceptor extends BasicInterceptor {
+
+  constructor(crowi) {
+    super();
+    this.crowi = crowi;
+  }
+
+  /**
+   * @inheritdoc
+   */
+  isInterceptWhen(contextName) {
+    return contextName === 'postRenderPreview';
+  }
+
+  /**
+   * @inheritdoc
+   */
+  process(contextName, ...args) {
+    const elem = document.getElementById('lsx-1234');
+
+    if (elem) {
+      ReactDOM.render(
+        <h1>Hello, world!</h1>,
+        elem
+      );
+    }
+
+    return Promise.resolve();
+  }
+
+}