nxext/nx-extensions

Nx Extension for StencilJs, SvelteJS, SolidJS, Ionic and VueJs

@nxext

• StencilJS plugin for NX
• SvelteJS plugin for NX
• SolidJS plugin for NX
• Angular plugin for NX
• React plugin for NX
• Preact plugin for NX

The Ionic and Capacitor packages are now located here

Attention

If you use the e.g. 17.0 package of any package, be sure to use the Nx version 16.2. The Version numbers have to match. Nxext packages with 16.7 aren't compatible with Nx 16.8

Install and usage

Docs are here: https://nxext.dev

Contributing

PRs, ideas and discussions accepted. Take a look at the contributing file!

License

MIT © 2020 - 2022 Nxext Team

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dominik Pieper 💻 🤔 📖 🚇 🚧	David Pertiller 🤔 💻	Cory McArthur 💻 🤔	Dominik Schwank 💻	Diogo Soares 💻	Nicolas Hansse 💻	Luc Neville 💻
Harry Nicholls 💻	JA 💻	Cas van Dinter 💻	Gavin Doughtie 💻	Marvin Luchs 💻	JoMen6 💻	Jonathan Cammisuli 💻
Kristian Mandrup 💻 🤔 📖	Jordan Hall 💻 🤔	Devin Shoemaker 💻 🤔	Lars Gyrup Brink Nielsen 💻 🚇	kryptus36 💻	Caleb Ukle 💻	Marc Kassay 💻
SimonCockx 💻	mikemosco 💻	Jason Clark 💻	Victor Borg 💻	blackholegalaxy 💻	nitedani 💻	Andre Greeff 💻
Fabrizio Fallico 💻	Luís Carvalho 💻	Mark Gagnon 💻	Mat Warger 💻	mcelikdev 💻	Mike Brocchi 💻	Oscar 💻
Rémi Marche 💻	Simon Flack 💻	Tiep Phan 💻	tehw0lf 💻	Gion Kunz 💻 🤔	Josh VanAllen 💻	Schmale97 💻
intellild 💻	Sebastian Duque Gutierrez 💻	Arend-Jan Tetteroo 💻	Dan Cork 💻	Josh Wiegand 💻	Katerina Skroumpelou 💻	Devin Rhode 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

nx-extensions's Issues

critical documetation bug

Hi, not sure what control you have over npmjs, but that page erroneously suggests that this plugin should be installed as a dev dependency:

https://www.npmjs.com/package/@nxext/svelte

npm install @nxext/svelte --save-dev

should be:
npm install @nxext/svelte --save

Thanks for this plugin, excited to be using it!

Blank screen on serve

Hello Dominik,
Really appreciate your work on this project. I encountered the following error when serving using nx serve: GET http://localhost:3333/build/client-app.esm.js net::ERR_ABORTED 404 (Not Found)

When checking the dist folder I can see that the file name is always built as app.esm.js by stencil, and hence the file client-app.esm.js will not be found.

client-app is an arbitrary nx app name for demo purposes.

Stencil Library: Tests fails if component is using another library from nx workspace

Hey,

