EJS data injection WIP

magiclabs · Dec 18, 2023 · de00ec7 · de00ec7
1 parent a1f02c5
commit de00ec7
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 100 deletions.
diff --git a/ejs_data.json → ejs/ejs_data.json b/ejs_data.json → ejs/ejs_data.json
@@ -1,6 +1,6 @@
 {
   "network": "ethereum-goerli",
-  "publishableApiKey": "ejs-json-file-test-key",
+  "publishableApiKey": "pk_live_8D6C562ABCA3140A",
   "loginMethods": ["EmailOTP", "SMSOTP"],
   "projectName": "ejs-test-project"
 }
diff --git a/ejs_script.js → ejs/ejs_script.js b/ejs_script.js → ejs/ejs_script.js
@@ -1,27 +1,28 @@
 const { execSync, exec } = require('child_process');
-const fs = require('fs');
 const watch = require('watch');
+let fs = require('fs-extra');
+const { setupTsconfig, convertCommandToString } = require('./utils');
+
+setupTsconfig();
 
 let nextProcess = null;
 
 const template = process.argv[2];
-const rebuild = process.argv.includes('rebuild');
 
-const EJS_DATA_FILE = '../ejs_data.json';
+const EJS_DATA_FILE = '../ejs/ejs_data.json';
 const ejsSourceFiles = [
   { inputFile: './package.json', outputFile: './package.json' },
-  { inputFile: './.env.example', outputFile: './.env.example' },
+  { 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',
   },
 ];
+const scaffoldInstance = new (require(`../scaffolds/${template}/scaffold.ts`).default)();
 
-if (rebuild) {
-  console.log('Rebuilding template...');
-  fs.rmSync('./test', { recursive: true, force: true });
-}
+console.log('Rebuilding template...');
+fs.rmSync('./test', { recursive: true, force: true });
 
 fs.cpSync(`./scaffolds/${template}/template`, './test', { recursive: true });
 
