Create Vite Plugin for Perspective

[thedanchez]

Feature Request

Description of Problem:

Vite is a next-gen build tool that is on the rise in JS apps these days. It would be great for Perspective to have a Vite compliant plugin as it does for Webpack today.

Potential Solutions:

// webpack.config.js - what is supported today
const PerspectivePlugin = require("@finos/perspective-webpack-plugin");

module.exports = {
    entry: "./in.js",
    output: {
        filename: "out.js",
        path: "build",
    },
    plugins: [new PerspectivePlugin()],
};

// vite.config.js
import { defineConfig } from 'vite';
import PerspectivePlugin from 'vite-plugin-perspective'; // <-- the feature request

export default defineConfig({
    plugins: [PerspectivePlugin()],
    build: {
        target: 'esnext',
        polyfillDynamicImport: false,
    },
});

[gersongoulart]

That would be amazing! I was trying to read through the webpack plugin to see if I could port it, but it went over my head.

[thedanchez]

Anyone have an idea of the probability of this being addressed in the near future? I feel this would be very useful and keep Perspective relevant/up to date with modern tooling.

[texodus]

I don't know anything about Vite, but Perspective should build fine in Vite without a plugin as per docs - does it not currently? The perspective-webpack-plugin just optimizes the build size of the final asset a bit.

Due to Perspective using a number of features that require bespoke build support (WebAssembly, WebWorkers, monaco, etc), adding additional plugins for the cornucopia of various JS build tools in the ecosystem is a significant amount of work, especially if we intend to keep them current with multiple versions of these tools. @gersongoulart if you're interested in taking a crack at it, I recommend starting with the tools/perspective-build package which is used to build Perspective with esbuild itself for NPM and CDN publication. esbuild's plugin API is substantially more straightforward to understand than the laborious & effectively undocumented Webpack plugin API. I am happy to answer any questions, or potentially contribute if you get stuck and can give me someplace to start with.

[riziles]

@texodus . First, I love Perspective. Second, the "as per docs" link in your previous message is broken. Trying to figure out how to integrate Perspective into a SvelteKit app and thought the reference might help.

[texodus]

The docs page has changed since this discussion came up, but the advice still holds - you should not need a custom build plugin for perspective. Just follow the instructions on the JavaScript docs, skip the section on the (optional) esbuild and webpack plugins, and it should work.

Please open a new Issue if this isn't the case - be sure to provide sufficient detail that we can debug, a simple repo that repros the issue eg.

[riziles]

Thanks, @texodus . Unfortunately, I don't have a specific issue to report. I usually use Perspective inside of Panel, and it's super seamless and easy. I was just trying to learn Svelte for fun, but I'm just bumbling around now like a bull in a China shop.

[riziles]

@texodus , I sort of got it working, but only with CDN. Vite refuses to bundle the perspective-viewer. It says document is undefined. This seems to be a common issue on StackOverflow, but the workarounds are above my paygrade.

I got it working! Check out the repo here: https://github.com/riziles/svelte-perspective, deployed here: https://steady-cat-fb5198.netlify.app/ .

[spff]

Hi @riziles ! I tried your repo and it worked with yarn v1.22.19 corepack prepare yarn@1.22.19 --activate, but when I tried with yarn v3.6.1, it showed message below, do you have any idea?

 YN0000: ┌ Resolution step
