JS bundles of bundles in Plone 5.0.5

Esoth · July 29, 2016, 3:23pm

I have a package that uses the jquery upload js from blueimp and registers it with jsregistry.xml (plone-legacy), and then my own code that executes it. It works in Plone 5.0 but not in Plone 5.0.5 - no errors are thrown, but $('#myid').fileupload isn't defined, among other things.

Looking at the network tab I see that plone-legacy.js is no longer downloaded independently. I think all bundles that have the same conditions are being merged into a single file, default.js? I've had problems before where some js files don't place with others and I imagine something like that is happening here. If I switch to debug mode it seems to stop this merging behavior and all of my js works as expected.

There is a LOT going on here and in the past (Plone 4) I would probably just mark a particular js file as not-mergeable. The extra network call is normally trivial compared to the amount of development time required to be a javascript/requirejs expert. Is there a way to prevent a merge of the plone-legacy bundle with other bundles?

ebrehault · July 29, 2016, 4:00pm

That can be done in your profile, in registry.xml, you just need to re-declare the plone-legacy bundle like this:

github.com

plone/Products.CMFPlone/blob/master/Products/CMFPlone/profiles/dependencies/registry.xml#L1108


<?xml version="1.0"?>
<registry>
  <records interface="Products.CMFPlone.interfaces.IEditingSchema"
           prefix="plone" />
  <records interface="plone.i18n.interfaces.ILanguageSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IFilterSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IMaintenanceSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IMailSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.INavigationSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ISearchSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ISecuritySchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ISiteSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IDateAndTimeSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IMarkupSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IUserGroupsSettingsSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ISocialMediaSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ITypesSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.IImagingSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ILoginSchema"
           prefix="plone" />
  <records interface="Products.CMFPlone.interfaces.ILinkSchema"
           prefix="plone" />
  <record name="Products.CMFPlone.i18nl10n.override_dateformat.Enabled">
    <field type="plone.registry.field.Bool">
      <title>Enabled</title>
      <description>Override the translation machinery</description>
    </field>
    <value>False</value>
  </record>
  <record name="Products.CMFPlone.i18nl10n.override_dateformat.date_format_long">
    <field type="plone.registry.field.ASCIILine">
      <title>old ZMI property: localLongTimeFormat</title>
      <description>Default value: %Y-%m-%d %H:%M (2038-01-19 03:14)</description>
    </field>
    <value>%Y-%m-%d %H:%M</value>
  </record>
  <record name="Products.CMFPlone.i18nl10n.override_dateformat.date_format_short">
    <field type="plone.registry.field.ASCIILine">
      <title>old ZMI property: localTimeFormat</title>
      <description>Default value: %Y-%m-%d (2038-01-19)</description>
    </field>
    <value>%Y-%m-%d</value>
  </record>
  <record name="Products.CMFPlone.i18nl10n.override_dateformat.time_format">
    <field type="plone.registry.field.ASCIILine">
      <title>old ZMI property: localTimeOnlyFormat</title>
      <description>Default value: %H:%M (03:14)</description>
    </field>
    <value>%H:%M</value>
  </record>
  <record name="plone.app.layout.globals.bodyClass.depth">
    <field type="plone.registry.field.Int">
      <title>Body class path depth</title>
      <description>Depth relative the site root that body class are generated for.
      </description>
    </field>
    <value>4</value>
  </record>
  <record name="plone.app.portlets.PortletManagerBlacklist">
    <field type="plone.registry.field.List">
      <title>Toolbar Portlet Manager Blacklist</title>
      <description>A list of portlet manager names that will not be shown in the toolbar dropdown</description>
      <value_type type="plone.registry.field.TextLine" />
    </field>
    <value purge="false">
      <element>plone.dashboard1</element>
      <element>plone.dashboard2</element>
      <element>plone.dashboard3</element>
      <element>plone.dashboard4</element>
    </value>
  </record>
  <records interface="Products.CMFPlone.interfaces.syndication.ISiteSyndicationSettings" />


  <!-- Plone resource registry -->
  <record name="plone.resources.development">
    <field type="plone.registry.field.Bool">
      <title>Frontend development mode</title>
    </field>
    <value>False</value>
  </record>


  <!-- Plone generated resources -->
  <record name="plone.resources.configjs">
    <field type="plone.registry.field.ASCII">
      <title>config.js</title>
    </field>
    <value>config.js</value>
  </record>
  <record name="plone.resources.less-modify">
    <field type="plone.registry.field.ASCII">
      <title>less-modify js</title>
    </field>
    <value>less-modify.js</value>
  </record>
  <record name="plone.resources.less-variables">
      <field type="plone.registry.field.ASCII">
        <title>LESS variables js definer</title>
      </field>
      <value key="js">less-variables.js</value>
  </record>


  <!-- Mixins vars for less with the paths -->
  <record name="plone.lessvariables">
    <field type="plone.registry.field.Dict">
      <title>Less variables</title>
      <description>Variables that are going to be compiled on less</description>
      <key_type type="plone.registry.field.ASCIILine" />
      <value_type type="plone.registry.field.TextLine" />
    </field>
    <value>
      <element key="icon-font-path">\"../fonts/\"</element>
      <element key="bowerPath">\"{site_url}/++plone++static/components/\"</element>
      <element key="mockupPath">\"{site_url}/++resource++mockup/\"</element>
      <element key="mockuplessPath">\"{site_url}/++resource++mockupless/\"</element>


      <element key="plone-link-color">rgba(0,123,179,1)</element>
      <element key="plone-gray-lighter">lighten(#000, 80%)</element>
      <element key="plone-gray-light">lighten(#000, 46.5%)</element>


      <element key="plone-toolbar-bg">rgba(0,0,0,.9)</element>
      <element key="plone-toolbar-submenu-bg">rgba(45,45,45,.96)</element>
      <element key="plone-toolbar-submenu-width">180px</element>
      <element key="plone-toolbar-font-primary">Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif</element>
      <element key="plone-toolbar-font-secondary">Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif</element>
      <element key="plone-toolbar-separator-color">rgba(255,255,255,.17)</element>
      <element key="plone-toolbar-link">{plone-link-color}</element>
      <element key="plone-toolbar-text-color">rgba(255,255,255,1)</element>
      <element key="plone-toolbar-submenu-text-color">lighten(#000, 90%)</element>
      <element key="plone-toolbar-submenu-header-color">lighten(#000, 80%)</element>
      <element key="plone-toolbar-published-color">{plone-link-color}</element>
      <element key="plone-toolbar-draft-color">rgb(250,184,42)</element>
      <element key="plone-toolbar-pending-color">rgb(226,231,33)</element>
      <element key="plone-toolbar-private-color">rgb(196,24,60)</element>
      <element key="plone-toolbar-internal-color">rgb(250,184,42)</element>
      <element key="plone-toolbar-internally-published-color">rgb(136,61,250)</element>


      <element key="plone-screen-xs-min">480px</element>
      <element key="plone-screen-sm-min">768px</element>
      <element key="plone-screen-md-min">992px</element>
      <element key="plone-screen-lg-min">1200px</element>


      <element key="plone-left-toolbar-expanded">120px</element>
      <element key="plone-left-toolbar">60px</element>


      <element key="plone-container-sm">750px</element>
      <element key="plone-container-md">970px</element>
      <element key="plone-container-lg">1170px</element>


      <element key="plone-screen-xs-max">(@plone-screen-sm-min - 1)</element>
      <element key="plone-screen-sm-max">(@plone-screen-md-min - 1)</element>
      <element key="plone-screen-md-max">(@plone-screen-lg-min - 1)</element>


    </value>
  </record>




  <record name="plone.patternoptions">
    <field type="plone.registry.field.Dict">
      <title>Patterns configuration</title>
      <description>Base pattern configuration options</description>
      <key_type type="plone.registry.field.ASCIILine" />
      <value_type type="plone.registry.field.Text" />
    </field>
    <value>
      <element key="pickadate">{"date": {"selectYears": 200}, "time": {"interval": 5 } }</element>
      <element key="plone-modal">{"actionOptions": {"displayInModal": false}}</element>
    </value>
  </record>


</registry>

This file has been truncated. show original

but change the merge_with value to nothing (empty value), and plone-legacy will not be merged anymore.

Note: I would not recommend to put resources in plone-legacy (it works well with legacy Plone core stuff but not that much with add-ons). It is safer to declare actual resources, and it does not imply to be a RequireJS expert, see this example:

github.com

collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml

<?xml version="1.0"?>
<registry>

  <records prefix="plone.bundles/examplep4p5"
            interface='Products.CMFPlone.interfaces.IBundleRegistry'>
    <value key="enabled">True</value>
    <value key="jscompilation">++resource++example.p4p5/chart.js</value>
    <value key="csscompilation">++resource++example.p4p5/chart.css</value>
    <value key="last_compilation">2016-01-01 00:00:00</value>
    <value key="compile">False</value>
    <value key="depends">plone</value>
  </records>

</registry>