@appsemble/cli 0.21.2 → 0.22.0

package/server/options/getAppBlockStyles.js

@@ -1,26 +1,26 @@
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
+import { opendirSafe, } from '@appsemble/node-utils';
 import { parseBlockName } from '@appsemble/utils';
-import globalCacheDir from 'global-cache-dir';
 import { processCss } from '../../lib/processCss.js';
 export async function getAppBlockStyles({ context, name, }) {
-    const { appBlocks, blockConfigs } = context;
-    const block = appBlocks.find((appBlock) => appBlock.name === name);
-    const filename = block.files.find((file) => file.endsWith('.css'));
-    const [organization, blockName] = parseBlockName(name);
-    if (filename) {
-        let stylePath;
-        if (existsSync(join(process.cwd(), 'blocks', blockName))) {
-            const blockConfig = blockConfigs.find((config) => config.name === name);
-            stylePath = `${blockConfig.dir}/${blockConfig.output}/${filename}`;
-        }
-        else {
-            const cacheDir = await globalCacheDir('appsemble');
-            stylePath = join(cacheDir, 'blocks', organization, blockName, block.version, 'assets', filename);
-        }
-        const style = await processCss(stylePath);
+    const { appPath } = context;
+    const [, blockName] = parseBlockName(name);
+    let style = '';
+    const themeDirPath = join(appPath, 'theme');
+    if (!existsSync(themeDirPath)) {
         return [{ style }];
     }
-    return [];
+    await opendirSafe(join(appPath, 'theme'), async (themeDir, themeStat) => {
+        const blockDir = join(themeDir, blockName);
+        if (themeStat.name.startsWith('@') && existsSync(blockDir)) {
+            await opendirSafe(blockDir, async (file) => {
+                if (file.endsWith('.css')) {
+                    style = await processCss(join(file));
+                }
+            });
+        }
+    });
+    return [{ style }];
 }
 //# sourceMappingURL=getAppBlockStyles.js.map

package/server/options/parseQuery.js

@@ -10,10 +10,8 @@ const operators = new Map([
 ]);
 function renameOData(name) {
     switch (name) {
-        case '$author':
+        case '$author/id':
             return 'AuthorId';
-        case 'id':
-            return name;
         default:
             return name;
     }
@@ -61,8 +59,15 @@ function parseOdataFilter(query) {
     if (!query) {
         return {};
     }
-    const ast = typeof query === 'string' ? defaultParser.filter(query) : query;
-    return processLogicalExpression(ast);
+    if (typeof query === 'string') {
+        const renamedQuery = query
+            .split(' ')
+            .map((queryItem) => renameOData(queryItem))
+            .join(' ');
+        const ast = defaultParser.filter(renamedQuery);
+        return processLogicalExpression(ast);
+    }
+    return processLogicalExpression(query);
 }
 function parseOdataOrder(query) {
     if (!query) {
@@ -74,9 +79,8 @@ function parseOdataOrder(query) {
     });
 }
 export function parseQuery({ $filter, $orderby }) {
-    return {
-        where: parseOdataFilter($filter),
-        order: parseOdataOrder($orderby ? $orderby.replaceAll(/(^|\B)\$author\/id(\b|$)/g, '$author') : undefined),
-    };
+    const where = parseOdataFilter($filter);
+    const order = parseOdataOrder($orderby);
+    return { where, order };
 }
 //# sourceMappingURL=parseQuery.js.map

package/templates/apps/empty/.appsemblerc.yaml

@@ -0,0 +1,15 @@
+context:
+  development:
+    organization: appsemble
+    remote: http://localhost:9999
+    visibility: public
+  production:
+    remote: https://appsemble.app
+    visibility: public
+  review:
+    organization: appsemble
+    visibility: public
+  staging:
+    visibility: public
+    remote: https://staging.appsemble.review
+    organization: appsemble

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

@@ -0,0 +1,26 @@
+name: Empty
+description: Empty App is a bare-bones app with two pages and buttons switching between them.
+defaultPage: Example Page A
+
+pages:
+  - name: Example Page A
+    blocks:
+      - type: action-button
+        version: 0.22.0
+        parameters:
+          icon: arrow-right
+        actions:
+          onClick:
+            type: link
+            to: Example Page B
+
+  - name: Example Page B
+    blocks:
+      - type: action-button
+        version: 0.22.0
+        parameters:
+          icon: arrow-left
+        actions:
+          onClick:
+            type: link
+            to: Example Page A

package/templates/apps/empty/themes/core/index.css

@@ -0,0 +1,3 @@
+/*
+ * Core styling gets applied to any part of an Appsemble application not related to a block, such as the navigation bar, side menu, login view, message toasts, etc. The styling applied to the core modules do not get applied to blocks.
+ */

package/templates/apps/empty/themes/shared/index.css

@@ -0,0 +1,3 @@
+/*
+ * Shared styling gets applied to each individual block, as well as the Appsemble core. This is useful for applying styles to elements that can appear in both the core modules and blocks such as input fields. It can also be used to apply CSS variables.
+ */

package/templates/blocks/mini-jsx/.appsemblerc.yaml

@@ -0,0 +1 @@
+output: dist

package/templates/blocks/mini-jsx/README.md

@@ -0,0 +1,11 @@
+This block was bootstrapped using the following command:
+
+```sh
+npm init appsemble block
+```
+
+This block renders a single data entity that is emitted through an Appsemble block event. It uses
+[`mini-jsx`](https://gitlab.com/appsemble/mini-jsx) to define raw DOM nodes using JSX syntax.
+
+This readme will be rendered on <https://appsemble.app> when the block is published. Replace the
+contents of this document with a useful block description.

package/templates/blocks/mini-jsx/block.ts

@@ -0,0 +1,48 @@
+// Blocks can actions, parameters, messages, and event listeners and emitters. These can be defined
+// by augmenting the @appsemble/sdk module. Typically this happens in a file named block.ts. When a
+// block is published, the CLI will process the augmented interfaces and validate the app definition
+// complies with them. The JSDoc will be used to render documentation.
+import { type IconName, type Remapper } from '@appsemble/sdk';
+
+/**
+ * A field to display.
+ */
+export interface Field {
+  /**
+   * The value of the property to render.
+   */
+  value: Remapper;
+
+  /**
+   * The fontawesome icon to render.
+   */
+  icon: IconName;
+
+  /**
+   * The label to render.
+   */
+  label?: Remapper;
+}
+
+declare module '@appsemble/sdk' {
+  interface EventListeners {
+    /**
+     * The event to listen on for data to display.
+     */
+    data: never;
+  }
+
+  interface Messages {
+    /**
+     * This message is displayed when there was an error loading data.
+     */
+    error: never;
+  }
+
+  interface Parameters {
+    /**
+     * The fields to display.
+     */
+    fields: Field[];
+  }
+}

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

@@ -0,0 +1,3 @@
+{
+  "error": "There was a problem loading the data."
+}

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

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@appsemble/sdk": "0.22.0",
+    "mini-jsx": "^3.0.0"
+  }
+}

package/templates/blocks/mini-jsx/src/index.module.css

@@ -0,0 +1,19 @@
+.wrapper {
+  display: flex;
+  margin: 10px auto;
+  max-width: 640px;
+}
+
+.field {
+  display: inline;
+  flex: 1 1;
+  text-align: center;
+}
+
+.icon {
+  font-size: calc(min(3em, 10vw));
+}
+
+.value {
+  margin: 8px 0 2px;
+}

package/templates/blocks/mini-jsx/src/index.tsx

@@ -0,0 +1,61 @@
+// `src/index.tsx` is the initial entry point of the block source code run. For small blocks this
+// often contains the entire logic of the block. Bigger blocks are often split into smaller modules.
+import { bootstrap } from '@appsemble/sdk';
+
+import styles from './index.module.css';
+
+// The bootstrap function injects various properties that can be destructured. You can use your
+// editor’s autocomplete to see which variables are available.
+bootstrap(({ events, parameters: { fields }, utils: { fa, formatMessage, remap } }) => {
+  /**
+   * The wrapper element is used to assign data to when it has loaded asynchronously.
+   */
+  const wrapper = (
+    // In this template the JSX is handled by mini-jsx (https://gitlab.com/appsemble/mini-jsx).
+    // This is a small library that turns JSX into plain DOM nodes. Unlike React or Preact, no
+    // virtual DOM or state management is involved.
+    <div className={styles.wrapper}>
+      <div className={styles.loader} />
+    </div>
+  );
+
+  // The preferred way to listen for handling data is using event listeners. At first it may seem
+  // simpler to use actions, but event handlers give users the ability to do additional processing
+  // in another block, or to render the same data in different blocks. Typically user data is loaded
+  // using the data-loader block.
+  events.on.data((data, error) => {
+    while (wrapper.lastChild) {
+      wrapper.lastChild.remove();
+    }
+
+    if (error) {
+      // It’s always important to handle errors. Events may emit errors for various reasons that are
+      // out of control for this block.
+      wrapper.append(formatMessage('error'));
+    } else {
+      wrapper.append(
+        ...fields.map(({ icon, label, value }) => {
+          // The remap utility is a powerful tool to transform user data. A full reference is found
+          // on https://appsemble.app/docs/reference/remapper. However, for the block all that
+          // matters is we can pass in a user defined remapper and a value, and get the value the
+          // user wants to use.
+          const remappedLabel = remap(label, data) as string;
+
+          return (
+            <div className={styles.field}>
+              <i className={`${fa(icon)} ${styles.icon}`} />
+              {/* Bulma classes are supported. See https://bulma.io/documentation */}
+              <div className={`has-text-weight-bold ${styles.value}`}>
+                {remap(value, data) as string}
+              </div>
+              {remappedLabel ? <div>{remappedLabel}</div> : null}
+            </div>
+          );
+        }),
+      );
+    }
+  });
+
+  // If a DOM node is returned by the bootstrap function, it will be rendered in the shadow root.
+  return <div>{wrapper}</div>;
+});

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

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "mini-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["@appsemble/webpack-config/types"]
+  }
+}

