feat: Re-scratch vue-fixed-header

Author: potato4d

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

package.json

@@ -19,9 +19,8 @@
   ],
   "scripts": {
     "dev": "yarn serve",
-    "serve": "parcel ./example/index.html -d docs",
-    "build": "yarn clean;bili ./src/index.ts --format cjs --js typescript2",
-    "clean": "rm -rf {.rpt2_cache,dist}",
+    "serve": "vue-cli-service serve ./src/example.ts",
+    "build": "vue-cli-service build --target lib src/components/vue-fixed-header.vue",
     "format": "prettier './{src,example}/**/*.{js,ts,vue}' --write",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -32,35 +31,32 @@
     "name": "potato4d",
     "email": "[email protected]"
   },
-  "bili": {
-    "filename": "vue-fixed-header.js"
-  },
   "devDependencies": {
     "@types/jest": "24.0.9",
+    "@types/lodash.clonedeep": "^4.5.5",
     "@types/node": "10.12.27",
+    "@vue/cli": "^3.0.3",
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-typescript": "^3.4.0",
+    "@vue/cli-plugin-unit-jest": "^3.0.3",
+    "@vue/cli-service": "^3.4.0",
     "@vue/component-compiler-utils": "2.6.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "all-contributors-cli": "6.1.2",
-    "bili": "4.4.0",
     "bulma": "0.7.4",
     "codecov": "3.2.0",
     "gh-pages": "2.0.1",
     "jest": "24.1.0",
     "jsdom": "13.2.0",
     "jsdom-global": "3.0.2",
-    "parcel-bundler": "1.11.0",
-    "prettier": "1.16.4",
-    "rollup-plugin-typescript2": "0.19.3",
     "standard-version": "5.0.0",
     "ts-jest": "24.0.0",
-    "typescript": "3.3.3333",
+    "typescript": "3.0.1",
     "vue-template-compiler": "2.6.7"
   },
   "dependencies": {
-    "vue": "^2.5.17",
-    "vue-class-component": "^7.0.0",
-    "vue-hot-reload-api": "^2.3.1",
-    "vue-property-decorator": "^7.2.0"
+    "lodash.clonedeep": "^4.5.0",
+    "vue": "^2.5.17"
   },
   "prettier": {
     "semi": false,

src/components/ExampleApp.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="app">
+    <VueFixedHeader :threshold="100" fixedClass="fixed">
+      <nav>
+        <ul>
+          <li>
+            Header Item
+          </li>
+        </ul>
+      </nav>
+    </VueFixedHeader>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import VueFixedHeader from './vue-fixed-header'
+
+export default Vue.extend({
+  data() {
+    return {
+      aaa: false
+    }
+  },
+  components: {
+    VueFixedHeader
+  }
+})
+</script>
+
+<style>
+html,
+body,
+#app {
+  width: 100vw;
+  min-height: 150vh;
+  margin: 0;
+  padding: 0;
+  background: #fafafa;
+  overflow-x: hidden;
+}
+
+nav {
+  display: flex;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  border-bottom: solid 1px #e5e5e5;
+}
+
+nav.fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+
+ul {
+  flex: 1;
+  display: flex;
+  align-content: stretch;
+  justify-content: flex-start;
+  list-style: none;
+}
+
+li {
+  padding: 8px 16px;
+}
+</style>

src/components/vue-fixed-header.tsx

@@ -0,0 +1,112 @@
+import Vue, { CreateElement, VNode } from 'vue'
+import { getTargetTag } from '../utils/getTargetTag'
+
+type LocalData = {
+  qs: any,
+  check: any,
+  tag: any,
+  isFixed: boolean
+}
+
+export default Vue.extend({
+  props: {
+    threshold: {
+      required: false,
+      type: Number,
+      default: 0
+    },
+    headerClass: {
+      required: false,
+      type: String,
+      default: 'vue-fixed-header',
+    },
+    fixedClass: {
+      required: false,
+      type: String,
+      default: 'vue-fixed-header--isFixed'
+    }
+  },
+
+  data() {
+    return {
+      qs: null,
+      check: null,
+      tag: null,
+      isFixed: false
+    } as LocalData
+  },
+
+  mounted() {
+    this.main()
+    this.registerEvent()
+  },
+
+  beforeDestroy() {
+    this.removeEvent()
+  },
+
+  methods: {
+    main() {
+      this.qs = (e: string) => document.querySelector(e)
+      this.tag = getTargetTag(navigator.userAgent)
+      this.check = () => {
+        const { qs, tag, threshold } = this
+        if (!tag) {
+          return
+        }
+        if (this.isFixed !== qs(tag).scrollTop > threshold) {
+          this.isFixed = qs(tag).scrollTop > threshold
+          // console.log(this.$slots.default![0])
+          // this.$slots.default![0] = copy(this.$slots.default![0])
+          this.$forceUpdate()
+        }
+      }
+    },
+    registerEvent() {
+      window.addEventListener('scroll', this.check)
+    },
+    removeEvent() {
+      window.removeEventListener('scroll', this.check)
+    }
+  },
+
+  render(h: CreateElement): VNode {
+    const children = this.$slots.default
+    if (!children) {
+      return h()
+    }
+
+    const _child = [...children][0] as VNode
+    const child = h(_child.tag, _child.data, _child.children || _child.text)
+
+    if (!child) {
+      return h()
+    }
+
+    child.data = child.data || { class: '' }
+
+    // string to string[]
+    if (typeof child.data.class === 'string') {
+      child.data.class = child.data.class.split(' ')
+    }
+
+    // string[] to { K: V }
+    if (Array.isArray(child.data.class)) {
+      child.data.class = [...child.data.class].reduce((a, b) => {
+        return {
+          ...a,
+          [b]: true
+        }
+      }, {})
+    }
+
+    child.data.class[this.headerClass] = true
+    child.data.class[this.fixedClass] = !!this.isFixed
+
+    child.data.class = Object.entries(child.data.class).map(([k, v]) => {
+      return v ? k : null
+    }).filter((v) => v).join(' ')
+
+    return child
+  }
+})

src/example.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+// import ExampleApp from './components/ExampleApp.vue'
+import ExampleApp from './components/ExampleApp.vue'
+
+new Vue({
+  render: h => h(ExampleApp)
+}).$mount('#app')

src/index.spec.ts

@@ -0,0 +1,13 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/index.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

src/types/shims-tsx.d.ts

@@ -0,0 +1,15 @@
+export function getTargetTag(userAgent: string): 'html' | 'body' {
+  if (userAgent.includes('Edge')) {
+    return 'body'
+  }
+  if (userAgent.includes('Firefox/') && +userAgent.split('Firefox/')[1] >= 62) {
+    return 'html'
+  }
+  if (
+    !(window as any).chrome &&
+    'WebkitAppearance' in (document.documentElement as any).style
+  ) {
+    return 'body'
+  }
+  return 'html'
+}