@appsemble/node-utils 0.20.44 → 0.21.0

package/server/routes/appRouter/bulmaHandler.js

@@ -0,0 +1,116 @@
+import { createRequire } from 'node:module';
+import { logger } from '@appsemble/node-utils';
+import { baseTheme } from '@appsemble/utils';
+import bulma from 'bulma/package.json' assert { type: 'json' };
+import { renderSync } from 'sass';
+import stripBom from 'strip-bom';
+const require = createRequire(import.meta.url);
+const bulmaPath = require.resolve('bulma/bulma.sass').replace(/\\/g, '/');
+const functionPath = require.resolve('bulma/sass/utilities/functions.sass').replace(/\\/g, '/');
+const checkRadioPath = require.resolve('bulma-checkradio/src/sass/index.sass').replace(/\\/g, '/');
+const bulmaSliderPath = require.resolve('bulma-slider/src/sass/index.sass').replace(/\\/g, '/');
+const bulmaSwitchPath = require.resolve('bulma-switch/src/sass/index.sass').replace(/\\/g, '/');
+function getQueryParameter(value) {
+    return Array.isArray(value) ? value[0] : value;
+}
+/**
+ * Process SASS styles based on given parameters.
+ *
+ * @param theme The theme object to turn into a SASS file.
+ * @returns SASS string containing the base Appsemble style augmented by user parameters.
+ */
+function processStyle(theme) {
+    const fontSource = theme.fontSource || baseTheme.font.source;
+    const fontFamily = theme.fontFamily || baseTheme.font.family;
+    let googleFontsImport = '';
+    if (fontSource === 'google') {
+        const googleFontsUrl = new URL('https://fonts.googleapis.com/css');
+        googleFontsUrl.searchParams.set('display', 'swap');
+        googleFontsUrl.searchParams.set('family', fontFamily);
+        googleFontsImport = `@import url(${googleFontsUrl});`;
+    }
+    return `
+    @charset "utf-8";
+    ${googleFontsImport}
+    $family-sans-serif: '${fontFamily}', sans-serif !default;
+    $primary: ${theme.primaryColor || baseTheme.primaryColor};
+    $link: ${theme.linkColor || baseTheme.linkColor};
+    $info: ${theme.infoColor || baseTheme.infoColor};
+    $success: ${theme.successColor || baseTheme.successColor};
+    $warning: ${theme.warningColor || baseTheme.warningColor};
+    $danger: ${theme.dangerColor || baseTheme.dangerColor};
+    $themeColor: ${theme.themeColor || baseTheme.themeColor};
+    $splashColor: ${theme.splashColor || baseTheme.splashColor};
+
+    @import "${functionPath}";
+    $themeColor-invert: findColorInvert($themeColor);
+    $splashColor-invert: findColorInvert($splashColor);
+
+    @import "${bulmaPath}";
+    @import "${checkRadioPath}";
+    @import "${bulmaSliderPath}";
+    @import "${bulmaSwitchPath}";
+    // Syntax: https://sass-lang.com/documentation/breaking-changes/css-vars
+    :root {
+      --primary-color: #{$primary};
+      --link-color: #{$link};
+      --success-color: #{$success};
+      --info-color: #{$info};
+      --warning-color: #{$warning};
+      --danger-color: #{$danger};
+      --theme-color: #{$themeColor};
+      --splash-color: #{$splashColor};
+      --primary-color-invert: #{$primary-invert};
+      --link-color-invert: #{$link-invert};
+      --success-color-invert: #{$success-invert};
+      --info-color-invert: #{$info-invert};
+      --warning-color-invert: #{$warning-invert};
+      --danger-color-invert: #{$danger-invert};
+      --theme-color-invert: #{$themeColor-invert};
+      --splash-color-invert: #{$splashColor-invert};
+    }`;
+}
+export function createBulmaHandler({ createTheme, getTheme }) {
+    return async (ctx) => {
+        const { query } = ctx;
+        const theme = {
+            bulmaVersion: bulma.version,
+            primaryColor: (getQueryParameter(query.primaryColor) || baseTheme.primaryColor).toLowerCase(),
+            linkColor: (getQueryParameter(query.linkColor) || baseTheme.linkColor).toLowerCase(),
+            successColor: (getQueryParameter(query.successColor) || baseTheme.successColor).toLowerCase(),
+            infoColor: (getQueryParameter(query.infoColor) || baseTheme.infoColor).toLowerCase(),
+            warningColor: (getQueryParameter(query.warningColor) || baseTheme.warningColor).toLowerCase(),
+            dangerColor: (getQueryParameter(query.dangerColor) || baseTheme.dangerColor).toLowerCase(),
+            themeColor: (getQueryParameter(query.themeColor) || baseTheme.themeColor).toLowerCase(),
+            splashColor: (getQueryParameter(query.splashColor) || baseTheme.splashColor).toLowerCase(),
+            fontFamily: getQueryParameter(query.fontFamily) || baseTheme.font.family,
+            fontSource: getQueryParameter(query.fontSource) || baseTheme.font.source,
+        };
+        const result = await getTheme({ theme });
+        let css = result === null || result === void 0 ? void 0 : result.css;
+        if (!css) {
+            css = stripBom(String(renderSync({
+                data: processStyle(theme),
+                outputStyle: 'compressed',
+                logger: {
+                    debug(message) {
+                        logger.silly(message);
+                    },
+                    warn(message, { deprecation }) {
+                        if (!deprecation) {
+                            logger.verbose(message);
+                        }
+                    },
+                },
+            }).css));
+        }
+        ctx.body = css;
+        ctx.type = 'text/css';
+        ctx.set('Cache-Control', 'max-age=31536000,immutable');
+        if (!result) {
+            // This is not awaited on purpose.
+            createTheme({ ...theme, css });
+        }
+    };
+}
+//# sourceMappingURL=bulmaHandler.js.map

