PrismJS/prism

Safe usage with static imports without Babel

Open

#2617 opened on Nov 3, 2020

View on GitHub
 (1 comment) (4 reactions) (0 assignees)JavaScript (11,488 stars) (1,296 forks)batch import
help wantedlanguage-definitions

Description

Motivation A lot of people seem to use Prism via ES6 import declarations and get it wrong.

Each language definition has a list of languages it requires and optional dependencies. This information is an implementation detail and hidden from our users but also required to make static imports work.

Our current solution for this problem is the Babel plugin. However, users may not want or have the option to use this plugin, so I think that we should also offer an alternative solution.

Description I really don't know how to solve this in a robust manner since we essentially have to control the user's source code.

Maybe a few ideas:

  • A Prims CLI interface that generates an import file like this: npx prismjs import-file --languages=html,php,java --js-out=./src/prism-importer.js (Users will then import the generated file instead of our package.)

    The generated file will look like this:

    import Prism from "prismjs/components/prism-core.min.js";
import "prismjs/components/prism-markup.min.js";
import "prismjs/components/prism-clike.min.js";
import "prismjs/components/prism-markup-templating.min.js";
import "prismjs/components/prism-php.min.js";
import "prismjs/components/prism-java.min.js";
export default Prism;

    The problem with this approach is that the generated file is version-specific and may silently fail. The easiest solution for this is to include a version check in the generated file but I'm not sure how to do this efficiently.

  • Another idea is to have the npm package include a Prism bundle that includes all languages to eliminate the need for multiple static imports. This completely throws away Prism's modularity but it's an easy-to-use solution for people who just want to try out Prism or don't care too much about bundle size. Also, this doesn't help with plugins since they have the same dependency problem.

Contributor guide

Tech stack
javascriptnodejs
Domain
developer experiencebuild system
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
over 1 week
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic knowledge of ES6 importsfamiliarity with Prism components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue proposes two approaches: a CLI tool that generates an import file with all necessary dependencies, or a bundled version that includes all languages. Research the Prism component system in `components/prism core.js` and the babel plugin prismjs repository to understand dependencies. Explore whether a CLI tool using Node.js could generate version specific imports. Also evaluate the impact of a bundled version on bundle size. Engage with maintainers to decide which approach is preferred.