nxext / nx-extensions Goto Github PK
View Code? Open in Web Editor NEWNx Extension for StencilJs, SvelteJS, SolidJS, Ionic and VueJs
License: MIT License
Nx Extension for StencilJs, SvelteJS, SolidJS, Ionic and VueJs
License: MIT License
I would like to use a stencil-lib-component in stencil-pwa-app
is this possible?
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?
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
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.
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
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
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
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.
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.
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 !
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;
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
?
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
outputPath": "dist/apps/your-app-output"
NETLIFY_TOKEN=your_token nx deploy your-app
To Fix
outputPath": "../../../dist/apps/your-app-output"
- this is relative to the build script in node_modulesExpected 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
@netlify-builder/deploy:deploy
then I have to have outputPath": "../../../dist/apps/your-app-output"
(location relative to the script?).@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
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:
npx create-nx-workspace@latest my-workspace
with a new Angular appnpm install -D @nxext/stencil
nx g @nxext/stencil:lib web-components
nx generate @nxext/stencil:make-lib-buildable web-components
nx g @nxext/stencil:add-outputtarget web-components
WebComponentsAngularModule
from @my-workspace/web-components-angular
to app.module.tsIf 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?
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.
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!
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 !
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?
I have a Nx workspace with 1 app and 6 libs (4 of which were generated using @nxext/stencil
):
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.
After @nx-plus/vue added a library schematic
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'"
}
]
}
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:
yarn create nx-workspace
;@nxext/stencil
;Additional context
NX Workspace is at version 12 and @nxext/stencil
is at the latest version.
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
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
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.
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
npx create-nx-workspace@latest stencil_e2e_issue
npm install @nxext/stencil --save
nx generate @nxext/stencil:library --name=ui-library
nx run ui-library:e2e
here you can find a repo with the minimal code to reproduce the bug
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
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.
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:
nx test web-components
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.
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
npm i
nx build core
nx test ionic-react-app
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)
import { defineCustomElements } from '@my-org/core/loader';
import { defineCustomElements } from '../../../dist/libs/core/loader';
nx test ionic-react-app --skip-nx-cache
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
dist/libs/core
andnode_modules/@my-org/core
to "trick" jest into realizing this is a module and it should use the correct js file.Workaound 3
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,
}),
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.
@nxext/stencil
nx g @nxext/stencil:lib my-lib
nx build my-lib
or nx serve my-lib
Stencil library should build out to the dist
directory
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.
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.
Steps to reproduce
os used windows 10
nx version used 10.4.4
nxext/svelte version used 10.1.3
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.
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.
After running nx serve
, any direct navigation from browser to non existing page will lead to devserver's 404 file not found page
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.
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
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:
glob/input/output
-props, since it only accepts strings
.However, this is possible with other NX-extension such as Web & Angular.
Repro -- base:
Repro -- # 1
Can't use assets outside of the project source root
...
"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
.
...
"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.
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.
I am working on windows 10. nx version used is 10.4.0
steps to reproduce:
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"
}
}
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!
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.
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?
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!
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.
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
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"
},
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.