From dd79ac841aeac4a0747344ad45c81fc4b026e382 Mon Sep 17 00:00:00 2001
From: Andrew Stein <steinlink@gmail.com>
Date: Sun, 24 May 2020 01:52:45 -0400
Subject: [PATCH 1/2] Remove test with nonlocal dependencies

---
 babel.config.js                |  6 +++++-
 examples/perspective.html      |  7 +------
 examples/two_billion_rows.html | 27 ++++++++++++---------------
 test/js/perspective.test.js    |  3 ++-
 4 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 93bc5781..acdcc6a4 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -4,8 +4,12 @@ module.exports = {
             "@babel/preset-env",
             {
                 targets: {
-                    esmodules: true,
+                    chrome: "70",
+                    node: "12",
+                    ios: "13",
                 },
+                useBuiltIns: "usage",
+                corejs: 3,
             },
         ],
     ],
diff --git a/examples/perspective.html b/examples/perspective.html
index ad3cea42..6efc5f9e 100644
--- a/examples/perspective.html
+++ b/examples/perspective.html
@@ -21,13 +21,8 @@
     <regular-table></regular-table>
 
     <script>
+        
         const URL = "https://unpkg.com/@jpmorganchase/perspective-examples/build/superstore.arrow";
-                        
-        async function get_layout() {
-            const req = await fetch("layout.json");
-            const json = await req.json();
-            return json;
-        }
 
         const datasource = async () => {
             const request = fetch(URL);
diff --git a/examples/two_billion_rows.html b/examples/two_billion_rows.html
index 104a864b..8e644cc0 100644
--- a/examples/two_billion_rows.html
+++ b/examples/two_billion_rows.html
@@ -20,19 +20,20 @@
     <regular-table></regular-table>
 
     <script>
+
+        const NUM_ROWS = 2000000000;
+        const NUM_COLUMNS = 1000;
+
+        const COLUMN_NAMES = new Array(NUM_COLUMNS).fill(0).map((_, i) => `Column ${i}`);
+        const SCHEMA = COLUMN_NAMES.reduce((schema, col) => ({... schema, [col]: "float"}), {});
+        
         window.addEventListener('DOMContentLoaded', async function () {
             const table = document.getElementsByTagName('regular-table')[0];
             await table.set_view({
-                schema: async () => { 
-                    return {
-                        "Column 0": "float",
-                        "Column 1": "float", 
-                        "Column 2": "float"
-                    };
-                }
+                schema: async () => SCHEMA
             }, {
-                num_rows: async () => 2000000000,
-                column_paths: async () => ["Column 0", "Column 1", "Column 2"],
+                num_rows: async () => NUM_ROWS,
+                column_paths: async () => COLUMN_NAMES,
                 get_config: async () => { 
                     return {
                          row_pivots: [], 
@@ -44,17 +45,13 @@
                     for (let i = start_col; i < end_col; i ++) {
                         const column = columns[`Column ${i}`] = [];
                         for (let j = start_row; j < end_row; j ++) {
-                            column.push(j);
+                            column.push(j + i);
                         }
                     }
                     return columns;
                 },
                 schema: async () => { 
-                    return {
-                        "Column 0": "float",
-                        "Column 1": "float", 
-                        "Column 2": "float"
-                    };
+                    return SCHEMA;
                 }
             });
             await table.draw();
diff --git a/test/js/perspective.test.js b/test/js/perspective.test.js
index d3a6e2df..aeba6926 100644
--- a/test/js/perspective.test.js
+++ b/test/js/perspective.test.js
@@ -13,7 +13,8 @@ describe("Perspective", () => {
         await page.setViewport({width: 200, height: 100});
     });
 
-    describe("creates a `<table>` body when attached to `document`", () => {
+    // TODO don't run these, they depend on unpkg.com
+    describe.skip("creates a `<table>` body when attached to `document`", () => {
         beforeAll(async () => {
             await page.goto("http://localhost:8081/examples/perspective.html");
             await page.waitFor("regular-table table tbody tr td");

From bfea4b2c03876c5bcb8a25db2b1a6bec8f71be5b Mon Sep 17 00:00:00 2001
From: Andrew Stein <steinlink@gmail.com>
Date: Sun, 24 May 2020 02:45:00 -0400
Subject: [PATCH 2/2] Remove less-loader, cjs build;  Add lessc build for
 "Material" theme

---
 babel-plugin-css-template.js                  | 31 ++++++++++++++++
 ...iteral.js => babel-plugin-html-template.js |  0
 babel.config.js                               |  4 +-
 examples/perspective.html                     |  1 +
 examples/two_billion_rows.html                |  1 +
 package.json                                  | 20 ++++------
 src/config/umd.config.js                      | 37 -------------------
 src/js/constants.js                           |  2 +-
 src/js/index.js                               | 13 -------
 src/js/scroll_panel.js                        |  9 ++---
 src/js/utils.js                               |  2 +
 test/js/two_billion_rows.test.js              |  4 +-
 src/config/cjs.config.js => webpack.config.js | 15 ++------
 13 files changed, 56 insertions(+), 83 deletions(-)
 create mode 100644 babel-plugin-css-template.js
 rename babel-plugin-transform-tagged-literal.js => babel-plugin-html-template.js (100%)
 delete mode 100644 src/config/umd.config.js
 rename src/config/cjs.config.js => webpack.config.js (53%)

diff --git a/babel-plugin-css-template.js b/babel-plugin-css-template.js
new file mode 100644
index 00000000..e5f59dad
--- /dev/null
+++ b/babel-plugin-css-template.js
@@ -0,0 +1,31 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2020, the Regular Table Authors.
+ *
+ * This file is part of the Regular Table library, distributed under the terms
+ * of the Apache License 2.0.  The full license can be found in the LICENSE
+ * file.
+ *
+ */
+
+const fs = require("fs");
+
+// Replace whitespace in `html` tagged literals for minification.
+module.exports = function (babel) {
+    const t = babel.types;
+    return {
+        visitor: {
+            TaggedTemplateExpression(path) {
+                const node = path.node;
+                if (t.isIdentifier(node.tag, {name: "css"})) {
+                    for (const type of ["raw", "cooked"]) {
+                        for (const element of node.quasi.quasis) {
+                            const value = element.value[type];
+                            element.value[type] = fs.readFileSync(value).toString();
+                        }
+                    }
+                }
+            },
+        },
+    };
+};
diff --git a/babel-plugin-transform-tagged-literal.js b/babel-plugin-html-template.js
similarity index 100%
rename from babel-plugin-transform-tagged-literal.js
rename to babel-plugin-html-template.js
diff --git a/babel.config.js b/babel.config.js
index acdcc6a4..5eea811f 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -14,11 +14,11 @@ module.exports = {
         ],
     ],
     plugins: [
-        "lodash",
         ["@babel/plugin-proposal-decorators", {legacy: true}],
         "transform-custom-element-classes",
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-optional-chaining",
-        "./babel-plugin-transform-tagged-literal.js",
+        "./babel-plugin-html-template.js",
+        "./babel-plugin-css-template.js",
     ],
 };
diff --git a/examples/perspective.html b/examples/perspective.html
index 6efc5f9e..2baf1f6c 100644
--- a/examples/perspective.html
+++ b/examples/perspective.html
@@ -14,6 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <script src="https://unpkg.com/@finos/perspective"></script>
     <script src="../umd/regular-table.js"></script>
+    <link rel='stylesheet' href="../css/material.css">
 </head>
 
 <body>
diff --git a/examples/two_billion_rows.html b/examples/two_billion_rows.html
index 8e644cc0..ccaccb23 100644
--- a/examples/two_billion_rows.html
+++ b/examples/two_billion_rows.html
@@ -13,6 +13,7 @@
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <script src="../umd/regular-table.js"></script>
+    <link rel='stylesheet' href="../css/material.css">
 </head>
 
 <body>
diff --git a/package.json b/package.json
index 1fa0dd83..25caee6f 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
     },
     "license": "Apache-2.0",
     "main": "dist/esm/regular-table.js",
-    "module": "dist/cjs/regular-table.js",
-    "browser": "dist/cjs/regular-table.js",
+    "module": "dist/esm/regular-table.js",
+    "browser": "dist/esm/regular-table.js",
     "unpkg": "dist/umd/regular-table.js",
     "jsdelivr": "dist/umd/regular-table.js",
     "files": [
@@ -20,20 +20,19 @@
         "babel.config.js"
     ],
     "scripts": {
-        "prebuild": "mkdirp dist/esm && mkdirp dist/examples",
-        "build:static": "cpx \"src/**/*\" dist && cpx \"examples/*\" dist/examples",
+        "prebuild": "mkdirp dist/esm dist/examples dist/css",
+        "build:static": "cpx \"examples/*\" dist/examples",
         "build:babel": "babel src/js --source-maps --out-dir dist/esm",
-        "build:webpack:cjs": "webpack --color --config src/config/cjs.config.js",
-        "build:webpack:umd": "webpack --color --config src/config/umd.config.js",
-        "build": "npm-run-all build:static build:babel build:webpack:cjs build:webpack:umd",
-        "build:fast": "npm-run-all build:static build:webpack:umd",
+        "build:webpack": "webpack --color --config webpack.config.js",
+        "build:less": "lessc src/less/material.less dist/css/material.css",
+        "build": "npm-run-all build:static build:babel build:webpack build:less",
         "clean": "rimraf dist",
         "lint": "eslint src",
         "fix": "eslint src --fix",
         "start": "http-server dist",
         "test": "yarn jest --verbose && yarn lint",
         "watch:babel": "babel src/js --source-maps --watch --out-dir dist/esm",
-        "watch:webpack": "webpack --watch --color --config src/config/umd.config.js",
+        "watch:webpack": "webpack --watch --color --config webpack.config.js",
         "watch": "npm-run-all -p watch:*"
     },
     "publishConfig": {
@@ -56,15 +55,12 @@
         "babel-plugin-lodash": "^3.3.4",
         "babel-plugin-transform-custom-element-classes": "^0.1.0",
         "cpx": "^1.5.0",
-        "css-loader": "^0.28.7",
         "eslint": "^7.1.0",
         "eslint-plugin-prettier": "^3.1.3",
-        "html-loader-jest": "^0.2.1",
         "http-server": "^0.12.3",
         "jest": "^26.0.1",
         "jest-puppeteer": "^4.4.0",
         "less": "^3.9.0",
-        "less-loader": "^4.1.0",
         "npm-run-all": "^4.1.3",
         "prettier": "^2.0.5",
         "puppeteer": "^3.1.0",
diff --git a/src/config/umd.config.js b/src/config/umd.config.js
deleted file mode 100644
index b9cf472d..00000000
--- a/src/config/umd.config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const path = require("path");
-
-module.exports = {
-    entry: "./dist/js/index.js",
-    mode: "production",
-    devtool: "source-map",
-    module: {
-        rules: [
-            {
-                test: /\.(woff|ttf|eot|svg|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-                loader: "base64-font-loader",
-            },
-            {
-                test: /\.less$/,
-                exclude: /node_modules/,
-                use: [{loader: "css-loader"}, {loader: "less-loader"}],
-            },
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                use: "babel-loader",
-            },
-        ],
-    },
-    performance: {
-        hints: false,
-        maxEntrypointSize: 512000,
-        maxAssetSize: 512000,
-    },
-    stats: {modules: false, hash: false, version: false, builtAt: false, entrypoints: false},
-    output: {
-        filename: "regular-table.js",
-        library: "regular-table",
-        libraryTarget: "umd",
-        path: path.resolve(__dirname, "../../dist/umd"),
-    },
-};
diff --git a/src/js/constants.js b/src/js/constants.js
index 4f22a477..45ffa25e 100644
--- a/src/js/constants.js
+++ b/src/js/constants.js
@@ -20,7 +20,7 @@ export const DEBUG = false;
 // expense of performance.
 export const DOUBLE_BUFFER_COLUMN = false;
 export const DOUBLE_BUFFER_ROW = false;
-export const DOUBLE_BUFFER_RECREATE = true;
+export const DOUBLE_BUFFER_RECREATE = false;
 
 // The largest size virtual <div> in (px) that Chrome can support without
 // glitching.
diff --git a/src/js/index.js b/src/js/index.js
index 4f7a0c6c..90cf2ffc 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -10,18 +10,6 @@
 
 import {_start_profiling_loop} from "./utils";
 import {RegularViewModel} from "./custom_element";
-import MATERIAL_STYLE from "../less/material.less";
-
-/**
- * Appends the default tbale CSS to `<head>`, should be run once on module
- *  import.
- *
- */
-function _register_global_styles() {
-    const style = document.createElement("style");
-    style.textContent = MATERIAL_STYLE;
-    document.head.appendChild(style);
-}
 
 /******************************************************************************
  *
@@ -32,4 +20,3 @@ function _register_global_styles() {
 window.customElements.define("regular-table", RegularViewModel);
 
 _start_profiling_loop();
-_register_global_styles();
diff --git a/src/js/scroll_panel.js b/src/js/scroll_panel.js
index c3822343..9724aac7 100644
--- a/src/js/scroll_panel.js
+++ b/src/js/scroll_panel.js
@@ -8,10 +8,7 @@
  *
  */
 
-import CONTAINER_STYLE from "../less/container.less";
-import MATERIAL_STYLE from "../less/material.less";
-
-import {log_perf, html, isEqual, throttlePromise} from "./utils";
+import {css, log_perf, html, isEqual, throttlePromise} from "./utils";
 import {DEBUG, BROWSER_MAX_HEIGHT, DOUBLE_BUFFER_RECREATE, DOUBLE_BUFFER_ROW, DOUBLE_BUFFER_COLUMN} from "./constants";
 
 /**
@@ -56,6 +53,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
     /**
      * Create the DOM for this `shadowRoot`.
      *
+     * TODO deprecated
      * `MATERIAL_STYLE` is needed both here, and in the document `<head>`, due
      * to double buffering, which may read incorrect position/size values as the
      * double buffered `<table>` is rendered in the shadow DOM before being
@@ -66,9 +64,10 @@ export class RegularVirtualTableViewModel extends HTMLElement {
     create_shadow_dom() {
         this.attachShadow({mode: "open"});
         const slot = `<slot></slot>`;
+        const container_css = css`src/less/container.less`;
         this.shadowRoot.innerHTML = html`
             <style>
-                ${CONTAINER_STYLE + MATERIAL_STYLE}
+                ${container_css}
             </style>
             <div class="pd-virtual-panel">
                 ${this._virtual_scrolling_disabled ? slot : ""}
diff --git a/src/js/utils.js b/src/js/utils.js
index 6d748023..a2172b71 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -120,6 +120,8 @@ export const html = (strings, ...args) =>
         .filter((a) => !!a)
         .join("");
 
+export const css = html;
+
 const invertPromise = () => {
     let _resolve;
     const promise = new Promise((resolve) => {
diff --git a/test/js/two_billion_rows.test.js b/test/js/two_billion_rows.test.js
index 8f9f0e50..32daea64 100644
--- a/test/js/two_billion_rows.test.js
+++ b/test/js/two_billion_rows.test.js
@@ -34,7 +34,7 @@ describe("Two billion rows", () => {
         test("with the first row's cell test correct", async () => {
             const first_tr = await page.$("regular-table tbody tr:first-child");
             const cell_values = await page.evaluate((first_tr) => Array.from(first_tr.children).map((x) => x.textContent), first_tr);
-            expect(cell_values).toEqual(["0", "0", "0"]);
+            expect(cell_values).toEqual(["0", "1", "2"]);
         });
     });
 
@@ -63,7 +63,7 @@ describe("Two billion rows", () => {
         test("with the first row's cell test correct", async () => {
             const first_tr = await page.$("regular-table tbody tr:first-child");
             const cell_values = await page.evaluate((first_tr) => Array.from(first_tr.children).map((x) => x.textContent), first_tr);
-            expect(cell_values).toEqual(["200,002", "200,002", "200,002"]);
+            expect(cell_values).toEqual(["200,002", "200,003", "200,004"]);
         });
     });
 });
diff --git a/src/config/cjs.config.js b/webpack.config.js
similarity index 53%
rename from src/config/cjs.config.js
rename to webpack.config.js
index 3fda9eb4..70d8477e 100644
--- a/src/config/cjs.config.js
+++ b/webpack.config.js
@@ -1,17 +1,11 @@
 const path = require("path");
 
 module.exports = {
-    entry: "./dist/js/index.js",
-    devtool: "source-map",
+    entry: "./src/js/index.js",
     mode: "production",
-    externals: [/^[a-z0-9@]/],
+    devtool: "source-map",
     module: {
         rules: [
-            {
-                test: /\.less$/,
-                exclude: /node_modules/,
-                use: [{loader: "css-loader"}, {loader: "less-loader"}],
-            },
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
@@ -24,11 +18,10 @@ module.exports = {
         maxEntrypointSize: 512000,
         maxAssetSize: 512000,
     },
-    stats: {modules: false, hash: false, version: false, builtAt: false, entrypoints: false},
     output: {
         filename: "regular-table.js",
         library: "regular-table",
-        libraryTarget: "commonjs2",
-        path: path.resolve(__dirname, "../../dist/cjs"),
+        libraryTarget: "umd",
+        path: path.resolve(__dirname, "./dist/umd"),
     },
 };