@ciderjs/gasbombe 0.2.9 → 0.3.1

package/README.ja.md

@@ -13,8 +13,13 @@
 
 * **CLIツール**: 対話型のコマンドラインプロンプトにより、プロジェクトのセットアップをガイドします。
 * **テンプレート**:
-  * Vanilla TypeScript
-  * React with TSX
+  * サーバーサイドTypeScript
+  * サーバーサイドJavaScript
+  * React
+  * React with CiderJS
+  * Vue
+  * Vue with CiderJS
+  * HTML/JS
 * **パッケージマネージャーのサポート**: npm、Yarn、pnpmに対応しています。
 
 ## **使用方法**
@@ -56,13 +61,13 @@ gasbombe
 
 ```bash
 # 例: pnpmを使用して新しいReactプロジェクトを作成し、同時に新しいApps Scriptプロジェクトも作成する
-gasbombe --name my-react-app --template react-tsx --clasp create --pkg pnpm
+gasbombe --name my-react-app --template react --clasp create --pkg pnpm
 ```
 
 | オプション | エイリアス | 引数 | 説明 | 選択肢 |
 | :--- | :--- | :--- | :--- | :--- |
 | `--name` | `-n` | `[projectName]` | 生成するプロジェクトの名前。 | - |
-| `--template` | `-t` | `[templateType]` | 使用するプロジェクトテンプレート。 | `vanilla-ts`, `react-tsx` |
+| `--template` | `-t` | `[templateType]` | 使用するプロジェクトテンプレート。 | `server-ts`, `server-js`, `react`, `react-ciderjs`, `vue`, `vue-ciderjs`, `html-js` |
 | `--clasp` | `-c` | `[claspOption]` | `.clasp.json`のセットアップ方法。<br/>`create`と`list`は事前にclaspへのログインが必要です。 | `create`, `list`, `input`, `skip` |
 | `--pkg` | `-p` | `[packageManager]` | 使用するパッケージマネージャー。 | `npm`, `pnpm`, `yarn` |
 | `--skipInstall` | | | 依存関係のインストールをスキップします。 | - |

package/README.md

@@ -13,8 +13,13 @@ This project provides a command-line interface (CLI) to scaffold new TypeScript
 
 * **CLI Tool**: Interactive command-line prompts to guide you through project setup.
 * **Templates**:
-  * Vanilla TypeScript
-  * React with TSX
+  * Server-side TypeScript
+  * Server-side JavaScript
+  * React
+  * React with CiderJS
+  * Vue
+  * Vue with CiderJS
+  * HTML/JS
 * **Package Manager Support**: Works with npm, Yarn, and pnpm.
 
 ## **Usage**
@@ -56,13 +61,13 @@ You can bypass the interactive prompts by providing command-line options. This i
 
 ```bash
 # Example: Create a new React project with pnpm, creating a new Apps Script project along with it
-gasbombe --name my-react-app --template react-tsx --clasp create --pkg pnpm
+gasbombe --name my-react-app --template react --clasp create --pkg pnpm
 ```
 
 | Option | Alias | Argument | Description | Choices |
 | :--- | :--- | :--- | :--- | :--- |
 | `--name` | `-n` | `[projectName]` | The name of the project to generate. | - |
-| `--template` | `-t` | `[templateType]` | The project template to use. | `vanilla-ts`, `react-tsx` |
+| `--template` | `-t` | `[templateType]` | The project template to use. | `server-ts`, `server-js`, `react`, `react-ciderjs`, `vue`, `vue-ciderjs`, `html-js` |
 | `--clasp` | `-c` | `[claspOption]` | How to set up the `.clasp.json` file.<br/>`create` and `list` require prior login to clasp. | `create`, `list`, `input`, `skip` |
 | `--pkg` | `-p` | `[packageManager]` | The package manager to use. | `npm`, `pnpm`, `yarn` |
 | `--skipInstall` | | | Skip installing dependencies. | - |

package/dist/cli.cjs

@@ -11,7 +11,7 @@ require('consola');
 require('ejs');
 require('glob');
 
