feat: Refactor & Enhance supporting vConsole

BREAKING CHANGE: Change the way to import library and replacement url hash key
wongnai · Mar 31, 2022 · 3eb9a34 · 3eb9a34
1 parent befda4d
commit 3eb9a34
Show file tree

Hide file tree

Showing 36 changed files with 625 additions and 287 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@
 
 Module to enhance ability of source replacement for website
 
+Note: Not using this in production environment
+
 ## Installation
 
 ```
@@ -15,16 +17,14 @@ yarn add source-replacement
 
 ### Usage
 
-#### In your source
+Attach `source-replacement/build/executors/source-replacement` on the script tag in `<head>` or mark it as `async type=module`
 
-```
-import 'source-replacement'
-```
+In your source import `source-replacement/build/executors/code-blocker` to prevent executing your source during the process of replacement
 
 #### On your browser
 
 Enter page with the following example
 
 ```
-https://example.com/#replacementTarget=https://your-target-js-source-url
+https://example.com/#targetReplacementSource=https://your-target-js-source-url
 ```
diff --git a/package.json b/package.json
@@ -1,10 +1,9 @@
 {
   "name": "source-replacement",
-  "version": "0.0.0",
-  "main": "build/index.js",
-  "entry": "src/index.ts",
+  "version": "2.0.0",
   "types": "build",
   "deploy": "build",
+  "main": "build/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/wongnai/source-replacement.git"
@@ -40,6 +39,7 @@
     "semantic-release": "18.0.0",
     "shake-detector": "0.3.7",
     "ts-jest": "27.0.7",
-    "typescript": "4.4.4"
+    "typescript": "4.4.4",
+    "vconsole": "3.14.3"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,34 +1,45 @@
 import path from 'path'
 
-import commonjs from '@rollup/plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
-import resolve from '@rollup/plugin-node-resolve';
+import resolve from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
 import visualizer from 'rollup-plugin-visualizer'
 
 import config from './package.json'
 
-export default {
-  input: config.entry,
-  output: {
-    dir: config.deploy,
-    format: 'umd',
-    sourcemap: true,
-    name: 'SourceReplacement'
-  },
-  plugins: [
-    resolve({
-      browser: true,
-    }),
-    commonjs(),
-    typescript({
-      declaration: true,
-      declarationDir: config.deploy,
-      exclude: 'src/**/*.test.ts',
-    }),
-    json(),
-    visualizer({
-        filename: path.resolve(config.deploy, 'stat.html')
-    }),
-  ],
-};
+const sharedPlugins = [
+	resolve({
+		browser: true,
+	}),
+	commonjs(),
+	typescript({
+		declaration: true,
+		declarationDir: config.deploy,
+		exclude: 'src/**/*.test.ts',
+	}),
+	json(),
+	visualizer({
+		filename: path.resolve(config.deploy, 'stat.html'),
+	}),
+]
+
+export default [
+	{
+		input: 'src/executors/code-blocker/index.ts',
+		output: {
+			dir: config.deploy,
+			format: 'cjs',
+		},
+		plugins: sharedPlugins
+	},
+	{
+		input: 'src/executors/source-replacement/index.ts',
+		output: {
+			dir: config.deploy,
+			format: 'umd',
+			name: 'SourceReplacement',
+		},
+		plugins: sharedPlugins,
+	},
+]
diff --git a/src/core/preventPerformExistingScriptDuringInjection/index.test.ts b/src/core/preventPerformExistingScriptDuringInjection/index.test.ts
@@ -0,0 +1,81 @@
+import { REPLACEMENT_SOURCE_KEY } from 'debugConstants'
+import preventPerformExistingScriptDuringInjection from '.'
+
+describe('preventPerformExistingScriptDuringInjection()', () => {
+	const MOCK_URL = 'http://example.com'
+
+	const promptSpy = jest.spyOn(global, 'prompt').mockReturnValue(MOCK_URL)
+
+	Object.defineProperty(window, 'location', {
+		value: {
+			reload: jest.fn(),
+		},
+	})
+
+	class VConsolePlugin {
+		events: Record<string, any> = {}
+
+		on = jest.fn().mockImplementation((key: string, handler: Function) => {
+			const watcher = jest.fn()
+
+			handler(watcher)
+
+			this.events[key] = watcher.mock.calls[0][0]
+		})
+	}
+
+	class FakeVConsole {
+		static VConsolePlugin = VConsolePlugin
+
+		plugins: VConsolePlugin[] = []
+
+		addPlugin = jest.fn().mockImplementation(plugin => {
+			this.plugins.push(plugin)
+		})
+	}
+
+	window['VConsole'] = FakeVConsole
+
+	window['vConsole'] = new FakeVConsole()
+
+	afterEach(() => {
+		jest.clearAllMocks()
+		sessionStorage.clear()
+	})
+
+	it('should throw exception if app is marked from session that to be replaced', () => {
+		sessionStorage.setItem(REPLACEMENT_SOURCE_KEY, MOCK_URL)
+
+		expect(() => preventPerformExistingScriptDuringInjection()).toThrowError(
+			new Error(
+				'The under of code block stop performing causing by replacement process is running',
+			),
+		)
+	})
+
+	it('should init vconsole plugin for set source from prompt to session', () => {
+		preventPerformExistingScriptDuringInjection()
+
+		const plugin = window['vConsole'].plugins[0]
+
+		expect(window['vConsole'].addPlugin).toBeCalledTimes(1)
+		expect(window['vConsole'].addPlugin).toBeCalledWith(plugin)
+		expect(plugin).toBeInstanceOf(VConsolePlugin)
+
+		expect(plugin.events.renderTab).toBe('<div>Click to Replacement button below</div>')
+
+		expect(plugin.events.addTool).toHaveLength(1)
+
+		const addToolEvent = plugin.events.addTool[0]
+
+		expect(addToolEvent.name).toBe('Replacement')
+
+		addToolEvent.onClick()
+
+		expect(promptSpy).toBeCalledTimes(1)
+		expect(promptSpy).toBeCalledWith('Input target replacement')
+
+		expect(sessionStorage.getItem(REPLACEMENT_SOURCE_KEY)).toBe(MOCK_URL)
+		expect(location.reload).toBeCalledTimes(1)
+	})
+})
diff --git a/src/core/preventPerformExistingScriptDuringInjection/index.ts b/src/core/preventPerformExistingScriptDuringInjection/index.ts
@@ -0,0 +1,46 @@
+import { REPLACEMENT_SOURCE_KEY } from 'debugConstants'
+
+import VConsole from 'vconsole'
+
+const PLUGIN_NAME = 'source_replacement'
+
+const TAB_NAME = 'Source Replacement'
+
+function preventPerformExistingScriptDuringInjection() {
+	if (sessionStorage.getItem(REPLACEMENT_SOURCE_KEY)) {
+		throw new Error(
+			'The under of code block stop performing causing by replacement process is running',
+		)
+	} else {
+		const Console: typeof VConsole = window['VConsole']
+
+		const consoleInstance: VConsole = window['vConsole']
+
+		if (Console && consoleInstance) {
+			const plugin = new Console.VConsolePlugin(PLUGIN_NAME, TAB_NAME)
+
+			plugin.on('renderTab', callback => {
+				callback('<div>Click to Replacement button below</div>')
+			})
+
+			plugin.on('addTool', callback => {
+				callback([
+					{
+						name: 'Replacement',
+						onClick: () => {
+							const targetSource = prompt('Input target replacement')
+
+							sessionStorage.setItem(REPLACEMENT_SOURCE_KEY, targetSource!)
+
+							location.reload()
+						},
+					},
+				])
+			})
+
+			consoleInstance.addPlugin(plugin)
+		}
+	}
+}
+
+export default preventPerformExistingScriptDuringInjection
diff --git a/src/core/replaceSourceWithTargetSource/index.test.ts b/src/core/replaceSourceWithTargetSource/index.test.ts
diff --git a/src/core/replaceSourceWithTargetSource/index.ts b/src/core/replaceSourceWithTargetSource/index.ts
diff --git a/src/core/startDevTool/index.test.ts b/src/core/startDevTool/index.test.ts
diff --git a/src/core/startDevTool/index.ts b/src/core/startDevTool/index.ts