Now with Typescript! (#425)

.editorconfig

@@ -8,6 +8,3 @@ insert_final_newline = true
 charset = utf-8
 indent_style = space
 indent_size = 2
-
-[*.cs] 
-indent_size = 4

.eslintrc.js

@@ -2,16 +2,14 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: false
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'],
   parserOptions: {
     parser: 'babel-eslint'
   },
   plugins: ['html'],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'import/no-unresolved': 'warn'
   },
   overrides: [

.gitignore

@@ -196,3 +196,4 @@ yarn-error.log
 # End of https://www.toptal.com/developers/gitignore/api/linux,macos,node,dotenv,visualstudiocode,vuejs
 
 .dccache
+build

bili.config.js

@@ -1,30 +1,19 @@
-module.exports = {
-  jsCompiler: 'babel',
-  input: ['src/index.browser.mjs', 'src/index.mjs'],
+const config = {
+  input: 'build/main.js',
   bundleNodeModules: true,
+  externals: ['vue'],
   output: {
     format: ['cjs', 'esm', 'umd'],
     minify: true,
     moduleName: 'Grid',
-    extractCSS: false
+    extractCSS: false,
+    dir: 'dist/'
   },
   plugins: {
-    string: {
-      include: 'node_modules/**/*.css'
-    },
+    babel: false,
     vue: {
       target: 'browser'
-    },
-    babel: {
-      presets: ['vue', ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
-      plugins: ['@babel/plugin-transform-runtime'],
-      babelHelpers: 'runtime',
-      configFile: false
-    },
-    'node-resolve': true
-  },
-  resolvePlugins: {
-    string: require('rollup-plugin-string').string
-  },
-  external: 'crypto'
+    }
+  }
 }
+export default config

docs/using_with_components.md

@@ -10,7 +10,7 @@ directly into a table cell or row.
 
 <script>
   import faker from 'https://cdn.skypack.dev/faker'
-  import { Grid } from '../../dist/index.esm.js'
+  import { Grid } from '../../dist/main.esm.js'
   import TestComponent from '../test-component.mjs'
 
   export default {
@@ -57,7 +57,7 @@ passing `methods` to `$gridjs.helper()` containing your event handler, just as y
 
 <script>
   import faker from 'https://cdn.skypack.dev/faker'
-  import { Grid } from '../../dist/index.esm.js'
+  import { Grid } from '../../dist/main.esm.js'
   import TestComponent from '../test-component.mjs'
 
   export default {
@@ -106,7 +106,7 @@ communicate back with the main Vue application unless using a separate global ev
 ```js
 import Emittery from 'https://cdn.skypack.dev/emittery'
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 window.emitter = new Emittery()
 

examples/advanced/custom-sort.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'CustomSort',

examples/advanced/events.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Events',
@@ -20,13 +20,15 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.$refs.myGrid.grid.on('rowClick', (...args) => {
-        console.log(`row: ${JSON.stringify(args)}`)
-      })
+      if (this.$refs.myGrid && this.$refs.myGrid.grid) {
+        this.$refs.myGrid.grid.on('rowClick', (...args) => {
+          console.log(`row: ${JSON.stringify(args)}`)
+        })
 
-      this.$refs.myGrid.grid.on('cellClick', (...args) => {
-        console.log(`cell: ${JSON.stringify(args)}`)
-      })
+        this.$refs.myGrid.grid.on('cellClick', (...args) => {
+          console.log(`cell: ${JSON.stringify(args)}`)
+        })
+      }
     })
   },
   template: `

examples/advanced/force-render.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'ForceRender',

examples/advanced/global-event-bus.mjs

@@ -1,6 +1,6 @@
 import Emittery from 'https://cdn.skypack.dev/emittery'
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 window.emitter = new Emittery()
 

examples/advanced/multi-column-sort.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'MultiColumnSort',

examples/advanced/nested-header.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'NestedHeader',

examples/advanced/stock-market.mjs

@@ -1,5 +1,5 @@
 import VueChartist from 'https://cdn.skypack.dev/v-chartist'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'StockMarket',

examples/advanced/virtual-dom.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'VirtualDom',

examples/advanced/vue-events.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 import TestComponent from '../test-component.mjs'
 
 export default {

examples/basic/auto-update.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'AutoUpdate',

examples/basic/fixed-header.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'FixedHeader',

examples/basic/from-html-table.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'FromHtmlTable',

examples/basic/hello-world.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'HelloWorld',
@@ -31,12 +31,7 @@ export default {
       ]
     }
   },
-  methods: {
-    log(text) {
-      console.log(text)
-    }
-  },
   template: `
-    <div><grid :columns="columns" :rows="rows" ref="helloWorld" @ready="log('Hi to you too!')"></grid></div>
+    <div><grid :columns="columns" :rows="rows" ref="helloWorld"></grid></div>
   `
 }

examples/basic/hidden-columns.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'HiddenColumns',

examples/basic/loading-state.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'LoadingState',

examples/basic/pagination.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Pagination',

examples/basic/resizable.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Resizable',

examples/basic/search.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Search',

examples/basic/sorting.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Sorting',

examples/basic/wide-table.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'WideTable',

examples/customizing/cell-attributes.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'CellAttributes',

examples/customizing/cell-formatting.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'CellFormatting',

examples/customizing/html-in-cells.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'HtmlInCells',

examples/customizing/html-in-header-cells.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'HtmlInCells',

examples/customizing/row-buttons.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'RowButtons',

examples/customizing/vue-component-in-cells.mjs

@@ -1,5 +1,5 @@
 import faker from 'https://cdn.skypack.dev/faker'
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 import TestComponent from '../test-component.mjs'
 
 export default {

examples/data-source/async-data-import.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'AsyncDataImport',

examples/data-source/dynamic-data-import.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'DynamicDataImport',

examples/data-source/from-html-table.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'FromHtmlTable',

examples/data-source/import-server-side-data.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'ImportServerSideData',

examples/data-source/json.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Json',

examples/data-source/xml.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'Json',

examples/server-side/custom-http-client.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'CustomHttpClient',

examples/server-side/import-server-side-data.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'ImportServerSideData',

examples/server-side/server-side-pagination.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'ServerSidePagination',

examples/server-side/server-side-search.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'ServerSideSearch',

examples/server-side/server-side-sorting.mjs

@@ -1,4 +1,4 @@
-import { Grid } from '../../dist/index.esm.js'
+import { Grid } from '../../dist/main.esm.js'
 
 export default {
   name: 'ServerSideSorting',

examples/styling.html

@@ -40,5 +40,12 @@ <h2>CSS-in-JS</h2>
         `
       })
     </script>
+
+    <style>
+      .gridjs-td.my-custom-td-class {
+        background-color: blue !important;
+        color: white !important;
+      }
+    </style>
   </body>
 </html>