Skip to content

Commit e7fa35a

Browse files
andrelmlinsandrelmlins
committed
Inserting typescript and declarations
1 parent 537779e commit e7fa35a

9 files changed

+1827
-2079
lines changed

‎package.json

+16-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{
22
"name": "svelte-infinite-scroll",
3-
"version": "1.5.2",
3+
"version": "2.0.0",
44
"description": "Infinite Scroll Component to Svelte",
55
"repository": "https://github.com/andrelmlins/svelte-infinite-scroll",
66
"author": "André Lins <[email protected]> (https://andrelmlins.github.io/)",
77
"license": "MIT",
8-
"svelte": "src/lib/InfiniteScroll.svelte",
8+
"svelte": "dist/InfiniteScroll.svelte",
99
"module": "dist/index.mjs",
1010
"main": "dist/index.js",
11+
"types": "dist/index.d.ts",
1112
"homepage": "https://svelte-infinite-scroll.netlify.com/",
1213
"files": [
13-
"src/lib/InfiniteScroll.svelte",
1414
"dist"
1515
],
1616
"devDependencies": {
@@ -20,18 +20,25 @@
2020
"@testing-library/svelte": "^3.0.0",
2121
"babel-jest": "^26.3.0",
2222
"jest": "^26.4.2",
23-
"rollup": "^1.32.1",
23+
"rollup": "^2.26.0",
2424
"rollup-plugin-commonjs": "^10.1.0",
25-
"rollup-plugin-livereload": "^1.3.0",
25+
"rollup-plugin-livereload": "^2.0.0",
2626
"rollup-plugin-node-resolve": "^5.2.0",
27-
"rollup-plugin-svelte": "^5.2.3",
27+
"rollup-plugin-svelte": "^6.0.0",
2828
"rollup-plugin-terser": "^7.0.0",
2929
"sirv-cli": "^0.4.4",
30-
"svelte": "^3.24.1",
31-
"svelte-jester": "^1.1.0"
30+
"svelte": "^3.32.0",
31+
"svelte-jester": "1.1.5",
32+
"@rollup/plugin-typescript": "^8.2.5",
33+
"@tsconfig/svelte": "^2.0.1",
34+
"svelte-dts": "^0.3.3",
35+
"svelte-preprocess": "^4.7.4",
36+
"svelte-transpile-typescript": "^0.1.2",
37+
"tslib": "^2.3.0",
38+
"typescript": "^4.3.5"
3239
},
3340
"scripts": {
34-
"build": "rollup -c",
41+
"build": "rollup -c && svelte-transpile-typescript -i src/lib/InfiniteScroll.svelte -o dist/InfiniteScroll.svelte",
3542
"dev": "rollup -c -w",
3643
"start": "sirv public",
3744
"test": "jest src/lib",

‎rollup.config.js

+27-16
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,62 @@ import resolve from "rollup-plugin-node-resolve";
33
import commonjs from "rollup-plugin-commonjs";
44
import livereload from "rollup-plugin-livereload";
55
import { terser } from "rollup-plugin-terser";
6+
import typescript from "@rollup/plugin-typescript";
7+
import autoPreprocess from "svelte-preprocess";
8+
import svelteDts from "svelte-dts";
69
import pkg from "./package.json";
710

811
const production = !process.env.ROLLUP_WATCH;
912

1013
export default [
1114
{
12-
input: "src/dev/main.js",
15+
input: "src/dev/main.ts",
1316
output: {
1417
sourcemap: true,
1518
format: "iife",
1619
name: "app",
17-
file: "public/build/bundle.js"
20+
file: "public/build/bundle.js",
1821
},
1922
plugins: [
2023
svelte({
2124
dev: !production,
22-
css: css => {
23-
css.write("public/build/bundle.css");
24-
}
25+
css: (css) => css.write("bundle.css"),
26+
preprocess: autoPreprocess(),
2527
}),
28+
typescript({ sourceMap: !production }),
2629
resolve({
2730
browser: true,
28-
dedupe: importee =>
29-
importee === "svelte" || importee.startsWith("svelte/")
31+
dedupe: (importee) =>
32+
importee === "svelte" || importee.startsWith("svelte/"),
3033
}),
3134
commonjs(),
3235
!production && serve(),
3336
!production && livereload("public"),
34-
production && terser()
37+
production && terser(),
3538
],
36-
watch: {
37-
clearScreen: false
38-
}
39+
watch: { clearScreen: false },
3940
},
4041
{
4142
input: "src/lib/InfiniteScroll.svelte",
4243
output: { file: pkg.main, format: "umd", name: "InfiniteScroll" },
43-
plugins: [svelte(), resolve(), commonjs()]
44+
plugins: [
45+
svelte({ preprocess: autoPreprocess() }),
46+
typescript({ sourceMap: !production }),
47+
resolve(),
48+
commonjs(),
49+
],
4450
},
4551
{
4652
input: "src/lib/InfiniteScroll.svelte",
4753
output: { file: pkg.module, format: "es" },
4854
external: ["svelte/internal"],
49-
plugins: [svelte(), commonjs()]
50-
}
55+
plugins: [
56+
svelteDts({ output: pkg.types }),
57+
svelte({ preprocess: autoPreprocess() }),
58+
typescript({ sourceMap: !production }),
59+
commonjs(),
60+
],
61+
},
5162
];
5263

5364
function serve() {
@@ -60,9 +71,9 @@ function serve() {
6071

6172
require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
6273
stdio: ["ignore", "inherit", "inherit"],
63-
shell: true
74+
shell: true,
6475
});
6576
}
66-
}
77+
},
6778
};
6879
}

