Add bundled version (#384)

grid-js · Jun 17, 2021 · 48f7f8a · 48f7f8a
1 parent 1e46b5c
commit 48f7f8a
Show file tree

Hide file tree

Showing 12 changed files with 495 additions and 1,459 deletions.
diff --git a/.release-it.json b/.release-it.json
diff --git a/README.md b/README.md
@@ -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: {

diff --git a/bili.config.js b/bili.config.js
@@ -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

diff --git a/examples/basic/hello-world.mjs b/examples/basic/hello-world.mjs
@@ -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>
   `
 }
diff --git a/examples/basic/loading-state.mjs b/examples/basic/loading-state.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
+          )
         })
       }
     }

diff --git a/examples/customizing/vue-component-in-cells.mjs b/examples/customizing/vue-component-in-cells.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() {

diff --git a/package.json b/package.json
@@ -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": {}
+  }
 }