@appsemble/cli 0.37.4 → 0.37.5

package/README.md

@@ -1,9 +1,9 @@
-# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.37.4/config/assets/logo.svg) Appsemble CLI
+# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.37.5/config/assets/logo.svg) Appsemble CLI
 
 > Manage apps and blocks from the command line.
 
 [![npm](https://img.shields.io/npm/v/@appsemble/cli)](https://www.npmjs.com/package/@appsemble/cli)
-[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.37.4/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.37.4)
+[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.37.5/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.37.5)
 [![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
 
 ## Table of Contents
@@ -342,5 +342,5 @@ appsemble run-cronjobs --interval 30
 
 ## License
 
-[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.37.4/LICENSE.md) ©
+[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.37.5/LICENSE.md) ©
 [Appsemble](https://appsemble.com)

package/commands/serve.js

@@ -1,10 +1,11 @@
 import { createWriteStream, existsSync } from 'node:fs';
 import { mkdir, readFile } from 'node:fs/promises';
 import http from 'node:http';
-import { basename, extname, join, parse } from 'node:path';
+import { basename, dirname, extname, join, parse } from 'node:path';
 import { Readable } from 'node:stream';
+import { pipeline } from 'node:stream/promises';
 import { getAppBlocks, getAppRoles, normalize, parseBlockName, } from '@appsemble/lang-sdk';
-import { AppsembleError, logger, opendirSafe, readData, writeData, } from '@appsemble/node-utils';
+import { AppsembleError, getBlockAssetDownloadUrl, isValidBlockAssetFilename, logger, opendirSafe, readData, writeData, } from '@appsemble/node-utils';
 import { asciiLogo } from '@appsemble/utils';
 import axios from 'axios';
 import csvToJson from 'csvtojson';
@@ -132,29 +133,36 @@ export async function handler(argv) {
         const cachedBlockManifest = join(blockCacheDir, 'manifest.json');
         const cacheExists = existsSync(cachedBlockManifest);
         if (!cacheExists || (cacheExists && argv['overwrite-block-cache'])) {
-            const blockUrl = `/api/blocks/@${organization}/${blockName}/versions/${identifiableBlock.version}`;
+            const blockUrl = String(new URL(`/api/blocks/@${organization}/${blockName}/versions/${identifiableBlock.version}`, argv.remote));
             try {
-                const { data: blockManifest } = await axios.get(String(new URL(blockUrl, argv.remote)));
-                await writeData(cachedBlockManifest, blockManifest);
+                const { data: blockManifest } = await axios.get(blockUrl);
                 const assetsDir = join(blockCacheDir, 'assets');
                 if (!existsSync(assetsDir)) {
                     await mkdir(assetsDir);
                 }
                 const blockFilesPromises = blockManifest.files.map(async (filename) => {
-                    const writer = createWriteStream(join(assetsDir, filename));
-                    const { data: content } = await axios.get(String(new URL(`${blockUrl}/asset?filename=${filename}`, argv.remote)), {
+                    if (!isValidBlockAssetFilename(filename)) {
+                        throw new AppsembleError(`Invalid block asset filename: ${filename}`);
+                    }
+                    const target = join(assetsDir, filename);
+                    await mkdir(dirname(target), { recursive: true });
+                    const { data: content } = await axios.get(getBlockAssetDownloadUrl(blockUrl, blockManifest.fileUrls, filename), {
                         responseType: 'stream',
                     });
-                    content.pipe(writer);
+                    await pipeline(content, createWriteStream(target));
                 });
                 await Promise.all(blockFilesPromises);
-                return blockManifest;
+                const localBlockManifest = { ...blockManifest };
+                delete localBlockManifest.fileUrls;
+                await writeData(cachedBlockManifest, localBlockManifest);
+                return localBlockManifest;
             }
             catch {
                 throw new AppsembleError(`The server was unable to fetch the "${blockName}" block\nThis could be due to a misconfigured remote\nMake sure the passed remote supports fetching blocks such as https://appsemble.app`);
             }
         }
-        const [blockManifest] = await readData(cachedBlockManifest);
+        const [blockManifest] = (await readData(cachedBlockManifest));
+        delete blockManifest.fileUrls;
         return blockManifest;
     });
     const localBlocks = await Promise.all(localBlocksPromises);

package/commands/start.js

@@ -139,6 +139,9 @@ export function builder(yargs) {
     })
         .option('s3-secret-key', {
         desc: 'The secret key of the Amazon S3 compatible object storage server',
+    })
+        .option('block-assets-base-url', {
+        desc: 'The base URL for block assets stored in S3 compatible object storage',
     })
         .option('valkey-host', {
         desc: 'The host of the Valkey server to connect to.',

package/lib/config.js

@@ -407,7 +407,7 @@ export async function getProjectWebpackConfig(buildConfig, mode, outputPath) {
     config.output = config.output || {};
     config.output.path = outputPath || publicPath;
     logger.verbose(`Patched webpack config output.path to ${config.output.path}`);
-    config.output.publicPath = publicPath;
+    config.output.publicPath = mode === 'production' ? 'auto' : publicPath;
     logger.verbose(`Patched webpack config output.publicPath to ${config.output.publicPath}`);
     return config;
 }

package/lib/createServers.js

@@ -40,7 +40,9 @@ export function createApiServer({ context }) {
     app.use(compose([
         conditional((ctx) => ctx.path.startsWith('/api') ||
             ctx.path === '/auth/oauth2/token' ||
-            /\/apps\/\d+\/auth\/oauth2\/token/.test(ctx.path), cors()),
+            /\/apps\/\d+\/auth\/oauth2\/token/.test(ctx.path), 
+        // Reflect the origin instead of '*', so credentialed app requests pass CORS.
+        cors({ origin: (ctx) => ctx.get('Origin') || '*', credentials: true })),
         koas(api(version, argv), [
             parameters(),
             bodyParser(),

package/lib/processCss.js

@@ -2,7 +2,28 @@ import { readFile } from 'node:fs/promises';
 import postcss from 'postcss';
 import postcssImport from 'postcss-import';
 import postcssrc from 'postcss-load-config';
+import postcssPresetEnv from 'postcss-preset-env';
 import postcssUrl from 'postcss-url';
+/**
+ * Load the PostCSS plugins to process app CSS with.
+ *
+ * The PostCSS config of the project is used if it has one. Otherwise the CSS is processed with the
+ * Appsemble CLI's default PostCSS preset.
+ *
+ * @returns The PostCSS plugins to use.
+ */
+async function loadPlugins() {
+    try {
+        const { plugins } = await postcssrc();
+        return plugins;
+    }
+    catch (error) {
+        if (!error.message?.startsWith('No PostCSS Config found')) {
+            throw error;
+        }
+        return [postcssPresetEnv({ stage: 0 })];
+    }
+}
 /**
  * Verifies and processes a CSS file using PostCSS.
  *
@@ -11,8 +32,7 @@ import postcssUrl from 'postcss-url';
  */
 export async function processCss(path) {
     const data = await readFile(path, 'utf8');
-    const postcssConfig = await postcssrc();
-    const postCss = postcss(postcssConfig.plugins);
+    const postCss = postcss(await loadPlugins());
     postCss.use(postcssUrl({ url: 'inline' }));
     postCss.use(postcssImport({ plugins: postCss.plugins }));
     const { css } = await postCss.process(data, { from: path, to: undefined });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsemble/cli",
-  "version": "0.37.4",
+  "version": "0.37.5",
   "description": "The CLI for developing with Appsemble apps and blocks",
   "keywords": [
     "app",
@@ -44,10 +44,10 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@appsemble/node-utils": "0.37.4",
-    "@appsemble/types": "0.37.4",
-    "@appsemble/lang-sdk": "0.37.4",
-    "@appsemble/utils": "0.37.4",
+    "@appsemble/node-utils": "0.37.5",
+    "@appsemble/types": "0.37.5",
+    "@appsemble/lang-sdk": "0.37.5",
+    "@appsemble/utils": "0.37.5",
     "@fortawesome/fontawesome-common-types": "^6.0.0",
     "@inquirer/prompts": "^8.0.0",
     "@koa/cors": "^5.0.0",
@@ -76,6 +76,7 @@
     "postcss": "^8.0.0",
     "postcss-import": "^15.0.0",
     "postcss-load-config": "^4.0.0",
+    "postcss-preset-env": "^9.0.0",
     "postcss-url": "^10.0.0",
     "prettier": "^3.0.0",
     "raw-body": "^2.0.0",
@@ -89,8 +90,8 @@
     "yargs": "^17.0.0"
   },
   "devDependencies": {
-    "@appsemble/types": "0.37.4",
-    "@appsemble/server": "0.37.4",
+    "@appsemble/types": "0.37.5",
+    "@appsemble/server": "0.37.5",
     "@types/concat-stream": "2.0.3",
     "@types/koa__cors": "5.0.1",
     "@types/koa-compress": "4.0.7",

package/server/options/getAppBlockStyles.js

@@ -1,10 +1,10 @@
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { parseBlockName } from '@appsemble/lang-sdk';
-import { opendirSafe, } from '@appsemble/node-utils';
+import { opendirSafe, replaceAssetFunctions, } from '@appsemble/node-utils';
 import { processCss } from '../../lib/processCss.js';
 export async function getAppBlockStyles({ context, name, }) {
-    const { appPath } = context;
+    const { apiUrl, appPath, appsembleApp } = context;
     const [, blockName] = parseBlockName(name);
     let style = '';
     const themeDirPath = join(appPath, 'theme');
@@ -16,7 +16,8 @@ export async function getAppBlockStyles({ context, name, }) {
         if (themeStat.name.startsWith('@') && existsSync(blockDir)) {
             await opendirSafe(blockDir, async (file) => {
                 if (file.endsWith('.css')) {
-                    style = await processCss(join(file));
+                    const css = await processCss(join(file));
+                    style = replaceAssetFunctions(css, appsembleApp.id, apiUrl);
                 }
             });
         }

package/server/options/getAppStyles.js

@@ -1,7 +1,10 @@
+import { replaceAssetFunctions, } from '@appsemble/node-utils';
 export function getAppStyles({ context }) {
+    const { apiUrl, appsembleApp } = context;
+    const { coreStyle = '', id, sharedStyle = '' } = appsembleApp;
     return Promise.resolve({
-        coreStyle: context.appsembleApp.coreStyle,
-        sharedStyle: context.appsembleApp.sharedStyle,
+        coreStyle: replaceAssetFunctions(coreStyle, id, apiUrl),
+        sharedStyle: replaceAssetFunctions(sharedStyle, id, apiUrl),
     });
 }
 //# sourceMappingURL=getAppStyles.js.map

package/templates/apps/empty/app-definition.yaml

@@ -6,7 +6,7 @@ pages:
   - name: Example Page A
     blocks:
       - type: action-button
-        version: 0.37.4
+        version: 0.37.5
         parameters:
           icon: arrow-right
         actions:
@@ -17,7 +17,7 @@ pages:
   - name: Example Page B
     blocks:
       - type: action-button
-        version: 0.37.4
+        version: 0.37.5
         parameters:
           icon: arrow-left
         actions:

package/templates/blocks/mini-jsx/package.json

@@ -5,7 +5,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@appsemble/sdk": "0.37.4",
+    "@appsemble/sdk": "0.37.5",
     "mini-jsx": "^4.0.0"
   }
 }

package/templates/blocks/preact/package.json

@@ -5,8 +5,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@appsemble/preact": "0.37.4",
-    "@appsemble/sdk": "0.37.4",
+    "@appsemble/preact": "0.37.5",
+    "@appsemble/sdk": "0.37.5",
     "preact": "^10.0.0"
   }
 }

package/templates/blocks/vanilla/package.json

@@ -5,6 +5,6 @@
     "*.css"
   ],
   "dependencies": {
-    "@appsemble/sdk": "0.37.4"
+    "@appsemble/sdk": "0.37.5"
   }
 }