Stencil: Stencil 3 support?

[sarahquigley]

Is your feature request related to a problem? Please describe.
We have Stencil + NX project that uses @nxext/stencil. We want to upgrade to Stencil 3, but we noted this @next/stencil doesn't yet support Stencil 3. Are there plans to add support for Stencil 3?

Describe the solution you'd like
Stencil 3 support. :)

Describe alternatives you've considered
We have experimented with upgrading to Stencil 3 using the current version of @nxext/stencil - so far (though we're still testing the upgrade) the main issue we've encountered is that we are unable to run our e2e tests. Upgrading reintroduces this issue: nxext/nx-extensions#310

We are eager to upgrade to Stencil 3 ASAP, so if an upgrade isn't in the works here soon, we'll have to consider whether we can patch this issue ourselves or will need to move away from this plugin.

[DominikPieper]

Hi @sarahquigley I did a quick experiment with Stencil 3. Seems like the e2e tests are running with the update to Stencil 3 with some slightly changes. The biggest problem here is still that the user have to downgrade to jest 27. I don't do that automatically cause it could break all other Nx packages cause for Nx Jest 28 is the default. Hopefully this will be fixed some day for Stencil

[sarahquigley]

@DominikPieper
Thanks so much for your response.

Yes, agree lack of Jest 28 support is a problem. Hope that will be resolved on Stencil's end soon. We're running on Jest 27 for now.

Re: E2E tests, as I said above, when we upgrade out project to Stencil 3, we have issues issues running the E2E tests. The E2E tests run perfectly with Stencil 2, but as soon as we upgrade, we encounter the following error:

[ ERROR ]  Package Json: package.json:8:3
           package.json "types" property is set to "./dist/types/index.d.ts"
           but cannot be found. It's recommended to set the "types" property
           to: ../../dist/packages/web-components/dist/types/components.d.ts

      L7:  "es2017": "./dist/esm/index.mjs",
      L8:  "types": "./dist/types/index.d.ts",
      L9:  "collection": "./dist/collection/collection-manifest.json",

[ WARN  ]  Bundling Warning SOURCEMAP_ERROR
           Error when using sourcemap for reporting an error: Can't resolve
           original location of error.

[ WARN  ]  Package Json: package.json:4:3
           package.json "main" property is set to "./dist/index.cjs.js". It's
           recommended to set the "main" property to:
           ../../dist/packages/web-components/dist/index.cjs.js

      L3:  "version": "0.0.1",
      L4:  "main": "./dist/index.cjs.js",
      L5:  "module": "./dist/index.js",

[ WARN  ]  Package Json: package.json:9:3
           package.json "collection" property is required when generating a
           distribution and must be set to:
           ../../dist/packages/web-components/dist/collection/collection-manifest.json

      L8:  "types": "./dist/types/index.d.ts",
      L9:  "collection": "./dist/collection/collection-manifest.json",
     L10:  "collection:main": "./dist/collection/index.js",

[ WARN  ]  Package Json: package.json:5:3
           package.json "module" property is set to "./dist/index.js". It's
           recommended to set the "module" property to:
           ../../dist/packages/web-components/dist/index.js

      L4:  "main": "./dist/index.cjs.js",
      L5:  "module": "./dist/index.js",
      L6:  "es2015": "./dist/esm/index.mjs",

[46:22.2]  build failed in 1.05 s

It seems running our e2e tests no longer respect package.e2e.json config, and instead pull config from package.json instead, which means we're unable to run our tests. This was an issue previously resolved for Stencil 2, but the upgrade to Stencil 3 seems to have re-introduced.

Do you have a work around for this issue with Stencil 3?

[DominikPieper]

Could you maybe create an minimal example of the error or is the project on github? I could than do some experiments around that specific error

[sarahquigley]

The project is private unfortunately, but I'll create minimal example - and get that to you ASAP. @DominikPieper Appreciate the help, thank you!

[dgonzalezr]

@sarahquigley We have upgraded our project to Stencil 3 and we were able to keep e2e running properly. Indeed we need to override some dependencies in the package.json. You can check the repo here, hope it helps. cc. @DominikPieper

[igorlino]

FYI:
Stencil original plan to support Jest 28
stenciljs/core#3348 (comment)
Stencil updated plan to support Jest 29
stenciljs/core#3348 (comment)

with little bit patience and luck we get the support in Stencil 4.x
then nxext supports it 💯
and then we could finally use the latest nx v16.x including TS 5.2 support🥇

[erichstark]

Hello, we are currently using nx 16.5.0, @nxext/stencil 16.5.0, stencil 4. Everything works fine including tests.

[dgonzalezr]

Hello, we are currently using nx 16.5.0, @nxext/stencil 16.5.0, stencil 4. Everything works fine including tests.

@erichstark do you have a repo we can check, if you dont mind, or maybe sharing you package.json and NX config. I would like to know if you have unit and e2e tests within Stencil and not through other testing libraries.
Thank you!

[dgonzalezr]

I managed to update my Nx monorepo to the latest Nx version (v16.6.0) while keeping Jest in the last version supported by Stencil (v27.5.1). I had to set some overrides so the right versions are picked, but so far everything is running as expected.

I'm posting here the relevant information for those who will like to update to Nx 16 while keeping unit tests and e2e tests working within Stencil Jest and Puppeteer.

// package.json
devDependencies: {
  ...
  "@nx/angular": "16.6.0",
  "@nx/devkit": "16.6.0",
  "@nx/eslint-plugin": "16.6.0",
  "@nx/jest": "16.6.0",
  "@nx/js": "16.6.0",
  "@nx/linter": "16.6.0",
  "@nx/plugin": "16.6.0",
  "@nx/react": "16.6.0",
  "@nx/rollup": "16.6.0",
  "@nx/storybook": "16.6.0",
  "@nx/web": "16.6.0",
  "@nx/workspace": "16.6.0",
  "@nxext/stencil": "16.3.0",
  ...
  "@types/jest": "27.5.1",
  ...
  "@stencil/angular-output-target": "0.7.1",
  "@stencil/core": "4.0.2",
  "@stencil/react-output-target": "0.5.3",
  "@stencil/sass": "3.0.5",
  ...
  "babel-jest": "27.5.1",
  "jest": "27.5.1",
  "jest-environment-jsdom": "27.5.1",
  "ts-jest": "27.1.5",
  ...
  "nx": "16.6.0",
  "nx-cloud": "16.2.0",
  "nx-stylelint": "15.0.0",
},
"overrides": {
  "@jest/environment": "$jest",
  "@nx/jest": {
    "jest": "$jest"
  },
  "@nxext/stencil": {
    "@nx/angular": "$@nx/angular",
    "@nx/jest": "$@nx/jest",
    "@nx/linter": "$@nx/linter",
    "@nx/react": "$@nx/react",
    "@nx/storybook": "$@nx/storybook",
    "@nx/workspace": "$@nx/workspace",
    "@stencil/core": "$@stencil/core"
  },
  "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin",
  "@typescript-eslint/parser": "$@typescript-eslint/parser",
  "jest-config": "$jest",
},

Nx report:

 >  NX   Report complete - copy this into the issue template

   Node   : 18.16.1
   OS     : darwin-arm64
   npm    : 9.8.0

   nx                 : 16.6.0
   @nx/js             : 16.6.0
   @nx/jest           : 16.6.0
   @nx/linter         : 16.6.0
   @nx/workspace      : 16.6.0
   @nx/angular        : 16.6.0
   @nx/cypress        : 16.3.0
   @nx/devkit         : 16.6.0
   @nrwl/devkit       : 15.9.4
   @nx/eslint-plugin  : 16.6.0
   @nx/plugin         : 16.6.0
   @nx/react          : 16.6.0
   @nx/rollup         : 16.6.0
   @nx/storybook      : 16.6.0
   @nrwl/tao          : 16.6.0
   @nx/web            : 16.6.0
   @nx/webpack        : 16.6.0
   nx-cloud           : 16.2.0
   typescript         : 4.8.4
   ---------------------------------------
   Community plugins:
   @jscutlery/semver : 2.29.3
   @nxext/stencil    : 16.3.0
   ngx-deploy-npm    : 6.0.0
   nx-stylelint      : 15.0.0
   ---------------------------------------
   Local workspace plugins:
   	 ...
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nx/cypress@16.3.0
     - @nrwl/cypress@16.3.0
     - @nrwl/devkit@15.9.4

   To fix this, run `nx migrate nx@16.6.0`

More details can be seen here in this Pull Request

PS: I also have Storybook v7.1.0 working with this setup

[erichstark]

Here is mine package.json

{ "name": "package-name", "private": true, "author": "Erich Stark <erich@starkcodes.com>", "license": "MIT", "scripts": { "postversion": "pnpm nx affected --target=build" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-decorators": "^7.22.7", "@babel/plugin-proposal-export-default-from": "^7.22.5", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/plugin-proposal-private-methods": "^7.18.6", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-transform-arrow-functions": "^7.22.5", "@babel/plugin-transform-block-scoping": "^7.22.5", "@babel/plugin-transform-classes": "^7.22.6", "@babel/plugin-transform-destructuring": "^7.22.5", "@babel/plugin-transform-for-of": "^7.22.5", "@babel/plugin-transform-parameters": "^7.22.5", "@babel/plugin-transform-shorthand-properties": "^7.22.5", "@babel/plugin-transform-spread": "^7.22.5", "@babel/preset-env": "^7.22.9", "@babel/preset-react": "^7.22.5", "@babel/preset-typescript": "^7.22.5", "@babel/runtime-corejs3": "^7.22.6", "@commitlint/cli": "^17.6.7", "@nx/cypress": "16.5.5", "@nx/esbuild": "16.5.5", "@nx/eslint-plugin": "16.5.5", "@nx/jest": "16.5.5", "@nx/js": "16.5.5", "@nx/linter": "16.5.5", "@nx/next": "16.5.5", "@nx/react": "16.5.5", "@nx/storybook": "16.5.5", "@nx/web": "16.5.5", "@nx/webpack": "16.5.5", "@nx/workspace": "16.5.5", "@nxext/stencil": "^16.3.0", "@stencil/core": "4.0.2", "@stencil/sass": "3.0.5", "@storybook/addon-a11y": "^7.1.1", "@storybook/addon-actions": "^7.1.1", "@storybook/addon-backgrounds": "^7.1.1", "@storybook/addon-controls": "^7.1.1", "@storybook/addon-docs": "^7.1.1", "@storybook/addon-essentials": "7.1.1", "@storybook/addon-links": "^7.1.1", "@storybook/addon-mdx-gfm": "^7.1.1", "@storybook/addon-storysource": "^7.1.1", "@storybook/addon-viewport": "^7.1.1", "@storybook/builder-webpack5": "^7.1.1", "@storybook/core-common": "^7.1.1", "@storybook/core-server": "7.1.1", "@storybook/mdx2-csf": "^1.1.0", "@storybook/node-logger": "^7.1.1", "@storybook/web-components-webpack5": "^7.1.1", "@testing-library/react": "13.4.0", "@types/jest": "29.4.0", "@types/node": "18.13.0", "@types/react": "18.2.13", "@types/react-dom": "18.2.6", "@typescript-eslint/eslint-plugin": "5.60.1", "@typescript-eslint/parser": "5.60.1", "@whitespace/storybook-addon-html": "^5.1.6", "babel-jest": "29.4.1", "babel-plugin-macros": "^3.1.0", "babel-plugin-polyfill-corejs3": "^0.8.3", "commitizen": "^4.3.0", "copy-webpack-plugin": "^11.0.0", "cypress": "^12.17.2", "cz-conventional-changelog": "3.3.0", "esbuild": "0.17.17", "eslint": "~8.34.0", "eslint-config-next": "13.1.6", "eslint-config-prettier": "8.6.0", "eslint-plugin-cypress": "^2.13.3", "eslint-plugin-import": "2.27.5", "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-storybook": "^0.6.13", "html-webpack-plugin": "^5.5.3", "jest": "29.4.1", "jest-cli": "^29.6.2", "jest-environment-jsdom": "29.4.1", "jest-jasmine2": "^27.5.1", "lerna": "^6.6.2", "lit": "^2.7.6", "lit-html": "^2.7.5", "nx": "16.5.5", "nx-cloud": "16.1.1", "prettier": "^2.8.8", "puppeteer": "^20.9.0", "react": "18.2.0", "react-dom": "18.2.0", "sass": "1.62.1", "storybook": "^7.1.1", "ts-jest": "29.1.1", "ts-node": "10.9.1", "tsconfig-paths-webpack-plugin": "^4.1.0", "typescript": "5.1.6", "webpack": "^5.88.2" }, "dependencies": { "core-js": "^3.31.1", "next": "13.3.0", "regenerator-runtime": "0.13.11", "tslib": "^2.6.1" }, "resolutions": { "webpack": "5" }, "config": { "commitizen": { "path": "cz-conventional-changelog" } } }