@nzz/q-cli 1.5.4 → 1.6.0

package/skeletons/tool-skeleton/package.json

@@ -4,7 +4,10 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "rm -rf styles && mkdir styles && node tasks/build.js",
+    "build": "rollup -c",
+    "autobuild": "rollup -c -w",
+    "dev": "run-p autobuild start",
+    "start": "nodemon index.js",
     "test": "lab -a @hapi/code -c -P tests --verbose --leaks"
   },
   "author": "",
@@ -14,20 +17,29 @@
     "url": "https://github.com/github/tool-skeleton.git"
   },
   "dependencies": {
-    "@hapi/boom": "^9.1.1",
-    "@hapi/hapi": "^20.1.3",
-    "@hapi/inert": "^6.0.3",
-    "ajv": "^6.12.6",
-    "joi": "^17.4.0"
+    "@hapi/boom": "^9.1.4",
+    "@hapi/hapi": "^20.2.0",
+    "@hapi/inert": "^6.0.4",
+    "ajv": "^8.6.3",
+    "joi": "^17.4.2",
+    "svelte": "^3.44.2"
   },
   "devDependencies": {
     "@hapi/code": "^8.0.3",
-    "@hapi/lab": "^22.0.5",
-    "autoprefixer": "^10.2.5",
-    "cssnano": "^4.1.11",
+    "@hapi/lab": "^24.3.2",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "autoprefixer": "^10.4.0",
+    "cssnano": "^5.0.10",
     "glob": "^7.1.7",
-    "postcss": "^8.3.0",
-    "postcss-import": "^14.0.2",
-    "sass": "^1.34.0"
+    "nodemon": "^2.0.13",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.11",
+    "rollup": "^2.60.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.43.4"
   }
 }

package/skeletons/tool-skeleton/rollup.config.js