@@ -31,7 +32,7 @@ if (!fs.existsSync('./node_modules')) {
   console.log('Current directory: ', process.cwd());
 
   console.log('Installing dependencies...');
-  execSync('npm install', { stdio: 'inherit' });
+  execSync(convertCommandToString(scaffoldInstance.installationCommand), { stdio: 'inherit' });
 }
 
 ejsSourceFiles.forEach(({ inputFile, outputFile }) => {
@@ -40,7 +41,7 @@ ejsSourceFiles.forEach(({ inputFile, outputFile }) => {
 });
 
 console.log('Running dev server...');
-nextProcess = exec('npm run dev', { stdio: 'inherit' });
+nextProcess = exec(convertCommandToString(scaffoldInstance.startCommand), { stdio: 'inherit' });
 nextProcess.stdout.on('data', function (data) {
   console.log(data);
 });

diff --git a/ejs/utils.js b/ejs/utils.js
@@ -0,0 +1,24 @@
+const tsNode = require('ts-node');
+let json = require('json5');
+let fs = require('fs-extra');
+
+//setting up tsconfig for ts-node to compilt the scaffold.ts file of any scaffold
+const setupTsconfig = () => {
+  let tsconfig = {
+    compilerOptions: {
+      ...json.parse(fs.readFileSync(`./tsconfig.json`)).compilerOptions,
+    },
+    transpileOnly: true,
+  };
+
+  tsNode.register(tsconfig);
+};
+
+const convertCommandToString = (command) => {
+  return command.command.concat(' ', command.args.join(' '));
+};
+
+module.exports = {
+  setupTsconfig,
+  convertCommandToString,
+};
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "dist"
   ],
   "scripts": {
-    "dev-ejs": "node ejs_script.js",
+    "dev-ejs": "node ejs/ejs_script.js",
     "dev": "yarn clean && tsc-watch --onSuccess \"yarn build-dev\"",
     "build-dev": "yarn clean && tsc && tsc-alias && copyfiles \"compiled/*/+(LICENSE|package.json)\" dist",
     "build": "yarn clean && tsc && tsc-alias && copyfiles \"compiled/*/+(LICENSE|package.json)\" dist && ./scripts/minify.ts",
@@ -35,6 +35,7 @@
     "@types/react": "^17.0.0",
     "@types/react-is": "^17.0.0",
     "@types/tar": "^4.0.4",
+    "@types/watch": "^1.0.6",
     "@types/yargs-parser": "^20.2.0",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@vercel/ncc": "^0.36.1",

diff --git a/...olds/nextjs-dedicated-wallet/scaffold.tsx → ...folds/nextjs-dedicated-wallet/scaffold.ts b/...olds/nextjs-dedicated-wallet/scaffold.tsx → ...folds/nextjs-dedicated-wallet/scaffold.ts
@@ -1,6 +1,6 @@
-import { Flags } from 'core/flags';
-import BaseScaffold, { ExecaCommand } from 'core/types/BaseScaffold';
-import { AuthTypePrompt, BlockchainNetworkPrompt, PublishableApiKeyPrompt } from 'scaffolds/prompts';
+import { Flags } from '../../core/flags';
+import BaseScaffold, { ExecaCommand } from '../../core/types/BaseScaffold';
+import { AuthTypePrompt, BlockchainNetworkPrompt, PublishableApiKeyPrompt } from '../../scaffolds/prompts';
 
 export type Data = BlockchainNetworkPrompt.Data & PublishableApiKeyPrompt.Data & AuthTypePrompt.Data;
 
@@ -17,7 +17,7 @@ export const definition = {
 
 export default class DedicatedScaffold extends BaseScaffold {
   public templateName = 'nextjs-dedicated-wallet';
-  private data: Data;
+  private data: Data | undefined;
   public installationCommand: ExecaCommand = { command: 'npm', args: ['install'] };
   public startCommand: ExecaCommand = { command: 'npm', args: ['run', 'dev'] };
   public source: string | string[] = [
@@ -52,30 +52,31 @@ export default class DedicatedScaffold extends BaseScaffold {
     './src/utils',
   ];
 
-  constructor(data: Data) {
+  constructor(data: Data | undefined) {
     super();
     this.data = data;
-
-    if (typeof this.source !== 'string') {
-      data.loginMethods.forEach((authType) => {
-        (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
-        if (
-          authType === 'Discord' ||
-          authType === 'Facebook' ||
-          authType === 'Github' ||
-          authType === 'Google' ||
-          authType === 'Twitch' ||
-          authType === 'Twitter'
-        ) {
-          (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
-        }
-        if (authType.replaceAll(' ', '') === 'EmailOTP') {
-          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
-        }
-        if (authType.replaceAll(' ', '') === 'SMSOTP') {
-          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx');
-        }
-      });
+    if (data) {
+      if (typeof this.source !== 'string') {
+        data.loginMethods.forEach((authType) => {
+          (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
+          if (
+            authType === 'Discord' ||
+            authType === 'Facebook' ||
+            authType === 'Github' ||
+            authType === 'Google' ||
+            authType === 'Twitch' ||
+            authType === 'Twitter'
+          ) {
+            (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
+          }
+          if (authType.replaceAll(' ', '') === 'EmailOTP') {
+            (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
+          }
+          if (authType.replaceAll(' ', '') === 'SMSOTP') {
+            (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx');
+          }
+        });
+      }
     }
   }
 }
diff --git a/...nextjs-flow-dedicated-wallet/scaffold.tsx → .../nextjs-flow-dedicated-wallet/scaffold.ts b/...nextjs-flow-dedicated-wallet/scaffold.tsx → .../nextjs-flow-dedicated-wallet/scaffold.ts
@@ -1,6 +1,6 @@
-import { Flags } from 'core/flags';
-import BaseScaffold, { ExecaCommand } from 'core/types/BaseScaffold';
-import { AuthTypePrompt, NpmClientPrompt, PublishableApiKeyPrompt } from 'scaffolds/prompts';
+import { Flags } from '../../core/flags';
+import BaseScaffold, { ExecaCommand } from '../../core/types/BaseScaffold';
+import { AuthTypePrompt, NpmClientPrompt, PublishableApiKeyPrompt } from '../../scaffolds/prompts';
 
 export type Data = NpmClientPrompt.Data & PublishableApiKeyPrompt.Data & AuthTypePrompt.Data;
 
@@ -17,7 +17,7 @@ export const definition = {
 
 export default class FlowDedicatedScaffold extends BaseScaffold {
   public templateName = 'nextjs-flow-dedicated-wallet';
-  private data: Data;
+  private data: Data | undefined;
   public installationCommand: ExecaCommand = { command: 'npm', args: ['install'] };
   public startCommand: ExecaCommand = { command: 'npm', args: ['run', 'dev'] };
   public source: string | string[] = [
@@ -52,30 +52,31 @@ export default class FlowDedicatedScaffold extends BaseScaffold {
     './src/utils',
   ];
 
-  constructor(data: Data) {
+  constructor(data: Data | undefined) {
     super();
     this.data = data;
-
-    if (typeof this.source !== 'string') {
-      data.loginMethods.forEach((authType) => {
-        (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
-        if (
-          authType === 'Discord' ||
-          authType === 'Facebook' ||
-          authType === 'Github' ||
-          authType === 'Google' ||
-          authType === 'Twitch' ||
-          authType === 'Twitter'
-        ) {
-          (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
-        }
-        if (authType.replaceAll(' ', '') === 'EmailOTP') {
-          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
-        }
-        if (authType.replaceAll(' ', '') === 'SMSOTP') {
-          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx');
-        }
-      });
+    if (data) {
+      if (typeof this.source !== 'string') {
+        data.loginMethods.forEach((authType) => {
+          (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
+          if (
+            authType === 'Discord' ||
+            authType === 'Facebook' ||
+            authType === 'Github' ||
+            authType === 'Google' ||
+            authType === 'Twitch' ||
+            authType === 'Twitter'
+          ) {
+            (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
+          }
+          if (authType.replaceAll(' ', '') === 'EmailOTP') {
+            (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
+          }
+          if (authType.replaceAll(' ', '') === 'SMSOTP') {
+            (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx');
+          }
+        });
+      }
     }
   }
 }
diff --git a/...nextjs-flow-universal-wallet/scaffold.tsx → .../nextjs-flow-universal-wallet/scaffold.ts b/...nextjs-flow-universal-wallet/scaffold.tsx → .../nextjs-flow-universal-wallet/scaffold.ts
@@ -1,6 +1,6 @@
-import { Flags } from 'core/flags';
-import BaseScaffold, { ExecaCommand } from 'core/types/BaseScaffold';
-import { NpmClientPrompt, PublishableApiKeyPrompt } from 'scaffolds/prompts';
+import { Flags } from '../../core/flags';
+import BaseScaffold, { ExecaCommand } from '../../core/types/BaseScaffold';
+import { NpmClientPrompt, PublishableApiKeyPrompt } from '../../scaffolds/prompts';
 
 export type Data = NpmClientPrompt.Data & PublishableApiKeyPrompt.Data;
 
@@ -16,12 +16,12 @@ export const definition = {
 
 export default class FlowUniversalScaffold extends BaseScaffold {
   public templateName = 'nextjs-flow-universal-wallet';
-  private data: Data;
+  private data: Data | undefined;
   public installationCommand: ExecaCommand = { command: 'npm', args: ['install'] };
   public startCommand: ExecaCommand = { command: 'npm', args: ['run', 'dev'] };
   public source: string | string[] = './';
 
-  constructor(data: Data) {
+  constructor(data: Data | undefined) {
     super();
     this.data = data;
   }

diff --git a/...xtjs-solana-dedicated-wallet/scaffold.tsx → ...extjs-solana-dedicated-wallet/scaffold.ts b/...xtjs-solana-dedicated-wallet/scaffold.tsx → ...extjs-solana-dedicated-wallet/scaffold.ts
@@ -1,6 +1,6 @@
-import { Flags } from 'core/flags';
-import BaseScaffold, { ExecaCommand } from 'core/types/BaseScaffold';
-import { AuthTypePrompt, NpmClientPrompt, PublishableApiKeyPrompt } from 'scaffolds/prompts';
+import { Flags } from '../../core/flags';
+import BaseScaffold, { ExecaCommand } from '../../core/types/BaseScaffold';
+import { AuthTypePrompt, NpmClientPrompt, PublishableApiKeyPrompt } from '../../scaffolds/prompts';
 
 export type Data = NpmClientPrompt.Data & PublishableApiKeyPrompt.Data & AuthTypePrompt.Data;
 
@@ -17,7 +17,7 @@ export const definition = {
 
 export default class SolanaDedicatedScaffold extends BaseScaffold {
   public templateName = 'nextjs-solana-dedicated-wallet';
-  private data: Data;
+  private data: Data | undefined;
   public installationCommand: ExecaCommand = { command: 'npm', args: ['install'] };
   public startCommand: ExecaCommand = { command: 'npm', args: ['run', 'dev'] };
   public source: string | string[] = [
@@ -52,30 +52,31 @@ export default class SolanaDedicatedScaffold extends BaseScaffold {
     './src/utils',
   ];
 
-  constructor(data: Data) {
+  constructor(data: Data | undefined) {
     super();
     this.data = data;
-
-    if (typeof this.source !== 'string') {
-      data.loginMethods.forEach((authType) => {
-        (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
-        if (
-          authType === 'Discord' ||
-          authType === 'Facebook' ||
-          authType === 'Github' ||
-          authType === 'Google' ||
-          authType === 'Twitch' ||
-          authType === 'Twitter'
-        ) {
-          (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
-        }
-        if (authType.replaceAll(' ', '') === 'EmailOTP') {
-          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
-        }
-        if (authType.replaceAll(' ', '') === 'SMSOTP') {
-          (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx');
-        }
-      });
+    if (data) {
+      if (typeof this.source !== 'string') {
+        data.loginMethods.forEach((authType) => {
+          (this.source as string[]).push(`./src/components/magic/auth/${authType.replaceAll(' ', '')}.tsx`);
+          if (
+            authType === 'Discord' ||
+            authType === 'Facebook' ||
+            authType === 'Github' ||
+            authType === 'Google' ||
+            authType === 'Twitch' ||
+            authType === 'Twitter'
+          ) {
+            (this.source as string[]).push(`./public/social/${authType.replaceAll(' ', '')}.svg`);
+          }
+          if (authType.replaceAll(' ', '') === 'EmailOTP') {
+            (this.source as string[]).push('./src/components/magic/wallet-methods/UpdateEmail.tsx');
+          }
+          if (authType.replaceAll(' ', '') === 'SMSOTP') {
+            (this.source as string[]).push('./src/components/magic/wallet-methods/UpdatePhone.tsx');
+          }
+        });
+      }
     }
   }
 }
diff --git a/scaffolds/nextjs-universal-wallet/scaffold.ts b/scaffolds/nextjs-universal-wallet/scaffold.ts
@@ -1,7 +1,7 @@
 import { Prompt } from 'enquirer';
-import { Flags } from 'core/flags';
-import BaseScaffold, { ExecaCommand } from 'core/types/BaseScaffold';
-import { BlockchainNetworkPrompt, PublishableApiKeyPrompt } from 'scaffolds/prompts';
+import { Flags } from '../../core/flags';
+import BaseScaffold, { ExecaCommand } from '../../core/types/BaseScaffold';
+import { BlockchainNetworkPrompt, PublishableApiKeyPrompt } from '../../scaffolds/prompts';
 
 export type Data = BlockchainNetworkPrompt.Data & PublishableApiKeyPrompt.Data;
 
@@ -14,12 +14,12 @@ export const definition = {
 
 export default class UniversalScaffold extends BaseScaffold {
   public templateName = 'nextjs-universal-wallet';
-  private data: Data;
+  private data: Data | undefined;
   public installationCommand: ExecaCommand = { command: 'npm', args: ['install'] };
   public startCommand: ExecaCommand = { command: 'npm', args: ['run', 'dev'] };
   public source: string | string[] = './';
 
-  constructor(data: Data) {
+  constructor(data: Data | undefined) {
     super();
     this.data = data;
   }

diff --git a/yarn.lock b/yarn.lock
@@ -600,6 +600,13 @@
     "@types/minipass" "*"
     "@types/node" "*"
 
+"@types/watch@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@types/watch/-/watch-1.0.6.tgz"
+  integrity sha512-FyGZcrtLHiajvMEqkFO+C42TvQl0lCJG4ZDVTuw4n6oeAOAfiO8iBRqOKHWxBe0z/b9pUk3kE8QtIUGQXsQP6A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@^20.2.0":
   version "20.2.2"
   resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.2.tgz"