Skip to content

Commit 034769a

Browse files
heppokofrontendheppokofrontend
committed
⚙️ Build
1 parent 69c4b82 commit 034769a

16 files changed

+86
-93
lines changed

‎dist/class/HTMLCodeBlockElement.d.ts‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,37 @@
1-
export declare namespace Endgine {
2-
type Options = {
1+
export declare type EndgineProps = {
2+
src: string;
3+
options?: {
34
/** Language Mode Name */
45
language: string;
56
};
6-
type Result = {
7-
markup: string;
8-
};
9-
export type callback = (src: string, options?: Options) => Result;
10-
export {};
11-
}
12-
/** The HTML element for highlighting code fragments. */
7+
};
8+
export declare type EndgineFunction = (props: EndgineProps) => {
9+
markup: string;
10+
};
1311
export default class HTMLCodeBlockElement extends HTMLElement {
1412
#private;
1513
/**
1614
* Returns the result of highlighting the received source code string.
1715
* Before running `customElements.define()`,
1816
* you need to assign it directly to `HTMLCodeBlockElement.highlight`.
19-
* @param src - Source code string for highlight
20-
* @param options - Option for highlight
21-
* @return - Object of the highlight result
2217
*/
23-
static highlight: Endgine.callback;
18+
static get highlight(): EndgineFunction;
19+
static set highlight(endgine: EndgineFunction);
2420
/** @return - Syntax Highlighted Source Code */
25-
get value(): any;
26-
set value(src: any);
21+
get value(): string;
22+
set value(src: unknown);
2723
/**
2824
* The accessible name of code block
2925
* @return - The value of the label attribute
3026
*/
31-
get label(): any;
32-
set label(value: any);
27+
get label(): string;
28+
set label(value: unknown);
3329
/**
3430
* Language name
3531
* @return - The value of the language attribute
3632
*/
37-
get language(): any;
38-
set language(value: any);
33+
get language(): string;
34+
set language(value: unknown);
3935
/**
4036
* The flag to display the UI
4137
* @return - With or without controls attribute

‎dist/class/HTMLCodeBlockElement.js‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
"use strict";
22
Object.defineProperty(exports, "__esModule", { value: true });
3-
/** The HTML element for highlighting code fragments. */
43
class HTMLCodeBlockElement extends HTMLElement {
4+
static #defaultEndgine = ({ src }) => ({
5+
markup: src,
6+
});
7+
static #endgine = HTMLCodeBlockElement.#defaultEndgine;
58
/**
69
* Returns the result of highlighting the received source code string.
710
* Before running `customElements.define()`,
811
* you need to assign it directly to `HTMLCodeBlockElement.highlight`.
9-
* @param src - Source code string for highlight
10-
* @param options - Option for highlight
11-
* @return - Object of the highlight result
1212
*/
13-
static highlight = (src, options) => {
14-
throw new TypeError('The syntax highlighting engine is not set to `HTMLCodeBlockElement.highlight`.');
15-
return { markup: '' };
13+
static get highlight() {
14+
const endgine = HTMLCodeBlockElement.#endgine;
15+
if (endgine === HTMLCodeBlockElement.#defaultEndgine) {
16+
throw new TypeError('The syntax highlighting engine is not set to `HTMLCodeBlockElement.highlight`.');
17+
}
18+
return endgine;
19+
}
20+
static set highlight(endgine) {
21+
HTMLCodeBlockElement.#endgine = endgine;
22+
}
23+
static #createSlotElement = ({ name, id = '', }) => {
24+
const slot = document.createElement('slot');
25+
slot.name = name;
26+
if (id) {
27+
slot.id = id;
28+
}
29+
return slot;
1630
};
1731
/** Observer to monitor the editing of the content of this element. */
1832
#observer = new MutationObserver(() => {
@@ -23,30 +37,17 @@ class HTMLCodeBlockElement extends HTMLElement {
2337
for (const slot of slots) {
2438
slot.remove();
2539
}
26-
this.#value = (this.textContent || this.getAttribute('value') || '').replace(/^\n/, '').replace(/\n$/, '');
40+
this.#value = (this.textContent || this.getAttribute('value') || '')
41+
.replace(/^\n/, '')
42+
.replace(/\n$/, '');
2743
this.#render();
2844
});
2945
/** Slot elements for Shadow DOM content */
30-
#slots = (() => {
31-
/**
32-
* @param name - The value of name attribute for the slot element
33-
* @param id - The value of id attribute for the slot element
34-
* @return - The slot element
35-
*/
36-
const mkslot = (name, id = '') => {
37-
const slot = document.createElement('slot');
38-
slot.name = name;
39-
if (id) {
40-
slot.id = id;
41-
}
42-
return slot;
43-
};
44-
return {
45-
name: mkslot('name', 'name'),
46-
copyButton: mkslot('copy-button'),
47-
code: mkslot('code'),
48-
};
49-
})();
46+
#slots = {
47+
name: HTMLCodeBlockElement.#createSlotElement({ name: 'name', id: 'name' }),
48+
copyButton: HTMLCodeBlockElement.#createSlotElement({ name: 'copy-button' }),
49+
code: HTMLCodeBlockElement.#createSlotElement({ name: 'code' }),
50+
};
5051
/**
5152
* True when rendered at least once.
5253
* The purpose of this flag is to available the operation the following usage.
@@ -113,11 +114,8 @@ class HTMLCodeBlockElement extends HTMLElement {
113114
}, 1500);
114115
};
115116
})();
116-
/**
117-
* Outputs the resulting syntax-highlighted markup to the DOM.
118-
* @param this - instance
119-
*/
120-
#render = function () {
117+
/** Outputs the resulting syntax-highlighted markup to the DOM. */
118+
#render() {
121119
if (!this.parentNode) {
122120
return;
123121
}
@@ -129,8 +127,11 @@ class HTMLCodeBlockElement extends HTMLElement {
129127
return this.#value;
130128
})();
131129
/** The resulting syntax-highlighted markup */
132-
const { markup } = HTMLCodeBlockElement.highlight(src, {
133-
language: this.#language,
130+
const { markup } = HTMLCodeBlockElement.highlight({
131+
src,
132+
options: {
133+
language: this.#language,
134+
},
134135
});
135136
// initialize
136137
this.textContent = '';
@@ -145,7 +146,7 @@ class HTMLCodeBlockElement extends HTMLElement {
145146
this.#observer.observe(this, {
146147
childList: true,
147148
});
148-
};
149+
}
149150
/** @return - Syntax Highlighted Source Code */
150151
get value() {
151152
return this.#value;
@@ -223,11 +224,7 @@ class HTMLCodeBlockElement extends HTMLElement {
223224
this.#render();
224225
}
225226
static get observedAttributes() {
226-
return [
227-
'label',
228-
'language',
229-
'controls',
230-
];
227+
return ['label', 'language', 'controls'];
231228
}
232229
attributeChangedCallback(attrName, oldValue, newValue) {
233230
if (oldValue === newValue) {
@@ -247,8 +244,7 @@ class HTMLCodeBlockElement extends HTMLElement {
247244
}
248245
}
249246
connectedCallback() {
250-
if (this.#rendered === false &&
251-
this.#value === '') {
247+
if (this.#rendered === false && this.#value === '') {
252248
this.#value = this.textContent || '';
253249
}
254250
this.#rendered = true;
@@ -316,7 +312,9 @@ class HTMLCodeBlockElement extends HTMLElement {
316312
/* -------------------------------------------------------------------------
317313
* Hard private props initialize
318314
* ---------------------------------------------------------------------- */
319-
this.#value = (this.textContent || '').replace(/^\n/, '').replace(/\n$/, '');
315+
this.#value = (this.textContent || '')
316+
.replace(/^\n/, '')
317+
.replace(/\n$/, '');
320318
this.#label = a11yName.textContent || '';
321319
this.#language = this.getAttribute('language') || '';
322320
this.#controls = this.getAttribute('controls') !== null;

‎dist/utils/add-style.d.ts‎ renamed to ‎dist/effects/add-style.d.ts‎

File renamed without changes.

‎dist/utils/add-style.js‎ renamed to ‎dist/effects/add-style.js‎

File renamed without changes.

‎dist/index.all.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import CustomElementConstructor from './class/HTMLCodeBlockElement';
2-
import './utils/add-style';
2+
import './effects/add-style';
33
export declare const HTMLCodeBlockElement: typeof CustomElementConstructor;

‎dist/index.all.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
44
};
55
Object.defineProperty(exports, "__esModule", { value: true });
66
exports.HTMLCodeBlockElement = void 0;
7+
const highlight_js_1 = __importDefault(require("highlight.js"));
78
const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
8-
const highlight_1 = require("./utils/highlight");
9-
require("./utils/add-style");
10-
const hljs = require('highlight.js');
11-
HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(hljs);
9+
const createHighlightCallback_1 = require("./utils/createHighlightCallback");
10+
require("./effects/add-style");
11+
HTMLCodeBlockElement_1.default.highlight = (0, createHighlightCallback_1.createHighlightCallback)(highlight_js_1.default);
1212
customElements.define('code-block', HTMLCodeBlockElement_1.default);
1313
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

‎dist/index.common.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import CustomElementConstructor from './class/HTMLCodeBlockElement';
2-
import './utils/add-style';
2+
import './effects/add-style';
33
export declare const HTMLCodeBlockElement: typeof CustomElementConstructor;

‎dist/index.common.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
44
};
55
Object.defineProperty(exports, "__esModule", { value: true });
66
exports.HTMLCodeBlockElement = void 0;
7+
const common_1 = __importDefault(require("highlight.js/lib/common"));
78
const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
8-
const highlight_1 = require("./utils/highlight");
9-
require("./utils/add-style");
10-
const hljs = require('highlight.js/lib/common');
11-
HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(hljs);
9+
const createHighlightCallback_1 = require("./utils/createHighlightCallback");
10+
require("./effects/add-style");
11+
HTMLCodeBlockElement_1.default.highlight = (0, createHighlightCallback_1.createHighlightCallback)(common_1.default);
1212
customElements.define('code-block', HTMLCodeBlockElement_1.default);
1313
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

‎dist/index.core.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import CustomElementConstructor from './class/HTMLCodeBlockElement';
2-
import './utils/add-style';
2+
import './effects/add-style';
33
export declare const HTMLCodeBlockElement: typeof CustomElementConstructor;

‎dist/index.core.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
44
};
55
Object.defineProperty(exports, "__esModule", { value: true });
66
exports.HTMLCodeBlockElement = void 0;
7+
const core_1 = __importDefault(require("highlight.js/lib/core"));
78
const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
8-
const highlight_1 = require("./utils/highlight");
9-
require("./utils/add-style");
10-
const hljs = require('highlight.js/lib/core');
11-
HTMLCodeBlockElement_1.default.highlight = highlight_1.mkHighlightCallback(hljs);
9+
const createHighlightCallback_1 = require("./utils/createHighlightCallback");
10+
require("./effects/add-style");
11+
HTMLCodeBlockElement_1.default.highlight = (0, createHighlightCallback_1.createHighlightCallback)(core_1.default);
1212
customElements.define('code-block', HTMLCodeBlockElement_1.default);
1313
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;

0 commit comments

Comments
 (0)