@@ -0,0 +1,75 @@
+import * as fs from "fs";
+import * as path from "path";
+import * as crypto from "crypto";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import svelte from "rollup-plugin-svelte";
+import { terser } from "rollup-plugin-terser";
+import livereload from "rollup-plugin-livereload";
+import scss from "rollup-plugin-scss";
+const sassConfig = require("./sass.config");
+
+const production = !process.env.ROLLUP_WATCH;
+const scriptsDir = path.join(__dirname, "/scripts_src/");
+const filename = "default";
+const scriptDirDefaultFileName = path.join(scriptsDir, `/${filename}.js`);
+
+function writeHashmap(hashmapPath, file, fileext) {
+  const hash = crypto.createHash("md5");
+  hash.update(file.content, { encoding: "utf8" });
+  file.hash = hash.digest("hex");
+
+  const hashMap = {};
+  hashMap[file.name] = `${file.name}.${file.hash.substring(0, 8)}.${fileext}`;
+  fs.writeFileSync(hashmapPath, JSON.stringify(hashMap));
+}
+
+function generateHashmap() {
+  return {
+    name: "generateHashmap",
+    async generateBundle(outputOptions, bundle, isWrite) {
+      const scriptsDir = "scripts";
+      // Create directory if not yet exist or recreate directory if it already exists
+      if (!fs.existsSync(scriptsDir)) {
+        fs.mkdirSync(scriptsDir);
+      } else {
+        fs.rmdirSync(scriptsDir, { recursive: true });
+        fs.mkdirSync(scriptsDir);
+      }
+      writeHashmap(
+        "scripts/hashMap.json",
+        {
+          name: filename,
+          content: bundle[`${filename}.js`].code,
+        },
+        "js"
+      );
+    },
+  };
+}
+
+export default {
+  input: scriptDirDefaultFileName,
+  output: {
+    format: "iife",
+    // TODO: Rename 'window._q_your_tool.YourTool' to 'window._q_<tool-name>.<ToolName>'
+    name: "window._q_your_tool.YourTool",
+    file: `scripts/${filename}.js`,
+  },
+  plugins: [
+    svelte(),
+    scss({ ...sassConfig.get(production, writeHashmap) }),
+    nodeResolve({ browser: true }),
+    commonjs(),
+    !production && livereload({ watch: ["scripts"], delay: 800 }),
+    production && terser(),
+    generateHashmap(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+  onwarn: function (warning, warn) {
+    if (warning.code === "CIRCULAR_DEPENDENCY") return;
+    warn(warning);
+  },
+};

package/skeletons/tool-skeleton/routes/fixtures/data.js

@@ -1,7 +1,6 @@
 const fixtureDataDirectory = "../../resources/fixtures/data";
 
 // provide every fixture data file present in ../../resources/fixtures/data
-// has to be in sync with files created in build task - see ../../tasks/build.js
 const fixtureData = [require(`${fixtureDataDirectory}/basic.json`)];
 
 module.exports = {
@@ -9,9 +8,8 @@ module.exports = {
   method: "GET",
   options: {
     tags: ["api"],
-    cors: true
   },
   handler: (request, h) => {
     return fixtureData;
-  }
+  },
 };

package/skeletons/tool-skeleton/routes/rendering-info/web.js

@@ -1,21 +1,32 @@
 const Boom = require("@hapi/boom");
 const fs = require("fs");
 const path = require("path");
+const Ajv = require("ajv");
 
+const staticViewsDir = path.join(__dirname, "/../../views/static/");
 const stylesDir = path.join(__dirname, "/../../styles/");
+const scriptsDir = path.join(__dirname, "../../scripts/");
+
+require("svelte/register");
+const staticTemplate = require(path.join(
+  staticViewsDir,
+  "/App.svelte"
+)).default;
+const styles = fs.readFileSync(path.join(stylesDir, "/default.css")).toString();
 const styleHashMap = require(path.join(stylesDir, "hashMap.json"));
+const scriptHashMap = require(path.join(scriptsDir, "hashMap.json"));
 
 // POSTed item will be validated against given schema
 // hence we fetch the JSON schema...
 const schemaString = JSON.parse(
   fs.readFileSync(path.join(__dirname, "../../resources/", "schema.json"), {
-    encoding: "utf-8"
+    encoding: "utf-8",
   })
 );
-const Ajv = require("ajv");
-const ajv = new Ajv();
 
+const ajv = new Ajv({ strict: false });
 const validate = ajv.compile(schemaString);
+
 function validateAgainstSchema(item, options) {
   if (validate(item)) {
     return item;
@@ -43,32 +54,44 @@ module.exports = {
   options: {
     validate: {
       options: {
-        allowUnknown: true
+        allowUnknown: true,
       },
-      payload: validatePayload
-    }
+      payload: validatePayload,
+    },
   },
-  handler: async function(request, h) {
-    const item = request.payload.item;
+  handler: async function (request, h) {
+    const toolRuntimeConfig = request.payload.toolRuntimeConfig;
+    const context = {
+      // TODO: Rename 'q_your_tool_' to 'q_<tool_name>_'
+      id: `q_your_tool_${toolRuntimeConfig.requestId}`,
+      displayOptions: toolRuntimeConfig.displayOptions || {},
+      item: request.payload.item,
+    };
+
+    const staticTemplateRender = staticTemplate.render(context);
 
     const renderingInfo = {
       polyfills: ["Promise"],
-      stylesheets: [
-        {
-          name: styleHashMap["default"]
-        }
-      ],
+      stylesheets: [{ content: styles }, { name: styleHashMap["default"] }],
       scripts: [
+        { name: scriptHashMap["default"] },
+        // TODO: Rename 'new window._q_your_tool.YourTool' to 'new window._q_<tool-name>.<ToolName>'
         {
-          content:
-            'var p = new Promise(function(resolve) { resolve(); }) p.then(function() { console.log ("tool-skeleton script executed")});'
-        }
+          content: `
+          (function () {
+            var target = document.querySelector('#${context.id}_container');
+            target.innerHTML = "";
+            var props = ${JSON.stringify(context)};
+            new window._q_your_tool.YourTool({
+              "target": target,
+              "props": props
+            })
+          })();`,
+        },
       ],
-      markup: `<h1>${item.title}</h1><h2>${
-        item.subtitle
-      }</h2><p>rendered by tool-skeleton`
+      markup: staticTemplateRender.html,
     };
 
     return renderingInfo;
-  }
+  },
 };

package/skeletons/tool-skeleton/routes/routes.js

@@ -4,5 +4,5 @@ module.exports = [
   require("./script.js"),
   require("./health.js"),
   require("./fixtures/data.js"),
-  require("./locales.js")
+  require("./locales.js"),
 ].concat(require("./schema.js"));

package/skeletons/tool-skeleton/routes/script.js

@@ -4,15 +4,14 @@ module.exports = {
   method: "GET",
   path: "/script/{filename}.{hash}.{extension}",
   options: {
-    cors: true,
     files: {
-      relativeTo: path.join(__dirname, "/../scripts/")
-    }
+      relativeTo: path.join(__dirname, "/../scripts/"),
+    },
   },
-  handler: function(request, h) {
+  handler: function (request, h) {
     return h
       .file(`${request.params.filename}.${request.params.extension}`)
       .type("text/javascript")
       .header("cache-control", `max-age=${60 * 60 * 24 * 365}, immutable`); // 1 year
-  }
+  },
 };

package/skeletons/tool-skeleton/routes/stylesheet.js

@@ -4,15 +4,14 @@ module.exports = {
   method: "GET",
   path: "/stylesheet/{filename}.{hash}.{extension}",
   options: {
-    cors: true,
     files: {
-      relativeTo: path.join(__dirname, "/../styles/")
-    }
+      relativeTo: path.join(__dirname, "/../styles/"),
+    },
   },
-  handler: function(request, h) {
+  handler: function (request, h) {
     return h
       .file(`${request.params.filename}.${request.params.extension}`)
       .type("text/css")
       .header("cache-control", `max-age=${60 * 60 * 24 * 365}, immutable`); // 1 year
-  }
+  },
 };

