I have found existing JS package for photo collage that satisfies my needs @settlin/collage - npm
I am non-dev and I have no skills yet to integrate this package into weweb base component GitHub - weweb-assets/vue-starter to start using it in my app. But I feel like it’s not that hard because no need to do custom code for package, just to interpret input / output for this component etc…
I assume there are general rules how to bind “input variables” in the package and then bind output from package function…
If Weweb can make a step-by-step video tutorial of INTEGRATION of anything simple (like my example) and how to link this to weweb that would be super helpful for non-devs like me to start learning snd proceed with nocode development.
I’ve tried to figure out myself using documentation but I gave up(
This is a big misunderstanding: you don’t need to code the logic that is in already in the library but you do need to code everything that is necessary to connect that library to weweb and make it work in the editor.
It’s probably better to learn a bit of javascript and vue before approaching custom components because blindly copy-pasting a tutorial is not very helpful.
A good starting point is freeCodeCamp.
Anyway the code you are trying to integrate is meant to run on a server and would need at least some direct modifications to make it work in the browser.
It would be great to have a step-by-step tutorial into how to use a package via CDN.
I’ll take the Day.js package for example.
If you wanted to make a custom plugin/component (which I have no idea how to do, I just somewhat comprehend the underlying principles), you could use: npm install dayjs
Then, per their documentations you would use in your js scripts: const dayjs = require('dayjs') dayjs().format()
However, I know that packages like this can be used by simply inserting the following into the header of your page:
Using a CDN has many advantages regarding caching the scripts in your user’s browsers for future use etc… However, I have no idea how to use it in WeWeb. I have tried adding the script as custom code for the app, to no avail… and for an individual page into the header as well, in vain.
How do I get it to work? Do I have to add a workflow with custom js code that initiates const dayjs = require('dayjs') ? If using a workflow for this, is this now initiated everywhere in the app? Would packages initiated in a workflow be globally accessible if I use it in the formula for a text element somewhere else?
If I don’t initialise the CDN script inside a workflow with a “Custom JS” action, would doing it in a bound formula work? Again, would that create global variables or would they only work inside the enclosed formula attached to the element you are currently modifying?
How do the scopes of const, let and var work inside WeWeb - would const indeed make a global formula useable somewhere else?
This is what I meant regarding learning more about how JavaScript is used in WeWeb:
I can see how a tutorial for the above, i.e. for how to use a simple cdn script tag in the header and how to use it/troubleshoot it in WeWeb would go an immense way in helping users use packages they find online. That is, until WeWeb implements their own way of importing packages in the editor for their users (as per the roadmap if I recall correctly).
Edit: Also - require() doesn’t exist in plain JS, so then you would need a plugin?
I can see your confusion, but most of your question are answered by studying javascript and having experience with the tooling and ecosystem. Weweb is a web app made with javascript, no special rules about it.
Needless to say that the weweb team already implemented dayjs as a plugin.
