Merge pull request #227 from cwillisf/use-browser-field

Update packaging to use UMD and the browser field

package.json

@@ -10,6 +10,7 @@
     "url": "git+ssh://git@github.com/LLK/scratch-render.git"
   },
   "main": "./dist/node/scratch-render.js",
+  "browser": "./dist/web/scratch-render.js",
   "scripts": {
     "build": "webpack --progress --colors",
     "docs": "jsdoc -c .jsdoc.json",

src/RenderWebGL.js

@@ -229,8 +229,8 @@ class RenderWebGL extends EventEmitter {
      * Create a new bitmap skin from a snapshot of the provided bitmap data.
      * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin.
      * @param {!int} [costumeResolution=1] - The resolution to use for this bitmap.
-     * @param {?Array<number>} rotationCenter Optional: rotation center of the skin. If not supplied, the center of the
-     * skin will be used
+     * @param {?Array<number>} [rotationCenter] Optional: rotation center of the skin. If not supplied, the center of
+     * the skin will be used.
      * @returns {!int} the ID for the new skin.
      */
     createBitmapSkin (bitmapData, costumeResolution, rotationCenter) {
@@ -630,9 +630,9 @@ class RenderWebGL extends EventEmitter {
      * pick drawables that are not visible or have ghost set all the way up.
      * @param {int} centerX The client x coordinate of the picking location.
      * @param {int} centerY The client y coordinate of the picking location.
-     * @param {int} touchWidth The client width of the touch event (optional).
-     * @param {int} touchHeight The client height of the touch event (optional).
-     * @param {Array<int>} candidateIDs The Drawable IDs to pick from, otherwise all.
+     * @param {int} [touchWidth] The client width of the touch event (optional).
+     * @param {int} [touchHeight] The client height of the touch event (optional).
+     * @param {Array<int>} [candidateIDs] The Drawable IDs to pick from, otherwise all.
      * @returns {int} The ID of the topmost Drawable under the picking location, or
      * RenderConstants.ID_NONE if there is no Drawable at that location.
      */

src/index-web.js

@@ -1,8 +0,0 @@
-/* eslint-env browser */
-require('babel-polyfill');
-
-/**
- * Export for use in a web page.
- * @type {RenderWebGL}
- */
-window.RenderWebGL = require('./index');

src/playground/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    root: true,
+    extends: ['scratch'],
+    env: {
+        browser: true
+    }
+};

src/playground/index.html

@@ -11,6 +11,7 @@
 <canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
 <canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
 <p>
+    <label for="fudgeproperty">Property to tweak:</label>
     <select id="fudgeproperty" onchange="onFudgePropertyChanged(this.value)">
         <option value="posx">Position X</option>
         <option value="posy">Position Y</option>
@@ -25,17 +26,18 @@
         <option value="brightness">Brightness</option>
         <option value="ghost">Ghost</option>
     </select>
+    <label for="fudge">Property Value:</label>
     <input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
 </p>
 <p>
-    Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
-    Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
+    <label for="fudgeMin">Min:</label><input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
+    <label for="fudgeMax">Max:</label><input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
 </p>
 <script src="scratch-render.js"></script>
 <script>
     var canvas = document.getElementById('scratch-stage');
     var fudge = 90;
-    var renderer = new RenderWebGL(canvas);
+    var renderer = new ScratchRender(canvas);
 
     var drawableID = renderer.createDrawable();
     renderer.updateDrawableProperties(drawableID, {
@@ -73,7 +75,6 @@
     xhr.open('GET', 'https://cdn.assets.scratch.mit.edu/internalapi/asset/f88bf1935daea28f8ca098462a31dbb0.svg/get/');
     xhr.send();
 
-    var fudgeSelect = document.getElementById('fudgeproperty');
     var posX = 0;
     var posY = 0;
     var scaleX = 100;
@@ -166,7 +167,8 @@
     }
     drawStep();
 
-    renderer.setDebugCanvas(document.getElementById('debug-canvas'));
+    var debugCanvas = /** @type {canvas} */ document.getElementById('debug-canvas');
+    renderer.setDebugCanvas(debugCanvas);
 </script>
 </body>
 </html>

webpack.config.js

@@ -13,7 +13,7 @@ const base = {
         rules: [
             {
                 include: [
-                    path.resolve(__dirname, 'src')
+                    path.resolve('src')
                 ],
                 test: /\.js$/,
                 loader: 'babel-loader',
@@ -40,10 +40,12 @@ module.exports = [
     Object.assign({}, base, {
         target: 'web',
         entry: {
-            'scratch-render': './src/index-web.js'
+            'scratch-render': './src/index.js'
         },
         output: {
-            path: path.resolve(__dirname, 'playground'),
+            library: 'ScratchRender',
+            libraryTarget: 'umd',
+            path: path.resolve('playground'),
             filename: '[name].js'
         },
         plugins: base.plugins.concat([
@@ -58,11 +60,13 @@ module.exports = [
     Object.assign({}, base, {
         target: 'web',
         entry: {
-            'scratch-render': './src/index-web.js',
-            'scratch-render.min': './src/index-web.js'
+            'scratch-render': './src/index.js',
+            'scratch-render.min': './src/index.js'
         },
         output: {
-            path: path.resolve(__dirname, 'dist/web'),
+            library: 'ScratchRender',
+            libraryTarget: 'umd',
+            path: path.resolve('dist', 'web'),
             filename: '[name].js'
         }
     }),
@@ -75,7 +79,7 @@ module.exports = [
         output: {
             library: 'ScratchRender',
             libraryTarget: 'commonjs2',
-            path: path.resolve(__dirname, 'dist/node'),
+            path: path.resolve('dist', 'node'),
             filename: '[name].js'
         }
     })