Skip to content

Commit 1d531c9

Browse files
heppokofrontendheppokofrontend
committed
2.0.4
1 parent 3032b9e commit 1d531c9

16 files changed

+242
-138
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
- The test of `value` props
1111
- The test of `textContent` props
1212

13+
## [2.0.4] - 2023-05-21
14+
15+
- Update supporting for usage on React
16+
- Add data-id on the style element
17+
1318
## [2.0.0] - 2022-12-22
1419

1520
- Update node version

‎README.md‎

Lines changed: 53 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -145,17 +145,62 @@ This package contains the global type files for React.
145145

146146
```tsx
147147
// CodeBlock.tsx
148-
import React, {useEffect, CodeBlockHTMLAttributes} from 'react';
148+
import {CodeBlockProps} from '@heppokofrontend/html-code-block-element/dist/manual';
149+
import styleSheet from '@heppokofrontend/html-code-block-element/dist/styleSheet';
150+
import hljs from 'highlight.js/lib/common';
151+
import Head from 'next/head';
152+
import {useEffect} from 'react';
153+
154+
declare module 'react' {
155+
// A type for the properties of a function component
156+
interface CodeBlockHTMLAttributes<T> extends HTMLAttributes<T> {
157+
/** The accessible name of code block */
158+
label?: string | undefined;
159+
/** The Language name */
160+
language?: string | undefined;
161+
/** The flag to display the UI */
162+
controls?: boolean;
163+
}
164+
}
165+
166+
declare global {
167+
// A type for JSX markup
168+
namespace JSX {
169+
interface IntrinsicElements {
170+
'code-block': CodeBlockProps;
171+
}
172+
}
173+
}
149174

150-
export const CodeBlock: React.FC<CodeBlockHTMLAttributes<HTMLElement>> = ({
151-
children,
152-
...props
153-
}) => {
175+
type Props = Omit<React.CodeBlockHTMLAttributes<HTMLElement>, 'className'>;
176+
177+
export const CodeBlock = ({children, ...props}: Props) => {
154178
useEffect(() => {
155-
import(`@heppokofrontend/html-code-block-element`);
156-
});
179+
const loadWebComponent = async () => {
180+
// import('@heppokofrontend/html-code-block-element');
181+
const {HTMLCodeBlockElement, createHighlightCallback} = await import(
182+
'@heppokofrontend/html-code-block-element/dist/manual'
183+
);
184+
185+
if (customElements.get('code-block')) {
186+
return;
187+
}
188+
189+
HTMLCodeBlockElement.highlight = createHighlightCallback(hljs);
190+
customElements.define('code-block', HTMLCodeBlockElement);
191+
};
157192

158-
return <code-block {...props}>{children}</code-block>;
193+
loadWebComponent();
194+
}, []);
195+
196+
return (
197+
<>
198+
<Head>
199+
<style>{styleSheet}</style>
200+
</Head>
201+
<code-block {...props}>{children}</code-block>
202+
</>
203+
);
159204
};
160205
```
161206

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
font-family: inherit;
5555
}
5656
</style>
57-
<!-- <script src="../lib/html-code-block-element.common.min.js" defer></script> -->
57+
<!-- <script src="html-code-block-element.common.min.js" defer></script> -->
5858
<!-- <script src="https://cdn.jsdelivr.net/npm/@heppokofrontend/html-code-block-element/lib/html-code-block-element.core.min.js" defer></script> -->
5959
<script src="https://cdn.jsdelivr.net/npm/@heppokofrontend/html-code-block-element/lib/html-code-block-element.common.min.js" defer></script>
6060
<!-- <script src="https://cdn.jsdelivr.net/npm/@heppokofrontend/html-code-block-element/lib/html-code-block-element.all.min.js" defer></script> -->

‎dist/effects/add-style.d.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
declare const style: HTMLStyleElement;
2-
declare const link: Element | null;
1+
export {};

‎dist/effects/add-style.js‎

Lines changed: 7 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,15 @@
11
"use strict";
22
// Inserts the style element into the page for
3+
var __importDefault = (this && this.__importDefault) || function (mod) {
4+
return (mod && mod.__esModule) ? mod : { "default": mod };
5+
};
6+
Object.defineProperty(exports, "__esModule", { value: true });
7+
const stylesheet_1 = __importDefault(require("../stylesheet"));
38
// the default style of the code-block element.
49
const style = document.createElement('style');
510
const link = document.querySelector('head link, head style');
6-
style.textContent = `
7-
code-block {
8-
position: relative;
9-
margin: 1em 0;
10-
display: block;
11-
font-size: 80%;
12-
font-family: Consolas, Monaco, monospace;
13-
}
14-
code-block span[slot="name"] {
15-
position: absolute;
16-
top: 0;
17-
left: 0;
18-
z-index: 0;
19-
padding: 0 5px;
20-
max-width: 90%;
21-
color: #fff;
22-
white-space: pre;
23-
line-height: 1.5;
24-
overflow: hidden;
25-
text-overflow: ellipsis;
26-
background: #75758a;
27-
box-sizing: border-box;
28-
}
29-
code-block button {
30-
all: unset;
31-
outline: revert;
32-
position: absolute;
33-
right: 0;
34-
top: 0;
35-
z-index: 1;
36-
padding: 10px;
37-
display: block;
38-
font-family: inherit;
39-
color: #fff;
40-
opacity: 0;
41-
mix-blend-mode: exclusion;
42-
}
43-
44-
code-block:hover button,
45-
code-block button:focus {
46-
opacity: 1;
47-
}
48-
49-
code-block pre,
50-
code-block code {
51-
font-family: inherit;
52-
}
53-
code-block pre {
54-
margin: 0;
55-
}
56-
code-block code {
57-
padding: 1em;
58-
display: block;
59-
font-size: 100%;
60-
overflow-x: auto;
61-
}
62-
code-block[label]:not([label=""]) pre code {
63-
padding-top: 2em;
64-
}
65-
`;
11+
style.textContent = stylesheet_1.default;
12+
style.dataset.id = 'html-code-block-element';
6613
if (link) {
6714
link.before(style);
6815
}