➤ YN0002: │ @d3fc/d3fc-annotation@npm:3.0.12 [530f4] doesn't provide d3-array (p1f439), requested by @d3fc/d3fc-series
➤ YN0002: │ @d3fc/d3fc-annotation@npm:3.0.12 [530f4] doesn't provide d3-path (p2dea9), requested by @d3fc/d3fc-shape
➤ YN0002: │ @d3fc/d3fc-annotation@npm:3.0.12 [530f4] doesn't provide d3-scale-chromatic (p0a73a), requested by @d3fc/d3fc-series
➤ YN0002: │ @d3fc/d3fc-annotation@npm:3.0.12 [530f4] doesn't provide d3-shape (p4e3d9), requested by @d3fc/d3fc-series
➤ YN0002: │ @d3fc/d3fc-chart@npm:5.1.5 [530f4] doesn't provide d3-array (p37a2e), requested by @d3fc/d3fc-series
➤ YN0002: │ @d3fc/d3fc-chart@npm:5.1.5 [530f4] doesn't provide d3-scale-chromatic (p02d14), requested by @d3fc/d3fc-series
➤ YN0002: │ @d3fc/d3fc-chart@npm:5.1.5 [530f4] doesn't provide d3-shape (p405b6), requested by @d3fc/d3fc-series
➤ YN0002: │ @d3fc/d3fc-chart@npm:5.1.5 [530f4] doesn't provide d3-shape (pe53f9), requested by @d3fc/d3fc-axis
➤ YN0002: │ @d3fc/d3fc-series@npm:6.1.0 [530f4] doesn't provide d3-path (p3304d), requested by @d3fc/d3fc-shape
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-array (pd7f2f), requested by @d3fc/d3fc-series
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-array (p2f7d7), requested by @d3fc/d3fc-extent
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-array (paaa61), requested by @d3fc/d3fc-label-layout
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-array (pcfeef), requested by @d3fc/d3fc-sample
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-array (p50ca8), requested by @d3fc/d3fc-technical-indicator
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-brush (p9aebd), requested by @d3fc/d3fc-brush
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-dispatch (p02844), requested by @d3fc/d3fc-brush
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-dispatch (p38d2c), requested by @d3fc/d3fc-pointer
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-dispatch (p94efd), requested by @d3fc/d3fc-zoom
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-fetch (p7739e), requested by @d3fc/d3fc-financial-feed
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-path (pd7dcf), requested by @d3fc/d3fc-shape
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-random (p4baa2), requested by @d3fc/d3fc-random-data
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p88ac0), requested by @d3fc/d3fc-series
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p95b5f), requested by @d3fc/d3fc-axis
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (pe2158), requested by @d3fc/d3fc-webgl
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p5729c), requested by @d3fc/d3fc-annotation
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p202e9), requested by @d3fc/d3fc-brush
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p56a65), requested by @d3fc/d3fc-chart
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p70f1d), requested by @d3fc/d3fc-discontinuous-scale
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale (p48f97), requested by @d3fc/d3fc-label-layout
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-scale-chromatic (p4b1d2), requested by @d3fc/d3fc-series
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p1adb1), requested by @d3fc/d3fc-data-join
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p71f94), requested by @d3fc/d3fc-series
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p413d7), requested by @d3fc/d3fc-axis
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p66835), requested by @d3fc/d3fc-annotation
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p7ae08), requested by @d3fc/d3fc-brush
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p8dc79), requested by @d3fc/d3fc-chart
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (pb47b6), requested by @d3fc/d3fc-label-layout
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p336e6), requested by @d3fc/d3fc-pointer
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-selection (p9a8c0), requested by @d3fc/d3fc-zoom
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-shape (pde760), requested by @d3fc/d3fc-series
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-shape (p6f0c4), requested by @d3fc/d3fc-axis
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-shape (pc574f), requested by @d3fc/d3fc-webgl
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-time (p4f28f), requested by @d3fc/d3fc-discontinuous-scale
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-time (pdbb28), requested by @d3fc/d3fc-random-data
➤ YN0002: │ d3fc@npm:15.2.6 doesn't provide d3-zoom (p8cad6), requested by @d3fc/d3fc-zoom
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash

[riziles]

Unfortunately, @spff , I do not. I have very limited experience with Yarn (and JS in general). Apparently there are known issues trying to use Yarn 2 or 3 with SvelteKit: https://kit.svelte.dev/faq#does-it-work-with-yarn-2 (which stinks, because Svelte is awesome!). Sorry I can't be more help.

Also, I have a more recent example I put together here: https://github.com/riziles/svelte-perspective-starter1

If you'd like to continue the discussion, feel free to open an issue in one of my repos since this issue is already closed.

[mhkeller]

@riziles thanks for these examples. I was able to get the node websocket example running using your starter template as a guide. +1 for a vite plugin that does any additional optimizations and such (realizing of course what a pain these development targets are!).

[texodus]

@brochington has built a Perspective/Vite example repo

[mike-luabase]

My issue, for svelte, was that I had perspective-viewer wrapped in a template tag. I removed that and it worked! Thanks for the example @riziles !

[aayoubi]

This is probably not related to the fact that no Vite plugin is required, but i'm unable to make it work with Vue3, Vite, and Perspective (v3+). It worked fine with version 2.

Was anyone able to solve this? I'm facing the same issue as the one discussed on #2725

[aszenz]

This is probably not related to the fact that no Vite plugin is required, but i'm unable to make it work with Vue3, Vite, and Perspective (v3+). It worked fine with version 2.

Was anyone able to solve this? I'm facing the same issue as the one discussed on #2725

I'm facing a similar issue, the cdn build works fine, but not vite.

[fikander]

@aayoubi @aszenz any luck solving it? I'm having the same problem with vite build with config:

export default defineConfig({
    plugins: [
        react()
    ],
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    perspective: [
                        "@finos/perspective",
                        "@finos/perspective-viewer",
                        "@finos/perspective-viewer-datagrid",
                        "@finos/perspective-viewer-d3fc"
                    ]
                }
            }
        }
    },
    optimizeDeps: {
        include: ["@finos/perspective"],
        esbuildOptions: {
            supported: {
                "top-level-await": true
            }
        }
    }
});

[aayoubi]

@fikander here's a working sample (with Vue and Vite) thanks to @rajsite's inline workaround