Use standalone mode #141

vallemar · 2024-01-03T22:04:30Z

Hi, is it possible to use Standalone mode with webpack?
I am trying to call .connect and the promise resolves but when doing console.log(devtools) I see that connect is false

alexzhang1030 · 2024-01-04T02:08:27Z

Standalone mode is bundler-agnostic

All you need to do is add this script to your index.html, and open the page ;)

vallemar · 2024-01-04T14:57:44Z

Hi @alexzhang1030 ! thanks! so there is something missing, when I try these changes nativescript-vue/nativescript-vue#1074 the .connect promise is resolved but the status is as follows

  {
     "state": {
       "connected": false,
       "clientConnected": false,
       "appRecords": [],
       "activeAppRecord": null,
       "selectedComponentId": null,
       "pluginBuffer": [],
       "tabs": [],
       "commands": [],
       "vitePluginDetected": false,
       "activeAppRecordId": null
     },
     "context": {
       "appRecord": null,
       "api": null,
       "inspector": [],
       "timelineLayer": [],
       "routerInfo": {},
       "router": null,
       "activeInspectorTreeId": "",
       "componentPluginHookBuffer": []
     },
     "hook": {
       "on": {}
     },
     "api": null
   }

On the contrary, if global.document is undefined (by commenting this line https://github.com/nativescript-vue/nativescript-vue/blob/1d1a1540402d16f5097e2607cf9e91133af52829/devtools.js#L22) I get the following

  {
     "state": {
       "connected": false,
       "clientConnected": true, // <----- THIS IS CONNECTED
       "appRecords": [],
       "activeAppRecord": null,
       "selectedComponentId": null,
       "pluginBuffer": [],
       "tabs": [],
       "commands": [],
       "vitePluginDetected": false,
       "activeAppRecordId": null
     },
     "context": {
       "appRecord": null,
       "api": null,
       "inspector": [],
       "timelineLayer": [],
       "routerInfo": {},
       "router": null,
       "activeInspectorTreeId": "",
       "componentPluginHookBuffer": []
     },
     "hook": {
       "on": {}
     },
     "api": null
   }

but the application remains in an intermediate state between waiting and the debug screen

So, it seems that globalThis.global.document being undefined seems to do something else. Is there anything that standalone mode needs to work fromwindow or document?

Note: without the PR changes that I mentioned in the devtools 6.x version it works fine

alexzhang1030 · 2024-01-04T15:02:46Z

Hi @alexzhang1030 ! thanks! so there is something missing, when I try these changes nativescript-vue/nativescript-vue#1074 the .connect promise is resolved but the status is as follows
  {

     "state": {

       "connected": false,

       "clientConnected": false,

       "appRecords": [],

       "activeAppRecord": null,

       "selectedComponentId": null,

       "pluginBuffer": [],

       "tabs": [],

       "commands": [],

       "vitePluginDetected": false,

       "activeAppRecordId": null

     },

     "context": {

       "appRecord": null,

       "api": null,

       "inspector": [],

       "timelineLayer": [],

       "routerInfo": {},

       "router": null,

       "activeInspectorTreeId": "",

       "componentPluginHookBuffer": []

     },

     "hook": {

       "on": {}

     },

     "api": null

   }
On the contrary, if global.document is undefined (by commenting this line https://github.com/nativescript-vue/nativescript-vue/blob/1d1a1540402d16f5097e2607cf9e91133af52829/devtools.js#L22) I get the following
  {

     "state": {

       "connected": false,

       "clientConnected": true, // <----- THIS IS CONNECTED

       "appRecords": [],

       "activeAppRecord": null,

       "selectedComponentId": null,

       "pluginBuffer": [],

       "tabs": [],

       "commands": [],

       "vitePluginDetected": false,

       "activeAppRecordId": null

     },

     "context": {

       "appRecord": null,

       "api": null,

       "inspector": [],

       "timelineLayer": [],

       "routerInfo": {},

       "router": null,

       "activeInspectorTreeId": "",

       "componentPluginHookBuffer": []

     },

     "hook": {

       "on": {}

     },

     "api": null

   }
but the application remains in an intermediate state between waiting and the debug screen

So, it seems that globalThis.global.document being undefined seems to do something else. Is there anything that standalone mode needs to work fromwindow or document?

Note: without the PR changes that I mentioned in the devtools 6.x version it works fine

Thanks for your feedback 😉 we will figure it out later

alexzhang1030 · 2024-01-05T02:38:22Z

Probably need your help /cc @webfansplz

webfansplz · 2024-01-05T05:10:13Z

Hi @vallemar, so glad to see NativeScript is trying to integrate the devtools next, I want to help you support it.

I haven't used NativeScript before, Is there any way to quickly debug it with 1074 locally? thank you.

alexzhang1030 · 2024-01-05T05:21:22Z

I've tested a Vue3 + webpack project created by vue-cli, and
faced the same issue.

alexzhang1030 · 2024-01-05T05:24:52Z

I'm unsure if this relates to ESM, CJS, or Webpack, but it's a clue.

vallemar · 2024-01-05T08:28:37Z

Hola@vallemarMe alegra mucho ver que NativeScript está intentando integrar las herramientas de desarrollo a continuación. Quiero ayudarlo a respaldarlo.

No he usado NativeScript antes. ¿Hay alguna forma de depurarlo rápidamente con nativescript-vue/nativescript-vue#1074 localmente? gracias.

I think the only way is to install the nativescript development elements and run the sample application that has under the PR branch.

Here is the documentation to install the setup. If you have any questions I can try to help you or you can join the NativeScript discord server, it may be faster.

Although if you have found the same thing with vuetify it may be faster to solve it with it

webfansplz · 2024-01-06T08:23:37Z

Hi @vallemar, you can try it again with:

Upgrade to v7.0.6
Make sure to invoke devtools connect function before creating Vue App

vallemar · 2024-01-08T11:14:42Z

Hi @webfansplz ! For me this version still doesn't work with v7.0.6, would you have a vuetify sample?

I think we are loading vue-detools before the application, @rigor789 can you confirm this?

webfansplz · 2024-01-08T12:24:13Z

Hi @webfansplz ! For me this version still doesn't work with v7.0.6, would you have a vuetify sample?

I think we are loading vue-detools before the application, @rigor789 can you confirm this?

Can you help me create a mini repo with Vuetify? thanks.
In addition, not loading devtools before the application, but invoke devtools connect function before create Vue App.

rigor789 · 2024-01-08T17:07:13Z

Hi @webfansplz ! For me this version still doesn't work with v7.0.6, would you have a vuetify sample?

I think we are loading vue-detools before the application, @rigor789 can you confirm this?

We're loading it before the Vue app yes, and also calling connect before the main app is created/mounted.

@webfansplz how does the communication between the app and devtools work, I saw RPC in there, but I presume there's some kind of socket too, or just polling? Wonder if we're not making the actual connection (since we're not exactly in a web environment, we might need to polyfill something in addition).

webfansplz · 2024-01-09T04:49:26Z

Hi @webfansplz ! For me this version still doesn't work with v7.0.6, would you have a vuetify sample?
I think we are loading vue-detools before the application, @rigor789 can you confirm this?

We're loading it before the Vue app yes, and also calling connect before the main app is created/mounted.

@webfansplz how does the communication between the app and devtools work, I saw RPC in there, but I presume there's some kind of socket too, or just polling? Wonder if we're not making the actual connection (since we're not exactly in a web environment, we might need to polyfill something in addition).

The standalone mode uses socket, and it's the same as the old devtools implementation.

rigor789 · 2024-01-09T14:59:22Z

Rebuilt @vue/devtools-electron without minifying so I can easily add some console logs, seems like the socket.io client does connect successfully, and events start going in/out.

The issue seems to be related to the devtools-hook being created after the custom renderer.

I was able to call in createApp (to delay the call) and that seems to have helped.

setDevtoolsHook(global.__VUE_DEVTOOLS_GLOBAL_HOOK__ as any, global);

Reconnects/initial connection seems to be an issue - have to reopen the app for the initial connection, and reconnecting the app doesn't work - will investigate that further later, but this is promising!

webfansplz · 2024-01-10T14:40:12Z

Rebuilt @vue/devtools-electron without minifying so I can easily add some console logs, seems like the socket.io client does connect successfully, and events start going in/out.

The issue seems to be related to the devtools-hook being created after the custom renderer.

I was able to call in createApp (to delay the call) and that seems to have helped.
setDevtoolsHook(global.__VUE_DEVTOOLS_GLOBAL_HOOK__ as any, global);
Reconnects/initial connection seems to be an issue - have to reopen the app for the initial connection, and reconnecting the app doesn't work - will investigate that further later, but this is promising!

Good catch ! I submitted a PR (#164) to resolve it. Can you try the packages/vue-termui-playground/src/main.ts setting (import devtools and call connect function before import and create vue), I'll find a better way to handle it if it also works forNativeScript.

webfansplz · 2024-01-11T13:24:26Z

Hi @vallemar @rigor789 , I believe this issue has been solved in 7.0.8, can you help me try it again:

// import before vue
import { devtools } from '@vue/devtools'
import '@vue/devtools/hook'

// connect before create vue app
devtools.connect('xxx','xxx')

rigor789 · 2024-01-11T21:14:50Z

@webfansplz awesome, thanks for the updates!

Looks like that works a lot better now, a few notes on latest:

have to alias 'socket.io-client' to 'socket.io-client/dist/socket.io.js' to avoid webpack polyfill errors (this one is simple, so don't think anything needs to change in devtools - just thought I'd mention)
disconnects/reconnects work now! 🎉

I still seem to need this in our custom renderer code:

export const createApp = ((...args) => {
  try {
    if (global.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
      setDevtoolsHook(global.__VUE_DEVTOOLS_GLOBAL_HOOK__ as any, global);
    }
  } catch (err) {
    // ignore
  }

 // ...

devtools doesn't seem to update the refs until I re-select the component

Screen.Recording.2024-01-11.at.10.13.35.PM.mov

webfansplz · 2024-01-12T04:38:18Z

@webfansplz awesome, thanks for the updates!

Looks like that works a lot better now, a few notes on latest:
have to alias 'socket.io-client' to 'socket.io-client/dist/socket.io.js' to avoid webpack polyfill errors (this one is simple, so don't think anything needs to change in devtools - just thought I'd mention)

disconnects/reconnects work now! 🎉
I still seem to need this in our custom renderer code:
export const createApp = ((...args) => {
  try {
    if (global.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
      setDevtoolsHook(global.__VUE_DEVTOOLS_GLOBAL_HOOK__ as any, global);
    }
  } catch (err) {
    // ignore
  }

 // ...
devtools doesn't seem to update the refs until I re-select the component
Screen.Recording.2024-01-11.at.10.13.35.PM.mov

Hi @rigor789 Thanks for the feedback and glad to see it works now

I used socket.io-client/dist/socket.io.js at first, but it seems to have some edge case issue, I'll try it again later.
Do you add the import '@vue/devtools/hook' before import vue?
We'll track it later, thanks.

rigor789 · 2024-01-12T15:49:23Z

@webfansplz
Not sure about 1. but I wouldn't worry about it - it works with the alias (and is hidden from the user, so doesn't complicate it for end-users at all)

For 2. I missed that at first, but testing it now with it, and seems like it doesn't change it. But it does look like our bundle is somehow still loading these in the wrong order. I'll try and debug that. I believe it should work once I figure out why the order is incorrect.

webfansplz · 2024-01-17T12:11:31Z

@webfansplz Not sure about 1. but I wouldn't worry about it - it works with the alias (and is hidden from the user, so doesn't complicate it for end-users at all)

For 2. I missed that at first, but testing it now with it, and seems like it doesn't change it. But it does look like our bundle is somehow still loading these in the wrong order. I'll try and debug that. I believe it should work once I figure out why the order is incorrect.

Okay, I think it should work when we solve the import order issue. So let's close the issue, and please feel free to reopen the issue if you still have issues after solving the import order issue.

rigor789 · 2024-01-17T14:36:16Z

Thanks for your help @webfansplz!

alexzhang1030 added the usage Usage issue/question label Jan 4, 2024

vallemar changed the title ~~Use standalone with webpack~~ Use standalone mode Jan 4, 2024

alexzhang1030 added bug Something isn't working standalone app scope: electron and removed usage Usage issue/question labels Jan 5, 2024

webfansplz mentioned this issue Jan 6, 2024

fix(electron): use esm instead of iife to load script #157

Merged

webfansplz mentioned this issue Jan 10, 2024

fix(electron): compatible with vue custom renderer #164

Merged

webfansplz closed this as completed Jan 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use standalone mode #141

Use standalone mode #141

vallemar commented Jan 3, 2024

alexzhang1030 commented Jan 4, 2024

vallemar commented Jan 4, 2024 •

edited

Loading

alexzhang1030 commented Jan 4, 2024

alexzhang1030 commented Jan 5, 2024

webfansplz commented Jan 5, 2024 •

edited

Loading

alexzhang1030 commented Jan 5, 2024

alexzhang1030 commented Jan 5, 2024 •

edited

Loading

vallemar commented Jan 5, 2024 •

edited

Loading

webfansplz commented Jan 6, 2024

vallemar commented Jan 8, 2024

webfansplz commented Jan 8, 2024

rigor789 commented Jan 8, 2024

webfansplz commented Jan 9, 2024

rigor789 commented Jan 9, 2024

webfansplz commented Jan 10, 2024

webfansplz commented Jan 11, 2024

rigor789 commented Jan 11, 2024

webfansplz commented Jan 12, 2024

rigor789 commented Jan 12, 2024

webfansplz commented Jan 17, 2024

rigor789 commented Jan 17, 2024

Use standalone mode #141

Use standalone mode #141

Comments

vallemar commented Jan 3, 2024

alexzhang1030 commented Jan 4, 2024

vallemar commented Jan 4, 2024 • edited Loading

alexzhang1030 commented Jan 4, 2024

alexzhang1030 commented Jan 5, 2024

webfansplz commented Jan 5, 2024 • edited Loading

alexzhang1030 commented Jan 5, 2024

alexzhang1030 commented Jan 5, 2024 • edited Loading

vallemar commented Jan 5, 2024 • edited Loading

webfansplz commented Jan 6, 2024

vallemar commented Jan 8, 2024

webfansplz commented Jan 8, 2024

rigor789 commented Jan 8, 2024

webfansplz commented Jan 9, 2024

rigor789 commented Jan 9, 2024

webfansplz commented Jan 10, 2024

webfansplz commented Jan 11, 2024

rigor789 commented Jan 11, 2024

webfansplz commented Jan 12, 2024

rigor789 commented Jan 12, 2024

webfansplz commented Jan 17, 2024

rigor789 commented Jan 17, 2024

vallemar commented Jan 4, 2024 •

edited

Loading

webfansplz commented Jan 5, 2024 •

edited

Loading

alexzhang1030 commented Jan 5, 2024 •

edited

Loading

vallemar commented Jan 5, 2024 •

edited

Loading