@m2c2kit/cli 0.1.11 → 0.3.3

package/dist/templates/tsconfig.json.handlebars

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@m2c2kit/cli",
-  "version": "0.1.11",
+  "version": "0.3.3",
   "description": "m2c2kit command line interface",
   "module": "dist/cli.js",
   "files": [
-    "dist"
+    "dist/**"
   ],
   "type": "module",
   "bin": {
@@ -16,29 +16,29 @@
   "scripts": {
     "build": "npm run clean && npm run compile && npm run copy-files && npm run write-dotenv",
     "compile": "tsc",
-    "clean": "rimraf dist/ && rimraf build/",
-    "copy-files": "copyfiles -f build/src/cli.js dist && copyfiles scripts/* templates/* fonts/**/* dist/",
+    "clean": "rimraf dist build/",
+    "copy-files": "cpy --flat build/src/*.js dist && cpy templates assets dist",
     "write-dotenv": "node write-dotenv.js"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "axios": "0.24.0",
-    "chalk": "5.0.1",
-    "conf": "10.1.1",
+    "axios": "1.2.4",
+    "chalk": "5.2.0",
+    "conf": "11.0.1",
     "form-data": "4.0.0",
     "handlebars": "4.7.7",
-    "ora": "6.1.0",
+    "ora": "6.3.0",
     "prompts": "2.4.2",
-    "yargs": "17.3.1"
+    "yargs": "17.7.1"
   },
   "devDependencies": {
-    "@types/node": "17.0.21",
-    "@types/prompts": "2.0.14",
-    "@types/yargs": "17.0.9",
-    "copyfiles": "2.4.1",
-    "rimraf": "3.0.2",
-    "tslib": "2.3.1",
-    "typescript": "4.6.2"
+    "@types/node": "18.15.11",
+    "@types/prompts": "2.4.4",
+    "@types/yargs": "17.0.24",
+    "cpy-cli": "4.2.0",
+    "rimraf": "5.0.0",
+    "tslib": "2.5.0",
+    "typescript": "5.0.4"
   }
 }

package/dist/scripts/post-install.mjs

@@ -1,27 +0,0 @@
-#!/usr/bin/env node
-import fs from "fs";
-import { resolve, basename } from "path";
-
-const { dependencies } = JSON.parse(fs.readFileSync("./package.json"));
-
-/** If this m2c2kit app uses surveys, then copy the required css
- * files from node_modules so they can be bundled */
-if (Object.keys(dependencies).includes("@m2c2kit/survey")) {
-  // does ./css folder exist? if not, create
-  if (!fs.existsSync("./css")) {
-    fs.mkdirSync("./css");
-  }
-
-  const cssDistDir = "./node_modules/@m2c2kit/survey/dist/css/";
-  const cssFiles = fs
-    .readdirSync(cssDistDir, {
-      withFileTypes: true,
-    })
-    .filter((dirent) => !dirent.isDirectory())
-    .map((dirent) => resolve(cssDistDir, dirent.name));
-
-  cssFiles.forEach((file) => {
-    const sourceContents = fs.readFileSync(file);
-    fs.writeFileSync(`./css/${basename(file)}`, sourceContents);
-  });
-}

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

@@ -1,97 +0,0 @@
-import typescript from "@rollup/plugin-typescript";
-import nodeResolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import shim from "rollup-plugin-shim";
-import copy from "rollup-plugin-copy";
-import serve from "rollup-plugin-serve";
-import livereload from "rollup-plugin-livereload";
-import del from "rollup-plugin-delete";
-
-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: [
-        commandLineArgs.configProd && del({ targets: [outputFolder] }),
-        ...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,
-            },
-            {
-              src: "fonts/*",
-              dest: `${outputFolder}/fonts`,
-            },
-            {
-              src: "img/*",
-              dest: `${outputFolder}/img`,
-            },
-            {
-              src: "css/*",
-              dest: `${outputFolder}/css`,
-            },
-          ],
-          copyOnce: false,
-          hook: "writeBundle",
-        }),
-        copy({
-          targets: [
-            {
-              src: "src/index.html",
-              dest: outputFolder,
-            },
-          ],
-          copyOnce: false,
-          hook: "writeBundle",
-        }),
-        commandLineArgs.configServe &&
-        serve({
-          // we can start development server and automatically open browser by running
-          // npm run serve -- --configOpen
-          open: commandLineArgs.configOpen && true,
-          verbose: true,
-          contentBase: [`./${outputFolder}`],
-          historyApiFallback: true,
-          host: "localhost",
-          port: 3000,
-        }),
-        commandLineArgs.configServe &&
-        livereload({ watch: "build", delay: 0 }),
-      ],
-    },
-  ];
-  return finalConfig;
-};

