Comments (5)
DOMPurify doesn't work with import DOMPurify from 'dompurify';
with regular Angular bundler (not esbuild), it works fine in Slickgrid-Universal but not in here, it really has to be import * as DOMPurify
. The DOMPurify project tried to change their exports
so that it works better but it actually caused a regression mostly for Angular users like my project causing this Angular-Slickgrid issue #1348 and tracked in DOMPurify regression Build error in angular app.
So I'm afraid that there is no fix, I did try to use import DOMPurify from 'dompurify'
but that didn't work in Angular (maybe it does when using esbuild but it fails with regular Angular bundler which is what most user still use). DOMPurify never had a full ESM approach
You could maybe try this old Rollup patch that I used in the past for other dependency like MomentJS, this might work (you could submit a PR if it does)
// patch to fix rollup "moment has no default export" issue,
// documented at: https://github.com/rollup/rollup/issues/670
import * as dompurify_ from dompurify';
const DOMPurify = (dompurify_ as any)['default'] || dompurify_;
in summary, it's a DOMPurify problem that existed forever (they're still using a CommonJS approach and even if they tried, they still haven't found the best approach)
EDIT
I was actually using that patch in Slickgrid-Universal 3.x but stop using it in 4.x. I might have to put it back in place though at least in here, see this line for 3.x
from angular-slickgrid.
Ah, sorry, I totally didn't think about actually running yarn build
in Angular-Slickgrid and testing if the package works...
Doing that gives:
------------------------------------------------------------------------------
Building entry point 'angular-slickgrid'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
src/app/modules/angular-slickgrid/extensions/slickRowDetailView.ts:7:8 - error TS1259: Module '"C:/repos/GitHub/Angular-Slickgrid/node_modules/@types/dompurify/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
7 import DOMPurify from 'dompurify';
~~~~~~~~~
node_modules/@types/dompurify/index.d.ts:4:1
4 export = DOMPurify;
~~~~~~~~~~~~~~~~~~~
This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
Which is odd, since that flag seems to be set.
I'm not sure about your workaround though, I'm a bit hesitant to introduce a hack.
Taking a step back and starting fresh from https://angular.io/guide/creating-libraries
ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib
cd projects/my-lib
npm i dompurify
npm i --save-dev @types/dompurify
Add to my-lib.component.ts
import DOMPurify from 'dompurify';
...
ngOninit() {
const clean = DOMPurify.sanitize('<script>alert("Hello World!")</script>');
console.log(clean);
}
So I cd ../..; ng build
:
------------------------------------------------------------------------------
Building entry point 'my-lib'
------------------------------------------------------------------------------
✖ Compiling with Angular sources in Ivy partial compilation mode.
projects/my-lib/src/lib/my-lib.component.ts:2:8 - error TS1259: Module '"C:/repos/experiments/angular/lib/my-workspace/projects/my-lib/node_modules/@types/dompurify/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
2 import DOMPurify from 'dompurify';
~~~~~~~~~
projects/my-lib/node_modules/@types/dompurify/index.d.ts:4:1
4 export = DOMPurify;
~~~~~~~~~~~~~~~~~~~
This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
So I add "allowSyntheticDefaultImports": true
to tsconfig.lib.json
and run ng build
:
------------------------------------------------------------------------------
Building entry point 'my-lib'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Generating FESM bundles
✔ Copying assets
⚠ Distributing npm packages with 'dependencies' is not recommended. Please consider adding dompurify to 'peerDependencies' or remove it from 'dependencies'.
✖ Writing package manifest
Dependency dompurify must be explicitly allowed using the "allowedNonPeerDependencies" option.
So I add
"allowedNonPeerDependencies": [ "dompurify" ] to
ng-package.json`:
------------------------------------------------------------------------------
Building entry point 'my-lib'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Writing FESM bundles
✔ Copying assets
ℹ Removing devDependencies section in package.json.
✔ Writing package manifest
✔ Built my-lib
------------------------------------------------------------------------------
Built Angular Package
- from: C:\repos\experiments\angular\lib\my-workspace\projects\my-lib
- to: C:\repos\experiments\angular\lib\my-workspace\dist\my-lib
------------------------------------------------------------------------------
Now I just need to figure out why in Angular-Slickgrid the ng-packagr
is not picking up the allowSyntheticDefaultImports
...
from angular-slickgrid.
One step further.
Adding tsconfig.lib.json
with
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/lib",
"allowSyntheticDefaultImports": true,
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": []
},
"exclude": [
"**/*.spec.ts"
]
}
and adding tsconfig.lib.prod.json
with:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}
to Angular-Slickgrid and changing in package.json
to "build": "ng-packagr -p ng-package.json -c tsconfig.lib.prod.json",
and running yarn build
gives:
$ ng-packagr -p ng-package.json -c tsconfig.lib.prod.json
Building Angular Package
------------------------------------------------------------------------------
Building entry point 'angular-slickgrid'
------------------------------------------------------------------------------
✔ Compiling with Angular sources in Ivy partial compilation mode.
✔ Generating FESM bundles
✔ Copying assets
ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
ℹ Removing devDependencies section in package.json.
✔ Writing package manifest
✔ Built angular-slickgrid
------------------------------------------------------------------------------
Built Angular Package
- from: C:\repos\GitHub\Angular-Slickgrid
- to: C:\repos\GitHub\Angular-Slickgrid\dist
------------------------------------------------------------------------------
Build at: 2024-02-07T07:57:11.351Z - Time: 9162ms
$ npm-run-all copy:i18n
$ copyfiles -f src/assets/i18n/*.json dist/i18n
Done in 25.61s.
I'm not yet sure about all the details here (settings in the tsconfig.lib.json files) ...and also need to test out the produced package.
from angular-slickgrid.
Just ng-packagr -p ng-package.json -c tsconfig.json
also solves the problem.
ng-packagr
by default uses an internal tsconfig, see https://github.com/ng-packagr/ng-packagr/blob/main/docs/override-tsconfig.md and since Angular-Slickgrid is not using ng build
the tsconfig.json
(with the allowSyntheticDefaultImports: true
) needs to be explicitly provided.
Also I tested the produced package in our app, all looks good :)
PR incoming...
from angular-slickgrid.
😮 wow that is a lot of investigation and now knowing that ng-packgr use their tsconfig explains why it worked in all my other projects except in here. I was totally unware of side effect by ng-packagr. Your work here is really awesome in finding a workable fix 👏🏻
from angular-slickgrid.
Related Issues (20)
- Tree scrolls and flickers on frequent update on tree data HOT 4
- Frozen columns do not fit in viewport HOT 3
- The Multi-column tri-state sorting option doesn't work HOT 2
- Boolean column with filter collection and render html not working, displays true/false HOT 7
- Update Step By Step Install Wiki page HOT 10
- Example 22 keeps formatter components alive outside of grid HOT 20
- Example 22 shows temp ng-template being rendered for a short period
- cell highlighted stays on the same position even when filtered HOT 1
- Attach Angular Component in AsyncPostRender and keep it running HOT 2
- I have issues with Editor text box. HOT 6
- I am getting error when I use multipleSelect . "Cannot find type definition file for 'trusted-types'. " HOT 9
- Shared module gridOptions seetings not preserve in page module HOT 15
- All items in grid appear highlighted after adding an item to the grid HOT 9
- Incorrect dataContext is passed in `onSave` callback using composite editor HOT 6
- Polyfills ERROR TypeError: Function.prototype.toString requires that 'this' be a Function at Boolean.toString (<anonymous>) HOT 25
- Custom header and footer templates, like for Aurelia
- No data warning stays if data lazy loaded and gridOptions changed HOT 12
- Angular slickgrid upgrade does not working HOT 3
- between Operator HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-slickgrid.