I run into errors if a stencil component uses a library from the nx workspace.
The build itself (nx build web-components) is totally fine, but if I run tests (nx test web-components) I get an error about a missing module:

 FAIL  libs/web-components/src/components/my-component/my-component.spec.ts
  ● Test suite failed to run

    Cannot find module '@my-workspace/lib-a' from 'src/components/my-component/my-component.tsx'

    Require stack:
      src/components/my-component/my-component.tsx
      src/components/my-component/my-component.spec.ts

      2 | 
      3 | import { format } from '../../utils/utils';
    > 4 | import { libA } from '@my-workspace/lib-a';
        | ^
      5 | 
      6 | @Component({
      7 |   tag: 'my-component',

      at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (src/components/my-component/my-component.tsx:4:1)

Reproduce:

• checkout https://github.com/kerosin/nx-stencil-example
• call nx test web-components

[Svelte] Tests not recognizing the typescript in .svelte files

Created a stackoverflow question regarding this issue here, with more code snippets.
Clean project, using the nx empty workspace (or with an angular one, its the same), added a svelte project using the command line nx g @nxext/svelte:app my-app, then added a component using nx g @nxext/svelte:c my-comp and after inserting this line in the MyComponent.svelte file:

let name: string;

the tests stop working, giving the following error:

 FAIL   my-app  apps/my-app/src/components/my-comp/my-comp.spec.ts
  ● Test suite failed to run

    ParseError: Unexpected token

      at error (../../node_modules/svelte/src/compiler/utils/error.ts:25:16)
      at Parser$1.error (../../node_modules/svelte/src/compiler/parse/index.ts:100:3)
      at Parser$1.acorn_error (../../node_modules/svelte/src/compiler/parse/index.ts:93:8)
      at Object.read_script [as read] (../../node_modules/svelte/src/compiler/parse/read/script.ts:51:10)
      at tag (../../node_modules/svelte/src/compiler/parse/state/tag.ts:205:27)
      at new Parser$1 (../../node_modules/svelte/src/compiler/parse/index.ts:52:12)
      at parse (../../node_modules/svelte/src/compiler/parse/index.ts:216:17)
      at Object.compile (../../node_modules/svelte/src/compiler/compile/index.ts:91:14)
      at Object.process (../../node_modules/svelte-jester/src/transformer.js:21:25)
      at ScriptTransformer.transformSource (../../node_modules/@jest/transform/build/ScriptTransformer.js:464:35)

if I insert instead just:

let name;

it works again.

Unfortunately the TypeScript usage is a dealbreaker for us.

Unable to run e2e tests in stencil libraries or apps inside an NX workspace

Hello Dominik I expect you are doing well. I'm having troubles running e2e tests with Stencil using the @nxext/stencil plugin, (but in any other aspects, it works flawlessly, thanks for making it possible). Below I describe the problem

Current Behavior

There isn't a way to run Stencil's e2e test inside an NX workspace. Working only with Stencil (outside an NX monorepo) everything works fine.

Expected Behavior

The command

nx run name-of-a-stencil-library:e2e

should run e2e tests. Btw, unit tests work just fine

nx run name-of-a-stencil-library:test

Steps to Reproduce

• Create a new nx work space:

npx create-nx-workspace@latest stencil_e2e_issue 

• install the stencil plugin

npm install @nxext/stencil --save

• Create a new Stencil Library

nx generate @nxext/stencil:library --name=ui-library

• Run the e2e tests for the stecil library

nx run ui-library:e2e

here you can find a repo with the minimal code to reproduce the bug

Failure Logs

The tests don't start and this error is printed:

33:45.4]  testing e2e files
[33:47.7]  build, ui-library, dev mode, started ...
[33:47.8]  transpile started ...
[33:48.0]  transpile finished in 191 ms
[33:48.0]  copy started ...
[33:48.1]  generate lazy started ...
[33:48.8]  copy finished (0 files) in 735 ms
[33:51.3]  generate lazy finished in 3.26 s

[ ERROR ]  Package Json: ../../dist/libs/ui-library/package.json:7: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/libs/ui-library/dist/types/components.d.ts

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

[ WARN  ]  Package Json: ../../dist/libs/ui-library/package.json:3:3
           package.json "main" property is set to "dist/index.js". It's recommended to set the "main" property to:
           ../../dist/libs/ui-library/dist/index.js

      L2:  "name": "ui-library",
      L3:  "main": "dist/index.js",
      L4:  "module": "dist/index.mjs",

[ WARN  ]  Package Json: ../../dist/libs/ui-library/package.json:4:3
           package.json "module" property is set to "dist/index.mjs". It's recommended to set the "module" property to:
           ../../dist/libs/ui-library/dist/index.mjs

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

[ WARN  ]  Package Json: ../../dist/libs/ui-library/package.json:8:3
           package.json "collection" property is required when generating a distribution and must be set to:
           ../../dist/libs/ui-library/dist/collection/collection-manifest.json

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

[33:51.4]  build failed in 3.73 s

The error is kind of weird because all the relative routes declared inside the package.json, (generated in dist/libs/ui folder), exists but for some reason, the files can't be found by the compiler. I will appreciate any help you can provide me to solve this issue, thanks

[Svelte][feature request] Schematic to generate a lib

I think it will cool to be able to generate lib like for Stencil and be able to build them in production (maybe we could use @web/packages plugin of Nx).

I am using the version: ^10.1.3

Request for enhanced documentation for svelte

I would really like to use this extension with a svelte app.

But I do not get it how to handle a "custom" rollup config. I read in the docu that there is "--sveltePreprocessConfig" and "--rollupConfig" option for the build step. But I have not found anything how to use this.

Is there documentation or an example project?

Stencil: Add Library Error

Hi,

Describe the bug
I tried to set up a new workspace and added a stencil lib but got the following error:

Cannot find module '@angular-devkit/core'
Require stack:
- /Users/username/workspace/sew-design-system/node_modules/@nrwl/tao/src/commands/ngcli-adapter.js
- /Users/username/workspace/sew-design-system/node_modules/@nrwl/tao/src/commands/generate.js
- /Users/username/workspace/sew-design-system/node_modules/@nrwl/tao/index.js
- /Users/username/workspace/sew-design-system/node_modules/@nrwl/cli/lib/init-local.js
- /Users/username/workspace/sew-design-system/node_modules/@nrwl/cli/bin/nx.js

To Reproduce

➜ npx create-nx-workspace --preset=empty

➜ npm install @nxext/stencil --save

➜ nx g @nxext/stencil:library ui-components

Used latest nx version @nrwl/workspace": "12.0.8"

I also tried with nx version 11.6.3 but got the same error:

Expected behavior
Added stencil library to workspace

404 File Not Found: apps/my-app/www

There still seems to be an issue with the dist path when serving an app.

Steps for Reproduction

npm i create-nx-workspace@latest -g

create-nx-workspace playground-stencil

   ? What to create in the new workspace
   > empty
   ? CLI to power the Nx workspace
   > Nx
   ? Use the free tier of the distributed cache provided by Nx Cloud?
   > No

cd playground-stencil

npm install @nxext/stencil --save

nx g @nxext/stencil:app my-app

npm start my-app

Here's a project setup with the exact steps as described above:
https://github.com/luchsamapparat/nx-workspace-stencil-404-issue

Note: When first starting the app, the build failed with an error: TypeScript: Duplicate identifier 'IteratorResult'. I fixed that by updating @types/node to ~12.0.0 to match my local Node version.

Expected
The app running in my browser.

Actual

404 File Not Found
Url: /
File: {...}/playground-stencil/apps/my-app/www

For some reason the dev-server tries to serve apps/my-app/www instead of dist/apps/my-app/www.

Dependency Versions

@nrwl/workspace: 10.0.7
@nxext/stencil: 1.1.0
@stencil/core: 1.16.3

Svelte library build only generate the bundle.js file

When creating and building a Svelte library, Svelte build only generates a single file in the dist folder.
When doing the same with an angular library that uses @nrwl/angular:package, we get all the .d.ts files and the package.json that ease the deployment of the library.
Is that expected? Is there a way to at least copy the package.json file in the build process?

`UNRESOLVED_IMPORT` warning when importing libs from the same Nx workspace

I have a Nx workspace with 1 app and 6 libs (4 of which were generated using @nxext/stencil):

• MyApp
• MainLib (stencil)
• LibA (stencil)
• LibB (stencil)
• LibC (stencil)
• Utils
• Types

MainLib is dependent on LibA and LibB.

When building MainLib I get this error for both LibA and LibB:

Bundling Warning UNRESOLVED_IMPORT
'@bv0012/lib-a' is imported by
../../../libs/main-lib/src/theme/component-map.ts, but could
not be resolved – treating it as an external dependency

There are no inline errors in component-map.ts and my tsconfig.json paths property looks like this:

"paths": {
      "@bv0012/main-lib": ["libs/main-lib/src/components.d.ts"],
      "@bv0012/main-lib/*": ["libs/main-lib/src/*"],
      "@bv0012/main-lib/loader": ["dist/libs/main-lib/loader"],
      "@bv0012/main-lib/react": [
        "dist/libs/generated/main-lib/react/src/components.ts"
      ],
      "@bv0012/types": ["libs/types/src/index.d.ts"],
      "@bv0012/utils": ["libs/utils/src/index.ts"],
      "@bv0012/lib-a": ["dist/libs/lib-a"],
      "@bv0012/lib-b": ["dist/libs/lib-b"],
      "@bv0012/lib-c": ["dist/libs/lib-c"]
    }

I'm pointing the lib paths to dist/ because they're publishable.

I feel like this is a node-resolve issue but I haven't had any success debugging it so far.

The "id" argument must be of type string. Received undefined

Describe the bug
I'm getting this error after creating a project with @nxext/stencil and setting up a Storybook instance for my library.

> nx run components:storybook 
The "id" argument must be of type string. Received undefined

———————————————————————————————————————————————

>  NX   ERROR  Running target "components:storybook" failed

  Failed tasks:

  - components:storybook

To Reproduce
Steps to reproduce the behavior:

• Bootstrap a new project with yarn create nx-workspace;
• Install @nxext/stencil;
• Create a new library and set up a Storybook configuration for this library;
• Try and launch the Storybook instance.

Additional context
NX Workspace is at version 12 and @nxext/stencil is at the latest version.

Jest unit test doesn't find spec.tsx files

After setting up the stenciljs plugin I tried to run the test using nx test my-lib but the result was that:

Add capacitor app with @nxtend/capacitor

Enable CORS for dev-server

I'd like to start the dev-server of a Svelte project with CORS enabled, so I can access the server from a different origin.

The rollup-plugin-serve has an option to pass arbitrary headers, but it is currently not used by the @nxext/svelte executor.
It would be great, if either an "headers" options could be passed directly to the rollup-plugin-serve, or alternatively a "cors" option that will just set the according 'Access-Control-Allow-Origin': '*' header.

As an alternative, I tried to overwrite the "serve" plugin with a custom rollup config. But this didn't work as expected, because the function serve() of the rollup-plugin-serve already starts a server on first invokation and the second invocation in the custom rollup config throws an error, saying that the port is already in use.

Context, as to why I need CORS so badly:
I'm starting to develop in a microfrontend environment with single-spa. In this environment, the root application (e.g. running on port on 3000) calls out to other microfrontend servers on different ports. Because the port is part of the origin, this already counts as a cross-origin request.

How to use TailwindCSS wtih @nxext/svelte?

Hey, how can I use TailwindCSS properly with Svelte?
I've tried to use custom rollup.config.js, but it does not work.

Always received the following error:

Error during bundle: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

I think something is with postcss, but not sure.

Dependency Chaos

Describe the bug
There are some weird dependencies.
For example @nxext/tailwind requires @nxext/svelte which needs a lot other peerDependencies.
Additionally @nxext/stencil requires @nxext/tailwind@^11.2.0 which does not exist in NPM.
Currently I get a lot of warnings related to missing peer dependencies because of this.

Expected behavior
Clean and working dependencies.

Stencil: Malke lib publishable

Hi,

my goal is to build a component library with Stencil that publish each component separately to npm.

To be more generic in this issue, I would like to distribute a library outside of the monorepo.

Nx supports --publishable option for the library generator for Angular, React and Node: https://nx.dev/latest/node/structure/buildable-and-publishable-libraries#publishable-libraries

Are there any plans to support the --publishable option?

Usage:
nx g @nxext/stencil:library my-app --publishable --importPath @myorg/mylib

Maybe, we could add something similar to make-lib-buildable?

Publishing latest (svelte) package

Hi,

First of all, I just want to thank you for your work.
And by no means I want this to come over as pressure.

This is more of a question than an 'issue';
I'm wondering when the latest version of @nxext/svelte is being published (to npmjs)?
As I'm waiting for #110 to become available for my side-project 😄

Since the other packages (@nxext/stencil and now @nxext/tailwind) were updated this week, I was hoping @nxext/svelte would arrive soon.

Thanks again for your time and effort!

Stencil 1.16.2 - Job Output failed to validate.

[Nx Workspace]

• @nrwl/**: 9.5.1
• typescript: 3.9.6

[Screenshot]

feat: option to use svelte@next when generating app

I would be nice to have the option when generating an app with nx g @nxext/svelte:app my-app to be able to use svelte@next instead.

files and folders not copied from public to dist

Steps to reproduce

os used windows 10
nx version used 10.4.4
nxext/svelte version used 10.1.3

• Creating a brand new svelte app in a blank nx workspace
• nx serve

Everything builds without error but when navigating to the site it can not start giving the following error:

404 Not Found

C:\dev\svelte\nzb-browse\dist\apps\nzb-browse\index.html

(rollup-plugin-serve)

This is because the files in public are not being copied over to the dist folder.

To make it work for me I changed the convertCopyAssetsToRollupOptions function in node_modules@nxext\svelte\src\builders\utils\normalize.js to the following:

function convertCopyAssetsToRollupOptions(outputPath, assets) {
    return assets
        ? assets.map((normalizedCopyAssetOption) => ({            
            src: path_1.join(normalizedCopyAssetOption.input, normalizedCopyAssetOption.glob).replace(/\\/g, '/'),
            dest: path_1.join(outputPath, normalizedCopyAssetOption.output).replace(/\\/g, '/'),
        }))
        : undefined;
}

I am not sure if this breaks anything on other configurations or operating systems but after this the rollup-plugin-copy did copy over whatever was in the public directory to the correct place and the basic app started working.

[Svelte] historyApiFallback should be enabled for serve command

In development, when we use routing with history strategy. It's necessary to fallback any non existing path to index.html, to let svelte handle the page.

Current Behavior:

After running nx serve, any direct navigation from browser to non existing page will lead to devserver's 404 file not found page

Expected Behavior:

After running nx serve, any direct navigation from browser to non existing page, should load index.html and bootstrap svelte application.

From https://github.com/nxext/nx-extensions/blob/main/packages/svelte/src/executors/utils/rollup-options.ts#L109
We need extra options for serve plugin, adding historyApiFallback: true should solve the problem

Thanks for your effort creating this.

Unable to build react project

Hello,

I'm writing an application using react and a library using stenciljs and nxext/stencil.

When I try to build the application using some stencil components, I have the followings error :

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer-link/ap-navigation-drawer-link.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer-link/ap-navigation-drawer-link.tsx(38,14):
TS2322: Type '{ children: (string | Element)[]; class: string; }' is not assignable to type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>'.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer-link/ap-navigation-drawer-link.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer-link/ap-navigation-drawer-link.tsx(38,14):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer-link/ap-navigation-drawer-link.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer-link/ap-navigation-drawer-link.tsx(39,18):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx(47,18):
TS2322: Type '{ children: Element[]; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>'.
  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>'.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx(47,18):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx(49,26):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx(63,14):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx(65,22):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx
ERROR in /Users/brucepauker/WebstormProjects/aphilia/libs/stencil-ui-components/src/components/navigation-drawer/ap-navigation-drawer/ap-navigation-drawer.tsx(67,30):
TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

I have previously built the stencil-react library, but the errors seems to be coming from the original stencil-library.
Could you help me on this ? I have been stuck for a while now..

Thank you very much !

Version 1.16 of stencil don't work, all build steps end with "unexpected export"

how import a stencil component from a stencil-lib in a stencil-pwa-app

I would like to use a stencil-lib-component in stencil-pwa-app

for ex:
https://github.com/keremtiryaki/my-stencil-nx-demo/blob/master/apps/stencil-pwa/src/components/app-home/app-home.tsx#L25-L26

is this possible?

Path can not be used when generating Svelte-App

Actual:

Error when generating an svelte-app with a full path, e.g. nx g @nxext/svelte:app products/ui.
Error-message is Cannot read property 'architect' of undefined

Expected:

like in other existing nx-plugins would be creating the app with name products-ui inside of folder apps/products. This would make structuring the monorepo a lot easier, e.g. when building micro-apps with one folder for the api-microservice and the other with the svelte-microfrontend

Importing typescript libraries in a svelte project

I have a project where i need to import typescript libraries using the plugin @nrwl/web from within a svelte application. It gives the following error:

Error during bundle: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
Bundle failed.

I have created a simple example, with the error reproduced here.

If i am importing a javascript library, it works fine. Might be some rollup config, but i was not able to correct the issue.

ENOENT: no such file or directory, stat '/C/dev/svelte-test/svelte/apps/test/public' while building/serving a completely new svelte app

I am working on windows 10. nx version used is 10.4.0

steps to reproduce:

• npx create-nx-workspace@latest
• What to create in the new workspace -> choose empty
• CLI to power the Nx workspace -> nx
• Use Nx Cloud -> no
• cd into new dir
• npm install @nxext/svelte --save-dev
• nx g @nxext/svelte:app test
• nx serve test
  ENOENT: no such file or directory, stat '/C/dev/svelte-test/svelte/apps/test/public'

copy and cd-ing into the path but changing to 'C:/dev/svelte-test/svelte/apps/test/public' works.
Also tested with the react plugin creating an app. which did not give any problems

package.json

{
"name": "svelte",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"nx": "nx",
"start": "nx serve",
"build": "nx build",
"test": "nx test",
"lint": "nx workspace-lint && nx lint",
"e2e": "nx e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "nx migrate latest",
"workspace-schematic": "nx workspace-schematic",
"dep-graph": "nx dep-graph",
"help": "nx help"
},
"private": true,
"dependencies": {},
"devDependencies": {
"@nrwl/cli": "10.4.4",
"@nrwl/cypress": "10.4.4",
"@nrwl/eslint-plugin-nx": "10.4.4",
"@nrwl/jest": "10.4.4",
"@nrwl/tao": "10.4.4",
"@nrwl/workspace": "10.4.4",
"@nxext/svelte": "^10.1.2",
"@types/jest": "26.0.8",
"@types/node": "~8.9.4",
"@typescript-eslint/eslint-plugin": "4.3.0",
"@typescript-eslint/parser": "4.3.0",
"cypress": "^5.5.0",
"dotenv": "6.2.0",
"eslint": "7.10.0",
"eslint-config-prettier": "6.0.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-svelte3": "^2.7.3",
"jest": "26.2.2",
"prettier": "2.1.2",
"svelte": "^3.29.0",
"svelte-jester": "^1.1.5",
"svelte-preprocess": "^4.4.2",
"ts-jest": "26.4.0",
"ts-node": "~7.0.0",
"tslint": "~6.0.0",
"typescript": "~4.0.3"
}
}

workspace.json

{
"version": 1,
"projects": {
"test": {
"projectType": "application",
"root": "apps/test",
"sourceRoot": "apps/test/src",
"architect": {
"build": {
"builder": "@nxext/svelte:build",
"options": {
"outputPath": "dist/apps/test",
"entryFile": "apps/test/src/main.ts",
"tsConfig": "apps/test/tsconfig.app.json",
"assets": ["apps/test/public"]
},
"configurations": {
"production": {
"dev": false
}
}
},
"serve": {
"builder": "@nxext/svelte:build",
"options": {
"outputPath": "dist/apps/test",
"entryFile": "apps/test/src/main.ts",
"tsConfig": "apps/test/tsconfig.app.json",
"assets": ["apps/test/public"],
"watch": true,
"serve": true
},
"configurations": {
"production": {
"prod": true
}
}
},
"lint": {
"builder": "@nrwl/linter:lint",
"options": {
"linter": "eslint",
"tsConfig": "apps/test/tsconfig.app.json",
"exclude": ["/node_modules/", "!apps/test//*"]
}
},
"test": {
"builder": "@nrwl/jest:jest",
"options": {
"jestConfig": "apps/test/jest.config.js",
"passWithNoTests": true
}
}
}
},
"test-e2e": {
"root": "apps/test-e2e",
"sourceRoot": "apps/test-e2e/src",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@nrwl/cypress:cypress",
"options": {
"cypressConfig": "apps/test-e2e/cypress.json",
"tsConfig": "apps/test-e2e/tsconfig.e2e.json",
"devServerTarget": "test:serve",
"baseUrl": "http://localhost:4200"
},
"configurations": {
"production": {
"devServerTarget": "test:serve:production"
}
}
},
"lint": {
"builder": "@nrwl/linter:eslint",
"options": {
"lintFilePatterns": ["apps/test-e2e//*.{js,ts}"]
}
}
}
}
},
"cli": {
"defaultCollection": "@nrwl/workspace"
}
}

Not able to use shared assets

Version
@nxext/svelte -- 10.1.2

Intro
In a current NX workspace project I've multiple applications and (shared) libraries.
I wanted to try out Svelte within this workspace and stumbled on this NX-extension.
It's working great, except that I face 2 (similar) assets: [] issues:

• Can't use assets outside of the project source root (e.g. shared assets from a library).
• Can't use objects with glob/input/output-props, since it only accepts strings.

However, this is possible with other NX-extension such as Web & Angular.

---

Repro -- base:

• Have a Nx workspace
• Install @nxext/svelte
• Run nx g @nxext/svelte:app poc-svelte

---

Repro -- # 1
Can't use assets outside of the project source root

• Have something similar to the following angular/workspace.json configuration

...
"assets": [
  "apps/poc-svelte/public",
  "libs/example-shared-assets/src/assets"
]
...

Output -- # 1

An unhandled exception occurred: The /../../example-workspace/libs/example-shared-assets/src/assets asset path must start with the project source root: /../../example-workspace/apps/poc-svelte

Expected -- # 1
Svelte app should build/serve with the assets loaded in.
EDIT:
Actually, I believe this is intended.
Because using sources outside of your project source root, you have to use that object structure.

---

Repro -- # 2
Can't use object with glob/input/output-props. It only accepts strings.

• Have something similar to the following angular/workspace.json configuration

...
"assets": [
  "apps/poc-svelte/public",
  {
    "glob": "**/*",
    "input": "libs/example-shared-assets/src/styles",
    "output": "./assets/styles/"
  }
]
...

