[Feature]: DevMode draggable

[manudeli]

Package Scope

@suspensive/react

Description

Draggable DevMode

Possible Solution

No response

etc.

No response

[manudeli]

@minsoo-web @okinawaa I think it's last feature to make <DevMode/> as stable.
I thought that DevMode should be rendered on react portal to be draggable.

I guess this have two requirement.

1. make DevMode draggable
2. remember previous position of DevMode in localstorage

[minsoo-web]

I'm wondering what value there might be in making it draggable.

[manudeli]

I thought devMode's position need to be like iPhone's AssistiveTouch

We have position already. but we need to code other postion to avoid blocking uis if there is blocked uis by DevMode. I thought it' not good for DX. so I just want to make DevMode's position should be changeable and draggable and It will make library users won't feel annoying DevMode's position problem.

I'm curious about your opinion for this feature. @minsoo-web

[manudeli]

I added this as v2 minor feature

[minsoo-web]

Oh, I think I've been in the situation you're talking about. I agree that it's not a good DX when the dev tool covers the ui.

I think it's a good idea to make it draggable!
However, I'm a little doubtful that it's possible to develop lightweight.
It seems like you need to use Portal and make it lightweight without any additional libraries, so why not separate DevMode into a separate library? like @suspensive/devtools

[manudeli]

@minsoo-web, you are right. I thought it like you too. (naming like @suspensive/react-devtools also good for me)
If we have to use portal, we must use react-dom. so I think @suspensive/react-dev-mode should be seperated with @suspensive/react If we need to implement this

To do this, I thought "overriding type interface" with d.ts file to support devMode prop externally like typing extends theme of emotion ThemeProvider

like below

// Suspense.tsx
interface SuspenseProps extends ReactSuspenseProps, DevModePropOverride["Suspense"] {
  ...
}

// suspensive.d.ts on library user's code
import { SuspensiveDevModeProp } from '@suspensive/react-dev-mode'

declare module '@suspensive/react' {
  export interface DevModePropOverride extends SuspensiveDevModeProp {}
}