Merge pull request react-grid-layout#1013 from STRML/babel7

chore(deps): upgrade to babel 7
roman-haluska · Oct 10, 2019 · fcb2305 · fcb2305
2 parents f2f3fc0 + 7fefadc
commit fcb2305
Show file tree

Hide file tree

Showing 45 changed files with 3,880 additions and 4,571 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,25 @@
+'use strict';
+
+module.exports = {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        targets: "> 0.25%, not dead",
+      }
+    ],
+    "@babel/react",
+    "@babel/preset-flow"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-flow-comments",
+    "@babel/plugin-proposal-class-properties",
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "espower"
+      ]
+    }
+  }
+}
diff --git a/.flowconfig b/.flowconfig
@@ -1,5 +1,5 @@
 [version]
-0.107.0
+0.109.0
 
 [ignore]
 

diff --git a/Makefile b/Makefile
@@ -18,7 +18,8 @@ clean:
 	rm -rf $(BUILD) $(DIST)
 
 dev:
-	@$(BIN)/webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --open --content-base .
+	@$(BIN)/webpack-dev-server --config webpack-dev-server.config.js \
+	  --hot --progress --colors 
 
 # Allows usage of `make install`, `make link`
 install link:
@@ -28,23 +29,21 @@ install link:
 dist/%.min.js: $(LIB) $(BIN)
 	@$(BIN)/webpack
 
-# find/exec is more cross-platform compatible than `rename`
 build-js:
-	@$(BIN)/babel --stage 0 --out-dir $(BUILD) $(LIB)
+	@$(BIN)/babel --out-dir $(BUILD) $(LIB)
 
 build-example:
 	@$(BIN)/webpack --config webpack-examples.config.js
 	node ./examples/generate.js
 
-view-example: build-example
-	@$(BIN)/opener examples/0-showcase.html
-
+view-example:
+	node ./examples/generate.js
+	@$(BIN)/webpack-dev-server --config webpack-examples.config.js --progress --colors 
 
 # FIXME flow is usually global
 lint:
 	@$(BIN)/flow
 	@$(BIN)/eslint --ext .js,.jsx $(LIB) $(TEST)
-	@$(BIN)/valiquire $(LIB)
 
 test:
 	@$(BIN)/jest

diff --git a/examples/0-showcase.html b/examples/0-showcase.html
@@ -5,20 +5,20 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/0-showcase.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/0-showcase.js"></script>
     <title>RGL Example 0 - Showcase</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 0 - Showcase</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/0-showcase.jsx">View this example's source</a></li>
-        
+      <li><b>⇠</b></li>
       <li><a href="1-basic.html"><b>⇢ </b>View the next example: "Basic"</a></li>
     </ul>
-    <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
-    <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
+       <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
+       <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/1-basic.html b/examples/1-basic.html
@@ -5,22 +5,20 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/1-basic.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/1-basic.js"></script>
     <title>RGL Example 1 - Basic</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 1 - Basic</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/1-basic.jsx">View this example's source</a></li>
-
       <li><a href="0-showcase.html"><b>⇠</b> View the previous example: "Showcase"</a></li>
-
       <li><a href="2-no-dragging.html"><b>⇢ </b>View the next example: "No Dragging"</a></li>
     </ul>
-    <p>Try dragging the elements around.</p>
-    <p>This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.</p>
+       <p>Try dragging the elements around.</p>
+       <p>This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/10-dynamic-min-max-wh.html b/examples/10-dynamic-min-max-wh.html
@@ -5,22 +5,20 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/10-dynamic-min-max-wh.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/10-dynamic-min-max-wh.js"></script>
     <title>RGL Example 10 - Dynamic Minimum and Maximum Width/Height</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 10 - Dynamic Minimum and Maximum Width/Height</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/10-dynamic-min-max-wh.jsx">View this example's source</a></li>
-
       <li><a href="9-min-max-wh.html"><b>⇠</b> View the previous example: "Minimum and Maximum Width/Height"</a></li>
