feat: Bundle with Source Replacement v2

BREAKING CHANGE: Change Source Replacement Engine to v2 and new webpack plugin engine inside

package.json

@@ -1,6 +1,6 @@
 {
   "name": "source-replacement-webpack-plugin",
-  "version": "0.0.0",
+  "version": "3.0.0",
   "main": "build/index.js",
   "entry": "src/index.ts",
   "deploy": "build",
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "rollup -c",
     "lint": "eslint --ext .ts,.js --quiet",
-    "test": "yarn build && npx webpack --config ./test/webpack.config.js && node ./test/test-bundle.js"
+    "test": "yarn build && webpack --config ./test/webpack.config.js && node ./test/test-bundle.js"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "19.0.0",
@@ -25,6 +25,7 @@
     "@types/webpack-env": "1.16.3",
     "eslint": "7.28.0",
     "eslint-config-standard": "16.0.3",
+    "html-webpack-plugin": "4",
     "husky": "6.0.0",
     "lint-staged": "11.0.0",
     "prettier": "2.3.1",
@@ -38,7 +39,8 @@
     "webpack-cli": "4.9.1"
   },
   "dependencies": {
-    "bundle-more-webpack-plugin": "1.0.0",
-    "source-replacement": "1.0.8"
+    "add-asset-html-webpack-plugin": "5.0.1",
+    "source-replacement": "2.0.1",
+    "webpack-inject-plugin": "1.5.5"
   }
 }

rollup.config.js

@@ -15,7 +15,7 @@ export default {
     format: 'cjs',
     sourcemap: true,
   },
-  external: ['bundle-more-webpack-plugin'],
+  external: Object.keys(config.dependencies),
   plugins: [
     resolve(),
     commonjs(),

src/index.ts

@@ -1,11 +1,29 @@
+import Webpack from 'webpack'
+import AddAssetHtmlWebpackPlugin from 'add-asset-html-webpack-plugin'
+import InjectPlugin, { ENTRY_ORDER } from 'webpack-inject-plugin'
+import fs from 'fs'
 import path from 'path'
-import { BundleMoreWebpackPlugin } from 'bundle-more-webpack-plugin'
 
-const MODULE_NAME = path.resolve(process.cwd(), 'node_modules', 'source-replacement', 'build', 'index.js') 
-export class SourceReplacementPlugin extends BundleMoreWebpackPlugin {
-    constructor() {
-        super([
-            MODULE_NAME,
-        ])
-    }
+const CODE_BLOCKER_SRC = path.resolve(
+	process.cwd(),
+	'node_modules',
+	'source-replacement',
+	'build',
+	'code-blocker.js',
+)
+
+export class SourceReplacementPlugin {
+	apply(complier: Webpack.Compiler) {
+		new AddAssetHtmlWebpackPlugin({
+			filepath: require.resolve('source-replacement'),
+			attributes: {
+				type: 'module',
+				async: true,
+			},
+		}).apply(complier)
+
+		new InjectPlugin(() => fs.readFileSync(CODE_BLOCKER_SRC, { encoding: 'utf8' }), {
+			entryOrder: ENTRY_ORDER.First,
+		}).apply(complier)
+	}
 }

test/test-bundle.js

@@ -1,19 +1,63 @@
 const fs = require('fs')
 const path = require('path')
 
+const BUNDLE_FILE_NAME = 'bundle.js'
+
+const SOURCE_REPLACEMENT_FILE_NAME = 'index.js'
+
 const rootPath = process.cwd()
-const buildScriptPath = path.join('build', 'index.js')
 const testPath = path.join(rootPath, 'test')
-const outputScriptPath = path.join(testPath, buildScriptPath)
+const buildPath = path.join(testPath, 'build')
+
+const htmlPath = path.join(testPath, 'build', 'index.html')
+const htmlSource = fs.readFileSync(htmlPath, { encoding: 'utf8' })
+
+function testBundlePreventExecuteSourceWithExistingSource() {
+    const outputScriptPath = path.join(buildPath, BUNDLE_FILE_NAME)
+
+    const outputText = fs.readFileSync(outputScriptPath, { encoding: 'utf8' })
+
+    const SOURCE_CONTENT = './test/index.js'
+
+    if (!outputText.includes(SOURCE_CONTENT)) {
+        throw new Error('No input source found in build')
+    }
+
+    const PREVENT_RENDER_CONTENT = 'preventPerformExistingScriptDuringInjection()'
+
+    if (!outputText.includes(PREVENT_RENDER_CONTENT)) {
+        throw new Error('No prevent render source found in build')
+    }
 
-const outputText = fs.readFileSync(outputScriptPath).toString()
+    if (outputText.indexOf(PREVENT_RENDER_CONTENT) > outputText.indexOf(SOURCE_CONTENT)) {
+        throw new Error('Invalid source order')
+    }
 
-if (!outputText.includes('./test/index.js')) {
-    throw new Error('No input source found in build')
+    if (!htmlSource.includes(BUNDLE_FILE_NAME)) {
+        throw new Error('No bundle source found in output')
+    }
 }
 
-if (!outputText.includes("console.log('Source Replacement is running');")) {
-    throw new Error('No source replacement source found in build')
+function testInjectSourceReplacementScript() {
+    const sourceReplacementPath = path.join(buildPath, SOURCE_REPLACEMENT_FILE_NAME)
+
+    const originalFilePath = path.join(rootPath, 'node_modules', 'source-replacement', 'build', 'index.js')
+
+    const sourceContent = fs.readFileSync(sourceReplacementPath, { encoding: 'utf8' })
+
+    const sourceOrigin = fs.readFileSync(originalFilePath, { encoding: 'utf8' })
+
+    if (!sourceContent.includes(sourceOrigin)) {
+        throw new Error('Unmatched source replacement source')
+    }
+
+    if (!htmlSource.includes(`<script src="${SOURCE_REPLACEMENT_FILE_NAME}" type="module" async></script>`)) {
+        throw new Error('No bundle source found in output')
+    }
 }
 
-console.log('This plugin is fine to be used.')
+testBundlePreventExecuteSourceWithExistingSource()
+
+testInjectSourceReplacementScript()
+
+console.log('Test Passed')

test/webpack.config.js

@@ -1,13 +1,15 @@
 const path = require('path')
+const HTMLWebpackPlugin = require('html-webpack-plugin')
 const { SourceReplacementPlugin } = require('../build')
 
 module.exports = {
     entry: path.resolve(__dirname, 'index.js'),
     output: {
-        filename: 'index.js',
+        filename: 'bundle.js',
         path: path.resolve(__dirname, 'build')
     },
     plugins: [
+        new HTMLWebpackPlugin(),
         new SourceReplacementPlugin(),
     ],
     target: 'node',