package/server/routes/appRouter/cssHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Options } from '@appsemble/node-utils';
+import { type Middleware } from 'koa';
+export declare function createCssHandler(type: 'coreStyle' | 'sharedStyle', { getAppStyles }: Options): Middleware;

package/server/routes/appRouter/cssHandler.js

@@ -0,0 +1,12 @@
+import { notFound } from '@hapi/boom';
+export function createCssHandler(type, { getAppStyles }) {
+    return async (ctx) => {
+        const app = await getAppStyles({ context: ctx, query: { attributes: [type], raw: true } });
+        if (!app) {
+            throw notFound('App not found');
+        }
+        ctx.body = app[type];
+        ctx.type = 'css';
+    };
+}
+//# sourceMappingURL=cssHandler.js.map

package/server/routes/appRouter/iconHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Options } from '@appsemble/node-utils';
+import { type Middleware } from 'koa';
+export declare function createIconHandler({ getApp, getAppIcon, getDbUpdated }: Options): Middleware;

package/server/routes/appRouter/iconHandler.js

@@ -0,0 +1,23 @@
+import { serveIcon } from '@appsemble/node-utils';
+import { isEqual, parseISO } from 'date-fns';
+export function createIconHandler({ getApp, getAppIcon, getDbUpdated }) {
+    return async (ctx) => {
+        const { params: { size = 128 }, query: { maskable = false, updated }, } = ctx;
+        const app = await getApp({
+            context: ctx,
+            query: { where: { ...(updated ? { updated } : {}) } },
+        });
+        const dbUpdated = app ? await getDbUpdated({ app, maskable, context: ctx }) : false;
+        const appIcon = app ? await getAppIcon({ app, context: ctx }) : null;
+        await serveIcon(ctx, {
+            background: maskable ? app.iconBackground || '#ffffff' : undefined,
+            cache: dbUpdated ? isEqual(parseISO(updated), dbUpdated) : false,
+            fallback: 'mobile-alt-solid.png',
+            height: size && Number.parseInt(size),
+            icon: appIcon,
+            maskable: Boolean(maskable),
+            width: size && Number.parseInt(size),
+        });
+    };
+}
+//# sourceMappingURL=iconHandler.js.map

package/server/routes/appRouter/index.d.ts

@@ -0,0 +1,3 @@
+import { type Options } from '@appsemble/node-utils';
+import { type Middleware } from 'koa';
+export declare function createAppRouter(options: Options): Middleware;

