Added a script for changing and testing templates in place with EJS data

.gitignore

@@ -21,4 +21,4 @@
 
 # Output files
 /dist
-/test
+/.template-dev

scaffolds/dev-data.ts

@@ -1,8 +1,30 @@
 export const templateDevData = {
   'nextjs-dedicated-wallet': {
     network: 'ethereum-goerli',
+    publishableApiKey: 'pk_live_FD2D70B32ABE11BD',
+    loginMethods: ['EmailOTP', 'SMSOTP'],
+    projectName: 'My Dedicated Wallet',
+  },
+  'nextjs-flow-dedicated-wallet': {
+    network: 'flow-testnet',
+    publishableApiKey: 'pk_live_FD2D70B32ABE11BD',
+    loginMethods: ['EmailOTP', 'SMSOTP'],
+    projectName: 'My Flow Dedicated Wallet',
+  },
+  'nextjs-flow-universal-wallet': {
+    network: 'flow-testnet',
     publishableApiKey: 'pk_live_8D6C562ABCA3140A',
+    projectName: 'My Flow Universal Wallet',
+  },
+  'nextjs-solana-dedicated-wallet': {
+    network: 'solana-devnet',
+    publishableApiKey: 'pk_live_FD2D70B32ABE11BD',
     loginMethods: ['EmailOTP', 'SMSOTP'],
-    projectName: 'ejs-test-project',
+    projectName: 'My Solana Dedicated Wallet',
+  },
+  'nextjs-universal-wallet': {
+    network: 'ethereum-goerli',
+    publishableApiKey: 'pk_live_8D6C562ABCA3140A',
+    projectName: 'My Universal Wallet',
   },
 };

scripts/template_dev/ejs_dev_script.js

@@ -1,7 +1,8 @@
 const { execSync, exec } = require('child_process');
 const watch = require('watch');
 let fs = require('fs-extra');
-const { setupTsconfig, convertCommandToString } = require('./utils');
+const { setupTsconfig, convertCommandToString, readTemplateDirs } = require('./utils');
+const path = require('path');
 
 setupTsconfig();
 const { templateDevData } = require('../../scaffolds/dev-data');
@@ -10,74 +11,84 @@ let nextProcess = null;
 
 const template = process.argv[2];
 
-// const EJS_DATA_FILE = '../ejs/ejs_data.json';
+if (!template) {
+  console.log('Please specify a template to use');
+  process.exit(1);
+}
+
 const ejsData = templateDevData[template];
-const ejsSourceFiles = [
-  { inputFile: './package.json', outputFile: './package.json' },
-  { inputFile: './.env.example', outputFile: './.env' },
-  { inputFile: './src/components/magic/Login.tsx', outputFile: './src/components/magic/Login.tsx' },
-  {
-    inputFile: './src/components/magic/cards/WalletMethodsCard.tsx',
-    outputFile: './src/components/magic/cards/WalletMethodsCard.tsx',
-  },
-];
-console.log(process.cwd());
+
 const scaffoldInstance = new (require(`../../scaffolds/${template}/scaffold.ts`).default)();
 
 console.log('Rebuilding template...');
-fs.rmSync('./test', { recursive: true, force: true });
+fs.rmSync('./.template-dev', { recursive: true, force: true });
 
-fs.cpSync(`./scaffolds/${template}/template`, './test', { recursive: true });
+fs.cpSync(`./scaffolds/${template}/template`, './.template-dev', { recursive: true });
 
-process.chdir('./test');
+process.chdir('./.template-dev');
 