package/templates/blocks/preact/.appsemblerc.yaml

@@ -0,0 +1 @@
+output: dist

package/templates/blocks/preact/README.md

@@ -0,0 +1,11 @@
+This block was bootstrapped using the following command:
+
+```sh
+npm init appsemble block
+```
+
+This block renders a list of data entities that is emitted through an Appsemble block event. It uses
+[`preact`](https://preactjs.com) to define a block.
+
+This readme will be rendered on <https://appsemble.app> when the block is published. Replace the
+contents of this document with a useful block description.

package/templates/blocks/preact/block.ts

@@ -0,0 +1,37 @@
+// Blocks can actions, parameters, messages, and event listeners and emitters. These can be defined
+// by augmenting the @appsemble/sdk module. Typically this happens in a file named block.ts. When a
+// block is published, the CLI will process the augmented interfaces and validate the app definition
+// complies with them. The JSDoc will be used to render documentation.
+
+declare module '@appsemble/sdk' {
+  interface EventListeners {
+    /**
+     * This event can be used to receive incoming data to display.
+     */
+    data: never;
+  }
+
+  interface Messages {
+    /**
+     * This message is displayed if the data is empty.
+     */
+    empty: never;
+
+    /**
+     * This message is displayed if there was a problem loading the data.
+     */
+    error: never;
+
+    /**
+     * This message is displayed if no data has been loaded yet.
+     */
+    loading: never;
+  }
+
+  interface Parameters {
+    /**
+     * A list of fields to render out in a table.
+     */
+    fields: string[];
+  }
+}

package/templates/blocks/preact/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "empty": "There is no data to display",
+  "error": "There was a problem loading the data.",
+  "loading": "Loading…"
+}

