@citolab/tspci 2.0.7 → 2.0.9

package/release-notes.md

@@ -1,14 +1,18 @@
-## 2.0.0
-
-- added customized development templates in plugins
-- removed tooltips development environment pci
-- fixed storing and comparing responses
-- fixed reload test and restoring state
-
-## 1.5.8
-
-- fixed command line args --target not picked up by cli 
-
-## 1.5.7 
-
+## 2.0.0
+
+- added customized development templates in plugins
+- removed tooltips development environment pci
+- fixed storing and comparing responses
+- fixed reload test and restoring state
+
+# 1.5.9
+
+- fixed broken images in readme
+
+## 1.5.8
+
+- fixed command line args --target not picked up by cli 
+
+## 1.5.7 
+
 Initial release

package/src/cli.js

@@ -1,143 +1,143 @@
-#!/usr/bin/env node
-import loadConfigFile from "rollup/dist/loadConfigFile.js";
-import { rollup, watch } from "rollup";
-import path from "path";
-import fs from "fs";
-
-const args = process.argv.slice(2);
-
-// PK: retreive dirname, most of the time automaticly inserted in es modules
-import { fileURLToPath } from "url";
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const PACKAGE_ROOT_PATH = process.cwd();
-const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist");
-const NODE_MODULES = path.join(process.cwd(), "node_modules");
-
-// https://rollupjs.org/guide/en/#programmatically-loading-a-config-file
-const watchBuild = (devServer = false, target = 'IMS') => {
-  const rollupFile = devServer ? "rollup.config.dev.js" : "rollup.config.js";
-
-  fs.rmSync(PACKAGE_DIST_PATH, { recursive: true, force: true });
-  !fs.existsSync(PACKAGE_DIST_PATH) && fs.mkdirSync(PACKAGE_DIST_PATH);
-
-  if (devServer) {
-    try {
-      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
-        fs.copyFile(
-          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
-          path.join(PACKAGE_DIST_PATH, "index.html"),
-          (err) => {
-            if (err) throw err;
-            console.log("using index.html found in src/index.html, copied to dist");
-          }
-        );
-      } else {
-        let fileToCopy;
-        if (target == 'IMS') {
-          fileToCopy = path.join(__dirname, `../public/index.html`)
-        } else {
-          fileToCopy = path.join(NODE_MODULES, `@citolab/tspci-${target}/public/index.html`);
-        }
-        fs.copyFile(fileToCopy, path.join(PACKAGE_DIST_PATH, "index.html"), (err) => {
-          if (err) throw err;
-          console.log("using index.html was copied to /dist folder pci");
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-  loadConfigFile(path.resolve(__dirname, rollupFile), {}).then(async ({ options, warnings }) => {
-    console.log(`We currently have ${warnings.count} warnings`);
-    warnings.flush();
-    const watcher = watch(options);
-    watcher.on("event", (event) => {
-      event.code == "START" && console.log("starting build");
-      event.code == "ERROR" && console.log("ERROR", event);
-    });
-    watcher.on("event", ({ result }) => {
-      if (result) {
-        result.close();
-      }
-    });
-    watcher.close();
-  });
-};
-
-const prodBuild = async () => {
-  fs.rmSync(path.join(PACKAGE_ROOT_PATH, "dist"), { recursive: true, force: true });
-  return loadConfigFile(path.resolve(__dirname, "rollup.config.prod.js"), {}).then(async ({ options, warnings }) => {
-    console.log(`We currently have ${warnings.count} warnings`);
-    warnings.flush();
-    for (const optionsObj of options) {
-      const bundle = await rollup(optionsObj);
-      await Promise.all(optionsObj.output.map(bundle.write));
-    }
-
-    // if supplying your own index.html, this should be copied to the dist folder
-    try {
-      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
-        fs.copyFile(
-          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
-          path.join(PACKAGE_DIST_PATH, "index.html"),
-          (err) => {
-            if (err) throw err;
-            console.log(`using ${PACKAGE_ROOT_PATH}, "src/index.html", copied to ${PACKAGE_DIST_PATH}`);
-          }
-        );
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  });
-};
-
-const run = async () => {
-  const help = args.indexOf("--help") >= 0 || args.indexOf("-h") >= 0;
-  const watch = args.indexOf("--watch") >= 0 || args.indexOf("-w") >= 0;
-  const dev = args.indexOf("--dev") >= 0 || args.indexOf("-d") >= 0;
-  const target = args.indexOf("--target") >= 0 || args.indexOf("-t") >= 0;
-
-  if (help) {
-    console.log("--help -h list these commands");
-    console.log("--build a one of build of your item");
-    console.log("--watch watch the files");
-    console.log("--target build a prod item and bundle for platform");
-    return;
-  }
-
-  if (watch) {
-    watchBuild(false);
-    return;
-  }
-
-  if (dev) {
-    const devIndex = args.indexOf("--dev");
-    if (args.length <= devIndex + 1) {
-      console.error("Missing dev target name. Using IMS template");
-      watchBuild(true);
-    } else {
-      const target = args[devIndex + 1];
-      watchBuild(true, target);
-    }
-    return;
-  }
-
-  prodBuild().then(() => {
-    if (target) {
-      const targetIndex = args.indexOf("--target");
-      if (args.length <= targetIndex + 1) {
-        console.error("Missing target name. Use tspci --target target");
-      }
-      const targetname = args[targetIndex + 1];
-      const scriptFile = path.join(NODE_MODULES, `@citolab\\tspci-${targetname}\\src\\createPackage.mjs`);
-      import(`file:///${scriptFile}`).then((script) => {
-        script.bundle();
-      });
-    }
-  });
-};
-
-run();
+#!/usr/bin/env node
+import loadConfigFile from "rollup/dist/loadConfigFile.js";
+import { rollup, watch } from "rollup";
+import path from "path";
+import fs from "fs";
+
+const args = process.argv.slice(2);
+
+// PK: retreive dirname, most of the time automaticly inserted in es modules
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PACKAGE_ROOT_PATH = process.cwd();
+const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist");
+const NODE_MODULES = path.join(process.cwd(), "node_modules");
+
+// https://rollupjs.org/guide/en/#programmatically-loading-a-config-file
+const watchBuild = (devServer = false, target = 'IMS') => {
+  const rollupFile = devServer ? "rollup.config.dev.js" : "rollup.config.js";
+
+  fs.rmSync(PACKAGE_DIST_PATH, { recursive: true, force: true });
+  !fs.existsSync(PACKAGE_DIST_PATH) && fs.mkdirSync(PACKAGE_DIST_PATH);
+
+  if (devServer) {
+    try {
+      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
+        fs.copyFile(
+          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
+          path.join(PACKAGE_DIST_PATH, "index.html"),
+          (err) => {
+            if (err) throw err;
+            console.log("using index.html found in src/index.html, copied to dist");
+          }
+        );
+      } else {
+        let fileToCopy;
+        if (target == 'IMS') {
+          fileToCopy = path.join(__dirname, `../public/index.html`)
+        } else {
+          fileToCopy = path.join(NODE_MODULES, `@citolab/tspci-${target}/public/index.html`);
+        }
+        fs.copyFile(fileToCopy, path.join(PACKAGE_DIST_PATH, "index.html"), (err) => {
+          if (err) throw err;
+          console.log("using index.html was copied to /dist folder pci");
+        });
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+  loadConfigFile(path.resolve(__dirname, rollupFile), {}).then(async ({ options, warnings }) => {
+    console.log(`We currently have ${warnings.count} warnings`);
+    warnings.flush();
+    const watcher = watch(options);
+    watcher.on("event", (event) => {
+      event.code == "START" && console.log("starting build");
+      event.code == "ERROR" && console.log("ERROR", event);
+    });
+    watcher.on("event", ({ result }) => {
+      if (result) {
+        result.close();
+      }
+    });
+    watcher.close();
+  });
+};
+
+const prodBuild = async () => {
+  fs.rmSync(path.join(PACKAGE_ROOT_PATH, "dist"), { recursive: true, force: true });
+  return loadConfigFile(path.resolve(__dirname, "rollup.config.prod.js"), {}).then(async ({ options, warnings }) => {
+    console.log(`We currently have ${warnings.count} warnings`);
+    warnings.flush();
+    for (const optionsObj of options) {
+      const bundle = await rollup(optionsObj);
+      await Promise.all(optionsObj.output.map(bundle.write));
+    }
+
+    // if supplying your own index.html, this should be copied to the dist folder
+    try {
+      if (fs.existsSync(path.join(PACKAGE_ROOT_PATH, "src/index.html"))) {
+        fs.copyFile(
+          path.join(PACKAGE_ROOT_PATH, "src/index.html"),
+          path.join(PACKAGE_DIST_PATH, "index.html"),
+          (err) => {
+            if (err) throw err;
+            console.log(`using ${PACKAGE_ROOT_PATH}, "src/index.html", copied to ${PACKAGE_DIST_PATH}`);
+          }
+        );
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  });
+};
+
+const run = async () => {
+  const help = args.indexOf("--help") >= 0 || args.indexOf("-h") >= 0;
+  const watch = args.indexOf("--watch") >= 0 || args.indexOf("-w") >= 0;
+  const dev = args.indexOf("--dev") >= 0 || args.indexOf("-d") >= 0;
+  const target = args.indexOf("--target") >= 0 || args.indexOf("-t") >= 0;
+
+  if (help) {
+    console.log("--help -h list these commands");
+    console.log("--build a one of build of your item");
+    console.log("--watch watch the files");
+    console.log("--target build a prod item and bundle for platform");
+    return;
+  }
+
+  if (watch) {
+    watchBuild(false);
+    return;
+  }
+
+  if (dev) {
+    const devIndex = args.indexOf("--dev");
+    if (args.length <= devIndex + 1) {
+      console.error("Missing dev target name. Using IMS template");
+      watchBuild(true);
+    } else {
+      const target = args[devIndex + 1];
+      watchBuild(true, target);
+    }
+    return;
+  }
+
+  prodBuild().then(() => {
+    if (target) {
+      const targetIndex = args.indexOf("--target");
+      if (args.length <= targetIndex + 1) {
+        console.error("Missing target name. Use tspci --target target");
+      }
+      const targetname = args[targetIndex + 1];
+      const scriptFile = path.join(NODE_MODULES, `@citolab\\tspci-${targetname}\\src\\createPackage.mjs`);
+      import(`file:///${scriptFile}`).then((script) => {
+        script.bundle();
+      });
+    }
+  });
+};
+
+run();

package/src/rollup-plugin-live-server.js

@@ -1,32 +1,32 @@
-// PK: made a pull request for this https://bitbucket.org/robhicks55/rollup-plugin-live-server/pull-requests/
-// WATCH argument added to live server, else this package could just be used
-// https://www.npmjs.com/package/rollup-plugin-live-server
-const ls = require("live-server");
-
-export function liveServer(options = {}) {
-  const directories = options.directories || [];
-  const params = {
-  file: options.file || 'index.html',
-  host: options.host || '0.0.0.0',
-  logLevel: options.logLevel || 2,
-  open: options.open || false,
-  port: options.port ||8080,
-  root: options.root || '.',
-  wait: options.wait || 200,
-  watch: options.watch || "",
-};
-if (options.mount) params.mount = options.mount;
-if (options.ignore) params.ignore = options.ignore;
-if (options.middleware) params.middleware = options.middleware;
-if (options.cert) params.cert = options.cert;
-if (options.key) params.key = options.key;
-if (options.passphrase) params.passphrase = options.passphrase;
-
-ls.start(params);
-  return {
-    name: 'liveServer',
-    generateBundle() {
-      console.log(`live-server running on ${params.port}`);
-    }
-  };
-}
+// PK: made a pull request for this https://bitbucket.org/robhicks55/rollup-plugin-live-server/pull-requests/
+// WATCH argument added to live server, else this package could just be used
+// https://www.npmjs.com/package/rollup-plugin-live-server
+const ls = require("live-server");
+
+export function liveServer(options = {}) {
+  const directories = options.directories || [];
+  const params = {
+  file: options.file || 'index.html',
+  host: options.host || '0.0.0.0',
+  logLevel: options.logLevel || 2,
+  open: options.open || false,
+  port: options.port ||8080,
+  root: options.root || '.',
+  wait: options.wait || 200,
+  watch: options.watch || "",
+};
+if (options.mount) params.mount = options.mount;
+if (options.ignore) params.ignore = options.ignore;
+if (options.middleware) params.middleware = options.middleware;
+if (options.cert) params.cert = options.cert;
+if (options.key) params.key = options.key;
+if (options.passphrase) params.passphrase = options.passphrase;
+
+ls.start(params);
+  return {
+    name: 'liveServer',
+    generateBundle() {
+      console.log(`live-server running on ${params.port}`);
+    }
+  };
+}

package/src/rollup.config.dev.js

@@ -1,28 +1,28 @@
-import watchAssets from 'rollup-plugin-watch-assets';
-// PK: not the official npm package, but a copy, needed watch functinoality
-import { liveServer } from "./rollup-plugin-live-server";
-
-import path from "path";
-
-const PACKAGE_ROOT_PATH = process.cwd()
-const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist")
-
-const livesrvr = liveServer({
-  root: path.join(PACKAGE_ROOT_PATH),
-  mount: [["/", "./dist"]],
-  open: true,
-  wait: 500,
-  watch: PACKAGE_DIST_PATH
-});
-
-const watchassets = watchAssets({ assets: ['./src/**/*.json',  './src/**/*.svg', './src/**/*.png'] })
-
-import rollupConfig from "./rollup.config";
-
-const newRollupConfig = {
-  ...rollupConfig,
-  output: rollupConfig.output.map((output) => ({ ...output, sourcemap: true })),
-  plugins: [...rollupConfig.plugins, livesrvr, watchassets],
-};
-
-export default newRollupConfig;
+import watchAssets from 'rollup-plugin-watch-assets';
+// PK: not the official npm package, but a copy, needed watch functinoality
+import { liveServer } from "./rollup-plugin-live-server";
+
+import path from "path";
+
+const PACKAGE_ROOT_PATH = process.cwd()
+const PACKAGE_DIST_PATH = path.join(PACKAGE_ROOT_PATH, "dist")
+
+const livesrvr = liveServer({
+  root: path.join(PACKAGE_ROOT_PATH),
+  mount: [["/", "./dist"]],
+  open: true,
+  wait: 500,
+  watch: PACKAGE_DIST_PATH
+});
+
+const watchassets = watchAssets({ assets: ['./src/**/*.json',  './src/**/*.svg', './src/**/*.png'] })
+
+import rollupConfig from "./rollup.config";
+
+const newRollupConfig = {
+  ...rollupConfig,
+  output: rollupConfig.output.map((output) => ({ ...output, sourcemap: true })),
+  plugins: [...rollupConfig.plugins, livesrvr, watchassets],
+};
+
+export default newRollupConfig;

package/src/rollup.config.js

@@ -1,83 +1,83 @@
-import resolve from "@rollup/plugin-node-resolve";
-import typescript from "@rollup/plugin-typescript";
-import alias from "@rollup/plugin-alias";
-import image from "@rollup/plugin-image";
-import replace from "@rollup/plugin-replace";
-import postcss from "rollup-plugin-postcss";
-import commonjs from "@rollup/plugin-commonjs"; // added this when added react-redux, gave an ' 'default' is not exported by node_modules/prop-types/index.js'
-import json from "@rollup/plugin-json";
-
-// copy, builtins, globals and litTailwind were added for use in simple bundle tool to make qti players
-import copy from "rollup-plugin-copy";  // copying assets to the assets folder in dist ( not for PCI, those assets are bundled )
-import builtins from 'rollup-plugin-node-builtins'; // was fix for including pixi for QTI component development, see: https://github.com/rollup/rollup/issues/3230#issuecomment-585416594
-import globals from 'rollup-plugin-node-globals'; // was fix for including pixi for QTI component development, see:  https://github.com/rollup/rollup/issues/3230#issuecomment-585416594
-// import litTailwind from "rollup-plugin-lit-tailwindcss3"; // Qti development, custom components can include tailwind classes
-
-import fs from "fs";
-import path from "path";
-
-const PACKAGE_ROOT_PATH = process.cwd();
-const pkg = JSON.parse(fs.readFileSync(path.join(PACKAGE_ROOT_PATH, "package.json"), "utf-8"));
-
-export default {
-  input: [`${pkg.source}`],
-  external: ["qtiCustomInteractionContext"],
-  watch: {
-    include: "./src/**", // fixme: watch these files, does not support watching the css
-    clearScreen: false, // clears the bash log before running
-  },
-  output: [
-    {
-      name: `${pkg.name}`,
-      file: `${pkg.main}`,
-      format: "umd",
-      sourcemap: true,
-    },
-  ],
-  plugins: [
-    globals(),
-    builtins(),
-    alias({
-      // When using third party react libraries, alias them to preact
-      entries: [
-        { find: "qtiCustomInteractionContext", replacement: "./qtiShim" },
-        { find: "react", replacement: "preact/compat" },
-        { find: "react-dom/test-utils", replacement: "preact/test-utils" },
-        { find: "react-dom", replacement: "preact/compat" },
-        { find: "react/jsx-runtime", replacement: "preact/jsx-runtime" },
-      ],
-    }),
-    replace({
-      values: {
-        "process.env.NODE_ENV": "false", // added this when bundling gave an 'process is not defined' error
-      },
-    }),
-    resolve({
-      ignoreGlobal: false,
-      include: ["node_modules/**"],
-      dedupe: ["preact"],
-      browser: true
-    }),
-    commonjs({ transformMixedEsModules: true }), // preact was imported twice, with require (unistore/preact) and with import (our import), which resulted in 2 preacts in our project
-    json(), // used to import config.json
-    typescript({
-      tsconfig: `${PACKAGE_ROOT_PATH}/tsconfig.json`,
-      declarationDir: `${PACKAGE_ROOT_PATH}/dist`
-    }),
-    // litTailwind({
-    //   include: "src/components/**/*.ts",
-    // }),
-    postcss({
-      extract: false, // not extracting embeds the js in the build, which is what we need for shipping it
-      modules: false, // tried modules at first, could work, but not with html in the qti file
-      inject: false, // does not inject the imported styles in the head
-      extensions: [".css"],
-    }),
-    copy({
-      targets: [
-        { src: "src/assets", dest: "dist" }, // copy asses to dist folder
-      ],
-    }),
-    image(), // import images png/svg/gif/jpg and converts to inline code
-  ],
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import alias from "@rollup/plugin-alias";
+import image from "@rollup/plugin-image";
+import replace from "@rollup/plugin-replace";
+import postcss from "rollup-plugin-postcss";
+import commonjs from "@rollup/plugin-commonjs"; // added this when added react-redux, gave an ' 'default' is not exported by node_modules/prop-types/index.js'
+import json from "@rollup/plugin-json";
+
+// copy, builtins, globals and litTailwind were added for use in simple bundle tool to make qti players
+import copy from "rollup-plugin-copy";  // copying assets to the assets folder in dist ( not for PCI, those assets are bundled )
+import builtins from 'rollup-plugin-node-builtins'; // was fix for including pixi for QTI component development, see: https://github.com/rollup/rollup/issues/3230#issuecomment-585416594
+import globals from 'rollup-plugin-node-globals'; // was fix for including pixi for QTI component development, see:  https://github.com/rollup/rollup/issues/3230#issuecomment-585416594
+// import litTailwind from "rollup-plugin-lit-tailwindcss3"; // Qti development, custom components can include tailwind classes
+
+import fs from "fs";
+import path from "path";
+
+const PACKAGE_ROOT_PATH = process.cwd();
+const pkg = JSON.parse(fs.readFileSync(path.join(PACKAGE_ROOT_PATH, "package.json"), "utf-8"));
+
+export default {
+  input: [`${pkg.source}`],
+  external: ["qtiCustomInteractionContext"],
+  watch: {
+    include: "./src/**", // fixme: watch these files, does not support watching the css
+    clearScreen: false, // clears the bash log before running
+  },
+  output: [
+    {
+      name: `${pkg.name}`,
+      file: `${pkg.main}`,
+      format: "umd",
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    globals(),
+    builtins(),
+    alias({
+      // When using third party react libraries, alias them to preact
+      entries: [
+        { find: "qtiCustomInteractionContext", replacement: "./qtiShim" },
+        { find: "react", replacement: "preact/compat" },
+        { find: "react-dom/test-utils", replacement: "preact/test-utils" },
+        { find: "react-dom", replacement: "preact/compat" },
+        { find: "react/jsx-runtime", replacement: "preact/jsx-runtime" },
+      ],
+    }),
+    replace({
+      values: {
+        "process.env.NODE_ENV": "false", // added this when bundling gave an 'process is not defined' error
+      },
+    }),
+    resolve({
+      ignoreGlobal: false,
+      include: ["node_modules/**"],
+      dedupe: ["preact"],
+      browser: true
+    }),
+    commonjs({ transformMixedEsModules: true }), // preact was imported twice, with require (unistore/preact) and with import (our import), which resulted in 2 preacts in our project
+    json(), // used to import config.json
+    typescript({
+      tsconfig: `${PACKAGE_ROOT_PATH}/tsconfig.json`,
+      declarationDir: `${PACKAGE_ROOT_PATH}/dist`
+    }),
+    // litTailwind({
+    //   include: "src/components/**/*.ts",
+    // }),
+    postcss({
+      extract: false, // not extracting embeds the js in the build, which is what we need for shipping it
+      modules: false, // tried modules at first, could work, but not with html in the qti file
+      inject: false, // does not inject the imported styles in the head
+      extensions: [".css"],
+    }),
+    copy({
+      targets: [
+        { src: "src/assets", dest: "dist" }, // copy asses to dist folder
+      ],
+    }),
+    image(), // import images png/svg/gif/jpg and converts to inline code
+  ],
 };

package/src/rollup.config.prod.js

@@ -1,10 +1,10 @@
-import { terser } from 'rollup-plugin-terser'
-import rollupConfig from "./rollup.config";
-
-const newRollupConfig = { 
-  ...rollupConfig, 
-  output: rollupConfig.output.map((output) => ({ ...output, sourcemap: false })),
-  plugins: [...rollupConfig.plugins, terser()],
-};
-
-export default newRollupConfig;
+import { terser } from 'rollup-plugin-terser'
+import rollupConfig from "./rollup.config";
+
+const newRollupConfig = { 
+  ...rollupConfig, 
+  output: rollupConfig.output.map((output) => ({ ...output, sourcemap: false })),
+  plugins: [...rollupConfig.plugins, terser()],
+};
+
+export default newRollupConfig;