refactor: use TypeScript + Node 20 + vite (#44)

* refactor: use TypeScript + Node 20 + vite * docs: mention TypeScript, Node 20 and vite * chore: update Node versions in ci matrix
wowserhq · Feb 4, 2024 · 7355ac0 · 7355ac0
1 parent cc3bbb2
commit 7355ac0
Show file tree

Hide file tree

Showing 112 changed files with 19,696 additions and 10,571 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,25 @@
+// TODO: Expand @wowserhq/eslint-config with TypeScript variant
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  root: true,
+  env: { browser: true, node: true },
+  rules: {
+    'camelcase': 'off',
+    'no-console': 'off',
+    'no-unused-vars': ['error', {
+      'argsIgnorePattern': '^_',
+      'varsIgnorePattern': '^_'
+    }],
+    'quotes': ['error', 'single', {
+      'avoidEscape': true
+    }],
+    'semi': ['warn'],
+  },
+};
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [18.x, 20.x]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
@@ -22,24 +22,24 @@ jobs:
           CI: true
 
   test-coverage:
-    name: test coverage (12.x)
+    name: test coverage (20.x)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 20
       - run: npm install
       - run: npm run test:coverage
       - uses: codecov/codecov-action@v1
 
   build:
-    name: build (12.x)
+    name: build (20.x)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 20
       - run: npm install
       - run: npm run build
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [18.x, 20.x]
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
@@ -19,24 +19,24 @@ jobs:
           CI: true
 
   test-coverage:
-    name: test coverage (12.x)
+    name: test coverage (20.x)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 20
       - run: npm install
       - run: npm run test:coverage
       - uses: codecov/codecov-action@v1
 
   build:
-    name: build (12.x)
+    name: build (20.x)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 20
       - run: npm install
       - run: npm run build
diff --git a/README.md b/README.md
@@ -29,16 +29,15 @@ the official client is required.
 
 ## Development
 
-Wowser is written in [ES2015+], modularized using [ECMAScript modules] and
-developed with [webpack].
+Wowser is written in [TypeScript] and developed with [vite].
 
 1. Clone the repository:
 
    ```shell
    git clone git://github.com/wowserhq/wowser.git
    ```
 
-2. Download and install [Node.js] 12+ for your platform.
+2. Download and install [Node.js] 20+ for your platform.
 
 3. Install dependencies:
 
@@ -79,9 +78,9 @@ When contributing, please:
 
 [BLPConverter]: https://github.com/wowserhq/blizzardry#blp
 [ECMAScript modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
-[ES2015+]: https://babeljs.io/docs/learn-es2015/
 [Node.js]: http://nodejs.org/#download
 [StormLib]: https://github.com/wowserhq/blizzardry#mpq
+[TypeScript]: https://www.typescriptlang.org/
 [Wowser]: https://github.com/wowserhq/wowser
 [soon™]: http://www.wowwiki.com/Soon
-[webpack]: http://webpack.github.io/
+[vite]: https://vitejs.dev/
diff --git a/commitlint.config.js → commitlint.config.cjs b/commitlint.config.js → commitlint.config.cjs
diff --git a/husky.config.js → husky.config.cjs b/husky.config.js → husky.config.cjs
diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8" />
     <title>Wowser</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
       html, body {
         margin: 0;
@@ -41,5 +43,6 @@
     <div class="container">
       <canvas></canvas>
     </div>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+  collectCoverageFrom: [
+    'src/**/*.js',
+    'src/**/*.ts',
+  ],
+  coverageDirectory: './coverage/',
+  moduleFileExtensions: ['js', 'ts'],
+  testMatch: [
+    '**/spec/**/*.spec.js',
+  ],
+  verbose: true,
+};
diff --git a/jest.config.js b/jest.config.js
diff --git a/lint-staged.config.cjs b/lint-staged.config.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+  '*.{js,ts}': ['eslint'],
+};
diff --git a/lint-staged.config.js b/lint-staged.config.js