feat: init

.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true
+  },
+  extends: ['plugin:react/recommended', 'prettier/@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'prettier', 'react', 'react-hooks'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  rules: {
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+    strict: 'error',
+    'check-constructor': false,
+    'no-comma-dangle': false,
+    'no-empty-interface': false,
+    'no-unused-vars': [1, { vars: 'all', args: 'after-used' }],
+    'prettier/prettier': [
+      'error',
+      {
+        semi: false,
+        singleQuote: true,
+        printWidth: 80,
+        tabWidth: 2
+      }
+    ]
+  }
+}

.gitattributes

@@ -0,0 +1,3 @@
+lib/* linguist-vendored
+*.js linguist-vendored
+*.html linguist-vendored

.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production,distfile
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+package-lock.json
+.vscode

Readme.md

@@ -0,0 +1 @@
+# THREE GAME

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest'
+  },
+  testRegex: '(\\.|/)(test|spec)\\.tsx?$',
+  setupFilesAfterEnv: ['<rootDir>/setupTest.ts'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  moduleNameMapper: {
+    '^@/(.*)': '<rootDir>/src/$1'
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.ts?(x)']
+}

package.json

@@ -0,0 +1,91 @@
+{
+  "name": "three-game",
+  "version": "0.1.0",
+  "private": true,
+  "author": "kmkzt",
+  "scripts": {
+    "dev": "NODE_ENV=development webpack-dev-server",
+    "build": "rm -r lib && NODE_ENV=production webpack -p",
+    "test": "jest",
+    "lint": "eslint -c .eslintrc.js --fix \"./src/**/**.{ts,tsx}\"",
+    "lint:fix": "prettier --write ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "apollo-cache-inmemory": "1.5.1",
+    "apollo-cache-persist": "0.1.1",
+    "apollo-client": "2.5.1",
+    "apollo-link": "1.2.11",
+    "apollo-link-http": "1.5.14",
+    "apollo-link-persisted-queries": "0.2.2",
+    "apollo-link-retry": "2.2.13",
+    "react": "16.8.5",
+    "react-css-modules": "4.7.9",
+    "react-dom": "16.8.5",
+    "react-redux": "6.0.1",
+    "react-router-dom": "5.0.0",
+    "redux": "4.0.1",
+    "redux-logger": "3.0.6",
+    "styled-components": "4.2.0",
+    "three": "0.108.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "7.2.0",
+    "@babel/polyfill": "7.4.0",
+    "@babel/preset-env": "7.4.2",
+    "@babel/preset-typescript": "7.3.3",
+    "@types/enzyme": "3.9.1",
+    "@types/enzyme-adapter-react-16": "1.0.5",
+    "@types/enzyme-to-json": "1.5.3",
+    "@types/react": "16.8.10",
+    "@types/react-css-modules": "4.6.2",
+    "@types/react-dom": "16.8.3",
+    "@types/react-redux": "7.0.5",
+    "@types/react-router-dom": "4.3.1",
+    "@types/redux-logger": "3.0.7",
+    "@types/styled-components": "4.1.12",
+    "@types/jest": "24.0.11",
+    "@types/node": "11.12.0",
+    "@typescript-eslint/eslint-plugin": "1.5.0",
+    "@typescript-eslint/parser": "1.5.0",
+    "@typescript-eslint/typescript-estree": "1.5.0",
+    "enzyme": "3.9.0",
+    "enzyme-adapter-react-16": "1.11.2",
+    "enzyme-to-json": "3.3.5",
+    "eslint-plugin-react": "7.12.4",
+    "eslint-plugin-react-hooks": "1.6.0",
+    "jest-styled-components": "6.3.1",
+    "typescript-styled-plugin": "0.14.0",
+    "autoprefixer": "9.5.0",
+    "babel-core": "6.26.3",
+    "babel-jest": "24.5.0",
+    "babel-loader": "8.0.5",
+    "babel-preset-es2015": "6.24.1",
+    "css-loader": "2.1.1",
+    "dotenv-webpack": "1.7.0",
+    "eslint": "5.15.3",
+    "eslint-config-prettier": "4.1.0",
+    "eslint-plugin-prettier": "3.0.1",
+    "html-loader": "0.5.5",
+    "html-webpack-plugin": "3.2.0",
+    "jest": "24.5.0",
+    "node-sass": "4.12.0",
+    "npm-run-all": "4.1.5",
+    "postcss-loader": "3.0.0",
+    "prettier": "1.16.4",
+    "resolve-url-loader": "3.0.1",
+    "rimraf": "2.6.3",
+    "sass-loader": "7.1.0",
+    "style-loader": "0.23.1",
+    "ts-jest": "24.0.0",
+    "ts-loader": "5.3.3",
+    "tsconfig-paths-webpack-plugin": "3.2.0",
+    "typescript": "3.3.4000",
+    "uglifyjs-webpack-plugin": "2.1.2",
+    "webpack": "4.29.6",
+    "webpack-cli": "3.3.0",
+    "webpack-dev-server": "3.2.1",
+    "webpack-merge": "4.2.1",
+    "workbox-webpack-plugin": "4.1.1"
+  }
+}

