bug: setMode is not a function in v4.33.1 (works in v4.32.0)

[kozi]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.33.1

Current Behavior

The code described here https://stenciljs.com/docs/styling#style-modes does not work in v4.33.1 in v4.32.0 everything is fine.

import { setMode } from '@stencil/core';

const defaultMode = 'md'; // Default to Material Design
setMode((el) => el.getAttribute('mode') || defaultMode);

Expected Behavior

The code should work like in v4.32.0.

System Info

System: node 22.16.0
    Platform: windows (10.0.2***)
   CPU Model: AMD Ryzen 7 PRO ***
    Compiler: C:\...\node_modules\@stencil\core\compiler\stencil.js
       Build: 174898***
     Stencil: 4.33.1
  TypeScript: 5.5.4
      Rollup: 4.34.9
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

Just use the code snippet from above.

Code Reproduction URL

https://github.com/stenciljs/

Additional Information

Reprodution URL should not be mandatory.

[christian-bromann]

@kozi do you have a minimal reproduction case for this?

[kozi]

@christian-bromann https://github.com/kozi/stencil-set-mode-bug

[kozi]

Changing the code of global.ts fixes the issue. It is still a bit problematic because the previous code worked without any problems up to 4.32.x.

import { setMode } from "@stencil/core";

export default async function() {
  console.log("typeof setMode:", typeof setMode);
}

[deleonio]

Hi @christian-bromann,

we need the setMode to trigger the theming. This is really important for us.

See here: https://github.com/public-ui/kolibri/blob/e86ef484cea9214c8d191d9e911f312f87f850ce/packages/components/src/global/script.ts#L6

[kozi]

Hi @christian-bromann,

we need the setMode to trigger the theming. This is really important for us.

See here: https://github.com/public-ui/kolibri/blob/e86ef484cea9214c8d191d9e911f312f87f850ce/packages/components/src/global/script.ts#L6

The setMode method is available if you export a function (as default) as described in the documentation.

https://stenciljs.com/docs/config#globalscript

[christian-bromann]

@kozi we have two options here:

1. make it more clear in the docs that code should run in the exported function only so that imports are resolved properly
2. change the location where import scripts are being injected e.g. at the moment it is at the top of the runtime script. We could move it to the bottom but I am not fully sure if this has other implications.

Thoughts?

[kozi]

I am not familiar with the internal restrictions of the stencil framework. If certain functions can only be used in the ‘global’ callback function, they should simply be passed as a reference to the function.

export default async function({ setMode }) {
  console.log("typeof setMode:", typeof setMode);
}

[christian-bromann]

@kozi I think this is definitely an option and something we should consider doing in a major version change. For now I will update the docs to make this behavior more clear.

[kozi]

@christian-bromann This does not have to be a breaking change. Until now, the function has not been passed an option object.