@m2c2kit/cli 0.1.0

package/dist/cli.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+// https://github.com/yargs/yargs/issues/1854#issuecomment-792354121
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import fs from "fs";
+import path from "path";
+import handlebars from "handlebars";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { spawn } from "child_process";
+const packageHomeFolderPath = dirname(fileURLToPath(import.meta.url));
+const yarg = yargs(hideBin(process.argv));
+const argv = yarg
+    .command("new <name>", "create a new m2c2kit app", (yarg) => {
+    yarg.positional("name", {
+        describe: "name of new app",
+        type: "string",
+    });
+}, (argv) => {
+    const appName = argv["name"];
+    const newFolderPath = path.join(path.resolve(), appName);
+    if (fs.existsSync(newFolderPath)) {
+        console.log(`error: folder ${newFolderPath} already exists. please remove this folder and try again.`);
+        yarg.exit(1, new Error("path exists"));
+    }
+    fs.mkdirSync(newFolderPath);
+    fs.mkdirSync(path.join(newFolderPath, "src"));
+    fs.mkdirSync(path.join(newFolderPath, ".vscode"));
+    function applyValuesToTemplate(templateFilePath, contents) {
+        const templateContents = fs.readFileSync(templateFilePath).toString();
+        const template = handlebars.compile(templateContents);
+        return template(contents);
+    }
+    const templateFolderPath = path.join(packageHomeFolderPath, "templates");
+    const templates = [
+        {
+            templateFilePath: path.join(templateFolderPath, "package.json.handlebars"),
+            destinationFilePath: path.join(newFolderPath, "package.json"),
+        },
+        {
+            templateFilePath: path.join(templateFolderPath, "rollup.config.js.handlebars"),
+            destinationFilePath: path.join(newFolderPath, "rollup.config.js"),
+        },
+        {
+            templateFilePath: path.join(templateFolderPath, "tsconfig.json.handlebars"),
+            destinationFilePath: path.join(newFolderPath, "tsconfig.json"),
+        },
+        {
+            templateFilePath: path.join(templateFolderPath, "README.md.handlebars"),
+            destinationFilePath: path.join(newFolderPath, "README.md"),
+        },
+        {
+            templateFilePath: path.join(templateFolderPath, "starter.ts.handlebars"),
+            destinationFilePath: path.join(newFolderPath, "src", `${appName}.ts`),
+        },
+        {
+            templateFilePath: path.join(templateFolderPath, "index.html.handlebars"),
+            destinationFilePath: path.join(newFolderPath, "src", "index.html"),
+        },
+        {
+            templateFilePath: path.join(templateFolderPath, "launch.json.handlebars"),
+            destinationFilePath: path.join(newFolderPath, ".vscode", "launch.json"),
+        },
+    ];
+    templates.forEach((t) => {
+        const contents = applyValuesToTemplate(t.templateFilePath, {
+            appName: appName,
+        });
+        fs.writeFileSync(t.destinationFilePath, contents);
+        console.log(`CREATE ${t.destinationFilePath} (${contents.length} bytes)`);
+    });
+    let npm;
+    if (process.platform === "win32") {
+        npm = spawn(`npm`, ["install"], { shell: true, cwd: newFolderPath });
+    }
+    else {
+        npm = spawn(`npm`, ["install"], { cwd: newFolderPath });
+    }
+    npm.stdout.on("data", (data) => {
+        console.log(data.toString());
+    });
+    npm.stderr.on("data", (data) => {
+        console.error(data.toString());
+    });
+    npm.on("exit", (code) => {
+        if (code !== 0) {
+            console.log(`error: npm install exited with code ${code}`);
+        }
+    });
+})
+    //.command("build", "compiles to output directory named dist/")
+    //.command("serve", "builds and serves app, rebuilding on files changes")
+    .demandCommand()
+    .showHelpOnFail(true).argv;

package/dist/templates/README.md.handlebars