package/dist/templates/starter.ts.handlebars

@@ -1,426 +0,0 @@
-import {
-  Game,
-  Action,
-  Scene,
-  Shape,
-  Label,
-  WebColors,
-  LabelHorizontalAlignmentMode,
-  GameParameters,
-  GameOptions,
-  TrialSchema,
-  Session,
-  SessionLifecycleEvent,
-  ActivityDataEvent,
-  ActivityLifecycleEvent,
-  Sprite,
-  Timer,
-} from "@m2c2kit/core";
-import { Button, Instructions } from "@m2c2kit/addons";
-
-class {{className}} extends Game {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor() {
-    /**
-     * These are configurable game parameters and their defaults.
-     * At run time, they can be changed with the setParameters() method.
-     */    
-    const defaultParameters: GameParameters = {
-      ReadyTime: {
-        value: 1000,
-        description:
-          "How long the 'get ready' message scene is shown, milliseconds",
-      },
-      TrialNum: { value: 3, description: "How many trials to run" },
-    };
-
-    /**
-     * This describes all the data that will be generated by the assessment.
-     * At runtime, when a trial completes, the data will be returned to the
-     * session with a callback, along with this schema transformed into
-     * JSON Schema Draft-07 format.
-     */    
-    const demoTrialSchema: TrialSchema = {
-      colorChosen: { type: "string", description: "the color that was picked" },
-      correct: { type: "boolean", description: "was the answer correct?" },
-      responseTime: { type: "number", description: "response time (ms) to choose shape" }
-    };
-
-    const options: GameOptions = {
-      name: "{{appName}}",
-      version: "1.0.0",
-      uri: "https://your-repo-or-webpage-here",
-      shortDescription: "A brief couple sentence description.",
-      longDescription: "An extended, many-sentence description.",
-      showFps: false,
-      trialSchema: demoTrialSchema,
-      parameters: defaultParameters,
-      // You can set this color so we can see the boundaries of the game during development,
-      // but typically we would not set this, so it is commented out
-      // 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 on large windows
-      // (e.g., iPad, desktop browser)
-      stretch: false,
-      // Roboto is included by default. Leave fontUrls unchanged, unless you want to use different font
-      fontUrls: ["./fonts/roboto/Roboto-Regular.ttf"],
-      // for each image below, you specify either a tag of an svg in the property "svgString"
-      // or you specify a URL to an image in the property "url",
-      // such as url: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg'
-      images: [
-        {
-          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>',
-        },
-        {
-          name: "smiley",
-          height: 64,
-          width: 64,
-          svgString:
-            '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="451.451 -28.549 1657.098 1657.098" enable-background="new 451.451 -28.549 1657.098 1657.098" xml:space="preserve"><g><g><circle cx="992.682" cy="640.47" r="66.818"/></g><g><circle cx="1558.728" cy="640.47" r="66.818"/></g><g><path d="M1280,1600c-107.984,0-212.756-21.157-311.407-62.883c-95.268-40.295-180.819-97.973-254.279-171.432c-73.459-73.459-131.137-159.01-171.432-254.278C501.157,1012.757,480,907.984,480,800s21.157-212.756,62.883-311.407c40.295-95.268,97.973-180.819,171.432-254.279c73.46-73.459,159.011-131.137,254.279-171.432C1067.244,21.157,1172.016,0,1280,0s212.757,21.157,311.407,62.883c95.268,40.295,180.819,97.973,254.278,171.432c73.459,73.46,131.137,159.011,171.432,254.279C2058.843,587.244,2080,692.016,2080,800s-21.157,212.757-62.883,311.407c-40.295,95.268-97.973,180.819-171.432,254.278s-159.01,131.137-254.278,171.432C1492.757,1578.843,1387.984,1600,1280,1600z M1280,71.591c-401.646,0-728.409,326.763-728.409,728.409S878.354,1528.409,1280,1528.409S2008.409,1201.646,2008.409,800C2008.409,398.354,1681.646,71.591,1280,71.591z"/></g><g><path d="M1665.953,1071.004c-213.156,213.156-558.75,213.156-771.905,0c20.534-20.534,41.068-41.068,61.602-61.602c179.134,179.134,469.567,179.134,648.7,0C1624.884,1029.936,1645.418,1050.47,1665.953,1071.004z"/></g><g><path d="M1167.066,463.279c-96.31-96.31-252.459-96.31-348.768,0c16.971,16.971,33.941,33.941,50.912,50.912c68.192-68.192,178.753-68.192,246.945,0C1133.125,497.22,1150.096,480.249,1167.066,463.279z"/></g><g><path d="M1733.112,463.279c-96.31-96.31-252.459-96.31-348.768,0c16.971,16.971,33.941,33.941,50.912,50.912c68.192-68.192,178.753-68.192,246.945,0C1699.171,497.22,1716.142,480.249,1733.112,463.279z"/></g></g></svg>',
-        },
-      ],
-    };
-
-    super(options);
-  }
-
-  init(): void {
-    // just for convenience, alias the variable game to "this"
-    // (even though eslint doesn't like it)
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const game = this;
-
-    const instructionsScenes = Instructions.Create({
-      sceneNamePrefix: "instructions",
-      backgroundColor: WebColors.White,
-      nextButtonBackgroundColor: WebColors.Black,
-      backButtonBackgroundColor: WebColors.Black,
-      instructionScenes: [
-        {
-          title: "{{appName}} Demo",
-          text: "For this task, you will click the red rectangle. Open the developer console to see the trial data and other output.",
-          textFontSize: 24,
-          titleFontSize: 30,
-          image: "smiley",
-          imageMarginBottom: 24
-        },
-        {
-          title: "{{appName}} Demo",
-          text: "Press START to begin!",
-          textFontSize: 24,
-          titleFontSize: 30,
-          textAlignmentMode: LabelHorizontalAlignmentMode.center,
-          textVerticalBias: 0.25,
-          nextButtonText: "START",
-          nextButtonBackgroundColor: WebColors.Green,
-        },
-      ],
-      // this is the name of the scene to go to after the last instructions scene
-      postInstructionsScene: "getReady",
-    });
-    game.addScenes(instructionsScenes);
-
-    const getReadyScene = new Scene({
-      // Because this is the scene after the instructions, we must give
-      // it a name and provide it to postInstructionsScene, above
-      name: "getReady",
-      backgroundColor: WebColors.White,
-    });
-    game.addScene(getReadyScene);
-
-    const getReadyMessage = new Label({
-      text: "Get Ready",
-      fontSize: 24,
-      position: { x: 200, y: 400 },
-    });
-    getReadyScene.addChild(getReadyMessage);
-
-    // example of how to use an image. The image must be previously loaded
-    const starSprite = new Sprite({
-      imageName: "star",
-      position: { x: 200, y: 500 },
-    });
-    getReadyScene.addChild(starSprite);
-
-    // getReadyScene.onSetup() has a callback that is executed each time this scene is shown
-    getReadyScene.onSetup(() => {
-      getReadyScene.run(
-        Action.Sequence([
-          // Get the wait duration from the default game parameters, defined above
-          Action.Wait({ duration: game.getParameter("ReadyTime") }),
-          Action.Custom({
-            callback: () => {
-              game.presentScene(chooseRectangleScene);
-            },
-          }),
-        ])
-      );
-    });
-
-    // these entities before the onSetup() can be defined outside of a onSetup()
-    // because they exist through multiple trials
-    // Their position and how they respond to interactions may differ across trials,
-    // and that logic will be written within a onSetup()
-    const chooseRectangleScene = new Scene({
-      backgroundColor: WebColors.LightGray,
-    });
-    game.addScene(chooseRectangleScene);
-    const redRect = new Shape({
-      rect: { width: 150, height: 100 },
-      fillColor: WebColors.Red,
-    });
-    chooseRectangleScene.addChild(redRect);
-    const blueRect = new Shape({
-      rect: { width: 150, height: 100 },
-      fillColor: WebColors.Blue,
-    });
-    chooseRectangleScene.addChild(blueRect);
-    const correctMessage = new Label({
-      text: "CORRECT!",
-      position: { x: 200, y: 500 },
-    });
-
-    const chooseMessage = new Label({
-      text: "Choose the red rectangle",
-      position: { x: 200, y: 200 },
-    });
-    chooseRectangleScene.addChild(chooseMessage);
-
-    correctMessage.hidden = true;
-    chooseRectangleScene.addChild(correctMessage);
-    const wrongMessage = new Label({
-      text: "WRONG!",
-      position: {x: 200, y: 500 },
-    });
-
-    wrongMessage.hidden = true;
-    chooseRectangleScene.addChild(wrongMessage);
-
-    // chooseRectangleScene.onSetup() is passed a callback that is executed each
-    // time this scene is shown. Within onSetup(), We will randomly decide on
-    // what side the red rectangle is shown
-    chooseRectangleScene.onSetup(() => {
-      let responseTime = NaN;
-      let redOnLeft = true;
-      if (Math.random() > 0.5) {
-        redOnLeft = false;
-      }
-
-      if (redOnLeft) {
-        redRect.position = { x: 100, y: 300 };
-        blueRect.position = { x: 300, y: 300 };
-      } else {
-        redRect.position = { x: 300, y: 300 };
-        blueRect.position = { x: 100, y: 300 };;
-      }
-
-      // helper function to record the user's choice and
-      // decide if we are done
-      function recordUserInput(choseRedRect: boolean) {
-        game.addTrialData("responseTime", responseTime);
-        game.addTrialData("correct", choseRedRect);
-        if (choseRedRect) {
-          game.addTrialData("colorChosen", "red");
-        } else {
-          game.addTrialData("colorChosen", "blue");
-        }
-        game.trialComplete();
-        // have we finished the number of trials?
-        if (game.trialIndex < game.getParameter<number>("TrialNum")) {
-          game.presentScene(getReadyScene);
-        } else {
-          game.presentScene(endScene);
-        }
-      }
-
-      redRect.isUserInteractionEnabled = true;
-      redRect.onTapDown(() => {
-        redRect.run(
-          Action.Sequence([
-            Action.Custom({
-              callback: () => {
-                responseTime = Timer.elapsed("rt");
-                // once a choice is made, don't allow additional taps
-                redRect.isUserInteractionEnabled = false;
-                blueRect.isUserInteractionEnabled = false;
-              },
-            }),
-            // short animation to shrink and grow button
-            Action.Scale({ scale: 0.8, duration: 250 }),
-            Action.Scale({ scale: 1, duration: 250 }),
-            // Show the "CORRECT" message
-            Action.Custom({
-              callback: () => {
-                correctMessage.hidden = false;
-              },
-            }),
-            Action.Wait({ duration: 1000 }),
-            // Handle the logic of recording data, and deciding if we should
-            // do another trial in recordUserInput
-            Action.Custom({
-              callback: () => {
-                correctMessage.hidden = true;
-                recordUserInput(true);
-              },
-            }),
-          ])
-        );
-      });
-
-      blueRect.isUserInteractionEnabled = true;
-      blueRect.onTapDown(() => {
-        blueRect.run(
-          Action.Sequence([
-            Action.Custom({
-              callback: () => {
-                responseTime = Timer.elapsed("rt");        
-                redRect.isUserInteractionEnabled = false;
-                blueRect.isUserInteractionEnabled = false;
-              },
-            }),
-            Action.Scale({ scale: 0.8, duration: 250 }),
-            Action.Scale({ scale: 1, duration: 250 }),
-            Action.Custom({
-              callback: () => {
-                wrongMessage.hidden = false;
-              },
-            }),
-            Action.Wait({ duration: 1000 }),
-            Action.Custom({
-              callback: () => {
-                wrongMessage.hidden = true;
-                recordUserInput(false);
-              },
-            }),
-          ])
-        );
-      });
-    });
-
-    chooseRectangleScene.onAppear(() => {
-      Timer.removeAll();
-      Timer.start("rt");
-    });
-
-    const endScene = new Scene();
-    game.addScene(endScene);
-    const doneLabel = new Label({
-      text: `This will be reassigned in the onSetup() callback. If you see this, something went wrong!`,
-      position: { x: 200, y: 300},
-    });
-    endScene.addChild(doneLabel);
-
-    const startOverButton = new Button({
-      text: "Start over",
-      position: { x: 200, y: 600 },
-    });
-    startOverButton.isUserInteractionEnabled = true;
-    startOverButton.onTapDown(() => {
-      game.initData();
-      game.presentScene(getReadyScene);
-    });
-    endScene.addChild(startOverButton);
-
-    const exitButton = new Button({
-      text: "Exit",
-      position: { x: 200, y: 675 },
-    });
-    exitButton.isUserInteractionEnabled = true;
-    exitButton.onTapDown(() => {
-      // hide the start over button
-      startOverButton.hidden = true;
-      // don't allow repeated taps on exit button
-      exitButton.isUserInteractionEnabled = false;
-      game.end();
-    });
-    endScene.addChild(exitButton);
-
-    endScene.onSetup(() => {
-      doneLabel.text = `You did ${game.trialIndex} trials. You're done!`;
-    });
-
-    game.entryScene = "instructions-01";
-  }
-}
-
-const game1 = new {{className}}();
-// default was 3 trials; this is how we can specify a different value
-game1.setParameters({ TrialNum: 2 });
-
-const session = new Session({
-  activities: [game1],
-  sessionCallbacks: {
-    /**
-     * onSessionLifecycleChange() will be called on events such
-     * as when the session initialization is complete or when it
-     * ends.
-     *
-     * Once initialized, the session will automatically start,
-     * unless we're running in an Android WebView AND a manual start
-     * is desired.
-     */
-    onSessionLifecycleChange: (ev: SessionLifecycleEvent) => {
-      if (ev.initialized) {
-        session.start();
-      }
-      if (ev.ended) {
-        console.log("session ended");
-      }
-    },
-  },
-  activityCallbacks: {
-    /**
-     * onActivityDataCreate() is where you insert code to post data to an API
-     * or interop with a native function in the host app.
-     *
-     * newData is the data that was just generated by the completed trial
-     * data is all the data, cumulative of all trials, that have been generated.
-     *
-     * We separate out newData from data in case you want to alter the execution
-     * based on the most recent trial, e.g., maybe you want to stop after
-     * a certain user behavior or performance threshold in the just completed
-     * trial.
-     */
-    onActivityDataCreate: (ev: ActivityDataEvent) => {
-      console.log(`********** trial complete`);
-      console.log("newData: " + JSON.stringify(ev.newData));
-      console.log("newData schema: " + JSON.stringify(ev.newDataSchema));
-      console.log("data: " + JSON.stringify(ev.data));
-      console.log("data schema: " + JSON.stringify(ev.dataSchema));
-      console.log(
-        "activity parameters: " + JSON.stringify(ev.activityConfiguration)
-      );
-    },
-    /**
-     * onActivityLifecycleChange() notifies us when an activity, such
-     * as an assessment or a survey, has completed. Usually, however,
-     * we want to know when all the activities are done, so we'll
-     * look for the session ending via onSessionLifecycleChange
-     */
-    onActivityLifecycleChange: (ev: ActivityLifecycleEvent) => {
-      if (ev.ended) {
-        console.log(`ended activity ${ev.name}`);
-        if (session.nextActivity) {
-          session.advanceToNextActivity();
-        } else {
-          session.end();
-        }
-      }
-    },
-  },
-});
-
-/**
- * Make session also available on window in case we want to control
- * the session through another means, such as other javascript or
- * browser code, or the Android WebView loadUrl() method
- * */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(window as unknown as any).session = session;
-session.init();