SOLVED Client script cannot be available in both main and admin?

  • Swedes

    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.

  • Global Moderator

    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"
    }
    
  • GNU/Linux Admin

    @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 👍

  • Swedes

    @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.

  • Swedes

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

  • Global Moderator

    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"
    }
    
  • Swedes

    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();
    	});
    });
    

Suggested Topics

  • 5
  • 2
  • 2
  • 1
  • 4
| |