Support async globalScripts functions

fixes #3392
STENCIL-467

CONTRIBUTING.md

@@ -64,8 +64,8 @@ Using `npm link` is beneficial to the development cycle in that consecutive buil
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@stencil/core/internal": ["node_modules/@stencil/core/internal"],
-      "@stencil/core/internal/*": ["node_modules/@stencil/core/internal/*"]
+      "@stencil/core/internal": ["./node_modules/@stencil/core/internal"],
+      "@stencil/core/internal/*": ["./node_modules/@stencil/core/internal/*"]
     }
   }
 }

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

@@ -183,9 +183,11 @@ const appendGlobalScripts = (globalScripts: GlobalScript[], s: MagicString) => {
     });
 
     s.append(`export const globalScripts = () => {\n`);
+    s.append(`  return Promise.all([`)
     globalScripts.forEach((globalScript) => {
-      s.append(`  ${globalScript.defaultName}();\n`);
+      s.append(`    ${globalScript.defaultName}(),\n`);
     });
+    s.append(`  ]);\n`);
     s.append(`};\n`);
   } else {
     s.append(`export const globalScripts = () => {};\n`);

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

@@ -180,15 +180,15 @@ const getLazyEntry = (isBrowser: boolean): string => {
   if (isBrowser) {
     s.append(`import { patchBrowser } from '${STENCIL_INTERNAL_CLIENT_PATCH_BROWSER_ID}';\n`);
     s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`);
-    s.append(`patchBrowser().then(options => {\n`);
-    s.append(`  globalScripts();\n`);
+    s.append(`patchBrowser().then(async (options) => {\n`);
+    s.append(`  await globalScripts();\n`);
     s.append(`  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`);
     s.append(`});\n`);
   } else {
     s.append(`import { globalScripts } from '${STENCIL_APP_GLOBALS_ID}';\n`);
-    s.append(`export const defineCustomElements = (win, options) => {\n`);
+    s.append(`export const defineCustomElements = async (win, options) => {\n`);
     s.append(`  if (typeof window === 'undefined') return undefined;\n`);
-    s.append(`  globalScripts();\n`);
+    s.append(`  await globalScripts();\n`);
     s.append(`  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n`);
     s.append(`};\n`);
   }

src/testing/puppeteer/puppeteer.d.ts

@@ -0,0 +1,3 @@
+/**
+ * hello world!
+ */

test/karma/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "clean": "rm -rf test-output tmp-compiled-tests",
     "start": "node ../../bin/stencil build --dev --watch --serve --es5",
-    "build.all": "npm run clean && npm run build.sibling && npm run build.invisible-prehydration && npm run build.app && npm run build.custom-elements && npm run karma.webpack && npm run build.prerender",
+    "build.all": "npm run clean && npm run build.sibling && npm run build.globalScripts && npm run build.invisible-prehydration && npm run build.app && npm run build.custom-elements && npm run karma.webpack && npm run build.prerender",
     "build.app": "npm run compile.test-app && node ../../bin/stencil build --debug --es5",
     "compile.test-app": "node ../../node_modules/typescript/lib/tsc -p tsconfig.json",
     "build.custom-elements": "webpack-cli --config test-app/custom-elements-output-webpack/webpack.config.js && webpack-cli --config test-app/custom-elements-output-tag-class-different/webpack.config.js && webpack-cli --config test-app/custom-elements-delegates-focus/webpack.config.js",
@@ -17,6 +17,7 @@
     "build.invisible-prehydration.false": "node ../../bin/stencil build --config test-invisible-prehydration/stencil.invisiblePrehydrationFalse.config.ts --debug",
     "build.prerender": "node ../../bin/stencil build --config test-prerender/stencil.config-prerender.ts --prerender --debug && node test-prerender/no-script-build.js",
     "build.sibling": "node ../../bin/stencil build --config test-sibling/stencil.config.ts --debug",
+    "build.globalScripts": "node ../../bin/stencil build --config test-global-script/stencil.config.ts --debug",
     "karma": "karma start karma.config.js",
     "karma.prod": "npm run build.all && npm run karma",
     "karma.webpack": "webpack-cli --config test-app/esm-webpack/webpack.config.js",

test/karma/test-app/global-script/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf8">
+<script src="./build/testglobalscript.esm.js" type="module"></script>
+<script src="./build/testglobalscript.js" nomodule></script>
+
+<test-cmp></test-cmp>

test/karma/test-app/global-script/karma.spec.ts

@@ -0,0 +1,30 @@
+import { type DomTestUtilities, setupDomTests } from '../util';
+
+describe('global script', () => {
+  let env: DomTestUtilities | undefined;
+
+  beforeEach(() => {
+    setInterval(() => {
+      console.log(document.querySelector('test-cmp'))
+    }, 100)
+    env = setupDomTests(document);
+  });
+
+  afterEach(() => {
+    env.tearDownDom();
+  });
+
+  it('supports async execution', async () => {
+    await env.setupDom('/global-script/index.html');
+    console.log(document.body.innerHTML);
+
+    expect(document.querySelector('test-cmp')).toBeNull();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(document.querySelector('test-cmp')).toBeNull();
+    await new Promise((resolve) => setTimeout(resolve, 900));
+    expect(document.querySelector('test-cmp')).not.toBeNull();
+
+    // @ts-expect-error
+    expect(window.__testVal).toBe('foobar');
+  });
+});

test/karma/test-app/util.ts

@@ -17,7 +17,7 @@ export declare namespace SomeTypes {
 /**
  * Utilities for creating a test bed to execute HTML rendering tests against
  */
-type DomTestUtilities = {
+export type DomTestUtilities = {
   /**
    * Create and render the HTML at the provided url
    * @param url a location on disk of a file containing the HTML to load

test/karma/test-global-script/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "global-script",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "collection": "dist/collection/collection-manifest.json",
+  "types": "dist/types/components.d.ts",
+  "volta": {
+    "extends": "../package.json"
+  }
+}

test/karma/test-global-script/src/components.d.ts

@@ -0,0 +1,37 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface TestCmp {
+    }
+}
+declare global {
+    interface HTMLTestCmpElement extends Components.TestCmp, HTMLStencilElement {
+    }
+    var HTMLTestCmpElement: {
+        prototype: HTMLTestCmpElement;
+        new (): HTMLTestCmpElement;
+    };
+    interface HTMLElementTagNameMap {
+        "test-cmp": HTMLTestCmpElement;
+    }
+}
+declare namespace LocalJSX {
+    interface TestCmp {
+    }
+    interface IntrinsicElements {
+        "test-cmp": TestCmp;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "test-cmp": LocalJSX.TestCmp & JSXBase.HTMLAttributes<HTMLTestCmpElement>;
+        }
+    }
+}

test/karma/test-global-script/src/global.ts

@@ -0,0 +1,12 @@
+declare global {
+  interface Window {
+    __testVal: string;
+  }
+}
+
+export default async function () {
+  return new Promise((resolve) => setTimeout(() => {
+    window.__testVal = 'foobar'
+    resolve('done!');
+  }, 1000))
+}

test/karma/test-global-script/src/test-cmp/test-cmp.tsx

@@ -0,0 +1,13 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'test-cmp',
+  scoped: true,
+})
+export class SiblingRoot {
+  render() {
+    return (
+      <div>I am rendered</div>
+    );
+  }
+}

test/karma/test-global-script/stencil.config.ts

@@ -0,0 +1,17 @@
+import { Config } from '../../../dist/declarations';
+const { WWW_OUT_DIR } = require('../constants');
+
+export const config: Config = {
+  namespace: 'TestGlobalScript',
+  tsconfig: 'tsconfig.json',
+  outputTargets: [
+    {
+      type: 'www',
+      dir: `../${WWW_OUT_DIR}`,
+      // empty: false,
+      // indexHtml: 'global-script.html',
+      // serviceWorker: null,
+    },
+  ],
+  globalScript: 'src/global.ts',
+};

test/karma/test-global-script/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "alwaysStrict": true,
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": true,
+    "declaration": false,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noImplicitReturns": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "pretty": true,
+    "target": "es2017",
+    "useUnknownInCatchVariables": true,
+    "baseUrl": ".",
+    "paths": {
+      "@stencil/core": ["../../../internal"],
+      "@stencil/core/internal": ["../../../internal"],
+      "@stencil/core/testing": ["../../../testing"]
+    }
+  },
+  "include": [
+    "src"
+  ]
+}

test/karma/tsconfig.json

@@ -41,6 +41,7 @@
   ],
   "exclude": [
     "test-prerender",
-    "test-sibling"
+    "test-sibling",
+    "test-global-script"
   ]
 }