package/skeletons/tool-skeleton/sass.config.js

@@ -0,0 +1,66 @@
+const fs = require("fs");
+const path = require("path");
+const postcss = require("postcss");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+function createOutputCssFunction(writeHashmapFunction) {
+  const outputCssFunction = (styles, styleNodes) => {
+    const stylesDir = "styles";
+
+    if (!fs.existsSync(stylesDir)) {
+      fs.mkdirSync(stylesDir);
+    }
+
+    fs.writeFileSync(`styles/default.css`, styles);
+    writeHashmapFunction(
+      "styles/hashMap.json",
+      {
+        name: "default",
+        content: styles,
+      },
+      "css"
+    );
+  };
+
+  return outputCssFunction;
+}
+
+function getPostcssPlugins(isProduction) {
+  const postcssPlugins = [autoprefixer];
+
+  if (isProduction) {
+    postcssPlugins.push(cssnano);
+  }
+
+  return postcssPlugins;
+}
+
+function get(isProduction, writeHashmapFunction) {
+  const config = {
+    outputStyle: isProduction ? "compressed" : "expanded",
+    // Sourcemap generation (specifically writing the file to system) is currently not supported by rollup-plugin-sass (but soon!)
+    // See: https://github.com/thgh/rollup-plugin-scss/issues/7
+    // outFile: path.join(__dirname, "/styles/default.css"), // <- Uncomment after: https://github.com/thgh/rollup-plugin-scss/issues/7
+    sourceMap: !isProduction,
+    sourceMapEmbed: !isProduction, // Remove after: https://github.com/thgh/rollup-plugin-scss/issues/7
+    failOnError: !isProduction,
+    watch: [
+      path.join(__dirname, "/styles_src"),
+      path.join(__dirname, "/views"),
+    ],
+    processor: (css) =>
+      postcss(getPostcssPlugins(isProduction))
+        .process(css, {
+          from: path.join(__dirname, "/styles/default.css"),
+          to: path.join(__dirname, "/styles/default.css"),
+          map: isProduction ? false : { inline: true }, // Set to false after: https://github.com/thgh/rollup-plugin-scss/issues/7
+        })
+        .then((result) => result.css),
+    output: createOutputCssFunction(writeHashmapFunction),
+  };
+
+  return config;
+}
+
+module.exports = { get };

package/skeletons/tool-skeleton/scripts_src/default.js

@@ -0,0 +1,3 @@
+import YourTool from "./../views/dynamic/YourTool.svelte";
+import "./../styles_src/main.scss";
+export default YourTool;

