fix(compiler): solve issue where worker thread didn't have access to …

…fetch (#3012)

add a more flexible way of assigning `fetch` based on the environment

STENCIL-84: Investigate Non-Transpiled Stencil Code in Web API

src/compiler/sys/stencil-sys.ts

@@ -505,7 +505,22 @@ export const createSystem = (c?: { logger?: Logger }) => {
     return results;
   };
 
-  const fetch = global.fetch;
+  /**
+   * `self` is the global namespace object used within a web worker.
+   * `window` is the browser's global namespace object (I reorganized this to check the reference on that second)
+   * `global` is Node's global namespace object. https://nodejs.org/api/globals.html#globals_global
+   *
+   * loading in this order should allow workers, which are most common, then browser,
+   * then Node to grab the reference to fetch correctly.
+   */
+  const fetch =
+    typeof self !== 'undefined'
+      ? self?.fetch
+      : typeof window !== 'undefined'
+      ? window?.fetch
+      : typeof global !== 'undefined'
+      ? global?.fetch
+      : undefined;
 
   const writeFile = async (p: string, data: string) => writeFileSync(p, data);
 

test/browser-compile/src/components/app-root/app-root.tsx

@@ -57,7 +57,6 @@ export class AppRoot {
   }
 
   async compile() {
-    console.clear();
     console.log(`compile: stencil v${stencil.version}, typescript v${stencil.versions.typescript}`);
 
     const opts: StencilTypes.TranspileOptions = {

test/browser-compile/src/utils/css-template-plugin.ts

@@ -70,7 +70,7 @@ export const cssTemplatePlugin = {
   async load(id: string) {
     let code = styleImports.get(id.split('?')[0]);
     if (code) {
-      const results = await stencil.compile(code, {
+      const results = await stencil.transpile(code, {
         file: id,
       });
       return results.code;