Add bundled version (#384)

Author: selfagency

.release-it.json

@@ -18,11 +18,11 @@ issues](https://img.shields.io/github/issues/grid-js/gridjs-vue?color=41B883&sty
 npm install gridjs-vue
 ```
 
-Also available on [unpkg](https://unpkg.com/browse/gridjs-vue@5.0.1/dist/) and [Skypack](https://www.skypack.dev/view/gridjs-vue)!
+Also available on [unpkg](https://unpkg.com/browse/gridjs-vue/dist/) and [Skypack](https://www.skypack.dev/view/gridjs-vue)!
 
 ```html
 <script>
-  import Grid from 'gridjs-vue'
+  import { Grid } from 'gridjs-vue'
 
   export default {
     components: {

README.md

@@ -1,9 +1,9 @@
 module.exports = {
   jsCompiler: 'babel',
-  input: 'src/index.js',
+  input: ['src/index.browser.mjs', 'src/index.mjs'],
+  bundleNodeModules: true,
   output: {
     format: ['cjs', 'esm', 'umd'],
-    bundleNodeModules: true,
     minify: true,
     moduleName: 'Grid',
     extractCSS: false
@@ -13,15 +13,12 @@ module.exports = {
       include: 'node_modules/**/*.css'
     },
     vue: {
-      target: 'browser',
-      babelHelopers: 'runtime',
-      css: true
+      target: 'browser'
     },
     babel: {
       presets: ['vue', ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
       plugins: ['@babel/plugin-transform-runtime'],
       babelHelpers: 'runtime',
-      exclude: 'node_modules/**',
       configFile: false
     },
     'node-resolve': true

bili.config.js

@@ -7,7 +7,24 @@ export default {
   },
   data() {
     return {
-      columns: ['Name', 'Email', 'Phone Number'],
+      sort: true,
+      columns: [
+        'Name',
+        'Email',
+        {
+          name: 'Phone Number',
+          sort: {
+            compare: (a, b) => {
+              a = parseInt(a.replace(/\(|\)|\s/g, ''))
+              b = parseInt(b.replace(/\(|\)|\s/g, ''))
+              let out = 0
+              if (a > b) out = 1
+              if (a < b) out = -1
+              return out
+            }
+          }
+        }
+      ],
       rows: [
         ['John', 'john@example.com', '(353) 01 222 3333'],
         ['Mark', 'mark@gmail.com', '(01) 22 888 4444']
@@ -20,6 +37,6 @@ export default {
     }
   },
   template: `
-    <div><grid :columns="columns" :rows="rows" @ready="log('Hi to you too!')"></grid></div>
+    <div><grid :columns="columns" :rows="rows" ref="helloWorld" @ready="log('Hi to you too!')"></grid></div>
   `
 }

examples/basic/hello-world.mjs

@@ -10,13 +10,16 @@ export default {
       columns: ['Name', 'Email', 'Phone Number'],
       sort: true,
       search: true,
-      rows:() => {
+      rows: () => {
         return new Promise(resolve => {
-          setTimeout(() =>
-            resolve([
-              ['John', 'john@example.com', '(353) 01 222 3333'],
-              ['Mark', 'mark@gmail.com', '(01) 22 888 4444']
-            ]), 2000);
+          setTimeout(
+            () =>
+              resolve([
+                ['John', 'john@example.com', '(353) 01 222 3333'],
+                ['Mark', 'mark@gmail.com', '(01) 22 888 4444']
+              ]),
+            2000
+          )
         })
       }
     }

examples/basic/loading-state.mjs

@@ -13,7 +13,7 @@ export default {
         {
           name: 'Name',
           formatter: cell =>
-            return this.$gridjs.helper({
+            this.$gridjs.helper({
               components: { TestComponent },
               template: `<test-component :content="content"></test-component>`,
               data() {

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

@@ -1,7 +1,7 @@
 {
   "name": "gridjs-vue",
   "description": "A Vue.js wrapper component for Grid.js",
-  "version": "5.0.2-0",
+  "version": "5.0.2-3",
   "license": "MIT",
   "private": false,
   "authors": [
@@ -14,13 +14,25 @@
     "type": "git",
     "url": "https://github.com/grid-js/gridjs-vue.git"
   },
-  "main": "./dist/index.js",
+  "keywords": [
+    "table",
+    "grid",
+    "spreadsheet",
+    "vue",
+    "vue-component"
+  ],
+  "main": "./dist/index.esm.js",
   "umd": "./dist/index.umd.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.browser.esm.js",
+  "exports": {
+    "require": "./dist/index.js",
+    "import": "./dist/index.esm.js",
+    "default": "./dist/index.esm.js",
+    "browser": "./dist/index.browser.esm.js"
+  },
   "scripts": {
     "dev": "baechli -c 'yarn build'",
-    "build": "rm -rf dist/*; bili src/index.mjs;",
-    "release": "doppler run -- release-it"
+    "build": "rm -rf dist/*; bili;"
   },
   "files": [
     "dist/*",
@@ -36,6 +48,8 @@
     "@babel/core": "^7.14.3",
     "@babel/plugin-transform-runtime": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
+    "@juggle/resize-observer": "^3.3.1",
+    "@lesniewski.pro/necktie": "^1.1.3",
     "@release-it/keep-a-changelog": "^2.3.0",
     "@vue/compiler-sfc": "^3.1.1",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -51,18 +65,20 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.10.0",
+    "gridjs": "5.0.1",
+    "parse-css-stylesheet": "^0.0.1",
     "prettier": "^2.3.1",
-    "release-it": "^14.8.0",
     "rollup": "^2.51.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-vue": "^6.0.0",
+    "styl-injector": "^1.4.0",
     "typescript": "^4.3.2",
+    "uid": "^2.0.0",
     "vue": "^2.6.11",
     "vue-runtime-helpers": "1.1.2",
     "vue-template-compiler": "^2.6.14"
-  },
-  "dependencies": {}
+  }
 }

package.json

@@ -0,0 +1,270 @@
+import { ResizeObserver as Polyfill } from 'https://cdn.skypack.dev/@juggle/resize-observer'
+import parseStylesheet from 'https://cdn.skypack.dev/parse-css-stylesheet'
+import { injectStyle } from 'https://cdn.skypack.dev/styl-injector'
+import { uid } from 'https://cdn.skypack.dev/uid'
+import { Grid } from 'https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js'
+
+const waitForSelector = selector => {
+  const element = document.querySelector(selector)
+  if (element) return element
+
+  const mutObserver = new MutationObserver(mutations => {
+    for (const mutation of mutations) {
+      const nodes = Array.from(mutation.addedNodes)
+      for (const node of nodes) {
+        if (node.matches && node.matches(selector)) {
+          mutObserver.disconnect()
+          return node
+        }
+      }
+    }
+  })
+
+  mutObserver.observe(document.documentElement, { childList: true, subtree: true })
+}
+
+export default {
+  name: 'Grid',
+  props: {
+    autoWidth: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: Object,
+      default: undefined
+    },
+    columns: {
+      type: [Array, Function],
+      default: undefined
+    },
+    fixedHeader: {
+      type: Boolean,
+      default: false
+    },
+    from: {
+      type: [String, Function],
+      default: undefined
+    },
+    height: {
+      type: String,
+      default: undefined
+    },
+    language: {
+      type: Object,
+      default: undefined
+    },
+    pagination: {
+      type: [Object, Boolean],
+      default: false
+    },
+    resizable: {
+      type: Boolean,
+      default: false
+    },
+    rows: {
+      type: [Array, Function],
+      default: undefined
+    },
+    search: {
+      type: [Object, Boolean],
+      default: false
+    },
+    server: {
+      type: [Object, Function],
+      default: undefined
+    },
+    sort: {
+      type: [Object, Boolean],
+      default: false
+    },
+    styles: {
+      type: Object,
+      default: undefined
+    },
+    theme: {
+      type: String,
+      default: undefined
+    },
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      grid: null,
+      resize: null,
+      uuid: null,
+      wrapper: null
+    }
+  },
+  computed: {
+    options() {
+      let options = {
+        autoWidth: this.autoWidth,
+        fixedHeader: this.fixedHeader,
+        pagination: this.pagination,
+        resizable: this.resizable,
+        sort: this.sort,
+        width: this.width
+      }
+
+      if (this.columns) options.columns = this.columns
+      if (this.rows) options.data = this.rows
+      if (this.className) options.className = this.className
+      if (this.from)
+        options.from =
+          typeof this.from === 'string'
+            ? document.querySelector(this.from)
+            : document.createRange().createContextualFragment(this.from())
+      if (this.height) options.height = this.height
+      if (this.language) options.language = this.language
+      if (this.search) options.search = this.search
+      if (this.server) options.server = this.server
+      if (this.styles) options.style = this.styles
+
+      return options
+    },
+    activeTheme() {
+      if (this.theme) return this.theme
+      if (this.$gridjs.options.theme) return this.$gridjs.options.theme
+      return 'mermaid'
+    },
+    divId() {
+      return `gridjs__${this.uuid}`
+    }
+  },
+  watch: {
+    autoWidth() {
+      this.update()
+    },
+    className() {
+      this.update()
+    },
+    columns() {
+      this.update()
+    },
+    fixedHeader() {
+      this.update()
+    },
+    from() {
+      this.update()
+    },
+    height() {
+      this.update()
+    },
+    language() {
+      this.update()
+    },
+    pagination() {
+      this.update()
+    },
+    resizable() {
+      this.update()
+    },
+    rows() {
+      this.update()
+    },
+    search() {
+      this.update()
+    },
+    server() {
+      this.update()
+    },
+    sort() {
+      this.update()
+    },
+    style() {
+      this.update()
+    },
+    theme() {
+      this.update()
+    },
+    width() {
+      this.update()
+    }
+  },
+  async created() {
+    try {
+      // give table a unique id
+      this.uuid = uid(16)
+
+      // get the wrapper
+      await waitForSelector(this.divId)
+      this.wrapper = document.getElementById(this.divId)
+
+      // instantiate grid.js
+      if (Object.keys(this.$gridjs.options).length) this.setOptions()
+      if (this.wrapper && (this.options.data || this.options.from || this.options.server)) {
+        this.grid = new Grid(this.options).render(this.wrapper)
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  },
+  mounted() {
+    this.assignTheme()
+    const ResizeObserver = window.ResizeObserver || Polyfill
+    this.resize = new ResizeObserver(() => {
+      this.rerender()
+    })
+    this.resize.observe(this.$refs[this.uuid])
+    this.$nextTick(() => this.$emit('ready'))
+  },
+  destroyed() {
+    // unload from memory
+    this.resize.disconnect()
+    this.grid = undefined
+    this.wrapper = undefined
+  },
+  methods: {
+    async assignTheme() {
+      try {
+        if (this.activeTheme !== 'none') {
+          let theme,
+            stylesheet = ''
+
+          theme = await (await fetch(`https://unpkg.com/gridjs/dist/theme/${this.activeTheme}.css`)).text()
+          theme = parseStylesheet(theme)
+
+          for (const index in theme.cssRules) {
+            let css = theme.cssRules[index].cssText
+            if (css && !/^@/g.test(css)) {
+              stylesheet = `${stylesheet}\n\n#${this.divId} ${css}`
+            }
+          }
+
+          injectStyle(stylesheet, `${this.divId}__theme`)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    setOptions() {
+      try {
+        const plugins = this.$gridjs.options.plugins
+        if (plugins) {
+          plugins.forEach(plugin => {
+            this.grid.plugin.add(plugin)
+          })
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    rerender() {
+      if (this.grid) this.grid.forceRender()
+    },
+    update() {
+      try {
+        if (this.grid) this.grid.updateConfig(this.options).forceRender()
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  },
+  template: `
+    <article :id="divId" :data-uuid="uuid" :ref="uuid"></article>
+  `
+}

src/gridjs-vue.browser.mjs

@@ -1,7 +1,9 @@
-import parseStylesheet from 'https://cdn.skypack.dev/parse-css-stylesheet'
-import { injectStyle } from 'https://cdn.skypack.dev/styl-injector'
-import { uid } from 'https://cdn.skypack.dev/uid'
-import { Grid } from 'https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js'
+import { ResizeObserver as Polyfill } from '@juggle/resize-observer'
+import { Grid } from 'gridjs/dist/gridjs.module.js'
+import mermaid from 'gridjs/dist/theme/mermaid.css'
+import parseStylesheet from 'parse-css-stylesheet'
+import { injectStyle } from 'styl-injector'
+import { uid } from 'uid'
 
 const waitForSelector = selector => {
   const element = document.querySelector(selector)
@@ -204,36 +206,31 @@ export default {
   },
   mounted() {
     this.assignTheme()
-    this.resize = window.addEventListener('resize', () => this.update(), true)
+    const ResizeObserver = window.ResizeObserver || Polyfill
+    this.resize = new ResizeObserver(() => {
+      this.rerender()
+    })
+    this.resize.observe(this.$refs[this.uuid])
     this.$nextTick(() => this.$emit('ready'))
   },
   destroyed() {
     // unload from memory
+    this.resize.disconnect()
     this.grid = undefined
     this.wrapper = undefined
-    window.removeEventListener(this.resize)
   },
   methods: {
     async assignTheme() {
       try {
         if (this.activeTheme !== 'none') {
-          const head = document.getElementsByTagName('head')[0]
+          let theme,
+            stylesheet = ''
 
-          let styles = document.createElement('style')
-          styles.title = `${this.divId}__theme`
-          styles.type = 'text/css'
-          head.appendChild(styles)
-
-          let theme = await fetch(`https://unpkg.com/gridjs/dist/theme/${this.activeTheme}.css`)
-          theme = parseStylesheet(await theme.text())
-
-          for (let index in document.styleSheets) {
-            if (document.styleSheets[index].title === styles.title) {
-              styles = document.styleSheets[index]
-            }
-          }
-
-          let stylesheet = ''
+          theme = parseStylesheet(
+            this.activeTheme === 'mermaid'
+              ? mermaid.match(/= "(.*?)";/)[1].replace(/\\n/g, '')
+              : await (await fetch(`https://unpkg.com/gridjs/dist/theme/${this.activeTheme}.css`)).text()
+          )
 
           for (const index in theme.cssRules) {
             let css = theme.cssRules[index].cssText
@@ -242,7 +239,7 @@ export default {
             }
           }
 
-          injectStyle(stylesheet, `${this.divId}_styles`)
+          injectStyle(stylesheet, `${this.divId}__theme`)
         }
       } catch (error) {
         console.error(error)
@@ -260,6 +257,9 @@ export default {
         console.error(error)
       }
     },
+    rerender() {
+      if (this.grid) this.grid.forceRender()
+    },
     update() {
       try {
         if (this.grid) this.grid.updateConfig(this.options).forceRender()
@@ -269,6 +269,6 @@ export default {
     }
   },
   template: `
-    <article :id="divId" :data-uuid="uuid"></article>
+    <article :id="divId" :data-uuid="uuid" :ref="uuid"></article>
   `
 }

src/gridjs-vue.mjs

@@ -0,0 +1,57 @@
+import { Necktie } from 'https://cdn.skypack.dev/@lesniewski.pro/necktie'
+import { uid } from 'https://cdn.skypack.dev/uid'
+import { h, html, PluginPosition } from 'https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js'
+import Grid from './gridjs-vue.browser.mjs'
+
+export function install(Vue, options = {}) {
+  if (install.installed) return
+  install.installed = true
+
+  const helper = vueConfig => {
+    const uuid = uid(16)
+    const tie = new Necktie()
+    tie.startListening()
+
+    tie.bind(
+      `[data-obj-id='${uuid}']`,
+      el =>
+        new Vue({
+          el,
+          ...vueConfig
+        })
+    )
+
+    return html(`<span data-obj-id=${uuid}></span>`)
+  }
+
+  if (!Vue.prototype.$gridjs) {
+    Vue.prototype.$gridjs = {
+      h,
+      helper,
+      html,
+      options,
+      PluginPosition
+    }
+  }
+
+  Vue.component('Grid', Grid)
+}
+
+const plugin = {
+  install
+}
+
+let GlobalVue = null
+
+if (typeof window !== 'undefined') {
+  GlobalVue = window.Vue
+} else if (typeof global !== 'undefined') {
+  GlobalVue = global.Vue
+}
+
+if (GlobalVue) {
+  GlobalVue.use(plugin)
+}
+
+export { Grid, plugin as GridGlobal }
+export default Grid

src/index.browser.mjs

@@ -1,6 +1,6 @@
-import { Necktie } from 'https://cdn.skypack.dev/@lesniewski.pro/necktie'
-import { uid } from 'https://cdn.skypack.dev/uid'
-import { h, html, PluginPosition } from 'https://unpkg.com/gridjs@5.0.1/dist/gridjs.module.js'
+import { Necktie } from '@lesniewski.pro/necktie'
+import { h, html, PluginPosition } from 'gridjs/dist/gridjs.module.js'
+import { uid } from 'uid'
 import Grid from './gridjs-vue.mjs'
 
 export function install(Vue, options = {}) {