Moving from ES6 to TypeScript and Snowpack to Vite

.babelrc

@@ -1,5 +1,7 @@
 {
-  "plugins": [
-    "@babel/plugin-proposal-class-properties"
-  ]
+  "presets": [
+    "@babel/env",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@babel/plugin-transform-typescript"]
 }

.eslintignore

@@ -1 +1 @@
-pkg
+dist

.eslintrc.js

@@ -5,9 +5,5 @@ module.exports = {
     browser: true,
     node: true,
     es6: true
-  },
-
-  globals: {
-    page: 'readonly'
   }
 }

.gitignore

@@ -1,3 +1,3 @@
 node_modules
-pkg
+dist
 build

.node-version

@@ -1 +1 @@
-14.13.0
+14.17.0

.npmignore

@@ -1,10 +1,13 @@
 .github
-jest
 .babelrc
-jest.config.js
 index.html
-snowpack.config.json
 netlify.toml
 .node-version
 .eslintrc.js
 src
+spec
+tsconfig.json
+vite.config.js
+.prettierignore
+.prettierrc
+.eslintignore

.prettierignore

@@ -0,0 +1,2 @@
+dist
+node_modules

CHANGELOG.md

@@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.0] - 2021-05-25
+
+### Chore
+
+- Moving from Snowpack to Vite
+- Using `stimulus` as external library reducing bundle size from `40.72kb` to `0.67kb`.
+- Moving to TypeScript
+- Upgrading Node to 14.17.0
+
 ## [2.0.0] - 2020-12-05
 
 ### Added

index.html

@@ -10,7 +10,7 @@
 
     <script type="module" defer>
       import { Application } from 'stimulus'
-      import TextareaAutogrow from './src/index.js'
+      import TextareaAutogrow from './src/index'
 
       const application = Application.start()
       application.register('textarea-autogrow', TextareaAutogrow)

netlify.toml

@@ -1,3 +1,3 @@
 [build]
-  publish="build"
+  publish="dist"
   command="yarn prod"

package.json

@@ -7,44 +7,29 @@
   "license": "MIT",
   "homepage": "https://github.com/stimulus-components/stimulus-textarea-autogrow",
   "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-textarea-autogrow.umd.js",
+  "module": "dist/stimulus-textarea-autogrow.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"
-  },
-  "dependencies": {
-    "stimulus": "^2.0.0"
+    "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.11.6",
     "@babel/plugin-syntax-class-properties": "7.10.4",
-    "@babel/preset-env": "7.11.5",
-    "@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.3",
-    "prettier-standard": "16.4.1",
-    "snowpack": "2.14.0"
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
+    "np": "^7.5.0",
+    "prettier-standard": "16.3.0",
+    "stimulus": "^2.0.0",
+    "typescript": "^4.2.4",
+    "vite": "^2.3.4"
+  },
+  "peerDependencies": {
+    "stimulus": "^2.0.0"
   }
 }

src/index.js → src/index.ts

@@ -2,17 +2,23 @@ import { Controller } from 'stimulus'
 import { debounce } from './utils'
 
 export default class extends Controller {
+  // @ts-ignore
+  element: HTMLInputElement
+  onResize: EventListenerOrEventListenerObject
+
+  resizeDebounceDelayValue: number
+
   static values = {
     resizeDebounceDelay: Number
   }
 
-  initialize () {
+  initialize (): void {
     this.autogrow = this.autogrow.bind(this)
   }
 
-  connect () {
+  connect (): void {
     this.element.style.overflow = 'hidden'
-    const delay = this.resizeDebounceDelayValue || 100
+    const delay: number = this.resizeDebounceDelayValue || 100
 
     this.onResize = delay > 0 ? debounce(this.autogrow, delay) : this.autogrow
 
@@ -22,11 +28,11 @@ export default class extends Controller {
     window.addEventListener('resize', this.onResize)
   }
 
-  disconnect () {
+  disconnect (): void {
     window.removeEventListener('resize', this.onResize)
   }
 
-  autogrow () {
+  autogrow (): void {
     this.element.style.height = 'auto' // Force re-print before calculating the scrollHeight value.
     this.element.style.height = `${this.element.scrollHeight}px`
   }

src/utils.js → src/utils.ts

@@ -1,5 +1,5 @@
-function debounce (callback, delay) {
-  let timeout
+function debounce (callback: Function, delay: number) {
+  let timeout: number
 
   return (...args) => {
     const context = this

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es6"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "target": "es6",
+    "moduleResolution": "node"
+  }
+}

vite.config.js

@@ -0,0 +1,18 @@
+const path = require('path')
+
+module.exports = {
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'stimulus-textarea-autogrow'
+    },
+    rollupOptions: {
+      external: ['stimulus'],
+      output: {
+        globals: {
+          stimulus: 'Stimulus'
+        }
+      }
+    }
+  }
+}