@revolist/revogrid 4.0.2-next → 4.0.2

package/hydrate/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@revolist/revogrid/hydrate",
+  "description": "RevoGrid component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts"
+}

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.0.2-next",
-  "description": "Virtual reactive data grid component - RevoGrid.",
+  "version": "4.0.2",
+  "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",
-  "directories": {
-    "doc": "docs"
-  },
   "author": "revolist",
   "homepage": "https://github.com/revolist/revogrid#readme",
   "repository": {
@@ -18,74 +15,119 @@
   "keywords": [
     "revo-grid",
     "revolist",
+    "csv",
     "datagrid",
-    "storybook",
-    "stenciljs",
-    "reactive",
+    "datalist",
+    "datamanager",
+    "editable",
+    "excel",
+    "excel-grid",
+    "export",
+    "fast-grid",
+    "filtering",
     "grid",
-    "datagrid",
+    "grouping",
+    "infinity-grid",
+    "reactive",
+    "spreadsheet",
+    "stenciljs",
+    "storybook",
+    "treeview",
     "virtualgrid",
     "virtual",
+    "virtuallist",
+    "virtual-scroll",
+
     "vue",
-    "react",
-    "react-grid",
     "vue-grid",
     "vue-datagrid",
-    "fast-grid",
-    "excel-grid",
-    "editable",
-    "excel",
-    "export",
-    "filtering"
+    "vue3",
+    "vue3-datagrid",
+
+    "react",
+    "react-grid",
+    "react-datagrid",
+
+    "svelte",
+    "svelte-grid",
+    "svelte-datagrid",
+
+    "angular",
+    "angular-grid",
+    "angular-datagrid",
+    "angular-tree"
   ],
+
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
+  "unpkg": "dist/revo-grid/revo-grid.esm.js",
+  
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/revo-grid/revo-grid.js",
+
+  "types": "dist/types/index.d.ts",
+
+  "exports": {
+    ".": {
+      "import": "./dist/revo-grid/revo-grid.esm.js",
+      "require": "./dist/revo-grid/revo-grid.cjs.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./loader": {
+      "import": "./dist/loader/index.js",
+      "require": "./dist/loader/index.cjs",
+      "types": "./dist/loader/index.d.ts"
+    },
+    "./standalone": {
+      "import": "./standalone/revo-grid.js",
+      "types": "./standalone/revo-grid.d.ts"
+    }
+  },
+
   "files": [
     "dist/",
-    "loader/",
-    "custom-element/"
+    "hydrate/",
+    "standalone/"
   ],
   "scripts": {
-    "build": "stencil build --prod --docs",
-    "build:demo": "cd ./demo/ && rm -rf node_modules && npm i && npm run build",
+    "build": "npm run api:clear && stencil build --prod && npm run api:update",
+    "api:clear": "rm -rf docs/guide/api",
+    "api:update": "./generate_api.sh",
+    "readme": "./readme/generate_readme.sh",
     "serve": "stencil build --dev --watch --serve",
-    "generate": "stencil generate",
-    "deploy": "git submodule update && npm run build:demo && gh-pages -d ./demo/src/.vuepress/dist",
-    "prettier": "npx prettier --write ./src"
+    "deploy": "git submodule update && npm run build:demo"
   },
   "devDependencies": {
-    "@angular/core": "^11.0.9",
-    "@juggle/resize-observer": "^3.2.0",
-    "@stencil/angular-output-target": "0.0.5",
-    "@stencil/core": "2.6.0",
-    "@stencil/react-output-target": "0.0.9",
-    "@stencil/sass": "^1.4.1",
-    "@stencil/store": "^1.3.0",
+    "@angular/core": "^18.0.3",
+    "@juggle/resize-observer": "^3.4.0",
+    "@revolist/stencil-vue2-output-target": "^0.0.3",
+    "@stencil/angular-output-target": "0.8.4",
+    "@stencil/react-output-target": "0.5.3",
+    "@stencil/sass": "^3.0.12",
+    "@stencil/store": "^2.0.16",
     "@stencil/svelte-output-target": "0.0.3",
-    "@stencil/vue-output-target": "^0.2.5",
-    "@types/events": "^3.0.0",
-    "@types/jest": "^26.0.20",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.20",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/resize-observer-browser": "^0.1.5",
-    "gh-pages": "^2.2.0",
+    "@stencil/vue-output-target": "^0.8.8",
+    "@types/events": "^3.0.3",
+    "@types/jest": "^29.5.12",
+    "@types/lodash": "^4.17.5",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/resize-observer-browser": "^0.1.11",
     "jest": "26.0.1",
     "jest-cli": "26.0.1",
-    "lodash": "^4.17.20",
-    "prettier": "2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "rxjs": "^6.6.3",
-    "svelte": "^3.31.2",
-    "typescript": "^3.9.7",
-    "vue": "^3.0.5"
+    "prettier": "3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rxjs": "^7.8.1",
+    "svelte": "^4.2.18",
+    "vue": "^3.4.27",
+    "bootstrap": "^5.3.2",
+    "typescript": "^5.4.5",
+    "lodash": "^4.17.21",
+    "@stencil/core": "^4.18.3"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/readme.md

@@ -4,15 +4,16 @@
   </a>
 </p>
 
-##
-
 <p align="center">
   <a href="https://www.npmjs.com/package/@revolist/revogrid"><img src="https://img.shields.io/npm/v/@revolist/revogrid" alt="Latest Version on NPM"/></a>
   <a href="https://github.com/revolist/revogrid/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@revolist/revogrid" alt="Software License"/></a>
   <img src="https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid@latest" alt="Tree shaking"/>
   <img src="https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid@latest" alt="Tree shaking"/>
 </p>
-<h4 align="center">Powerful data grid component built with <a href="https://stenciljs.com" target="_blank">StencilJS</a>.</h4>
+
+#
+
+<h3 align="center">Powerful data grid component built with <a href="https://stenciljs.com" target="_blank">StencilJS</a>.</h3>
 <p align="center">
 Support Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.
   
@@ -33,61 +34,89 @@ Support Millions of cells and thousands of columns easy and efficiently for fast
 
 ## Key Features
 
-- Millions of cells viewport with a powerful core in-build by default;
-- Keyboard support with excel like focus;
-- Super light initial starter <img src="https://badgen.net/bundlephobia/min/@revolist/revogrid@latest" alt="Min size"/>. Can be imported with polifill or as module for modern browsers;
-- Intelligent Virtual DOM and smart rgRow recombination in order to achieve less redraws;
-- Sorting (multiple options, can be customized per column and advanced with events);
-- Filtering
-  - Predefined system filters;
-  - Preserve existing collection;
-  - Custom filters (extend existing system filters with your own set);
-- Export to file;
-- Custom sizes per Column and Row;
-- Column resizing;
-- Autosize support (Column size based on content);
-- Pinned/Sticky/Freezed:
-  - Columns (define left or right);
-  - Rows (define top or bottom);
-- Grouping:
-  - Column grouping (Nester headers);
-  - Row grouping (Nested rows);
-- Cell editing;
-- Customizations:
-  - Header template;
-  - Cell template (build your own cell view);
-  - Cell editor (apply your own editors and cell types);
-  - Cell properties (build you own properties around rendered cells);
-- [Column types](https://revolist.github.io/revogrid/guide/column.types.html);
-  - Text/String (default);
-  - Number;
-  - Select;
-  - Date;
-  - Custom (take any type as template and create your own extended style);
-- Drag and drop rows;
-- Range operations:
-  - Selection;
-  - Edit;
-- Theme packages:
-  - Excel like (default)
-  - Material (compact, dark or light);
-- Copy/Paste (copy/paste from Excel, Google Sheets or any other sheet format);
-- Easy extenation and support with modern VNode features and tsx support;
-- Trimmed rows (hide rows on demand);
-- Plugin system (create your own plugins or extend existing one, it's transparent and easy);
-- Automated size calculation;
-- Hundred others small customizations and improvements [RevoGrid](https://revolist.github.io/revogrid).
-
-## Overview
-
-<img src="./assets/framework.png" alt="Framework friendly" width="100%" />
-
-The RevoGrid component helps represent a huge amount of data in a form of data table "excel like" or as list. On top of it it provides inbuilt range edit or per cell edit, keyboard support and custom edit and render features. Works in any major framework or with no framework at all.
+- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.
+
+- **Keyboard Support**:
+  - Excel-like focus for efficient navigation and editing.
+  - Seamless copy/paste from Excel, Google Sheets, or any other sheet format.
+
+
+- **Lightweight**: Minimal initial bundle size ![Min size](https://badgen.net/bundlephobia/min/@revolist/revogrid@latest). Can be imported with polyfills or as a module for modern browsers.
+
+- **Intelligent Virtual DOM**: Smart row recombination to minimize redraws.
+
+- **Sorting**: Multiple options, customizable per column, with advanced event handling.
+
+- **Filtering**:
+  - Predefined system filters.
+  - Preserve existing collections.
+  - Custom filters to extend system filters with your own set.
+
+- **Export**: Export data to file.
+
+- **Custom Sizes**: Define custom sizes for columns and rows. Automatic sizing based on content.
+
+- **Column Resizing**: Adjust column widths.
+
+- **Pinned/Sticky/Freezed Elements**:
+  - Columns (define left or right).
+  - Rows (define top or bottom).
+
+- **Grouping**:
+  - Column grouping (nested headers).
+  - Row grouping (nested rows).
+
+- **Cell Editing**: In-place editing of cell data.
+
+- **Customizations**:
+  - Column header templates.
+  - Row header templates.
+  - Cell template (create your own cell views).
+  - Cell editor (use predefined or apply your own custom editors and cell types).
+  - Cell properties (define custom properties for rendered cells).
+
+- **Column Types**: [More details](https://revolist.github.io/revogrid/guide/column.types.html)
+  - Text/String (default).
+  - Number.
+  - Select.
+  - Date.
+  - Custom (create extended styles using any template).
+
+- **Drag and Drop**: Easily reorder rows.
+
+- **Range Operations**:
+  - Selection.
+  - Editing.
+
+- **Theme Packages**:
+  - Excel-like (default).
+  - Material (compact, dark, or light).
+
+- **Extensibility**: Modern VNode features and tsx support for easy extension.
+
+- **Trimmed Rows**: Hide rows on demand.
+
+- **Plugin System**: Create custom plugins or extend existing ones easily.
+
+- **Additional Customizations and Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://revolist.github.io/revogrid).
+
+<br>
+
+
+
+<h2 align="center">Framework Friendly</h2>
+
+<p align="center">
+<img src="./assets/framework.png" alt="Framework friendly" width="100%" max-width="500px" style="max-width: 600px"/>
+<p align="center">
+<i>I am RevoGrid, your solution for efficiently representing large datasets <br /> in an "Excel-like" data table or as a list. Render native components inside each cell!</i>
+</p>
+</p>
+
+<br>
+<br>
 <br>
 
-| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |
-| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| Latest ✔                                                                                 | Latest ✔                                                                                    | Latest ✔                                                                                 | Latest ✔                                                                              | Latest ✔                                                                           |
 
 ## Installation
 
@@ -106,6 +135,13 @@ With Yarn:
 yarn add @revolist/revogrid;
 ```
 
+## Browser Support
+
+| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Latest ✔   | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+|
+
 ## Framework
 
 - [JavaScript](https://revolist.github.io/revogrid/guide);
@@ -115,77 +151,78 @@ yarn add @revolist/revogrid;
 - [Angular](https://revolist.github.io/revogrid/guide/framework.angular.overview.html);
 - [Ember](docs/ember.md).
 
+
 ## Basic Usage
 
-Grid works as web component.
-All you have to do just to place component on the page and access it properties as an element.
-We provide many ways to integrate our grid in your project:
+RevoGrid functions as a web component. Simply place the component on your page and access its properties as you would with any other HTML element. It also offers multiple ways to integrate our grid into your project:
 
-- [Import grid to your index.html file](./docs/indexhtml.md);
-- [Import as module with lazy loading](./docs/indexmodule.md);
-- [Import inside builders like webpack using lazy loading module](./docs/webpack.md);
-- [Import as esm module without lazy loading](./docs/custom.element.md);
+- [Import the grid into your index.html file](./docs/indexhtml.md)
+- [Import as a module with lazy loading](./docs/indexmodule.md)
+- [Import using builders like Webpack with lazy loading](./docs/webpack.md)
+- [Import as an ESM module without lazy loading](./docs/custom.element.md)
 
 
-### Vanilla Js grid usage
+### Vanilla JS Grid Usage
 
 ```javascript
+// Select the RevoGrid element from the DOM
 const grid = document.querySelector('revo-grid');
+
+// Define the columns for the grid
 const columns = [
-  { prop: 'name', name: 'First column' },
+  { prop: 'name', name: 'First Column' }, // Simple column definition
   {
     prop: 'details',
-    name: 'Second column',
+    name: 'Second Column',
+    // Custom cell template for the 'details' column
     cellTemplate: (createElement, props) => {
-      return createElement('div',
+      return createElement(
+        'div',
         {
-          style: { backgroundColor: 'red' },
-          class: { 'inner-cell': true },
+          style: { backgroundColor: 'red' }, // Styling the cell background
+          class: { 'inner-cell': true }, // Adding a CSS class
         },
-        props.model[props.prop] || '',
+        props.model[props.prop] || '' // Display the cell content or an empty string if undefined
       );
     },
   },
 ];
-const items = [{ name: 'New item', details: 'Item description' }];
+
+// Define the data source for the grid
+const items = [{ name: 'New Item', details: 'Item Description' }];
+
+// Assign the columns and data source to the grid
 grid.columns = columns;
 grid.source = items;
 ```
 
-## Framework usage VueJs example
-
-```vue
-<template>
-  <v-grid :source="rows" :columns="columns"/>
-</template>
-
-<script>
-import VGrid from '@revolist/vue-datagrid';
-export default {
-  name: 'App',
-  data() => ({
-      columns: [
-        { prop: 'name', name: 'First' },
-        { prop: 'details', name: 'Second' },
-      ],
-      rows: [{ name: '1', details: 'Item 1' }],
-    };
-  }),
-  components: { VGrid },
-};
-</script>
-```
-
 ## Versions
-- 2.0+ Introduced plugin system, grouping, sorting and filtering.
-- 3.0+ Breaking changes introduced [version](./docs/migration.3.0.md). New component loading and esm modules. Bootstrap support and much [more](./docs/migration.3.0.md).
+
+- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.
+- **3.0+**: Breaking changes introduced. See the [migration guide](./docs/guide/migration.md).
+This version features new component loading, ESM modules, Bootstrap support, and much [more](./docs/guide/migration.md).
+- **4.0+**: Breaking changes introduced. See the [migration guide](./docs/guide/migration.md). In this version, we rethought our framework approach, updated typings, fixed major issues, updated core and significantly improved overall performance. The grid is now much faster, with better plugin support and full framework support for Angular, React, and Vue, along with partial support for Ember and Svelte. Redesigned the documentation, and added more examples.
+
+
 
 ## Contributing
 
-If you have any idea, feel free to open an issue to discuss a new feature, or fork RevoGrid and submit your changes back to me.
+We invite you to join our community and contribute to the growth and success of open-source projects. By getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact for the open-source community.
+
+### Why Contribute?
+
+- **Expand Your Knowledge**: Working on RevoGrid allows you to dive deep into modern web technologies (like webcomponents), improve your coding skills, and learn best practices in performance optimization, data handling, and component-based architecture.
+- **Valuable Experience**: Contributing to an open-source project like RevoGrid provides you with practical experience that can be a great addition to your portfolio. It demonstrates your ability to work collaboratively, solve complex problems.
+- **Professional Growth**: Contributing leads to mentorship opportunities, collaborations, and professional connections that can benefit your career.
+- **Make a Difference**: Your contributions can help improve RevoGrid, making it more user-friendly for developers around the world. Your input can shape the the project and drive innovation.
+
+### Join Us
+
+Your contribution, no matter how big or small, is valuable. By working on RevoGrid, you'll be part of an exciting project that's making a difference in the world of data grids.
 
 ## License
 
 MIT
 
 ---
+