Appends as [object Object]

[WiLuX-Source]

// ==UserScript==
// @name        Test Panel
// @description Test panel with vm-dom
// @match       *://*/*
// @version     1.5.0
// @author      Wilux
// @require     https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/ui@0.7
// @grant       GM_addStyle
// @grant       GM_getValue
// @grant       GM_setValue
// ==/UserScript==

(function () {
  "use strict";
  function PanelMenu() {
    return VM.h(
      "div",
      {
        className: "accountbody",
      },
      VM.h(
        "h3",
        {
          className: "test",
        },
        "Hello"
      )
    );
  }
  document.body.appendChild(VM.h(PanelMenu, null));
})();

I didn't add css to avoid confusion. Any idea why this not working?

[gera2ld]

Replace VM.h with VM.hm.

Hope this explains:

const vdom = VM.h('div');
const el = VM.m(vdom);

// merge into one if you don't need SVG
const el = VM.hm('div');

BTW I suggest using Solid.

[WiLuX-Source]

Thanks for answer. But i am not sure what you meant by use solid instead. You mean its possible to use solidjs inside userscript?

[gera2ld]

Yes if you use babel/rollup to compile your script.

Actually this project is for using JSX in userscripts. Check https://github.com/violentmonkey/generator-userscript

[WiLuX-Source]

That is what that project generated through rollup.

[WiLuX-Source]

It is very unpleasant experience when you do a thing and it just doesnt work. I'll stick with normal for now.

[gera2ld]

I believe the demo still works. Maybe I should change the default pragma to VM.hm and add an example without getPanel.

There is a comment in babel.config.js, I think here is what you need:

// VM.hm in babel.config.js
document.body.appendChild(<PanelMenu />);

// VM.h in babel.config.js
document.body.appendChild(VM.m(<PanelMenu />));

[WiLuX-Source]

I believe the demo still works. Maybe I should change the default pragma to VM.hm and add an example without getPanel.

There is a comment in babel.config.js, I think here is what you need:

// VM.hm in babel.config.js
document.body.appendChild(<PanelMenu />);

// VM.h in babel.config.js
document.body.appendChild(VM.m(<PanelMenu />));

thats what i need thank you <3

[WilliamStone]

Hello @gera2ld !

I have a related problem. I used userscripts generator to generate my script project, which builds without error. And then I want to integrate jsx, so I added into app.tsx simplest jsx code: document.body.appendChild(<div>hello</div>), just as README and above thread shows, and VSCode editor shows following error:

Argument of type 'Element' is not assignable to parameter of type 'Node'.
Type 'number' is not assignable to type 'Node'. ts(2345)

However when I ran npm run build:js it built without error, and it did inject <div>hello</div> into webpage body.
I tried to get rid of error in VSCode editor, with no success. I added plugin configuration in babel.config.cjs following README guide(README says add to .babelrc.json, also tried that, no difference):

// babel.config.cjs
module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false,
      loose: true,
    }],
    '@babel/preset-typescript',
    'babel-preset-solid',
  ],

  // Manually added according to README
  plugins: [
    ['@babel/plugin-transform-react-jsx', {
      pragma: 'VM.h',  // Tried both VM.h and VM.hm
      pragmaFrag: 'VM.Fragment',
    }],
  ],
};

However, I checked generated js file and found that the <div>hello</div> jsx part was transpiled into: _tmpl$2 = /*#__PURE__*/web.template(

hello);, I don't understand frontend technologies much, but I think this is wrong , If the plugin-transform-react-jsx configuration works, the generated code should use VM.h() specified in configuration to convert jsx to VNode, not web.template() which came from SolidJS, perhaps imported by babel-preset-solid preset?
Another possibility I can think of is VSCode's support of TypeScript, React/SolidJS or Babel, but I cannot tell for sure. It seems VSCode has builtin support for typescript and tsx, I don't know whether it respects above babel configuration.

Currently my problem is how to get rid of VSCode editor error at jsx, and how to make generated js file use VM.h to create jsx element. Please help me check, and if possible, it's best to change userscript generator to generate more common example code, utilizing VM.h and VM.m initially. Thank you very much!

[gera2ld]

Hi @WilliamStone , the latest generator-userscript has switched to solidjs, which is not compatible with vm-dom. I don't think you can use them together.
Maybe you can check the solid docs instead.

[WilliamStone]

Hi @WilliamStone , the latest generator-userscript has switched to solidjs, which is not compatible with vm-dom. I don't think you can use them together. Maybe you can check the solid docs instead.

@gera2ld Thank you for quick reply! You clarified things to me, now I understand that the right way to inject jsx element in solidjs is render(() => <div>hello</div>, document.body) and it's actually irrelevant to getPanel() used in generated example code, which led me to check VM.h stuff.