Skip to content
This repository has been archived by the owner on Oct 7, 2024. It is now read-only.

Stencil: Stencil 3 support? #11

Open
sarahquigley opened this issue Mar 20, 2023 · 10 comments
Open

Stencil: Stencil 3 support? #11

sarahquigley opened this issue Mar 20, 2023 · 10 comments

Comments

@sarahquigley
Copy link

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
Copy link
Member

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
Copy link
Author

sarahquigley commented Mar 21, 2023

@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
Copy link
Member

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
Copy link
Author

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

@dgonzalezr
Copy link

dgonzalezr commented Apr 23, 2023

@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
Copy link

igorlino commented Jun 15, 2023

FYI:
Stencil original plan to support Jest 28
ionic-team/stencil#3348 (comment)
Stencil updated plan to support Jest 29
ionic-team/stencil#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
Copy link

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

@dgonzalezr
Copy link

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
Copy link

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/[email protected]
     - @nrwl/[email protected]
     - @nrwl/[email protected]

   To fix this, run `nx migrate [email protected]`

More details can be seen here in this Pull Request

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

@erichstark
Copy link

Here is mine package.json

{ "name": "package-name", "private": true, "author": "Erich Stark <[email protected]>", "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" } } }

@DominikPieper DominikPieper transferred this issue from nxext/nx-extensions Oct 23, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants