finos · texodus · May 24, 2020 · May 24, 2020 · May 24, 2020
diff --git a/babel-plugin-css-template.js 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 → babel-plugin-html-template.js b/babel-plugin-transform-tagged-literal.js → babel-plugin-html-template.js
diff --git a/babel.config.js b/babel.config.js
@@ -4,17 +4,21 @@ module.exports = {
             "@babel/preset-env",
             {
                 targets: {
-                    esmodules: true,
+                    chrome: "70",
+                    node: "12",
+                    ios: "13",
                 },
+                useBuiltIns: "usage",
+                corejs: 3,
             },
         ],
     ],
     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
@@ -14,20 +14,16 @@
     <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>
 
     <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
@@ -13,26 +13,28 @@
 <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>
 
     <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 +46,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/package.json b/package.json
@@ -11,29 +11,28 @@
     },
     "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": [
         "dist/**/*",
         "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
diff --git 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
@@ -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
@@ -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
@@ -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/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");

diff --git 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 → webpack.config.js b/src/config/cjs.config.js → 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"),
     },
 };