@@ -0,0 +1,15 @@
+# {{appName}}
+
+This project was generated with the m2c2kit CLI.
+
+## Development server
+
+Run `npm run serve` from the command line for a development server. Browse to `http://localhost:3000/`. The app will automatically compile and reload when you change source files.
+
+## Debugging
+
+With the file `.vscode/launch.json`, the project has been configured for debugging with Visual Studio Code and Chrome. If the development server is running, debugging in Visual Studio Code is available by pressing `F5` or selecting Run --> Start Debugging
+
+## Build
+
+Run `npm run build` from the command line to build the project. Build artifacts will be stored in the `dist/` directory.

package/dist/templates/index.html.handlebars

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{{appName}}</title>
+    <style type="text/css">
+      body {
+        margin: 0;
+      }
+    </style>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body style="background: white">
+    <div
+      style="
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        width: 100vw;
+      "
+    >
+      <canvas style="height: 100vh; width: 100vw"></canvas>
+      <!-- If you don't want the game to start immediately, remove game.start()
+           from the code and call game.start() somehow else, such as with
+           the button shown below or a programmatic call -->
+      <!-- <button
+        style="position: absolute; bottom: 8px; left: 8px"
+        id="startButton"
+        onclick="{
+          document.getElementById('startButton').disabled = true;
+          window.game.start();
+        }"
+      >
+        Start
+      </button> -->
+    </div>
+    <script type="module" src="./{{appName}}.bundle.js"></script>
+  </body>
+</html>

package/dist/templates/launch.json.handlebars

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/build"
+    }
+  ]
+}

package/dist/templates/package.json.handlebars

@@ -0,0 +1,21 @@
+{
+  "name": "{{appName}}",
+  "version": "1.0.0",
+  "scripts": {
+    "serve": "rollup -c --watch --configServe",
+    "build": "rollup -c --configProd"
+  },
+  "private": true,
+  "dependencies": {
+    "@m2c2kit/core": "^0.1.0",
+    "typescript": "^4.5.2",
+    "rollup": "^2.60.2",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "rollup-plugin-shim": "^1.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-livereload": "^2.0.5"
+  }
+}

package/dist/templates/rollup.config.js.handlebars

@@ -0,0 +1,81 @@
+import typescript from "@rollup/plugin-typescript";
+import shim from "rollup-plugin-shim";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import copy from "rollup-plugin-copy";
+import serve from "rollup-plugin-serve";
+import livereload from "rollup-plugin-livereload";
+
+let sharedPlugins = [
+  // canvaskit-wasm references these node.js functions
+  // shim them to empty functions for browser usage
+  shim({
+    fs: `export function fs_empty_shim() { }`,
+    path: `export function path_empty_shim() { }`,
+  }),
+  nodeResolve(),
+  commonjs({
+    include: "node_modules/canvaskit-wasm/**",
+  }),
+];
+
+export default (commandLineArgs) => {
+
+  let outputFolder = "build";
+  if (commandLineArgs.configProd) {
+    outputFolder = "dist"
+  }
+
+  const finalConfig = [
+    {
+      input: "./src/{{appName}}.ts",
+      output: [
+        {
+          file: `./${outputFolder}/{{appName}}.bundle.js`,
+          format: "esm",
+          sourcemap: commandLineArgs.configServe && true,
+        },
+      ],
+      plugins: [
+        ...sharedPlugins,
+        typescript({
+          inlineSourceMap: commandLineArgs.configServe && true,
+          inlineSources: commandLineArgs.configServe && true,
+        }),
+        copy({
+          targets: [
+            // copy the wasm bundle out of node_modules so it can be served
+            {
+              src: "node_modules/canvaskit-wasm/bin/canvaskit.wasm",
+              dest: outputFolder,
+            },
+          ],
+          copyOnce: true,
+          hook: "writeBundle",
+        }),
+        copy({
+          targets: [
+            {
+              src: "src/index.html",
+              dest: outputFolder,
+            },
+          ],
+          copyOnce: false,
+          hook: "writeBundle",
+        }),
+        commandLineArgs.configServe &&
+        serve({
+          open: false,
+          verbose: true,
+          contentBase: [`./${outputFolder}`],
+          historyApiFallback: true,
+          host: "localhost",
+          port: 3000,
+        }),
+        commandLineArgs.configServe &&
+        livereload(),
+      ],
+    },
+  ];
+  return finalConfig;
+};