‎dist/manual.d.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/// <reference types="highlight.js" />
2+
import CustomElementConstructor from './class/HTMLCodeBlockElement';
3+
export declare type CodeBlockProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLPreElement>, HTMLPreElement> & {
4+
/** The accessible name of code block */
5+
label?: string | undefined;
6+
/** The Language name */
7+
language?: string | undefined;
8+
/** The flag to display the UI */
9+
controls?: boolean;
10+
};
11+
export declare const HTMLCodeBlockElement: typeof CustomElementConstructor;
12+
export declare const createHighlightCallback: (endgine: import("highlight.js").HLJSApi) => import("./class/HTMLCodeBlockElement").EndgineFunction;

‎dist/manual.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
var __importDefault = (this && this.__importDefault) || function (mod) {
3+
return (mod && mod.__esModule) ? mod : { "default": mod };
4+
};
5+
Object.defineProperty(exports, "__esModule", { value: true });
6+
exports.createHighlightCallback = exports.HTMLCodeBlockElement = void 0;
7+
const HTMLCodeBlockElement_1 = __importDefault(require("./class/HTMLCodeBlockElement"));
8+
const createHighlightCallback_1 = require("./utils/createHighlightCallback");
9+
exports.HTMLCodeBlockElement = HTMLCodeBlockElement_1.default;
10+
exports.createHighlightCallback = createHighlightCallback_1.createHighlightCallback;

‎dist/stylesheet.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare const _default: "\n code-block {\n position: relative;\n margin: 1em 0;\n display: block;\n font-size: 80%;\n font-family: Consolas, Monaco, monospace;\n }\n code-block span[slot=\"name\"] {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 0;\n padding: 0 5px;\n max-width: 90%;\n color: #fff;\n white-space: pre;\n line-height: 1.5;\n overflow: hidden;\n text-overflow: ellipsis;\n background: #75758a;\n box-sizing: border-box;\n }\n code-block button {\n all: unset;\n outline: revert;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n padding: 10px;\n display: block;\n font-family: inherit;\n color: #fff;\n opacity: 0;\n mix-blend-mode: exclusion;\n }\n\n code-block:hover button,\n code-block button:focus {\n opacity: 1;\n }\n\n code-block pre,\n code-block code {\n font-family: inherit;\n }\n code-block pre {\n margin: 0;\n }\n code-block code {\n padding: 1em;\n display: block;\n font-size: 100%;\n overflow-x: auto;\n }\n code-block[label]:not([label=\"\"]) pre code {\n padding-top: 2em;\n }\n ";
2+
export default _default;

‎dist/stylesheet.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.default = `
4+
code-block {
5+
position: relative;
6+
margin: 1em 0;
7+
display: block;
8+
font-size: 80%;
9+
font-family: Consolas, Monaco, monospace;
10+
}
11+
code-block span[slot="name"] {
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
z-index: 0;
16+
padding: 0 5px;
17+
max-width: 90%;
18+
color: #fff;
19+
white-space: pre;
20+
line-height: 1.5;
21+
overflow: hidden;
22+
text-overflow: ellipsis;
23+
background: #75758a;
24+
box-sizing: border-box;
25+
}
26+
code-block button {
27+
all: unset;
28+
outline: revert;
29+
position: absolute;
30+
right: 0;
31+
top: 0;
32+
z-index: 1;
33+
padding: 10px;
34+
display: block;
35+
font-family: inherit;
36+
color: #fff;
37+
opacity: 0;
38+
mix-blend-mode: exclusion;
39+
}
40+
41+
code-block:hover button,
42+
code-block button:focus {
43+
opacity: 1;
44+
}
45+
46+
code-block pre,
47+
code-block code {
48+
font-family: inherit;
49+
}
50+
code-block pre {
51+
margin: 0;
52+
}
53+
code-block code {
54+
padding: 1em;
55+
display: block;
56+
font-size: 100%;
57+
overflow-x: auto;
58+
}
59+
code-block[label]:not([label=""]) pre code {
60+
padding-top: 2em;
61+
}
62+
`;

‎lib/html-code-block-element.all.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)