fix(postinstall): add snapshot plugin to webpack config

Author: sis0k0

installer.js

@@ -12,8 +12,8 @@ const APP_DIR = path.resolve(PROJECT_DIR, "app");
 function install() {
     let packageJson = helpers.getPackageJson(PROJECT_DIR);
 
-    projectFilesManager.addProjectFiles(PROJECT_DIR, APP_DIR);
     projectFilesManager.editExistingProjectFiles(PROJECT_DIR);
+    projectFilesManager.addProjectFiles(PROJECT_DIR, APP_DIR);
 
     let scripts = packageJson.scripts || {};
     scripts = npmScriptsManager.removeDeprecatedNpmScripts(scripts);

projectFilesManager.js

@@ -3,16 +3,34 @@ const fs = require("fs");
 
 const { isTypeScript, isAngular } = require("./projectHelpers");
 
-const FRAME_MATCH =  /(\s*)(require\("ui\/frame"\);)(\s*)(require\("ui\/frame\/activity"\);)/;
+const FRAME_MATCH = /(\s*)(require\("ui\/frame"\);)(\s*)(require\("ui\/frame\/activity"\);)/g;
 const SCOPED_FRAME = `
 if (!global["__snapshot"]) {
     // In case snapshot generation is enabled these modules will get into the bundle
-    // but will not be required/evaluated. 
+    // but will not be required/evaluated.
     // The snapshot webpack plugin will add them to the tns-java-classes.js bundle file.
     // This way, they will be evaluated on app start as early as possible.
-    $1\t$2$3\t$4
+$1\t$2$3\t$4
 }`;
 
+const CONFIG_MATCH = /(exports = [^]+?)\s*return ({[^]+target:\s*nativescriptTarget[^]+?};)/;
+const CONFIG_REPLACE = `$1
+
+    const config = $2
+
+    if (env.snapshot) {
+        plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
+            chunk: "vendor",
+            projectRoot: __dirname,
+            webpackConfig: config,
+            targetArchs: ["arm", "arm64"],
+            tnsJavaClassesOptions: { packages: ["tns-core-modules" ] },
+            useLibs: false
+        }));
+    }
+
+    return config;`;
+
 function addProjectFiles(projectDir, appDir) {
     const projectTemplates = getProjectTemplates(projectDir);
     Object.keys(projectTemplates).forEach(function(templateName) {
@@ -105,8 +123,13 @@ function editExistingProjectFiles(projectDir) {
     const webpackConfigPath = getFullPath(projectDir, "webpack.config.js");
     const webpackCommonPath = getFullPath(projectDir, "webpack.common.js");
 
-    editFileContent(webpackConfigPath, replaceStyleUrlResolvePlugin);
-    editFileContent(webpackCommonPath, replaceStyleUrlResolvePlugin);
+    const configChangeFunctions = [
+        replaceStyleUrlResolvePlugin,
+        addSnapshotPlugin,
+    ];
+
+    editFileContent(webpackConfigPath, ...configChangeFunctions);
+    editFileContent(webpackCommonPath, ...configChangeFunctions);
 
     const extension = isAngular({projectDir}) ? "ts" : "js";
     const vendorAndroidPath = getFullPath(
@@ -117,33 +140,31 @@ function editExistingProjectFiles(projectDir) {
     editFileContent(vendorAndroidPath, addSnapshotToVendor);
 }
 
-function editFileContent(path, fn) {
+function editFileContent(path, ...funcs) {
     if (!fs.existsSync(path)) {
         return;
     }
 
-    console.log('editing: ' + path)
-    const config = fs.readFileSync(path, "utf8");
-    const newConfig = fn(config);
+    let content = fs.readFileSync(path, "utf8");
+    funcs.forEach(fn => content = fn(content));
 
-    fs.writeFileSync(path, newConfig, "utf8");
+    fs.writeFileSync(path, content, "utf8");
 }
 
 function replaceStyleUrlResolvePlugin(config) {
     return config.replace(/StyleUrlResolvePlugin/g, "UrlResolvePlugin");
 }
 
 function addSnapshotPlugin(config) {
-
+    return config.indexOf("NativeScriptSnapshotPlugin") > -1 ?
+        config :
+        config.replace(CONFIG_MATCH, CONFIG_REPLACE);
 }
 
 function addSnapshotToVendor(content) {
-    if (content.indexOf("__snapshot") > -1) {
-        return content;
-    }
-
-
-    return content.replace(FRAME_MATCH, SCOPED_FRAME);
+    return content.indexOf("__snapshot") > -1 ?
+        content :
+        content.replace(FRAME_MATCH, SCOPED_FRAME);
 }
 
 function getFullPath(projectDir, filePath) {