/
index.ts
65 lines (53 loc) · 1.62 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* eslint-disable import/first */
import './polyfills';
import './styles';
import { createRoot, Root } from 'react-dom/client';
import renderStyleguide from './utils/renderStyleguide';
import { getParameterByName, hasInHash, getHash } from './utils/handleHash';
// Examples code revision to rerender only code examples (not the whole page) when code changes
let codeRevision = 0;
// Scrolls to origin when current window location hash points to an isolated view.
const scrollToOrigin = () => {
const hash = window.location.hash;
let idHashParam;
if (hasInHash(hash, '#/') || hasInHash(hash, '#!/')) {
// Extracts the id param of hash
idHashParam = getParameterByName(hash, 'id');
} else {
idHashParam = getHash(hash, '#');
}
if (hash) {
if (idHashParam) {
const idElement = document.getElementById(idHashParam);
if (idElement) {
idElement.scrollIntoView(true);
}
} else {
window.scrollTo(0, 0);
}
}
};
let reactRoot: Root | null = null;
const render = () => {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const styleguide = require('!!../loaders/styleguide-loader!./index.js');
if (!reactRoot) {
const rootNode = document.getElementById(styleguide.config.mountPointId);
if (rootNode) {
reactRoot = createRoot(rootNode);
}
}
if (reactRoot) {
reactRoot.render(renderStyleguide(styleguide, codeRevision));
}
};
window.addEventListener('hashchange', render);
window.addEventListener('hashchange', scrollToOrigin);
/* istanbul ignore if */
if (module.hot) {
module.hot.accept('!!../loaders/styleguide-loader!./index.js', () => {
codeRevision += 1;
render();
});
}
render();