@nzz/q-cli 1.8.0 → 1.9.0

package/skeletons/toolv2-skeleton/src/routes/option-availability.ts

@@ -0,0 +1,27 @@
+import Boom from '@hapi/boom';
+import Joi from 'joi';
+import type { AvailabilityResponseObject, WebPayload } from '@src/interfaces';
+import type { Request } from 'hapi__hapi';
+
+export default {
+  method: 'POST',
+  path: '/option-availability/{optionName}',
+  options: {
+    validate: {
+      payload: Joi.object(),
+    },
+  },
+  handler: function (request: Request): AvailabilityResponseObject | Boom.Boom {
+    const payload = request.payload as WebPayload;
+    const item = payload.item;
+    const optionName = request.params.optionName as string;
+
+    if (optionName === 'showSearch') {
+      return {
+        available: true,
+      };
+    }
+
+    return Boom.badRequest();
+  },
+};

package/skeletons/toolv2-skeleton/src/routes/rendering-info/web.ts

@@ -0,0 +1,150 @@
+import Ajv from 'ajv';
+import Boom from '@hapi/boom';
+import getExactPixelWidth from '@helpers/toolRuntimeConfig.js';
+import { readFileSync } from 'fs';
+import schemaString from '@rs/schema.json';
+import type { Request, ServerRoute } from '@hapi/hapi';
+import type {
+  AvailabilityResponseObject,
+  DisplayOptions,
+  [ToolName]Config,
+  [ToolName]ConfigOptions,
+  [ToolName]SvelteProperties,
+  RenderingInfo,
+  StyleHashMap,
+  ToolRuntimeConfig,
+  WebPayload,
+} from '@src/interfaces';
+
+const ajv = new Ajv();
+const validate = ajv.compile(schemaString);
+
+const route: ServerRoute = {
+  method: 'POST',
+  path: '/rendering-info/web',
+  options: {
+    validate: {
+      options: {
+        allowUnknown: true,
+      },
+      payload: async payload => {
+        const payloadTyped = payload as WebPayload;
+        const item = payloadTyped.item;
+        const toolRuntimeConfig = payloadTyped.toolRuntimeConfig;
+
+        if (typeof payloadTyped !== 'object' || typeof item !== 'object' || typeof toolRuntimeConfig !== 'object') {
+          throw Boom.badRequest('The given payload for this route is not correct.');
+        }
+
+        if (await validate(item)) {
+          return item;
+        } else {
+          throw Boom.badRequest(JSON.stringify(validate.errors));
+        }
+      },
+    },
+  },
+  handler: function (request: Request) {
+    const id = createId(request);
+    let qtableCompiledScript = '';
+    let styleHashMap: StyleHashMap | null = null;
+
+    try {
+      qtableCompiledScript = readFileSync('dist/[Tool-name].js', {
+        encoding: 'utf-8',
+      });
+    } catch (e) {
+      console.log('Failed reading compiled [Tool-name] code - ', e);
+    }
+
+    try {
+      const rawString = readFileSync('dist/styles/hashMap.json', {
+        encoding: 'utf-8',
+      });
+
+      styleHashMap = JSON.parse(rawString) as StyleHashMap;
+    } catch (e) {
+      console.log('Failed reading compiled style hashmap - ', e);
+    }
+
+    const payload = request.orig.payload as WebPayload;
+
+    // Extract table configurations.
+    const config = payload.item;
+
+    const toolRuntimeConfig = payload.toolRuntimeConfig || {};
+    const displayOptions = toolRuntimeConfig.displayOptions || ({} as DisplayOptions);
+    const options = config.options;
+
+    const width = getExactPixelWidth(toolRuntimeConfig);
+
+    const props: [ToolName]SvelteProperties = {
+      config,
+      displayOptions,
+      noInteraction: payload.toolRuntimeConfig.noInteraction || false,
+      id,
+      width,
+    };
+
+    const renderingInfo: RenderingInfo = {
+      polyfills: ['Promise'],
+      stylesheets: [],
+      scripts: [
+        {
+          content: qtableCompiledScript,
+        },
+        {
+          content: `
+          (function () {
+            var target = document.querySelector('#${id}_container');
+            target.innerHTML = "";
+            var props = ${JSON.stringify(props)};
+            new window.[tool_name]({
+              "target": target,
+              "props": {
+                props: props
+              }
+            })
+          })();`,
+        },
+      ],
+
+      markup: `<div id="${id}" class="[tool-name]-container" />`,
+    };
+
+    if (styleHashMap !== null) {
+      renderingInfo.stylesheets.push({
+        name: styleHashMap['main'],
+      });
+    }
+
+    return renderingInfo;
+  },
+};
+
+/**
+ *
+ * Example of code if you ever need to check if an option is avaible within the
+ * handler.
+ */
+// async function areMinibarsAvailable(request: Request, config: QTableConfig): Promise<boolean> {
+//   const response = await request.server.inject({
+//     url: '/option-availability/selectedColumnMinibar',
+//     method: 'POST',
+//     payload: { item: config },
+//   });
+
+//   const result = response.result as AvailabilityResponseObject | undefined;
+//   if (result) {
+//     return result.available;
+//   } else {
+//     console.log('Error receiving result for /option-availability/selectedColumnMinibar', result);
+//     return false;
+//   }
+// }
+
+function createId(request: Request): string {
+  return `[tool_name]_${request.query._id}_${Math.floor(Math.random() * 100000)}`.replace(/-/g, '');
+}
+
+export default route;

