Merge 0e40346 into 8038949

.vscode/cSpell.json

@@ -0,0 +1,23 @@
+{
+  "version": "0.1",
+  "language": "en",
+  "words": [
+    "Incompose",
+    "flyd",
+    "lifecycle",
+    "lodash's",
+    "referentially",
+    "rxjsconfig",
+    "unmount",
+    "vdom",
+    "xstream",
+    "zanettin",
+    "portfinder",
+    "resave",
+    "hoge",
+    "foo"
+  ],
+  "flagWords": [
+    "hte"
+  ]
+}

.vscode/launch.json

@@ -4,11 +4,17 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "react:function",
+      "program": "${workspaceFolder}/lib/react-function/oneshot.js"
+    },
     {
       "type": "node",
       "request": "launch",
       "name": "express:session",
       "program": "${workspaceFolder}/lib/express-session/oneshot.js"
     }
   ]
-}
+}

CHANGELOG.md

@@ -1,3 +1,5 @@
+#### 1.0.4 (2018-10-13)
+
 #### 1.0.2 (2018-10-02)
 
 ##### Other Changes

package.json

@@ -1,61 +1,70 @@
 {
   "name": "js-one-shot",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Libraryの調査",
   "main": "entry.js",
   "author": "Himenon",
   "license": "MIT",
   "scripts": {
-    "start": "run-p test:watch:dev tsc:watch",
+    "start": "run-p *:watch",
     "tsc:watch": "tsc -p tsconfig.json --watch",
     "express:session": "node ./lib/express-session/oneshot.js",
     "lint": "tslint -c tslint.json -p tsconfig.json",
     "lint:fix": "yarn run lint -- --fix",
     "test": "jest -c jest.config.json --detectOpenHandles",
     "test:coverage": "yarn run test -- --coverage && cat ./coverage/lcov.info | npx coveralls",
-    "test:watch:dev": "yarn run test -- --watchAll --verbose false",
+    "test:watch": "yarn run test -- --watchAll --verbose false",
     "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"
   },
   "devDependencies": {
-    "@commitlint/cli": "^7.1.2",
+    "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^7.1.2",
-    "@commitlint/travis-cli": "^7.1.2",
+    "@commitlint/travis-cli": "^7.2.1",
     "@types/body-parser": "^1.17.0",
     "@types/cookie-parser": "^1.4.1",
     "@types/express": "^4.16.0",
     "@types/express-session": "^1.15.11",
-    "@types/jest": "^23.3.2",
+    "@types/jest": "^23.3.5",
     "@types/js-yaml": "^3.11.2",
-    "@types/node": "^10.11.3",
+    "@types/node": "^10.11.7",
+    "@types/react": "^16.4.16",
+    "@types/react-dom": "^16.0.9",
+    "@types/react-test-renderer": "^16.0.3",
+    "@types/styled-components": "^4.0.1",
     "@types/supertest": "^2.0.6",
     "coveralls": "^3.0.2",
     "generate-changelog": "^1.7.1",
     "gray-matter": "^4.0.1",
-    "husky": "^1.0.1",
+    "husky": "^1.1.2",
     "jest": "^23.6.0",
     "jest-cli": "^23.6.0",
     "js-yaml": "^3.12.0",
     "npm-run-all": "^4.1.3",
     "pre-commit": "^1.2.2",
+    "react-test-renderer": "^16.5.2",
     "section-matter": "^1.0.0",
     "supertest": "^3.3.0",
-    "ts-jest": "^23.10.2",
+    "ts-jest": "^23.10.4",
     "ts-node": "^7.0.1",
     "tslint": "^5.11.0",
-    "typescript": "^3.1.1"
+    "typescript": "^3.1.3"
   },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
   "dependencies": {
+    "@babel/standalone": "^7.1.0",
     "body-parser": "^1.18.3",
     "cookie-parser": "^1.4.3",
-    "express": "^4.16.3",
+    "express": "^4.16.4",
     "express-session": "^1.15.6",
-    "portfinder": "^1.0.17"
+    "portfinder": "^1.0.17",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "styled-components": "^3.4.10"
   }
 }

