TypeScript APIs

WebHare 5.2 is switching to TypeScript for its JavaScript APIs which causes their '.es' extension (for ECMAScript, or historically: for code which would be transpiled back to IE11 compatibility) to change to either '.ts' or '.tsx'

If your code imported any of these libraries using the .es extension, you should just remove it.

// old style:
import * as gtm from '@mod-publisher/js/analytics/gtm.es';

// new style:
import * as gtm from '@mod-publisher/js/analytics/gtm';
Removing the .es extension should be safe even if your code is still used by earlier versions of WebHare, as they will look for a file with the .es extension anyway.

You will see a warning about this on test and development WebHare servers (generated by the fallback '.es' files that simply reexport their ts/tsx counterpart). A future version of WebHare will remove the '.es' fallback files.

Converting ES to TS

If you want to convert your own module to TypeScript without having to immediately fix all TS/Lint issues you may be able to use the following scripts (make sure your modules are backed up first and use this at your own risk)

whcd MODULE

# Prefix all files with eslint-disable and ts-nocheck
for P in $(find . -name \*.es); do 
  mv $P $P.bak;
  echo "/* eslint-disable */" >$P
  echo "/// @ts-nocheck -- Bulk rename to enable TypeScript validation" >>$P
  echo "" >> $P
  cat $P.bak >> $P
done

# Remove the backups
find . -name \*.es.bak -delete

# Find files which may need to become TSX (note, not foolproof):
TSXFILES="$(find . -name \*.es -exec grep -l '</' {} \;)"
for P in ${TXFILES}; do mv $P ${P%.es}.tsx; done

# Rename (remaining) ES files to TS
for P in $(find . -name \*.es ); do mv $P ${P%.es}.ts; done

You would then remove the eslint-disable and @ts-nocheck as you convert individual files

Reformatting ES files

You can use wh dev:autoformat --force in your module directory to enforce almost all linting and reformatting rules.

To ensure the formatting changes are verified on commit, add or update a validation section to the meta section in your moduledefinition:

    <validation>
      <format masks="*.ts *.tsx" />
    </validation>