Output -- # 2

An unhandled exception occurred: path.match is not a function

Expected -- # 2
Svelte app should build/serve with the assets loaded in.

---

Notes:
I saw the PR #99 and it seemed like it was exactly what was needed to resolve these issues. (I built that branch locally to test things out)
So I kept my eye on it. However, a few days ago, the PR was closed and the branch was deleted.
Unfortunately without any input/comment to why so.

That's why I've submitted a new PR (#110) alongside this Issue, that should hopefully resolve these issues.
I took a look at your PR (#99) and how NX themselves support it - example source

Also, this issue might be present for the @nxext/stenciljs package as well, but I've not tried that one yet.

Creating a Ionic App fails with InvalidInputOptions [Error]

If I call nx g @nxext/stencil:ionic-app my-app and chose "SASS" I get an error:

InvalidInputOptions [Error]: Schematic input does not validate against the Schema: {"project":"my-app","appName":"my-app"}
Errors:

Data path "" should have required property 'npmClient'.

Full log:

C:\src\project>nx g @nxext/stencil:ionic-app my-app
? Which stylesheet format would you like to use? SASS(.scss)       [ http://sass-lang.com          ]
InvalidInputOptions [Error]: Schematic input does not validate against the Schema: {"project":"my-app","appName":"my-app"}
Errors:

  Data path "" should have required property 'npmClient'.
    at MapSubscriber.project (C:\src\project\node_modules\@angular-devkit\schematics\tools\schema-option-transform.js:32:27)
    at MapSubscriber._next (C:\src\project\node_modules\rxjs\internal\operators\map.js:49:35)
    at MapSubscriber.Subscriber.next (C:\src\project\node_modules\rxjs\internal\Subscriber.js:66:18)
    at ThrowIfEmptySubscriber._next (C:\src\project\node_modules\rxjs\internal\operators\throwIfEmpty.js:44:26)
    at ThrowIfEmptySubscriber.Subscriber.next (C:\src\project\node_modules\rxjs\internal\Subscriber.js:66:18)
    at TakeSubscriber._next (C:\src\project\node_modules\rxjs\internal\operators\take.js:54:30)
    at TakeSubscriber.Subscriber.next (C:\src\project\node_modules\rxjs\internal\Subscriber.js:66:18)
    at MergeMapSubscriber.notifyNext (C:\src\project\node_modules\rxjs\internal\operators\mergeMap.js:93:26)
    at SimpleInnerSubscriber._next (C:\src\project\node_modules\rxjs\internal\innerSubscribe.js:27:21)
    at SimpleInnerSubscriber.Subscriber.next (C:\src\project\node_modules\rxjs\internal\Subscriber.js:66:18) {
  errors: [
    {
      keyword: 'required',
      dataPath: '',
      schemaPath: '#/required',
      params: [Object],
      message: "should have required property 'npmClient'"
    }
  ]
}

Build path isn't passed correctly to another builder calling @nxext/stencil:build

Describe the bug
When trying to deploy using this plugin: https://github.com/ngx-builders/netlify-builder, I get an error that says "deployment failed" after investigating the source, the error said the file wasn't present.

To Reproduce

1. Create nx project
2. Create stencil/app
3. Follow tutorial here to add deploy to netlify: https://www.netlify.com/blog/2020/04/21/deploying-nx-monorepos-to-netlify/
4. Enter the outputPath": "dist/apps/your-app-output"
5. run in the terminal: NETLIFY_TOKEN=your_token nx deploy your-app
6. it will build successfully, but fail to deploy

To Fix

1. enter the outputPath": "../../../dist/apps/your-app-output" - this is relative to the build script in node_modules

Expected behavior
I would expect to put the path as explained in the tutorial - relative to my project.
outputPath": "dist/apps/your-app-output"

Additional Context
Originally posted here:
ngx-builders/netlify-builder#119

This bug only happens when combining @nxext/stencil:build with @netlify-builder/deploy:deploy

1. If I only run @netlify-builder/deploy:deploy then I have to have outputPath": "../../../dist/apps/your-app-output" (location relative to the script?).
2. If I build first with @nxext/stencil:build then deploy via @netlify-builder/deploy:deploy (with noBuild:true) then the outputPath can be dist/apps/your-app-output and it will work 👍

netlify-builder/deploy:deploy works with my ionic-react apps, which is why I'm filing this issue with the @nxext/stencil:build

Cannot read property 'dependencies' of undefined

Steps to reproduce

• npx create-nx-workspace@latest --preset empty --name web-components-with-angular-and-react-poc
• npm install --save-dev @nrwl/react
• npm install --save-dev @nrwl/angular
• npm install --save-dev @nxext/stencil
• npx nx g @nxext/stencil:core

Not able to run the project

This error pops up when i run the project:

Unable to install stencil lib

Hey,

When installing a fresh nx project, which is using the latest versions of everything. Most things work, however, running nx g @nxext/stencil:lib my-lib results in an error cannot read property 'paths' of undefined. All other libs work, i.e. nx generate @nrwl/react:library it just seems to be this package. Any ideas?

Thanks in advance

EDIT: Looks like latest version is not supported yet. Sorry my mistake.

[Svelte] Window build issue due path issue for sveltePreprocessConfig build option

Hello,

Thanks for the Svelte plugin, it is saving a lot of time.
I am setting an sveltePreprocessConfig for adding tailwind and purgecss ( could be cool btw to have this option because you have added the tailwind plugin).

My path is: "apps/my_project/preprocess.js"
The file contains:

function getPreprocess() {
  const path = require("path");

  const purgecss = require("@fullhuman/postcss-purgecss")({
    content: ["./src/**/*.html", "./src/**/*.svelte"],
    whitelistPatterns: [/svelte-/],
    defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
  });

  return {
    postcss: {
      plugins: [
        require("tailwindcss")(
          path.resolve("./apps/my_project/tailwind.config.js")
        ),
        require("autoprefixer"),
        // purgecss,
      ],
    },
  };
}

module.exports = getPreprocess;

On mac, it is working fine but on window, I am not able to run the builder because it is can not find the module.
I think it is due to the /

version:^10.1.3

Error to build a library

Hi, i've created a lib with StencilJS into a clean NX project (using OSS template), but when i run the build command the following error appears:

nx run core:build --debug --verbose 
Cannot find module '@nrwl/workspace/src/utils/fileutils'
Require stack:
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/stencil-runtime/stencil-runtime.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/stencil-runtime/index.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/build/builder.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/node_modules/@angular-devkit/architect/node/index.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/src/commands/ngcli-adapter.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/src/commands/run.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/index.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/cli/lib/run-cli.js
Error: Cannot find module '@nrwl/workspace/src/utils/fileutils'
Require stack:
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/stencil-runtime/stencil-runtime.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/stencil-runtime/index.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/build/builder.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/node_modules/@angular-devkit/architect/node/index.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/src/commands/ngcli-adapter.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/src/commands/run.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/index.js
- /home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/cli/lib/run-cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at Module.require (/home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/tao/src/compat/compat.js:7:40)
    at Module.require (/home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/node_modules/@nrwl/tao/src/compat/compat.js:7:40)
    at Module.require (/home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nrwl/devkit/node_modules/@nrwl/tao/src/compat/compat.js:7:40)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/rsiqueira/projects/nx-oss-template/stencil-project/node_modules/@nxext/stencil/src/builders/stencil-runtime/stencil-runtime.js:7:21)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
error Command failed with exit code 1.

Dependecies and devDependecies:

  "dependencies": {},
  "devDependencies": {
    "@angular-devkit/schematics": "^11.1.2",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@commitlint/prompt-cli": "^11.0.0",
    "@jscutlery/semver": "^1.2.0",
    "@justa/prettier-rules": "^0.0.1",
    "@nrwl/cli": "11.2.9",
    "@nrwl/jest": "11.2.9",
    "@nrwl/tao": "11.2.9",
    "@nrwl/workspace": "11.2.9",
    "@nxext/stencil": "^11.0.0",
    "@stencil/core": "^2.3.0",
    "@stencil/sass": "1.4.1",
    "@types/jest": "26.0.8",
    "@types/node": "12.12.38",
    "@types/puppeteer": "~3.0.2",
    "dotenv": "6.2.0",
    "husky": "^4.3.8",
    "jest": "26.2.2",
    "prettier": "2.2.1",
    "pretty-quick": "^3.1.0",
    "puppeteer": "~5.3.1",
    "ts-jest": "26.4.0",
    "ts-node": "~9.1.1",
    "typescript": "~4.0.3"
  },

building stencil library not possible - dist folder not generated

Hi there,

this might not been an issue per se, more a question.
I'm not able to build my nx stencil library to create a dist folder.

Here are the steps I took:

1. create a fresh nx 11 workspace npx create-nx-workspace@latest my-workspace with a new Angular app
2. installing nxext npm install -D @nxext/stencil
3. generating a stencil library via nx g @nxext/stencil:lib web-components
4. making stencil lib buildable nx generate @nxext/stencil:make-lib-buildable web-components
5. added output target for angular nx g @nxext/stencil:add-outputtarget web-components
6. added WebComponentsAngularModule from @my-workspace/web-components-angular to app.module.ts

If I now run nx build my-app I receive an error
Error: libs/web-components-angular/src/lib/web-components-angular.module.ts:3:38 - error TS2307: Cannot find module '@my-workspace/web-components/loader' or its corresponding type declarations.

At a closer look there is no dist folder at /libs/web-components
So I called nx run web-components:build

[56:10.7]  build, web-components, prod mode, started ...
[56:10.7]  transpile started ...
[56:10.8]  transpile finished in 104 ms
[56:10.8]  generating angular-library started ...
[56:10.9]  generate angular-library finished in 6 ms
[56:10.9]  build finished in 132 ms

but there is still no dist folder created.

How can I build my stencil library properly?

Adding svelte preprocessors to rollup config?

I've tried to follow other examples in the issues here, but haven't been able to figure it out.

I have a custom rollup config already, but I'm trying to add a markdown library (https://mdsvex.com/) to my app (I also tried with https://github.com/AlexxNB/svelte-preprocess-markdown but had the same issue).

The problem is in both their examples they add the function directly to the svelte rollup plugin, which doesn't seem possible - and not possible to have multiple.

I've tried adding it to a preprocessor script, but it's not clear where I add the extensions. I ended on below - nothing breaks but it's not rendering as expected, so I assume it's not being loaded? (I tried using it in the replace, but that seems to be a different set of options)

const { mdsvex } = require('mdsvex')

function setSveltePreprocessOptions(options) {
  return {
    typescript: {
      extensions: [
        '.svelte',
        '.svx'
      ],
      plugins: [
        mdsvex({extensions: ['.svelte', '.svx']})
      ]
    }
  };
}

module.exports = setSveltePreprocessOptions;

Add vue as possible outputtarget

After @nx-plus/vue added a library schematic

nxext/svelte live reload giving ERR_CONNECTION_REFUSED

Getting ERR_CONNECTION_REFUSED error from livereload when accessing the svelte app on default settings (localhost:4200).

Fresh nx-workspace
Fresh nxext/svelteapp
Fresh nrwl/reactapp

I'm starting the app with

nx serve svelte-app --watch

The rollup bundler is detecting file changes, and is writing the bundle when svelte files change.

Unable to build/serve Stencil library

Repro:

1. Create a new Nx workspace
2. Install @nxext/stencil
3. Run nx g @nxext/stencil:lib my-lib
4. Run nx build my-lib or nx serve my-lib

Expected:

Stencil library should build out to the dist directory

Actual:

TypeError: Cannot read property 'root' of undefined
    at MapSubscriber.project (<project-dir>\node_modules\@nxext\stencil\src\builders\utils\stencil-runtime.js:165:98)
    at MapSubscriber._next (<project-dir>\node_modules\rxjs\internal\operators\map.js:49:35)
    at MapSubscriber.Subscriber.next (<project-dir>\node_modules\rxjs\internal\Subscriber.js:66:18)
    at TapSubscriber._next (<project-dir>\node_modules\rxjs\internal\operators\tap.js:65:26)
    at TapSubscriber.Subscriber.next (<project-dir>\node_modules\rxjs\internal\Subscriber.js:66:18)
    at TapSubscriber._next (<project-dir>\node_modules\rxjs\internal\operators\tap.js:65:26)
    at TapSubscriber.Subscriber.next (<project-dir>\node_modules\rxjs\internal\Subscriber.js:66:18)
    at <project-dir>\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24

Job Output failed to validate. Errors:
    Data path ".error" should be string.

Notes:

Typically you would need to add the --buildable and/or --publishable flag to the generate command for an Nx library, but this extension doesn't support those flags.

I'm trying to migrate a UI library over from Angular to Stencil, so I followed the instructions here to add the Stencil extension and generate a Storybook config for it. Unfortunately, Storybook won't run because it can't resolve dist/libs/my-lib/loader. Figured I just needed to build the library first, but no dice. Then I figured something about my current Nx workspace configuration might be borked or incompatible with this extension in some way, so I generated a new workspace with the "empty" preset, but was able to reproduce the same issue by following the steps above.

Let me know if you need any more information. I might fork this repo tonight to see if I can figure out what's going on and submit a PR.

Support Stencil 2.0

Hello,

Stencil 2.0 was released yesterday, I was wondering if this plugin will later support it.

If yes, how could I help to make it happen. I will begin a project in the coming weeks and your plugin will be extremely important for us.

Thanks for this excellent plugin !

Compiled files not restored when build cache is up to date.

When the compile cache is up to date, the compiled files are not restored to the build directory for a stencil component library.

Version: 10.3.0

Workaround:
Use the --skip-nx-cache

nx build web-components --skip-nx-cache

gitignore for www directory or build to dist

When starting the app via nx serve, stencil compiles the app to /apps/my-app/www. It would be great if the workspace is

a) either configured to put those build files into /dist
b) or adds a .gitignore file to ignore the www directory