-const version = "0.2.9";
+const version = "0.3.1";
 
 async function main() {
   const program = new commander.Command();
@@ -26,7 +26,7 @@ async function main() {
     ""
   ).option(
     "-t, --template [templateType]",
-    'Project template label ("vanilla-ts" | "react-tsx")',
+    'Project template label ("vanilla-ts" | "vanilla-js" | "react-tsx")',
     ""
   ).option(
     "-c, --clasp [claspSetupCommand]",
@@ -65,11 +65,52 @@ async function main() {
       templateType ||= await prompts.select({
         message: "Choice project template...",
         choices: [
-          { name: "vanilla-ts", value: "vanilla-ts" },
-          { name: "react-tsx", value: "react-tsx" }
+          {
+            name: "ts",
+            value: "server-ts",
+            description: "TypeScript (only Server-Side)"
+          },
+          {
+            name: "js",
+            value: "server-js",
+            description: "JavaScript (only Server-Side)"
+          },
+          {
+            name: "react",
+            value: "react",
+            description: "TSX-React (Client-Side & Server-Side)"
+          },
+          {
+            name: "react-ciderjs",
+            value: "react-ciderjs",
+            description: "TSX-React with CiderJS (Client-Side & Server-Side)"
+          },
+          {
+            name: "vue",
+            value: "vue",
+            description: "Vue3 (Client-Side & Server-Side)"
+          },
+          {
+            name: "vue-ciderjs",
+            value: "vue-ciderjs",
+            description: "Vue3 with CiderJS (Client-Side & Server-Side)"
+          },
+          {
+            name: "html-js",
+            value: "html-js",
+            description: "HTML with JavaScript (Client-Side & Server-Side)"
+          }
         ]
       });
-      const templateTypes = ["vanilla-ts", "react-tsx"];
+      const templateTypes = [
+        "server-ts",
+        "server-js",
+        "react",
+        "react-ciderjs",
+        "vue",
+        "vue-ciderjs",
+        "html-js"
+      ];
       if (!templateTypes.includes(templateType)) {
         throw Error("Invalid project template");
       }

package/dist/cli.mjs

@@ -9,7 +9,7 @@ import 'consola';
 import 'ejs';
 import 'glob';
 
-const version = "0.2.9";
+const version = "0.3.1";
 
 async function main() {
   const program = new Command();
@@ -24,7 +24,7 @@ async function main() {
     ""
   ).option(
     "-t, --template [templateType]",
-    'Project template label ("vanilla-ts" | "react-tsx")',
+    'Project template label ("vanilla-ts" | "vanilla-js" | "react-tsx")',
     ""
   ).option(
     "-c, --clasp [claspSetupCommand]",
@@ -63,11 +63,52 @@ async function main() {
       templateType ||= await select({
         message: "Choice project template...",
         choices: [
-          { name: "vanilla-ts", value: "vanilla-ts" },
-          { name: "react-tsx", value: "react-tsx" }
+          {
+            name: "ts",
+            value: "server-ts",
+            description: "TypeScript (only Server-Side)"
+          },
+          {
+            name: "js",
+            value: "server-js",
+            description: "JavaScript (only Server-Side)"
+          },
+          {
+            name: "react",
+            value: "react",
+            description: "TSX-React (Client-Side & Server-Side)"
+          },
+          {
+            name: "react-ciderjs",
+            value: "react-ciderjs",
+            description: "TSX-React with CiderJS (Client-Side & Server-Side)"
+          },
+          {
+            name: "vue",
+            value: "vue",
+            description: "Vue3 (Client-Side & Server-Side)"
+          },
+          {
+            name: "vue-ciderjs",
+            value: "vue-ciderjs",
+            description: "Vue3 with CiderJS (Client-Side & Server-Side)"
+          },
+          {
+            name: "html-js",
+            value: "html-js",
+            description: "HTML with JavaScript (Client-Side & Server-Side)"
+          }
         ]
       });
-      const templateTypes = ["vanilla-ts", "react-tsx"];
+      const templateTypes = [
+        "server-ts",
+        "server-js",
+        "react",
+        "react-ciderjs",
+        "vue",
+        "vue-ciderjs",
+        "html-js"
+      ];
       if (!templateTypes.includes(templateType)) {
         throw Error("Invalid project template");
       }

package/dist/index.cjs

@@ -260,7 +260,7 @@ async function generateProject({
   const messages = [];
   projectName !== "." && messages.push(`  cd ${projectName}`);
   !install && messages.push(`  ${packageManager} install`);
-  templateType !== "vanilla-ts" && messages.push(`  ${packageManager} dev`);
+  !["server-ts", "server-js"].includes(templateType) && messages.push(`  ${packageManager} dev`);
   if (messages.length > 0) {
     consola.consola.log(`
 To get started, run:

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 type PackageManager = 'npm' | 'pnpm' | 'yarn';
-type TemplateType = 'vanilla-ts' | 'react-tsx';
+type TemplateType = 'server-ts' | 'server-js' | 'react' | 'react-ciderjs' | 'vue' | 'vue-ciderjs' | 'html-js';
 type ClaspOption = 'create' | 'list' | 'input' | 'skip';
 interface ProjectOptions {
     projectName: string;

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 type PackageManager = 'npm' | 'pnpm' | 'yarn';
-type TemplateType = 'vanilla-ts' | 'react-tsx';
+type TemplateType = 'server-ts' | 'server-js' | 'react' | 'react-ciderjs' | 'vue' | 'vue-ciderjs' | 'html-js';
 type ClaspOption = 'create' | 'list' | 'input' | 'skip';
 interface ProjectOptions {
     projectName: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 type PackageManager = 'npm' | 'pnpm' | 'yarn';
-type TemplateType = 'vanilla-ts' | 'react-tsx';
+type TemplateType = 'server-ts' | 'server-js' | 'react' | 'react-ciderjs' | 'vue' | 'vue-ciderjs' | 'html-js';
 type ClaspOption = 'create' | 'list' | 'input' | 'skip';
 interface ProjectOptions {
     projectName: string;

package/dist/index.mjs

@@ -261,7 +261,7 @@ async function generateProject({
   const messages = [];
   projectName !== "." && messages.push(`  cd ${projectName}`);
   !install && messages.push(`  ${packageManager} install`);
-  templateType !== "vanilla-ts" && messages.push(`  ${packageManager} dev`);
+  !["server-ts", "server-js"].includes(templateType) && messages.push(`  ${packageManager} dev`);
   if (messages.length > 0) {
     consola.log(`
 To get started, run:

package/dist/templates/html-js/biome.json.ejs

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["src/**/*", "tests/**/*", "types/**/*", "./*.js", "./*.json"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}

package/dist/templates/html-js/index.html.ejs

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= projectName %></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/dist/templates/html-js/package.json.ejs

@@ -0,0 +1,33 @@
+{
+  "name": "<%= projectName %>",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build:server": "rolldown -c && cpy server/*.json dist/",
+    "build:front": "tsc -b && vite build",
+    "build": "rimraf dist && pnpm run build:front && pnpm run build:server",
+    "check": "biome check --write",
+    "test": "vitest run --coverage",
+    "push": "clasp push",
+    "deploy": "clasp create-deployment",
+    "update": "dotenv cross-var \"clasp update-deployment $GAS_DEPLOYMENT_ID\"",
+    "preview:local": "vite preview",
+    "preview:web": "clasp open-web-app"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.4",
+    "@google/clasp": "^3.1.1",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@types/google-apps-script": "^2.0.7",
+    "@types/node": "^24.10.0",
+    "cpy-cli": "^6.0.0",
+    "rimraf": "^6.1.0",
+    "rolldown": "1.0.0-beta.47",
+    "rolldown-plugin-remove-export": "^0.1.3",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.8"
+  }
+}

package/dist/templates/html-js/rolldown.config.mjs.ejs

@@ -0,0 +1,29 @@
+import path from "node:path";
+import alias from "@rollup/plugin-alias";
+import { defineConfig } from "rolldown";
+import { removeExportPlugin } from "rolldown-plugin-remove-export";
+
+const outputFile = "index.js";
+
+export default defineConfig({
+	input: "src/main.js",
+	output: {
+		format: "esm",
+		file: `dist/${outputFile}`,
+	},
+	plugins: [
+		alias({
+			entries: [
+				{
+					find: "@",
+					replacement: path.resolve(import.meta.dirname, "src"),
+				},
+				{
+					find: "~",
+					replacement: path.resolve(import.meta.dirname),
+				},
+			],
+		}),
+		removeExportPlugin(outputFile),
+	],
+});

package/dist/templates/html-js/server/app.js.ejs

@@ -0,0 +1,27 @@
+export * from "./modules/hello";
+
+const SITE_TITLE = "<%= projectName %>";
+
+/**
+ * Procedure to handle GET requests when published as a web app
+ */
+export function doGet(e) {
+  const htmlTemplate = HtmlService.createTemplateFromFile("index");
+  const title = SITE_TITLE;
+  const userAddress = Session.getActiveUser().getEmail();
+
+  // set initial data for front-end
+  htmlTemplate.parameters = JSON.stringify({
+    ...e,
+    siteTitle: title,
+    userAddress: userAddress,
+  });
+
+  const htmlOutput = htmlTemplate.evaluate();
+  htmlOutput.setTitle(title);
+  htmlOutput.addMetaTag(
+    "viewport",
+    "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui",
+  );
+  return htmlOutput;
+}

package/dist/templates/html-js/server/modules/hello.js.ejs

@@ -0,0 +1,3 @@
+export function sayHello(name) {
+  return `Hello, ${name}!`;
+}

package/dist/templates/html-js/src/counter.js.ejs

@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0;
+  const setCounter = (count) => {
+    counter = count;
+    element.innerHTML = `count is ${counter}`;
+  };
+  element.addEventListener("click", () => setCounter(counter + 1));
+  setCounter(0);
+}

package/dist/templates/html-js/src/javascript.svg.ejs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>

package/dist/templates/html-js/src/main.js.ejs

@@ -0,0 +1,27 @@
+import "./style.css";
+import viteLogo from "/vite.svg";
+import { setupCounter } from "./counter.js";
+import javascriptLogo from "./javascript.svg";
+import { setupSayHello } from "./say.js";
+
+document.querySelector("#app").innerHTML = `
+  <div>
+    <a href="https://vite.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Vite!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+      <button id="say-hello" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite logo to learn more
+    </p>
+  </div>
+`;
+
+setupCounter(document.querySelector("#counter"));
+setupSayHello(document.querySelector("#say-hello"));

package/dist/templates/html-js/src/say.js.ejs

@@ -0,0 +1,23 @@
+export function setupSayHello(element) {
+  let message = "Click to say hello";
+  element.innerHTML = message;
+  const handleSayHello = () => {
+    if (!("google" in globalThis)) {
+      message = "Error. `google` is not defined";
+      element.innerHTML = message;
+      return;
+    }
+    google.script.run
+      .withSuccessHandler((result) => {
+        message = result;
+        element.innerHTML = message;
+      })
+      .withFailureHandler((error) => {
+        console.error(error);
+        message = "Error. Check the console.";
+        element.innerHTML = message;
+      })
+      .sayHello(userAddress);
+  };
+  element.addEventListener("click", handleSayHello);
+}

package/dist/templates/html-js/src/style.css.ejs

@@ -0,0 +1,96 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/dist/templates/html-js/tsconfig.json.ejs

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "allowJs": true,
+    "checkJs": false,
+    "types": ["node", "google-apps-script"],
+
+    // Aliases
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["./*"]
+    }
+  },
+  "include": ["src", "tests", "types", "./*.*js"]
+}

package/dist/templates/html-js/vitest.config.js.ejs

@@ -0,0 +1,11 @@
+import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    coverage: {
+      include: ["src/**/*"],
+    },
+  },
+  plugins: [tsconfigPaths()],
+});

package/dist/templates/react/.env.ejs

@@ -0,0 +1 @@
+GAS_DEPLOYMENT_ID=input your deployment id

package/dist/templates/{react-tsx → react}/README.md.ejs

@@ -6,5 +6,4 @@ Currently, these plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-- [@ciderjs/gasnuki](https://github.com/luthpg/gasnuki) for Type Definition Bridge
 - [rolldown](https://github.com/rolldown/rolldown) for transpile TypeScript files and bundle files

package/dist/templates/react/biome.json.ejs

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": [
+      "src/**/*",
+      "server/**/*",
+      "tests/**/*",
+      "types/**/*",
+      "./*.ts",
+      "./*.json"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  }
+}