Skip to content

Commit f8b536a

Browse files
afc163yiminghe
afc163
and
yiminghe
authored
chore: upgrade tech stack (#47)
Co-authored-by: yiminghe <yiminghe@gmail.com>
1 parent 0b6b8dd commit f8b536a

10 files changed

Lines changed: 13648 additions & 9976 deletions

File tree

‎.github/workflows/ci.yml‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ jobs:
88

99
strategy:
1010
matrix:
11-
node-version: [18.x]
11+
node-version: [20.x]
1212

1313
steps:
1414
- name: Checkout
@@ -22,6 +22,7 @@ jobs:
2222
- uses: pnpm/action-setup@v2
2323
name: Install pnpm
2424
with:
25+
version: 9.x
2526
run_install: false
2627

2728
- name: Get pnpm store directory
@@ -45,4 +46,8 @@ jobs:
4546
run: pnpm run lint && pnpm run tsc && pnpm run compile
4647
- run: pnpm test:ci
4748
env:
48-
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
49+
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
50+
- name: Upload coverage to Codecov
51+
uses: codecov/codecov-action@v4
52+
with:
53+
token: ${{ secrets.CODECOV_TOKEN }}

‎app/body-overflow/page.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
'use client';
2+
3+
import React, { useRef, useEffect } from 'react';
4+
import domAlign from '../../src';
5+
6+
export default function Overflow() {
7+
const source = useRef();
8+
const target = useRef();
9+
const timer = useRef<any>();
10+
const align = () => {
11+
const ret = domAlign(source.current, target.current, {
12+
points: ['tl', 'bl'],
13+
overflow: {
14+
adjustY: 1,
15+
adjustX: 1,
16+
},
17+
});
18+
console.log(ret);
19+
if (timer.current) {
20+
clearTimeout(timer.current);
21+
}
22+
timer.current = setTimeout(() => {
23+
document.body.style.overflow = 'hidden';
24+
}, 1000);
25+
};
26+
27+
useEffect(() => {
28+
return () => {
29+
if (timer.current) {
30+
clearTimeout(timer.current);
31+
}
32+
document.body.style.overflow = '';
33+
};
34+
}, []);
35+
36+
return (
37+
<div style={{ height: 1000 }}>
38+
<button ref={target} style={{ position: 'absolute', right: 0, top: 300 }}>
39+
target
40+
</button>
41+
42+
<div style={{ height: 100 }} />
43+
44+
<button onClick={align}>align</button>
45+
46+
<div
47+
ref={source}
48+
style={{
49+
position: 'absolute',
50+
width: 100,
51+
height: 200,
52+
border: '1px solid red',
53+
}}>
54+
oo
55+
</div>
56+
</div>
57+
);
58+
}

‎app/fail/page.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client';
2+
3+
import React, { useRef, useEffect } from 'react';
4+
import domAlign from '../../src';
5+
6+
export default function Fail() {
7+
const source = useRef();
8+
const target = useRef();
9+
10+
function align() {
11+
const ret = domAlign(source.current, target.current, {
12+
points: ['bl', 'bl'],
13+
overflow: {
14+
adjustY: 1,
15+
},
16+
});
17+
console.log(ret);
18+
}
19+
return (
20+
<div style={{ height: 1000 }}>
21+
<button ref={target}>target</button>
22+
23+
<div style={{ height: 100 }} />
24+
25+
<button onClick={align}>align</button>
26+
27+
<div
28+
ref={source}
29+
style={{
30+
position: 'absolute',
31+
width: 100,
32+
height: 200,
33+
border: '1px solid red',
34+
}}>
35+
oo
36+
</div>
37+
</div>
38+
);
39+
}

‎app/page.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import Link from 'next/link';
2+
import { useMemo } from 'react';
3+
import React from 'react';
4+
import MarkdownIt from 'markdown-it';
5+
import 'github-markdown-css/github-markdown-light.css';
6+
// @ts-ignore
7+
import prism from 'prismjs';
8+
import 'prismjs/components/prism-json';
9+
import 'prismjs/components/prism-javascript';
10+
import 'prismjs/themes/prism.css';
11+
import fs from 'fs';
12+
import path from 'path';
13+
14+
const readme = fs.readFileSync(
15+
path.join(process.cwd(), './README.md'),
16+
'utf-8',
17+
);
18+
const md = new MarkdownIt({
19+
html: true,
20+
linkify: true,
21+
typographer: true,
22+
highlight: function (code, lang) {
23+
if (prism.languages[lang]) {
24+
return prism.highlight(code, prism.languages[lang], lang);
25+
} else {
26+
return code;
27+
}
28+
},
29+
});
30+
31+
export default function Home() {
32+
const content = useMemo(() => {
33+
return md.render(readme);
34+
}, []);
35+
36+
return (
37+
<div style={{ width: 1200, margin: 'auto' }}>
38+
<h2>examples</h2>
39+
<p>
40+
<Link href="/simple">simple</Link>
41+
</p>
42+
<p>
43+
<Link href="/body-overflow">body-overflow</Link>
44+
</p>
45+
<p>
46+
<Link href="/fail">fail</Link>
47+
</p>
48+
<p>
49+
<Link href="/point">point</Link>
50+
</p>
51+
<p>
52+
<Link href="/shadow-dom">shadow-dom</Link>
53+
</p>
54+
<h2>readme</h2>
55+
<div
56+
className="markdown-body"
57+
dangerouslySetInnerHTML={{ __html: content }}></div>
58+
</div>
59+
);
60+
}

‎app/shadow-dom/page.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
'use client';
2+
3+
import React, { useRef, useEffect } from 'react';
4+
import ReactDOM from 'react-dom/client';
5+
import domAlign from '../../src';
6+
7+
function Test() {
8+
const source = useRef();
9+
const target = useRef();
10+
function align() {
11+
const ret = domAlign(source.current, target.current, {
12+
points: ['bl', 'bl'],
13+
overflow: {
14+
adjustY: 1,
15+
},
16+
});
17+
console.log(ret);
18+
}
19+
20+
return (
21+
<div style={{ height: 1000 }}>
22+
<button ref={target}>target</button>
23+
24+
<div style={{ height: 100 }} />
25+
26+
<button onClick={align}>align</button>
27+
28+
<div
29+
ref={source}
30+
style={{
31+
position: 'absolute',
32+
width: 100,
33+
height: 200,
34+
border: '1px solid red',
35+
}}>
36+
oo
37+
</div>
38+
</div>
39+
);
40+
}
41+
42+
export default function ShadowDom() {
43+
const source = useRef<HTMLDivElement>();
44+
45+
useEffect(() => {
46+
const shadowRoot = source.current.attachShadow({ mode: 'open' });
47+
ReactDOM.createRoot(shadowRoot).render(<Test />);
48+
}, []);
49+
50+
return <div ref={source}></div>;
51+
}

‎app/simple/page.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import domAlign from '../../src';
5+
6+
function $id(id): any {
7+
return document.getElementById(id);
8+
}
9+
10+
function $val(sel) {
11+
sel = $id(sel);
12+
return sel.value;
13+
}
14+
15+
function align() {
16+
domAlign($id('source'), $id('target'), {
17+
points: [
18+
$val('source_align_tb') + $val('source_align_lr'),
19+
$val('target_align_tb') + $val('target_align_lr'),
20+
],
21+
offset: [$val('offset1'), $val('offset2')],
22+
targetOffset: [$val('targetOffset1'), $val('targetOffset2')],
23+
overflow: {
24+
adjustX: $id('adjustX').checked,
25+
adjustY: $id('adjustY').checked,
26+
},
27+
useCssRight: $id('useCssRight').checked,
28+
useCssBottom: $id('useCssBottom').checked,
29+
useCssTransform: $id('useCssTransform').checked,
30+
31+
ignoreShake: $id('ignoreShake').checked,
32+
});
33+
}
34+
export default function Simple() {
35+
return (
36+
<div>
37+
<h1>dom-align</h1>
38+
39+
<div>
40+
source:
41+
<select id="source_align_tb">
42+
<option value="t">t</option>
43+
<option value="c">c</option>
44+
<option value="b">b</option>
45+
</select>
46+
<select id="source_align_lr">
47+
<option value="l">l</option>
48+
<option value="c">c</option>
49+
<option value="r">r</option>
50+
</select>
51+
&nbsp; target:
52+
<select id="target_align_tb">
53+
<option value="t">t</option>
54+
<option value="c">c</option>
55+
<option value="b">b</option>
56+
</select>
57+
<select id="target_align_lr">
58+
<option value="l">l</option>
59+
<option value="c">c</option>
60+
<option value="r">r</option>
61+
</select>
62+
&nbsp; offset: [
63+
<input type="offset" id="offset1" defaultValue="0" size={3} />
64+
,
65+
<input type="offset" id="offset2" defaultValue="0" size={3} />
66+
] &nbsp; targetOffset: [
67+
<input type="offset" id="targetOffset1" defaultValue="0" size={3} />
68+
,
69+
<input type="offset" id="targetOffset2" defaultValue="0" size={3} />]
70+
&nbsp; overflow: &nbsp;
71+
<label>
72+
adjustX:
73+
<input type="checkbox" id="adjustX" />
74+
</label>
75+
&nbsp;
76+
<label>
77+
adjustY:
78+
<input type="checkbox" id="adjustY" />
79+
</label>
80+
&nbsp;
81+
<label>
82+
useCssBottom:
83+
<input type="checkbox" id="useCssBottom" />
84+
</label>
85+
&nbsp;
86+
<label>
87+
useCssRight:
88+
<input type="checkbox" id="useCssRight" />
89+
</label>
90+
&nbsp;
91+
<label>
92+
useCssTransform:
93+
<input type="checkbox" id="useCssTransform" defaultChecked={false} />
94+
</label>
95+
&nbsp;
96+
<label>
97+
ignoreShake:
98+
<input type="checkbox" id="ignoreShake" />
99+
</label>
100+
&nbsp;
101+
<button id="align" onClick={align}>
102+
align
103+
</button>
104+
<br />
105+
<div
106+
style={{
107+
width: 400,
108+
height: 400,
109+
overflow: 'auto',
110+
border: '1px solid green',
111+
position: 'relative',
112+
}}>
113+
<div
114+
style={{
115+
background: 'yellow',
116+
width: 240,
117+
height: 240,
118+
margin: 50,
119+
}}
120+
id="target">
121+
target node
122+
</div>
123+
<div style={{ width: 1000, height: 1000 }} />
124+
<div
125+
style={{
126+
background: 'red',
127+
width: 80,
128+
height: 80,
129+
left: 0,
130+
top: 0,
131+
position: 'absolute',
132+
transition: 'all 0.5s',
133+
overflowY: 'auto',
134+
}}
135+
id="source">
136+
source node
137+
<br />
138+
<br />
139+
<br />
140+
<br />
141+
<br />
142+
<br />
143+
</div>
144+
</div>
145+
</div>
146+
</div>
147+
);
148+
}

0 commit comments

Comments
 (0)