Skip to content

Commit f108cdd

Browse files
GaubeeGaubee
committed
💚 修复编译与配置
1 parent 4e2a6fd commit f108cdd

9 files changed

Lines changed: 228 additions & 531 deletions

File tree

‎demo.html‎

Lines changed: 0 additions & 136 deletions
This file was deleted.

‎docs/assets/main.40c2e3da.js‎

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

‎docs/assets/main.7a36c157.js‎

Lines changed: 0 additions & 215 deletions
This file was deleted.

‎docs/index.html‎

Lines changed: 3 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -105,19 +105,19 @@
105105
justify-content: center;
106106
}
107107
</style>
108-
<script type="module" crossorigin src="./assets/main.7a36c157.js"></script>
108+
<script type="module" crossorigin src="./assets/main.40c2e3da.js"></script>
109109
<link rel="modulepreload" href="./assets/vendor.7f148f7f.js">
110110
</head>
111111
<body>
112112
<scroll-viewport class="viewport">
113113
<!-- <header>some header content</header> -->
114+
<!-- onrenderrangechange="rangeChange(event,this)" -->
114115
<fixed-size-virtual-list-s1
115116
id="l"
116117
item-size="200"
117118
item-count="1000000"
118119
safe-area-inset-top="400"
119120
safe-area-inset-bottom="100"
120-
onrenderrangechange="rangeChange(event,this)"
121121
>
122122
<div class="block-card-item" slot="template">
123123
<div class="block-content">
@@ -146,177 +146,5 @@
146146
<button class="button" onclick="gotoTop()">go top</button>
147147
</section>
148148
</body>
149-
<script>
150-
const movingDuration = 200;
151-
function rangeChange(event) {
152-
const { entries, time } = event.detail;
153-
for (const { node, index, stateInfoList, isIntersecting } of entries) {
154-
const viewClass = event.target.className;
155-
if (isIntersecting) {
156-
// console.log("%s %c%s", viewClass, "color:green", type, index);
157-
const height = l.itemCount - index;
158-
const heightEle = node.querySelector("[name=height]");
159-
(heightEle.firstChild || heightEle).textContent = height;
160-
const stateEle = node.querySelector("[name=state]");
161-
(stateEle.firstChild || stateEle).textContent = stateInfoList
162-
.map(
163-
(stateInfo) =>
164-
`${stateInfo.state}-${stateInfo.id}-${stateInfo.endTime.toFixed(
165-
2
166-
)}`
167-
)
168-
.join("\n");
169-
{
170-
let createScale = 0;
171-
let createTime = 0;
172-
let movingOffset = 0;
173-
let movingTime = 0;
174-
for (const stateInfo of stateInfoList) {
175-
if (stateInfo.state === "moving") {
176-
const diffTime = stateInfo.endTime - time;
177-
movingOffset += (diffTime / movingDuration) * l.itemSize;
178-
movingTime = Math.max(diffTime, movingTime);
179-
} else if (stateInfo.state === "create") {
180-
const diffTime = stateInfo.endTime - time;
181-
createScale = diffTime / movingDuration;
182-
createTime = diffTime;
183-
}
184-
}
185-
186-
/**@TODO use replaceable animations */
187-
for (const ani of node.contentNode.getAnimations()) {
188-
ani.cancel();
189-
}
190-
const movingAniOptions =
191-
movingOffset !== 0 && movingTime > 0
192-
? {
193-
from: -movingOffset, //`translateY(${-movingOffset}px)`,
194-
to: 0, //`translateY(0px)`,
195-
duration: movingTime,
196-
}
197-
: undefined;
198-
const createAniOptions =
199-
createScale !== 0 && createTime > 0
200-
? {
201-
from: 1 - createScale, //`scale(${1 - createScale})`,
202-
to: 1, //`scale(1)`,
203-
duration: createTime,
204-
}
205-
: undefined;
206-
207-
if (movingAniOptions && createAniOptions) {
208-
const framekeys = [
209-
{
210-
transform: `translateY(${movingAniOptions.from}px) scale(${createAniOptions.from})`,
211-
offset: 0,
212-
},
213-
];
214-
let aniDuration;
215-
if (createAniOptions.duration > movingAniOptions.duration) {
216-
aniDuration = createAniOptions.duration;
217-
const offset = movingAniOptions.duration / aniDuration;
218-
framekeys.push(
219-
{
220-
transform: `translateY(${movingAniOptions.to}px) scale(${
221-
createAniOptions.from +
222-
(createAniOptions.to - createAniOptions.from) * offset
223-
})`,
224-
offset: offset,
225-
},
226-
{
227-
transform: `scale(${createAniOptions.to})`,
228-
offset: 1,
229-
}
230-
);
231-
} else {
232-
aniDuration = movingAniOptions.duration;
233-
const offset = createAniOptions.duration / aniDuration;
234-
framekeys.push(
235-
{
236-
transform: `translateY(${
237-
movingAniOptions.from +
238-
(movingAniOptions.to - movingAniOptions.from) * offset
239-
}px) scale(${createAniOptions.to})`,
240-
offset: offset,
241-
},
242-
{
243-
transform: `translateY(${movingAniOptions.to}px)`,
244-
offset: 1,
245-
}
246-
);
247-
}
248-
node.contentNode.animate(framekeys, aniDuration);
249-
} else if (movingAniOptions) {
250-
node.contentNode.animate(
251-
[
252-
{ transform: `translateY(${movingAniOptions.from}px)` },
253-
{ transform: `translateY(${movingAniOptions.to}px)` },
254-
],
255-
movingAniOptions.duration
256-
);
257-
} else if (createAniOptions) {
258-
node.contentNode.animate(
259-
[
260-
{ transform: `scale(${createAniOptions.from})` },
261-
{ transform: `scale(${createAniOptions.to})` },
262-
],
263-
createAniOptions.duration
264-
);
265-
}
266-
if (l._dev) {
267-
console.log(index, "do ani", stateEle.textContent);
268-
console.log(movingAniOptions, createAniOptions);
269-
for (const ani of node.contentNode.getAnimations()) {
270-
console.log(ani.effect.getKeyframes());
271-
}
272-
}
273-
}
274-
275-
node.contentNode.classList.toggle("first", index === 0n);
276-
// node.contentNode.classList.toggle(
277-
// "hide",
278-
// node.contentNode.getAnimations().length === 0 && index === 2n
279-
// );
280-
281-
// node.querySelector("[name=offsetTop]").innerHTML = node.offsetTop;
282-
} else {
283-
// console.log("%s %c%s", viewClass, "color:orange", type, index);
284-
}
285-
}
286-
}
287-
function gotoTop() {
288-
l.virtualScrollTo(0);
289-
}
290-
function insertItem() {
291-
l.itemCountStateManager.insertBefore(1n, 0n, {
292-
// state: create
293-
duration: movingDuration,
294-
});
295-
}
296-
function insertAndScroll() {
297-
const count = (5 * Math.random()) | 0;
298-
if (count > 0) {
299-
l.itemCountStateManager.insertBefore(BigInt(count), 0n, {
300-
state: "moving",
301-
});
302-
}
303-
let need_ani = l.virtualScrollTop <= l.itemSize * 2.5;
304-
305-
/// 新区快在视野范围内，不进行滚动，让区块自然下落
306-
if (need_ani) {
307-
l.itemCountStateManager.insertBefore(1n, 0n, {
308-
duration: movingDuration,
309-
});
310-
return;
311-
}
312-
/// 新区快在视野范围外，整个链保持静止不动，避免无意义的画面抖动
313-
else {
314-
l.itemCountStateManager.insertBefore(1n, 0n, {
315-
duration: 0,
316-
});
317-
console.log(BigInt(l.itemSize * (count + 1)), count + 1);
318-
l.virtualScrollTop += BigInt(l.itemSize * (count + 1));
319-
}
320-
}
321-
</script>
149+
322150
</html>

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
88
/>
99
<title>Virtual Scroll - WebComponent</title>
10-
<script type="module" src="/src/index.ts"></script>
10+
<script type="module" src="./src/index.ts"></script>
1111
<style>
1212
html,
1313
body {
@@ -144,5 +144,5 @@
144144
<button class="button" onclick="gotoTop()">go top</button>
145145
</section>
146146
</body>
147-
<script type="module" src="main.ts"></script>
147+
<script type="module" src="./main.ts"></script>
148148
</html>

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
5151
// "typeRoots": [], /* List of folders to include type definitions from. */
5252
// "types": [], /* Type declaration files to be included in compilation. */
53-
"allowSyntheticDefaultImports": false, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
53+
"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
5454
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
5555
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
5656
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */

‎vite-demo.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export default defineConfig({
66
build: {
77
target: ["chrome74"],
88
rollupOptions: {
9+
external: [resolve(__dirname, "main.ts")],
910
input: {
1011
main: resolve(__dirname, "index.html"),
1112
},

‎vite-iife.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default defineConfig({
1111
formats: ["iife"],
1212
},
1313
rollupOptions: {
14-
plugins: [minifyHTML.default()],
14+
plugins: [minifyHTML],
1515
},
1616
emptyOutDir: false,
1717
},

‎vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default defineConfig({
1111
},
1212
rollupOptions: {
1313
external: /^lit-element/,
14-
plugins: [minifyHTML.default()],
14+
plugins: [minifyHTML],
1515
},
1616
},
1717
server: {

0 commit comments

Comments
 (0)