search

FIameCaster / prism-code-editor

Lightweight, extensible code editor component for the web using Prism
https://prism-code-editor.netlify.app
MIT License
43 stars 6 forks source link

How import from CDNs, mainly unpkg? #3

Closed backspaces closed 9 months ago

backspaces commented 9 months ago

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.

FIameCaster commented 9 months ago

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 commented 9 months ago

Thanks! Very clear.