From 64432bcb873efd0e4297c00fc9583a1fe516dfe7 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Tue, 2 Aug 2022 15:53:18 -0400
Subject: [PATCH] Refactor @astrojs/prism, fix Prism component import not
working (#4114)
* Upgrade @astrojs/prism to a real package, fix component import not working
* Remove `@astrojs/prism` as a dependency of `astro`
* Update lock file
* Refactor to multiple files
* Oops, can't have astro imports run inside node
* Follow Nate's suggestion on being minors instead of patchs
* Update lockfile
---
.changeset/slow-spiders-fly.md | 8 ++++
packages/astro-prism/Prism.astro | 43 ++---------------
packages/astro-prism/README.md | 31 +++++++++++++
packages/astro-prism/index.js | 1 -
packages/astro-prism/internal.d.ts | 1 -
packages/astro-prism/package.json | 28 +++++++----
packages/astro-prism/src/highlighter.ts | 42 +++++++++++++++++
packages/astro-prism/src/index.ts | 2 +
.../{internal.mjs => src/plugin.ts} | 37 ++++++++-------
packages/astro-prism/tsconfig.json | 10 ++++
packages/astro/package.json | 2 -
packages/integrations/mdx/package.json | 2 -
packages/integrations/mdx/src/remark-prism.ts | 46 +------------------
packages/markdown/remark/package.json | 2 -
packages/markdown/remark/src/remark-prism.ts | 45 +-----------------
packages/webapi/mod.d.ts | 4 +-
pnpm-lock.yaml | 20 +++-----
17 files changed, 149 insertions(+), 175 deletions(-)
create mode 100644 .changeset/slow-spiders-fly.md
create mode 100644 packages/astro-prism/README.md
delete mode 100644 packages/astro-prism/index.js
delete mode 100644 packages/astro-prism/internal.d.ts
create mode 100644 packages/astro-prism/src/highlighter.ts
create mode 100644 packages/astro-prism/src/index.ts
rename packages/astro-prism/{internal.mjs => src/plugin.ts} (83%)
create mode 100644 packages/astro-prism/tsconfig.json
diff --git a/.changeset/slow-spiders-fly.md b/.changeset/slow-spiders-fly.md
new file mode 100644
index 000000000..1bd6cfa73
--- /dev/null
+++ b/.changeset/slow-spiders-fly.md
@@ -0,0 +1,8 @@
+---
+'astro': patch
+'@astrojs/prism': minor
+'@astrojs/mdx': minor
+'@astrojs/markdown-remark': minor
+---
+
+Refactor `@astrojs/mdx` and `@astrojs/markdown-remark` to use `@astrojs/prism` instead of duplicating the code
diff --git a/packages/astro-prism/Prism.astro b/packages/astro-prism/Prism.astro
index 2af5f64ab..81bd6cfd0 100644
--- a/packages/astro-prism/Prism.astro
+++ b/packages/astro-prism/Prism.astro
@@ -1,7 +1,5 @@
---
-import Prism from 'prismjs';
-import { addAstro } from './internal.mjs';
-import loadLanguages from 'prismjs/components/index.js';
+import { runHighlighterWithAstro } from './dist/highlighter';
export interface Props {
class?: string;
@@ -10,40 +8,9 @@ export interface Props {
}
const { class: className, lang, code } = Astro.props as Props;
-
-let classLanguage = `language-${lang}`;
-
-const languageMap = new Map([['ts', 'typescript']]);
-
-if (lang == null) {
- console.warn('Prism.astro: No language provided.');
-}
-
-const ensureLoaded = (lang) => {
- if (lang && !Prism.languages[lang]) {
- loadLanguages([lang]);
- }
-};
-
-if (languageMap.has(lang)) {
- ensureLoaded(languageMap.get(lang));
-} else if (lang === 'astro') {
- ensureLoaded('typescript');
- addAstro(Prism);
-} else {
- ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
- ensureLoaded(lang);
-}
-
-if (lang && !Prism.languages[lang]) {
- console.warn(`Unable to load the language: ${lang}`);
-}
-
-const grammar = Prism.languages[lang];
-let html = code;
-if (grammar) {
- html = Prism.highlight(code, grammar, lang);
-}
+const { classLanguage, html } = runHighlighterWithAstro(lang, code)
---
-
+
+
diff --git a/packages/astro-prism/README.md b/packages/astro-prism/README.md
new file mode 100644
index 000000000..1e8e92fa2
--- /dev/null
+++ b/packages/astro-prism/README.md
@@ -0,0 +1,31 @@
+# @astrojs/prism
+
+Supports Prism highlighting in Astro projects
+
+## Component
+
+This package exports a component to support highlighting inside an Astro file. Example:
+
+```astro
+---
+import { Prism } from "@astrojs/prism"
+---
+
+
+```
+
+## Internal
+
+This package exports a `runHighlighterWithAstro` function to highlight while making sure the Astro language is loaded beforehand
+
+```typescript
+import { runHighlighterWithAstro } from '@astrojs/prism';
+
+runHighlighterWithAstro(`
+ ---
+ const helloAstro = 'Hello, Astro!';
+ ---
+
+ {helloAstro}
+`, 'astro');
+```
diff --git a/packages/astro-prism/index.js b/packages/astro-prism/index.js
deleted file mode 100644
index 99293ed80..000000000
--- a/packages/astro-prism/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Prism } from './Prism.astro';
diff --git a/packages/astro-prism/internal.d.ts b/packages/astro-prism/internal.d.ts
deleted file mode 100644
index 058e91da7..000000000
--- a/packages/astro-prism/internal.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export function addAstro(Prism: any): void;
diff --git a/packages/astro-prism/package.json b/packages/astro-prism/package.json
index 853417165..719776311 100644
--- a/packages/astro-prism/package.json
+++ b/packages/astro-prism/package.json
@@ -3,6 +3,7 @@
"version": "0.6.1",
"description": "Supports Prism highlighting in Astro projects",
"author": "withastro",
+ "type": "module",
"license": "MIT",
"bugs": "https://github.com/withastro/astro/issues",
"repository": {
@@ -11,17 +12,28 @@
"directory": "packages/astro-prism"
},
"homepage": "https://astro.build",
- "main": "index.js",
- "scripts": {},
- "exports": {
- ".": "./index.js",
- "./internal": "./internal.mjs"
+ "main": "dist/index.js",
+ "scripts": {
+ "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+ "build:ci": "astro-scripts build \"src/**/*.ts\"",
+ "dev": "astro-scripts dev \"src/**/*.ts\""
},
- "types": "./internal.d.ts",
- "keywords": [],
- "devDependencies": {
+ "exports": {
+ ".": "./dist/index.js",
+ "./Prism.astro": "./Prism.astro",
+ "./dist/highlighter": "./dist/highlighter.js"
+ },
+ "keywords": [
+ "astro",
+ "astro-component"
+ ],
+ "dependencies": {
"prismjs": "^1.28.0"
},
+ "devDependencies": {
+ "astro-scripts": "workspace:*",
+ "@types/prismjs": "1.26.0"
+ },
"engines": {
"node": "^14.18.0 || >=16.12.0"
}
diff --git a/packages/astro-prism/src/highlighter.ts b/packages/astro-prism/src/highlighter.ts
new file mode 100644
index 000000000..3dffefae9
--- /dev/null
+++ b/packages/astro-prism/src/highlighter.ts
@@ -0,0 +1,42 @@
+import Prism from 'prismjs';
+import loadLanguages from 'prismjs/components/index.js';
+import { addAstro } from './plugin.js';
+
+const languageMap = new Map([['ts', 'typescript']]);
+
+export function runHighlighterWithAstro(lang: string | undefined, code: string) {
+ let classLanguage = `language-${lang}`;
+
+ if (!lang) {
+ lang = 'plaintext';
+ }
+
+ const ensureLoaded = (language: string) => {
+ if (language && !Prism.languages[language]) {
+ loadLanguages([language]);
+ }
+ };
+
+ if (languageMap.has(lang)) {
+ ensureLoaded(languageMap.get(lang)!);
+ } else if (lang === 'astro') {
+ ensureLoaded('typescript');
+ addAstro(Prism);
+ } else {
+ ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
+ ensureLoaded(lang);
+ }
+
+ if (lang && !Prism.languages[lang]) {
+ // eslint-disable-next-line no-console
+ console.warn(`Unable to load the language: ${lang}`);
+ }
+
+ const grammar = Prism.languages[lang];
+ let html = code;
+ if (grammar) {
+ html = Prism.highlight(code, grammar, lang);
+ }
+
+ return { classLanguage, html };
+}
diff --git a/packages/astro-prism/src/index.ts b/packages/astro-prism/src/index.ts
new file mode 100644
index 000000000..f1dc0d801
--- /dev/null
+++ b/packages/astro-prism/src/index.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error
+export { default as Prism } from '../Prism.astro';
diff --git a/packages/astro-prism/internal.mjs b/packages/astro-prism/src/plugin.ts
similarity index 83%
rename from packages/astro-prism/internal.mjs
rename to packages/astro-prism/src/plugin.ts
index 22a5f9d48..cbee66c33 100644
--- a/packages/astro-prism/internal.mjs
+++ b/packages/astro-prism/src/plugin.ts
@@ -1,13 +1,14 @@
-export function addAstro(Prism) {
+export function addAstro(Prism: typeof import('prismjs')) {
if (Prism.languages.astro) {
return;
}
- let scriptLang;
+ let scriptLang: string;
if (Prism.languages.typescript) {
scriptLang = 'typescript';
} else {
scriptLang = 'javascript';
+ // eslint-disable-next-line no-console
console.warn(
'Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.'
);
@@ -19,11 +20,7 @@ export function addAstro(Prism) {
let braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
let spread = /(?:\{*\.{3}(?:[^{}]|)*\})/.source;
- /**
- * @param {string} source
- * @param {string} [flags]
- */
- function re(source, flags) {
+ function re(source: string, flags?: string) {
source = source
.replace(//g, function () {
return space;
@@ -40,16 +37,18 @@ export function addAstro(Prism) {
spread = re(spread).source;
Prism.languages.astro = Prism.languages.extend('markup', script);
- Prism.languages.astro.tag.pattern = re(
+
+ (Prism.languages.astro as any).tag.pattern = re(
/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/
.source
);
- Prism.languages.astro.tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
- Prism.languages.astro.tag.inside['attr-value'].pattern =
+ (Prism.languages.astro as any).tag.inside['tag'].pattern = /^<\/?[^\s>\/]*/i;
+ (Prism.languages.astro as any).tag.inside['attr-value'].pattern =
/=(?!\{)(?:"(?:\\[^]|[^\\"])*"|'(?:\\[^]|[^\\'])*'|[^\s'">]+)/i;
- Prism.languages.astro.tag.inside['tag'].inside['class-name'] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
- Prism.languages.astro.tag.inside['comment'] = script['comment'];
+ (Prism.languages.astro as any).tag.inside['tag'].inside['class-name'] =
+ /^[A-Z]\w*(?:\.[A-Z]\w*)*$/;
+ (Prism.languages.astro as any).tag.inside['comment'] = script['comment'];
Prism.languages.insertBefore(
'inside',
@@ -60,7 +59,7 @@ export function addAstro(Prism) {
inside: Prism.languages.astro,
},
},
- Prism.languages.astro.tag
+ (Prism.languages.astro as any).tag
);
Prism.languages.insertBefore(
@@ -80,11 +79,11 @@ export function addAstro(Prism) {
alias: `language-${scriptLang}`,
},
},
- Prism.languages.astro.tag
+ (Prism.languages.astro as any).tag
);
// The following will handle plain text inside tags
- let stringifyToken = function (token) {
+ let stringifyToken = function (token: any) {
if (!token) {
return '';
}
@@ -97,8 +96,8 @@ export function addAstro(Prism) {
return token.content.map(stringifyToken).join('');
};
- let walkTokens = function (tokens) {
- let openedTags = [];
+ let walkTokens = function (tokens: any) {
+ let openedTags: any[] = [];
for (let i = 0; i < tokens.length; i++) {
let token = tokens[i];
@@ -169,7 +168,7 @@ export function addAstro(Prism) {
i--;
}
- tokens[i] = new Prism.Token('plain-text', plainText, null, plainText);
+ tokens[i] = new Prism.Token('plain-text', plainText, undefined, plainText);
}
}
@@ -179,7 +178,7 @@ export function addAstro(Prism) {
}
};
- Prism.hooks.add('after-tokenize', function (env) {
+ Prism.hooks.add('after-tokenize', function (env: any) {
if (env.language !== 'astro') {
return;
}
diff --git a/packages/astro-prism/tsconfig.json b/packages/astro-prism/tsconfig.json
new file mode 100644
index 000000000..c56abb57e
--- /dev/null
+++ b/packages/astro-prism/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "include": ["src"],
+ "compilerOptions": {
+ "allowJs": true,
+ "target": "ES2020",
+ "module": "ES2020",
+ "outDir": "./dist"
+ }
+}
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 157dc28a3..19e707edb 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -87,7 +87,6 @@
"@astrojs/compiler": "^0.22.1",
"@astrojs/language-server": "^0.20.0",
"@astrojs/markdown-remark": "^0.13.0",
- "@astrojs/prism": "0.6.1",
"@astrojs/telemetry": "^0.4.1",
"@astrojs/webapi": "^0.12.0",
"@babel/core": "^7.18.2",
@@ -124,7 +123,6 @@
"postcss": "^8.4.14",
"postcss-load-config": "^3.1.4",
"preferred-pm": "^3.0.3",
- "prismjs": "^1.28.0",
"prompts": "^2.4.2",
"recast": "^0.20.5",
"rehype": "^12.0.1",
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json
index d4e2667d8..121a453b7 100644
--- a/packages/integrations/mdx/package.json
+++ b/packages/integrations/mdx/package.json
@@ -37,8 +37,6 @@
"es-module-lexer": "^0.10.5",
"github-slugger": "^1.4.0",
"gray-matter": "^4.0.3",
- "mdast-util-mdx": "^2.0.0",
- "prismjs": "^1.28.0",
"rehype-raw": "^6.1.1",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1",
diff --git a/packages/integrations/mdx/src/remark-prism.ts b/packages/integrations/mdx/src/remark-prism.ts
index 4a324dd1d..7dc05f358 100644
--- a/packages/integrations/mdx/src/remark-prism.ts
+++ b/packages/integrations/mdx/src/remark-prism.ts
@@ -1,48 +1,6 @@
-// TODO: discuss extracting this file to @astrojs/prism
-import { addAstro } from '@astrojs/prism/internal';
-import Prism from 'prismjs';
-import loadLanguages from 'prismjs/components/index.js';
+import { runHighlighterWithAstro } from '@astrojs/prism/dist/highlighter';
import { visit } from 'unist-util-visit';
-const languageMap = new Map([['ts', 'typescript']]);
-
-function runHighlighter(lang: string, code: string) {
- let classLanguage = `language-${lang}`;
-
- if (lang == null) {
- lang = 'plaintext';
- }
-
- const ensureLoaded = (language: string) => {
- if (language && !Prism.languages[language]) {
- loadLanguages([language]);
- }
- };
-
- if (languageMap.has(lang)) {
- ensureLoaded(languageMap.get(lang)!);
- } else if (lang === 'astro') {
- ensureLoaded('typescript');
- addAstro(Prism);
- } else {
- ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
- ensureLoaded(lang);
- }
-
- if (lang && !Prism.languages[lang]) {
- // eslint-disable-next-line no-console
- console.warn(`Unable to load the language: ${lang}`);
- }
-
- const grammar = Prism.languages[lang];
- let html = code;
- if (grammar) {
- html = Prism.highlight(code, grammar, lang);
- }
-
- return { classLanguage, html };
-}
-
/** */
export default function remarkPrism() {
return (tree: any) =>
@@ -50,7 +8,7 @@ export default function remarkPrism() {
let { lang, value } = node;
node.type = 'html';
- let { html, classLanguage } = runHighlighter(lang, value);
+ let { html, classLanguage } = runHighlighterWithAstro(lang, value);
let classes = [classLanguage];
node.value = `