Merge pull request #24 from google/angular-ui

Add support for creating an Angular Material UI

Author: y-ler

.eslintignore

@@ -1,3 +1,4 @@
-node_modules/*
+**/node_modules/*
 build/*
+**/dist/*
 testing

.eslintrc.json

@@ -15,5 +15,5 @@
   "rules": {
     "prettier/prettier": "error"
   },
-  "ignorePatterns": ["template/**/*"]
+  "ignorePatterns": ["template/**/*", "template-ui/**/*"]
 }

.gitignore

@@ -4,3 +4,4 @@ build/
 .DS_Store
 .clasp*.json
 *.tgz
+.vscode/

README.md

@@ -70,6 +70,10 @@ After running the `init` command above, ASIDE will go ahead and do the following
 
   ASIDE is using [clasp](https://github.com/google/clasp) to pull and push code from and to Apps Script
 
+- **(Optionally) Create an Angular Material UI**
+
+  ASIDE will run the necessary commands to create an Angular application with Angular Material components, if the option is chosen
+
 ## Options
 
 You can provide the `init` command with some convenience options:
@@ -124,6 +128,23 @@ dummy;
 
 As long as anything from a file is being used, the entire file will be kept.
 
+### The UI is not working on Apps Script
+
+When installing Angular Material, if you chose `Include and enable animations`, you need to make some changes to `src/ui/src/app/app.config.ts`.
+
+ASIDE currently doesn't support chunk files which will be generated for lazy-loading through `provideAnimationsAsync()`.
+
+Change `app.config.ts` to:
+
+```
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideAnimations()]
+};
+```
+
 ## Disclaimer
 
 This is not an officially supported Google product.

deploy-ui.mjs

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import fs from 'fs-extra';
+import path from 'path';
+
+const cwd = process.cwd();
+const uiDist = path.join(cwd, 'src/ui/dist/ui/browser');
+const files = fs
+  .readdirSync(uiDist)
+  .filter(f => f.endsWith('.html') || f.endsWith('.js') || f.endsWith('.css'));
+
+for (const filename of files) {
+  let newName = filename;
+  const oldPath = path.join(uiDist, filename);
+
+  if (path.extname(filename) === '.html') {
+    newName = 'ui.html';
+    const newPath = path.join(cwd, 'dist', newName);
+    // Replace <script> tags with GAS <?!= ?> tags
+    const scriptRegex = /<script src="([^"]*).js" type="module"><\/script>/g;
+    const cssRegex = /<link rel="stylesheet" href="([^"]*).css".*(?=<\/head>)/g;
+    let htmlContent = fs.readFileSync(oldPath).toString();
+    htmlContent = htmlContent.replaceAll(
+      scriptRegex,
+      "<?!= include('$1'); ?>\n"
+    );
+    htmlContent = htmlContent.replaceAll(
+      cssRegex,
+      "\n<?!= include('$1'); ?>\n"
+    );
+    fs.writeFileSync(newPath, htmlContent);
+  } else if (path.extname(filename) === '.js') {
+    newName = path.format({ ...path.parse(filename), base: '', ext: '.html' });
+    const newPath = path.join(cwd, 'dist', newName);
+    // Add a <script> tag around the js code
+    const jsContent = fs.readFileSync(oldPath).toString();
+    fs.writeFileSync(
+      newPath,
+      `<script type="text/javascript">\n${jsContent}\n</script>`
+    );
+  } else {
+    newName = path.format({ ...path.parse(filename), base: '', ext: '.html' });
+    const newPath = path.join(cwd, 'dist', newName);
+    const cssContent = fs.readFileSync(oldPath).toString();
+    fs.writeFileSync(newPath, `<style>\n${cssContent}\n</style>`);
+  }
+}

src/app.ts

@@ -23,7 +23,7 @@ import { fileURLToPath } from 'url';
 import writeFileAtomic from 'write-file-atomic';
 
 import { ClaspHelper } from './clasp-helper.js';