-
       <li><a href="11-no-vertical-compact.html"><b>⇢ </b>View the next example: "No Vertical Compacting (Free Movement)"</a></li>
     </ul>
-    <p>Your application may have more complex rules for determining an element's mins and maxes. This demo demonstrates how to use the `onResize` handler to accomplish this.</p>
-    <p>In this grid, all elements are allowed a max width of 2 if the height < 3, and a min width of 2 if the height >= 3.</p>
+       <p>Your application may have more complex rules for determining an element's mins and maxes. This demo demonstrates how to use the `onResize` handler to accomplish this.</p>
+       <p>In this grid, all elements are allowed a max width of 2 if the height < 3, and a min width of 2 if the height >= 3.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/11-no-vertical-compact.html b/examples/11-no-vertical-compact.html
@@ -5,21 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/11-no-vertical-compact.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/11-no-vertical-compact.js"></script>
     <title>RGL Example 11 - No Vertical Compacting (Free Movement)</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 11 - No Vertical Compacting (Free Movement)</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/11-no-vertical-compact.jsx">View this example's source</a></li>
-
       <li><a href="10-dynamic-min-max-wh.html"><b>⇠</b> View the previous example: "Dynamic Minimum and Maximum Width/Height"</a></li>
-
       <li><a href="12-prevent-collision.html"><b>⇢ </b>View the next example: "Prevent Collision"</a></li>
     </ul>
-    <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
+       <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/12-prevent-collision.html b/examples/12-prevent-collision.html
@@ -5,21 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/12-prevent-collision.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/12-prevent-collision.js"></script>
     <title>RGL Example 12 - Prevent Collision</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 12 - Prevent Collision</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/12-prevent-collision.jsx">View this example's source</a></li>
-
       <li><a href="11-no-vertical-compact.html"><b>⇠</b> View the previous example: "No Vertical Compacting (Free Movement)"</a></li>
-
       <li><a href="13-error-case.html"><b>⇢ </b>View the next example: "Error Case"</a></li>
     </ul>
-    <p>You may want to turn off rearrangement so items don't move arround when dragging. Set the property `preventCollision` to `true` to achieve this effect. It's particularly useful with `verticalCompact` set to `false`.</p>
+       <p>You may want to turn off rearrangement so items don't move arround when dragging. Set the property `preventCollision` to `true` to achieve this effect. It's particularly useful with `verticalCompact` set to `false`.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/13-error-case.html b/examples/13-error-case.html
@@ -5,21 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/13-error-case.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/13-error-case.js"></script>
     <title>RGL Example 13 - Error Case</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 13 - Error Case</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/13-error-case.jsx">View this example's source</a></li>
-
       <li><a href="12-prevent-collision.html"><b>⇠</b> View the previous example: "Prevent Collision"</a></li>
-
       <li><a href="14-toolbox.html"><b>⇢ </b>View the next example: "Toolbox"</a></li>
     </ul>
-    <p>This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not move over 3.</p>
+       <p>This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not move over 3.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/14-toolbox.html b/examples/14-toolbox.html
@@ -5,20 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/14-toolbox.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/14-toolbox.js"></script>
     <title>RGL Example 14 - Toolbox</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 14 - Toolbox</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/14-toolbox.jsx">View this example's source</a></li>
-
       <li><a href="13-error-case.html"><b>⇠</b> View the previous example: "Error Case"</a></li>
       <li><a href="15-drag-from-outside.html"><b>⇢ </b>View the next example: "Drag From Outside"</a></li>
     </ul>
-    <p>This demonstrates how to implement a toolbox to add and remove widgets.</p>
+       <p>This demonstrates how to implement a toolbox to add and remove widgets.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/15-drag-from-outside.html b/examples/15-drag-from-outside.html
@@ -5,20 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/15-drag-from-outside.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/15-drag-from-outside.js"></script>
     <title>RGL Example 15 - Drag From Outside</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 15 - Drag From Outside</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/15-drag-from-outside.jsx">View this example's source</a></li>
