diff --git a/package-lock.json b/package-lock.json index a00fd58639..92c1391e5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@size-limit/esbuild-why": "^8.2.6", "@size-limit/preset-small-lib": "^8.2.6", "@types/jest": "^29.0.0", + "@types/prismjs": "^1.26.3", "@types/react": "17.0.11", "@typescript-eslint/eslint-plugin": "^6.19.1", "@typescript-eslint/parser": "^6.19.1", @@ -45,6 +46,7 @@ "next-sitemap": "4.2.3", "npm-run-all": "4.1.5", "prettier": "2.3.2", + "prismjs": "^1.29.0", "react": "^18.2.0", "react-dom": "^18.2.0", "rimraf": "2.7.1", @@ -3030,6 +3032,12 @@ "integrity": "sha512-FwAQwMRbkhx0J6YELkwIpciVzCcgEqXEbIrIn3a2P5d3kGEHQ3wVhlN3YdVepYP+bZzCYO6OjmD4o9TGOZ40rA==", "dev": true }, + "node_modules/@types/prismjs": { + "version": "1.26.3", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz", + "integrity": "sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==", + "dev": true + }, "node_modules/@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", @@ -11557,6 +11565,15 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -16339,6 +16356,12 @@ "integrity": "sha512-FwAQwMRbkhx0J6YELkwIpciVzCcgEqXEbIrIn3a2P5d3kGEHQ3wVhlN3YdVepYP+bZzCYO6OjmD4o9TGOZ40rA==", "dev": true }, + "@types/prismjs": { + "version": "1.26.3", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz", + "integrity": "sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==", + "dev": true + }, "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", @@ -22724,6 +22747,12 @@ } } }, + "prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true + }, "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", diff --git a/package.json b/package.json index de089f4c17..eb22adcf9e 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "@size-limit/esbuild-why": "^8.2.6", "@size-limit/preset-small-lib": "^8.2.6", "@types/jest": "^29.0.0", + "@types/prismjs": "^1.26.3", "@types/react": "17.0.11", "@typescript-eslint/eslint-plugin": "^6.19.1", "@typescript-eslint/parser": "^6.19.1", @@ -119,6 +120,7 @@ "next-sitemap": "4.2.3", "npm-run-all": "4.1.5", "prettier": "2.3.2", + "prismjs": "^1.29.0", "react": "^18.2.0", "react-dom": "^18.2.0", "rimraf": "2.7.1", diff --git a/website/src/static/markdown.ts b/website/src/static/markdown.ts index e8e3c6ab12..35f9fd8668 100644 --- a/website/src/static/markdown.ts +++ b/website/src/static/markdown.ts @@ -1,6 +1,6 @@ import { Marked } from 'marked'; import { markedHighlight } from 'marked-highlight'; -import { Prism as prism } from './prism'; +import prism from 'prismjs'; import type { TypeDefs, CallSignature, TypeDefinition } from '../TypeDefs'; export type MarkdownContext = { @@ -23,15 +23,16 @@ export function markdown(content: string, context: MarkdownContext): string { const defs = context.defs; - // functions come before keywords + // functions comsidee before keywords + // the two following `insertBefore` do change the classes of the tokens, but is this still used? (visual output is the same) prism.languages.insertBefore('javascript', 'keyword', { var: /\b(this)\b/g, 'block-keyword': /\b(if|else|while|for|function)\b/g, primitive: /\b(true|false|null|undefined)\b/g, - function: prism.languages.function, + function: prism.languages.javascript.function, }); - prism.languages.insertBefore('javascript', { + prism.languages.insertBefore('javascript', 'keyword', { qualifier: /\b[A-Z][a-z0-9_]+/g, }); diff --git a/website/src/static/prism.ts b/website/src/static/prism.ts deleted file mode 100644 index 905ce5aad4..0000000000 --- a/website/src/static/prism.ts +++ /dev/null @@ -1,705 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-nocheck -/* eslint-disable */ - -/* ********************************************** - Begin prism-core.js -********************************************** */ - -const self = - typeof window !== 'undefined' - ? window // if in browser - : typeof WorkerGlobalScope !== 'undefined' && - self instanceof WorkerGlobalScope - ? self // if in worker - : {}; // if in node js - -/** - * Prism: Lightweight, robust, elegant syntax highlighting - * MIT license http://www.opensource.org/licenses/mit-license.php/ - * @author Lea Verou http://lea.verou.me - */ - -export const Prism = (function () { - // Private helper vars - var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; - - var _ = (self.Prism = { - util: { - encode: function (tokens) { - if (tokens instanceof Token) { - return new Token( - tokens.type, - _.util.encode(tokens.content), - tokens.alias - ); - } else if (_.util.type(tokens) === 'Array') { - return tokens.map(_.util.encode); - } else { - return tokens - .replace(/&/g, '&') - .replace(/ text.length) { - // Something went terribly wrong, ABORT, ABORT! - break tokenloop; - } - - if (str instanceof Token) { - continue; - } - - pattern.lastIndex = 0; - - var match = pattern.exec(str); - - if (match) { - if (lookbehind) { - lookbehindLength = match[1].length; - } - - var from = match.index - 1 + lookbehindLength, - match = match[0].slice(lookbehindLength), - len = match.length, - to = from + len, - before = str.slice(0, from + 1), - after = str.slice(to + 1); - - var args = [i, 1]; - - if (before) { - args.push(before); - } - - var wrapped = new Token( - token, - inside ? _.tokenize(match, inside) : match, - alias - ); - - args.push(wrapped); - - if (after) { - args.push(after); - } - - Array.prototype.splice.apply(strarr, args); - } - } - } - } - - return strarr; - }, - - hooks: { - all: {}, - - add: function (name, callback) { - var hooks = _.hooks.all; - - hooks[name] = hooks[name] || []; - - hooks[name].push(callback); - }, - - run: function (name, env) { - var callbacks = _.hooks.all[name]; - - if (!callbacks || !callbacks.length) { - return; - } - - for (var i = 0, callback; (callback = callbacks[i++]); ) { - callback(env); - } - }, - }, - }); - - var Token = (_.Token = function (type, content, alias) { - this.type = type; - this.content = content; - this.alias = alias; - }); - - Token.stringify = function (o, language, parent) { - if (typeof o == 'string') { - return o; - } - - if (Object.prototype.toString.call(o) == '[object Array]') { - return o - .map(function (element) { - return Token.stringify(element, language, o); - }) - .join(''); - } - - var env = { - type: o.type, - content: Token.stringify(o.content, language, parent), - tag: 'span', - classes: ['token', o.type], - attributes: {}, - language: language, - parent: parent, - }; - - if (env.type == 'comment') { - env.attributes['spellcheck'] = 'true'; - } - - if (o.alias) { - var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias]; - Array.prototype.push.apply(env.classes, aliases); - } - - _.hooks.run('wrap', env); - - var attributes = ''; - - for (var name in env.attributes) { - attributes += name + '="' + (env.attributes[name] || '') + '"'; - } - - return ( - '<' + - env.tag + - ' class="' + - env.classes.join(' ') + - '" ' + - attributes + - '>' + - env.content + - '' - ); - }; - - if (!self.document) { - if (!self.addEventListener) { - // in Node.js - return self.Prism; - } - // In worker - self.addEventListener( - 'message', - function (evt) { - var message = JSON.parse(evt.data), - lang = message.language, - code = message.code; - - self.postMessage( - JSON.stringify(_.util.encode(_.tokenize(code, _.languages[lang]))) - ); - self.close(); - }, - false - ); - - return self.Prism; - } - - // Get current script and highlight - var script = document.getElementsByTagName('script'); - - script = script[script.length - 1]; - - if (script) { - _.filename = script.src; - - if (document.addEventListener && !script.hasAttribute('data-manual')) { - document.addEventListener('DOMContentLoaded', _.highlightAll); - } - } - - return self.Prism; -})(); - -// if (typeof module !== 'undefined' && module.exports) { -// module.exports = Prism; -// } - -/* ********************************************** - Begin prism-markup.js -********************************************** */ - -Prism.languages.markup = { - comment: //g, - prolog: /<\?.+?\?>/, - doctype: //, - cdata: //i, - tag: { - pattern: - /<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi, - inside: { - tag: { - pattern: /^<\/?[\w:-]+/i, - inside: { - punctuation: /^<\/?/, - namespace: /^[\w-]+?:/, - }, - }, - 'attr-value': { - pattern: /=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi, - inside: { - punctuation: /=|>|"/g, - }, - }, - punctuation: /\/?>/g, - 'attr-name': { - pattern: /[\w:-]+/g, - inside: { - namespace: /^[\w-]+?:/, - }, - }, - }, - }, - entity: /\&#?[\da-z]{1,8};/gi, -}; - -// Plugin to make entity title show the real entity, idea by Roman Komarov -Prism.hooks.add('wrap', function (env) { - if (env.type === 'entity') { - env.attributes['title'] = env.content.replace(/&/, '&'); - } -}); - -/* ********************************************** - Begin prism-css.js -********************************************** */ - -Prism.languages.css = { - comment: /\/\*[\w\W]*?\*\//g, - atrule: { - pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi, - inside: { - punctuation: /[;:]/g, - }, - }, - url: /url\((["']?).*?\1\)/gi, - selector: /[^\{\}\s][^\{\};]*(?=\s*\{)/g, - property: /(\b|\B)[\w-]+(?=\s*:)/gi, - string: /("|')(\\?.)*?\1/g, - important: /\B!important\b/gi, - punctuation: /[\{\};:]/g, - function: /[-a-z0-9]+(?=\()/gi, -}; - -if (Prism.languages.markup) { - Prism.languages.insertBefore('markup', 'tag', { - style: { - pattern: /[\w\W]*?<\/style>/gi, - inside: { - tag: { - pattern: /|<\/style>/gi, - inside: Prism.languages.markup.tag.inside, - }, - rest: Prism.languages.css, - }, - alias: 'language-css', - }, - }); - - Prism.languages.insertBefore( - 'inside', - 'attr-value', - { - 'style-attr': { - pattern: /\s*style=("|').+?\1/gi, - inside: { - 'attr-name': { - pattern: /^\s*style/gi, - inside: Prism.languages.markup.tag.inside, - }, - punctuation: /^\s*=\s*['"]|['"]\s*$/, - 'attr-value': { - pattern: /.+/gi, - inside: Prism.languages.css, - }, - }, - alias: 'language-css', - }, - }, - Prism.languages.markup.tag - ); -} - -/* ********************************************** - Begin prism-clike.js -********************************************** */ - -Prism.languages.clike = { - comment: [ - { - pattern: /(^|[^\\])\/\*[\w\W]*?\*\//g, - lookbehind: true, - }, - { - pattern: /(^|[^\\:])\/\/.*?(\r?\n|$)/g, - lookbehind: true, - }, - ], - string: /("|')(\\?.)*?\1/g, - 'class-name': { - pattern: - /((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi, - lookbehind: true, - inside: { - punctuation: /(\.|\\)/, - }, - }, - keyword: - /\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g, - boolean: /\b(true|false)\b/g, - function: { - pattern: /[a-z0-9_]+\(/gi, - inside: { - punctuation: /\(/, - }, - }, - number: /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g, - operator: /[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g, - ignore: /&(lt|gt|amp);/gi, - punctuation: /[{}[\];(),.:]/g, -}; - -/* ********************************************** - Begin prism-javascript.js -********************************************** */ - -Prism.languages.javascript = Prism.languages.extend('clike', { - keyword: - /\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g, - number: /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g, -}); - -Prism.languages.insertBefore('javascript', 'keyword', { - regex: { - pattern: - /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g, - lookbehind: true, - }, -}); - -if (Prism.languages.markup) { - Prism.languages.insertBefore('markup', 'tag', { - script: { - pattern: /[\w\W]*?<\/script>/gi, - inside: { - tag: { - pattern: /|<\/script>/gi, - inside: Prism.languages.markup.tag.inside, - }, - rest: Prism.languages.javascript, - }, - alias: 'language-javascript', - }, - }); -} - -/* ********************************************** - Begin prism-file-highlight.js -********************************************** */ - -(function () { - if (!self.Prism || !self.document || !document.querySelector) { - return; - } - - var Extensions = { - js: 'javascript', - html: 'markup', - svg: 'markup', - xml: 'markup', - py: 'python', - rb: 'ruby', - }; - - Array.prototype.slice - .call(document.querySelectorAll('pre[data-src]')) - .forEach(function (pre) { - var src = pre.getAttribute('data-src'); - var extension = (src.match(/\.(\w+)$/) || [, ''])[1]; - var language = Extensions[extension] || extension; - - var code = document.createElement('code'); - code.className = 'language-' + language; - - pre.textContent = ''; - - code.textContent = 'Loading…'; - - pre.appendChild(code); - - var xhr = new XMLHttpRequest(); - - xhr.open('GET', src, true); - - xhr.onreadystatechange = function () { - if (xhr.readyState == 4) { - if (xhr.status < 400 && xhr.responseText) { - code.textContent = xhr.responseText; - - Prism.highlightElement(code); - } else if (xhr.status >= 400) { - code.textContent = - '✖ Error ' + - xhr.status + - ' while fetching file: ' + - xhr.statusText; - } else { - code.textContent = '✖ Error: File does not exist or is empty'; - } - } - }; - - xhr.send(null); - }); -})();