trim bundle

package.json

@@ -141,11 +141,11 @@
     "node-sass": "^4.11.0",
     "preprocess-loader": "^0.3.0",
     "prettier": "^1.11.1",
+    "raw-loader": "^1.0.0",
     "react-hot-loader": "^4.7.2",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.28.4",
-    "webpack-build-notifier": "^0.1.23",
     "webpack-dev-middleware": "^3.6.0",
     "webpack-dev-server": "^3.1.14",
     "webpack-merge": "^4.2.1",

src/ui/component/common/yrbl.jsx

@@ -1,38 +0,0 @@
-// @flow
-import * as React from 'react';
-import Native from 'native';
-import classnames from 'classnames';
-
-type Props = {
-  title: string,
-  subtitle: string | React.Node,
-  type: string,
-  className?: string,
-};
-
-const yrblTypes = {
-  happy: 'gerbil-happy.png',
-  sad: 'gerbil-sad.png',
-};
-
-export default class extends React.PureComponent<Props> {
-  static defaultProps = {
-    type: 'happy',
-  };
-
-  render() {
-    const { title, subtitle, type, className } = this.props;
-
-    const image = yrblTypes[type];
-
-    return (
-      <div className={classnames('yrbl-wrap', className)}>
-        <img alt="Friendly gerbil" className="yrbl" src={Native.imagePath(image)} />
-        <div className="card__content">
-          <h2 className="card__title">{title}</h2>
-          <div className="card__subtitle">{subtitle}</div>
-        </div>
-      </div>
-    );
-  }
-}

src/ui/component/fileTile/view.jsx

@@ -11,7 +11,7 @@ import classnames from 'classnames';
 import FilePrice from 'component/filePrice';
 import UriIndicator from 'component/uriIndicator';
 import DateTime from 'component/dateTime';
