Possibility to select content elements to use

[mercs600]

To avoid imports all content elements to bundle we should add possibility to switch them.

[kubilaymelnikov]

@mercs600 that is already possible, you close the issue?

[mercs600]

@kubilaymelnikov now we can switch registerComponents option to disable import for all content elements (https://github.com/TYPO3-Initiatives/nuxt-typo3/blob/master/lib/options.js#L16) but we can't which single one we want to disable from import

[kubilaymelnikov]

@mercs600 this would be my first idea, would that be okay?

/nuxt-typo3/lib/templates/plugins/components.js

export default (context, { registerComponents }) => {
  Object.keys(components)
    .filter(
      key =>
        (typeof registerComponents === 'boolean' && !!registerComponents) ||
        (typeof registerComponents === 'object' &&
          Array.prototype.includes.call(registerComponents, key))
    )
    .forEach(key => {
      Vue.component(key, components[key])
    })
}

/nuxt-typo3/lib/options.js

export default {
  registerComponents: true,
  // or
  registerComponents: ['CeText']
}

[mercs600]

@kubilaymelnikov yes, but this is half-way solution because components are still imported in the bundle. We want to avoid them in the final bundle.

Thanks to this conditional we can avoid loading all components: https://github.com/TYPO3-Initiatives/nuxt-typo3/blob/master/lib/module.js#L70

In the nuxtjs module we can use lodash templates which is helpful to modify file content during the application build and I think we should use it to import components conditionally. https://nuxtjs.org/docs/2.x/directory-structure/modules#template-plugins

[kubilaymelnikov]

@mercs600 you mean something like this:

// variant 1

export default (context, { registerComponents }) => {
  <% _.forEach(registerComponents, function(component) { %>
    import <%- component %> from '~typo3/components/utilities/<%- component %>.vue'
    Vue.component('<%- component %>', <%- component %>)
  <% }); %>
}

// variant 2

export default (context, { registerComponents }) => {
  <% _.forEach(['CeText', 'CeHtml', 'all others'], function(component) { %>
    <% if (
      (typeof registerComponents === 'boolean' && !!registerComponents) ||
      (typeof registerComponents === 'object' && Array.prototype.includes.call(registerComponents, key))
    ) { %>
      import <%- component %> from '~typo3/components/utilities/<%- component %>.vue'
      Vue.component('<%- component %>', <%- component %>)
    <% } %>
  <% }); %>
}

I have only written this down and not tested it. I have not used lodash yet.

[mercs600]

@kubilaymelnikov That's what I meant - the second variant is ok where you can decide to register all content elements by boolean flag or you can choose what you want providing array.

[kubilaymelnikov]

@mercs600 it is not the most beautiful way... The large object bothers me, i would prefer to move this to another file.