refactor: 将 example 改为 demo 并通过 git-pages 发布

.babelrc

@@ -5,8 +5,7 @@
       {
         "targets": {
           "node": "current"
-        },
-        "modules": false
+        }
       }
     ],
     "@babel/preset-react"

__tests__/index.test.js

@@ -1,126 +1,109 @@
-import React from 'react'
-import Anchor, { SCROLL_TOP } from '../src/Anchor'
-import { mount } from 'enzyme'
+import React from "react";
+import Anchor, { SCROLL_TOP } from "../src/Anchor";
+import { mount } from "enzyme";
 
 // we can't test element.scrollTop because of jsdom don't implement scrollIntoView
 // https://github.com/jsdom/jsdom/issues/1695
-describe('Anchor', () => {
+describe("Anchor", () => {
   beforeAll(() => {
-    Element.prototype.scrollIntoView = jest.fn()
+    Element.prototype.scrollIntoView = jest.fn();
   });
 
-  describe('scrollIntoView', () => {
-    test('should run this.scrollIntoView when Anchor mount', () => {
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
-      const spy = jest.spyOn(Anchor.prototype, 'scrollIntoView')
-      mount(<Anchor name="section1" />)
+  describe("scrollIntoView", () => {
+    test("should run this.scrollIntoView when Anchor mount", () => {
+      history.replaceState({}, "Test", "/#demo?_to=section1");
+      const spy = jest.spyOn(Anchor.prototype, "scrollIntoView");
+      mount(<Anchor name="section1" />);
 
-      expect(spy).toHaveBeenCalled()
-    })
+      expect(spy).toHaveBeenCalled();
+    });
 
-    test('should run this.scrollIntoView when hash change', async () => {
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
+    test("should run this.scrollIntoView when hash change", async () => {
+      history.replaceState({}, "Test", "/#demo?_to=section1");
 
-      const spy1 = jest.spyOn(Anchor.prototype, 'handleHashChange')
-      const spy2 = jest.spyOn(Anchor.prototype, 'scrollIntoView')
+      const spy1 = jest.spyOn(Anchor.prototype, "handleHashChange");
+      const spy2 = jest.spyOn(Anchor.prototype, "scrollIntoView");
 
-      mount(<Anchor name="section2" />)
+      mount(<Anchor name="section2" />);
 
-      location.hash = 'demo?_to=section2'
+      location.hash = "demo?_to=section2";
 
-      await new Promise((resolve) => setTimeout(resolve, 0))
+      await new Promise(resolve => setTimeout(resolve, 0));
 
-      expect(spy1).toHaveBeenCalled()
-      expect(spy2).toHaveBeenCalled()
-    })
-  })
+      expect(spy1).toHaveBeenCalled();
+      expect(spy2).toHaveBeenCalled();
+    });
+  });
 
-  describe('scrollTop', () => {
+  describe("scrollTop", () => {
     test(`parameters of the interval should be a number`, () => {
       const wrapper = mount(
-        <Anchor
-          name="section1"
-          type={SCROLL_TOP}
-          interval="100"
-        />
-      )
+        <Anchor name="section1" type={SCROLL_TOP} interval="100" />
+      );
 
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
+      history.replaceState({}, "Test", "/#demo?_to=section1");
       expect(() => {
-        wrapper.instance().scrollTop()
-      }).toThrow('interval must be a number')
-    })
+        wrapper.instance().scrollTop();
+      }).toThrow("interval must be a number");
+    });
 
     test(`parameters of the container should match a element`, () => {
-      history.replaceState({}, 'Test', '/')
+      history.replaceState({}, "Test", "/");
 
       const wrapper = mount(
-        <Anchor
-          name="section1"
-          type={SCROLL_TOP}
-          container="#test"
-        />
-      )
+        <Anchor name="section1" type={SCROLL_TOP} container="#test" />
+      );
 
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
+      history.replaceState({}, "Test", "/#demo?_to=section1");
       expect(() => {
-        wrapper.instance().scrollTop()
-      }).toThrow("container can't match any element")
-    })
+        wrapper.instance().scrollTop();
+      }).toThrow("container can't match any element");
+    });
 
-    test('should run this.scrollTop in when Anchor mount', async () => {
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
-      const spy = jest.spyOn(Anchor.prototype, 'scrollTop')
-      mount(
-        <Anchor
-          name="section1"
-          type={SCROLL_TOP}
-        />
-      )
+    test("should run this.scrollTop in when Anchor mount", async () => {
+      history.replaceState({}, "Test", "/#demo?_to=section1");
+      const spy = jest.spyOn(Anchor.prototype, "scrollTop");
+      mount(<Anchor name="section1" type={SCROLL_TOP} />);
 
-      await new Promise((resolve) => setTimeout(resolve, 0))
+      await new Promise(resolve => setTimeout(resolve, 0));
 
-      expect(spy).toHaveBeenCalled()
-    })
+      expect(spy).toHaveBeenCalled();
+    });
 
