Merge pull request #2269 from adumesny/master

adumesny · web-flow · commit d969d045c5d7 · 2023-04-22T07:18:13.000-07:00
added esmodule.html test
diff --git a/demo/esmodule.html b/demo/esmodule.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>ES Module demo</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+
+</head>
+<body>
+  <h1>ES Module loading demo</h1>
+  <div class="grid-stack"></div>
+
+  <!-- loading GS as an ES module instead of commonjs all.js. get CORS error though -->
+  <script type="module">
+    import { GridStack } from '../dist/gridstack.js';
+
+    let items = [{x: 1, y: 1}, {x: 2, y: 2, w: 3}];
+    let count = 0;
+    items.forEach(e => e.content = String(count++));
+
+    GridStack.init({float: true}).load(items);
+  </script>
+</body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -35,6 +35,7 @@ <h1>Demos</h1>
     <li><a href="web-comp.html">Web Component</a></li>
     <li><a href="web1.html">Website demo 1</a></li>
     <li><a href="web2.html">Website demo 2</a></li>
+    <li><a href="esmodule.html">ES Module test</a></li>
   </ul>
   <h1>Angular wrapper</h1>
   <p>We now ship an <a href="https://github.com/gridstack/gridstack.js/tree/master/demo/angular/src/app" target="_blank">Angular component wrapper</a>