src/js-function/__tests__/onestho.test.ts

@@ -0,0 +1,20 @@
+import * as OneShot from '../oneshot';
+
+test('sum function', () => {
+  expect(OneShot.sum(1, 2)).toEqual(3);
+  expect(OneShot.sum(2, 2)).toEqual(4);
+  expect(OneShot.sum(-1, -6)).toEqual(-7);
+  expect(OneShot.sum(-5, 5)).toEqual(0);
+});
+
+test('引数を1つだけ受け取る関数', () => {
+  // @ts-ignore
+  global.x = 10;
+  expect(OneShot.argFunction(0)).toEqual(10);
+});
+
+test('globalな値をそのまま返す関数', () => {
+  // @ts-ignore
+  global.y = 10;
+  expect(OneShot.simpleReturnFunction()()).toEqual(10);
+});

src/js-function/oneshot.ts

@@ -0,0 +1,7 @@
+export const sum = new Function('a', 'b', 'return a + b;');
+
+export const argFunction = new Function('a', 'return a + x;');
+
+export const simpleReturnFunction = () => {
+  return new Function('return y;');
+};

src/react-function/__tests__/oneshot.test.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import * as OneShot from '../oneshot';
+
+test('React.MyComponent', () => {
+  const comp = React.createElement(OneShot.HogeComponent, { text: 'hoge' });
+  expect(comp).toEqual(<OneShot.HogeComponent text='hoge' />);
+});
+
+test('HogeCreatorSeedのテスト', () => {
+  const hogeCreatorSeed = OneShot.getHogeCreatorSeed();
+  const keys = [OneShot.HogeComponent];
+  const receiveComponent = hogeCreatorSeed(React, ...keys)();
+  const expectComponent = <OneShot.HogeComponent text='hoge' />;
+  const myComponent1 = renderer.create(receiveComponent);
+  const myComponent2 = renderer.create(expectComponent);
+  expect(myComponent1.toJSON()).toEqual(myComponent2.toJSON());
+});
+
+test('HogeCreatorのテスト', () => {
+  const hogeCreator = OneShot.getHogeCreator();
+  const receiveComponent = hogeCreator();
+  const expectComponent = <OneShot.HogeComponent text='hoge' />;
+  const myComponent1 = renderer.create(receiveComponent);
+  const myComponent2 = renderer.create(expectComponent);
+  expect(myComponent1.toJSON()).toEqual(myComponent2.toJSON());
+})
+
+
+test('childrenを含むテスト', () => {
+  const nextComponentCreator = OneShot.getNestComponentCreator();
+  const receiveComponent = nextComponentCreator();
+  const expectComponent = <OneShot.FooComponent name="foooo"><OneShot.HogeComponent text="hoge" /></OneShot.FooComponent>;
+  const myComponent1 = renderer.create(receiveComponent);
+  const myComponent2 = renderer.create(expectComponent);
+  expect(myComponent1.toJSON()).toEqual(myComponent2.toJSON());
+})
+
+test('引数を取得するような生成パターン', () => {
+  const nextComponentCreator = OneShot.getNestComponentCreator2({ name: "foooo" }, { text: "hoge" });
+  const receiveComponent = nextComponentCreator();
+  const expectComponent = <OneShot.FooComponent name="foooo"><OneShot.HogeComponent text="hoge" /></OneShot.FooComponent>;
+  const myComponent1 = renderer.create(receiveComponent);
+  const myComponent2 = renderer.create(expectComponent);
+  expect(myComponent1.toJSON()).toEqual(myComponent2.toJSON());
+})