I'm not sure if the Stencil API allows a).

Steps for Reproduction

create-nx-workspace my-workspace
npm install @nxext/stencil --save
nx g @nxext/stencil:app my-app
git add .
git commit -m "initial commit"
npm start my-app

Thanks a lot, btw, for creating this project!

NX with svelte-kit

As I understand it nxext/svelte currently supports only the "old" svelte but not svelte-kit ?

I'm wondering if anyone is working on this at the moment?

Issues testing react app with stencil built library

Describe the bug
Simple test in react app that imports a stencil generated component fails because of a syntax error when importing the loader file.

To Reproduce

1. clone this repo https://github.com/corysmc/nx-stencil-workspace/tree/31842c0d3d0cbfc3964b7a04dd53677ce6dcf20f (basic setup for stencil components, react application that consumes those components with the loader included):
2. npm i
3. nx build core
4. nx test ionic-react-app
5. Test fails trying to import the loader file in core-react

    SyntaxError: <...>/nx-stencil-workspace/dist/libs/core/loader/index.d.ts: Support for the experimental syntax 'flow' isn't currently enabled (3:8):

      1 |
      2 | export * from '../dist/types/components';
    > 3 | export interface CustomElementsDefineOptions {
        |        ^
      4 |   exclude?: string[];
      5 |   resourcesUrl?: string;
      6 |   syncQueue?: boolean;

---

Workaround 1 (kind of)

1. Find the core-react/src/index.ts file (generated after running nx build core)
2. Change the import from:
   import { defineCustomElements } from '@my-org/core/loader';
   to
   import { defineCustomElements } from '../../../dist/libs/core/loader';
3. run nx test ionic-react-app --skip-nx-cache
4. Test paseses.

So something is going wrong here with jest. It's importing the typescript file definition, instead of the index.js file from the loader. I've searched high and low and tried several changes to tsconfig, babelrc, jest.presets, etc... without success.

---

Workaround 2
The other thing that seems to work, is

1. copying the dist folder of dist/libs/core and
2. pasting into node_modules/@my-org/core to "trick" jest into realizing this is a module and it should use the correct js file.

---

Workaound 3

1. Change your stencil.config.ts file to not include the define custom elements (loader) script

      componentCorePackage: '@my-org/core',
      proxiesFile: '../../../libs/core-react/src/index.ts',
      includeDefineCustomElements: false,
    }),

