Skip to content

Commit 07be562

Browse files
author
Clauderic Demers
committed
Convert project to TypeScript
1 parent dcf8b95 commit 07be562

23 files changed

+1711
-559
lines changed

‎.eslintrc

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

‎.gitignore

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/coverage
2-
/demo/dist
3-
/es
4-
/lib
52
/node_modules
6-
/umd
3+
/build
4+
/build-intermediate
5+
/types
76
npm-debug.log*
7+
.DS_Store

‎README.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -69,27 +69,28 @@ render(
6969
```
7070

7171
### Prop Types
72-
| Property | Type | Required? | Description |
73-
|:------------------|:------------------|:----------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
74-
| width | Number or String* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
75-
| height | Number or String* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
76-
| itemCount | Number | ✓ | The number of items you want to render |
77-
| renderItem | Function | ✓ | Responsible for rendering an item given it's index: `({index: number, style: Object}): React.PropTypes.node`. The returned element must handle key and style. |
78-
| itemSize | | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |
79-
| scrollDirection | String | | Whether the list should scroll vertically or horizontally. One of `'vertical'` or `'horizontal'`. Defaults to `'vertical'` |
80-
| scrollOffset | Number | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |
81-
| scrollToIndex | Number | | Item index to scroll to (by forcefully scrolling if necessary) |
82-
| scrollToAlignment | | | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: 'start', 'center' or 'end' |
83-
| overscanCount | Number | | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
84-
| estimatedItemSize | Number | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
85-
| onScroll | Function | | Called on scroll events: `(scrollTop: number, event)`. |
72+
| Property | Type | Required? | Description |
73+
|:------------------|:------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
74+
| width | Number or String* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
75+
| height | Number or String* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
76+
| itemCount | Number | ✓ | The number of items you want to render |
77+
| renderItem | Function | ✓ | Responsible for rendering an item given it's index: `({index: number, style: Object}): React.PropTypes.node`. The returned element must handle key and style. |
78+
| itemSize | | ✓ | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number` |
79+
| scrollDirection | String | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
80+
| scrollOffset | Number | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |
81+
| scrollToIndex | Number | | Item index to scroll to (by forcefully scrolling if necessary) |
82+
| scrollToAlignment | String | | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. 'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |
83+
| overscanCount | Number | | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
84+
| estimatedItemSize | Number | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
85+
| onRowsRendered | Function | | Callback invoked with information about the slice of rows that were just rendered. It has the following signature: `({startIndex: number, stopIndex: number})`. |
86+
| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region. It has the following signature: `(scrollTop: number, event: React.UIEvent<HTMLDivElement>)`. |
8687

8788
*\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`*
8889

8990
### Public Methods
9091

9192
#### recomputeSizes (index: number)
92-
This method force recomputes the item sizes after the specificed index (these are normally cached).
93+
This method force recomputes the item sizes after the specified index (these are normally cached).
9394

9495
`VirtualList` has no way of knowing when its underlying data has changed, since it only receives a itemSize property. If the itemSize is a `number`, this isn't an issue, as it can compare before and after values and automatically call `recomputeSizes` internally.
9596
However, if you're passing a function to `itemSize`, that type of comparison is error prone. In that event, you'll need to call `recomputeSizes` manually to inform the `VirtualList` that the size of its items has changed.

‎config/build.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import {execSync} from 'child_process';
2+
import {writeFileSync} from 'fs-extra';
3+
import {resolve as resolvePath} from 'path';
4+
import {rollup} from 'rollup';
5+
import rimraf from 'rimraf';
6+
7+
import createRollupConfig from './rollup/config';
8+
9+
const root = resolvePath(__dirname, '..');
10+
const build = resolvePath(root, 'build');
11+
12+
const intermediateBuild = resolvePath(root, './build-intermediate');
13+
const entry = resolvePath(intermediateBuild, './index.js');
14+
15+
compileTypescript();
16+
17+
runRollup({entry, output: 'react-tiny-virtual-list.es.js', format: 'es'})
18+
.then(cleanIntermediateBuild)
19+
.then(() => {
20+
compileTypescript('--target ES5');
21+
22+
Promise.all([
23+
runRollup({entry, output: 'react-tiny-virtual-list.cjs.js', format: 'cjs'}),
24+
runRollup({entry, output: 'react-tiny-virtual-list.js', format: 'umd'}),
25+
runRollup({entry, output: 'react-tiny-virtual-list.min.js', format: 'umd', minify: true}),
26+
])
27+
.then(cleanIntermediateBuild)
28+
.catch((error) => {
29+
// eslint-disable-next-line no-console
30+
cleanIntermediateBuild().then(() => {
31+
console.error(error);
32+
process.exit(1);
33+
});
34+
});
35+
});
36+
37+
function runRollup({entry, output, format, minify = false, outputDir = build}) {
38+
const config = createRollupConfig({
39+
input: entry,
40+
output,
41+
format,
42+
minify,
43+
});
44+
45+
return rollup(config)
46+
.then((bundle) => bundle.write({
47+
format,
48+
name: 'VirtualList',
49+
file: resolvePath(outputDir, output),
50+
}));
51+
}
52+
53+
function compileTypescript(args = '') {
54+
execSync(`./node_modules/.bin/tsc --outDir ${intermediateBuild} --rootDir ./src --baseurl ./src ${args}`, {
55+
stdio: 'inherit',
56+
});
57+
}
58+
59+
function cleanIntermediateBuild(callback = () => {}) {
60+
return new Promise((resolve) => rimraf(intermediateBuild, resolve));
61+
}

‎config/jest/config.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"coverageDirectory": "./coverage/",
3+
"collectCoverage": true,
4+
"rootDir": "../..",
5+
"roots": [
6+
"<rootDir>/src",
7+
"<rootDir>/tests"
8+
],
9+
"moduleFileExtensions": [
10+
"ts",
11+
"tsx",
12+
"js"
13+
],
14+
"testRegex": "[\\w+]\\.test\\.(tsx?|js)$",
15+
"transform": {
16+
"\\.tsx?$": "<rootDir>/config/jest/transformers/typescript.js"
17+
}
18+
}

‎babel-jest.config.js renamed to ‎config/jest/transformers/javascript.js

File renamed without changes.

‎config/jest/transformers/typescript.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const tsc = require('typescript');
2+
const crypto = require('crypto');
3+
4+
const babelTransformer = require('./javascript');
5+
const tsConfig = require('../../../tsconfig.json');
6+
7+
module.exports = {
8+
getCacheKey(src, path, configString) {
9+
return crypto
10+
.createHash('md5')
11+
.update(src)
12+
.update(configString)
13+
.digest('hex');
14+
},
15+
process(src, path, ...rest) {
16+
if (path.endsWith('.ts') || path.endsWith('.tsx')) {
17+
const tsOutput = tsc.transpile(
18+
src,
19+
tsConfig.compilerOptions,
20+
path,
21+
[]
22+
);
23+
24+
const fakeJSPath = path.replace(/\.tsx?$/, '.js');
25+
return babelTransformer.process(tsOutput, fakeJSPath, ...rest);
26+
}
27+
return src;
28+
},
29+
};

‎config/nwb/config.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
type: 'react-app',
3+
polyfill: false,
4+
webpack: {
5+
extra: {
6+
resolve: {
7+
extensions: ['.ts', '.tsx'],
8+
},
9+
module: {
10+
rules: [
11+
{
12+
test: /\.tsx?$/,
13+
loader: 'awesome-typescript-loader',
14+
},
15+
],
16+
},
17+
},
18+
extractText: {
19+
allChunks: true,
20+
},
21+
},
22+
};

‎config/rollup/config.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import typescript from 'rollup-plugin-typescript2';
2+
import babel from 'rollup-plugin-babel';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import nodeResolve from 'rollup-plugin-node-resolve';
5+
import uglify from 'rollup-plugin-uglify';
6+
7+
export default function createRollupConfig({input, output, format, minify}) {
8+
return {
9+
input,
10+
output: [{file: output, format}],
11+
exports: format === 'es' ? 'named' : 'default',
12+
name: 'VirtualList',
13+
external: ['react', 'prop-types'],
14+
globals: {
15+
react: 'React',
16+
'prop-types': 'PropTypes',
17+
},
18+
plugins: [
19+
nodeResolve({
20+
module: true,
21+
jsnext: true,
22+
main: true,
23+
}),
24+
commonjs({include: 'node_modules/**'}),
25+
babel({exclude: 'node_modules/**'}),
26+
minify ? uglify() : null,
27+
].filter(Boolean),
28+
};
29+
}

‎demo/src/index.js

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

0 commit comments

Comments
 (0)