feat(typescript): convert tests to typescript

package.json

@@ -25,8 +25,8 @@
 		"cosmoz-*.js"
 	],
 	"scripts": {
-		"lint": "eslint --cache --ext .js .",
-		"build": "tsc",
+		"lint": "tsc && eslint --cache .",
+		"build": "tsc -p tsconfig.build.json",
 		"start": "wds",
 		"test": "wtr --coverage",
 		"test:watch": "wtr --watch",
@@ -60,7 +60,7 @@
 	"devDependencies": {
 		"@commitlint/cli": "^17.0.0",
 		"@commitlint/config-conventional": "^17.0.0",
-		"@neovici/cfg": "github:Neovici/cfg#feat/init-typescript-support",
+		"@neovici/cfg": "github:Neovici/cfg#feat/typescript",
 		"@open-wc/testing": "^2.5.16",
 		"@polymer/iron-demo-helpers": "^3.0.0",
 		"@semantic-release/changelog": "^6.0.0",

src/match.ts

@@ -1,13 +1,16 @@
 /* eslint-disable import/group-exports */
 type SRule = string | RegExp;
-type FnRule = (url: string) => ReturnType<typeof String.prototype.match>;
+interface RuleRet {
+	result: ReturnType<typeof String.prototype.match>;
+	url?: URL;
+}
+type FnRule = (url: string) => RuleRet | null;
 export type Rule = SRule | FnRule;
 
 export interface Route {
 	rule: Rule;
 }
 
-
 export const hashbang = (rule: SRule) => (url: string) => {
 		const origin = document.location.origin,
 			/* Chrome on iOS bug encodes second `#` in url as `%23`
@@ -26,7 +29,7 @@ export const hashbang = (rule: SRule) => (url: string) => {
 			}
 		);
 	},
-	href = (rule: SRule) => (url: string) => {
+	href = (rule: SRule) => (url: string): RuleRet|null => {
 		const result = url.match(rule);
 		return result && { result };
 	},

src/router.ts

@@ -10,7 +10,7 @@ import type { Route as RouteT } from './match';
 
 type MatchedRoute = NonNullable<ReturnType<typeof useRoutes>>;
 
-interface Route<T = unknown> extends RouteT {
+export interface Route<T = unknown> extends RouteT {
 	handle: (r: MatchedRoute) => Promise<T>;
 }
 interface Props {

test/basic.test.js → test/basic.test.ts

@@ -1,65 +1,78 @@
 import {
-	assert, html, fixtureSync, oneEvent, nextFrame
+	assert,
+	html,
+	fixtureSync,
+	oneEvent,
+	nextFrame,
 } from '@open-wc/testing';
 import { mock } from 'sinon';
 
-import {
-	createElement, navigate, documentUrl
-} from '../lib/use-routes';
-import { hashbang } from '../lib/match.js';
+import { createElement, navigate, documentUrl } from '../src/use-routes';
+import { hashbang } from '../src/match';
+import { Route } from '../src/router';
 
 /* eslint-disable max-lines-per-function */
 suite('cosmoz-page-router', () => {
-	const routes = [{
-		rule: /^\/$/u,
-		handle: () => import('../demo/views/home.js').then(() => createElement('demo-home'))
-	}, {
-		rule: hashbang(/^\/view-1/u),
-		handle: () => import('../demo/views/view-1.js').then(() => createElement('view-1'))
-	}, {
-		rule: hashbang(/^\/param-reading-view/u),
-		handle: result => import('../demo/views/param-reading-view.js').then(
-			() => createElement('param-reading-view', Object.fromEntries(result.match.url.searchParams.entries()))
-		)
-	}, {
-		rule: hashbang(/^\/error/u),
-		handle: () => Promise.reject(new Error('testing'))
-	}];
-	let url;
+	const routes: Route[] = [
+		{
+			rule: /^\/$/u,
+			handle: () =>
+				import('../demo/views/home.js').then(() => createElement('demo-home')),
+		},
+		{
+			rule: hashbang(/^\/view-1/u),
+			handle: () =>
+				import('../demo/views/view-1.js').then(() => createElement('view-1')),
+		},
+		{
+			rule: hashbang(/^\/param-reading-view/u),
+			handle: (result) =>
+				import('../demo/views/param-reading-view.js').then(() => {
+					const entries = result.match.url?.searchParams?.entries(),
+						params = entries ? Object.fromEntries(entries) : {};
+					createElement('param-reading-view', params);
+				}),
+		},
+		{
+			rule: hashbang(/^\/error/u),
+			handle: () => Promise.reject(new Error('testing')),
+		},
+	];
+	let url: string;
 
 	suiteSetup(async () => {
 		url = documentUrl();
-		await import('../cosmoz-page-router.js');
+		await import('../src/router');
 	});
-	suiteTeardown(() => navigate(url, { notify: false }));
+	suiteTeardown(() => navigate(url, null, { notify: false }));
 
 	test('renders home', async () => {
 		navigate('/');
-		const router = fixtureSync(html`<cosmoz-page-router .routes=${ routes } />`);
+		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
 		await oneEvent(router, 'route-loaded');
 		await nextFrame();
 		assert.shadowDom.equal(router, '<demo-home></demo-home>');
 	});
 
 	test('renders view-1', async () => {
 		navigate('#!/view-1');
-		const router = fixtureSync(html`<cosmoz-page-router .routes=${ routes } />`);
+		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
 		await oneEvent(router, 'route-loaded');
 		await nextFrame();
 		assert.shadowDom.equal(router, '<view-1></view-1>');
 	});
 
 	test('renders not-found', async () => {
 		navigate('#/not-found');
-		const router = fixtureSync(html`<cosmoz-page-router .routes=${ routes } />`);
+		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
 		await oneEvent(router, 'route-not-found');
 		await nextFrame();
 		assert.shadowDom.equal(router, '');
 	});
 
 	test('renders home, then view-1', async () => {
 		navigate('/');
-		const router = fixtureSync(html`<cosmoz-page-router .routes=${ routes } />`);
+		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
 		await oneEvent(router, 'route-loaded');
 		await nextFrame();
 		assert.shadowDom.equal(router, '<demo-home></demo-home>');
@@ -72,17 +85,20 @@ suite('cosmoz-page-router', () => {
 
 	test('error', async () => {
 		navigate('#!/error');
-		const router = fixtureSync(html`<cosmoz-page-router .routes=${ routes } />`),
+		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`),
 			{ detail } = await oneEvent(router, 'route-error');
 		assert.equal(detail.error.message, 'testing');
 	});
 
 	test('params', async () => {
 		navigate('#!/param-reading-view?p1=1&p2=2');
-		const router = fixtureSync(html`<cosmoz-page-router .routes=${ routes } />`);
+		const router = fixtureSync(html`<cosmoz-router .routes=${routes} />`);
 		await oneEvent(router, 'route-loaded');
 		await nextFrame();
-		assert.shadowDom.equal(router.shadowRoot.querySelector('param-reading-view'), 'p1: 1; p2: 2');
+		assert.shadowDom.equal(
+			router.shadowRoot?.querySelector('param-reading-view'),
+			'p1: 1; p2: 2'
+		);
 	});
 });
 
@@ -101,7 +117,7 @@ suite('use-routes', () => {
 
 		navigate('/das', null, {
 			replace: false,
-			notify: false
+			notify: false,
 		});
 		assert(pushState.withArgs(null, '', '/das'));
 

tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "dist",
+		"declaration": true,
+		"noEmit": false
+	},
+	"include": ["src"]
+}

tsconfig.json

@@ -1,13 +1,11 @@
 {
-  "compilerOptions": {
-    "outDir": "dist",
-    "declaration": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "target": "esnext"
-  },
-  "include": [
-    "src"
-  ]
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"noEmit": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"strict": true,
+		"target": "esnext",
+		"allowJs": true
+	}
 }