prettier.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 80,
+  tabWidth: 2
+  // trailingComma: "es5",
+  // bracketSpacing: true,
+  // jsxBracketSameLine: true,
+  // arrowParens: "always",
+  // requirePragma: true,
+  // insertPragma: true,
+  // proseWrap: "always",
+}

setupTest.ts

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })

src/index.ts

@@ -0,0 +1,49 @@
+import {
+  Mesh,
+  Renderer,
+  Camera,
+  Geometry,
+  Material,
+  Scene,
+  PerspectiveCamera,
+  BoxGeometry,
+  MeshNormalMaterial,
+  WebGLRenderer
+} from 'three'
+
+let camera: Camera, scene: Scene, renderer: Renderer
+let geometry: Geometry, material: Material, mesh: Mesh
+
+const init = () => {
+  camera = new PerspectiveCamera(
+    70,
+    window.innerWidth / window.innerHeight,
+    0.01,
+    10
+  )
+  camera.position.z = 1
+
+  scene = new Scene()
+
+  geometry = new BoxGeometry(0.2, 0.2, 0.2)
+  material = new MeshNormalMaterial()
+
+  mesh = new Mesh(geometry, material)
+  scene.add(mesh)
+
+  renderer = new WebGLRenderer({ antialias: true })
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  document.body.appendChild(renderer.domElement)
+}
+
+const animate = () => {
+  requestAnimationFrame(animate)
+
+  mesh.rotation.x += 0.01
+  mesh.rotation.y += 0.02
+
+  renderer.render(scene, camera)
+}
+
+init()
+animate()

src/typings/three.d.ts

@@ -0,0 +1 @@
+declare module 'three/src/Three.d.ts';

template.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <title>THREE GAME</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "./dist",
+    "target": "es5",
+    "module": "esnext",
+    "lib": ["es2018", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "plugins": [
+      {
+        "name": "typescript-styled-plugin"
+      }
+    ],
+    "paths": {
+      "@*": ["src*"]
+    },
+    "typeRoots": [
+      "../../node_modules/@types",
+      "node_modules/@types",
+      "src/typings"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest"
+  ]
+}

tsconfig.prod.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./lib"
+  }
+}

webpack.config.js

@@ -0,0 +1,59 @@
+const { resolve } = require('path')
+const { smart } = require('webpack-merge')
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+const devMode = process.env.NODE_ENV === 'development'
+const config = devMode
+  ? require('./webpack.dev.config')
+  : require('./webpack.prod.config')
+
+const common = {
+  mode: devMode ? 'development' : 'production',
+  entry: resolve(__dirname, 'src/index'),
+  output: {
+    filename: '[name].bundle.js',
+    path: resolve('public')
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'ts-loader',
+          options: {
+            transpileOnly: true
+          }
+        }
+      },
+      {
+        test: /\.s?css$/,
+        exclude: /node_modules/,
+        use: [
+          'style-loader',
+          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
+          'resolve-url-loader',
+          'sass-loader'
+        ]
+      },
+      { test: /\.html$/, use: 'html-loader' }
+    ]
+  },
+
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+    alias: {
+      '@': resolve(__dirname, 'src')
+    },
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: resolve(
+          __dirname,
+          devMode ? 'tsconfig.json' : 'tsconfig.prod.json'
+        )
+      })
+    ]
+  }
+}
+
+module.exports = smart(common, config)

webpack.dev.config.js

@@ -0,0 +1,24 @@
+const { join, resolve } = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const Dotenv = require('dotenv-webpack')
+
+const config = {
+  devtool: 'source-map',
+  plugins: [
+    new Dotenv({
+      path: 'production.env',
+      safe: false
+    }),
+    new HtmlWebpackPlugin({
+      template: resolve('template.html')
+    })
+  ],
+
+  devServer: {
+    contentBase: join(__dirname, 'public'),
+    compress: true,
+    port: 9000
+  }
+}
+
+module.exports = config