Merge ca185b8 into b946351

Himenon · Oct 17, 2018 · eec8e1d · eec8e1d
2 parents b946351 + ca185b8
commit eec8e1d
Show file tree

Hide file tree

Showing 13 changed files with 1,446 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "test": "jest -c jest.config.json --detectOpenHandles",
     "test:coverage": "yarn run test -- --coverage && cat ./coverage/lcov.info | npx coveralls",
     "test:watch": "yarn run test -- --watchAll --verbose false",
+    "react:server": "node ./lib/react-starter/server.js",
     "version:major": "changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version major",
     "version:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor",
     "version:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch"
@@ -43,12 +44,15 @@
     "js-yaml": "^3.12.0",
     "npm-run-all": "^4.1.3",
     "pre-commit": "^1.2.2",
+    "prettier": "^1.14.3",
     "react-test-renderer": "^16.5.2",
     "section-matter": "^1.0.0",
     "supertest": "^3.3.0",
     "ts-jest": "^23.10.4",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
+    "tslint-config-prettier": "^1.15.0",
+    "tslint-plugin-prettier": "^2.0.0",
     "typescript": "^3.1.3"
   },
   "husky": {
@@ -64,9 +68,14 @@
     "cookie-parser": "^1.4.3",
     "express": "^4.16.4",
     "express-session": "^1.15.6",
+    "mdast-util-to-hast": "^3.0.2",
     "portfinder": "^1.0.17",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
+    "remark": "^9.0.0",
+    "remark-html": "^8.0.0",
+    "remark-parse": "^5.0.0",
+    "remark-react": "^4.0.3",
     "styled-components": "^3.4.10"
   }
 }
diff --git a/src/react-starter/base.tsx b/src/react-starter/base.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export const Html = (props: React.Props<{}>) => {
+  return (
+    <html>
+      <head>
+        <title>App</title>
+      </head>
+      <body>
+        <div id="app">{props.children}</div>
+        <script src="/lib/react-starter/client.js" />
+      </body>
+    </html>
+  );
+};
diff --git a/src/react-starter/client.tsx b/src/react-starter/client.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { App } from "./oneshot";
+
+ReactDOM.render(<App />, document.getElementById("app"));
+
diff --git a/src/react-starter/oneshot.tsx b/src/react-starter/oneshot.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+// import * as ReactDOM from "react-dom";
+import * as remark from "remark";
+import reactRenderer from "remark-react";
+
+export class App extends React.Component<{}, { text: string }> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      text: "# hello world"
+    };
+  }
+  onChange(e: React.ChangeEvent<HTMLTextAreaElement>): void {
+    this.setState({ text: e.target.value });
+  }
+  render() {
+    return (
+      <div>
+        <textarea value={this.state.text} onChange={this.onChange} />
+        <div id="preview">
+          {
+            // @ts-ignore
+            remark()
+              .use(reactRenderer)
+              .processSync(this.state.text).contents
+          }
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/react-starter/server.tsx b/src/react-starter/server.tsx
@@ -0,0 +1,31 @@
+import * as express from 'express';
+import * as ReactDOMServer from 'react-dom/server';
+import { App } from "./oneshot";
+import { Html } from "./base";
+import * as React from 'react';
+import * as url from 'url';
+import * as path from 'path';
+import * as fs from 'fs';
+
+const app = express();
+const dirname = process.cwd();
+
+app.get('/', (req: express.Request, res: express.Response, next: express.NextFunction) => {
+  ReactDOMServer.renderToNodeStream(<Html><App /></Html>).pipe(res);
+});
+
+app.get('/lib/*.js', (req: express.Request, res: express.Response, next: express.NextFunction) => {
+  const { pathname } = url.parse(req.url)
+  if (!pathname) {
+    return
+  }
+  const filePath = path.join(dirname, pathname)
+  if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+    fs.createReadStream(filePath).pipe(res)
+    return
+  }
+  const data = fs.readFileSync(filePath);
+  res.send(data);
+});
+
+app.listen(3500);
diff --git a/src/remark-react/__tests__/oneshot.test.tsx b/src/remark-react/__tests__/oneshot.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as OneShot from '../oneshot';
+import * as renderer from 'react-test-renderer';
+
+
+test('React.MyComponent', () => {
+  const comp = React.createElement(OneShot.App);
+  expect(comp).toEqual(<OneShot.App />);
+});
+
+test('レンダリングを行った結果が一致する', () => {
+  const component = renderer.create(
+    <OneShot.App />
+  );
+  const tree = component.toJSON();
+  expect(tree).toEqual(`# hello world
+`);
+})
diff --git a/src/remark-react/oneshot.tsx b/src/remark-react/oneshot.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import * as remark from "remark";
+import reactRenderer from "remark-react";
+
+export interface AppState {
+  text: string;
+}
+
+// @ts-ignore
+const processor = remark().use(reactRenderer, {
+  prefix: 'md-',
+  sanitize: true
+})
+
+export class App extends React.Component<{}, AppState> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      text: "# hello world"
+    };
+  }
+
+  onChange(e: React.ChangeEvent<HTMLTextAreaElement>): void {
+    this.setState({ text: e.target.value });
+  }
+
+  render() {
+    // @ts-ignore
+    const content = processor.processSync(this.state.text).contents
+    return content;
+  }
+}
+
diff --git a/tsconfig.json b/tsconfig.json
@@ -14,8 +14,9 @@
     ],
     "experimentalDecorators": true,
     "removeComments": true,
