Enable running layer-browser with local luma.gl (visgl#2855)

.eslintrc.js

@@ -0,0 +1,31 @@
+// prettier-ignore
+module.exports = {
+  plugins: ['react'],
+  extends: ['uber-jsx', 'uber-es2015', 'prettier', 'prettier/react', 'plugin:import/errors'],
+  overrides: {
+    files: ['*.spec.js', 'webpack.config.js', '**/bundle/*.js'],
+    rules: {
+      'import/no-extraneous-dependencies': 0
+    }
+  },
+  settings: {
+    'import/core-modules': [
+      '@luma.gl/core',
+      '@luma.gl/constants',
+      'math.gl',
+      'viewport-mercator-project'
+    ]
+  },
+  rules: {
+    'guard-for-in': 0,
+    'no-inline-comments': 0,
+    camelcase: 0,
+    'react/forbid-prop-types': 0,
+    'react/no-deprecated': 0,
+    'import/no-unresolved': ['error', {ignore: ['test']}],
+    'import/no-extraneous-dependencies': ['error', {devDependencies: false, peerDependencies: true}]
+  },
+  parserOptions: {
+    ecmaVersion: 2018
+  }
+};

.gitattributes

@@ -1,3 +1,3 @@
 dist/** -diff
 dist-demo/** -diff
-yarn.lock -diff
+# yarn.lock -diff

.gitignore

@@ -6,6 +6,7 @@ dist.js
 dist.min.js
 node_modules/
 coverage/
+test/**/*-failed.png
 .nyc_output/
 .vscode/
 .reify-cache/

examples/experimental/bezier/src/bezier-curve-layer/bezier-curve-layer.js

@@ -20,7 +20,7 @@
 
 import {Layer} from '@deck.gl/core';
 import GL from '@luma.gl/constants';
-import {Model, Geometry, fp64} from 'luma.gl';
+import {Model, Geometry, fp64} from '@luma.gl/core';
 const {fp64LowPart} = fp64;
 
 import vs from './bezier-curve-layer-vertex.glsl';

examples/layer-browser/package.json

@@ -4,6 +4,7 @@
   "license": "MIT",
   "scripts": {
     "start-local": "webpack-dev-server --env.es6 --progress --hot --open",
+    "start-local-luma": "webpack-dev-server --env.es6 --env.local --env.local-luma --progress --hot --open",
     "start-local-es5": "webpack-dev-server --env.local --progress --hot --open",
     "start-local-production": "webpack-dev-server --env.local --env.production --progress --hot --open"
   },
@@ -21,8 +22,9 @@
     "react-stats-zavatta": "^0.0.6"
   },
   "devDependencies": {
-    "buble": "^0.19.3",
-    "buble-loader": "^0.5.0",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.1"

examples/layer-browser/src/app.js

@@ -19,7 +19,7 @@ import LayerSelector from './components/layer-selector';
 import LayerControls from './components/layer-controls';
 
 import LAYER_CATEGORIES from './examples';
-import 'luma.gl/debug';
+import '@luma.gl/debug';
 
 /* eslint-disable no-process-env */
 const MapboxAccessToken =

examples/layer-browser/src/examples/additional-layers.js

@@ -13,7 +13,7 @@ import {
 import {_GPUGridLayer as GPUGridLayer} from '@deck.gl/aggregation-layers';
 import * as h3 from 'h3-js';
 
-import {CylinderGeometry} from 'luma.gl';
+import {CylinderGeometry} from '@luma.gl/core';
 import {GLTFParser} from '@loaders.gl/gltf';
 import * as dataSamples from '../data-samples';
 

examples/layer-browser/webpack.config.js

@@ -27,17 +27,12 @@ const CONFIG = {
   module: {
     rules: [
       {
-        // Transpile ES6 to ES5 with buble
         // Remove if your app does not use JSX or you don't need to support old browsers
         test: /\.js$/,
-        loader: 'buble-loader',
+        loader: 'babel-loader',
         exclude: [/node_modules/],
         options: {
-          objectAssign: 'Object.assign', // Note: may need polyfill on old browsers
-          transforms: {
-            modules: false, // Let Webpack take care of import/exports
-            dangerousForOf: true // Use for/of in spite of buble's limitations
-          }
+          presets: ['@babel/preset-react']
         }
       }
       // ,

examples/webpack.config.local.js

@@ -8,15 +8,31 @@
 // avoid destructuring for older Node version support
 const resolve = require('path').resolve;
 
+const ROOT_DIR = resolve(__dirname, '..');
 const LIB_DIR = resolve(__dirname, '..');
-const SRC_DIR = resolve(LIB_DIR, './modules');
 
 const ALIASES = require('ocular-dev-tools/config/ocular.config')({
   root: resolve(__dirname, '..')
 }).aliases;
 
 // Support for hot reloading changes to the deck.gl library:
-function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR) {
+function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR, linkToLuma) {
+  const LUMA_LINK_ALIASES = {
+    '@luma.gl/core': `${ROOT_DIR}/../luma.gl/modules/core/src`,
+    '@luma.gl/webgl': `${ROOT_DIR}/../luma.gl/modules/webgl/src`,
+    '@luma.gl/webgl-state-tracker': `${ROOT_DIR}/../luma.gl/modules/webgl-state-tracker/src`,
+    '@luma.gl/webgl2-polyfill': `${ROOT_DIR}/../luma.gl/modules/webgl2-polyfill/src`
+  };
+  const LUMA_LOCAL_ALIASES = {
+    '@luma.gl/core': `${ROOT_DIR}/node_modules/@luma.gl/core/src`,
+    '@luma.gl/webgl': `${ROOT_DIR}/node_modules/@luma.gl/webgl/src`,
+    '@luma.gl/webgl-state-tracker': `${ROOT_DIR}/node_modules/@luma.gl/webgl-state-tracker/src`,
+    '@luma.gl/webgl2-polyfill': `${ROOT_DIR}/node_modules/@luma.gl/webgl2-polyfill/src`
+  };
+
+  const LUMA_ALIASES = linkToLuma ? LUMA_LINK_ALIASES : LUMA_LOCAL_ALIASES;
+  // console.warn(JSON.stringify(LUMA_ALIASES, null, 2)); // uncomment to debug config
+
   return {
     // TODO - Uncomment when all examples use webpack 4 for faster bundling
     // mode: 'development',
@@ -37,9 +53,8 @@ function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR) {
     resolve: {
       // mainFields: ['esnext', 'module', 'main'],
 
-      alias: Object.assign({}, ALIASES, {
-        // Use luma.gl specified by root package.json
-        'luma.gl': resolve(LIB_DIR, './node_modules/luma.gl'),
+      alias: Object.assign({}, ALIASES, LUMA_ALIASES, {
+        // Use luma.gl installed in parallel with deck.gl
         // Important: ensure shared dependencies come from the main node_modules dir
         // Versions will be controlled by the deck.gl top level package.json
         'math.gl': resolve(LIB_DIR, './node_modules/math.gl'),
@@ -61,28 +76,8 @@ function makeLocalDevConfig(EXAMPLE_DIR = LIB_DIR) {
   };
 }
 
-const BUBLE_CONFIG = {
-  module: {
-    rules: [
-      {
-        // Compile source using buble
-        test: /\.js$/,
-        loader: 'buble-loader',
-        include: [SRC_DIR],
-        options: {
-          objectAssign: 'Object.assign',
-          transforms: {
-            dangerousForOf: true,
-            modules: false
-          }
-        }
-      }
-    ]
-  }
-};
-
-function addLocalDevSettings(config, exampleDir) {
-  const LOCAL_DEV_CONFIG = makeLocalDevConfig(exampleDir);
+function addLocalDevSettings(config, exampleDir, linkToLuma) {
+  const LOCAL_DEV_CONFIG = makeLocalDevConfig(exampleDir, linkToLuma);
   config = Object.assign({}, LOCAL_DEV_CONFIG, config);
   config.resolve = Object.assign({}, LOCAL_DEV_CONFIG.resolve, config.resolve || {});
   config.resolve.alias = config.resolve.alias || {};
@@ -95,24 +90,19 @@ function addLocalDevSettings(config, exampleDir) {
   return config;
 }
 
-function addBubleSettings(config) {
-  config.module = config.module || {};
-  Object.assign(config.module, {
-    rules: (config.module.rules || []).concat(BUBLE_CONFIG.module.rules)
-  });
-  return config;
-}
-
 module.exports = (config, exampleDir) => env => {
   // npm run start-local now transpiles the lib
-  if (env && env.local) {
-    config = addLocalDevSettings(config, exampleDir);
-    config = addBubleSettings(config);
+  if (!env) {
+    return config;
+  }
+
+  if (env.local) {
+    config = addLocalDevSettings(config, exampleDir, env['local-luma']);
   }
 
   // npm run start-es6 does not transpile the lib
   if (env && env.es6) {
-    config = addLocalDevSettings(config, exampleDir);
+    config = addLocalDevSettings(config, exampleDir, env['local-luma']);
   }
 
   if (env && env.production) {

examples/website/plot/plot-layer/axes-layer.js

@@ -1,6 +1,6 @@
 import {Layer} from 'deck.gl';
 import GL from '@luma.gl/constants';
-import {Model, Geometry} from 'luma.gl';
+import {Model, Geometry} from '@luma.gl/core';
 
 import {textMatrixToTexture} from './utils';
 

examples/website/plot/plot-layer/surface-layer.js

@@ -1,6 +1,6 @@
 import {Layer} from 'deck.gl';
 import GL from '@luma.gl/constants';
-import {Model, Geometry} from 'luma.gl';
+import {Model, Geometry} from '@luma.gl/core';
 
 import surfaceVertex from './surface-vertex.glsl';
 import fragmentShader from './fragment.glsl';

examples/website/plot/plot-layer/utils.js

@@ -1,6 +1,6 @@
 /* global document */
 import GL from '@luma.gl/constants';
-import {Texture2D} from 'luma.gl';
+import {Texture2D} from '@luma.gl/core';
 
 // helper for textMatrixToTexture
 function setTextStyle(ctx, fontSize) {

examples/website/screen-grid/app.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
 import DeckGL, {ScreenGridLayer} from 'deck.gl';
-import {isWebGL2} from 'luma.gl';
+import {isWebGL2} from '@luma.gl/core';
 
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer-vertex.glsl.js

@@ -23,7 +23,7 @@ export default `\
 #define SHADER_NAME screen-grid-layer-vertex-shader
 #define RANGE_COUNT 6
 
-in vec3 vertices;
+in vec3 positions;
 in vec3 instancePositions;
 in vec4 instanceCounts;
 in vec3 instancePickingColors;
@@ -84,6 +84,6 @@ void main(void) {
   // Set color to be rendered to picking fbo (also used to check for selection highlight).
   picking_setPickingColor(instancePickingColors);
 
-  gl_Position = vec4(instancePositions + vertices * cellScale, 1.);
+  gl_Position = vec4(instancePositions + positions * cellScale, 1.);
 }
 `;

modules/aggregation-layers/src/screen-grid-layer/screen-grid-layer.js

@@ -228,7 +228,7 @@ export default class ScreenGridLayer extends Layer {
         geometry: new Geometry({
           drawMode: GL.TRIANGLE_FAN,
           attributes: {
-            vertices: new Float32Array([0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0])
+            positions: new Float32Array([0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0])
           }
         }),
         isInstanced: true,

modules/core/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "gl-matrix": "^3.0.0",
-    "luma.gl": "^7.0.0-alpha.17",
+    "@luma.gl/core": "7.0.0-alpha.22",
     "math.gl": "^2.2.0",
     "mjolnir.js": "^2.0.2",
     "probe.gl": "^3.0.0-alpha.6",

modules/core/src/experimental/reflection-effect/reflection-effect.js

@@ -20,7 +20,7 @@
 
 /* global window */
 import GL from '@luma.gl/constants';
-import {Framebuffer, Model, Geometry} from 'luma.gl';
+import {Framebuffer, Model, Geometry} from '@luma.gl/core';
 import Effect from '../../lib/effect';
 import WebMercatorViewport from '../../viewports/web-mercator-viewport';
 

modules/core/src/lib/attribute-transition-manager.js

@@ -1,5 +1,5 @@
 import GL from '@luma.gl/constants';
-import {Buffer, Transform} from 'luma.gl';
+import {Buffer, Transform} from '@luma.gl/core';
 import {getShaders, getBuffers, padBuffer} from './attribute-transition-utils';
 import Attribute from './attribute';
 import Transition from '../transitions/transition';

modules/core/src/lib/attribute-transition-utils.js

@@ -1,4 +1,4 @@
-import {Buffer} from 'luma.gl';
+import {Buffer} from '@luma.gl/core';
 import {padArray} from '../utils/array-utils';
 
 const ATTRIBUTE_MAPPING = {

modules/core/src/lib/attribute.js

@@ -1,7 +1,7 @@
 /* eslint-disable complexity */
 import assert from '../utils/assert';
 import GL from '@luma.gl/constants';
-import {Buffer, _Attribute as Attribute} from 'luma.gl';
+import {Buffer, _Attribute as Attribute} from '@luma.gl/core';
 
 import {createIterable} from '../utils/iterable-utils';
 import log from '../utils/log';

modules/core/src/lib/deck-picker.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {Framebuffer, readPixelsToArray} from 'luma.gl';
+import {Framebuffer, readPixelsToArray} from '@luma.gl/core';
 import getPixelRatio from '../utils/get-pixel-ratio';
 import assert from '../utils/assert';
 import PickLayersPass from '../passes/pick-layers-pass';

modules/core/src/lib/deck.js

@@ -28,7 +28,7 @@ import DeckPicker from './deck-picker';
 import log from '../utils/log';
 
 import GL from '@luma.gl/constants';
-import {AnimationLoop, createGLContext, trackContextState, setParameters} from 'luma.gl';
+import {AnimationLoop, createGLContext, trackContextState, setParameters} from '@luma.gl/core';
 import {Stats} from 'probe.gl';
 import {EventManager} from 'mjolnir.js';
 

modules/core/src/lib/layer-manager.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import assert from '../utils/assert';
-import {_ShaderCache as ShaderCache} from 'luma.gl';
+import {_ShaderCache as ShaderCache} from '@luma.gl/core';
 import seer from 'seer';
 import Layer from './layer';
 import {LIFECYCLE} from '../lifecycle/constants';

modules/core/src/lib/layer.js

@@ -28,7 +28,7 @@ import {diffProps, validateProps} from '../lifecycle/props';
 import {count} from '../utils/count';
 import log from '../utils/log';
 import GL from '@luma.gl/constants';
-import {withParameters} from 'luma.gl';
+import {withParameters} from '@luma.gl/core';
 import assert from '../utils/assert';
 import {projectPosition, getWorldPosition} from '../shaderlib/project/project-functions';