Import issue with Angular update 18.2.5 -> 18.2.7

[timonback]

Hello, we are happy users of your lightweight editor component.

When updating from Angular version 18.2.5 to 18.2.7 we encounter an import error:

src/app/components/new/code/prism-editor.component.ts:12:43 - error TS2307: Cannot find module 'prism-code-editor' or its corresponding type declarations.
import { createEditor, PrismEditor } from "prism-code-editor";

src/app/components/new/code/prism-editor.component.ts:13:31 - error TS2307: Cannot find module 'prism-code-editor/match-brackets' or its corresponding type declarations.
import { matchBrackets } from "prism-code-editor/match-brackets";

...

Have you seen such an error before? Do you have any idea where to look further?

Demo: https://demo.springwolf.dev PR: https://github.com/springwolf/springwolf-core/pull/952 Build (springwolf-ui): https://github.com/springwolf/springwolf-core/actions/runs/11296135257/job/31420337212?pr=952

[FIameCaster]

Does it happen locally as well, or only when running GitHub actions?

I don't think this is an issue with Prism code editor, and it's not something I've encountered. typesVersions is used to locate type declarations. Since moduleResolution is set to Bundler in your TSConfig, there shouldn't be any issues.

[timonback]

Thank you for the fast response.

Yes, I am able to reproduce this locally. I also ruled out the potential GitHub cache by disabling the cache temporarily in one of the earlier attempts.

Thank you for pointing out the typesVersions setting. With typescript and bundles there are just so many settings by now...

[FIameCaster]

I went ahead and cloned the springwolf repository, and navigated to your branch with angular 18.2.8, and opened the springwolf-ui directory. I then ran npm install followed by npm run build. The build completed with zero errors. I subsequently ran the dev server with npm start. That worked too, and the website ran just fine. The TS server in VSCode also resolved the type declarations for prism-code-editor without issue... Not sure I'm able to help solve a problem I can't reproduce.

Although, there is another problem I can solve. Not sure you've noticed, but the rainbow brackets don't work in your demo. This is because the bracket styles are overridden by the Okaidia theme from PrismJS. To fix the problem make sure that "./node_modules/prismjs/themes/prism-okaidia.css" comes before "prism-code-editor/themes/prism-okaidia.css" in the styles list. Swapping the stylesheet order should have no downsides.

[timonback]

Thank you for checking, I will switch the css files around.

Yesterday, I experimented a little more on that branch and also got it working locally. The issue seemed to be related to how dependabot updates dependencies vs how ng update does them.

Currently the pipeline is failing due to a different reason, where an updated, not compatible dependency is pulled due to npm install vs npm ci.

From my point of view, this issue can be closed. Thank you for looking into it too and building this easy to use component.

---

Possibly interesting for your list of use-cases/compatibility: We use also another component (ng-markdown), which internally uses prism to highlight code. My best guess on how to bridge the call from the global Prism object to your prism implementation is this: https://github.com/springwolf/springwolf-core/blob/chore%2Fremove-old-ui/springwolf-ui%2Fsrc%2Fapp%2Fcomponents%2Fcode%2Fprism.bridge.ts

In case there is an easier method, I am happy hear about it.

[FIameCaster]

Sounds good.

My best guess on how to bridge the call from the global Prism object to your prism implementation is this: https://github.com/springwolf/springwolf-core/blob/chore%2Fremove-old-ui/springwolf-ui%2Fsrc%2Fapp%2Fcomponents%2Fcode%2Fprism.bridge.ts

In case there is an easier method, I am happy hear about it.

You can use editorFromPlaceholder() to replace the <pre> element with an editor. If you don't need an editor and just want syntax highlighting, you can use highlightText() and set the innerHTML of the <code> element. The next major release will add support for static code blocks, so you could switch to those in the future.

[timonback]

We will stick to createEditor for now. Our input text needs trimming, since it has a new line marker at the end - which also (correctly) shows up when using editorFromPlaceholder. highlightText is missing the nice background styling that is included in the editor.