Improve webpack config

[alexander-heimbuch]

The publisher uses laravel mix for webpack abstraction to build the javascript assets. This abstraction limits the abilities of independent applications.

Acceptance Criteria:

• Webpack config is done without laravel mix
• Each micro app has it's own entry point
• Asset loading depends on php inclusion
• Documentation how to add a new app / integration points

[alexander-heimbuch]

We might also need to migrate existing jQuery code to VueJS, would simplify the migration.

[eteubert]

Would love to use TailwindCSS and https://headlessui.dev (for vue) but that requires vue3 and I don't think I can or should squeeze that into the current laravel-mix setup. $prio++

Are you planning to build a webpack config by hand or something like vite / Snowpack / whatever?

[alexander-heimbuch]

Depends on the migration path for existing jQuery code. That might be tricky to bundle with vite. Worst case we will have our own webpack config.

[eteubert]

Had a quick look, there are ~2.000 lines of jQuery-style-JS. I don't think it's a realistic goal to rewrite all of this in one big swoop.

[eteubert]

First ~200 lines file done :) Some thoughts:

• https://github.com/nefe/You-Dont-Need-jQuery is very helpful
• don't use .innerHTML for writing, it kills events on adjacent elements, use .insertAdjacentHTML instead
• the guide above recommends el.parentNode.removeChild(el); for removing elements, however I found that el.remove() works as well; at least I haven't run into any side-effects

CSS Selector hiccups

Selecting by data attributes requires quotes around the values

--- el.querySelector("li a[data-id=" + id + "]")
+++ el.querySelector("li a[data-id='" + id + "']")

Use :first-child instead of :first

--- el.querySelector("li a:first")
+++ el.querySelector("li a:first-child")

Example fetch POST request:

fetch(ajaxurl, {
    method: 'POST',
    body: new URLSearchParams({action: 'podlove-action-name', id: template_id})
})
.then((response) => response.json())
.then((data) => {
    // handle json response
})

Example fetch GET request:

const params = new URLSearchParams({
    id: template_id,
    action: 'podlove-template-get'
});

fetch(ajaxurl + '?' + params.toString())
.then((response) => response.json())
.then((data) => {
  // handle json response
})