-    test('should run this.scrollTop in when hash change', async () => {
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
-      const spy = jest.spyOn(Anchor.prototype, 'scrollTop')
-      mount(
-        <Anchor
-          name="section2"
-          type={SCROLL_TOP}
-        />
-      )
+    test("should run this.scrollTop in when hash change", async () => {
+      history.replaceState({}, "Test", "/#demo?_to=section1");
+      const spy = jest.spyOn(Anchor.prototype, "scrollTop");
+      mount(<Anchor name="section2" type={SCROLL_TOP} />);
 
-      location.hash = 'demo?_to=section2'
+      location.hash = "demo?_to=section2";
 
-      await new Promise((resolve) => setTimeout(resolve, 0))
+      await new Promise(resolve => setTimeout(resolve, 0));
 
-      expect(spy).toHaveBeenCalled()
-    })
+      expect(spy).toHaveBeenCalled();
+    });
 
     test(`container scrollTop should be Anchor's offsetTop + interval`, async () => {
-      const div = document.createElement('div')
+      const div = document.createElement("div");
 
-      div.setAttribute('id', 'container')
-      div.style.setProperty('position', 'relative')
-      document.body.appendChild(div)
+      div.setAttribute("id", "container");
+      div.style.setProperty("position", "relative");
+      document.body.appendChild(div);
 
-      history.replaceState({}, 'Test', '/#demo?_to=section1')
+      history.replaceState({}, "Test", "/#demo?_to=section1");
 
-      mount((
+      mount(
         <Anchor
           name="section1"
           type={SCROLL_TOP}
           container="#container"
           interval={100}
-        />
-      ), { attachTo: div })
+        />,
+        { attachTo: div }
+      );
 
-      await new Promise((resolve) => setTimeout(resolve, 0))
+      await new Promise(resolve => setTimeout(resolve, 0));
 
-      expect(div.scrollTop).toBe(100)
-    })
-  })
-})
+      expect(div.scrollTop).toBe(100);
+    });
+  });
+});

__tests__/setup.js

@@ -1,4 +1,4 @@
-import { configure } from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
+const enzyme = require("enzyme");
+const Adapter = require("enzyme-adapter-react-16");
 
-configure({ adapter: new Adapter() })
+enzyme.configure({ adapter: new Adapter() });

__tests__/utils.test.js

@@ -1,43 +1,40 @@
-import { getSearchParams, isNumber, setScrollTop } from '../src/utils'
+import { getSearchParams, isNumber, setScrollTop } from "../src/utils";
 
-describe('test utils', () => {
+describe("test utils", () => {
   describe.each([
-    ['/#test?_to=anchor1', '_to', 'anchor1'],
-    ['/#test?filed1=1&filed2=2&$target=anchor2', '$target', 'anchor2']
+    ["/#test?_to=anchor1", "_to", "anchor1"],
+    ["/#test?filed1=1&filed2=2&$target=anchor2", "$target", "anchor2"]
   ])("path is %s, run getSearchParams('%s')", (url, key, expected) => {
     test(`expect return is ${expected}`, () => {
       // jest unable to modify directly window.location
-      // https://github.com/facebook/jest/issues/5124 
-      history.replaceState({}, 'Test', url);
-      expect(getSearchParams(key)).toBe(expected)
-    })
-  })
+      // https://github.com/facebook/jest/issues/5124
+      history.replaceState({}, "Test", url);
+      expect(getSearchParams(key)).toBe(expected);
+    });
+  });
 
   describe.each([
     [100, true],
     [-100, true],
-    ['100', false],
+    ["100", false],
     [true, false],
     [undefined, false],
     [null, false],
-    [Symbol('test'), false],
+    [Symbol("test"), false],
     [NaN, false]
   ])("value %s, run isNumber(%s)", (val, expected) => {
     test(`expect return is ${expected}`, () => {
-      expect(isNumber(val)).toBe(expected)
-    })
-  })
-
-  describe('test setScrollTop', () => {
-    test('expect scrollTop is 100', () => {
-      setScrollTop(100)
-
-      expect(document.documentElement.scrollTop).toBe(100)
-      expect(window.pageYOffset).toBe(100)
-      expect(document.body.scrollTop).toBe(100)
-    })
-  })
-})
-
+      expect(isNumber(val)).toBe(expected);
+    });
+  });
 
+  describe("test setScrollTop", () => {
+    test("expect scrollTop is 100", () => {
+      setScrollTop(100);
 
+      expect(document.documentElement.scrollTop).toBe(100);
+      expect(window.pageYOffset).toBe(100);
+      expect(document.body.scrollTop).toBe(100);
+    });
+  });
+});

demo/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}