2. Include the scripts outlined on stenciljs to manually include the loader in your react app in main.tsx

import { applyPolyfills, defineCustomElements } from '@my-org/core/loader';

ReactDOM.render(<App />, document.getElementById('root'));

applyPolyfills().then(() => {
  defineCustomElements();
});

Expected behavior
Have the correct settings when initializing a project with @nxext/stencil so that this doesn't happen
Ideally I could have the stencil library generate the loader file, and just import the components into the projects I want without jest issues when running tests.

Support NX 11.0

Hi,
just updated the nx workspace to 11. It seems the stencil extension is not working anymore.

If I want to build a buildable lib I get the following error:

nx run stencil-library:build
Cannot read property 'build' of undefined

It is just a new generated stencil lib.

Fail to use Stencil output targets

Hi, i have a problem with the nx g @nxext/stencil:add-outputtarget command. I try to run but after select the output framework the console returns a generic error:

NRWL Workspace version:

"@nrwl/workspace": "9.5.1",
"@nxext/stencil": "^1.1.1",
"@stencil/core": "1.16.3",

Can someone help me?

Built packages contain spec files

Describe the bug
Built packages include **/*.spec.ts files.

To Reproduce
Run nx build ... for the project.

Expected behavior
Built packages are javascript / json / .d.ts files + any other required files, without spec files or other dev dependencies.

Additional context
nrwl/nx#5566 fixes this for new plugins, older ones need to implement behavior.

see tinesoft/nxrocks#54 for needed change