update deps

.parcelrc

@@ -0,0 +1,8 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{ts,tsx}": [
+      "@parcel/transformer-typescript-tsc"
+    ]
+  }
+}

package.json

@@ -17,25 +17,28 @@
     "url": "https://github.com/utterance/utterances.git"
   },
   "scripts": {
-    "start": "parcel serve src/*.html src/client.ts src/stylesheets/themes/*/{index,utterances}.scss --no-hmr --port 4000",
-    "build": "parcel build src/*.html src/client.ts src/stylesheets/themes/*/{index,utterances}.scss --experimental-scope-hoisting",
-    "lint": "tslint --project tsconfig.json",
-    "predeploy": "yarn run build && touch dist/.nojekyll && echo 'utteranc.es' > dist/CNAME",
-    "deploy": "gh-pages --dist dist"
+    "preparcel": "rm -rf dist;mkdir dist",
+    "parcel": "parcel $RUN src/*.html src/client.ts src/stylesheets/themes/*/{index,utterances}.scss --no-autoinstall --no-cache",
+    "build": "RUN=build npm run parcel --",
+    "start": "RUN=watch npm run parcel -- --port 4000",
+    "predeploy": "npm run build && touch dist/.nojekyll && echo 'utteranc.es' > dist/CNAME",
+    "deploy": "gh-pages --dist dist",
+    "reinstall": "git clean -fxd -e .env && rm -f package-lock.json && npm install",
+    "update-deps": "npm exec --package npm-check-updates --call 'ncu -u -x @primer/css' && git clean -fxd -e .env && rm package-lock.json && npm install"
   },
   "devDependencies": {
+    "@parcel/transformer-sass": "^2.2.1",
+    "@parcel/transformer-typescript-tsc": "^2.2.1",
     "@primer/css": "^15.2.0",
-    "autoprefixer": "^9.8.6",
-    "gh-pages": "^3.1.0",
+    "autoprefixer": "^10.4.2",
+    "gh-pages": "^3.2.3",
     "github-syntax-dark": "^0.5.0",
     "github-syntax-light": "^0.5.0",
-    "parcel-bundler": "^1.12.4",
-    "parcel-plugin-clean-dist": "^0.0.6",
-    "posthtml-expressions": "^1.7.1",
-    "posthtml-include": "^1.6.0",
+    "parcel": "^2.2.1",
+    "posthtml-expressions": "^1.9.0",
+    "posthtml-include": "^1.7.2",
     "posthtml-md": "^1.1.0",
-    "sass": "^1.32.6",
-    "tslint": "^6.1.3",
-    "typescript": "^4.1.3"
+    "sass": "^1.49.7",
+    "typescript": "^4.5.5"
   }
 }

src/client.ts

@@ -1,18 +1,13 @@
-import { param, deparam } from './deparam';
 import { ResizeMessage } from './measure';
 import { preferredThemeId, preferredTheme } from './preferred-theme';
 
+const url = new URL(location.href);
 // slice session from query string
-const params = deparam(location.search.substr(1));
-const session = params.utterances;
+const session = url.searchParams.get('utterances')
 if (session) {
   localStorage.setItem('utterances-session', session);
-  delete params.utterances;
-  let search = param(params);
-  if (search.length) {
-    search = '?' + search;
-  }
-  history.replaceState(undefined, document.title, location.pathname + search + location.hash);
+  url.searchParams.delete('utterances');
+  history.replaceState(undefined, document.title, url.href);
 }
 
 let script = document.currentScript as HTMLScriptElement;
@@ -34,9 +29,9 @@ if (attrs.theme === preferredThemeId) {
 
 // gather page attributes
 const canonicalLink = document.querySelector(`link[rel='canonical']`) as HTMLLinkElement;
-attrs.url = canonicalLink ? canonicalLink.href : location.origin + location.pathname + location.search;
-attrs.origin = location.origin;
-attrs.pathname = location.pathname.length < 2 ? 'index' : location.pathname.substr(1).replace(/\.\w+$/, '');
+attrs.url = canonicalLink ? canonicalLink.href : url.origin + url.pathname + url.search;
+attrs.origin = url.origin;
+attrs.pathname = url.pathname.length < 2 ? 'index' : url.pathname.substr(1).replace(/\.\w+$/, '');
 attrs.title = document.title;
 const descriptionMeta = document.querySelector(`meta[name='description']`) as HTMLMetaElement;
 attrs.description = descriptionMeta ? descriptionMeta.content : '';
@@ -78,11 +73,11 @@ document.head.insertAdjacentHTML(
 
 // create the comments iframe and it's responsive container
 const utterancesOrigin = script.src.match(/^https:\/\/utteranc\.es|http:\/\/localhost:\d+/)![0];
-const url = `${utterancesOrigin}/utterances.html`;
+const frameUrl = `${utterancesOrigin}/utterances.html`;
 script.insertAdjacentHTML(
   'afterend',
   `<div class="utterances">
-    <iframe class="utterances-frame" title="Comments" scrolling="no" src="${url}?${param(attrs)}" loading="lazy"></iframe>
+    <iframe class="utterances-frame" title="Comments" scrolling="no" src="${frameUrl}?${new URLSearchParams(attrs)}" loading="lazy"></iframe>
   </div>`);
 const container = script.nextElementSibling as HTMLDivElement;
 script.parentElement!.removeChild(script);

src/deparam.ts

@@ -1,22 +0,0 @@
-export function deparam(query: string): Record<string, string> {
-  let match: RegExpExecArray | null;
-  const plus = /\+/g;
-  const search = /([^&=]+)=?([^&]*)/g;
-  const decode = (s: string) => decodeURIComponent(s.replace(plus, ' '));
-  const params: Record<string, string> = {};
-  // tslint:disable-next-line:no-conditional-assignment
-  while (match = search.exec(query)) {
-    params[decode(match[1])] = decode(match[2]);
-  }
-  return params;
-}
-
-export function param(obj: Record<string, string>) {
-  const parts = [];
-  for (const name in obj) {
-    if (obj.hasOwnProperty(name) && obj[name]) {
-      parts.push(`${encodeURIComponent(name)}=${encodeURIComponent(obj[name])}`);
-    }
-  }
-  return parts.join('&');
-}

src/oauth.ts

@@ -1,12 +1,11 @@
 import { UTTERANCES_API } from './utterances-api';
-import { param } from './deparam';
 import { pageAttributes } from './page-attributes';
 
 export const token = { value: null as null | string };
 
 // tslint:disable-next-line:variable-name
 export function getLoginUrl(redirect_uri: string) {
-  return `${UTTERANCES_API}/authorize?${param({ redirect_uri })}`;
+  return `${UTTERANCES_API}/authorize?${new URLSearchParams({ redirect_uri })}`;
 }
 
 export async function loadToken(): Promise<string | null> {

src/page-attributes.ts

@@ -1,8 +1,7 @@
-import { deparam } from './deparam';
 import repoRegex from './repo-regex';
 
 function readPageAttributes() {
-  const params = deparam(location.search.substr(1));
+  const params = Object.fromEntries(new URL(location.href).searchParams)
 
   let issueTerm: string | null = null;
   let issueNumber: number | null = null;

tsconfig.json

@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "lib": [
-      "dom",
-      "es2017"
-    ],
+    "target": "ES2021",
+    "module": "ESNext",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
     "types": [],
     "strict": true,
     "noFallthroughCasesInSwitch": true,