Adding Plugins to svelte-datagrid

[benquan]

I am trying to add plugins to svelte-datagrid. I am using the latest Svelte-kit and basically doing the sample code in one of the plugins:

<script>
	import { RevoGrid } from '@revolist/svelte-datagrid';
	import { defineCustomElements } from '@revolist/revogrid/loader';
	import Plugin from '@revolist/revogrid-column-date';

	defineCustomElements();
	const columns = [{ prop: 'name', columnType: 'date' }];
	const rows = [{ name: '2020-08-24' }, { name: '2022-08-24' }];

	const columnTypes = { date: new Plugin() };
</script>

<RevoGrid source={rows} {columns} {columnTypes} />

The app breaks on the import with the message:

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (/Users/ben/Development/svelte/server/node_modules/.pnpm/@[email protected]/node_modules/@revolist/revogrid-column-date/dist/index.js:1:353)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:528:24)
    at async nodeImport (file:///Users/ben/Development/svelte/server/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-d66eb979.js:53404:21)

Am I doing something wrong or there is something wrong with the import? This happens with all column plugins.

[revolist]

Hello @benquan
Please follow standard issue template with sandbox example. Will be easier to run your problem.

Check if issue exists
Search the repo and ensure your issue doesn't already exist. If so, it may:

• Have already been fixed in an unreleased version.
• Have been closed without a solution. Please create a new issue instead of commenting on the old one.

Describe the issue
A clear and concise description of what the issue is.

To Reproduce
Create a minimal reproduction to illustrate the issue. Here's a template to start you off.

[benquan]

Here is a working REPL running on sveltekit:

Working Sample

now if you simply import the plugin
import Plugin from '@revolist/revogrid-column-date';

You get the error:
'default' is not exported by https://unpkg.com/@duetds/[email protected]/dist/loader/index.js, imported by https://unpkg.com/@revolist/[email protected]/dist/index.js

Error Sample

If you try a different plugin:
import SelectTypePlugin from "@revolist/revogrid-column-select";

You get a similar error
'default' is not exported by https://unpkg.com/@revolist/[email protected]/loader/index.js, imported by https://unpkg.com/@revolist/[email protected]/dist/main.js

Error Sample 2

If I run it on your sandbox it seems to work fine though:
Sanbox with plugin

My guess is something is ESModules is crashing with commonjs. By the way this could be the plugin's problem but I posted here because it is a common problem.

[m2a2x]

@benquan problem with svelte REPL I don't see there library version and anything else.
I have no idea why it's not working on their environment, it can be anything.

Is that possible to make same with sandbox?

[benquan]

Here it is with codesandbox of a skeleton sveltekit with grid sample pages:
Code Sandbox

I created a project sampling different column types.
My conclusions:
The basic sample (no plugin) works fine either SSR or Client render.

The Numeral sample works Client side but does crashed with SSR.

The Select Displays the grid with Client Side Rendering, but selection functionalty does not work (gives client side errors) and if run from SSR it will crash immediately
The CSR error is:

The Date Displays the grid with Client Side Rendering, but date functionalty does not work (gives client side errors) and if run from SSR it will crash immediately
The CSR error is:

And the SSR error on all plugins is:

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (/Users/ben/Development/svelte/grid-test/node_modules/.pnpm/@[email protected]/node_modules/@revolist/revogrid-column-select/dist/main.js:1:394)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:528:24)
    at async nodeImport (file:///Users/ben/Development/svelte/grid-test/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-665b0112.js:53404:21)