Replace OC.generateUrl in vanilla JS

đź’» Development app dev
1

Hello

according to
https://docs.nextcloud.com/server/stable/developer_manual/app/upgrade-guide.html?highlight=generateurl
e.g. OC.generateURL should be replaced

OC.generateUrl : use generateUrl from @nextcloud/router - npm

Everything I can find in apps is using imports when using vue
how should I replace this in vanilla JS? not using any libraries?

2

Are you using some kind of bundler like rollup or webpack for your vanilla JS app? The package itself is not limited to vue but can be used with plain javascript as well of course.

3

Hallo Juluis,
at the moment, just plain JS.
any suggestion on how to do it in that case, or not possible?

4

I don’t see a way to do that easily without having some tool that pulls the library code into your app, so for now I’d either stick with the deprecated values or copy over the code from the libraries manually. The latter would of course be a bit risky as you would need to follow changes their manually.

5

just do understand it: the better approach would be via an include-way and a packager.
by this, during every app-release, the packager would pull the code at that point of time and ship it with the app. correct?

6

the better approach would be via an include-way and a packager.

Yes. That way you are no longer depending on the global server variables that might get removed at some point.

by this, during every app-release, the packager would pull the code at that point of time and ship it with the app. correct?

Kind of, the dependencies also have versions. You would have a list of dependencies in your package.json file which would then be installed with either npm or yarn for example. The bundler would then pick up the locally installed dependency version and replace import statements from your code with the library code basically.

I see that webpack might be a bit overkill here and is probably a bit to complex for just using plain JS, possible alternatives would be

Let me know if you have any further questions.

7

thank you for the explanation.
I am working with PHPStorm. I will see what integration is being offered there

8

Hello Julius,
one more on my local usability.

I put a package.json and added a

"dependencies": {
    "@nextcloud/router": "1.1.0"
  },

phpstorm is working with this and added a

import {generateUrl} from “@nextcloud/router”;

into the js file. the editor is fine now.
But I am testing the app with the very same code. Means, my PHPStorm is accessing/editing the app/audioplayer folder on the NC-Testinstance right away. but this I can make a change and test it right away.

But this is not working in this case, correct? because the app would need to be packaged each time?

9

Yeah, browsers are not able to resolve those out of the box. I must say I don’t have any experience with those tools in a Nextcloud environment.

Theoretically it should be possible to use snowpack to built a vendor.js file that is then used to import the npm dependencies globally for your app.

But this is not working in this case, correct? because the app would need to be packaged each time?

However I would probably more recommend to take a very basic webpack setup like in GitHub - nextcloud/app-tutorial: Tutorial app which is built in the tutorial and strip out all the vue stuff. Then you would of course need to either built this after every javascript change to get the bundle updated or use the npm run watch command, which will watch out for file changes and then built it automatically during development.