Use standalone mode

[vallemar]

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]

Standalone mode is bundler-agnostic

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

[vallemar]

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]

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]

Probably need your help /cc @webfansplz

[webfansplz]

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]

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

[alexzhang1030]

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

[vallemar]

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]

Hi @vallemar, you can try it again with:

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