Skip to content
This repository was archived by the owner on Jul 1, 2023. It is now read-only.

Commit d9a9afd

Browse files
IvanSafonovIvanSafonov
committed
First commit
1 parent de4a928 commit d9a9afd

20 files changed

+17270
-0
lines changed

‎.browserslistrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
current node
2+
last 2 versions and > 2%
3+
ie > 10

‎.eslintrc.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
},
6+
extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
7+
parserOptions: {
8+
parser: 'babel-eslint',
9+
},
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
13+
},
14+
overrides: [
15+
{
16+
files: ['**/tests/**/*.test.{j,t}s?(x)'],
17+
env: {
18+
jest: true,
19+
},
20+
},
21+
],
22+
}

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw?

‎.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": false,
6+
"singleQuote": true,
7+
"trailingComma": "all"
8+
}

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const devPresets = ['@vue/babel-preset-app']
2+
const buildPresets = ['@babel/preset-env']
3+
module.exports = {
4+
presets: process.env.NODE_ENV === 'production' ? buildPresets : devPresets,
5+
}

‎build/rollup.config.js‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
// rollup.config.js
2+
import fs from 'fs'
3+
import path from 'path'
4+
import vue from 'rollup-plugin-vue'
5+
import alias from '@rollup/plugin-alias'
6+
import commonjs from '@rollup/plugin-commonjs'
7+
import replace from '@rollup/plugin-replace'
8+
import babel from 'rollup-plugin-babel'
9+
import { terser } from 'rollup-plugin-terser'
10+
import minimist from 'minimist'
11+
12+
// Get browserslist config and remove ie from es build targets
13+
const esbrowserslist = fs
14+
.readFileSync('./.browserslistrc')
15+
.toString()
16+
.split('\n')
17+
.filter(entry => entry && entry.substring(0, 2) !== 'ie')
18+
19+
const argv = minimist(process.argv.slice(2))
20+
21+
const projectRoot = path.resolve(__dirname, '..')
22+
23+
const baseConfig = {
24+
input: 'src/entry.js',
25+
plugins: {
26+
preVue: [
27+
alias({
28+
resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
29+
entries: {
30+
'@': path.resolve(projectRoot, 'src'),
31+
},
32+
}),
33+
],
34+
replace: {
35+
'process.env.NODE_ENV': JSON.stringify('production'),
36+
'process.env.ES_BUILD': JSON.stringify('false'),
37+
},
38+
vue: {
39+
css: true,
40+
template: {
41+
isProduction: true,
42+
},
43+
},
44+
babel: {
45+
exclude: 'node_modules/**',
46+
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
47+
},
48+
},
49+
}
50+
51+
// ESM/UMD/IIFE shared settings: externals
52+
// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
53+
const external = [
54+
// list external dependencies, exactly the way it is written in the import statement.
55+
// eg. 'jquery'
56+
'vue',
57+
]
58+
59+
// UMD/IIFE shared settings: output.globals
60+
// Refer to https://rollupjs.org/guide/en#output-globals for details
61+
const globals = {
62+
// Provide global variable names to replace your external imports
63+
// eg. jquery: '$'
64+
vue: 'Vue',
65+
}
66+
67+
// Customize configs for individual targets
68+
const buildFormats = []
69+
if (!argv.format || argv.format === 'es') {
70+
const esConfig = {
71+
...baseConfig,
72+
external,
73+
output: {
74+
file: 'dist/list-scroller.esm.js',
75+
format: 'esm',
76+
exports: 'named',
77+
},
78+
plugins: [
79+
replace({
80+
...baseConfig.plugins.replace,
81+
'process.env.ES_BUILD': JSON.stringify('true'),
82+
}),
83+
...baseConfig.plugins.preVue,
84+
vue(baseConfig.plugins.vue),
85+
babel({
86+
...baseConfig.plugins.babel,
87+
presets: [
88+
[
89+
'@babel/preset-env',
90+
{
91+
targets: esbrowserslist,
92+
},
93+
],
94+
],
95+
}),
96+
commonjs(),
97+
],
98+
}
99+
buildFormats.push(esConfig)
100+
}
101+
102+
if (!argv.format || argv.format === 'cjs') {
103+
const umdConfig = {
104+
...baseConfig,
105+
external,
106+
output: {
107+
compact: true,
108+
file: 'dist/list-scroller.ssr.js',
109+
format: 'cjs',
110+
name: 'ListScroller',
111+
exports: 'named',
112+
globals,
113+
},
114+
plugins: [
115+
replace(baseConfig.plugins.replace),
116+
...baseConfig.plugins.preVue,
117+
vue({
118+
...baseConfig.plugins.vue,
119+
template: {
120+
...baseConfig.plugins.vue.template,
121+
optimizeSSR: true,
122+
},
123+
}),
124+
babel(baseConfig.plugins.babel),
125+
commonjs(),
126+
],
127+
}
128+
buildFormats.push(umdConfig)
129+
}
130+
131+
if (!argv.format || argv.format === 'iife') {
132+
const unpkgConfig = {
133+
...baseConfig,
134+
external,
135+
output: {
136+
compact: true,
137+
file: 'dist/list-scroller.min.js',
138+
format: 'iife',
139+
name: 'ListScroller',
140+
exports: 'named',
141+
globals,
142+
},
143+
plugins: [
144+
replace(baseConfig.plugins.replace),
145+
...baseConfig.plugins.preVue,
146+
vue(baseConfig.plugins.vue),
147+
babel(baseConfig.plugins.babel),
148+
commonjs(),
149+
terser({
150+
output: {
151+
ecma: 5,
152+
},
153+
}),
154+
],
155+
}
156+
buildFormats.push(unpkgConfig)
157+
}
158+
159+
// Export config
160+
export default buildFormats

