fix: ts type error

package.json

@@ -31,12 +31,14 @@
     "browserslist": "^4.14.5",
     "create-polyfill-service-url": "^2.2.3",
     "fs-extra": "^9.0.1",
-    "query-string": "^6.13.6"
+    "query-string": "^6.13.6",
+    "webpack": "^5.24.3"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.6.0",
     "@typescript-eslint/parser": "^4.6.0",
     "eslint": "^7.12.1",
+    "html-webpack-plugin": "^5.2.0",
     "husky": "^4.3.0",
     "lint-staged": "^10.5.1",
     "standard-version": "^9.1.1",

src/helpers/create-polyfill-url.ts

@@ -1,14 +1,15 @@
+import webpack from 'webpack';
 import browserslist from 'browserslist'
 import queryString from 'query-string'
 import createPolyfillUrl from 'create-polyfill-service-url/src/index';
 
 import * as utils from './utils'
 import featureAnalyser from './features-analyser'
 
-import { JsAssets, PluginOptions } from '../interface';
+import { PluginOptions } from '../interface'
 
 
-export default async function getPolyfillUrl(assetsMap: Record<string, JsAssets>, options: PluginOptions) {
+export default async function getPolyfillUrl(assetsMap: Record<string, webpack.sources.Source>, options: PluginOptions): Promise<string> {
   const { url, browserslist: browserslistConfig } = options;
 
   const browsers = browserslist(browserslistConfig, {

src/helpers/features-analyser.ts

@@ -1,5 +1,6 @@
 import os from 'os'
 import path from 'path'
+import webpack from 'webpack'
 import fs from 'fs-extra'
 
 import * as babel from '@babel/core'
@@ -9,9 +10,7 @@ import jsFeaturesAnalyser from '@financial-times/js-features-analyser/src/index'
 
 import * as utils from './utils'
 
-import { JsAssets } from '../interface'
-
-export default async function getJsFeature(assetsMap: Record<string, JsAssets>) {
+export default async function getJsFeature(assetsMap: Record<string, webpack.sources.Source>) {
   if (!utils.isObject(assetsMap)) {
     return Promise.reject(
       new Error('bad params ,assetsMap must be webpack assets object')
@@ -26,7 +25,7 @@ export default async function getJsFeature(assetsMap: Record<string, JsAssets>)
   const actions: Promise<string[]>[] = Object.values(assetsMap).map(assets => {
     return new Promise((resolve, reject) => {
       try {
-        babel.transformSync(assets.source(), {
+        babel.transformSync(assets.source().toString(), {
           plugins: [
             [
               jsFeaturesAnalyser,

src/index.ts

@@ -1,10 +1,10 @@
-import { Compiler } from 'webpack';
+import { Compiler, sources } from 'webpack';
 
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 
 import createPolyfillUrl from './helpers/create-polyfill-url'
 
-import { PluginOptions, JsAssets } from './interface';
+import { PluginOptions } from './interface';
 
 const PLUGIN_NAME = 'HtmlWebpackPolyfillRunTimePlugin';
 
@@ -29,9 +29,9 @@ class HtmlWebpackPolyfillRunTimePlugin {
           const jsAssets = Object.keys(compilation.assets)
             .filter(key => /js$/.test(key))
             .reduce((obj, key) => {
-              obj[key] = compilation.assets[key];
+              obj[key] = compilation.assets[key] ;
               return obj;
-            }, {} as Record<string, JsAssets>);
+            }, {} as Record<string, sources.Source>);
 
 
           const url = await createPolyfillUrl(jsAssets, this.options);
@@ -43,6 +43,9 @@ class HtmlWebpackPolyfillRunTimePlugin {
               defer: false,
               src: url,
             },
+            meta:{
+              'plugin': PLUGIN_NAME
+            }
           });
 
           callback(null, data);

src/interface.ts

@@ -7,6 +7,3 @@ export interface PluginOptions {
   url?: (features: string[], featureMap: Record<string, string[]>) => string | undefined
 }
 
-export interface JsAssets {
-  source: () => string
-}