‎src/dev/App.svelte

+21-20
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,35 @@
1-
<script>
1+
<script lang="ts">
22
import InfiniteScroll from "../lib/InfiniteScroll.svelte";
33
import allCountries from "./countries.js";
44
55
let page = 0;
66
let size = 20;
7-
let countries = [];
7+
let countries: { name: string; code: string }[] = [];
88
99
$: countries = [
1010
...countries,
11-
...allCountries.slice(size * page, size * (page + 1))
11+
...allCountries.slice(size * page, size * (page + 1)),
1212
];
1313
</script>
1414

15+
<main>
16+
<h1>Svelte Infinite Scroll</h1>
17+
<h4>Infinite Scroll Component to Svelte</h4>
18+
<ul>
19+
{#each countries as country}
20+
<li>{country.name}</li>
21+
{/each}
22+
<InfiniteScroll
23+
hasMore={countries.length < allCountries.length}
24+
threshold={100}
25+
on:loadMore={() => page++}
26+
/>
27+
</ul>
28+
<h5>
29+
Loaded items: {countries.length === allCountries.length ? "Yes" : "Not"}
30+
</h5>
31+
</main>
32+
1533
<style>
1634
main {
1735
display: flex;
@@ -68,20 +86,3 @@
6886
}
6987
}
7088
</style>
71-
72-
<main>
73-
<h1>Svelte Infinite Scroll</h1>
74-
<h4>Infinite Scroll Component to Svelte</h4>
75-
<ul>
76-
{#each countries as country}
77-
<li>{country.name}</li>
78-
{/each}
79-
<InfiniteScroll
80-
hasMore={countries.length < allCountries.length}
81-
threshold={100}
82-
on:loadMore={() => page++} />
83-
</ul>
84-
<h5>
85-
Loaded items: {countries.length === allCountries.length ? 'Yes' : 'Not'}
86-
</h5>
87-
</main>

‎src/dev/countries.js renamed to ‎src/dev/countries.ts

File renamed without changes.

‎src/dev/main.js renamed to ‎src/dev/main.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import App from "./App.svelte";
22

3-
const app = new App({
4-
target: document.body
5-
});
3+
const app = new App({ target: document.body });
64

75
export default app;

‎src/lib/InfiniteScroll.svelte

+25-21
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
<script>
1+
<script lang="ts">
22
import { onMount, onDestroy, createEventDispatcher } from "svelte";
33
4-
export let threshold = 0;
5-
export let horizontal = false;
6-
export let elementScroll = null;
7-
export let hasMore = true;
8-
export let reverse = false;
9-
export let window = false;
4+
export let threshold: number = 0;
5+
export let horizontal: boolean = false;
6+
export let elementScroll: HTMLElement | null = null;
7+
export let hasMore: boolean = true;
8+
export let reverse: boolean = false;
9+
export let window: boolean = false;
1010
11-
const dispatch = createEventDispatcher();
11+
const dispatch = createEventDispatcher<{ loadMore: never }>();
1212
13-
let isLoadMore = false;
14-
let component;
15-
let beforeScrollHeight;
16-
let beforeScrollTop;
17-
let element;
13+
let isLoadMore: boolean = false;
14+
let component: HTMLElement;
15+
let beforeScrollHeight: number;
16+
let beforeScrollTop: number;
17+
let element: any | null;
1818
1919
$: if (element) {
2020
if (reverse) {
@@ -29,25 +29,29 @@
2929
element.scrollHeight - beforeScrollHeight + beforeScrollTop;
3030
}
3131
32-
const onScroll = e => {
32+
const onScroll = (e: Event) => {
3333
if (!hasMore) return;
34-
const offset = calcOffset(e, reverse, horizontal);
34+
35+
const target = e.target as HTMLElement;
36+
const offset = calcOffset(target, reverse, horizontal);
37+
3538
if (offset <= threshold) {
3639
if (!isLoadMore && hasMore) {
3740
dispatch("loadMore");
38-
beforeScrollHeight = e.target.scrollHeight;
39-
beforeScrollTop = e.target.scrollTop;
41+
beforeScrollHeight = target.scrollHeight;
42+
beforeScrollTop = target.scrollTop;
4043
}
4144
isLoadMore = true;
4245
} else {
4346
isLoadMore = false;
4447
}
4548
};
4649
47-
const calcOffset = (e, reverse, horizontal) => {
48-
const element = e.target.documentElement
49-
? e.target.documentElement
50-
: e.target;
50+
const calcOffset = (target: any, reverse: boolean, horizontal: boolean) => {
51+
const element: HTMLElement = target.documentElement
52+
? target.documentElement
53+
: target;
54+
5155
if (reverse) {
5256
return horizontal ? element.scrollLeft : element.scrollTop;
5357
}

‎svelte.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const sveltePreprocess = require("svelte-preprocess");
2+
3+
module.exports = {
4+
preprocess: sveltePreprocess(),
5+
};

‎tsconfig.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "@tsconfig/svelte/tsconfig.json",
3+
"include": ["src/**/*"],
4+
"compilerOptions": {
5+
"module": "esNext",
6+
"target": "esnext",
7+
"moduleResolution": "node",
8+
"strict": true,
9+
"types": ["svelte"]
10+
},
11+
"exclude": ["node_modules/*", "public/*"]
12+
}

0 commit comments

Comments
 (0)