‎dev/item.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div class="item">
3+
<img :src="imgUrl" />
4+
<div>
5+
<h2>
6+
<b>Item {{ index }}</b>
7+
</h2>
8+
{{ ' ' + data.text }}
9+
</div>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
props: {
16+
data: Object,
17+
index: Number,
18+
},
19+
computed: {
20+
imgUrl() {
21+
return `https://picsum.photos/id/${this.data.img}/500/200`
22+
},
23+
},
24+
}
25+
</script>
26+
27+
<style lang="scss" scoped>
28+
.item {
29+
margin: 1.1em;
30+
padding: 1em;
31+
border: solid;
32+
border-width: 3px;
33+
}
34+
h1 {
35+
// font-size: 1.5em;
36+
}
37+
</style>

‎dev/serve.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import Dev from './serve.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
render: h => h(Dev),
8+
}).$mount('#app')

‎dev/serve.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div>
3+
<div class="box"></div>
4+
<list-scroller
5+
:itemComponent="item"
6+
:itemsData="items"
7+
:itemHeight="itemHeight"
8+
:renderViewports="5"
9+
class="list"
10+
@bottom="addMore"
11+
/>
12+
<div class="box"></div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import ListScroller from '@/listscroller'
18+
import Item from './item'
19+
20+
const lorem =
21+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
22+
'Phasellus mattis at neque eu venenatis. Nam et sodales purus. ' +
23+
'Suspendisse pulvinar nisl purus, vel consequat neque varius vel. ' +
24+
'Ut ut consequat lorem. Nulla odio arcu, porta eu fringilla id, ' +
25+
'porta eget massa. Vivamus porta pulvinar ex, vel egestas erat ' +
26+
'rutrum vitae. Cras at felis malesuada, lacinia nulla non, ' +
27+
'tincidunt ligula. Sed facilisis mauris et metus commodo, ' +
28+
'sit amet porttitor mi efficitur. Cras et accumsan eros. Ut ' +
29+
'facilisis venenatis quam a luctus. Nam egestas dignissim viverra. ' +
30+
'Curabitur volutpat, enim et luctus faucibus, ex nisl ultrices est, ' +
31+
'in faucibus sapien libero vel arcu. Nullam placerat, mauris id ' +
32+
'vestibulum sollicitudin, lacus leo finibus mauris, nec efficitur ' +
33+
'neque ex sit amet arcu'
34+
35+
export default {
36+
components: { ListScroller },
37+
data() {
38+
return {
39+
items: [],
40+
item: Item,
41+
itemHeight: 120,
42+
}
43+
},
44+
methods: {
45+
addMore() {
46+
if (this.items.length > 10000) return
47+
48+
for (let i = 0; i < 30; i++) {
49+
this.items.push({
50+
text: lorem.slice(0, 200 + Math.floor(Math.random() * 500)) + ' ...',
51+
img: Math.floor(Math.random() * 1000),
52+
})
53+
}
54+
},
55+
},
56+
created() {
57+
this.addMore()
58+
},
59+
}
60+
</script>
61+
62+
<style lang="scss" scoped>
63+
.box {
64+
height: 10rem;
65+
border: solid;
66+
border-width: 1px;
67+
}
68+
.list {
69+
margin-bottom: 1.1em;
70+
}
71+
</style>

‎jest.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
preset: '@vue/cli-plugin-unit-jest',
3+
testMatch: ['<rootDir>/tests/*.test.js'],
4+
}

0 commit comments

Comments
 (0)