Client script cannot be available in both main and admin?

magnusvhendin

So I'm having an issue which I hope you, the community, can shed some light on. I'm currently building a plugin to incorporate a external storage solution on Azure (not replacing post and topic file storage).

I made a client script that I want to be able to use both in the admin panel and in the forum views. I use define('my-thing/the-script') and add it to plugin.json under scripts.

But I cannot require it in the admin script. Not with require or by placing it in the define function.

I tried to add it in acpScript in plugin.json, but then everything broke.

My last attempt was to make a clone of the original script and appending it with -admin. So, script name, define name, everything. And it worked.

So I guess my question is: Is it not possible to add the same script to both backend and frontend. They both serve the same purpose so just duplicating it doesn't really make sense.

PitaJ

You're requiring it wrong. You should be doing require(['file-explorer'], ...) if you're defining the module as file-explorer.js in plugin.json.

Also, the define must match so define('file-explorer', ...). Or you can change them all to azure/ like so:

define('azure/file-explorer', ...)

require('azure/file-explorer', ...)

"modules": {
  "azure/file-explorer.js": "static/lib/file-explorer.js"
}

julian

@magnusvhendin that depends... Is it a require.js module? (I always forget whether that's AMD or UMD ..)

Instead of putting it in scripts or acpScripts in package.json, you can add it to modules instead. E.g.

{
    ...
    "modules": {
        "myModule.js": "path/to/module.js"
    }
    ...
}

From there, you can just require it in any client side or admin side script. Let me know how you get on

magnusvhendin

@julian, I tried what you suggested and I'm not sure I made a mistake but it doesn't seem like it's accepted as a module. I tried:

"modules": {
	"file-explorer.js": "static/lib/file-explorer.js"
},

and the require it require(['file-explorer.js'], (fileExplorer) => {...}, require(['file-explorer'], (fileExplorer) => {...} and require('file-explorer.js', (fileExplorer) => {...} but nothing seems to work.

It's defined like this:

define('azure/file-explorer', ['components'], function (components) {...});

also tried to do module.exports = fileExplorer without the define part.

Tried to require it with it's defined name azure/file-explorer, but no cigar. The fileExplorer comes out as undefined.

magnusvhendin

Only thing that seems to work is using define and placing it in either scripts or acpScripts, but not in both.

PitaJ

You're requiring it wrong. You should be doing require(['file-explorer'], ...) if you're defining the module as file-explorer.js in plugin.json.

Also, the define must match so define('file-explorer', ...). Or you can change them all to azure/ like so:

define('azure/file-explorer', ...)

require('azure/file-explorer', ...)

"modules": {
  "azure/file-explorer.js": "static/lib/file-explorer.js"
}

magnusvhendin

Thanks for the clarification @PitaJ! I did a lot of experimenting but I guess I didn't get the right combination. I think I never tried naming the module with its extension. That might have been it. For anyone who might be interested in the actual solution, here it is:

In file-explorer.js:

define('azure/file-explorer', ['components'], function (components) {
	const FileExplorer = {};

	FileExplorer.init = function () {
		// Init stuff here	
	});

	return FileExplorer;
});

In plugin.json:

"modules": {
	"azure/file-explorer.js": "static/lib/file-explorer.js"
},

In admin.js:

define('admin/plugins/azure', ['settings', 'azure/file-explorer'], function (settings, fileExplorer) {
	fileExplorer.init();
});

In main.js:

$(document).ready(function () {
	require(['azure/file-explorer'], (fileExplorer) => {
		fileExplorer.init();
	});
});