package/skeletons/tool-skeleton/styles_src/_variables.scss

@@ -0,0 +1 @@
+$color: salmon;

package/skeletons/tool-skeleton/styles_src/main.scss

@@ -0,0 +1,2 @@
+@use "../views/static/App.scss";
+@use "../views/dynamic/YourTool.scss";

package/skeletons/tool-skeleton/test/e2e-tests.js

@@ -20,9 +20,7 @@ before(async () => {
   try {
     server = Hapi.server({
       port: process.env.PORT || 3000,
-      routes: {
-        cors: true,
-      },
+      routes: {},
     });
     server.validator(Joi);
     await server.register(require("@hapi/inert"));
@@ -103,7 +101,7 @@ lab.experiment("stylesheets endpoint", () => {
 });
 
 // all the fixtures render
-lab.experiment("all fixtures render", async () => {
+lab.experiment("all fixtures render", () => {
   const fixtureFiles = glob.sync(
     `${__dirname}/../resources/fixtures/data/*.json`
   );
@@ -143,7 +141,7 @@ lab.experiment("rendering-info", () => {
 });
 
 lab.experiment("assets", () => {
-  it("returnes stylesheet", async () => {
+  it("returns stylesheet", async () => {
     const fixture = fs.readFileSync(
       `${__dirname}/../resources/fixtures/data/basic.json`,
       { encoding: "utf-8" }
@@ -157,7 +155,7 @@ lab.experiment("assets", () => {
       },
     });
     const stylesheetRes = await server.inject(
-      `/stylesheet/${res.result.stylesheets[0].name}`
+      `/stylesheet/${res.result.stylesheets[1].name}`
     );
     expect(stylesheetRes.statusCode).to.be.equal(200);
   });

package/skeletons/tool-skeleton/views/dynamic/YourTool.scss

@@ -0,0 +1,5 @@
+@use "variables";
+
+.your-tool__is-working-label {
+  color: variables.$color !important; // Please refrain from using '!important' :)
+}

package/skeletons/tool-skeleton/views/dynamic/YourTool.svelte

@@ -0,0 +1,19 @@
+<script>
+  // TODO: Rename 'YourTool.svelte' to '<Tool-Name>.svelte' & change all references
+  let isWorkingLabel = "";
+  let i = 0;
+
+  function worksOnClick() {
+    i++;
+    isWorkingLabel = i < 5 ? "is working!" : "is still working!";
+  }
+</script>
+
+<!-- Client side code is written/imported inside this component (e.g. Client interaction components) -->
+<div class="s-font-title">
+  Client-Side code
+  <span class="your-tool__is-working-label">{isWorkingLabel}</span>
+</div>
+<button class="s-button s-button--small" on:click={worksOnClick}>
+  Click me!
+</button>

package/skeletons/tool-skeleton/views/static/App.scss

@@ -0,0 +1,5 @@
+@use "variables";
+
+h3 {
+  color: variables.$color !important; // Please refrain from using '!important' :)
+}

package/skeletons/tool-skeleton/views/static/App.svelte

@@ -0,0 +1,21 @@
+<script>
+  import Header from "./components/Header.svelte";
+  import Footer from "./components/Footer.svelte";
+
+  export let item;
+  export let id;
+  export let displayOptions;
+</script>
+
+<!-- Static code is written/imported inside 'q-item-container' (e.g. Header, Title components) -->
+<div class="q-item-container">
+  {#if !displayOptions.hideTitle}
+    <Header title={item.title} />
+    {#if item.subtitle}
+      <div class="s-q-item__subtitle s-font-note">{item.subtitle}</div>
+    {/if}
+  {/if}
+  <!-- TODO: Rename 'q-your-tool-container' to 'q-<tool-name>-container' & change all references -->
+  <div id="{id}_container" class="q-your-tool-container" />
+  <Footer notes={item.notes} sources={item.sources} acronym={item.acronym} />
+</div>

package/skeletons/tool-skeleton/views/static/components/Footer.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let notes;
+  export let sources;
+  export let acronym;
+</script>
+
+<div class="s-q-item__footer">
+  {#if notes}
+    <div class="s-q-item__footer__notes">{notes}</div>
+  {/if}
+  <div class="s-q-item__footer__details">
+    {#if sources && sources.length > 0}
+      <div class="s-q-item__footer__sources">
+        {#if sources.length > 1}Quellen:{:else}Quelle:{/if}
+        {#each sources as source, index}
+          {#if source.text !== ""}
+            {#if source.link && source.link.url && source.link.isValid}<a
+                href={source.link.url}
+                target="blank"
+                rel="noopener noreferrer">{source.text}</a
+              >{:else}{source.text}{/if}{#if index !== sources.length - 1 && sources[index + 1] !== ""},&nbsp;{/if}{/if}
+        {/each}
+      </div>
+    {/if}
+    {#if acronym}
+      <div class="s-q-item__footer__acronym">NZZ / {acronym}</div>
+    {:else}
+      <div class="s-q-item__footer__acronym">NZZ</div>
+    {/if}
+  </div>
+</div>

package/skeletons/tool-skeleton/views/static/components/Header.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let title;
+</script>
+
+<h3 class="s-q-item__title">
+  {title}
+</h3>

package/skeletons/custom-code-skeleton/src/main.js

@@ -1,10 +0,0 @@
-import App from "./App.svelte";
-
-const app = new App({
-  target: document.querySelector("#container"),
-  props: {
-    name: "custom-code-skeleton",
-  },
-});
-
-export default app;

package/skeletons/tool-skeleton/styles_src/default.scss

@@ -1,4 +0,0 @@
-$color: purple;
-h1 {
-  color: $color;
-}

package/skeletons/tool-skeleton/tasks/build.js

@@ -1,98 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const crypto = require("crypto");
-
-const sass = require("sass");
-const postcss = require("postcss");
-const postcssImport = require("postcss-import");
-const autoprefixer = require("autoprefixer");
-const cssnano = require("cssnano");
-
-const stylesDir = path.join(__dirname, "/../styles_src/");
-
-function writeHashmap(hashmapPath, files, fileext) {
-  const hashMap = {};
-  files
-    .map(file => {
-      const hash = crypto.createHash("md5");
-      hash.update(file.content, { encoding: "utf8" });
-      file.hash = hash.digest("hex");
-      return file;
-    })
-    .map(file => {
-      hashMap[file.name] = `${file.name}.${file.hash.substring(
-        0,
-        8
-      )}.${fileext}`;
-    });
-
-  fs.writeFileSync(hashmapPath, JSON.stringify(hashMap));
-}
-
-async function compileStylesheet(name) {
-  return new Promise((resolve, reject) => {
-    const filePath = path.join(stylesDir, `${name}.scss`);
-    fs.access(filePath, fs.constants.R_OK, err => {
-      if (err) {
-        reject(new Error(`stylesheet ${filePath} cannot be read`));
-        process.exit(1);
-      }
-      sass.render(
-        {
-          file: filePath,
-          outputStyle: "compressed"
-        },
-        (err, sassResult) => {
-          if (err) {
-            reject(err);
-          } else {
-            postcss()
-              .use(postcssImport)
-              .use(autoprefixer)
-              .use(cssnano)
-              .process(sassResult.css, {
-                from: path.join(stylesDir, `${name}.css`)
-              })
-              .then(prefixedResult => {
-                if (prefixedResult.warnings().length > 0) {
-                  console.log(`failed to compile stylesheet ${name}`);
-                  process.exit(1);
-                }
-                resolve(prefixedResult.css);
-              });
-          }
-        }
-      );
-    });
-  });
-}
-
-async function buildStyles() {
-  try {
-    // compile styles
-    const styleFiles = [
-      {
-        name: "default",
-        content: await compileStylesheet("default")
-      }
-    ];
-
-    styleFiles.map(file => {
-      fs.writeFileSync(`styles/${file.name}.css`, file.content);
-    });
-
-    writeHashmap("styles/hashMap.json", styleFiles, "css");
-  } catch (err) {
-    console.error(err);
-    process.exit(1);
-  }
-}
-
-Promise.all([buildStyles()])
-  .then(res => {
-    console.log("build complete");
-  })
-  .catch(err => {
-    console.error(err.message);
-    process.exit(1);
-  });