♿️ add version attribute on container dom to improve developer experience (#1682)

.fatherrc.js

@@ -1,3 +1,11 @@
+import { writeFileSync } from 'fs';
+import { join } from 'path';
+import { version } from './package.json';
+
+// generate version.ts
+const versionFilePath = join(__dirname, './src/version.ts');
+writeFileSync(versionFilePath, `export const version = '${version}';`);
+
 export default {
   target: 'browser',
   esm: 'babel',

src/__tests__/utils.test.ts

@@ -7,6 +7,7 @@ import {
   sleep,
   validateExportLifecycle,
 } from '../utils';
+import { version } from '../../package.json';
 
 test('should wrap the id [1]', () => {
   const id = 'REACT16';
@@ -26,7 +27,9 @@ test('should wrap string with div', () => {
 
   const ret = factory(tpl);
 
-  expect(ret).toBe(`<div id="__qiankun_microapp_wrapper_for_react_16__" data-name="react16">${tpl}</div>`);
+  expect(ret).toBe(
+    `<div id="__qiankun_microapp_wrapper_for_react_16__" data-name="react16" data-version="${version}">${tpl}</div>`,
+  );
 });
 
 test('should be able to validate lifecycle', () => {

src/utils.ts

@@ -4,6 +4,8 @@
  */
 
 import { isFunction, snakeCase } from 'lodash';
+import { version } from './version';
+
 import type { FrameworkConfiguration } from './interfaces';
 
 export function toArray<T>(array: T | T[]): T[] {
@@ -100,7 +102,7 @@ export function isBoundedFunction(fn: CallableFunction) {
 }
 
 export function getDefaultTplWrapper(id: string, name: string) {
-  return (tpl: string) => `<div id="${getWrapperId(id)}" data-name="${name}">${tpl}</div>`;
+  return (tpl: string) => `<div id="${getWrapperId(id)}" data-name="${name}" data-version="${version}">${tpl}</div>`;
 }
 
 export function getWrapperId(id: string) {

src/version.ts

@@ -0,0 +1 @@
+export { version } from '../package.json';

tsconfig.json

@@ -5,7 +5,7 @@
     "lib": ["es2018", "dom"],
     "declaration": true,
     "outDir": "./esm",
-    "rootDir": "./src",
+    "rootDir": "./",
     "importHelpers": true,
     "downlevelIteration": true,
     "strict": true,