Upgrading to latest Svelte version, 3.42.1

[jlwerenskjold]

I am interested in leveraging this in one of my projects and as part of learning how this works I wanted to try to update to the latest Svelte version.

I cloned the Svelte repo and built a new compiler.js file.
I then had to include some extra npm dependencies

    "acorn": "^8.4.1",
    "css-tree": "^1.1.2",
    "get-stdin": "^9.0.0",
    "jvm-npm": "^0.1.1",
    "magic-string": "^0.25.3",
    "rollup": "^2.56.2",
    "svelte": "^3.42.1",
    "url": "^0.11.0"

Now, I am a little stuck as this code returns an error when executing this code

Value app = context.eval("js", "(function(source){return compile(source,{generate:'ssr',format:'cjs'}).js.code;});");
String result = app.execute(source).asString();

It complains that "ReferenceError: self is not defined", which I believe means that the compile function can not be called in this way anymore. I would think it should be accessible as I can see exports.compile = compile; in the new compiler.js I created. I'm looking more into this now to see if i can find a solution but if anyone has an idea let me know!

[jlwerenskjold]

You can compile the compiler.js file bundled with acorn, css-tree, and the others if you set const is_publish = true; instead of const is_publish = !!process.env.PUBLISH; in svelte's rollup.config.js file. Did not fix the issue though.

[razshare]

I haven't tested it but it looks like it's complaining about the self keyword, most likely these two usages:

https://github.com/tncrazvan/java-springboot-svelte3-ssr-template/blob/45f67c1c46a6db29b8e117d0a449de139d0cdc42/compiler.js#L4

https://github.com/tncrazvan/java-springboot-svelte3-ssr-template/blob/45f67c1c46a6db29b8e117d0a449de139d0cdc42/compiler.js#L12-L13

Unless the compiler for the newer versions changed a lot, commenting out the first self that obtains the global scope variable and replacing the second self.performance.now(), with a default value should do the trick.

Note

I believe that graalvm announced some time ago that there's now experimental, but official support for NodeJS with all the C++ bindings.
The catch is that you have to do everything the other way around, you can't call NodeJS from Java but you can call Java from NodeJS it seems, and you get all the perks of require and even NPM.

Here's the reference: https://www.graalvm.org/reference-manual/js/

---

I won't close the issue yet, I'll try look into it when I get the time.

[jlwerenskjold]

Commenting out those 'self' references did the trick!

I am getting an error in the browser Uncaught ReferenceError: end_hydrating is not defined. I don't see any obvious effects of this error but I also don't know much about what hydration is and how it works (looking into it now). This is the simple svelte component that I compiled:

<script>
    let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>

Interesting stuff about the NodeJS support, do you think it would be better to implement the compiling of svelte components this way?

[razshare]

do you think it would be better to implement the compiling of svelte components this way?

In the future maybe not, depending on wether or not the GraalVM team will allow interoperability from Java directly to NodeJS.

At this moment, yes.

---

I just tested it and it works perfectly out of the box with the latest version of Svelte.
From what I've tested so far it looks like it could work with SvelteKit aswell (I'm not sure yet).

When I'm done I'll archive this repo and redirect you to the new project.

[razshare]

I put together a simple project using the mechanism I explained above: https://github.com/tncrazvan/svelte3jssr
It's actually using rollup in background (check the main.mjs file).

There's no magic happening with the "import" keyword this time, it's using modern javascript and it also is not using a modified svelte compiler, it's using the original one inside node_modules, so the newest versions should work just fine.

I've included a few recommendations for VScode plugins:

https://github.com/tncrazvan/Svelte3JSSR/blob/d197d40d4f6cd62f4b1a1de1e54ad52d91af013e/.vscode/settings.json#L7-L10

Those are the official recommended plugins from the GraalVM team and I also included the Lombok plugin so that Lombok beans would work (they don't work in VSCode by default).

You should get a popup in VSCode to install them when u open the editor.
You'll also be asked to install GraalVM if u don't have it.

After you've installed graalvm you need to install the NodeJS plugin for Graal.

Just execute<graal vm directory>/bin/gu install nodejs (or follow this guide: https://www.graalvm.org/reference-manual/js/#running-nodejs)

Run npm install and then npm start.

There's no development watcher yet, but you can disable this flag

https://github.com/tncrazvan/Svelte3JSSR/blob/d197d40d4f6cd62f4b1a1de1e54ad52d91af013e/main.mjs#L15

So that the server recompiles the component everytime.