Merge branch '1831-clientcomponents' into 'master'

Send paths of client components and wait for them to load

Closes #1831

See merge request Isleward/isleward!563

.gitlab-ci.yml

@@ -16,7 +16,7 @@ audit:
 lint-server:
   stage: test
   script:
-    - npm install eslint eslint-plugin-prettier prettier babel-eslint
+    - npm install eslint eslint-plugin-prettier prettier babel-eslint eslint-plugin-requirejs
     - cd src/server
     - ../../node_modules/.bin/eslint . 
   only:

src/client/js/components/components.js

@@ -1,50 +1,15 @@
-let components = [
-	'keyboardMover',
-	'mouseMover',
-	'touchMover',
-	'player',
-	'pather',
-	'attackAnimation',
-	'lightningEffect',
-	'moveAnimation',
-	'bumpAnimation',
-	'animation',
-	'light',
-	'lightPatch',
-	'projectile',
-	'particles',
-	'explosion',
-	'spellbook',
-	'inventory',
-	'stats',
-	'chest',
-	'effects',
-	'quests',
-	'events',
-	'resourceNode',
-	'gatherer',
-	'stash',
-	'flash',
-	'chatter',
-	'dialogue',
-	'trade',
-	'reputation',
-	'serverActions',
-	'social',
-	'passives',
-	'sound',
-	'whirlwind',
-	'fadeInOut'
-].map(function (c) {
-	return 'js/components/' + c;
-});
-
 define([
-	...components, 
-	'../system/events'
-], function () {
-	const events = arguments[arguments.length - 1];
-	
+	'js/system/events',
+	'js/system/globals'
+], function (
+	events,
+	globals
+) {
+	//Store templates here after loading them
+	const templates = [];
+	const extenders = [];
+
+	//Bound Methods
 	const hookEvent = function (e, cb) {
 		if (!this.eventList[e])
 			this.eventList[e] = [];
@@ -59,30 +24,54 @@ define([
 		});
 	};
 
-	let templates = {};
+	//Helpers
+	const loadComponent = cpn => {
+		return new Promise(res => {
+			require([cpn.path], tpl => {
+				if (cpn.type)
+					templates.push(tpl);
+				if (cpn.extends)
+					extenders.push(tpl);
+				
+				res();
+			});
+		});
+	};
 
-	[].forEach.call(arguments, function (t, i) {
-		//Don't do this for the events module
-		if (i === arguments[2].length - 1)
-			return;
+	//Init Methods
+	const loadComponents = paths => {
+		return Promise.all(
+			paths.map(p => loadComponent(p))
+		);
+	};
+	
+	const buildComponents = () => {
+		templates.forEach(t => {
+			const extensions = extenders.filter(e => e.extends === t.type);
 
-		t.eventList = {};
-		t.hookEvent = hookEvent;
-		t.unhookEvents = unhookEvents;
+			extensions.forEach(e => $.extend(true, t, e));
 
-		templates[t.type] = t;
-	});
+			t.eventList = {};
+			t.hookEvent = hookEvent;
+			t.unhookEvents = unhookEvents;
+		});
+	};
 
+	//Export
 	return {
+		init: async function () {
+			const paths = globals.clientConfig.clientComponents;
+
+			await loadComponents(paths);
+
+			buildComponents();
+		},
+
 		getTemplate: function (type) {
 			if (type === 'lightpatch')
 				type = 'lightPatch';
 
-			let template = templates[type] || {
-				type: type
-			};
-
-			return template;
+			return templates.find(t => t.type === type) || { type: type };
 		}
 	};
 });

src/client/js/main.js

@@ -10,6 +10,7 @@ define([
 	'js/resources',
 	'js/sound/sound',
 	'js/system/globals',
+	'js/components/components',
 	'ui/templates/online/online',
 	'ui/templates/tooltips/tooltips'
 ], function (
@@ -23,7 +24,8 @@ define([
 	events,
 	resources,
 	sound,
-	globals
+	globals,
+	components
 ) {
 	let fnQueueTick = null;
 	const getQueueTick = updateMethod => {
@@ -69,6 +71,8 @@ define([
 			globals.clientConfig = config;
 
 			await resources.init();
+			await components.init();
+			
 			events.emit('onResourcesLoaded');
 
 			this.start();

src/server/clientComponents/.eslintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "../../client/.eslintrc"
+}

src/server/config/clientConfig.js

@@ -1,6 +1,7 @@
 const imageSize = require('image-size');
 
 const events = require('../misc/events');
+const fileLister = require('../misc/fileLister');
 const tos = require('./tos');
 
 const config = {
@@ -197,6 +198,7 @@ const config = {
 		player: [],
 		npc: []
 	},
+	clientComponents: [],
 	sounds: {
 		ui: []
 	},
@@ -207,6 +209,18 @@ module.exports = {
 	config,
 
 	init: async function () {
+		fileLister.getFolder('./clientComponents').forEach(f => {
+			if (!f.endsWith('.js')) return;
+
+			const type = f.split('.')[0];
+			const path = 'server/clientComponents/' + f;
+
+			config.clientComponents.push({
+				type,
+				path
+			});
+		});
+
 		events.emit('onBeforeGetClientConfig', config);
 
 		//Deprecated

src/server/server/requestHandlers.js

@@ -11,13 +11,17 @@ const appFile = (req, res) => {
 	let file = req.params[0];
 	
 	file = file.replace('/' + root + '/', '');
-	
+
 	const validRequest = (
 		root !== 'server' ||
-			(
-				file.includes('mods/') &&
-				validModPatterns.some(v => file.includes(v))
-			)
+		(
+			root === 'server' &&
+			file.startsWith('clientComponents/')
+		) ||
+		(
+			file.includes('mods/') &&
+			validModPatterns.some(v => file.includes(v))
+		)
 	);
 	
 	if (!validRequest)