Improving docs on how you can integrate other javascript projects

[jonathan-s]

Feature Request

The discussion that happens here -> #80. Can continue in this issue. Just a heads up @nerdoc

From a beginner's view (I'm not really a beginner, but not very fluent with Js/bundlers like webpack), it's hard to wrap one's head arount how things work with sockpuppet. All other solutions work the other way round. And again: I've searched more than a few years for this almost-perfect solution, using Django templates, and "responsive" UI with states kept at the backend.

But my main problem here - and this is where more docs would be very helpful - is, how to combine webpack (rollup, parcel, snowpack etc.) with django-sockpuppet. Because there is no easy way to combine their develeopment server output with sockpuppet... in a way I know of. I don't want to make a SPA, I'd like to keep state in Django/Python and use Dj.templates, and URL routing in Django.

But what is terribly needed is something like webcomponents, instead of doing repetitive blocks with divs/classes/styles again and again. You can create some easily with e.g. Svelte, but you have to compile them first. But How do I get them in to the mix with sockpuppet? There is a wc library named Shoelace, which works fine when including it using a CDN. But for applications that should work in a contained env (like an Intranet, without direct web access, or without wanting it to access external ressources) you hve to install this libs locally and bundle them.
But how do I bundle eg. Svelte, or even Vue.js, or Shoelace, with a bundler, use their components (or own built webcomponents) - AND use django-sockpuppet? Especially forms are not easy - they are completely different. Using dj-sp, you should use a normal

tag, with e.g. Shoelace there is a tag that behaves different, and data must be uploaded manually by Javascript.

If you give me a hint here, I could try to improve the dj-sp docs here too - if this is desired.

[DamnedScholar]

There are multiple topics here to pick apart. I have a fairly large project where I'm making extensive use of Sockpuppet in coordination with custom Stimulus controllers to manage user interactions and web components via LitElement. The controller and WC code get bundled by Webpack in the same manner as the demo Sockpuppet repo (with some modifications for my specific use case). I'm shipping each page with exactly the JS it needs to run, packaged modularly to maximize the ability of the browser cache to reuse code for components like search bars and document viewers that can appear in a variety of contexts. Here's an example of a document viewer built out of stacked iframes rendered in a shadow DOM with a native Django form that triggers a Reflex and serializes the data without ever triggering a new page load. Everything is still very WIP right now and I have styling and domain modeling specific to my project still incorporated with the generally reusable code, so until I get those things more separated and decide on a new permanent name for the repo this isn't a great example for new people to learn from, but it's heading in the direction of spawning multiple examples.

[DamnedScholar]

Because there is no easy way to combine their develeopment server output with sockpuppet... in a way I know of.

The setup found on this repository works fine unless you have dependencies that have special transpiler needs. In cases like Babel proposals or preprocessor languages, a custom Webpack setup is necessary. I have a working example of one such setup and have enough Webpack experience to talk other people through figuring out what rules they might require. @JulianFeinauer and I had some talks a few weeks ago about formalizing a process for Sockpuppet building via Webpack, which would tack a Webpack pipeline onto Django and make it accessible via management commands and maybe even admin features.