Skip to content

set up basic webpack config for sign-up.js (#43)

Jörg Richter requested to merge 43-webpack into main

@rsc the most possible minimal webpack config is now added.

The file sign-up.js is packed as a library which, when loaded via <script> tag (as sign-up-ui does) exposes one global object, su (="sign up") which holds all the exported functions/values.

The original sign-up.js, the webpack input, is now located in src/main/js/ and the webpack output is at the original place, src/main/resources-static/script/sign-up.js, so the URLs to access this script do not need to be adapted.

All tests run successfull and the UI should work like before.

Notes:

  • There is a 2nd webpack config webpack.sign-up.config.js and the build script (package.json) now runs 2 webpack tasks.
  • In the templates all calls/references to sign-up.js functions/values are now prefixed with su.
  • The sign-up.js exports are extended, so that all functions/values accessed by the templates/fragments are actually available.
  • src/main/resources-static/script/sign-up.js is now added to .gitignore as webpack output must not be added to the git repo.
  • sign-up.test.js imports the original sign-up.js, not the webpack output. The latter would not work.
  • Babel needed to be updated from 6 to 7 in order to transpile the optional chaining operator (?.)

FYI: flaws in the original sign-up.js code:

  • Using javascript: URLs is very old style. This is regarded not secure and should not be done anymore. Use DOM event handlers instead.
  • Also in event handlers javascript: prefix is sometimes used despite not needed, e.g. <form onsubmit="javascript:su.login()">. This might work but is invalid/quirky JS.
  • When the browser's form submit request needs to be suppressed there is still a superfluous action attribute with a silly "void function": action="javascript:su.voidFunction();. Instead the onsubmit handler should just return false, which suppresses the browser request.
  • These functions are never called: isValidUsername(), checkMailbox(), checkAgreements(), showLabsPrivateText(), showLabsTermsText().

Closes #43 (closed)

Merge request reports