-
-      <li><a href="14-toolbox.html"><b>⇢ </b>View the previous example: "Toolbox"</a></li>
+      <li><a href="14-toolbox.html"><b>⇠</b> View the previous example: "Toolbox"</a></li>
     </ul>
-    <p>This demo shows what happens when an item is added from outside of the grid.</p>
-    <p>Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.</p>
+       <p>This demo shows what happens when an item is added from outside of the grid.</p>
+       <p>Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/2-no-dragging.html b/examples/2-no-dragging.html
@@ -5,21 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/2-no-dragging.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/2-no-dragging.js"></script>
     <title>RGL Example 2 - No Dragging</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 2 - No Dragging</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/2-no-dragging.jsx">View this example's source</a></li>
-
       <li><a href="1-basic.html"><b>⇠</b> View the previous example: "Basic"</a></li>
-
       <li><a href="3-messy.html"><b>⇢ </b>View the next example: "Messy"</a></li>
     </ul>
-    <p>This particular example has dragging and resizing turned off.</p>
+       <p>This particular example has dragging and resizing turned off.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/3-messy.html b/examples/3-messy.html
@@ -5,23 +5,21 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/3-messy.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/3-messy.js"></script>
     <title>RGL Example 3 - Messy</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 3 - Messy</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/3-messy.jsx">View this example's source</a></li>
-
       <li><a href="2-no-dragging.html"><b>⇠</b> View the previous example: "No Dragging"</a></li>
-
       <li><a href="4-grid-property.html"><b>⇢ </b>View the next example: "Grid Item Properties"</a></li>
     </ul>
-    <p>This demo shows what happens when elements are placed randomly all over the layout.</p>
-    <p>RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done in the vertical dimension. If objects all have the same width, they will be packed efficiently.</p>
-    <p>If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, out of bounds, etc), they will be automatically corrected on startup. See the source of this demo, where elements are placed randomly in the layout.</p>
+       <p>This demo shows what happens when elements are placed randomly all over the layout.</p>
+       <p>RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done in the vertical dimension. If objects all have the same width, they will be packed efficiently.</p>
+       <p>If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, out of bounds, etc), they will be automatically corrected on startup. See the source of this demo, where elements are placed randomly in the layout.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/4-grid-property.html b/examples/4-grid-property.html
@@ -5,21 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/4-grid-property.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/4-grid-property.js"></script>
     <title>RGL Example 4 - Grid Item Properties</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 4 - Grid Item Properties</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/4-grid-property.jsx">View this example's source</a></li>
-
       <li><a href="3-messy.html"><b>⇠</b> View the previous example: "Messy"</a></li>
-
       <li><a href="5-static-elements.html"><b>⇢ </b>View the next example: "Static Elements"</a></li>
     </ul>
-    <p>This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.</p>
+       <p>This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.</p>
     <div id="content"></div>
   </body>
 </html>
diff --git a/examples/5-static-elements.html b/examples/5-static-elements.html
@@ -5,21 +5,19 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <script src="http://localhost:4002/dist/commons.js"></script>
-    <script src="http://localhost:4002/dist/5-static-elements.bundle.js"></script>
+    <script src="http://localhost:4002/examples/commons.js"></script>
+    <script src="http://localhost:4002/examples/5-static-elements.js"></script>
     <title>RGL Example 5 - Static Elements</title>
   </head>
   <body>
     <h3>React-Grid-Layout Demo 5 - Static Elements</h3>
     <ul>
       <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/5-static-elements.jsx">View this example's source</a></li>
-
       <li><a href="4-grid-property.html"><b>⇠</b> View the previous example: "Grid Item Properties"</a></li>
-
       <li><a href="6-dynamic-add-remove.html"><b>⇢ </b>View the next example: "Dynamic Add/Remove"</a></li>
     </ul>
-    <p>This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements move themselves around a static element.</p>
+       <p>This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements move themselves around a static element.</p>
     <div id="content"></div>
   </body>
 </html>