finos · texodus · May 7, 2023 · Apr 12, 2023 · Apr 27, 2023 · Apr 27, 2023
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -4,7 +4,8 @@
         {
             "files": ["*.html"],
             "options": {
-                "printWidth": 200
+                "printWidth": 200,
+                "tabWidth": 4
             }
         }
     ]

diff --git a/cpp/perspective/CMakeLists.txt b/cpp/perspective/CMakeLists.txt
@@ -265,7 +265,7 @@ elseif(PSP_CPP_BUILD OR PSP_PYTHON_BUILD)
         else()
             set(OPT_FLAGS " \
                 -O3 \
-                -g0 \
+                -g1 \
                 ")
         endif()
     endif()
@@ -514,14 +514,12 @@ if(PSP_WASM_BUILD)
         --source-map-base \"\" \
         --memory-init-file 0 \
         --no-entry \
-        -s EXPORT_ES6=1 \
         -s NO_EXIT_RUNTIME=1 \
         -s NO_FILESYSTEM=1 \
         -s ALLOW_MEMORY_GROWTH=1 \
         -s MODULARIZE=1 \
         -s EXPORT_NAME=\"load_perspective\" \
         -s MAXIMUM_MEMORY=4gb \
-        -s USE_ES6_IMPORT_META=0 \
         -s ERROR_ON_UNDEFINED_SYMBOLS=1 \
     ")
 
@@ -534,8 +532,16 @@ if(PSP_WASM_BUILD)
     add_executable(perspective_cjs src/cpp/emscripten.cpp)
     target_link_libraries(perspective_cjs psp)
     target_compile_definitions(perspective_cjs PRIVATE PSP_ENABLE_WASM=1)
-    set_target_properties(perspective_cjs PROPERTIES RUNTIME_OUTPUT_DIRECTORY "./esm/")
+    target_link_options(perspective_cjs PUBLIC -sENVIRONMENT="node" -sUSE_ES6_IMPORT_META=0 -sEXPORT_ES6=0)
+    set_target_properties(perspective_cjs PROPERTIES RUNTIME_OUTPUT_DIRECTORY "./node/")
     set_target_properties(perspective_cjs PROPERTIES OUTPUT_NAME "perspective.cpp")
+
+    add_executable(perspective_esm src/cpp/emscripten.cpp)
+    target_link_libraries(perspective_esm psp)
+    target_compile_definitions(perspective_esm PRIVATE PSP_ENABLE_WASM=1)
+    target_link_options(perspective_esm PUBLIC -sENVIRONMENT="web" -sUSE_ES6_IMPORT_META=1 -sEXPORT_ES6=1)
+    set_target_properties(perspective_esm PROPERTIES RUNTIME_OUTPUT_DIRECTORY "./web/")
+    set_target_properties(perspective_esm PROPERTIES OUTPUT_NAME "perspective.cpp")
 elseif(PSP_CPP_BUILD OR PSP_PYTHON_BUILD)
     if(NOT WIN32)
         set(CMAKE_SHARED_LIBRARY_SUFFIX .so)

diff --git a/cpp/perspective/build.js b/cpp/perspective/build.js
@@ -21,11 +21,16 @@ try {
         cwd,
         stdio,
     });
-    execSync(`cpy esm/**/* ../esm`, { cwd, stdio });
+    execSync(`cpy web/**/* ../web`, { cwd, stdio });
+    execSync(`cpy node/**/* ../node`, { cwd, stdio });
 
-    const wasm = fs.readFileSync("dist/esm/perspective.cpp.wasm");
+    const wasm = fs.readFileSync("dist/web/perspective.cpp.wasm");
     const compressed = fflate.compressSync(wasm);
-    fs.writeFileSync("dist/esm/perspective.cpp.wasm", compressed);
+    fs.writeFileSync("dist/web/perspective.cpp.wasm", compressed);
+
+    const wasm2 = fs.readFileSync("dist/node/perspective.cpp.wasm");
+    const compressed2 = fflate.compressSync(wasm2);
+    fs.writeFileSync("dist/node/perspective.cpp.wasm", compressed2);
 } catch (e) {
     console.error(e);
     process.exit(1);

diff --git a/cpp/perspective/src/include/perspective/base.h b/cpp/perspective/src/include/perspective/base.h
@@ -431,8 +431,15 @@ struct PERSPECTIVE_EXPORT t_cmp_charptr {
     }
 };
 
+template <class Arg1, class Arg2, class Result>
+struct binary_function {
+    using first_argument_type = Arg1;
+    using second_argument_type = Arg2;
+    using result_type = Result;
+};
+
 struct t_cchar_umap_cmp
