gridstack · adumesny · Jun 13, 2022 · Jun 28, 2022 · Jul 25, 2022 · Jul 25, 2022
diff --git a/demo/esmodule.html b/demo/esmodule.html
@@ -0,0 +1,88 @@
+<!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>Advanced ES Module Demo</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="demo.css" />
+
+  <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
+
+  <style type="text/css">
+    .grid-stack-item-removing {
+      opacity: 0.8;
+      filter: blur(5px);
+    }
+    #trash {
+      background: rgba(255, 0, 0, 0.4);
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Advanced ES Module Demo</h1>
+  <div class="row">
+    <div class="col-md-2 d-none d-md-block">
+      <div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">
+        <div>
+          <ion-icon name="trash" style="font-size: 300%"></ion-icon>
+        </div>
+        <div>
+          <span>Drop here to remove!</span>
+        </div>
+      </div>
+      <div class="newWidget grid-stack-item">
+        <div class="grid-stack-item-content" style="padding: 5px;">
+          <div>
+            <ion-icon name="add-circle" style="font-size: 300%"></ion-icon>
+          </div>
+          <div>
+            <span>Drag me in the dashboard!</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-12 col-md-10">
+      <div class="grid-stack"></div>
+    </div>
+  </div>
+
+  <script type="module">
+    import { GridStack } from '../dist/esm/gridstack.js';
+    let grid = GridStack.init({
+      cellHeight: 70,
+      acceptWidgets: true,
+      dragIn: '.newWidget',  // class that can be dragged from outside
+      dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }, // clone or can be your function
+      removable: '#trash', // drag-out delete class
+    });
+
+    let items = [
+      {x: 0, y: 0, w: 4, h: 2, content: '1'},
+      {x: 4, y: 0, w: 4, h: 4, noMove: true, noResize: true, locked: true, content: 'I can\'t be moved or dragged!<br><ion-icon name="ios-lock" style="font-size:300%"></ion-icon>'},
+      {x: 8, y: 0, w: 2, h: 2, minW: 2, noResize: true, content: '<p class="card-text text-center" style="margin-bottom: 0">Drag me!<p class="card-text text-center"style="margin-bottom: 0"><ion-icon name="hand" style="font-size: 300%"></ion-icon><p class="card-text text-center" style="margin-bottom: 0">...but don\'t resize me!'},
+      {x: 10, y: 0, w: 2, h: 2, content: '4'},
+      {x: 0, y: 2, w: 2, h: 2, content: '5'},
+      {x: 2, y: 2, w: 2, h: 4, content: '6'},
+      {x: 8, y: 2, w: 4, h: 2, content: '7'},
+      {x: 0, y: 4, w: 2, h: 2, content: '8'},
+      {x: 4, y: 4, w: 4, h: 2, content: '9'},
+      {x: 8, y: 4, w: 2, h: 2, content: '10'},
+      {x: 10, y: 4, w: 2, h: 2, content: '11'},
+    ];
+    grid.load(items);
+
+    grid.on('added removed change', function(e, items) {
+      let str = '';
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
+  </script>
+</body>
+
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -35,6 +35,23 @@ <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">Use as an esmodule</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>
+    to make it supper easy for that framework (Vue and React examples are above)</p>
+  <p>These are complete Angular projects with multiple options. use `yarn` and `yarn start` in <a href="https://github.com/gridstack/gridstack.js/tree/master/demo/angular" target="_blank">demo/angular</a> sub-project to run them</p>
+  <ol>
+    <li><a href="angular/src/app/simple.ts">simple.ts</a></li>
+    <li><a href="angular/src/app/ngFor.ts">ngFor.ts</a></li>
+    <li><a href="angular/src/app/ngFor_cmd.ts">ngFor with command</a> (not recommended)</li>
+    <li><a href="angular/src/app/gridstack.component.ts">gridstack.component.ts</a> and <a href="angular/src/app/gridstack-item.component.ts">gridstack-item.component.ts</a> (BEST)</li>
+  </ol>
+  <h1>Old v5.1.1 Jquery Demos</h1>
+  Note: those are no longer supported, and use an old version of the lib to compare functionality.
+  <ul>
+    <li><a href="old_two-jq.html">Two grids</a></li>
+    <li><a href="old_nested-jq.html">Nested grids</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>

diff --git a/es5/tsconfig.json b/es5/tsconfig.json
@@ -5,6 +5,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
    */
+    "rootDir": "../src",
     "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   "description": "TypeScript/JS lib for dashboard layout and creation, responsive, mobile support, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gridstack/gridstack.js.git"
@@ -25,15 +26,16 @@
     }
   ],
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:es5 && yarn doc",
+    "build": "yarn --no-progress && rimraf dist && grunt && yarn build:es6 && yarn build:es5 && yarn build:esm && yarn doc",
     "build:es6": "webpack && tsc --stripInternal",
     "build:es5": "webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json",
-    "w": "webpack",
+    "build:esm": "rollup -c rollup.config.js",
+    "w": "rimraf dist/* && grunt && rollup -c rollup.config.js",
     "t": "rm -rf dist/* && grunt && tsc --stripInternal",
     "doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
     "test": "yarn lint && karma start karma.conf.js",
     "lint": "tsc --noEmit && eslint src/*.ts",
-    "reset": "rm -rf dist node_modules",
+    "reset": "rimraf dist node_modules",
     "prepublishOnly": "yarn build"
   },
   "keywords": [
@@ -58,6 +60,10 @@
   "homepage": "http://gridstackjs.com/",
   "dependencies": {},
   "devDependencies": {
+    "@rollup/plugin-alias": "^5.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@types/jasmine": "^4.3.1",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
@@ -84,9 +90,11 @@
     "karma-jasmine": "^5.1.0",
     "karma-typescript": "5.5.3",
     "protractor": "^7.0.0",
+    "rollup": "^3.20.3",
     "sass": "^1.62.0",
     "serve-static": "^1.15.0",
     "ts-loader": "^9.4.2",
+    "tslib": "^2.4.0",
     "typescript": "^5.0.4",
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1"

diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,35 @@
+import nodeResolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+
+// rollup.config.js
+/**
+* @type {import('rollup').RollupOptions[]}
+*/
+export default [
+  {
+    input: {
+      'gridstack': './src/gridstack.ts'
+    },
+    output: {
+      format: 'esm',
+      dir: './dist/esm',
+      sourcemap: true,
+      globals: {
+        jquery: '$'
+      },
+      preserveModules: true
+    },
+    plugins: [
+      typescript({
+        tsconfig: './tsconfig.json',
+        outDir: './dist/esm',
+        module: "esnext",
+        declaration: true,
+        stripInternal: true,
+      }),
+      nodeResolve({
+        browser: true,
+      })
+    ]
+  }
+]
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,8 +3,8 @@
     /*
     "allowJs": true,
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true
    */
+    "rootDir": "src",
     "declaration": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
@@ -15,7 +15,8 @@
     "outDir": "./dist",
     "sourceMap": true,
     "strict": false,
-    "target": "ES2020"
+    "target": "ES2020",
+    "allowSyntheticDefaultImports": true
   }, 
   "exclude": [
     "./src/**/*.spec.ts",