package/skeletons/toolv2-skeleton/src/routes/routes.ts

@@ -0,0 +1,21 @@
+import web from './rendering-info/web';
+import stylesheet from './stylesheet';
+import optionAvailability from './option-availability';
+import dynamicSchemas from './dynamic-schemas/index';
+import health from './health';
+import locales from './locales';
+import exampleNotification from './notifications/exampleNotification';
+import schema from './schema';
+
+const allRoutes = [
+  ...dynamicSchemas,
+  ...schema,
+  exampleNotification,
+  health,
+  locales,
+  optionAvailability,
+  stylesheet,
+  web,
+];
+
+export default allRoutes;

package/skeletons/toolv2-skeleton/src/routes/schema.ts

@@ -0,0 +1,21 @@
+import schema from '../../resources/schema.json';
+import displayOptionsSchema from '../../resources/display-options-schema.json';
+import type { Request, ResponseToolkit, ServerRoute } from '@hapi/hapi';
+
+const schemaRoute: ServerRoute = {
+  method: 'GET',
+  path: '/schema.json',
+  handler: function (request: Request, h: ResponseToolkit) {
+    return h.response(schema);
+  },
+};
+
+const displayOptionsRoute: ServerRoute = {
+  method: 'GET',
+  path: '/display-options-schema.json',
+  handler: function (request: Request, h: ResponseToolkit) {
+    return h.response(displayOptionsSchema);
+  },
+};
+
+export default [schemaRoute, displayOptionsRoute];

package/skeletons/toolv2-skeleton/src/routes/stylesheet.ts

@@ -0,0 +1,31 @@
+import path from 'path';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import type { Request, ResponseToolkit, ServerRoute } from '@hapi/hapi';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const route: ServerRoute = {
+  method: 'GET',
+  path: '/stylesheet/{filename}.{hash}.{extension}',
+  options: {
+    files: {
+      relativeTo: path.join(__dirname, '/styles/'),
+    },
+  },
+  handler: function (request: Request, h: ResponseToolkit) {
+    const params = request.params as Params;
+
+    return h
+      .file(`${params.filename}.${params.extension}`)
+      .type('text/css')
+      .header('cache-control', `max-age=${60 * 60 * 24 * 365}, immutable`); // 1 year
+  },
+};
+
+export default route;
+
+interface Params {
+  filename: string;
+  extension: string;
+}

package/skeletons/toolv2-skeleton/src/styles/main.scss

@@ -0,0 +1,6 @@
+/**
+ * Put all your styling here.
+ */
+.[tool-name] {
+  background: #0ff;
+}

package/skeletons/toolv2-skeleton/svelte.config.cjs

@@ -0,0 +1,6 @@
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+  sourceMap: false,
+  preprocess: sveltePreprocess(),
+};

package/skeletons/toolv2-skeleton/tasks/compileStyleFiles.cjs

