Zero dependency (vanilla js) #172

abalter · 2023-01-11T16:37:11Z

Does "zero dependency" mean it can run as a vanilla js library?

Is there an example of how to do that?

mathuo · 2023-01-12T09:37:16Z

Currently dockview is specifically designed for use with React. Dockview has zero dependencies but it does have a peer dependency on the react and react-dom libraries.

Although, the entire project is written in vanilla js and exposes a react layer on top for people to use. It would easily work in vanilla js if the react peer dependency could be isolated. Let me take a look at this and see if I can provide an example of using dockview using only vanilla js.

mathuo · 2023-02-12T09:37:16Z

Progress Update

I've published an experimental build to npm under the experimental tag 0.0.0-experimental-ff3f0b23-20230207.

There are numerous issues with this still but I wanted to show where I was at on this. It's very reasonable to assume dockview can support Vanilla JS/TS (and I believe it would be a benefit to have) since the core of the library is written in plain TypeScript with the React components simply wrappers on top of that core logic.

The sandbox example here shows a "running example" (not necessarily a working example) written in plain TypeScript. As you will see there are issues:

The interface simply isn't clear. You need to implement the IContentRenderer interface to provide your own panel but this interface isn't "clean" enough for public use. I will need to work on cleaning this interface, making the purpose of the methods clearer and reducing the number of required methods to implement to a minimum. Additionally documentation will need to be written for usage with Vanilla JS/TS.

For example in the React version there is an implementation of this interface with the React world which you can see here

Some of the required types in the TypeScript world are not exposed correctly which you will see as errors in the sandbox.
dockview has a peer dependency on react and react-dom. To circumvent this causing compliation issues (if you import anything from dockview you as a by-product will import things from react and react-dom) I've seperated and isolated the react code and you can avoid importing this section of the code by importing from dockview/dist/cjs/core rather than dockview (which in itself is a big usability problem that needs fixing). To address this the library would probably need to be split into two seperate packages, one contains the core contents and another that exposes only the react wrappers that has a peer dependency to the core package.

You can see the isolation of code in this file.

I will be looking into these issues but I can't really give a hard timeline currently, however the message here is that I do intend to support Vanilla JS/TS in the near future.

abalter · 2023-02-22T20:56:04Z

I wonder if something in the spirit of this would be possible:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="link to dockview.css">
    <script type="text/javascript" src="cdn for jquery">
    <script type="text/javascript" src="cdn for react">
    <script type="text/javascript" src="link to a single file with no dependencies other than react and maybe jquery dockview.min.js">
<head>
<html>
    <body>
        <div class="dockview-div"></div>
        <script>
            dock = new DockView("dockview-div")
            dock
                .addPanel(title="Panel1", location="top-left", width=0.5, height=0.5)
                .addPanel(title = "Panel2", location="top-right", width=0.5)
                .addPanel(title = "Panel3", location='bottom', width=1.0)
        </script>
    <body>
<html>

Or, to follow an existing paradigm, something like this: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdockinglayout/jquery-docking-layout-getting-started.htm?search=

mathuo · 2023-04-03T21:32:27Z

Moving this under the Discussions section here.

abalter · 2023-10-06T19:24:48Z

Hi @mathuo. This example (linked to in the discussion referenced above) uses both react and typescript. Is it actually possible in vanilla JS?

index.tsx

import { StrictMode } from 'react';
import * as ReactDOMClient from 'react-dom/client';
import './styles.css';
import 'dockview/dist/styles/dockview.css';

import App from './app';

const rootElement = document.getElementById('root');

if (rootElement) {
    const root = ReactDOMClient.createRoot(rootElement);

    root.render(
        <StrictMode>
            <div className="app">
                <App />
            </div>
        </StrictMode>
    );
}

abalter · 2023-10-06T19:34:23Z

I see now there is a drop-down on the example for a javascript version. However that still isn't vanilla javascript.

mathuo · 2023-10-06T19:44:22Z

I see now there is a drop-down on the example for a javascript version. However that still isn't vanilla javascript.

What are you defining as vanilla javascript?

abalter · 2023-10-06T19:54:09Z

index.html

<html>
    <head>
        <script src="js/main_library.js"></script>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div id="the-div-for-the-app"></div>
        <script src="js/custom-script-for-myapp.js"></script>
    </body>
</html>

Here is a (really bad) web app that uses an extensive and complex pure-javascript widget library. I use the library by loading a single javascript file.

https://arielbalter.org/session-practice/

abalter · 2023-10-06T20:24:04Z

Overall, I like dock-view the best in terms of functionality and appearance. But there are a number of pure-js libraries that require only loading a single library file. Also, some are not FOSS, for example JQWidgets. Dock Spawn TS is a pure JS library (no react) but not something you can link to as a single file.

What would be really awesome is an algorithm to drag and dock jspanel objects.

eclipse313 · 2023-11-07T16:57:00Z

I'm speaking for the Vue community here. It would be great if there was also a Vue version of this. Especially since dockview-core is not related to React, this should be possible in principle.

I've just had a look at the source code, but I'm struggling a bit with porting the React portal stuff to Vue.

Can anyone help?

mathuo · 2024-03-31T15:38:47Z

Moving discussion to here

@yoshiok @eclipse313

mathuo changed the title ~~Zero dependency~~ Zero dependency (vanilla js) Jan 18, 2023

mathuo linked a pull request Jan 18, 2023 that will close this issue

refactor: expose a vanillajs export #174

Merged

mathuo mentioned this issue Feb 12, 2023

refactor: expose a vanillajs export #174

Merged

mathuo added the vanillajs Support plain-old JS/TS label Feb 28, 2023

mathuo closed this as completed in #174 Mar 6, 2023

mathuo reopened this Mar 6, 2023

mathuo added the inprogress label Jul 2, 2023

mathuo closed this as completed Oct 6, 2023

mathuo reopened this Oct 6, 2023

mathuo linked a pull request Nov 8, 2023 that will close this issue

chore: create new packages for supported frameworks #387

Closed

mathuo closed this as completed Mar 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zero dependency (vanilla js) #172

Zero dependency (vanilla js) #172

abalter commented Jan 11, 2023

mathuo commented Jan 12, 2023 •

edited

mathuo commented Feb 12, 2023 •

edited

abalter commented Feb 22, 2023

mathuo commented Apr 3, 2023 •

edited

abalter commented Oct 6, 2023

abalter commented Oct 6, 2023

mathuo commented Oct 6, 2023

abalter commented Oct 6, 2023

abalter commented Oct 6, 2023 •

edited

eclipse313 commented Nov 7, 2023

mathuo commented Mar 31, 2024

Zero dependency (vanilla js) #172

Zero dependency (vanilla js) #172

Comments

abalter commented Jan 11, 2023

mathuo commented Jan 12, 2023 • edited

mathuo commented Feb 12, 2023 • edited

abalter commented Feb 22, 2023

mathuo commented Apr 3, 2023 • edited

abalter commented Oct 6, 2023

abalter commented Oct 6, 2023

mathuo commented Oct 6, 2023

abalter commented Oct 6, 2023

abalter commented Oct 6, 2023 • edited

eclipse313 commented Nov 7, 2023

mathuo commented Mar 31, 2024

mathuo commented Jan 12, 2023 •

edited

mathuo commented Feb 12, 2023 •

edited

mathuo commented Apr 3, 2023 •

edited

abalter commented Oct 6, 2023 •

edited