Skip to content

Commit e640211

Browse files
andreruffertandreruffert
committed
feat: config.setup, config.tokenize, config.tokenTypes
Removes config.tokenizer (668a297). New replacement for customization: - config.tokenTypes - config.setup - config.tokenize
1 parent 006d959 commit e640211

File tree

5 files changed

+59
-94
lines changed

5 files changed

+59
-94
lines changed

‎index.html‎

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,16 @@
3232
<script>
3333
window.she = window.she || {};
3434
window.she.config = {
35+
// Define languages to support
3536
languages: ['html', 'css', 'js', 'jsx', 'md'],
36-
// Optional: language specific token type overwrites
37+
// Language specific token type overwrites
3738
languageTokens: {
3839
css: ['important'],
3940
md: ['title', 'list'],
4041
},
41-
// Optional: extend/customize tokenizer
42-
// tokenizer: {
43-
// async setup() {},
44-
// tokenize: () => [],
45-
// }
42+
// Customize setup/tokenize method
43+
// async setup() {},
44+
// tokenize: () => [],
4645
}
4746
</script>
4847
</head>
@@ -92,58 +91,25 @@
9291
</syntax-highlight>
9392

9493
<script type="module">
95-
// /**
96-
// * Option 1. autoload - default
97-
// */
98-
// import '/src/index.js'
99-
import SyntaxHighlightElement from '/src/index.js'
100-
// import SyntaxHighlightElement from '/src/index.js?define=false'
101-
// SyntaxHighlightElement.config.languages = ['html', 'css', 'js', 'jsx', 'md'];
102-
// window.SyntaxHighlightElement = await SyntaxHighlightElement.define();
103-
10494
/**
105-
* Option 2. Opt out of prism autoload by manually importing prism core
95+
* Option 1. autoload - default
10696
*/
107-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-core.min.js'
108-
// import SyntaxHighlightElement from '/src/index.js?define=false'
97+
import '/src/index.js'
10998

