Moving from ES6 to TypeScript and Snowpack to Vite

.babelrc

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

.eslintignore

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

.gitignore

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

.npmignore

@@ -3,8 +3,11 @@ jest
 .babelrc
 jest.config.js
 index.html
-snowpack.config.json
 netlify.toml
 .node-version
 .eslintrc.js
 src
+spec
+tsconfig.json
+vite.config.js
+.prettierignore

index.html

@@ -13,7 +13,7 @@
 
     <script type="module" defer>
       import { Application } from 'stimulus'
-      import NestedForm from './src/index.js'
+      import NestedForm from './src/index'
 
       const application = Application.start()
       application.register('nested-form', NestedForm)

jest/jest-setup.js

@@ -1,11 +1,2 @@
-const { setup: setupDevServer } = require('jest-dev-server')
-const { setup: setupPuppeteer } = require('jest-environment-puppeteer')
-
-module.exports = async function globalSetup (globalConfig) {
-  await setupPuppeteer(globalConfig)
-  await setupDevServer({
-    command: `yarn dev --open none --port 3000`,
-    launchTimeout: 50000,
-    port: 3000
-  })
-}
+import '@babel/polyfill'
+import 'mutationobserver-shim'

package.json

@@ -7,51 +7,42 @@
   "license": "MIT",
   "homepage": "https://github.com/stimulus-components/stimulus-rails-nested-form",
   "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-rails-nested-form.umd.js",
+  "module": "dist/stimulus-rails-nested-form.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",
+    "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",
     "test": "BABEL_ENV=test jest",
-    "pika:publish": "pika publish --no-2fa",
-    "version": "yarn build"
-  },
-  "dependencies": {
-    "stimulus": "^2.0.0"
+    "np": "np --no-2fa"
   },
   "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",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.14.1",
+    "@babel/preset-typescript": "^7.13.0",
     "@snowpack/plugin-babel": "2.1.3",
+    "@testing-library/dom": "^7.30.4",
     "@types/jest": "^26.0.14",
     "babel-jest": "^26.5.2",
     "jest": "^26.5.3",
-    "jest-dev-server": "^4.4.0",
-    "jest-puppeteer": "^4.4.0",
+    "mutationobserver-shim": "^0.3.7",
+    "np": "^7.5.0",
     "prettier-standard": "16.4.1",
-    "puppeteer": "^5.3.1",
-    "snowpack": "2.14.0"
+    "stimulus": "^2.0.0",
+    "typescript": "^4.2.4",
+    "vite": "^2.2.4"
+  },
+  "jest": {
+    "setupFiles": [
+      "<rootDir>/jest/jest-setup.js"
+    ]
+  },
+  "peerDependencies": {
+    "stimulus": "^2.0.0"
   }
 }

spec/index.test.ts

@@ -0,0 +1,42 @@
+import { Application } from 'stimulus'
+import NestedForm from '../src/index'
+
+const startStimulus = (): void => {
+  const application = Application.start()
+  application.register('nested-form', NestedForm)
+}
+
+describe('#nestedForm', (): void => {
+  beforeEach((): void => {
+    startStimulus()
+
+    document.body.innerHTML = `
+      <form data-controller="nested-form">
+        <template data-nested-form-target="template">
+          <div class="nested-form-wrapper" data-new-record="true">
+            <label for="NEW_RECORD">New todo</label>
+          </div>
+        </template>
+
+        <div>
+          <label>Your todo</label>
+        </div>
+
+        <div data-nested-form-target="target"></div>
+
+        <button type="button" data-action="nested-form#add">Add todo</button>
+      </form>
+    `
+  })
+
+  it('should create new todo', (): void => {
+    const target: HTMLElement = document.querySelector("[data-nested-form-target='target']")
+    const addButton: HTMLButtonElement = document.querySelector("[data-action='nested-form#add']")
+
+    expect(target.previousElementSibling.innerHTML).toContain('Your todo')
+
+    addButton.click()
+
+    expect(target.previousElementSibling.innerHTML).toContain('New todo')
+  })
+})

src/index.js → src/index.ts

@@ -1,32 +1,40 @@
 import { Controller } from 'stimulus'
 
 export default class extends Controller {
+  targetTarget: HTMLElement
+  templateTarget: HTMLElement
+  wrapperSelectorValue: string
+  wrapperSelector: string
+
   static targets = ['target', 'template']
   static values = {
     wrapperSelector: String
   }
 
-  initialize () {
+  initialize (): void {
     this.wrapperSelector = this.wrapperSelectorValue || '.nested-form-wrapper'
   }
 
-  add (e) {
+  add (e: Event) {
     e.preventDefault()
 
-    const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
+    const content: string = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
     this.targetTarget.insertAdjacentHTML('beforebegin', content)
   }
 
-  remove (e) {
+  remove (e: Event): void {
     e.preventDefault()
 
-    const wrapper = e.target.closest(this.wrapperSelector)
+    // @ts-ignore
+    const wrapper: HTMLElement = e.target.closest(this.wrapperSelector)
 
     if (wrapper.dataset.newRecord === 'true') {
       wrapper.remove()
     } else {
       wrapper.style.display = 'none'
-      wrapper.querySelector("input[name*='_destroy']").value = 1
+
+      const input: HTMLInputElement = wrapper.querySelector("input[name*='_destroy']")
+      input.value = '1'
     }
   }
 }

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "es6"],
+    "types": ["vite/client", "jest"],
+    "skipLibCheck": true
+  }
+}

vite.config.js

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