Child theme inheritance is very slow

[AlexBa]

Description
Today I have discovered a potential issue. After 15-20 hours research (no joke) in the previous months, I have finally found a way to create a child theme from a premium theme (Orion Theme in my case). This discussion helped me a lot and shows how to do this (language is german): https://forum.shopware.com/discussion/68431/child-theme-vererbung-tut-nicht

However, if I install my child theme, every page load takes about 5 minutes to complete! My child theme does not contain any twig templates, only the base.scss, overrides.scss & main.js files, which are completely empty.

If I change the theme back to the parent theme, everything is loading normally. It seems like the theme inheritance with a depth of 3 or more causes huge performance problems.

Here is my theme.json:

{
    "name": "CrehlerOrionChild",
    "author": "Child",
    "views": [
        "@Storefront",
        "@Plugins",
        "@CrehlerOrion",
        "@CrehlerOrionChild"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@CrehlerOrion",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@CrehlerOrion",
        "app/storefront/dist/storefront/js/crehler-orion-child.js"
    ],
    "asset": [
        "@CrehlerOrion",
        "app/storefront/src/assets"
    ],
    "config": {
         // Complete copy of all options from the parent theme
    }
}

Here my base plugin:

<?php declare(strict_types=1);

namespace CrehlerOrionChild;

use Shopware\Core\Framework\Plugin;
use Shopware\Storefront\Framework\ThemeInterface;

class CrehlerOrionChild extends Plugin implements ThemeInterface
{
    /**
     * @since 1.0.0
     *
     * @inheritdoc
     */
    public function getStorefrontScriptPath(): string
    {
        return 'Resources/dist/storefront/js';
    }
}

Does anyone have the same problem?

[almare]

Why do you use this part

   /**
     * @since 1.0.0
     *
     * @inheritdoc
     */
    public function getStorefrontScriptPath(): string
    {
        return 'Resources/dist/storefront/js';
    }

[AlexBa]

I thought it is required. I have never thought about it really oder read something else in the docs. Most of the plugins are still using these line of codes. It could be of course that I don't have to use this method. ;)

[almare]

* We removed the corresponding public functions in the `Bundle.php`:    
    * `getClassName`    
    * `getViewPaths`    
    * `getAdministrationEntryPath`  
    * `getStorefrontEntryPath`  
    * `getConfigPath`   
    * `getStorefrontScriptPath` 

...

Anyway I don't think this is part of your problem. I am wondering about this part.

    "views": [
        "@Storefront",
        "@Plugins",
        "@CrehlerOrion",
        "@CrehlerOrionChild"
    ],

This is how my theme looks like.

    "views": [
        "@Storefront",
        "@Plugins",
        "@CrehlerOrion"
    ],

I guess this is already working for you, right?

Maybe this is sufficant? Did you try this one in your child child theme.

    "views": [
        "@CrehlerOrion",
        "@CrehlerOrionChild"
    ],

[almare]

    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@CrehlerOrion",
        "app/storefront/src/scss/base.scss"
    ],

Why do you redeclare the parent child scss files here? Should it @CrehlerOrionChild

[AlexBa]

@almare My main goal with the "style" section is to add the "overrides.scss" to override some Bootstrap 4 variables.

This is the example from the docs:

{
  ...
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  ...
}

[AlexBa]

@almare I have added your suggestions with the view part of theme.json:

    "views": [
        "@CrehlerOrion",
        "@CrehlerOrionChild"
    ],

Unfortunately, I'm getting this error:

Maximum function nesting level of '256' reached, aborting!

[almare]

Does this part still looks like that?

    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@CrehlerOrion",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@CrehlerOrion",
        "app/storefront/dist/storefront/js/crehler-orion-child.js"
    ],
    "asset": [
        "@CrehlerOrion",
        "app/storefront/src/assets"
    ],
    "config": {
         // Complete copy of all options from the parent theme
    }

or like this

    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@CrehlerOrionChild",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@CrehlerOrionChild",
        "app/storefront/dist/storefront/js/crehler-orion-child.js"
    ],
    "asset": [
        "@CrehlerOrionChild",
        "app/storefront/src/assets"
    ],
    "config": {
         // Complete copy of all options from the parent theme
    }

[AlexBa]

@almare This is my current config after your suggestions:

{
    "name": "CrehlerOrionChild",
    "author": "Child",
    "views": [
        "@CrehlerOrion",
        "@CrehlerOrionChild"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@CrehlerOrion",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@CrehlerOrion",
        "app/storefront/dist/storefront/js/crehler-orion-child.js"
    ],
    "asset": [
        "@CrehlerOrion",
        "app/storefront/src/assets"
    ],
   "config": {
      // ...
   }
}

[almare]

No error message or compile time changes after that?

[AlexBa]

Only the "Maximum function nesting level" error.

There are no error messages or logs visible. Neither on a normal page reload, nor during theme compilation or cache clearing. It seems like there is no regular error which can be caught with Symfony or Shopware.

My feeling says that the template inheritance system loops too often throught the hierarchy and causing the performance problems. The "Maximum function nesting level" error could be an indicator.

[AlexBa]

Do you (or somebody else) have a smoothly running "child child theme"?

[almare]

No, just a child theme for the moment. Couldn't you set breakpoints to get a deeper view what's exactly causing this error?

[almare]

This looks also suspicious for me

    "asset": [
        "@CrehlerOrion",
        "app/storefront/src/assets"
    ],

Even in my child theme i didn't do that. My child theme:

    "asset": [
        "app/storefront/dist/assets"
    ],

and not

    "asset": [
        "@Storefront",
        "app/storefront/dist/assets"
    ],

So why should you do that in a child child theme?

[AlexBa]

OK, thank you for new code. I will run some tests later. If I get more info, I will post it here again.

[peterjaap]

This is the theme.json we use for a child's child theme;

{
    "name": "OurTheme",
    "views": [
        "@Storefront",
        "@3rdPartyTheme",
        "@OurTheme"
    ],
    "style": [
        "@Storefront",
        "app/storefront/src/scss/overrides.scss",
        "@3rdPartyTheme",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "@3rdPartyTheme",
        "app/storefront/dist/storefront/js/our-theme.js"
    ],
    "asset": [
        "@Storefront",
        "@3rdPartyTheme",
        "app/storefront/src/assets"
    ]
}

Seems to work fine, except for database config inheritance.

[AlexBa]

@peterjaap How fast are your loading times on the local machine. Which setup do you use?

[AlexBa]

I have switched from Mamp Pro to Valet and the loading times are much faster now .... except for the child child theme. I still have the same problem :)

It seems like some kind of recursion is working against me. It's hard to debug and I have some upcoming project deadlines, but I try to.

[peterjaap]

@AlexBa we're using https://github.com/JeroenBoersma/docker-compose-development for local development.

[almare]

@AlexBa One question. I don't see the entry @Plugins. Will this handled by the parent theme?

[MarcelSchmaeing]

Hello,

Within our company roadmap and work capacity, we try to address each bug or improvement request but admit that not each one will be resolved. To continue our culture of honesty and openness, we are closing this issue to focus on our roadmap on behalf of all Shopware users.

If you feel like this issue is still impacting you, please create a new issue and let us know. Thank you again for your valuable feedback.