diff --git a/src/compiler/bundle/generate-bundles.ts b/src/compiler/bundle/generate-bundles.ts index 3b43e981ed6..715accbcdc9 100644 --- a/src/compiler/bundle/generate-bundles.ts +++ b/src/compiler/bundle/generate-bundles.ts @@ -261,14 +261,13 @@ export function setBundleModeIds(moduleFiles: ModuleFile[], modeName: string, bu } -export function getBundleId(config: Config, entryModules: EntryModule, modeName: string, jsText: string) { +export function getBundleId(config: Config, entryModule: EntryModule, modeName: string, jsText: string) { if (config.hashFileNames) { // create style id from hashing the content return config.sys.generateContentHash(jsText, config.hashedFileNameLength); } - const tags = entryModules.moduleFiles.map(m => m.cmpMeta.tagNameMeta); - return getBundleIdDev(tags, modeName); + return getBundleIdDev(entryModule, modeName); } @@ -277,8 +276,21 @@ export function getBundleIdHashed(config: Config, jsText: string) { } -export function getBundleIdDev(tags: string[], modeName: string) { - tags = tags.sort(); +export function getBundleIdDev(entryModule: EntryModule, modeName: string) { + const tags = entryModule.moduleFiles + .sort((a, b) => { + if (a.isCollectionDependency && !b.isCollectionDependency) { + return 1; + } + if (!a.isCollectionDependency && b.isCollectionDependency) { + return -1; + } + + if (a.cmpMeta.tagNameMeta < b.cmpMeta.tagNameMeta) return -1; + if (a.cmpMeta.tagNameMeta > b.cmpMeta.tagNameMeta) return 1; + return 0; + }) + .map(m => m.cmpMeta.tagNameMeta); if (modeName === DEFAULT_STYLE_MODE || !modeName) { return tags[0]; diff --git a/src/compiler/bundle/test/generate-bundles.spec.ts b/src/compiler/bundle/test/generate-bundles.spec.ts index 08d388ea97b..29a3706dcde 100644 --- a/src/compiler/bundle/test/generate-bundles.spec.ts +++ b/src/compiler/bundle/test/generate-bundles.spec.ts @@ -1,4 +1,4 @@ -import { Config, CompilerCtx, ComponentMeta, ModuleFile } from '../../../util/interfaces'; +import { CompilerCtx, ComponentMeta, Config, EntryModule, ModuleFile } from '../../../declarations'; import { DEFAULT_STYLE_MODE, ENCAPSULATION } from '../../../util/constants'; import { getBundleIdDev, getBundleIdHashed, injectComponentStyleMode } from '../generate-bundles'; import { mockStencilSystem } from '../../../testing/mocks'; @@ -17,14 +17,38 @@ describe('generate-bundles', () => { expect(id).toBe('l7xh'); }); + it('get bundle id and sort with collection dependencies at the end', () => { + const entryModule: EntryModule = { + moduleFiles: [ + { cmpMeta: { tagNameMeta: 'cmp-z' } }, + { cmpMeta: { tagNameMeta: 'cmp-x' } }, + { cmpMeta: { tagNameMeta: 'cmp-b' }, isCollectionDependency: true }, + { cmpMeta: { tagNameMeta: 'cmp-a' }, isCollectionDependency: true } + ] + }; + const id = getBundleIdDev(entryModule, null); + expect(id).toBe('cmp-x'); + }); + it('get bundle id from components and mode', () => { - const id = getBundleIdDev(['cmp-a', 'cmp-b'], 'ios'); + const entryModule: EntryModule = { + moduleFiles: [ + { cmpMeta: { tagNameMeta: 'cmp-a' } }, + { cmpMeta: { tagNameMeta: 'cmp-b' } } + ] + }; + const id = getBundleIdDev(entryModule, 'ios'); expect(id).toBe('cmp-a.ios'); }); it('get bundle id from components and default mode mode', () => { - const config: Config = {}; - const id = getBundleIdDev(['cmp-a', 'cmp-b'], null); + const entryModule: EntryModule = { + moduleFiles: [ + { cmpMeta: { tagNameMeta: 'cmp-a' } }, + { cmpMeta: { tagNameMeta: 'cmp-b' } } + ] + }; + const id = getBundleIdDev(entryModule, null); expect(id).toBe('cmp-a'); }); diff --git a/src/compiler/entries/entry-modules.ts b/src/compiler/entries/entry-modules.ts index 18a2dfc5e5e..4447b6625b1 100644 --- a/src/compiler/entries/entry-modules.ts +++ b/src/compiler/entries/entry-modules.ts @@ -157,9 +157,24 @@ export function createEntryModule(moduleFiles: ModuleFile[]) { }; // generate a unique entry key based on the components within this entry module - entryModule.entryKey = 'entry:' + entryModule.moduleFiles.map(m => { - return m.cmpMeta.tagNameMeta; - }).sort().join('.'); + + + entryModule.entryKey = 'entry:' + entryModule.moduleFiles + .sort((a, b) => { + if (a.isCollectionDependency && !b.isCollectionDependency) { + return 1; + } + if (!a.isCollectionDependency && b.isCollectionDependency) { + return -1; + } + + if (a.cmpMeta.tagNameMeta < b.cmpMeta.tagNameMeta) return -1; + if (a.cmpMeta.tagNameMeta > b.cmpMeta.tagNameMeta) return 1; + return 0; + }) + .map(m => { + return m.cmpMeta.tagNameMeta; + }).join('.'); // get the modes used in this bundle entryModule.modeNames = getEntryModes(entryModule.moduleFiles);