chore: update stencil to 4 and outputs

[christopherGdynia]

Stencil & Tooling Update

This PR upgrades Stencil to v4 and modernizes related build dependencies and output targets. This ensures compatibility with current Node.js environments and incorporates recent tooling improvements.

Key Updates:

• Stencil Core: Upgraded to v4. stencil.config.ts was updated to reflect v4 schema changes (e.g., buildDir).
• Output Targets: Updated @stencil/angular-output-target, @stencil/react-output-target, and @nowseemee/vue-output-target to latest compatible versions.
• Angular Tooling: Angular references within the output targets are now targeting Angular ^20.0.x. This can be adjusted to Angular 18/19 if consumer applications require.
• Node.js & TypeScript: Ensured compatibility with Node.js v22. Resolved TypeError: ts.createNodeArray is not a function by aligning TypeScript versions for @angular/compiler-cli. tslib also installed.
• Type Exports: Corrected generated TypeScript type import paths in framework output files (e.g., ensuring dist/types/ subpath inclusion).
• Stencil Breaking Changes: Applied necessary config and code adjustments identified from Stencil 2->3 and 3->4 breaking changes.
• Deprecated Events: Removed deprecated event listeners and updated their references.
  - Needed to remove them because of the react output target, it had duplicated event properties
• Docs Parameters: New Stencil Version generated Function Parameters inside the Docs (e.g., Modal).
• Cleaned Lock Files: Removed redundant yarn.lock files from internal packages.
• vue-jest Removal: Removed vue-jest. It depends on Python (unavailable) and its age (1 year since last commit) suggests potential incompatibility with Node.js 22. Vue component tests are currently not runnable.

Tested Operations:

Successfully verified the following locally:

• npm install
• npm run bootstrap
• npm run build for:
  • components
  • components-react
  • components-angular
  • components-vue

Open ToDo & Questions:

• Storybook: Full test of existing stories. Investigate/plan upgrade from v6 to v7/v8 for modern Angular/Stencil compatibility.
• Test Suite: Full npm test run is pending.
• Vue Testing Alternative: Need to identify a Python-free, Node.js 22 compatible alternative for Vue component testing.
• NPM Test Version: Is publishing a test version to NPM preferred for consumption testing, or is local linking/testing sufficient for this scope? Please advise on the workflow.

---

Please comment if any missing tasks or overlooked aspects are identified.

---

[amir-ba]

Hi @christopherGdynia this is an awesome task that you are helping us with . I just want to remind you that the e2e and the spec tests are failing if you could take the time to check them it would be great , I will also try to take a look when I find the time

[christopherGdynia]

Good morning,

sure, i am right on it :D

Update:

Fix UnitTest::

• changed <mock:shadow-root> to <template shadowrootmode="open">
• removed old eventlistener tests: page.doc.addEventListener('scaleChange', changeSpyLegacy);

Fix E2E Tests:

i am not sure about this one
removed babel and updated puppeteer and it worked

additionally i remeved lodash from "packages/components" aswell
and rewrote the script to generate icons

needed to turn un skip lib check because of ts errors:

[24:08.6]  transpile finished in 6.71 s

[ ERROR ]  TypeScript: ../../node_modules/puppeteer/lib/types.d.ts:3:35
           Cannot find module 'node:child_process' or its corresponding type declarations.

      L3:  import type { ChildProcess } from 'node:child_process';
      L4:  import type { ParseSelector } from 'typed-query-selector/parser.js';

[ ERROR ]  TypeScript: ../../node_modules/puppeteer/lib/types.d.ts:5:29
           Cannot find module 'node:stream' or its corresponding type declarations.

      L4:  import type { ParseSelector } from 'typed-query-selector/parser.js';
      L5:  import { PassThrough } from 'node:stream';
      L6:  import { Protocol } from 'devtools-protocol';

[24:08.6]  build failed in 6.99 s

[amir-ba]

the skiplib config was an expected change due to the latest changes in typescript. There are however some checks failing here , one is due to the uncommitted files. for that you have to run a local build and add all the created/changed files to your commit to avoid the error. and it seems that the storybook documentation project is having some issues building . Have you tried building this locally? I don't recommend going through the path of updating the storybook version because that might be a rabbit hole, but we need to make sure the build works for the doc pages

[christopherGdynia]