+    "composite": true,
     "sourceMap": true,
-    "allowJs": true,
+    "allowJs": false,
     "jsx": "react",
     "moduleResolution": "node",
     "rootDir": "./src",
@@ -39,6 +40,12 @@
       "section-matter": [
         "./typings/section-matter/index.d.ts"
       ],
+      "remark": [
+        "./typings/remark/index.d.ts"
+      ],
+      "remark-react": [
+        "./typings/remark-react/index.d.ts"
+      ],
       "section-matter*": [
         "./typings/section-matter*"
       ]

diff --git a/tslint.json b/tslint.json
@@ -1,13 +1,31 @@
 {
   "extends": [
-    "tslint:recommended"
+    "tslint:recommended",
+    "tslint-config-prettier"
+  ],
+  "rulesDirectory": [
+    "tslint-plugin-prettier"
   ],
   "linterOptions": {
     "exclude": [
       "node_modules/**/*.ts"
     ]
   },
   "rules": {
+    "prettie": [
+      true,
+      {
+        "useTabs": false,
+        "printWidth": 140,
+        "tabWidth": 2,
+        "singleQuote": true,
+        "trailingComma": "all",
+        "jsxBracketSameLine": false,
+        "parser": "typescript",
+        "bracketSpacing": true,
+        "semi": true
+      }
+    ],
     "no-string-throw": true,
     "no-unused-expression": true,
     "no-duplicate-variable": true,

diff --git a/typings/mdast-util-to-hast/index.d.ts b/typings/mdast-util-to-hast/index.d.ts
@@ -0,0 +1,5 @@
+export interface Options {
+  allowDangerousHTML: boolean
+  commonmark: boolean
+  handlers: Object
+}
diff --git a/typings/remark-react/index.d.ts b/typings/remark-react/index.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export interface Options {
+  createElement?: Function
+  sanitize?: boolean
+  toHast?: {}
+  remarkReactComponents?: {}
+}
+
+declare function remarkReact(options: Options): any;
+
+export default remarkReact;
diff --git a/typings/remark/index.d.ts b/typings/remark/index.d.ts
@@ -0,0 +1,7 @@
+interface Parser {}
+interface Options {}
+
+
+declare function parse(options: Options): Parser;
+
+export default parse;