fix: loop and iterate entry tags

[zackspear]

• What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)

Fix for #521

• What is the new behavior (if this is a feature change)?

Multiple entry tags should now work

[ThornWalli]

@zackspear Was my first thought too 🙃

Unfortunately we have to note one thing, the import between async and not async is different.

Therefore there was an extra counter (i) in the loop for not async.
Because only the not async has a fixed import with variable.

Do you want to adjust this again?

<% let i = 0; %><%= options.tags.map(function ({ async, name, path }) {
  let tag;
  if (async) {
    tag = `    ['${name}', defineAsyncComponent(() => { return import('${path}').then(module => (typeof module.default === 'function' ? (new module.default).$options : module.default) ); })]`;
  } else {
    tag = `    ['${name}', (typeof Component${i} === 'function' ? (new Component${i}).$options : Component${i})]`;
    i++;
  }
  return tag;
 }).join(',\n') %>

The i++ must come before the return 🙂

[zackspear]

@ThornWalli ah ok. Maybe you're wanting something like this? If so I can make another commit with this in the PR 😄

This seems to work in my local test environment.

import { defineAsyncComponent, defineCustomElement } from 'vue'

<%= options.tags.filter(function ({ async }) { return !async; }).map(({ path }, i) => `import Component${i} from '${path}';`).join('\n') %>

const defineTags = () => {
  const elements = [
<% let i = 0; %><%= options.tags.map(function ({ async, name, path }) {
  let tag;
  if (async) {
    tag = `    ['${name}', defineAsyncComponent(() => { return import('${path}').then(module => (typeof module.default === 'function' ? (new module.default).$options : module.default) ); })]`;
  } else {
    tag = `    ['${name}', (typeof Component${i} === 'function' ? (new Component${i}).$options : Component${i})]`;
  }
  i++;
  return tag;
 }).join(',\n') %>
  ].forEach(([name, component]) => {
    const CustomElement = defineCustomElement(component);
    window.customElements.define(name, CustomElement);
  })
};

const setup = () => {
  defineTags();
};

setup();

[ThornWalli]

The i++ must be in the else :)

You can set the first component to async: true for example.

When the PR is adjusted, I merge it in.

import { defineAsyncComponent, defineCustomElement } from 'vue'

<%= options.tags.filter(function ({ async }) { return !async; }).map(({ path }, i) => `import Component${i} from '${path}';`).join('\n') %>

const defineTags = () => {
  const elements = [
<% let i = 0; %><%= options.tags.map(function ({ async, name, path }) {
  let tag;
  if (async) {
    tag = `    ['${name}', defineAsyncComponent(() => { return import('${path}').then(module => (typeof module.default === 'function' ? (new module.default).$options : module.default) ); })]`;
  } else {
    tag = `    ['${name}', (typeof Component${i} === 'function' ? (new Component${i}).$options : Component${i})]`;
    i++;
  }
  return tag;
 }).join(',\n') %>
  ].forEach(([name, component]) => {
    const CustomElement = defineCustomElement(component);
    window.customElements.define(name, CustomElement);
  })
};

const setup = () => {
  defineTags();
};

setup();

[github-actions]

🎉 This PR is included in version 2.0.0-beta.13 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