I dont know why the uncommited changes fails, i am only building locally
even tried step by step running this but dont know why this file is changed

I have tried 3 hours debugging and also updating storybook but its not working
Maybe creating a new Storybook from scratch?

When we are doing this I need to know:

Why is Vue the base?
What features does it need to support?

[amir-ba]

I understand your frustration :) , storybook is always a headache when it comes to NodeJs update or version update.
I am also not aware of the reason why Vuejs was Chosen for this, but that is not the cause of the problem;
from my understanding, the issue is here probably the following :

• the node update removes support for some Openssl features that the webpack@4 uses under the hood.
  with some searching around, I saw that we can add the NODE_OPTIONS=--openssl-legacy-provider to our build and start command in the storybook package (we need to install cross-env for this to work, of course)
  also, we need to update the babel-loader and @babel/core to the latest supported version for webpack4 (since storybook 6 uses web-pack4)

This should make the storybook docs run.

[amir-ba]

If you still faced issues locally, you need to clear the node_modules and run a fresh install, to solve the sub-dependency resolving issues, this could be an issue with @babel submodules.

[christopherGdynia]

you mean running yarn clean
that opens clean.sh

i have tried this multiple times

[amir-ba]

Just deleting the node_modules manually would be easier. The clean runs some other script that are more for the GitLab actions.
The node_modules in the top level should be the most important one to remove, And revert the changes in the yarn.lock and then yarn install.

[christopherGdynia]

Storybook is now running locally

BUT:
This message appears when building:

10% building 1/1 modules 0 active(node:25840) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.


# and browserlist update needed (fyi)

scale\packages\storybook-vue\generated-stories-entry.jsBrowserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

Starting the storybook locally has infinite loading and doesn't show anything

Uncaught TypeError: Object(...) is not a function
    at ./.storybook/preview.js (preview.js:12:1)
    at __webpack_require__ (runtime~main.iframe.bundle.js:854:30)
    at fn (runtime~main.iframe.bundle.js:151:20)
    at ./.storybook/preview.js-generated-config-entry.js (preview.js:16:1)
    at __webpack_require__ (runtime~main.iframe.bundle.js:854:30)
    at fn (runtime~main.iframe.bundle.js:151:20)
    at 0 (storybook-init-framework-entry.js:1:1)
    at __webpack_require__ (runtime~main.iframe.bundle.js:854:30)
    at checkDeferredModules (runtime~main.iframe.bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (runtime~main.iframe.bundle.js:33:19)

[amir-ba]

The error in the ./.storybook/preview.js is related to the deprecated applyPolyfills from the Stencil loader. The function is marked as deprecated in newer versions. Therefore, we can just remove it here and just call thedefineCustomElements(window) there, without the polyfill. This should fix the build and also commit the missing files generated from the build in the components package and I think we will have a green pipeline.

[christopherGdynia]

Ok, i will do this in 2 steps

I will run this on mac and hopefully i will see the changes from the porcelain change
and squash the commit and check everything again

[christopherGdynia]

The node option flag isn't recognized inside pr run

It's set and run, but not working

error:

node:internal/crypto/hash:79
  this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());

this is thrown for each component

[amir-ba]

babel-loader 10.x is not compatible with webpack4. Downgrade this to 8.2.3 and it will fix the build.

[amir-ba]

the dropdown test (packages\visual-tests\src\dropdown.visual.spec.js) also requires this await page.waitForSelector('#root'); addition.
and also in the hover, active, focus test I recommend adding a
await global.page.waitForSelector('#root > scale-dropdown .input__dropdown');
selector to make sure it is there

[christopherGdynia]

Hello @amir-ba

when do we merge this change?

I can fix the merge conflicts

[amir-ba]

@christopherGdynia sorry for the delay ,can i ask you to rebase this so we can finally merge it

[amir-ba]

@christopherGdynia thanks for fixing this, in such short notice.
I just realized something you removed the depricated camelCase events but the code base still referenced these. we need to also change those referenced in order for everything to work .
so
emitEvent(this, 'scaleChange'
would need to be
this.scaleChange.emit or emitEvent(this, 'scale-change'

[amir-ba]

I thought about this. I think, maybe to reduce the impact lets put back the depricated events we removed. and remove them in an extra PR later to have a better encapsulation to see what has gone wrong. so can you please put them back in the components package