speed-highlight / core

A lightweight syntax highlighter written in JavaScript
https://speed-highlight.github.io/core/examples/
Creative Commons Zero v1.0 Universal
268 stars 15 forks source link

[BUG] Unable to import language when bundled by Vite. #31

Open gcoakes opened 1 year ago

gcoakes commented 1 year ago

Information

Description

Unable to import language either dynamically or directly when bundled by Vite.

Example

import asm from "@speed-highlight/core/dist/langauges/asm.js";

const lang = await import(`./languages/${lang}.js`);

Expected behavior

Able to import without error.

Actual Behavior

Either, this when directly importing:

Missing "./dist/languages/log" specifier in "@speed-highlight/core" package

Or, this in the console when dynamically importing (which is done by tokenize when lang is of type string):

Loading module from “http://localhost:5173/node_modules/.vite/deps/languages/log.js” was blocked because of a disallowed MIME type (“”).
BearToCode commented 1 year ago

I managed to fix it using vite-plugin-dynamic-import with this config:

// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';

import dynamicImport from 'vite-plugin-dynamic-import';

// https://vitejs.dev/config/
export default defineConfig({
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            name: 'myPlugin',
            fileName: 'index'
        }
    },
    plugins: [
        dynamicImport({
            filter(id) {
                if (id.includes("@speed-highlight/core"))
                    return true;
            }
        })
    ]
});

this way this:

const lang = await import(`./languages/${lang}.js`);

is converted into this in the generated bundle:

function b(e) {
  switch (e) {
    case "./languages/asm":
    case "./languages/asm.js":
      return import("./asm-c2d0ef48.js");
    case "./languages/bash":
    case "./languages/bash.js":
      return import("./bash-c3851741.js");
    case "./languages/bf":
    case "./languages/bf.js":
    // And many more

And all the mentioned files are also present automatically.