WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 13 months ago

#36774 reopened enhancement

Wrong JQuery UI AMD support

Reported by: Andrei Kazakou Owned by:
Milestone: 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
4 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
4 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 4 years ago by Andrei Kazakou (previous) (diff)

#3 @ocean90
4 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
4 years ago

I doesn't ask you enable support of RequireJS. I just hate Wordpress for his ugly architecture and "we can't do something because our product piece of shit". Thanks for responding.

Version 0, edited 4 years ago by Andrei Kazakou (next)

#5 @Andrei Kazakou
4 years ago

  • Resolution wontfix deleted
  • Status changed from closed to reopened

#6 @SergeyBiryukov
4 years ago

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