refactor!: move Router fully to TypeScript (#886)

* feat!: replace umd and esm bundles with esm for distribution

Fixes #828

* chore: remove gen-typescript-declarations dependency

* build: separate tsconfig.json for build and test

* --wip-- [skip ci]

* --wip-- [skip ci]

* --wip-- [skip ci]

* --wip-- [skip ci]

* --wip-- [skip ci]

* --wip-- [skip ci]

* --wip-- [skip ci]

* --wip-- [skip ci]

* chore: remove interfaces.d.ts

* test: add vite, karma, mocha devDeps

* --wip-- [skip ci]

* test: fix .nested.property assertions

* fix: match parent route when route.children is truthy

* refactor: improve types and move them to d.ts

* refactor: move generatedUrls spec to TS

* refactor: move matchPath spec to TS

* refactor: move dynamic-redirect spec to TS

* chore: update config files

* refactor: cleanup code & move to async-await to resolve the dynamic-redirect issues

* chore: improve Karma config

* refactor: improve code & tests

* refactor: move code/tests to plain TS files

* test: fix most of the test issues

* refactor: add some types to utils and to supplementary declaration file

* chore: update dependencies

* test: disable several failing tests

* refactor: redirect type import

* refactor: add typings for generateUrls module

* chore: add eslint-config-vaadin and perfectionist plugin

* refactor: make path not required

* refactor: finalize matchPath & matchRoute functions

* chore: get back Mocha reporter in Karma

* refactor: improve typings for Resolver

* refactor: improve typings for Resolver [2]

* build: update dependencies and remove install blockers

* build: add separate compile tsconfig

* fix: some TypeScript errors

* refactor: update typings for the Router

* chore: remove unnecessary import

* test: fix karma setup

* refactor: improve typings & update some tests

* test: remove ShadyDOM suite marking

* fix: matching routes with empty children

* test: remove test for { path: null } route

* test: relax asserting { done: false } iterator result to falsy

* add github action validation file

* remove unnecessary travis file

* fix: Resolver not found error handling

* refactor: fix some typings & update tests

* fix: restore resolver children behaviour

* test: enable lifecycle events test

* fix: Params array support

* refactor: restore context result type returned from resolve()

* refactor: fix typings & update more tests

* refactor: use RouteContext type in resolve callback argument

* refactor: remove promise from onAfterEnter / onAfterLeave

* fix: workflow around resolve next(), unwrap context result

* test: use spec reporter with karma

* test: avoid errorneous initial render from setRoutes

* test: fix TypeScript error in matchRoute suite

* test: adjust assertion for async setRoutes method

* test: fix checkOutlet utility function

* test: test suite structure

* fix: carry locaiton.redirectFrom from redirect context

* refactor: make Resolver typings more agnostic

* test: address some ESlint feedback in tests

* test: address more ESlint feedback in tests

* test: fix syntax

* test: bypass TypeScript errors in some tests

* test: avoid errorneous initial render from setRoutes

* fix: support sync render() use cases

* fix: support params in getUrl()

* chore: make render async again

* test: ensure consistent initial location in router tests

* refactor: address more TypeScript / ESLint feedback

* fix: runtime behaviour for primitive resolve results

* fix: remove next from children context

* test: support route errors also from setRoutes

* test: avoid deep.property assertions on Element

* test(resolver): resolver result is wrapped in context

* refactor: support more urlFor param types

* fix: support using view component name in urlFor

* refactor: finalize Resolver

* refactor: restore ensureRoute / ensureRoutes / fireRouterEvent utils

* fix: support symbolic NotFoundResult

* fix: router lifecycle use cases

* test: more correct timing in simultanious callback tests

* refactor: continue working on the Router typings

* refactor: almost finalize Router typings

* fix: matching parameterized routes

* refactor: attempt to resolve the most stubborn types

* refactor: address TypeScript / ESLint errors

* refactor: fix TypeScript type for action

* refactor: fix TypeScript type for action

* refactor: improve typings

* fix: make `commands`  in action required

* fix: type for default resolveRoute implementation

* test: make tests run again

* test: use spy instead of stub for updated sinon API

* fix: remove next from children context

* refactor: continue moving to typescript in tests

* style: lint

* style: format

* fix: prevent extra onBeforeLeave lifecycle callback calls

* refactor: rollback testing-library changes to avoid test breaks

* refactor: small fixes

* refactor: use native private props in router

* refactor: fix TS errors

* refactor: get back test search

* fix: remove next from children context

* test: avoid erroneous parallel assertions

* build: add TypeScript validation steps

* test: fix error in TypeScript fixture

* refactor: cleanup & deps update

* build: add TypeScript declaration files

* build: add TypeScript declaration files

* refactor!: remove bower support

* refactor!: remove documentation-only interfaces

---------

Co-authored-by: Anton Platonov <[email protected]>
Co-authored-by: Zhe Sun <[email protected]>

.eslintrc.json

@@ -1,77 +1,23 @@
 {
-  "extends": "eslint:recommended",
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "plugins": [
-    "html"
+  "extends": [
+    "vaadin/typescript-requiring-type-checking",
+    "vaadin/imports-typescript",
+    "vaadin/prettier",
+    "vaadin/testing",
+    "plugin:oxlint/recommended"
   ],
-  "globals": {
-    "Polymer": false,
-    "Vaadin": false
-  },
   "parserOptions": {
-    "sourceType": "module"
+    "project": "./tsconfig.json"
   },
+  "plugins": ["tsdoc"],
   "rules": {
-    "curly": 2,
-    "no-caller": 2,
-    "no-extend-native": 2,
-    "no-extra-bind": 2,
-    "no-invalid-this": 2,
-    "no-multi-spaces": 2,
-    "no-new-wrappers": 2,
-    "no-with": 2,
-    "array-bracket-spacing": [2, "never"],
-    "brace-style": 2,
-
-    "camelcase": [2, {"properties": "never"}],
-    "comma-spacing": 2,
-    "comma-style": 2,
-    "computed-property-spacing": 2,
-    "func-call-spacing": 2,
-    "indent": [2, 2, {"SwitchCase": 1}],
-    "key-spacing": 2,
-    "keyword-spacing": 2,
-    "linebreak-style": 2,
-    "max-len": [2, {"code": 140}],
-    "no-array-constructor": 2,
-    "no-multiple-empty-lines": [2, {"max": 2}],
-    "no-new-object": 2,
-    "no-trailing-spaces": 2,
-    "object-curly-spacing": 2,
-    "quote-props": [2, "consistent"],
-    "quotes": [2, "single", {"allowTemplateLiterals": true}],
-    "semi-spacing": 2,
-    "semi": 2,
-    "space-before-blocks": 2,
-    "space-before-function-paren": [2, "never"],
-    "space-in-parens": 2,
-    "space-infix-ops": 2,
-    "spaced-comment": [2, "always"],
-
-    "arrow-spacing": 2,
-    "constructor-super": 2,
-    "no-confusing-arrow": 2,
-    "no-const-assign": 2,
-    "no-dupe-class-members": 2,
-    "no-duplicate-imports": 2,
-    "no-this-before-super": 2,
-    "no-useless-computed-key": 2,
-    "no-useless-constructor": 2,
-    "no-useless-rename": 2,
-    "prefer-const": 2,
-    "rest-spread-spacing": 2,
-    "template-curly-spacing": 2,
-
-    "no-unused-vars": ["error", { "args": "none" }]
+    "@typescript-eslint/no-invalid-void-type": "off",
+    "@typescript-eslint/no-useless-template-literals": "off",
+    "import/no-unassigned-import": "off",
+    "max-params": "off",
+    "sort-keys": "off",
+    "tsdoc/syntax": "error",
+    "import/prefer-default-export": "off"
   },
-  "overrides": [{
-    "files": ["gulpfile.js"],
-    "parserOptions": {
-      "ecmaVersion": 2017
-    }
-  }]
+  "ignorePatterns": ["*.cjs"]
 }

.github/workflows/validation.yml

@@ -0,0 +1,34 @@
+name: Validation
+
+on:
+  push:
+    branches:
+      - 'master'
+  pull_request:
+permissions:
+  contents: read
+
+jobs:
+  test:
+    name: Validation
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout Project Code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+      - name: Install dependencies and build
+        run: npm ci
+      - name: Build TypeScript
+        run: npm run build
+      - name: Check TypeScript
+        run: npm run typecheck
+      - name: Test
+        run: npm test

.gitignore

@@ -1,7 +1,6 @@
 bower_components
 node_modules
 build
-package-lock.json
 dist
 coverage
 

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "singleQuote": true
+}

.run/All tests.run.xml

@@ -0,0 +1,10 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="All tests" type="JavaScriptTestRunnerKarma">
+    <config-file value="$PROJECT_DIR$/karma.config.cjs" />
+    <karma-package-dir value="$PROJECT_DIR$/node_modules/karma" />
+    <working-directory value="$PROJECT_DIR$" />
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/Template Karma.run.xml

@@ -0,0 +1,10 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="true" type="JavaScriptTestRunnerKarma">
+    <config-file value="$PROJECT_DIR$/karma.config.cjs" />
+    <karma-package-dir value="$PROJECT_DIR$/node_modules/karma" />
+    <working-directory value="$PROJECT_DIR$" />
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

README.md

@@ -66,7 +66,7 @@ Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https
 
   - [http://127.0.0.1:8000/components/vaadin-router/demo](http://127.0.0.1:8000/components/vaadin-router/demo)
   - Public API tests: [http://127.0.0.1:8000/components/vaadin-router/test](http://127.0.0.1:8000/components/vaadin-router/test)
-  - Unit tests: [http://127.0.0.1:8000/components/vaadin-router/test/index.coverage.html](http://127.0.0.1:8000/components/vaadin-router/test/index.coverage.html)
+  - Unit tests: [http://127.0.0.1:8000/components/vaadin-router/test/index.html](http://127.0.0.1:8000/components/vaadin-router/test/index.html)
 
 
 ## Running tests from the command line

demo/demo-shell.html

@@ -8,10 +8,10 @@
 <link rel="import" href="element-demo.html">
 <link rel="import" href="vaadin-router-demo-shared-styles.html">
 
-<script src="../dist/vaadin-router.umd.js"></script>
-<script>
-  // In order to make the demos work without the import statement there
-  window.Router = window.Vaadin.Router;
+<script type="module">
+  import {Router} from '../dist/vaadin-router.js';
+
+  window.Router = Router;
 </script>
 
 <link rel="import" href="demo-elements/x-home-view.html">