How import from CDNs, mainly unpkg?

[backspaces]

I saw prism-code-editori on unpkg:
https://unpkg.com/browse/prism-code-editor@2.2.2/
The dist/ dir seemed to have what I need but I can't find the imports corresponding to the readme docs.

Ex:

import {
     minimalEditor, basicEditor,
  fullEditor, readonlyEditor
} from "prism-code-editor/setups"
import "prism-code-editor/grammars/javascript"

Although dist/setups exists, it doesn't seem to have the editors.

An example using unpkg or other CDNs would help? It might be there and I just missed it.

[jonpyt]

This library is designed for usage with a bundler like Vite, Webpack or similar. It's very modular with tons of different entry points to fine tune what you're importing. Usage with a CDN will therefore be verbose and result in lots of chained network requests.

If you still want to use a CDN, my greatest tip would be to look at the exports field in the package.json There you will see which files all the different exports are mapped to.

For example ./setups is mapped to ./dist/setups/index.js. So if you want to import the setups, you can do so from https://unpkg.com/prism-code-editor@2.2.2/dist/setups/index.js, and the type declarations are located at https://unpkg.com/prism-code-editor@2.2.2/dist/setups/index.d.ts.

The example you gave can be rewritten like this with imports from unpkg:

import {
  minimalEditor, basicEditor,
  fullEditor, readonlyEditor
} from "https://unpkg.com/prism-code-editor@2.2.2/dist/setups/index.js"
import "https://unpkg.com/prism-code-editor@2.2.2/dist/grammars/javascript.js"

[backspaces]

Thanks! Very clear.

[cyfung1031]

with using unpkg, there is still need extra effort to solve the issues.

    import { basicEditor, readonlyEditor } from "prism-code-editor/setups";
    import { languages } from "prism-code-editor/prism";
    import "prism-code-editor/prism/languages/bash.js";

need to become

    import { basicEditor, readonlyEditor } from "prism-code-editor/setups";
    import { languages } from "prism-code-editor/prism/index.js";
    import "prism-code-editor/prism/languages/bash.js";

because
https://unpkg.com/prism-code-editor@5.2.0/dist/prism = https://unpkg.com/prism-code-editor@5.2.0/dist/prism.js
=/= https://unpkg.com/prism-code-editor@5.2.0/dist/prism/index.js

Why there are so many "same names" in this repo? it just make everything complicated.

[jonpyt]

with using unpkg, there is still need extra effort to solve the issues.

Yes, I agree that the CSS for the Prism theme being at https://unpkg.com/prism-code-editor@5.2.0/dist/prism.js is a small issue, and something I should consider fixing. That file isn't even exposed directly by the package (it's imported dynamically when using the "prism" theme with the setups), so it can be freely renamed.

What is the issue with importing prism-code-editor/prism/index.js in the mean time?

[cyfung1031]

with using unpkg, there is still need extra effort to solve the issues.

Yes, I agree that the CSS for the Prism theme being at https://unpkg.com/prism-code-editor@5.2.0/dist/prism.js is a small issue, and something I should consider fixing. That file isn't even exposed directly by the package (it's imported dynamically when using the "prism" theme with the setups), so it can be freely renamed.

What is the issue with importing prism-code-editor/prism/index.js in the mean time?

unpkg approach seems usable but still I believe it is better to fix the packaging issue with esm.sh (#58).