-import { config } from './config.js';
+import { config, configForUi } from './config.js';
 import { PackageHelper } from './package-helper.js';
 
 /**
@@ -36,10 +36,13 @@ export const app = null;
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+let CONFIG: typeof config;
+
 export interface Options {
   yes: boolean;
   no: boolean;
   title: string;
+  ui: boolean;
 }
 
 /**
@@ -70,7 +73,7 @@ export async function handlePackageJson(options: Options) {
   // Synchronize scripts
   console.log(`${chalk.green('\u2714')}`, 'Adding scripts...');
   const existingScripts = packageJson.getScripts();
-  for (const [name, script] of Object.entries(config.scripts)) {
+  for (const [name, script] of Object.entries(CONFIG.scripts)) {
     if (name in existingScripts && existingScripts[name] !== script) {
       const replace = await query(
         `package.json already has a script for ${chalk.bold(name)}:\n` +
@@ -97,7 +100,7 @@ export async function handlePackageJson(options: Options) {
 
   // Install dev dependencies
   console.log(`${chalk.green('\u2714')}`, 'Installing dependencies...');
-  packageJson.installPackages(config.dependencies);
+  packageJson.installPackages(CONFIG.dependencies);
 }
 
 /**
@@ -190,11 +193,11 @@ async function readFile(path: string): Promise<string | undefined> {
  * @param {Options} options
  */
 async function handleConfigMerge(options: Options) {
-  for (const filename of Object.keys(config.filesMerge)) {
+  for (const filename of Object.keys(CONFIG.filesMerge)) {
     const sourcePath = path.join(__dirname, '../../', filename);
     let sourceLines = (await readFile(sourcePath))?.split('\n');
 
-    const targetFile = await readFile(config.filesMerge[filename]);
+    const targetFile = await readFile(CONFIG.filesMerge[filename]);
     const targetLines = targetFile?.split('\n') ?? [];
 
     const missingLines =
@@ -205,7 +208,7 @@ async function handleConfigMerge(options: Options) {
     if (targetFile !== undefined) {
       const message =
         `${chalk.bold(
-          config.filesMerge[filename]
+          CONFIG.filesMerge[filename]
         )} already exists but is missing content\n` +
         missingLines.map(line => `+${chalk.green(line)}`).join('\n');
 
@@ -217,7 +220,7 @@ async function handleConfigMerge(options: Options) {
     sourceLines = targetLines.concat(missingLines);
 
     await writeFileAtomic(
-      config.filesMerge[filename],
+      CONFIG.filesMerge[filename],
       `${sourceLines.filter(item => item).join('\n')}\n`
     );
   }
@@ -229,25 +232,25 @@ async function handleConfigMerge(options: Options) {
  * @param {Options} options
  */
 async function handleConfigCopy(options: Options) {
-  for (const filename of Object.keys(config.filesCopy)) {
+  for (const filename of Object.keys(CONFIG.filesCopy)) {
     try {
       const sourcePath = path.join(__dirname, '../../', filename);
       const source = await readFile(sourcePath);
-      const target = await readFile(config.filesCopy[filename]);
+      const target = await readFile(CONFIG.filesCopy[filename]);
 
       if (source === target || typeof source === 'undefined') continue;
 
       const writeFile = target
         ? await query(
-            `${chalk.bold(config.filesCopy[filename])} already exists`,
+            `${chalk.bold(CONFIG.filesCopy[filename])} already exists`,
             'Overwrite',
             false,
             options
           )
         : true;
 
       if (writeFile) {
-        await writeFileAtomic(config.filesCopy[filename], source);
+        await writeFileAtomic(CONFIG.filesCopy[filename], source);
       }
     } catch (e) {
       const err = e as Error & { code?: string };
@@ -260,10 +263,17 @@ async function handleConfigCopy(options: Options) {
 
 /**
  * Handle putting template files in place.
+ *
+ * @param {Options} options
  */
-async function handleTemplate() {
+async function handleTemplate(options: Options) {
   const cwd = process.cwd();
-  const templates = path.join(__dirname, '../../template');
+  let templates;
+  if (options.ui) {
+    templates = path.join(__dirname, '../../template-ui');
+  } else {
+    templates = path.join(__dirname, '../../template');
+  }
 
   const items = await fs.readdir(templates);
 
@@ -319,7 +329,7 @@ async function handleClasp(options: Options) {
   // Prepare clasp project environment
   if (scriptIdDev) {
     console.log(`${chalk.green('\u2714')}`, `Cloning ${scriptIdDev}...`);
-    claspHelper.cloneAndPull(scriptIdDev, scriptIdProd, 'dist');
+    await claspHelper.cloneAndPull(scriptIdDev, scriptIdProd, 'dist');
   } else {
     console.log(`${chalk.green('\u2714')}`, `Creating ${options.title}...`);
     const res = await claspHelper.create(options.title, scriptIdProd, './dist');
@@ -353,8 +363,17 @@ export async function init(
     yes: flags.yes || false,
     no: flags.no || false,
     title: projectTitle,
+    ui: flags.no || false,
   };
 
+  options.ui = await query('', 'Create an Angular UI?', false, options);
+
+  if (options.ui) {
+    CONFIG = configForUi;
+  } else {
+    CONFIG = config;
+  }
+
   // Handle package.json
   await handlePackageJson(options);
 
@@ -365,8 +384,16 @@ export async function init(
   await handleConfigMerge(options);
 
   // Handle template
-  await handleTemplate();
+  await handleTemplate(options);
 
   // Handle clasp
   await handleClasp(options);
+
+  if (options.ui) {
+    console.log();
+    console.log(
+      'Make sure to run npm install to install all the Angular UI dependencies'
+    );
+    console.log();
+  }
 }

src/config.ts

@@ -76,3 +76,73 @@ export const config: {
     '.prettierignore': '.prettierignore',
   },
 };
+
+export const configForUi: {
+  dependencies: string[];
+  scripts: PackageJson.Scripts;
+  filesCopy: Record<string, string>;
+  filesMerge: Record<string, string>;
+} = {
+  dependencies: [
+    '@angular/cli',
+    '@google/clasp',
+    '@types/google-apps-script',
+    '@types/jest',
+    '@typescript-eslint/eslint-plugin',
+    'eslint',
+    'eslint-config-prettier',
+    'eslint-plugin-prettier',
+    'fs-extra',
+    'gts',
+    'inquirer@^8.0.0',
+    'jest',
+    'license-check-and-add',
+    'ncp',
+    'prettier',
+    'rimraf',
+    'rollup',
+    'rollup-plugin-cleanup',
+    'rollup-plugin-license',
+    'rollup-plugin-typescript2',
+    'ts-jest',
+    'typescript',
+  ],
+  scripts: {
+    'preinstall':
+      '(cd src/ && ng new --skip-git --skip-tests=true --routing=false --ssr=false --style=css --standalone ui && cd ui/ && ng add --skip-confirmation @angular/material)',
+    'clean': 'rimraf build dist',
+    'lint':
+      'npm run license && eslint --fix --no-error-on-unmatched-pattern src/ test/',
+    'bundle': 'rollup --no-treeshake -c rollup.config.mjs',
+    'build': 'npm run clean && npm run bundle',
+    'build-ui': 'npm run build --prefix src/ui',
+    'license': 'license-check-and-add add -f license-config.json',
+    'test': 'jest test/ --passWithNoTests --detectOpenHandles',
+    'test-ui': 'npm run test --prefix src/ui',
+    'deploy':
+      'npm run lint && npm run test && npm run build && ncp appsscript.json dist/appsscript.json && ncp .clasp-dev.json .clasp.json && npm run build-ui && npm run deploy-ui && clasp push -f',
+    'deploy-ui': 'node deploy-ui.mjs',
+    'deploy:prod':
+      'npm run lint && npm run test && npm run build && ncp appsscript.json dist/appsscript.json && ncp .clasp-prod.json .clasp.json && npm run build-ui && npm run deploy-ui && clasp push',
+    'serve-ui': '(cd src/ui && ng serve)',
+    'postinstall': '(cd src/ui && npm install)',
+  },
+  filesCopy: {
+    '.editorconfig': '.editorconfig',
+    '.eslintrc.json': '.eslintrc.json',
+    '.prettierrc.json': '.prettierrc.json',
+    'jest.config.json': 'jest.config.json',
+    'LICENSE': 'LICENSE',
+    'license-config.json': 'license-config.json',
+    'license-header.txt': 'license-header.txt',
+    'rollup.config.mjs': 'rollup.config.mjs',
+    'deploy-ui.mjs': 'deploy-ui.mjs',
+    'tsconfig.json': 'tsconfig.json',
+  },
+  filesMerge: {
+    'dist/.gitignore-target': '.gitignore',
+    '.claspignore': '.claspignore',
+    '.eslintignore': '.eslintignore',
+    '.prettierignore': '.prettierignore',
+  },
+};

template-ui/src/example-module.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function hello() {
+  return 'Hello Apps Script!';
+}