FIameCaster/prism-code-editor

add .min version

Opened this issue · 5 comments

smir-ant commented

what about making minified version?
i don't need to use node and npm, but i need to embeed it in vanila html+css+js
and connect via cdn

FIameCaster commented

Using this package with a CDN would be a bad idea even if it's minified. This is because the package has hundreds of entry points and even more files. If you use the setups with a CDN, 300 or so JS files are downloaded and imported. Minifying will make the files slightly smaller, but won't fix the issue.

The package is ESM with no dependencies, so if you want to use it with a CDN for prototyping, you can. See #10, but I can never recommend doing this in production.

I could consider making an entirely different package with a single entry point that's optimized for CDN usage, but I'm not quite sure how Prism grammar imports should be handled in this case.

  • 👍1
bohwaz commented

+1, I am also missing having just a JS file ready that I can embed in my app.

Prism has a builder that lets you download the packaged code that you want, including plugins and scripts that you need only, it's great.

bohwaz commented

I tried to use services that package files, so that you don'y have hundreds of requests.

Skypack fails, saying the package cannot be built (v3.4.0):

Cannot find module 'prism-code-editor/copy-button.css'

The error is different with v3.3.0:

Cannot find module 'prism-code-editor/layout.css'

I also tried with jsdelivr, but then it doesn't seem to find the language:

import { minimalEditor, basicEditor, fullEditor, readonlyEditor } from 'https://cdn.jsdelivr.net/npm/prism-code-editor@3.4.0/setups/+esm'
import "https://cdn.jsdelivr.net/npm/prism-code-editor@3.4.0/prism/languages/markup/+esm";


const editor = basicEditor(
  '#editor',
  {
    language: "html",
    theme: "dracula",
  },
  () => console.log("ready"),
);

Results in:

Error: Language 'html' has no grammar.
    at Object.A [as setOptions] (core.ts:57:35)

browserify doesn't seem to like the provided example code either.

bohwaz commented

I got better luck with esbuild:

./node_modules/.bin/esbuild --bundle --outfile=out.js index.js

import { minimalEditor, basicEditor, fullEditor, readonlyEditor } from "prism-code-editor/setups"
// Importing Prism grammars
import "prism-code-editor/prism/languages/markup"

export { basicEditor} ;

The issue is that the created file is quite large, it seems to be bundling all themes, a lot of languages, etc.

FIameCaster commented

I got better luck with esbuild:
The issue is that the created file is quite large, it seems to be bundling all themes, a lot of languages, etc.

The setups utilize dynamic imports to keep the main module small, but when you bundle with esbuild like you're doing above, everything will end up in a single file.

The only solution to this is to avoid the setups entirely and look at advanced usage instead. You can merge the code from the two code blocks into a single file and bundle it with esbuild. Esbuild will also output a CSS file with all the styles that are imported. You can then export a utility function that creates editors with the exact extensions you want. Hope this helps.

+1, I am also missing having just a JS file ready that I can embed in my app.

Prism has a builder that lets you download the packaged code that you want, including plugins and scripts that you need only, it's great.

It would be very time consuming and difficult to build such a tool. The only thing I realistically could do is to create a separate package with a single entry point, but I don't like this idea since this is a very modular library, and a single 300kB entry point defeats its purpose of being lightweight.

  • 👍1