package/server/routes/appRouter/index.js

@@ -0,0 +1,85 @@
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+import { tinyRouter } from '@appsemble/node-utils';
+import { noop, partialNormalized, partialSemver } from '@appsemble/utils';
+import faPkg from '@fortawesome/fontawesome-free/package.json' assert { type: 'json' };
+import mount from 'koa-mount';
+import serve from 'koa-static';
+import { createBlockAssetHandler } from './blockAssetHandler.js';
+import { createBlockCssHandler } from './blockCssHandler.js';
+import { createBulmaHandler } from './bulmaHandler.js';
+import { createCssHandler } from './cssHandler.js';
+import { createIconHandler } from './iconHandler.js';
+import { createIndexHandler } from './indexHandler.js';
+import { createManifestHandler } from './manifestHandler.js';
+import { createRobotsHandler } from './robotsHandler.js';
+import { createScreenshotHandler } from './screenshotHandler.js';
+import { createServiceWorkerHandler } from './serviceWorkerHandler.js';
+import { createStaticHandler } from './staticHandler.js';
+const require = createRequire(import.meta.url);
+const blockName = `(?<name>@${partialNormalized.source}/${partialNormalized.source})`;
+export function createAppRouter(options) {
+    return tinyRouter([
+        {
+            route: '/manifest.json',
+            get: createManifestHandler(options),
+        },
+        {
+            route: '/robots.txt',
+            get: createRobotsHandler(),
+        },
+        {
+            route: '/service-worker.js',
+            get: createServiceWorkerHandler(options),
+        },
+        {
+            route: /^\/icon-(?<size>\d+)\.png$/,
+            get: createIconHandler(options),
+        },
+        {
+            route: /^\/screenshots\/(?<id>\d+)\.(?<ext>[a-z]+)$/,
+            get: createScreenshotHandler(options),
+        },
+        {
+            route: new RegExp(`^/api/blocks/${blockName}/versions/(?<version>${partialSemver.source})/(?<filename>.+)$`),
+            get: createBlockAssetHandler(options),
+        },
+        {
+            route: /^\/bulma/,
+            get: createBulmaHandler(options),
+        },
+        {
+            route: /^\/fa\//,
+            get: mount(`/fa/${faPkg.version}`, serve(dirname(require.resolve('@fortawesome/fontawesome-free/package.json')))),
+        },
+        {
+            route: '/core.css',
+            get: createCssHandler('coreStyle', options),
+        },
+        {
+            route: '/shared.css',
+            get: createCssHandler('sharedStyle', options),
+        },
+        {
+            route: new RegExp(`^/${blockName}\\.css`),
+            get: createBlockCssHandler(options),
+        },
+        {
+            route: /(^|\/)\.well-known(\/|$)/,
+            any: noop,
+        },
+        {
+            route: '/index.html',
+            get: createIndexHandler(options),
+        },
+        {
+            route: /\.[a-z]\w*$/i,
+            any: createStaticHandler('app'),
+        },
+        {
+            route: /.*/,
+            get: createIndexHandler(options),
+        },
+    ]);
+}
+//# sourceMappingURL=index.js.map

package/server/routes/appRouter/indexHandler.d.ts

@@ -0,0 +1,5 @@
+import { type Middleware } from 'koa';
+import { type Options } from '../../types.js';
+export declare const bulmaURL: string;
+export declare const faURL: string;
+export declare function createIndexHandler({ createSettings, getApp, getAppDetails, getAppMessages, getAppUrl, getCsp, getHost, }: Options): Middleware;

package/server/routes/appRouter/indexHandler.js

