Moving from ES6 to TypeScript and Snowpack to Vite

guillaumebriday · guillaumebriday · commit a9a362b3e03c · 2021-05-17T19:00:13.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,10 +1,14 @@
+
 .github
 jest
 .babelrc
 jest.config.js
 index.html
-snowpack.config.json
 netlify.toml
 .node-version
 .eslintrc.js
 src
+specs
+tsconfig.json
+vite.config.js
+.prettierignore
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
+- Using TypeScript
+
 ## [2.0.0] - 2020-12-05
 
 ### Added
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 
     <script type="module" defer>
       import { Application } from 'stimulus'
-      import CharacterCounter from './src/index.js'
+      import CharacterCounter from './src/index'
 
       const application = Application.start()
       application.register('character-counter', CharacterCounter)
diff --git a/netlify.toml b/netlify.toml
@@ -1,3 +1,3 @@
 [build]
-  publish="build"
+  publish="dist"
   command="yarn prod"
diff --git a/package.json b/package.json
@@ -18,43 +18,27 @@
   "license": "MIT",
   "homepage": "https://github.com/stimulus-components/stimulus-character-counter",
   "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-character-counter.umd.js",
+  "module": "dist/stimulus-character-counter.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-tests"
   },
   "devDependencies": {
     "@babel/core": "7.12.3",
     "@babel/plugin-syntax-class-properties": "7.12.1",
-    "@babel/preset-env": "7.12.1",
-    "@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",
-    "snowpack": "2.16.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,26 +1,29 @@
 import { Controller } from 'stimulus'
 
 export default class extends Controller {
+  counterTarget: HTMLElement
+  inputTarget: HTMLInputElement
+
   static targets = ['input', 'counter']
 
-  initialize () {
+  initialize (): void {
     this.update = this.update.bind(this)
   }
 
-  connect () {
+  connect (): void {
     this.update()
     this.inputTarget.addEventListener('input', this.update)
   }
 
-  disconnect () {
+  disconnect (): void {
     this.inputTarget.removeEventListener('input', this.update)
   }
 
-  update () {
-    this.counterTarget.innerHTML = this.count
+  update (): void {
+    this.counterTarget.innerHTML = this.count.toString()
   }
 
-  get count () {
+  get count (): Number {
     return this.inputTarget.value.length
   }
 }
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-timeago'
+    },
+    rollupOptions: {
+      external: ['date-fns', '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