WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 23 months ago

#36774 reopened enhancement

Wrong JQuery UI AMD support

Reported by: Andrei Kazakou Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: External Libraries Keywords:
Focuses: Cc:

Description

After integration of Reuire.js into theme, i found some interested problem. When system include JQuery UI scripts with Require.js support, i catch the error for not existed modules.

Looks in the /wp-includes/js/jquery/ui/ directory i found some files with AMD loading support, but with wrong module names in depending modules.

For example file wp-includes/js/jquery/ui/accordion.min.js contain this substring

define(["jquery","./core","./widget"],a)

but Require.js can't find core or wodget modules. It happen, because by default this modules in wordpress area have names likes "jquery-ui-core" and "jquery-ui-widget"

Please, change all lines in JS files to correct module names, like

define(["jquery","jquery-ui-core","jquery-ui-widget"],a)

Change History (6)

#1 @swissspidy
2 years ago

  • Type changed from defect (bug) to enhancement

Hey there, welcome to trac and thanks for creating a ticket!

These minified JavaScript files are generated during build from the source files, which already include these lines (define(["jquery","./core","./widget"]…)). The source files are the ones you could download on the jQuery UI website. We usually try to avoid editing third-party files.

jquery-ui-widget is only the name of the handle needed for wp_enqueue_script(). How would this affect RequireJS? Would you mind sharing some example code to highlight the problem?

#2 @Andrei Kazakou
2 years ago

I catched this problem, when i tryed integrate Visual Composer plugin into my own theme with RequireJS. It means, whn i try open Frontend Editor from VC plugin, it trying load UI plugins from existing theme. My code catch all wp_enque_script calls and generate RequireJS config for loading javascript files.

<?php

/**
 * That class provide functional for difficult theme settings
 */
class ThemeSettings {

    /**
     * Instance of current class
     * @var \ThemeSettings
     */
    protected static $_instance;

    /**
     * Containd describe for RequireJS configuration
     * @var array[]
     */
    protected $_scripts = array();

    /**
     * Disallow native creation of object
     */
    protected function __construct() {}

    /**
     * Generate and return instance of current class
     * @return \ThemeSettings
     */
    public static function getInstance() {
        if (empty(self::$_instance)) {
            self::$_instance = new ThemeSettings();
        }

        return self::$_instance;
    }

    /**
     * Add describe of javascript to RequireJS config
     * @param string $handle
     * @param string[] $script
     */
    public function addScript($handle, $script) {
        $this->_scripts[$handle] = $script;
    }

    /**
     * Generate config for RequireJS loader
     * @return stdClass
     */
    public function getRequirejsConfig() {
        $config = (object) array('waitSeconds' => 30,'paths' => (object) array(), 'shim' => (object) array());
        foreach ($this->_scripts as $handle => $script) {
            $config->paths->{$handle} = $script->src;

            if (!empty($script->deps)) {
                $config->shim->{$handle} = $script->deps;
            }
            
            switch($handle) {
                case 'admin-bar': 
                    $config->shim->{$handle} = array('jquery');
                    break;
            }
        }

        return $config;
    }
    
    /**
     * Get all JS scripts description
     * @return type
     */
    function getScripts() {
        return $this->_scripts;
    }
}


/* Delayed loading of all JS files */
add_filter('script_loader_tag', function($tag, $handle, $src) {
    if (isAdmin()) return $tag;

    global $wp_scripts;
    ThemeSettings::getInstance()->addScript($handle, (object)array(
        'deps' => $wp_scripts->query($handle, 'registered')->deps,
        'src' => $src,
        'tag' => $tag
    ));

    return '';
}, 10, 3);

But when i catch standart the JQuery UI scripts, it try load modules with RequireJS supports and can't find these modules.

I propose to you recompile JQuery UI files with naming modules like it named in WordPress.

Last edited 2 years ago by Andrei Kazakou (previous) (diff)

#3 @ocean90
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed
  • Version 4.5.1 deleted

Core doesn't officially support RequireJS. I suggest to have a simple array in your class which maps a jQuery handle to its corresponding file.

#4 @Andrei Kazakou
2 years ago

Please, be careful. Problem not in correct loadin of files. Problem in contain of wordpress javascript file in /wp-include/ directory. When RequireJS try load javascript file, and in that javascript file we have defined "define" function it will be executed. But your javascript file contain wrong paths to modules.

Last edited 2 years ago by Andrei Kazakou (previous) (diff)

#5 @Andrei Kazakou
2 years ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened

#6 @SergeyBiryukov
23 months ago

  • Component changed from General to External Libraries
  • Milestone set to Awaiting Review
Note: See TracTickets for help on using tickets.