-    : public std::binary_function<const char*, const char*, bool> {
+    : public binary_function<const char*, const char*, bool> {
     inline bool
     operator()(const char* x, const char* y) const {
         return strcmp(x, y) == 0;

diff --git a/docs/build.js b/docs/build.js
@@ -101,10 +101,9 @@ function template(is_dark) {
     <html>
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
         <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/css/pro${
             is_dark ? "-dark" : ""
         }.css">
@@ -124,7 +123,8 @@ function template(is_dark) {
     <body>
         <perspective-viewer editable>
         </perspective-viewer>
-        <script>
+        <script type="module">
+            import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
             const WORKER = window.perspective.worker();
             async function on_load() {
                 var el = document.getElementsByTagName('perspective-viewer')[0];

diff --git a/docs/docs/js.md b/docs/docs/js.md
@@ -119,50 +119,12 @@ Perspective can be loaded directly from most CDNs, such as
 [jsdelivr.com](https://www.jsdelivr.com/package/npm/@finos/perspective-viewer),
 which is the easiest way to get started with Perspective in the browser, and
 perfect for spinning up quick instances of `perspective-viewer` without
-installing or bundling. There are two supported builds you may use, a UMD build
-and a `type="module"` ESM build.
+installing or bundling.
 
 While CDNs are great for development builds and small apps, for production usage
 you should incorporate Perspective into your application with a bundler like
 `Webpack`, described above.
 
-#### UMD
-
-This build is equivalent to the _inline_ build described above, and contains all
-JavaScript, CSS, WebAssembly and WebWorker assets bundled in a single `.js`
-file. To use the UMD build from a `jsdelivr.com`, add these scripts to
-your `.html`'s `<head>` section:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/@finos/perspective"></script>
-<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer"></script>
-<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script>
-<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc"></script>
-
-<link
-    rel="stylesheet"
-    crossorigin="anonymous"
-    href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/css/pro.css"
-/>
-```
-
-Once added to your page, you can access the engine's JavaScript API through the
-`perspective` symbol and the browser's Custom Elements API:
-
-```html
-<script>
-    const worker = window.perspective.worker();
-    const table = await worker.table({ A: [1, 2, 3] });
-    const view = await table.view({ sort: [["A", "desc"]] });
-
-    const viewer = document.createElement("perspective-viewer");
-    viewer.load(table);
-    document.body.appendChild(viewer);
-</script>
-```
-
-#### ESM
-
 This build separates out Perspective's JavaScript, WebAssembly and various
 assets into individual files, allowing the browser to load them lazily, in
 parallel or not at all if needed. To use this build, you must include the

diff --git a/examples/blocks/index.js b/examples/blocks/index.js
@@ -9,11 +9,6 @@ const version = JSON.parse(fs.readFileSync("./package.json")).version;
 // directly to the assets.
 const replacements = {
     "/node_modules/": `https://cdn.jsdelivr.net/npm/`,
-    "perspective/dist/umd/perspective.js": `perspective@${version}`,
-    "perspective-viewer/dist/umd/perspective-viewer.js": `perspective-viewer@${version}`,
-    "perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js": `perspective-viewer-datagrid@${version}`,
-    "perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js": `perspective-viewer-d3fc@${version}`,
-    "perspective-workspace/dist/umd/perspective-workspace.js": `perspective-workspace@${version}`,
     "perspective/dist/cdn/perspective.js": `perspective@${version}/dist/cdn/perspective.js`,
     "perspective-viewer/dist/cdn/perspective-viewer.js": `perspective-viewer@${version}/dist/cdn/perspective-viewer.js`,
     "perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js": `perspective-viewer-datagrid@${version}/dist/cdn/perspective-viewer-datagrid.js`,

diff --git a/examples/blocks/src/citibike/citibike.js b/examples/blocks/src/citibike/citibike.js
@@ -1,3 +1,5 @@
+import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
+
 // Quick wrapper function for making a GET call.
 function get(url) {
     return new Promise((resolve) => {

diff --git a/examples/blocks/src/citibike/index.html b/examples/blocks/src/citibike/index.html
@@ -1,24 +1,18 @@
 <html>
     <head>
-        <meta
-            name="viewport"
-            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
-        />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
 
-        <link
-            rel="stylesheet"
-            crossorigin="anonymous"
-            href="/node_modules/@finos/perspective-workspace/dist/css/pro.css"
-        />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/pro.css" />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-workspace/dist/css/pro.css" />
         <link rel="stylesheet" href="index.css" />
 
-        <script src="/node_modules/@finos/perspective-workspace/dist/umd/perspective-workspace.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-openlayers/dist/umd/perspective-viewer-openlayers.js"></script>
-        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-workspace/dist/cdn/perspective-workspace.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js"></script>
 
-        <script src="citibike.js"></script>
+        <script type="module" src="citibike.js"></script>
 
         <style>
             body {

diff --git a/examples/blocks/src/csv/csv.js b/examples/blocks/src/csv/csv.js
@@ -1,5 +1,7 @@
+import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
+
 window.addEventListener("DOMContentLoaded", function () {
-    const worker = window.perspective.worker();
+    const worker = perspective.worker();
 
     // Get `dropArea` element from the DOM.
     var dropArea = document.getElementById("drop-area");

diff --git a/examples/blocks/src/csv/index.html b/examples/blocks/src/csv/index.html
@@ -3,13 +3,12 @@
     <head>
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
 
-        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
-        <script src="/node_modules/@finos/perspective-viewer-openlayers/dist/umd/perspective-viewer-openlayers.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js"></script>
 
-        <script src="csv.js"></script>
+        <script type="module" src="csv.js"></script>
 
         <link rel="stylesheet" href="index.css" />
         <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
@@ -18,14 +17,8 @@
     <body>
         <div id="drop-area">
             <form class="my-form">
-                <p>
-                    Upload a CSV file by dragging from your desktop and dropping
-                    onto the dashed region.
-                </p>
-                <p>
-                    (Data is processed in browser, and never sent to any
-                    server).
-                </p>
+                <p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
+                <p>(Data is processed in browser, and never sent to any server).</p>
                 <input type="file" id="fileElem" multiple accept="text/csv" />
                 <label class="button" for="fileElem">Select a file</label>
             </form>

diff --git a/examples/blocks/src/evictions/index.html b/examples/blocks/src/evictions/index.html
@@ -10,41 +10,19 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta
-            name="viewport"
-            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"
-        />
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
 
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective/dist/cdn/perspective.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"
-        ></script>
-        <script
-            type="module"
-            src="/node_modules/@finos/perspective-viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js"
-        ></script>
+        <script type="module" src="/node_modules/@finos/perspective/dist/cdn/perspective.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script>
 
-        <link
-            rel="stylesheet"
-            crossorigin="anonymous"
-            href="/node_modules/@finos/perspective-viewer/dist/css/themes.css"
-        />
+        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
 
         <script type="module">
-            import {worker} from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
+            import { worker } from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
 
             const WORKER = worker();
             const URL = `https://data.sfgov.org/resource/5cei-gny5.csv?$limit=50000`;
@@ -55,9 +33,7 @@
                     console.log("Using cached data from localStorage");
                     try {
                         const buffer = fflate.strToU8(arrow, true);
-                        return await WORKER.table(
-                            fflate.decompressSync(buffer).buffer
-                        );
+                        return await WORKER.table(fflate.decompressSync(buffer).buffer);
                     } catch (e) {
                         console.error("Can't load cached data", e);
                         localStorage.clear();
@@ -81,19 +57,15 @@
                         const zipped = fflate.strFromU8(x, true);
                         localStorage.setItem(URL, zipped);
                     } catch (e) {
-                        console.error(
-                            "Can't cache data from data.sfgov.org",
-                            e
-                        );
+                        console.error("Can't cache data from data.sfgov.org", e);
                     }
                 })();
 
                 return table;
             }
 
             async function load() {
-                const el =
-                    document.getElementsByTagName("perspective-viewer")[0];
+                const el = document.getElementsByTagName("perspective-viewer")[0];
 
                 const evictions = get_evictions();
                 const layout_json = await fetch("layout.json");

diff --git a/examples/blocks/src/fractal/index.html b/examples/blocks/src/fractal/index.html
@@ -3,10 +3,9 @@
 <head>
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
 
-    <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
-    <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
-    <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
-    <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
+    <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+    <script type="module" src="/node_modules/@finos/perspective-viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js"></script>
+    <script type="module" src="/node_modules/@finos/perspective-viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js"></script>
 
     <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
     <link rel='stylesheet' href="index.css">
@@ -37,6 +36,6 @@
         </div>
         <perspective-viewer id="viewer"></perspective-viewer>
     </div>
-    <script src="index.js"></script>
+    <script type="module" src="index.js"></script>
 </body>
 </html>
diff --git a/examples/blocks/src/fractal/index.js b/examples/blocks/src/fractal/index.js
@@ -1,3 +1,5 @@
+import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";
+
 function generate_mandelbrot(params) {
     return `
 // color
@@ -152,7 +154,7 @@ window.addEventListener("DOMContentLoaded", async function () {
 
     run.addEventListener(
         "click",
-        make_run_click_callback(window.perspective.worker(), {})
+        make_run_click_callback(perspective.worker(), {})
     );
     run.dispatchEvent(new Event("click"));
 });