fix(compiler): fix circular dependency with @app-globals

package.json

@@ -152,6 +152,7 @@
     "preset": "./testing/jest-preset.js",
     "moduleNameMapper": {
       "@app-data": "<rootDir>/internal/app-data/index.js",
+      "@app-globals": "<rootDir>/internal/app-globals/index.js",
       "@compiler": "<rootDir>/compiler/index.js",
       "@mock-doc": "<rootDir>/mock-doc/index.js",
       "@platform": "<rootDir>/internal/testing/index.js",

scripts/bundles/helpers/jest/jest-preset.js

@@ -15,6 +15,7 @@ module.exports = {
     "^@stencil/core/cli$": path.join(rootDir, 'cli', 'index_legacy.js'),
     "^@stencil/core/compiler$": path.join(rootDir, 'compiler', 'index.js'),
     "^@stencil/core/internal/app-data$": path.join(internalDir, 'app-data', 'index.js'),
+    "^@stencil/core/internal/app-globals$": path.join(internalDir, 'app-globals', 'index.js'),
     "^@stencil/core/internal/platform$": path.join(internalDir, 'testing', 'index.js'),
     "^@stencil/core/internal/runtime$": path.join(internalDir, 'runtime', 'index.js'),
     "^@stencil/core/mock-doc$": path.join(rootDir, 'mock-doc', 'index.js'),

scripts/bundles/plugins/alias-plugin.ts

@@ -7,6 +7,7 @@ export function aliasPlugin(opts: BuildOptions): Plugin {
 
   const alias = new Map([
     ['@app-data', '@stencil/core/internal/app-data'],
+    ['@app-globals', '@stencil/core/internal/app-globals'],
     ['@hydrate-factory', '@stencil/core/hydrate-factory'],
     ['@mock-doc', '@stencil/core/mock-doc'],
     ['@platform', '@stencil/core/internal/platform'],

src/app-data/index.ts

@@ -62,6 +62,4 @@ export const BUILD: BuildConditionals = /* default */ {
   cloneNodeFix: false,
 };
 
-export const globalScripts = /* default */ () => {/**/};
-
 export const NAMESPACE = /* default */ 'app' as string;

src/app-globals/index.ts

@@ -0,0 +1 @@
+export const globalScripts = /* default */ () => {/**/};

src/client/index.ts

@@ -9,4 +9,4 @@ export * from './client-task-queue';
 export * from './client-build';
 export * from './import-shims';
 export * from '@runtime';
-export { BUILD, NAMESPACE, globalScripts } from '@app-data';
+export { BUILD, NAMESPACE } from '@app-data';

src/compiler/component-lazy/generate-lazy-app.ts

@@ -91,7 +91,9 @@ async function bundleLazyApp(config: d.Config, compilerCtx: d.CompilerCtx, build
 }
 
 const BROWSER_ENTRY = `
-import { bootstrapLazy, globalScripts, patchBrowser } from '@stencil/core/internal/client';
+import { bootstrapLazy, patchBrowser } from '@stencil/core/internal/client';
+import { globalScripts } from '@stencil/core/internal/app-globals';
+
 patchBrowser().then(options => {
   globalScripts();
   return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);
@@ -100,7 +102,8 @@ patchBrowser().then(options => {
 
 // This is for webpack
 const EXTERNAL_ENTRY = `
-import { bootstrapLazy, globalScripts, patchEsm } from '@stencil/core/internal/client';
+import { bootstrapLazy, patchEsm } from '@stencil/core/internal/client';
+import { globalScripts } from '@stencil/core/internal/app-globals';
 
 export const defineCustomElements = (win, options) => {
   return patchEsm().then(() => {

src/compiler_next/bundle/app-data-plugin.ts

@@ -2,7 +2,7 @@ import * as d from '../../declarations';
 import MagicString from 'magic-string';
 import { normalizePath } from '@utils';
 import { Plugin } from 'rollup';
-import { STENCIL_APP_DATA_ID, STENCIL_INTERNAL_CLIENT_ID, STENCIL_INTERNAL_HYDRATE_ID } from './entry-alias-ids';
+import { STENCIL_APP_DATA_ID, STENCIL_INTERNAL_CLIENT_ID, STENCIL_INTERNAL_HYDRATE_ID, STENCIL_APP_GLOBALS_ID } from './entry-alias-ids';
 
 
 export const appDataPlugin = (config: d.Config, compilerCtx: d.CompilerCtx, build: d.BuildConditionals, platform: 'client' | 'hydrate' | 'worker'): Plugin => {
@@ -17,7 +17,7 @@ export const appDataPlugin = (config: d.Config, compilerCtx: d.CompilerCtx, buil
     name: 'appDataPlugin',
 
     resolveId(id) {
-      if (id === STENCIL_APP_DATA_ID) {
+      if (id === STENCIL_APP_DATA_ID || id === STENCIL_APP_GLOBALS_ID) {
         if (platform === 'worker') {
           this.error('@stencil/core packages cannot be imported from a worker.');
         }
@@ -27,11 +27,15 @@ export const appDataPlugin = (config: d.Config, compilerCtx: d.CompilerCtx, buil
     },
 
     load(id) {
+      if (id === STENCIL_APP_GLOBALS_ID)  {
+        const s = new MagicString(``);
+        appendGlobalScripts(globalPaths, s);
+        return s.toString();
+      }
       if (id === STENCIL_APP_DATA_ID) {
         const s = new MagicString(``);
         appendNamespace(config, s);
         appendBuildConditionals(config, build, s);
-        appendGlobalScripts(globalPaths, s);
         return s.toString();
       }
       return null;

src/compiler_next/bundle/entry-alias-ids.ts

@@ -1,6 +1,7 @@
 
 export const STENCIL_CORE_ID = '@stencil/core';
 export const STENCIL_APP_DATA_ID = '@stencil/core/internal/app-data';
+export const STENCIL_APP_GLOBALS_ID = '@stencil/core/internal/app-globals';
 export const STENCIL_HYDRATE_FACTORY_ID = '@stencil/core/hydrate-factory';
 export const STENCIL_INTERNAL_CLIENT_ID = '@stencil/core/internal/client';
 export const STENCIL_INTERNAL_HYDRATE_ID = '@stencil/core/internal/hydrate';

src/compiler_next/output-targets/dist-custom-elements-bundle/index.ts

@@ -5,7 +5,7 @@ import { catchError, dashToPascalCase, hasError } from '@utils';
 import { getBuildFeatures, updateBuildConditionals } from '../../build/app-data';
 import { isOutputTargetDistCustomElementsBundle } from '../../../compiler/output-targets/output-utils';
 import { nativeComponentTransform } from '../../../compiler/transformers/component-native/tranform-to-native-component';
-import { STENCIL_INTERNAL_CLIENT_ID, USER_INDEX_ENTRY_ID } from '../../bundle/entry-alias-ids';
+import { STENCIL_INTERNAL_CLIENT_ID, USER_INDEX_ENTRY_ID, STENCIL_APP_GLOBALS_ID } from '../../bundle/entry-alias-ids';
 import { updateStencilCoreImports } from '../../../compiler/transformers/update-stencil-core-import';
 import path from 'path';
 import { formatComponentRuntimeMeta, stringifyRuntimeData } from '../../../compiler/app-core/format-component-runtime-meta';
@@ -80,8 +80,9 @@ function generateEntryPoint(_config: d.Config, _compilerCtx: d.CompilerCtx, buil
   const imports: string[] = [];
   const exports: string[] = [];
   imports.push(
-    `import { proxyNative, globalScripts } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
+    `import { proxyNative } from '${STENCIL_INTERNAL_CLIENT_ID}';`,
     `export * from '${USER_INDEX_ENTRY_ID}';`,
+    `import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';`,
     'globalScripts();',
   );
 

src/compiler_next/output-targets/dist-lazy/lazy-output.ts

@@ -4,7 +4,7 @@ import { bundleOutput } from '../../bundle/bundle-output';
 import { catchError } from '@utils';
 import { generateEntryModules } from '../../../compiler/entries/entry-modules';
 import { getBuildFeatures, updateBuildConditionals } from '../../build/app-data';
-import { LAZY_BROWSER_ENTRY_ID, LAZY_EXTERNAL_ENTRY_ID, STENCIL_INTERNAL_CLIENT_ID, USER_INDEX_ENTRY_ID } from '../../bundle/entry-alias-ids';
+import { LAZY_BROWSER_ENTRY_ID, LAZY_EXTERNAL_ENTRY_ID, STENCIL_INTERNAL_CLIENT_ID, USER_INDEX_ENTRY_ID, STENCIL_APP_GLOBALS_ID } from '../../bundle/entry-alias-ids';
 import { isOutputTargetDistLazy, isOutputTargetHydrate } from '../../../compiler/output-targets/output-utils';
 import { lazyComponentTransform } from '../../transformers/component-lazy/transform-lazy-component';
 import { updateStencilCoreImports } from '../../../compiler/transformers/update-stencil-core-import';
@@ -119,18 +119,19 @@ const getCustomTransformer = (compilerCtx: d.CompilerCtx) => {
 
 const getLazyEntry = (isBrowser: boolean) => {
   const s = new MagicString(``);
-  s.append(`import { bootstrapLazy, globalScripts } from '${STENCIL_INTERNAL_CLIENT_ID}';\n`);
-
+  s.append(`import { bootstrapLazy } from '${STENCIL_INTERNAL_CLIENT_ID}';\n`);
 
   if (isBrowser) {
     s.append(`import { patchBrowser } from '${STENCIL_INTERNAL_CLIENT_ID}';\n`);
+    s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`);
     s.append(`patchBrowser().then(options => {\n`);
     s.append(`  globalScripts();\n`);
     s.append(`  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`);
     s.append(`});\n`);
 
   } else {
     s.append(`import { patchEsm } from '${STENCIL_INTERNAL_CLIENT_ID}';\n`);
+    s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`);
     s.append(`export const defineCustomElements = (win, options) => patchEsm().then(() => {\n`);
     s.append(`  globalScripts();\n`);
     s.append(`  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`);

src/hydrate/platform/hydrate-app.ts

@@ -1,8 +1,8 @@
 import * as d from '../../declarations';
 import { connectedCallback, insertVdomAnnotations } from '@runtime';
 import { doc, getHostRef, loadModule, plt, registerHost } from '@platform';
-import { globalScripts } from '@app-data';
 import { proxyHostElement } from './proxy-host-element';
+import { globalScripts } from '@app-globals';
 
 
 export function hydrateApp(

src/hydrate/platform/index.ts

@@ -131,7 +131,7 @@ export const Build: d.UserBuildConditionals = {
 
 export const styles: d.StyleMap = new Map();
 
-export { BUILD, NAMESPACE, globalScripts } from '@app-data';
+export { BUILD, NAMESPACE } from '@app-data';
 export { hydrateApp } from './hydrate-app';
 
 export * from '@runtime';

src/runtime/vdom/test/tsconfig.json

@@ -32,6 +32,9 @@
       "@app-data": [
         "../../../app-data/index.ts"
       ],
+      "@app-globals": [
+        "../../../app-globals/index.ts"
+      ],
       "@utils": [
         "../../../utils/index.ts"
       ]

tsconfig.json

@@ -27,6 +27,9 @@
       "@app-data": [
         "src/app-data/index.ts"
       ],
+      "@app-globals": [
+        "src/app-globals/index.ts"
+      ],
       "@compiler": [
         "src/compiler_next/index.ts"
       ],
@@ -80,6 +83,7 @@
 
   "files": [
     "src/app-data/index.ts",
+    "src/app-globals/index.ts",
     "src/client/index.ts",
     "src/client/polyfills/css-shim/index.ts",
     "src/cli/index.ts",