-if (!fs.existsSync('./node_modules')) {
-  console.log('Installing dependencies...');
-  execSync(convertCommandToString(scaffoldInstance.installationCommand), { stdio: 'inherit' });
-}
+console.log('Building EJS files...');
+readTemplateDirs(path.resolve(`./`), (err, filePaths) => {
+  if (err) {
+    console.log(err);
+  }
 
-ejsSourceFiles.forEach(({ inputFile, outputFile }) => {
-  const result = execSync(`ejs ${inputFile} -i '${JSON.stringify(ejsData)}' -o ${outputFile}`);
-  console.log('Template compiled:', inputFile);
-});
+  filePaths.forEach((filePath) => {
+    if (!filePath.includes('/public/') && !filePath.includes('/.next/')) {
+      const result = execSync(
+        `ejs .${filePath.replace(process.cwd(), '')} -i ${encodeURI(JSON.stringify(ejsData))} -o .${filePath.replace(
+          process.cwd(),
+          '',
+        )}`,
+      );
+    }
+  });
 
-console.log('Running dev server...');
-nextProcess = exec(convertCommandToString(scaffoldInstance.startCommand), { stdio: 'inherit' });
-nextProcess.stdout.on('data', function (data) {
-  console.log(data);
-});
-console.log('Running dev server with process ID: ', nextProcess.pid);
+  if (fs.existsSync('./.env.example')) {
+    fs.renameSync('./.env.example', './.env');
+  }
 
-watch.createMonitor(`../scaffolds/${template}`, function (monitor) {
-  console.log('Watching for changes in template files...');
-  monitor.on('created', function (f, stat) {
-    console.log('Created:', f);
-    fs.copyFileSync(f, `./${f.split('template')[1]}`);
-  });
-  monitor.on('changed', function (f, curr, prev) {
-    console.log('Changed:', f);
-    fs.copyFileSync(f, `./${f.split('template')[1]}`);
+  console.log('Installing dependencies...');
+  execSync(convertCommandToString(scaffoldInstance.installationCommand), { stdio: 'inherit' });
+
+  console.log('Running dev server...');
+  nextProcess = exec(convertCommandToString(scaffoldInstance.startCommand), { stdio: 'inherit' });
+  nextProcess.stdout.on('data', function (data) {
+    console.log(data);
   });
-  monitor.on('removed', function (f, stat) {
-    console.log('Removed:', f);
-    fs.rmSync(`./${f.split('template')[1]}`, { recursive: true, force: true });
+  console.log('Running dev server with process ID: ', nextProcess.pid);
+
+  watch.createMonitor(`../scaffolds/${template}`, function (monitor) {
+    console.log('Watching for changes in template files...');
+    monitor.on('created', function (f, stat) {
+      console.log('Created:', f);
+      fs.copyFileSync(f, `./${f.split('template')[1]}`);
+    });
+    monitor.on('changed', function (f, curr, prev) {
+      console.log('Changed:', f);
+      fs.copyFileSync(f, `./${f.split('template')[1]}`);
+    });
+    monitor.on('removed', function (f, stat) {
+      console.log('Removed:', f);
+      fs.rmSync(`./${f.split('template')[1]}`, { recursive: true, force: true });
+    });
   });
-});
 
-process.on('beforeExit', () => {
-  console.log('Killing dev server...');
-  nextProcess.kill();
-  process.exit();
-});
+  process.on('beforeExit', () => {
+    console.log('Killing dev server...');
+    nextProcess.kill();
+    process.exit();
+  });
 
-process.on('SIGTERM', () => {
-  console.log('Killing dev server...');
-  nextProcess.kill();
-  process.exit();
-});
+  process.on('SIGTERM', () => {
+    console.log('Killing dev server...');
+    nextProcess.kill();
+    process.exit();
+  });
 
-process.on('SIGINT', () => {
-  console.log('Killing dev server...');
-  nextProcess.kill();
-  process.exit();
+  process.on('SIGINT', () => {
+    console.log('Killing dev server...');
+    nextProcess.kill();
+    process.exit();
+  });
 });

scripts/template_dev/utils.js

@@ -18,7 +18,33 @@ const convertCommandToString = (command) => {
   return command.command.concat(' ', command.args.join(' '));
 };
 
+const readTemplateDirs = (root, done) => {
+  let filePaths = [];
+  fs.readdir(root, (err, files) => {
+    if (err) {
+      console.log(err);
+      return;
+    }
+    let pending = files.length;
+    if (!pending) return done(null, filePaths);
+    files.forEach((file) => {
+      const stats = fs.statSync(`${root}/${file}`);
+      if (stats && stats.isDirectory()) {
+        readTemplateDirs(`${root}/${file}`, async (error, res) => {
+          filePaths = filePaths.concat(res);
+          if (!--pending) done(null, filePaths);
+        });
+      } else {
+        filePaths.push(`${root}/${file}`);
+        if (!--pending) done(null, filePaths);
+      }
+    });
+  });
+  return filePaths;
+};
+
 module.exports = {
   setupTsconfig,
   convertCommandToString,
+  readTemplateDirs,
 };