@@ -0,0 +1,101 @@
+const fs = require('fs');
+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 = __dirname + '/../src/styles/';
+
+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 = stylesDir + `${name}.scss`;
+
+    const exists = fs.existsSync(filePath);
+    if (!exists) {
+      reject(`stylesheet not found ${filePath}`);
+      process.exit(1);
+    }
+
+    sass.render(
+      {
+        file: filePath,
+        includePaths: ['jspm_packages/github/', 'jspm_packages/npm/'],
+        outputStyle: 'compressed',
+      },
+      (err, sassResult) => {
+        if (err) {
+          reject(err);
+        } else {
+          postcss()
+            .use(postcssImport)
+            .use(autoprefixer)
+            .use(cssnano)
+            .process(sassResult.css, {
+              from: `${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() {
+  const basePath = 'dist/styles';
+  const fullPathHashmap = `${basePath}/hashMap.json`;
+
+  // Check if directory exists.
+  if (!fs.existsSync(basePath)) {
+    fs.mkdirSync(basePath);
+  }
+
+  const styleFiles = [
+    {
+      name: 'main',
+      content: await compileStylesheet('main'),
+    },
+  ];
+
+  styleFiles.map(file => {
+    const fullPathCss = `${basePath}/${file.name}.css`;
+    fs.writeFileSync(fullPathCss, file.content, { flag: 'w' });
+  });
+
+  writeHashmap(fullPathHashmap, styleFiles, 'css');
+}
+
+Promise.all([
+  buildStyles(),
+]).then(() => {
+    console.log('build complete');
+  })
+  .catch((err) => {
+    console.log(err);
+    process.exit(1);
+  });

package/skeletons/toolv2-skeleton/tests/e2e-tests.spec.ts

@@ -0,0 +1,158 @@
+/**
+ * @jest-environment jsdom
+ */
+
+// https://github.com/prisma/prisma/issues/8558#issuecomment-1102176746
+global.setImmediate = global.setImmediate || ((fn: () => unknown, ...args: []) => global.setTimeout(fn, 0, ...args));
+
+import Hapi from '@hapi/hapi';
+import Joi from 'joi';
+import { getAvailabilityResponse, getMarkup, getScripts, getStylesheets } from './helpers';
+import type { ExampleDynamicSchemeReturnPayload } from '@src/routes/dynamic-schemas/exampleDynamicSchema';
+import { create[ToolName]ConfigFixture } from '@src/helpers/fixture-generators';
+
+// We ignore because this will be built before you run the tests.
+// @ts-ignore
+import routes from '../dist/routes.js';
+
+let server: Hapi.Server;
+
+// Start the server before the tests.
+beforeAll(async () => {
+  try {
+    server = Hapi.server({
+      port: process.env.PORT || 3000,
+    });
+    server.validator(Joi);
+    server.route(routes);
+  } catch (err) {
+    expect(err).not.toBeDefined();
+  }
+});
+
+afterAll(async () => {
+  await server.stop({ timeout: 2000 });
+
+  // @ts-ignore.
+  server = null;
+});
+
+describe('basics', () => {
+  it('starts the server', () => {
+    expect(server.info.created).toEqual(expect.any(Number));
+  });
+
+  it('is healthy', async () => {
+    const response = await server.inject('/health');
+    expect(response.payload).toEqual('ok');
+  });
+});
+
+describe('rendering-info/web', () => {
+  it('renders the tool', async () => {
+    const config = create[ToolName]ConfigFixture();
+
+    const response = await server.inject({
+      url: '/rendering-info/web?_id=someid',
+      method: 'POST',
+      payload: {
+        item: config,
+        toolRuntimeConfig: {},
+      },
+    });
+
+    expect(response.statusCode).toEqual(200);
+
+    const markup = getMarkup(response.result);
+    const stylesheets = getStylesheets(response.result);
+    const scripts = getScripts(response.result);
+
+    const foundMarkupId = markup.includes('id="[tool_name]_someid_');
+    const foundMarkupClass = markup.includes('class="[tool-name]-container"');
+    expect(foundMarkupId).toBe(true);
+    expect(foundMarkupClass).toBe(true);
+
+    const foundStylesheet = stylesheets[0].name.startsWith('main.');
+    expect(foundStylesheet).toBe(true);
+
+    expect(scripts[0].content).toEqual(expect.any(String));
+  });
+
+  it('returns 400 if no payload given', async () => {
+    const response = await server.inject({
+      url: '/rendering-info/web?_id=someid',
+      method: 'POST',
+    });
+    expect(response.statusCode).toEqual(400);
+  });
+
+  it('returns 400 if no item given in payload', async () => {
+    const response = await server.inject({
+      url: '/rendering-info/web?_id=someid',
+      method: 'POST',
+      payload: {
+        item: {},
+      },
+    });
+    expect(response.statusCode).toEqual(400);
+  });
+
+  it('returns 400 if no toolRuntimeConfig given in payload', async () => {
+    const response = await server.inject({
+      url: '/rendering-info/web?_id=someid',
+      method: 'POST',
+      payload: {
+        toolRuntimeConfig: {},
+      },
+    });
+    expect(response.statusCode).toEqual(400);
+  });
+
+  it('returns 400 if invalid item given', async () => {
+    const response = await server.inject({
+      url: '/rendering-info/web?_id=someid',
+      method: 'POST',
+      payload: {
+        item: { foo: 'bar' },
+        toolRuntimeConfig: {},
+      },
+    });
+    expect(response.statusCode).toEqual(400);
+  });
+});
+
+describe('option availability endpoint example', () => {
+  it('returns true for option availability of example', async () => {
+    const request = {
+      method: 'POST',
+      url: '/option-availability/showSearch',
+      payload: {
+        item: {},
+      },
+    };
+    const response = await server.inject(request);
+
+    const available = getAvailabilityResponse(response.result);
+    expect(available).toEqual(true);
+  });
+
+});
+
+describe('example dynamic schema endpoint', () => {
+  it('returns correct response for exampleDynamicSchema', async () => {
+    const request = {
+      method: 'POST',
+      url: '/dynamic-schema/exampleDynamicSchema',
+      payload: {
+        item: {}
+      },
+    };
+
+    const response = await server.inject(request);
+
+    const result = response.result as ExampleDynamicSchemeReturnPayload;
+
+    expect(result.enum).toEqual(['one', 'two', 'three', 'four']);
+    expect(result['Q:options'].enum_titles).toEqual(['1', '2', '3', '4']);
+  });
+});

package/skeletons/toolv2-skeleton/tests/helpers.ts

@@ -0,0 +1,21 @@
+import type { AvailabilityResponseObject, RenderingInfo } from '@src/interfaces';
+
+export function getMarkup(result: object | undefined): string {
+  const casted = result as RenderingInfo;
+  return casted.markup;
+}
+
+export function getScripts(result: object | undefined): {content: string}[] {
+  const casted = result as RenderingInfo;
+  return casted.scripts;
+}
+
+export function getStylesheets(result: object | undefined): {name: string}[] {
+  const casted = result as RenderingInfo;
+  return casted.stylesheets;
+}
+
+export function getAvailabilityResponse(result: object | undefined): boolean {
+  const casted = result as AvailabilityResponseObject;
+  return casted.available;
+}

package/skeletons/toolv2-skeleton/tsconfig.json

@@ -0,0 +1,48 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "compilerOptions": {
+        "sourceMap": false,
+        "strict": true,
+        "baseUrl": ".",
+        "paths": {
+            "@src/*": [
+                "src/*"
+            ],
+            "@cps/*": [
+                "src/components/*"
+            ],
+            "@rs/*": [
+                "resources/*"
+            ],
+            "@helpers/*": [
+                "src/helpers/*"
+            ]
+        },
+        "allowSyntheticDefaultImports": true,
+        "declaration": false,
+        "esModuleInterop": true,
+        "module": "es2020",
+        "moduleResolution": "node",
+        "noImplicitAny": true,
+        "strictNullChecks": true,
+        "target": "ES2015",
+        "resolveJsonModule": true,
+        "types": [
+            "node",
+            "svelte",
+            "jest"
+        ],
+        "lib": [
+            "DOM"
+        ]
+    },
+    "ts-node": {
+        "esm": true,
+        "experimentalSpecifierResolution": true
+    },
+    "include": [
+        "src",
+        "resources",
+        "tests"
+    ]
+}

package/skeletons/et-utils-package-skeleton/rollup.config.js

@@ -1,17 +0,0 @@
-import dts from "rollup-plugin-dts";
-
-export default [
-  {
-    input: "dist/index.js",
-    output: {
-      file: "index.js",
-    },
-  },
-  {
-    input: "dist/index.d.ts",
-    output: {
-      file: "index.d.ts",
-    },
-    plugins: [dts()],
-  },
-];