@@ -0,0 +1,69 @@
+import { randomBytes } from 'node:crypto';
+import { createThemeURL, defaultLocale, getAppBlocks, mergeThemes } from '@appsemble/utils';
+import faPkg from '@fortawesome/fontawesome-free/package.json' assert { type: 'json' };
+import bulmaPkg from 'bulma/package.json' assert { type: 'json' };
+import { organizationBlocklist } from '../../../organizationBlocklist.js';
+import { makeCSP, render } from '../../../render.js';
+export const bulmaURL = `/bulma/${bulmaPkg.version}/bulma.min.css`;
+export const faURL = `/fa/${faPkg.version}/css/all.min.css`;
+export function createIndexHandler({ createSettings, getApp, getAppDetails, getAppMessages, getAppUrl, getCsp, getHost, }) {
+    return async (ctx) => {
+        var _a;
+        const { hostname, path } = ctx;
+        const host = getHost({ context: ctx });
+        const app = await getApp({ context: ctx });
+        if (!app) {
+            const { appPath, organizationId } = await getAppDetails({ context: ctx });
+            if (organizationId && !appPath) {
+                return ctx.redirect(organizationBlocklist.includes(organizationId)
+                    ? host
+                    : String(new URL(`/organizations/${organizationId}`, host)));
+            }
+            ctx.status = 404;
+            return render(ctx, 'app/error.html', {
+                bulmaURL,
+                faURL,
+                message: 'The app you are looking for could not be found.',
+            });
+        }
+        const appUrl = await getAppUrl({ app, context: ctx });
+        if (appUrl.hostname !== hostname) {
+            appUrl.pathname = path;
+            appUrl.search = ctx.querystring;
+            ctx.redirect(String(appUrl));
+            return;
+        }
+        const defaultLanguage = app.definition.defaultLanguage || defaultLocale;
+        const appMessages = await getAppMessages({ app, context: ctx });
+        const languages = [
+            ...new Set([...appMessages.map(({ language }) => language), defaultLanguage]),
+        ].sort();
+        const identifiableBlocks = getAppBlocks(app.definition);
+        const [settingsHash, settings] = await createSettings({
+            context: ctx,
+            app,
+            host,
+            hostname,
+            identifiableBlocks,
+            languages,
+        });
+        const nonce = randomBytes(16).toString('base64');
+        const csp = getCsp({ app, settingsHash, hostname, host, nonce });
+        ctx.set('Content-Security-Policy', makeCSP(csp));
+        const updated = app.$updated ? new Date(app.$updated) : new Date();
+        return render(ctx, 'app/index.html', {
+            app,
+            appUrl: String(appUrl),
+            host,
+            locale: defaultLanguage,
+            locales: languages.filter((lang) => lang !== defaultLanguage),
+            bulmaURL: createThemeURL(mergeThemes(app.definition.theme)),
+            faURL,
+            nonce,
+            settings,
+            themeColor: ((_a = app.definition.theme) === null || _a === void 0 ? void 0 : _a.themeColor) || '#ffffff',
+            appUpdated: updated.toISOString(),
+        });
+    };
+}
+//# sourceMappingURL=indexHandler.js.map

package/server/routes/appRouter/manifestHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Options } from '@appsemble/node-utils';
+import { type Middleware } from 'koa';
+export declare function createManifestHandler({ getApp, getAppScreenshots }: Options): Middleware;

package/server/routes/appRouter/manifestHandler.js

@@ -0,0 +1,47 @@
+import { baseTheme, normalize } from '@appsemble/utils';
+import { notFound } from '@hapi/boom';
+import { extension } from 'mime-types';
+const iconSizes = [48, 144, 192, 512];
+export function createManifestHandler({ getApp, getAppScreenshots }) {
+    return async (ctx) => {
+        const app = await getApp({ context: ctx });
+        if (!app) {
+            throw notFound('App not found');
+        }
+        const { defaultPage, description, name, theme = baseTheme } = app.definition;
+        const { themeColor = '#ffffff', splashColor = themeColor } = theme;
+        const appScreenshots = await getAppScreenshots({ app, context: ctx });
+        ctx.body = {
+            background_color: splashColor,
+            description,
+            display: 'standalone',
+            icons: iconSizes.flatMap((size) => [
+                {
+                    src: `/icon-${size}.png`,
+                    type: 'image/png',
+                    sizes: `${size}x${size}`,
+                    purpose: 'any',
+                },
+                {
+                    src: `/icon-${size}.png?maskable=true`,
+                    type: 'image/png',
+                    sizes: `${size}x${size}`,
+                    purpose: 'maskable',
+                },
+            ]),
+            name,
+            orientation: 'any',
+            scope: '/',
+            screenshots: appScreenshots.map(({ height, id, mime, width }) => ({
+                sizes: `${width}x${height}`,
+                src: `/screenshots/${id}.${extension(mime)}`,
+                type: mime,
+            })),
+            short_name: name,
+            start_url: `/${normalize(defaultPage)}`,
+            theme_color: themeColor,
+        };
+        ctx.type = 'application/manifest+json';
+    };
+}
+//# sourceMappingURL=manifestHandler.js.map