src/react-function/oneshot.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+export interface HogeProps {
+  text: string;
+}
+
+export interface FooProps {
+  name: string;
+}
+
+export class HogeComponent extends React.Component<HogeProps, {}> {
+  public render() {
+    return <div>${this.props.text}</div>;
+  }
+}
+
+export class FooComponent extends React.Component<FooProps, {}> {
+  public render() {
+    return <div>${this.props.name}{this.props.children}</div>;
+  }
+}
+
+/**
+ * StringからReactComponentを作成する
+ */
+export function getHogeCreatorSeed() {
+  const args = ['MyComponent'];
+  const func = 'React.createElement(MyComponent, { text: "hoge" }, null)';
+  const create = new Function('React', ...args, `return props => ${func}`);
+  return create;
+}
+
+/**
+ * getHogeCreatorSeed の簡略版
+ */
+export function getHogeCreator() {
+  const args = ['MyComponent'];
+  const func = 'React.createElement(MyComponent, { text: "hoge" }, null)';
+  const create = new Function('React', ...args, `return props => ${func}`);
+  return create(React, HogeComponent);
+}
+
+/**
+ * 階層構造のあるコンポーネントのファクトリーの作成
+ */
+export function getNestComponentCreator() {
+  const args = ['FooComponent', 'HogeComponent'];
+  const func = `React.createElement(FooComponent, { name: "foooo" }, React.createElement(HogeComponent, { text: "hoge" }, null))`;
+  const create = new Function('React', ...args, `return props => ${func}`);
+  return create(React, FooComponent, HogeComponent);
+}
+
+/**
+ * 引数を取得するような生成パターン
+ */
+export function getNestComponentCreator2(props1: FooProps, props2: HogeProps) {
+  const args = ['FooComponent', 'HogeComponent'];
+  const func = `React.createElement(FooComponent, ${JSON.stringify(props1)}, React.createElement(HogeComponent, ${JSON.stringify(props2)}, null))`;
+  const create = new Function('React', ...args, `return props => ${func}`);
+  return create(React, FooComponent, HogeComponent);
+}

src/styled-components/__tests__/oneshot.test.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { createExample } from '../oneshot';
+
+describe('ui teast', () => {
+  test('render', () => {
+    const Example = createExample();
+    const component = renderer.create(
+      <Example />
+    );
+    expect(<Example />).not.toBeUndefined();
+    expect(component.toJSON()).not.toBeNull();
+  });
+
+  test('createElement', () => {
+    const TestDiv = () => React.createElement('div', null);
+    const testDivComponent = renderer.create(<TestDiv />);
+    const expectDivComponent = renderer.create(<div />);
+    const tree1 = testDivComponent.toJSON()!;
+    const tree2 = expectDivComponent.toJSON()!;
+    expect(tree1.props).toEqual(tree2.props);
+  });
+});

src/styled-components/oneshot.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import styled, { injectGlobal, keyframes } from 'styled-components';
+
+export const createExample = () => {
+  // @ts-ignore
+  const _ = injectGlobal`
+  body {
+    font-family: sans-serif;
+  }
+  ]`;
+
+  const Title = styled.h1`
+    font-size: 1.5em;
+    text-align: center;
+    color: palevioletred;
+    animation: ${keyframes`from { opacity: 0; }`} 1s both;
+  `;
+
+  const Wrapper = styled.section`
+    padding: 4em;
+    background: papayawhip;
+  `;
+
+  return class Example extends React.Component {
+    public render() {
+      return (
+        <Wrapper>
+          <Title>Hello World, this is my first styled component!</Title>
+        </Wrapper>
+      );
+    }
+  };
+};

tsconfig.json

@@ -45,6 +45,7 @@
     },
   },
   "include": [
+    "src/**/*.tsx",
     "src/**/*.ts"
   ],
   "exclude": [

tslint.json

@@ -16,6 +16,7 @@
     "trailing-comma": false,
     "quotemark": [true, "single", "avoid-escape", "avoid-template"],
     "max-line-length": [true, {"limit": 140, "ignore-pattern": "^import |^export {(.*?)}"}],
-    "interface-name": false
+    "interface-name": false,
+    "max-classes-per-file": false,
   }
 }