Moving from ES6 to TypeScript and Snowpack to Vite

guillaumebriday · guillaumebriday · commit 3331247aa61a · 2021-05-17T19:35:00.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -1,5 +1,7 @@
 {
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
-  ]
+  "presets": [
+    "@babel/env",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@babel/plugin-transform-typescript"]
 }
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1 @@
-pkg
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,9 +5,5 @@ module.exports = {
     browser: true,
     node: true,
     es6: true
-  },
-
-  globals: {
-    page: 'readonly'
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
-pkg
+dist
 build
diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-14.13.0
+14.16.1
diff --git a/.npmignore b/.npmignore
@@ -1,8 +1,14 @@
+
 .github
 .babelrc
 index.html
-snowpack.config.json
 netlify.toml
 .node-version
 .eslintrc.js
 src
+specs
+tsconfig.json
+vite.config.js
+.prettierignore
+.prettierrc
+.eslintignore
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.0] - 2021-05-17
+
+### Chore
+
+- Moving from [Snowpack](https://www.snowpack.dev/) to [Vite](https://github.com/vitejs/vite)
+- Upgrading Node to 14.16.1
+- Moving to TypeScript
+
 ## [2.0.1] - 2020-12-05
 
 ### Changed
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <script type="module" defer>
       import { Application } from 'stimulus'
       import SmoothScroll from 'smoothscroll-polyfill'
-      import ScrollTo from './src/index.js'
+      import ScrollTo from './src/index'
 
       SmoothScroll.polyfill()
       const application = Application.start()
diff --git a/netlify.toml b/netlify.toml
@@ -1,4 +1,4 @@
 
 [build]
-  publish="build"
+  publish="dist"
   command="yarn prod"
diff --git a/package.json b/package.json
@@ -19,44 +19,28 @@
   "license": "MIT",
   "homepage": "https://github.com/stimulus-components/stimulus-scroll-to",
   "private": false,
-  "esnext": "dist-src/index.js",
-  "main": "dist-node/index.js",
-  "module": "dist-web/index.js",
-  "@pika/pack": {
-    "pipeline": [
-      [
-        "@pika/plugin-standard-pkg"
-      ],
-      [
-        "@pika/plugin-build-web"
-      ],
-      [
-        "@pika/plugin-build-node"
-      ]
-    ]
-  },
+  "main": "dist/stimulus-scroll-to.umd.js",
+  "module": "dist/stimulus-scroll-to.es.js",
   "scripts": {
-    "format": "prettier-standard '**/*.{js,css,html}' --format",
-    "lint": "prettier-standard '**/*.{js,css,html}' --lint",
-    "dev": "snowpack dev",
-    "prod": "snowpack build",
-    "build": "pika build",
-    "pika:publish": "pika publish --no-tests --no-2fa",
-    "version": "yarn build"
+    "format": "prettier-standard  '**/*.{ts,css,html}' --format",
+    "lint": "prettier-standard  '**/*.{ts,css,html}' --lint",
+    "dev": "vite",
+    "prod": "vite build --config /dev/null",
+    "build": "tsc --noEmit && vite build",
+    "version": "yarn build",
+    "np": "np --no-2fa --no-test"
   },
   "devDependencies": {
     "@babel/core": "7.12.9",
     "@babel/plugin-syntax-class-properties": "7.12.1",
-    "@babel/preset-env": "7.12.7",
-    "@pika/pack": "0.5.0",
-    "@pika/plugin-build-node": "0.9.2",
-    "@pika/plugin-build-web": "0.9.2",
-    "@pika/plugin-standard-pkg": "0.9.2",
-    "@snowpack/plugin-babel": "^2.1.4",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
+    "np": "^7.5.0",
     "prettier-standard": "16.4.1",
     "smoothscroll-polyfill": "^0.4.4",
-    "snowpack": "^2.17.1",
-    "stimulus": "^2.0.0"
+    "stimulus": "^2.0.0",
+    "typescript": "^4.2.4",
+    "vite": "^2.3.3"
   },
   "peerDependencies": {
     "stimulus": "^2.0.0"
diff --git a/snowpack.config.json b/snowpack.config.json
diff --git a/src/index.ts b/src/index.ts
@@ -1,47 +1,60 @@
 import { Controller } from 'stimulus'
 
+interface Option {
+  offset?: number
+  behavior?: string
+}
+
 export default class extends Controller {
+  offset: number
+  behavior: string
+
+  // @ts-ignore
+  element: HTMLAnchorElement
+  offsetValue: number
+  behaviorValue: string
+
   static values = {
     offset: Number,
     behavior: String
   }
 
-  initialize () {
+  initialize (): void {
     this.scroll = this.scroll.bind(this)
   }
 
-  connect () {
+  connect (): void {
     this.element.addEventListener('click', this.scroll)
 
     this.offset = this.offsetValue || this.defaultOptions.offset || 10
     this.behavior = this.behaviorValue || this.defaultOptions.behavior || 'smooth'
   }
 
-  disconnect () {
+  disconnect (): void {
     this.element.removeEventListener('click', this.scroll)
   }
 
-  scroll (event) {
+  scroll (event: Event): void {
     event.preventDefault()
 
-    const id = this.element.hash.replace(/^#/, '')
-    const target = document.getElementById(id)
+    const id: string = this.element.hash.replace(/^#/, '')
+    const target: HTMLElement = document.getElementById(id)
 
     if (!target) {
       console.warn(`[stimulus-scroll-to] The element with the id: "${id}" does not exist on the page.`)
       return
     }
 
-    const elementPosition = target.getBoundingClientRect().top + window.pageYOffset
-    const offsetPosition = elementPosition - this.offset
+    const elementPosition: number = target.getBoundingClientRect().top + window.pageYOffset
+    const offsetPosition: number = elementPosition - this.offset
 
-    window.scrollTo({
+    window.scrollTo(<ScrollToOptions>{
       top: offsetPosition,
       behavior: this.behavior
     })
   }
 
-  get defaultOptions () {
+  get defaultOptions (): Option {
     return {}
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es6"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "target": "es6",
+    "moduleResolution": "node"
+  }
+}
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,18 @@
+const path = require('path')
+
+module.exports = {
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'stimulus-scroll-to'
+    },
+    rollupOptions: {
+      external: ['stimulus'],
+      output: {
+        globals: {
+          stimulus: 'Stimulus'
+        }
+      }
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`{`
`2`		`- "plugins": [`
`3`		`- "@babel/plugin-proposal-class-properties"`
`4`		`- ]`
	`2`	`+ "presets": [`
	`3`	`+ "@babel/env",`
	`4`	`+ "@babel/preset-typescript"`
	`5`	`+ ],`
	`6`	`+ "plugins": ["@babel/plugin-transform-typescript"]`
`5`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,9 +5,5 @@ module.exports = {`
`5`	`5`	`browser: true,`
`6`	`6`	`node: true,`
`7`	`7`	`es6: true`
`8`		`- },`
`9`		`-`
`10`		`- globals: {`
`11`		`- page: 'readonly'`
`12`	`8`	`}`
`13`	`9`	`}`
-Original file line number
+Diff line change
@@ @@ -1,3 +1,3 @@ @@
 node_modules
 -pkg
 +dist
 build