11099
/**
111-
* Option 2.a. Load lang deps manually (without dependency resolution)
100+
* Option 2.a. Opt out of prism autoload by manually importing prism core
101+
*/
102+
// import 'prismjs/components/prism-core'
103+
/**
104+
* Option 2.b. Load lang deps manually (without dependency resolution)
112105
*/
113-
// // - CDN
114-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-markup.min.js'
115-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-css.min.js'
116-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-clike.min.js'
117-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-javascript.min.js'
118-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-jsx.min.js'
119-
// import 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0/components/prism-markdown.min.js'
120-
// // - npm
121106
// import 'prismjs/components/prism-markup'
122107
// import 'prismjs/components/prism-css'
123108
// import 'prismjs/components/prism-clike'
124109
// import 'prismjs/components/prism-javascript'
125110
// import 'prismjs/components/prism-jsx'
126111
// import 'prismjs/components/prism-markdown'
127-
128-
/**
129-
* Option 2.b. resolve language dependencies and load from URL/CDN
130-
*/
131-
// - CDN
132-
// import { loadPrismLanguage } from '/src/tokenizer/prism.js'
133-
// await loadPrismLanguage({
134-
// baseUrl: 'https://unpkg.com/prismjs@1.30.0',
135-
// language: window.she.config.languages
136-
// });
137-
// // - npm
138-
// import { resolveLanguageDependencies } from '/src/tokenizer/prism.js'
139-
// const langDeps = resolveLanguageDependencies(window.she.config.languages);
140-
// for await (const lang of langDeps) {
141-
// const importPath = `prismjs/components/prism-${lang}`
142-
// await import(importPath);
143-
// console.log({importPath})
144-
// }
145-
// // - Manually define SyntaxHighlightElement with ?define=false once all dependecies are loaded
146-
// window.SyntaxHighlightElement = await SyntaxHighlightElement.define();
112+
// ...
147113
</script>
148114
<script>
149115
document.addEventListener('DOMContentLoaded', () => {

‎src/config.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,37 @@
11
import { NAMESPACE } from './constants';
2-
import { tokenizer as defaultTokenizer } from './tokenizer/prism';
2+
import { loadPrismCore, loadPrismLanguage, tokenize, tokenTypes } from './tokenizer/prism';
33

44
/**
55
* @typedef Config
66
* @type {object}
7-
* @property {string[]} languages - Languages.
8-
* @property {{ [key: string]: string[] }} languageTokens - Language specific token types.
9-
* @property {object} tokenizer - Tokenizer.
7+
* @property {string[]} languages - Syntax language grammars to autoload.
8+
* @property {string[]} tokenTypes - Language token types.
9+
* @property {{[key: string]: string[]}} languageTokens - Language specific token types.
10+
* @property {function} setup - Runs before the custom element gets defined in the registry.
11+
* @property {function} tokenize - Used to tokenize the text.
1012
*/
1113

1214
/** @type {Config} */
13-
export default Object.assign(
15+
export const config = Object.assign(
1416
{
1517
languages: ['markup', 'css', 'javascript'],
18+
tokenTypes,
1619
languageTokens: {},
17-
tokenizer: Object.assign(defaultTokenizer, window[NAMESPACE]?.config?.tokenizer || {}),
20+
async setup() {
21+
try {
22+
if (!window.Prism) {
23+
const prismBaseUrl = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0';
24+
await loadPrismCore(prismBaseUrl);
25+
await loadPrismLanguage({
26+
baseUrl: prismBaseUrl,
27+
language: config.languages,
28+
});
29+
}
30+
} catch (error) {
31+
console.error(error);
32+
}
33+
},
34+
tokenize,
1835
},
1936
window[NAMESPACE]?.config || {},
2037
);

‎src/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ export { SyntaxHighlightElement, setupTokenHighlights };
66
export default SyntaxHighlightElement;
77

88
window[NAMESPACE] = window[NAMESPACE] || {};
9+
window.SyntaxHighlightElement = SyntaxHighlightElement;
910

1011
if (!new URL(import.meta.url).searchParams.has('define', 'false')) {
11-
window.SyntaxHighlightElement = await SyntaxHighlightElement.define();
12+
await SyntaxHighlightElement.define();
1213
}

‎src/syntax-highlight-element.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import config from './config';
1+
import { config } from './config';
2+
import { setupTokenHighlights } from './utils';
23

34
export class SyntaxHighlightElement extends HTMLElement {
45
static async define(tagName = 'syntax-highlight', registry = customElements) {
@@ -8,14 +9,13 @@ export class SyntaxHighlightElement extends HTMLElement {
89
}
910

1011
if (!registry.get(tagName)) {
11-
config?.tokenizer?.setup && (await config.tokenizer.setup(config));
12+
typeof config?.setup === 'function' && (await config.setup());
13+
setupTokenHighlights(config.tokenTypes, { languageTokens: config.languageTokens });
1214
registry.define(tagName, SyntaxHighlightElement);
1315
return SyntaxHighlightElement;
1416
}
1517
}
1618

17-
// static config = config;
18-
1919
#internals;
2020
#highlights = new Set();
2121

@@ -56,7 +56,7 @@ export class SyntaxHighlightElement extends HTMLElement {
5656
*/
5757
paintTokenHighlights() {
5858
// Tokenize the text
59-
const tokens = config.tokenizer?.tokenize(this.contentElement.innerText, this.language) || [];
59+
const tokens = config.tokenize(this.contentElement.innerText, this.language) || [];
6060
const languageTokenTypes = config.languageTokens?.[this.language] || [];
6161

6262
// Paint highlights

‎src/tokenizer/prism.js‎

Lines changed: 16 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,24 @@
1-
import { setupTokenHighlights } from '../utils';
2-
3-
export const tokenizer = {
4-
async setup(config) {
5-
try {
6-
if (!window.Prism) {
7-
const prismBaseUrl = 'https://cdn.jsdelivr.net/npm/prismjs@1.30.0';
8-
await loadPrismCore(prismBaseUrl);
9-
await loadPrismLanguage({
10-
baseUrl: prismBaseUrl,
11-
language: config.languages,
12-
});
13-
}
14-
setupTokenHighlights(tokenTypes, { languageTokens: config.languageTokens });
15-
} catch (error) {
16-
console.error(error);
17-
}
18-
},
19-
/**
20-
*
21-
* @param {string} text - The text to tokenize.
22-
* @param {string} language - The syntax language grammar.
23-
* @returns {Array} - An array of flattened prismjs tokens.
24-
*/
25-
tokenize(text, language) {
26-
const lang = window.Prism.languages[language] || undefined;
27-
if (!lang) {
28-
console.warn(`window.Prism.languages.${language} is undefined.`);
29-
return [];
30-
}
31-
const tokens = window.Prism.tokenize(text, lang);
32-
return tokens.flatMap(getFlatToken);
33-
},
34-
};
1+
/**
2+
*
3+
* @param {string} text - The text to tokenize.
4+
* @param {string} language - The syntax language grammar.
5+
* @returns {Array} - An array of flattened prismjs tokens.
6+
*/
7+
export function tokenize(text, language) {
8+
const lang = window.Prism.languages[language] || undefined;
9+
if (!lang) {
10+
console.warn(`window.Prism.languages.${language} is undefined.`);
11+
return [];
12+
}
13+
const tokens = window.Prism.tokenize(text, lang);
14+
return tokens.flatMap(getFlatToken);
15+
}
3516

3617
/**
3718
* Standard tokens
3819
* https://prismjs.com/tokens.html#standard-tokens
3920
*/
40-
const tokenTypes = [
21+
export const tokenTypes = [
4122
'atrule',
4223
'attr-name',
4324
'attr-value',

0 commit comments

Comments
 (0)