Migration from Roots Sage 8.5.2 to 10

sage
1

Hello,

I am currently working on an upgrade from Roots Sage 8.5.2 to Sage 10 (latest version).
Everything was going well until I started working on the JS.

The structure of the main script and dependencies produces errors (old js) and I cannot afford to rewrite everything.

Ex :
app.js

(function($) {

// Use this variable to set up the common and page specific functions. If you
// rename this variable, you will also need to rename the namespace below.
var Sage = {
// All pages
‘common’: {
init: function() {
// Breakpoint
window.bp = new Breakpoint();

    window.cache = {
      $window: $(window),
      $document: $(document),
      $body: $('body'),
    };

    //---------
    // Header
    //---------
    var $header = $('[data-module="header"]');
    if ($header.length > 0) {
      new Header({
        $el: $header
      });
    }

//---------
// Init components
//---------
var $components = $(“[data-component]”);
$components.each(function(index){
var $el = $(this);
var comp = $el.data(‘component’);

      //Check if component exist
      if(typeof window.Components[comp] !== 'function') { 
        return;
      }
      
      // Component instantiation
      var obj = new window.Components[comp]($el);
      // Store instance in data
      $el.data('comp', obj);
    });

},
finalize: function() {
// JavaScript to be fired on all pages, after page specific JS is fired
}
},
};
})(jQuery); // Fully reference jQuery after this point.

breakpoint.js for example:

(function($) {

‘use strict’;

function Breakpoint() {
…
/* Namespace declaration */
window.Breakpoint = Breakpoint;

}(jQuery));

How would it be possible to keep the code almost the same and succeed to make it work with Roots Sage 10?
Would you please have any idea?
I tried several solutions but it implies to rewrite function as classes and it would not be possible.

Thank you

2

I don’t think there is anything that would cause errors exactly, if you’ve included all of the javascript from 8.5.

Although it won’t have the Class based dom loader classes (I think that was a thing back then)

Your code examples seem to break in and out of code blocks, and I don’t see any errors. What were the error messages you were getting.

1 Like
3

Hello,

I have progressed in the code debug and I noticed that the bud.config.js only include app.js.
But I would need to include all the JS files from the scripts folder as there are not imported via app.js.
I am looking into adding them to bud.config.js as dependencies or other way.
Would you have any idea ?

Thank you

4

If you don’t want to include them in app.js I would probably just suggest enqueuing them with WordPress like any resource.

Although if you need to build those js files then you would want to put additional entry in the bud config. and then call bundle('component1')->enqueue() in the wp_enqueue_scripts hook

This post about having various themes might help, I don’t know where the bundle exists in the docs, if it is in sage or bud. Managing Different builds - #7 by cim