package/server/routes/appRouter/robotsHandler.d.ts

@@ -0,0 +1,2 @@
+import { type Middleware } from 'koa';
+export declare function createRobotsHandler(): Middleware;

package/server/routes/appRouter/robotsHandler.js

@@ -0,0 +1,6 @@
+export function createRobotsHandler() {
+    return (ctx) => {
+        ctx.body = 'User-agent: *\nAllow: *\n';
+    };
+}
+//# sourceMappingURL=robotsHandler.js.map

package/server/routes/appRouter/screenshotHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Options } from '@appsemble/node-utils';
+import { type Middleware } from 'koa';
+export declare function createScreenshotHandler({ getApp, getAppScreenshots }: Options): Middleware;

package/server/routes/appRouter/screenshotHandler.js

@@ -0,0 +1,19 @@
+import { notFound } from '@hapi/boom';
+export function createScreenshotHandler({ getApp, getAppScreenshots }) {
+    return async (ctx) => {
+        const { id } = ctx.params;
+        const app = await getApp({ context: ctx });
+        if (!app) {
+            throw notFound('App not found');
+        }
+        const appScreenshots = await getAppScreenshots({ app, context: ctx });
+        const appScreenshot = appScreenshots.find((screenshot) => screenshot.id === Number.parseInt(id));
+        if (!appScreenshot) {
+            throw notFound('Screenshot not found');
+        }
+        const { mime, screenshot } = appScreenshot;
+        ctx.type = mime;
+        ctx.body = screenshot;
+    };
+}
+//# sourceMappingURL=screenshotHandler.js.map

package/server/routes/appRouter/serviceWorkerHandler.d.ts

@@ -0,0 +1,3 @@
+import { type Options } from '@appsemble/node-utils';
+import { type Middleware } from 'koa';
+export declare function createServiceWorkerHandler({ getApp, getBlocksAssetsPaths }: Options): Middleware;

package/server/routes/appRouter/serviceWorkerHandler.js

@@ -0,0 +1,18 @@
+import { readFile } from 'node:fs/promises';
+import { getAppBlocks } from '@appsemble/utils';
+export function createServiceWorkerHandler({ getApp, getBlocksAssetsPaths }) {
+    return async (ctx) => {
+        const production = process.env.NODE_ENV === 'production';
+        const filename = production ? '/service-worker.js' : '/app/service-worker.js';
+        const serviceWorker = await (production
+            ? readFile(new URL('../../../../../dist/app/service-worker.js', import.meta.url), 'utf8')
+            : ctx.fs.promises.readFile(filename, 'utf8'));
+        const app = await getApp({ context: ctx });
+        ctx.assert(app, 404, 'App does not exist.');
+        const identifiableBlocks = getAppBlocks(app.definition);
+        const blocksAssetsPaths = await getBlocksAssetsPaths({ identifiableBlocks, context: ctx });
+        ctx.body = `const blockAssets=${JSON.stringify(blocksAssetsPaths)};${serviceWorker}`;
+        ctx.type = 'application/javascript';
+    };
+}
+//# sourceMappingURL=serviceWorkerHandler.js.map

package/server/routes/appRouter/staticHandler.d.ts

@@ -0,0 +1,2 @@
+import { type Middleware } from 'koa';
+export declare function createStaticHandler(name: string): Middleware;

package/server/routes/appRouter/staticHandler.js

@@ -0,0 +1,9 @@
+import { fileURLToPath } from 'node:url';
+import serve from 'koa-static';
+export function createStaticHandler(name) {
+    return serve(fileURLToPath(new URL(`../../../../../dist/${name}`, import.meta.url)), {
+        index: false,
+        maxAge: 365 * 24 * 60 * 60 * 1000,
+    });
+}
+//# sourceMappingURL=staticHandler.js.map