feat: release 0.0.1

Author: reactjser

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintignore

@@ -0,0 +1 @@
+dist/

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  plugins: [],
+  rules: {},
+};

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "src/**/*.{ts,tsx}": "eslint --fix",
+  "*.{ts,tsx,js,json,md}": "prettier --write"
+}

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: ['@babel/preset-typescript', '@babel/preset-env'],
+  plugins: [
+    // https://github.com/vuejs/jsx-next
+    ['@vue/babel-plugin-jsx', { mergeProps: false, enableObjectSlots: false }],
+  ],
+};

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package-lock.json

@@ -0,0 +1,57 @@
+{
+  "name": "vue3-virtual-scroll-list",
+  "version": "0.0.1",
+  "description": "A vue3 component support big amount data list with high scroll performance.",
+  "main": "dist/index.js",
+  "scripts": {
+    "build:dev": "cross-env mode=development rollup -c rollup.config.js -w",
+    "build": "cross-env mode=production rollup -c rollup.config.js",
+    "prepare": "husky install"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reactjser/vue3-virtual-scroll-list.git"
+  },
+  "keywords": [
+    "vue3",
+    "big-data",
+    "big-list",
+    "scroll-list",
+    "virtual-list"
+  ],
+  "author": "reactjser",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/reactjser/vue3-virtual-scroll-list/issues"
+  },
+  "homepage": "https://github.com/reactjser/vue3-virtual-scroll-list#readme",
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@commitlint/cli": "^13.1.0",
+    "@commitlint/config-conventional": "^13.1.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-vue": "^7.16.0",
+    "husky": "^7.0.0",
+    "lint-staged": "^11.1.2",
+    "prettier": "^2.3.2",
+    "rollup": "^2.56.2",
+    "tiny-emitter": "^2.1.0",
+    "typescript": "^4.3.5",
+    "vue": "^3.2.2"
+  }
+}

package.json

@@ -0,0 +1,30 @@
+import babel from '@rollup/plugin-babel';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import pkg from './package.json';
+
+const extensions = ['.js', '.jsx', '.ts', '.tsx'];
+const isDev = process.env.mode !== 'production';
+const banner = `/**
+* vue3-virtual-scroll-list v${pkg.version}
+* open source under the MIT license
+* ${pkg.homepage}
+*/`;
+
+export default {
+  external: ['vue'],
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.js',
+    format: 'esm',
+    banner,
+    sourcemap: isDev,
+  },
+  plugins: [
+    resolve({
+      extensions,
+    }),
+    commonjs(),
+    babel({ extensions, babelHelpers: 'bundled' }),
+  ],
+};

rollup.config.js

@@ -0,0 +1,3 @@
+import VirtualList from './virtual-list';
+
+export default VirtualList;

src/index.ts

@@ -0,0 +1,100 @@
+import { defineComponent, h } from 'vue';
+import emitter from 'tiny-emitter/instance';
+import { ItemProps, SlotProps } from './props';
+
+const Wrapper = {
+  created() {
+    this.shapeKey = this.horizontal ? 'offsetWidth' : 'offsetHeight';
+  },
+
+  mounted() {
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.dispatchSizeChange();
+      });
+      this.resizeObserver.observe(this.$el);
+    }
+  },
+
+  // since componet will be reused, so disptach when updated
+  updated() {
+    this.dispatchSizeChange();
+  },
+
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  },
+
+  methods: {
+    getCurrentSize() {
+      return this.$el ? this.$el[this.shapeKey] : 0;
+    },
+
+    // tell parent current size identify by unqiue key
+    dispatchSizeChange() {
+      emitter.emit(
+        this.event,
+        this.uniqueKey,
+        this.getCurrentSize(),
+        this.hasInitial,
+      );
+      // this.$parent.$emit(this.event, this.uniqueKey, this.getCurrentSize(), this.hasInitial)
+    },
+  },
+};
+
+export const Item = defineComponent({
+  name: 'VirtualListItem',
+  mixins: [Wrapper],
+  props: ItemProps,
+  render() {
+    const {
+      tag,
+      component,
+      extraProps = {},
+      index,
+      source,
+      scopedSlots = {},
+      uniqueKey,
+    } = this;
+    const props = {
+      ...extraProps,
+      source,
+      index,
+    };
+
+    return h(
+      tag,
+      {
+        key: uniqueKey,
+      },
+      [
+        h(component, {
+          ...props,
+          scopedSlots: scopedSlots,
+        }),
+      ],
+    );
+  },
+});
+
+export const Slot = defineComponent({
+  mixins: [Wrapper],
+  props: SlotProps,
+  setup(props, { slots }) {
+    return () => {
+      const { tag, uniqueKey } = props;
+
+      return h(
+        tag,
+        {
+          key: uniqueKey,
+        },
+        slots.default(),
+      );
+    };
+  },
+});