Skip to content

Commit

Permalink
Remove UMD builds
Browse files Browse the repository at this point in the history
  • Loading branch information
texodus committed May 6, 2023
1 parent cf15569 commit a3ebd97
Show file tree
Hide file tree
Showing 45 changed files with 431 additions and 642 deletions.
3 changes: 2 additions & 1 deletion .prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
{
"files": ["*.html"],
"options": {
"printWidth": 200
"printWidth": 200,
"tabWidth": 4
}
}
]
Expand Down
10 changes: 5 additions & 5 deletions docs/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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];
Expand Down
40 changes: 1 addition & 39 deletions docs/docs/js.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 0 additions & 5 deletions examples/blocks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
2 changes: 2 additions & 0 deletions examples/blocks/src/citibike/citibike.js
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down
22 changes: 7 additions & 15 deletions examples/blocks/src/citibike/index.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,16 @@
<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-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-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 {
Expand Down
4 changes: 3 additions & 1 deletion examples/blocks/src/csv/csv.js
Original file line number Diff line number Diff line change
@@ -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");
Expand Down
21 changes: 7 additions & 14 deletions examples/blocks/src/csv/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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>
Expand Down
50 changes: 11 additions & 39 deletions examples/blocks/src/evictions/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
Expand All @@ -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();
Expand All @@ -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");
Expand Down
9 changes: 4 additions & 5 deletions examples/blocks/src/fractal/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
4 changes: 3 additions & 1 deletion examples/blocks/src/fractal/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import perspective from "/node_modules/@finos/perspective/dist/cdn/perspective.js";

function generate_mandelbrot(params) {
return `
// color
Expand Down Expand Up @@ -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"));
});
Loading

0 comments on commit a3ebd97

Please sign in to comment.