Use an intermediate exam format in rendering code

[sluukkonen]

Right now we use DOMParser for parsing the mastered exam XML and interpret the document with the help of the regular DOM API. While it is has been quite convenient from a development standpoint, since we have been able to use the full power of the DOM API for free, there are some downsides:

• Rendering an exam to HTML on the server is impossible, since it requires JSDOM and the JSDOM implementation isn't quite up to snuff. Particularly, the JSDOM implementation of querySelectorAll does not seem to work at all with namespaced XML elements.
• Rendering tests are slow, since we need to fire up a webpack-dev-server and use a real browser to execute the rendering code.
• XML attributes are stringly-typed.
• Offline exam rendering requires JavaScript to show anything but a blank page

As an alternative, we could translate the XML document to a JSON format, which would contain Elements and Nodes just like a regular XML document. That is, it would be isomorphic to real XML.

This would have a few upsides:

• We could render the exam to HTML with Node.js, since the rendering code wouldn’t be reliant on DOMParser and the DOM API.
• Offline exam HTML files could contain the pre-rendered "server-side" React-generated HTML for faster initial rendering and less reliance in JS in general.
• The attributes of elements could contain all JSON data types, not just strings.
• Rendering tests could be performed without starting a webpack server and a browser (i.e. they could be lightning fast).
• We could define TypeScript typings for the attributes of each exam element type. This would make the code more approachable, since one wouldn’t have to know that a particular exam element contains so-and-so attributes, the attributes of each element would be encoded directly in TypeScript types. We also wouldn’t have to coerce the attributes to the correct type everywhere.

The downside (apart from the work required) is that we would have to reinvent the wheel in some respects. We would have to implement our own functions for operations like “get the closest parent element like this” (Element.closest) and “query for elements like these in this subtree” (Element.querySelectorAll).

[sluukkonen]

This will partly be solved by #60. We still use DOM API's in rendering, but afterwards it will run with JSDOM.

[sluukkonen]

Sketched some possible implementations here:

https://www.typescriptlang.org/play/?ssl=38&ssc=5&pln=38&pc=88#code/C4TwDgpgBAogHgQwLYDkD2ATaBeKBnYAJwEsA7AcygB9ZEkYAbCJCU4KDqAKC7OAkIAzBAGNo8ZI2at2Aby6copZBABc+ImXILOylnjCiIAVQBKASXUESFHRwTBNAIwCu-PAH51aJwCsIIsB2UCIAFsQMGOhYeOoSqJgQANoAulwAvjx8AsJiUACaaFIsbFAQcPykGHi0kkwlcsF6EAZGZpZQAOShjmCqAPT9IAzEaGBgEQgEbgDWfGgAdILE-eXIC3B4GJ0cGVlsOUZQABoAEgAqALIAMsUyZRWs1bX09ffyis2tYu3q3b0DfoAdxBCyBAGYFmhCOR+gBGACcSP6cB6SAYnT2XEGUAAymgWFBiEgwG82A5RqQ8Pt+EIjgBFFwtYCUh6VZ6FO6lD66FR-ACOTIIlMxigczjcLXUPMUHAwxAMDAQIBQLiQTgEVk0tllnCQCDguJE0LUSjVGsIwUUguZlPMGHUpHNAmCmUUWOydLy53KwAAglSgQI2U8apyyY1PnyuvwKgBaBCBgSizjikiudzSq2cUCQP54LRMOMjUgQHY0TokMJx2PAFO6+WK5Wq9WajQ2bS6jj6w3Gwimp2ty1dqA24VoUj2x3O4ecN2cMIRKKJWJQVJQHEAYUTUH1hBmUGA4RqUygO+YYFAh5cpIgCyg52Pu4QMxaRKq5S0RPYADcBE40EqBYPQOL1oAAEUIMYMDQIFSADPAg0IEMqjDIoIygWR3SjFg-gwKCwBguCEyTQh6zPRx00lVcZVlRtSWbGctQ7bNuwNI0TWnIdWNHIUWQnKczW4xR5w4RdImiKUoEg6DYNIAB5S9KVSEDaVyCCCKIhSlInFCOXQ6RuSaaNOnw2TiLGfjSHItNiAzKTaMUSy7QdISLVdYJxOXGJ1DOK5bgjFTMi4XNxDoLlgBqXBGVtXSaB9CoEKQ6hpM0uSkuDGgZMIuTFKsngsBEJV+xCCcCDKCM4nCiNqS4RDiGAMIoAACggCMFmaABKTDPKmaBOjHKzOizEccQAaVIOTDzQKANSgGLx1IHjjSpNAmAWBg0HIVr2ts+y8AWHsOP7TqeKcfsXw8xQRD6mNfRIxDkxGrtxsmuDptm6AEv9UioFCAQ72Wsq1rvTbtrawzgAWPbqIWULTpHc6IEukTuGu27TLS4jE0esjnt1V6puAGa5uyrSMsIYCR0EaEWpW8rnN0tBBAqyGFi8yS8G6xzRv6KAJqJkmNPM7SrPvfJlQAQh467gfWsHmsZ0hocouzYaV+0Ea7USoEyYKgA

[sluukkonen]

As an alternative or an intermediate solution, we could just add dedicated parser functions for each element type. This way each component wouldn't have to parse the attributes manually.

As an example

function ExamQuestion({ element }: ExamComponentProps) {
  const { displayNumber, maxScore } = parseQuestionAttributes(element)
  …
}

where parseQuestionAttributes would be a function like (question: Element) => { displayNumber: string, maxScore?: number }. Each component could the destructure the result and use the values that they need.