vit-1 / homm

Vue pet project with xml/xslt and local static files

Pet project to make Vue SPA without NodeJS bundlers, but XSLT "bundling" and JohnnyDepp dependencies library. Just download ZIP, extract in on your drive and click on index.html, and it's ready!

Disclaimer: All Heroes of Might & Magic 3 images and audio files used in this project belong to 3DO (now owned by Ubisoft) and New World Computing. No code from the original game was used.

Browsers support

These browsers can display XML-translation with local files:

• IE11,
• Google Chrome with command line --allow-file-access-from-files --process-per-site
• Opera can run local files with --disable-web-security --user-data-dir="d:\my-root-dev-folder"

XSLT version

On client side we have support only XSLT 1.0 (browsers) but we have 3.0 specification already but server side or as js library with SaxonJS.

Content includes

HTML ENTITES (may be in dtd-files) for jsons and xsl-variables for including xml data from multiple xml-files (x-templates for components). Including ENTITIES into XML is blocked by Firefox due to potential recursion vulnerability. Using special characters in XML.

fetch can't load local files and request.open can't access local files, but can with File API or ActiveX object (ActiveX with jQuery 1.12.4). Therefore this project can't use module loader like SystemJS and ie1-custom-properties polyfill =(

• css-vars-ponyfill and ie11-custom-properties polyfill are not support local files.
• css-vars-ponyfill is support only root variables.

Dynamic js loading

headjs > scriptjs > loadjs > johnnydepp used for loading script dependencies without using NodeJS.

• HeadJS has css overhead.
• ScriptJS can load only scripts (can't css links)
• LoadJS can load js and css files. It is more popular than JohnnyDepp.
• JohnnyDepp is almost the same as LoadJS but with new API and support Browserify needs to transpile modules, that's why I don't use it.

Vue

All Vue components located in xsl/html/body/main folder, registered globally to avoid subcomponent dependencies.

Forced to use deprecated slot attribute for named slots, because v-slot isn't supported strict xhtml attribute-value setting as v-bind = {data: data} workaround does (need additional curly braces in xslt). Solved with custom namespace:

<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:v-slot="https://v2.vuejs.org/v2/api/#v-slot"
	exclude-result-prefixes="v-slot">

The code still use deprecated this.$scopedSlots for renderless component. Without Vue3 but with Composition API Vue2, can we get rid of the obsolete?

Vuex

Vuex store consists of modules:

• spells (by reading json included into DOM)
• magic-book state of filtering

Root store saved to homm.store.

Vue-router

Used in history mode, without hash, but query.

i18n

Hard-coded internationalization by html@lang attribute and additional i18n.xsl. Vue code should be as simple as possible, without additional code about i18n!

Linting

This project isn't using NodeJS, that's why isn't linted. You can see my another project with linting (even html) and NodeJS setup. ESLint in browser? Can be with Browserify, but Browserify uses NodeJS...

TDD, unit testing

We have only one client-side (supports IE11, can start with local files and without NodeJS) framework: Jasmine 3.99 standalone. All components tests we can run by xsl/html/body/main/spec.xml. Individual components tests we can run by *.spec.xml located near component template file. Specs expectation API shoud be consistent with Jest API.

If you interested in Jest on NodeJS setup, you can see another my project.

Modules

This project is supported IE11, that's why it can be only SystemJS option, but this project is experimental setup without NodeJS scripting.

Further reading

• XSLT Entites/dtd (rus).
• xmlns
• xmlns: for declaring xml attributes with : not only for v-bind, but for v-slot also.