package/templates/blocks/preact/package.json

@@ -0,0 +1,9 @@
+{
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@appsemble/preact": "0.22.0",
+    "@appsemble/sdk": "0.22.0",
+    "preact": "^10.0.0"
+  }
+}

package/templates/blocks/preact/src/index.tsx

@@ -0,0 +1,99 @@
+// `src/index.tsx` is the initial entry point of the block source code run. For small blocks this
+// often contains the entire logic of the block. Bigger blocks are often split into smaller modules.
+
+// Normally bootstrap is imported from @appsemble/sdk. When using preact, it must be imported from
+// @appsemble/preact instead.
+import { bootstrap, FormattedMessage } from '@appsemble/preact';
+import { useEffect, useState } from 'preact/hooks';
+
+// The bootstrap function injects various properties that can be destructured. You can use your
+// editor’s autocomplete to see which variables are available. These properties can also be accessed
+// from anywhere in a preact component using the useBlock() hook.
+bootstrap(({ events, parameters: { fields }, ready }) => {
+  // The @appsemble/preact bootstrap function renders a component. This means preact hooks such as
+  // useState and useEffect can be used.
+  const [data, setData] = useState<any[]>();
+  const [error, setError] = useState(false);
+
+  // The block needs to call ready() once when it’s ready. Appsemble waits for all blocks to be
+  // ready before it dispatches any actions or events.
+  useEffect(() => {
+    ready();
+  }, [ready]);
+
+  // The preferred way to listen for handling data is using event listeners. At first it may seem
+  // simpler to use actions, but event handlers give users the ability to do additional processing
+  // in another block, or to render the same data in different blocks. Typically user data is loaded
+  // using the data-loader block.
+  useEffect(() => {
+    const onData = (newData: unknown[], newError: unknown): void => {
+      if (newError) {
+        setError(true);
+        // @ts-expect-error this is valid.
+        setData();
+      } else {
+        setData(newData);
+        setError(false);
+      }
+    };
+
+    events.on.data(onData);
+
+    return () => {
+      events.off.data(onData);
+    };
+  }, [events]);
+
+  // It’s always important to handle errors. Events may emit errors for various reasons that are
+  // out of control for this block.
+  if (error) {
+    return (
+      <p>
+        <FormattedMessage id="error" />
+      </p>
+    );
+  }
+
+  // It’s always important to handle the loading state.
+  if (!data) {
+    return (
+      <p>
+        <FormattedMessage id="loading" />
+      </p>
+    );
+  }
+
+  // It’s always important to handle an empty state
+  if (!data.length) {
+    return (
+      <p>
+        <FormattedMessage id="empty" />
+      </p>
+    );
+  }
+
+  return (
+    // Bulma classes are supported in Appsemble blocks. See https://bulma.io/documentation
+    <table className="table">
+      <thead>
+        <tr>
+          {fields.map((field) => (
+            <th key={field}>{field}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, dataIndex) => (
+          // Because any data may be emitted, it’s often hard to determine the correct key to use.
+          // Often an id property is known, at least this handles the use case of Appsemble
+          // resources.
+          <tr key={item.id || dataIndex}>
+            {fields.map((field) => (
+              <td key={field}>{item[field]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+});

package/templates/blocks/preact/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["@appsemble/webpack-config/types"]
+  }
+}

package/templates/blocks/vanilla/.appsemblerc.yaml

@@ -0,0 +1 @@
+output: dist

package/templates/blocks/vanilla/README.md

@@ -0,0 +1,10 @@
+This block was bootstrapped using the following command:
+
+```sh
+npm init appsemble block
+```
+
+This block displays a button that dispatches an action when clicked.
+
+This readme will be rendered on <https://appsemble.app> when the block is published. Replace the
+contents of this document with a useful block description.

package/templates/blocks/vanilla/block.ts

@@ -0,0 +1,20 @@
+// Blocks can actions, parameters, messages, and event listeners and emitters. These can be defined
+// by augmenting the @appsemble/sdk module. Typically this happens in a file named block.ts. When a
+// block is published, the CLI will process the augmented interfaces and validate the app definition
+// complies with them. The JSDoc will be used to render documentation.
+
+declare module '@appsemble/sdk' {
+  interface Actions {
+    /**
+     * What happens if the button is clicked.
+     */
+    onClick: never;
+  }
+
+  interface Messages {
+    /**
+     * The button label.
+     */
+    label: never;
+  }
+}

package/templates/blocks/vanilla/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "label": "Click me"
+}

package/templates/blocks/vanilla/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@appsemble/sdk": "0.22.0"
+  }
+}

package/templates/blocks/vanilla/src/index.ts

@@ -0,0 +1,25 @@
+// `src/index.ts` is the initial entry point of the block source code run. For small blocks this
+// often contains the entire logic of the block. Bigger blocks are often split into smaller modules.
+import { bootstrap } from '@appsemble/sdk';
+
+// The bootstrap function injects various properties that can be destructured. You can use your
+// editor’s autocomplete to see which variables are available.
+bootstrap(({ actions, utils }) => {
+  const button = document.createElement('button');
+  button.type = 'button';
+
+  // Using utils.formatMessage we can provide internationalized messages.
+  button.textContent = utils.formatMessage('label');
+
+  // Bulma classes are supported. See https://bulma.io/documentation
+  button.classList.add('button');
+
+  button.addEventListener('click', (event) => {
+    event.preventDefault();
+    // This dispatches a user defined action.
+    actions.onClick();
+  });
+
+  // If a DOM node is returned by the bootstrap function, it will be rendered in the shadow root.
+  return button;
+});

package/templates/blocks/vanilla/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["@appsemble/webpack-config/types", "vitest/globals"]
+  }
+}

package/types.d.ts

@@ -42,49 +42,3 @@ export interface UpdateAppArguments extends BaseArguments {
 export interface MonoRepoPackageJson extends PackageJson {
     appsembleServer?: JsonObject;
 }
-export interface AppsembleContext {
-    /**
-     * If `remote` is specified, this will override `--remote` passed by the command line.
-     */
-    remote?: string;
-    /**
-     * If `organization` is specified, this will override `--organization` passed by the command line
-     * when creating apps.
-     */
-    organization?: string;
-    icon?: string;
-    iconBackground?: string;
-    maskableIcon?: string;
-    /**
-     * If `id` is specified, this will override `--id` passed by the command line when
-     * updating an app.
-     */
-    id?: number;
-    /**
-     * The Google Analytics ID that should be used for the app.
-     */
-    googleAnalyticsId?: string;
-    /**
-     * The custom Sentry DSN for the app.
-     */
-    sentryDsn?: string;
-    /**
-     * The environment for the custom Sentry DSN for the app.
-     */
-    sentryEnvironment?: string;
-    /**
-     * If `visibility` is specified, this will override `--visibility` passed on the command line.
-     */
-    visibility?: AppVisibility;
-    /**
-     * If `template` is specified, this will override `--template` passed on the command line.
-     */
-    template?: boolean;
-}
-export interface AppsembleRC {
-    /**
-     * The background color to use for maskable icons.
-     */
-    iconBackground?: string;
-    context?: Record<string, AppsembleContext>;
-}

package/vitest.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vitest/dist/config.js").UserProjectConfigExport;
-export default _default;