Please do not merge, this is targeting a parent branch for ease of review

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Unit tests (npm test) were run locally and passed
• E2E Tests (npm run test.karma.prod) were run locally and passed
• Prettier (npm run prettier) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

For global script sourcemap generation, there are a few minor cleanups the team wanted to perform

GitHub Issue Number: N/A

What is the new behavior?

add a check to verify that a global script exists in the moduleMap on
the compiler context before accessing fields on it to prevent compiler
time errors. this is one of the items we discussed as a team in the GH
comments of #3005, and is being implemented here

reworked how sourcemaps are generated. this commit restores the original
code generation where the platform, source code, and default export are
concatenated, which allows us to reserve generating a magic string
until/if we're using source maps

Does this introduce a breaking change?

• Yes
• No

Testing

I spun up a basic Stencil component library with npm init stencil. Run npm i in the created project.

I added two files to src/:

// mr-worldwide.ts
import { childGlobal } from "./child-worldwide";
/**
 * prints a name with a greeting
 * @param name the name
 */
const helloGlobal = (name?: string): void => {
    const hello: string = 'hello';
    const globe: string = 'globe';
    const result = `${hello}, ${globe} ${name ? 'and ' + name : ''}!`;
    console.log(result);
}
helloGlobal(childGlobal());
}

// child-worldwide.ts
export const childGlobal = (): string => {
    return 'ryan';
}

Update your stencil.config.ts, setting:

  sourceMap: true,

Checkout the this branch, which allows for sourcemaps to be used. Build stencil with npm ci && npm run build && npm pack and install the tarball in your component library

Finally start the dev server with npm start.

Observe breakpoints in the global script there.

Note that there is a known issue where breakpoints are 'off by one', where the first eligible line my not be able to receive/stop on a breakpoint. I've added something to the Stencil team backlog to investigate further Fixed in 4ca0542

Other information