-import Yrbl from 'component/common/yrbl';
+import Yrbl from 'component/yrbl';
 
 type Props = {
   obscureNsfw: boolean,

src/ui/component/viewers/threeViewer/index.jsx

@@ -5,14 +5,24 @@ import classNames from 'classnames';
 import LoadingScreen from 'component/common/loading-screen';
 
 // ThreeJS
-import * as THREE from 'three-full';
+import { LoadingManager } from 'three-full/sources/loaders/LoadingManager';
+import { STLLoader } from 'three-full/sources/loaders/STLLoader';
+import { OBJLoader2 } from 'three-full/sources/loaders/OBJLoader2';
+import { OrbitControls } from 'three-full/sources/controls/OrbitControls';
+import { Geometry } from 'three-full/sources/core/Geometry';
+import { Box3 } from 'three-full/sources/math/Box3';
+import { Vector3 } from 'three-full/sources/math/Vector3';
+import { Mesh } from 'three-full/sources/objects/Mesh';
+import { Group } from 'three-full/sources/objects/Group';
+import { PerspectiveCamera } from 'three-full/sources/cameras/PerspectiveCamera';
+import { MeshPhongMaterial } from 'three-full/sources/materials/MeshPhongMaterial';
 import detectWebGL from './internal/detector';
 import ThreeGrid from './internal/grid';
 import ThreeScene from './internal/scene';
 import ThreeRenderer from './internal/renderer';
 
 const Manager = ({ onLoad, onStart, onError }) => {
-  const manager = new THREE.LoadingManager();
+  const manager = new LoadingManager();
   manager.onLoad = onLoad;
   manager.onStart = onStart;
   manager.onError = onError;
@@ -22,8 +32,8 @@ const Manager = ({ onLoad, onStart, onError }) => {
 
 const Loader = (fileType, manager) => {
   const fileTypes = {
-    stl: () => new THREE.STLLoader(manager),
+    stl: () => new STLLoader(manager),
-    obj: () => new THREE.OBJLoader2(manager),
+    obj: () => new OBJLoader2(manager),
   };
   return fileTypes[fileType] ? fileTypes[fileType]() : null;
 };
@@ -70,7 +80,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     });
 
   static createOrbitControls(camera: any, canvas: any) {
-    const controls = new THREE.OrbitControls(camera, canvas);
+    const controls = new OrbitControls(camera, canvas);
     // Controls configuration
     controls.enableDamping = true;
     controls.dampingFactor = 0.75;
@@ -88,8 +98,8 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     const min = { x: 0, y: 0, z: 0 };
 
     group.traverse(child => {
-      if (child instanceof THREE.Mesh) {
+      if (child instanceof Mesh) {
-        const box = new THREE.Box3().setFromObject(child);
+        const box = new Box3().setFromObject(child);
         // Max
         max.x = box.max.x > max.x ? box.max.x : max.x;
         max.y = box.max.y > max.y ? box.max.y : max.y;
@@ -108,7 +118,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     group.scale.set(scaleFactor, scaleFactor, scaleFactor);
     group.position.setY((meshY / 2) * scaleFactor);
     // Reset object position
-    const box = new THREE.Box3().setFromObject(group);
+    const box = new Box3().setFromObject(group);
     // Update position
     box.getCenter(group.position);
     group.position.multiplyScalar(-1);
@@ -195,7 +205,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
       }
       // Clean up group items
       this.mesh.traverse(child => {
-        if (child instanceof THREE.Mesh) {
+        if (child instanceof Mesh) {
           if (child.geometry) child.geometry.dispose();
           if (child.material) child.material.dispose();
         }
@@ -257,7 +267,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     ThreeViewer.fitMeshToCamera(group);
 
     if (!this.targetCenter) {
-      const box = new THREE.Box3();
+      const box = new Box3();
       this.targetCenter = box.setFromObject(this.mesh).getCenter();
     }
     this.updateControlsTarget(this.targetCenter);
@@ -334,9 +344,9 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.bufferGeometry.computeBoundingBox();
     this.bufferGeometry.center();
     this.bufferGeometry.rotateX(-Math.PI / 2);
-    this.bufferGeometry.lookAt(new THREE.Vector3(0, 0, 1));
+    this.bufferGeometry.lookAt(new Vector3(0, 0, 1));
     // Get geometry from bufferGeometry
-    this.geometry = new THREE.Geometry().fromBufferGeometry(this.bufferGeometry);
+    this.geometry = new Geometry().fromBufferGeometry(this.bufferGeometry);
     this.geometry.mergeVertices();
     this.geometry.computeVertexNormals();
   }
@@ -391,7 +401,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
   renderStl(data: any) {
     this.createGeometry(data);
-    this.mesh = new THREE.Mesh(this.geometry, this.material);
+    this.mesh = new Mesh(this.geometry, this.material);
     this.mesh.name = 'model';
     this.scene.add(this.mesh);
     this.transformGroup(this.mesh);
@@ -399,19 +409,19 @@ class ThreeViewer extends React.PureComponent<Props, State> {
 
   renderObj(event: any) {
     const mesh = event.detail.loaderRootNode;
-    this.mesh = new THREE.Group();
+    this.mesh = new Group();
     this.mesh.name = 'model';
 
     // Assign new material
     mesh.traverse(child => {
-      if (child instanceof THREE.Mesh) {
+      if (child instanceof Mesh) {
         // Get geometry from child
-        const geometry = new THREE.Geometry();
+        const geometry = new Geometry();
         geometry.fromBufferGeometry(child.geometry);
         geometry.mergeVertices();
         geometry.computeVertexNormals();
         // Create and regroup inner objects
-        const innerObj = new THREE.Mesh(geometry, this.material);
+        const innerObj = new Mesh(geometry, this.material);
         this.mesh.add(innerObj);
         // Clean up geometry
         geometry.dispose();
@@ -454,7 +464,7 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.grid = ThreeGrid({ size: 100, gridColor, centerLineColor });
     this.scene.add(this.grid);
     // Camera
-    this.camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000);
+    this.camera = new PerspectiveCamera(80, width / height, 0.1, 1000);
     this.camera.position.set(-9.5, 14, 11);
 
     // Controls
@@ -464,10 +474,10 @@ class ThreeViewer extends React.PureComponent<Props, State> {
     this.renderer.setSize(width, height);
 
     // Create model material
-    this.material = new THREE.MeshPhongMaterial({
+    this.material = new MeshPhongMaterial({
       depthWrite: true,
       flatShading: true,
-      vertexColors: THREE.FaceColors,
+      vertexColors: 1,
     });
 
     // Set material color

src/ui/component/viewers/threeViewer/internal/grid.js

@@ -1,4 +1,5 @@
-import { GridHelper, Color } from 'three-full';
+import { Color } from 'three-full/sources/math/Color';
+import { GridHelper } from 'three-full/sources/helpers/GridHelper';
 
 const ThreeGrid = ({ size, gridColor, centerLineColor }) => {
   const divisions = size / 2;

src/ui/component/viewers/threeViewer/internal/renderer.js

@@ -1,4 +1,4 @@
-import { WebGLRenderer } from 'three-full';
+import { WebGLRenderer } from 'three-full/sources/renderers/WebGLRenderer';
 
 const ThreeRenderer = ({ antialias, shadowMap, gammaCorrection }) => {
   const renderer = new WebGLRenderer({ antialias });

src/ui/component/viewers/threeViewer/internal/scene.js

@@ -1,15 +1,19 @@
-import * as THREE from 'three-full';
+import { Color } from 'three-full/sources/math/Color';
+import { HemisphereLight } from 'three-full/sources/lights/HemisphereLight';
+import { DirectionalLight } from 'three-full/sources/lights/DirectionalLight';
+import { Scene } from 'three-full/sources/scenes/Scene';
+import { Fog } from 'three-full/sources/scenes/Fog';
 
 const addLights = (scene, color, groundColor) => {
   // Light color
-  const lightColor = new THREE.Color(color);
+  const lightColor = new Color(color);
   // Main light
-  const light = new THREE.HemisphereLight(lightColor, groundColor, 0.4);
+  const light = new HemisphereLight(lightColor, groundColor, 0.4);
   // Shadow light
-  const shadowLight = new THREE.DirectionalLight(lightColor, 0.4);
+  const shadowLight = new DirectionalLight(lightColor, 0.4);
   shadowLight.position.set(100, 50, 100);
   // Back light
-  const backLight = new THREE.DirectionalLight(lightColor, 0.6);
+  const backLight = new DirectionalLight(lightColor, 0.6);
   backLight.position.set(-100, 200, 50);
   // Add lights to scene
   scene.add(backLight);
@@ -17,19 +21,19 @@ const addLights = (scene, color, groundColor) => {
   scene.add(shadowLight);
 };
 
-const Scene = ({ backgroundColor, groundColor, showFog }) => {
+const ViewerScene = ({ backgroundColor, groundColor, showFog }) => {
   // Convert color
-  const bgColor = new THREE.Color(backgroundColor);
+  const bgColor = new Color(backgroundColor);
   // New scene
-  const scene = new THREE.Scene();
+  const scene = new Scene();
   // Background color
   scene.background = bgColor;
   // Fog effect
-  scene.fog = showFog === true ? new THREE.Fog(bgColor, 1, 95) : null;
+  scene.fog = showFog === true ? new Fog(bgColor, 1, 95) : null;
   // Add basic lights
   addLights(scene, '#FFFFFF', groundColor);
   // Return new three scene
   return scene;
 };
 
-export default Scene;
+export default ViewerScene;

webpack.base.config.js

@@ -16,7 +16,6 @@ const baseConfig = {
     rules: [
       {
         test: /\.jsx?$/,
-        exclude: /node_modules/,
         loader: 'babel-loader',
       },
       {
@@ -48,6 +47,12 @@ const baseConfig = {
           },
         },
       },
+      {
+        test: /\.glsl/,
+        use: {
+          loader: 'file-loader',
+        },
+      },
     ],
   },
   // Allows imports for all directories inside '/ui'

yarn.lock

@@ -4776,11 +4776,6 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
   integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
 
-growly@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
-  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
-
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -6978,16 +6973,6 @@ node-loader@^0.6.0:
   resolved "https://registry.yarnpkg.com/node-loader/-/node-loader-0.6.0.tgz#c797ef51095ed5859902b157f6384f6361e05ae8"
   integrity sha1-x5fvUQle1YWZArFX9jhPY2HgWug=
 
-node-notifier@5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea"
-  integrity sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==
-  dependencies:
-    growly "^1.3.0"
-    semver "^5.4.1"
-    shellwords "^0.1.1"
-    which "^1.3.0"
-
 node-pre-gyp@^0.10.0:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
@@ -8349,6 +8334,14 @@ raw-body@2.3.3:
     iconv-lite "0.4.23"
     unpipe "1.0.0"
 
+raw-loader@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-1.0.0.tgz#3f9889e73dadbda9a424bce79809b4133ad46405"
+  integrity sha512-Uqy5AqELpytJTRxYT4fhltcKPj0TyaEpzJDcGz7DFJi+pQOOi3GjR/DOdxTkTsF+NzhnldIoG6TORaBlInUuqA==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
 rc-progress@^2.0.6:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-2.3.0.tgz#cfbd07ff9026c450100980de209a92650e24f313"
@@ -9309,11 +9302,6 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
-shellwords@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
-  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -10736,15 +10724,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webpack-build-notifier@^0.1.23:
-  version "0.1.30"
-  resolved "https://registry.yarnpkg.com/webpack-build-notifier/-/webpack-build-notifier-0.1.30.tgz#837e9002d13c1d76bdf954ccafe0b824b38bb789"
-  integrity sha512-HeZ4Wr8XP7W0kSmPQkZCXARQVIjVFNPyJBdUqkqcE0ySYNjr6vOH3ufHESLPuy5KmMRUjHJdqJ6y3McDfCjJxQ==
-  dependencies:
-    ansi-regex "^2.0.0"
-    node-notifier "5.2.1"
-    strip-ansi "^3.0.1"
-
 webpack-cli@^3.2.1:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.2.3.tgz#13653549adfd8ccd920ad7be1ef868bacc22e346"