use wct-datatables-net and simply dependencies

MephisTools · Feb 9, 2019 · d087b72 · d087b72
1 parent b9ea658
commit d087b72
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 82 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/package.json b/package.json
@@ -9,19 +9,14 @@
     "url": "https://github.com/MephisTools/diablo2-live-viewer"
   },
   "dependencies": {
-    "lit-element": "^2.0.0-rc.3",
-    "@webcomponents/webcomponentsjs": "^2.2.1",
-    "datatables.net": "^1.10.19",
-    "datatables.net-dt": "^1.10.19",
     "diablo2-data": "^1.0.0",
-    "express": "^4.16.3",
     "leaflet": "^1.4.0",
     "leaflet-search": "^2.9.8",
     "leaflet.awesome-markers": "^2.0.5",
-    "lit-html": "^1.0.0-rc.2",
+    "lit-element": "^2.0.1",
+    "lit-html": "^1.0.0",
     "page": "^1.11.3",
-    "promise-polyfill": "^8.0.0",
-    "whatwg-fetch": "^2.0.4"
+    "wct-datatables-net": "^1.1.0"
   },
   "devDependencies": {
     "clean-webpack-plugin": "^0.1.19",

diff --git a/server.js b/server.js
diff --git a/src/index.html b/src/index.html
@@ -15,10 +15,6 @@
         padding: 0;
       }
     </style>
-    <script src="./vendor/webcomponents-loader.js"></script>
-    <script src="./vendor/custom-elements-es5-adapter.js"></script>
-    <script src="./vendor/fetch.js"></script>
-    <script src="./vendor/polyfill.min.js"></script>
   </head>
   <body>
     <diablo2-live-viewer></diablo2-live-viewer>

diff --git a/src/packets-live-viewer.js b/src/packets-live-viewer.js
@@ -2,14 +2,13 @@
 
 import { LitElement, html } from 'lit-element'
 
-import datatablesCss from 'datatables.net-dt/css/jquery.dataTables.min.css'
-import $ from 'jquery'
-import 'datatables.net'
+import 'wct-datatables-net'
 
 class PacketsLiveViewer extends LitElement {
   static get properties () {
     return {
-      ws: { type: Object }
+      ws: { type: Object },
+      table: { type: Object }
     }
   }
 
@@ -20,15 +19,6 @@ class PacketsLiveViewer extends LitElement {
 
   firstUpdated () {
     this.displayPacketsTable()
-    this.packetsTable = $(this.shadowRoot.querySelector('#myTable')).DataTable({
-      'order': [[ 0, 'desc' ]],
-      'columns': [
-        null,
-        null,
-        null,
-        { width: '70%' }
-      ]
-    })
   }
 
   displayPacketsTable () {
@@ -59,19 +49,16 @@ class PacketsLiveViewer extends LitElement {
   }
 
   render () {
-    return html`<style>${datatablesCss}</style>
-  <table id="myTable">
-      <thead>
-        <tr>
-            <th>Time</th>
-            <th>Protocol</th>
-            <th>Name</th>
-            <th>Params</th>
-        </tr>
-    </thead>
-    <tbody>
-    </tbody>
-</table>
+    return html`
+    <data-table .options=${{
+    'order': [[ 0, 'desc' ]],
+    'columns': [
+      { title: 'Time' },
+      { title: 'Protocol' },
+      { title: 'Name' },
+      { title: 'Params', width: '70%' }
+    ]
+  }} @table-created=${e => { this.packetsTable = e.detail.table }}></data-table>
   `
   }
 }

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,6 @@
 'use strict'
 
-const { resolve, join } = require('path')
+const { resolve } = require('path')
 const merge = require('webpack-merge')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -12,41 +12,13 @@ const ENV = process.argv.find(arg => arg.includes('production'))
 const OUTPUT_PATH = ENV === 'production' ? resolve('dist') : resolve('src')
 const INDEX_TEMPLATE = resolve('./src/index.html')
 
-const webcomponentsjs = './node_modules/@webcomponents/webcomponentsjs'
-
 const assets = [
   {
     from: resolve('./src/assets'),
     to: resolve('dist/assets/')
   }
 ]
 
-const polyfills = [
-  {
-    from: resolve(`${webcomponentsjs}/webcomponents-*.js`),
-    to: join(OUTPUT_PATH, 'vendor'),
-    flatten: true
-  },
-  {
-    from: resolve(`${webcomponentsjs}/bundles/*.js`),
-    to: join(OUTPUT_PATH, 'vendor', 'bundles'),
-    flatten: true
-  },
-  {
-    from: resolve(`${webcomponentsjs}/custom-elements-es5-adapter.js`),
-    to: join(OUTPUT_PATH, 'vendor'),
-    flatten: true
-  },
-  {
-    from: resolve('./node_modules/whatwg-fetch/fetch.js'),
-    to: join(OUTPUT_PATH, 'vendor')
-  },
-  {
-    from: resolve('./node_modules/promise-polyfill/dist/polyfill.min.js'),
-    to: join(OUTPUT_PATH, 'vendor')
-  }
-]
-
 const commonConfig = merge([
   {
     entry: './src/diablo2-live-viewer.js',
@@ -90,7 +62,6 @@ const developmentConfig = merge([
   {
     devtool: 'cheap-module-source-map',
     plugins: [
-      new CopyWebpackPlugin(polyfills),
       new HtmlWebpackPlugin({
         template: INDEX_TEMPLATE
       })
@@ -112,7 +83,7 @@ const productionConfig = merge([
     devtool: 'nosources-source-map',
     plugins: [
       new CleanWebpackPlugin([OUTPUT_PATH], { verbose: true }),
-      new CopyWebpackPlugin([...polyfills, ...assets]),
+      new CopyWebpackPlugin([...assets]),
       new HtmlWebpackPlugin({
         template: INDEX_TEMPLATE,
         minify: {