[HN Gopher] Show HN: TypeScript/React/Vue Window Layout Manager ...
___________________________________________________________________
Show HN: TypeScript/React/Vue Window Layout Manager (Tabs,
Floating, Popouts)
Author : mathuo
Score : 166 points
Date : 2025-01-11 15:31 UTC (7 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| bossyTeacher wrote:
| This is really impressive. Can I also give you major props for
| the following:
|
| - Zero dependencies: wow, this is really good for a js package.
|
| - Documentation: nice, clear and with examples
|
| - Transparent builds: this should be a standard
|
| I wish more js packages were like yours
| herpdyderp wrote:
| > - Transparent builds: this should be a standard
|
| Can you explain what "Transparent builds" means in this
| context?
|
| From my understanding after a quick search, it _is_ the
| standard. If any package requires me to figure out a manual
| build process after installing it, to get it to work, I simply
| do not use it.
| mathuo wrote:
| This is in related to the publication of the package to npm.
| All of the publications are verified with provenance
| statements as supported by NPM directly; it's something I
| believe all NPM packages should be required to use but as of
| now it's optional; it simply provided verifiable signatures
| as to what was built and how it was built.
|
| https://docs.npmjs.com/generating-provenance-statements
|
| https://www.npmjs.com/package/dockview#provenance
| itsafarqueue wrote:
| Attestation
| cyanydeez wrote:
| Neat. Any mobile touch plans?
| mathuo wrote:
| Yes, it's something that is planned. Currently some features
| work with touch inputs but not all of them.
|
| - https://github.com/mathuo/dockview/issues/696
| rk06 wrote:
| it is great to say support for vanilla js & vue in addition to
| react, for other js framework to consume
| garbagepatch wrote:
| Does this use the new moveBefore API to move DOM elements while
| preserving their state? Or is it going to recreate the elements
| eitherway due to React/Vue?
| lolinder wrote:
| I'd be surprised if it uses moveBefore for something that seems
| to have put so much thought into being portable. moveBefore
| doesn't even have an entry in MDN yet, the only references I
| can find to it suggest it's still only available behind a flag
| in Chrome canary.
| samhh wrote:
| It could support it as a progressive enhancement.
| lolinder wrote:
| I personally wouldn't even bother with that yet.
|
| Once it's available in even one browser not behind a flag,
| sure, but while it's still entirely undocumented and only
| available to people who both use Chrome Canary and know to
| go turn on a specific flag?
| mathuo wrote:
| There are multiple ways in which you can specify how the panel
| renders.
|
| https://dockview.dev/docs/core/panels/rendering
|
| Options exist for multiple cases:
|
| 1. Where you never want the elements DOM position to move
| (`always` rendering mode) and the HTMLElement is simply hidden
| (display: none) when not visible. 2. Where you only want the
| DOM element to exist when the panel is visible
| (`onlyWhenVisible` mode)
|
| In the case of React the React Tree is always maintained in
| either mode.
| karol wrote:
| Nice project. I would appreciate putting some common content in
| the demo, such as videos, dropdowns, large amount of text and
| large size text to show how they can be handled.
|
| Also is there a version without window chrome, just panes?
| mlajtos wrote:
| Instead of content, put there webview/iframe -
| https://github.com/mlajtos/mosaic
| samradelie wrote:
| Wow. Stellar work. The TS looks really proper on first glance. I
| think you're right on zeitgeist -- we're going to need a lot more
| fundamental tools like this to build AI apps.
|
| Technically speaking, I've long wondered about mount/unmount of
| components as panels are dragged about and their visibility
| changed. Sometimes it's more costly to mount/unmount than to
| display:none.
|
| Second, you have basically a declarative structure for these
| panels, are there plans to expose a Vite plugin for example that
| could export saved TS layouts, where functions (ie: TS imports)
| map to the panel contents? (trying to think outside of JSX and
| more vanilla TS)
|
| Fantastic work!
| mathuo wrote:
| In terms of rendering modes both approaches are supported
|
| https://dockview.dev/docs/core/panels/rendering
|
| There are options to maintain the panels content within the DOM
| at all times (using an approach like you mentioned with
| display: none) and options to remove content from the DOM.
|
| In terms of vanilla TS the library is almost entire written in
| vanilla TS with small wrapper libraries for Vue and React.
|
| In theory wrappers could be written for other frameworks such
| as Angular (which is something I would like to get done this
| year)
|
| Loading and saving state is supported though
|
| https://dockview.dev/docs/core/state/save
|
| Let me know if that answers the question
| diob wrote:
| How does this compare to golden layout? Inspired by it?
|
| I really enjoyed that project back in the day, but unfortunately
| support completely stopped (it had some folks take over, but I
| didn't see a real feasible upgrade path despite their passionate
| work on updating it).
|
| This looks great! I'd be interested in giving it a try.
| mathuo wrote:
| golden layout is the OG JavaScript layout manager, used it for
| many years beforehand.
|
| Orginally yes it was inspired by some of the other layout
| managers, include golden layout. The main goal here was to have
| zero depenedencies and to be written in Vanilla TypeScript with
| wrapper libraries for frameworks such as Vue and React.
|
| Any feedback is appreicated, the website demo shows most of the
| current capabilities and there are many more planned in the
| Issues list.
| joshribakoff wrote:
| I just tried using golden layout the other day. The demo on
| their website with react support is v1 and when I installed it,
| I got v2 which apparently drops react support and has no
| documentation or examples on the website. With v1, it only
| supported class based components. While in theory you could
| maintain your own adapter logic for golden layout, it seems
| somewhat defunct, there are other newer libs that may even have
| better feeling drag and drop like this one. I also recall about
| six years ago when I went to use Golden layout on another
| project I ended up implementing my own with vanilla type script
| because of some (perceived) issues with it. My experiences have
| always been that although it is ubiquitous it's not that great.
| peppertree wrote:
| Demo doesn't load in macOS Safari.
| andix wrote:
| Same issue on iPadOS (18.3) Safari.
| mathuo wrote:
| will take a look
| https://github.com/mathuo/dockview/issues/826
| andix wrote:
| Great. Sadly I can't provide any more details, I have no
| debugger connected to the iPad to investigate the issue,
| it's a bit tricky without a Mac.
| ukuina wrote:
| Try this?
|
| https://apps.apple.com/us/app/inspect-
| browser/id1203594958
| andix wrote:
| I think there are also open source tools to get a Safari
| remote debugger working on Linux and Windows. I would
| prefer that over an app on the tiny iPad screen.
| mathuo wrote:
| demo fixed on Safari. There is touch support for some the
| core features.
|
| https://dockview.dev/demo/
| mathuo wrote:
| demo fixed on Safari
|
| https://dockview.dev/demo/
| keb_ wrote:
| SEXY!
| dahdum wrote:
| Kept getting this error when navigating: This page crashed Try
| again Right side of assignment cannot be destructured
|
| The video looks awesome, but I couldn't get the demo to work
| using an iPad, so I assume mobile isn't supported fully? I'd use
| it for my personal dashboard and for organizing llama.cpp chats
| if I could.
| mathuo wrote:
| Most likely, touch devices are not officially supported however
| support is planed. Also the demo has some issues running on
| Safari which will be fixed.
| Jonovono wrote:
| Looks awesome! I want something like this for managing Electron
| base windows & Web contents views :)
| Onavo wrote:
| Do you plan to add touch device support? It doesn't work well on
| tablets and phones.
| mathuo wrote:
| Yes, it's something that is planned. Currently some features
| work with touch inputs but not all of them.
|
| - https://github.com/mathuo/dockview/issues/696
| mlajtos wrote:
| Safari can't handle the demo. https://dockview.dev/demo
| mathuo wrote:
| will take a look https://github.com/mathuo/dockview/issues/826
| mathuo wrote:
| demo fixed on Safari
|
| https://dockview.dev/demo/
| mlajtos wrote:
| Time to rebuild Mosaic. https://github.com/mlajtos/mosaic
| bsnnkv wrote:
| I maintain a tiling wm written in Rust, and I just cannot imagine
| having the patience to do this kind of work in JS/TS. My respect
| to mathuo! One of the coolest things I've seen on HN recently.
| mathuo wrote:
| Appreciated :)
| low_tech_punk wrote:
| Looks like a very high quality library, great work! I wonder if
| it will eventually support auto truncating tab titles when the
| tabs fill up the horizontal space, just like how chrome display
| large number of tabs.
| pdyc wrote:
| wow, very well thought out layout manager. I want to start a
| project just to use it :-)
|
| Is there a way to add gaps between the elements so it looks like
| a dashboard rather than panel?
| mattlondon wrote:
| Brilliant.
|
| Is anyone aware of any sort of similar sort of zero-dep vanilla
| libraries for common desktop controls beyond what HTML offers?
| E.g. menus etc?
| chris_st wrote:
| I use DaisyUI [0] for all kinds of controls; it's CSS only.
|
| 0: https://daisyui.com
| mathuo wrote:
| small issue on website preventing demo working on Safari browsers
| is now fixed.
|
| https://dockview.dev/demo/
___________________________________________________________________
(page generated 2025-01-11 23:00 UTC)