package/dist/templates/starter.ts.handlebars

@@ -0,0 +1,99 @@
+import {
+  WebColors,
+  Action,
+  Game,
+  Scene,
+  Rect,
+  Shape,
+  Sprite,
+  Point,
+  Label,
+} from "@m2c2kit/core";
+
+const game = new Game();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as unknown as any).game = game;
+
+game
+  .init({
+    showFps: true,
+    // set this color so we can see the boundaries of the game
+    bodyBackgroundColor: WebColors.Wheat,
+    // note: using 2:1 aspect ratio, because that is closer to modern phones
+    width: 400,
+    height: 800,
+    // set stretch to true if you want to fill the screen
+    stretch: false,
+    fontUrls: [
+      "https://storage.googleapis.com/skia-cdn/google-web-fonts/Roboto-Regular.ttf",
+    ],
+    // each svgImage below, you specify either a tag of an svg in the property "svgString" (as I do below)
+    // or you specify a URL to an svg in the property "url", such as url: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg'
+    svgImages: [
+      {
+        name: "star",
+        height: 60,
+        width: 60,
+        svgString:
+          '<svg xmlns="http://www.w3.org/2000/svg" width="304" height="290"> <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" style="fill:#00FF00;stroke:#0000FF;stroke-width:15;stroke-linejoin:round"/></svg>',
+      },
+    ],
+  })
+  .then(() => {
+    const s = new Scene({
+      backgroundColor: WebColors.SlateBlue,
+      name: "first-scene",
+    });
+    game.addScene(s);
+
+    const greeting = new Label({
+      text: "Hello, {{appName}}",
+      fontColor: WebColors.WhiteSmoke,
+      position: new Point(200, 200),
+    });
+    s.addChild(greeting);
+
+    const starImage = new Sprite({
+      imageName: "star",
+      position: new Point(200, 400),
+    });
+    s.addChild(starImage);
+
+    const rectangle = new Shape({
+      rect: new Rect({ width: 300, height: 50, x: 200, y: 700 }),
+      cornerRadius: 9,
+      fillColor: WebColors.RebeccaPurple,
+    });
+
+    const messageLabel = new Label({
+      text: "you tapped the bar!",
+      fontColor: WebColors.Yellow,
+      position: new Point(200, 600),
+    });
+    s.addChild(messageLabel);
+    messageLabel.hidden = true;
+
+    rectangle.isUserInteractionEnabled = true;
+    rectangle.onTap(() => {
+      console.log("you tapped it!");
+      rectangle.run(
+        Action.Sequence([
+          Action.Custom({
+            callback: () => {
+              messageLabel.hidden = false;
+            },
+          }),
+          Action.Wait({ duration: 500 }),
+          Action.Custom({
+            callback: () => {
+              messageLabel.hidden = true;
+            },
+          }),
+        ])
+      );
+    });
+
+    s.addChild(rectangle);
+
+    game.start("first-scene");
+  });

package/dist/templates/tsconfig.json.handlebars

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": [
+      "es6",
+      "dom",
+      "dom.iterable"
+    ],
+    "module": "es6",
+    "moduleResolution": "node",
+    "allowJs": true,    
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "dist",
+    "**/{{appName}}.bundle.js",
+    "rollup.config.js"
+  ]
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@m2c2kit/cli",
+  "version": "0.1.0",
+  "description": "m2c2kit command line interface",
+  "module": "dist/cli.js",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "bin": {
+    "m2": "./dist/cli.js"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run compile && npm run copy-files",
+    "compile": "tsc",
+    "clean": "rimraf dist/ && rimraf build/",
+    "copy-files": "copyfiles -f build/src/cli.js dist && copyfiles templates/* dist/"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "yargs": "^17.3.0",
+    "handlebars": "^4.7.7"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "typescript": "^4.5.2",
+    "copyfiles": "^2.4.1",
+    "yargs": "^17.3.0",    
+    "@types/node": "^16.11.12",
+    "@types/yargs": "^17.0.7"
+  }
+}