create-appsemble 0.21.3 → 0.22.0

package/README.md

@@ -1,15 +1,14 @@
-# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.21.3/config/assets/logo.svg) Appsemble Create
+# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.22.0/config/assets/logo.svg) Appsemble Create
 
-> Bootstrap an Appsemble block
+> Bootstrap an Appsemble project
 
 [![npm](https://img.shields.io/npm/v/create-appsemble)](https://www.npmjs.com/package/create-appsemble)
-[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.21.3/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.21.3)
+[![GitLab CI](https://gitlab.com/appsemble/appsemble/badges/0.22.0/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.22.0)
 [![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
 
 ## Table of Contents
 
 - [Usage](#usage)
-  - [Blocks](#blocks)
 - [License](#license)
 
 ## Usage
@@ -25,16 +24,7 @@ npm init appsemble
 yarn create appsemble
 ```
 
-### Blocks
-
-This package allows you to bootstrap an Appsemble block in a standard Appsemble project layout. The
-initial command will be followed by a number questions interactively.
-
-```sh
-npm init appsemble block
-```
-
 ## License
 
-[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.21.3/LICENSE.md) ©
+[LGPL-3.0-only](https://gitlab.com/appsemble/appsemble/-/blob/0.22.0/LICENSE.md) ©
 [Appsemble](https://appsemble.com)

package/index.js

@@ -1,10 +1,8 @@
 #!/usr/bin/env node
-import { configureLogger, handleError } from '@appsemble/node-utils';
+import { configureLogger, handleError, version } from '@appsemble/node-utils';
 import yargs from 'yargs';
-import * as block from './commands/block.js';
-import pkg from './package.json' assert { type: 'json' };
 yargs()
-    .version(pkg.version)
+    .version(version)
     .option('verbose', {
     alias: 'v',
     describe: 'Increase verbosity',
@@ -16,7 +14,6 @@ yargs()
     type: 'count',
 })
     .middleware([configureLogger])
-    .command(block)
     .demandCommand(1)
     .fail(handleError)
     .help()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-appsemble",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "description": "Bootstrap an Appsemble project",
   "keywords": [
     "app",
@@ -32,17 +32,18 @@
   "files": [
     "**/*.d.ts",
     "**/*.js",
-    "!*.config.js",
-    "templates"
+    "!*.config.js"
   ],
   "scripts": {
     "prepack": "tsc --noEmit false",
     "test": "vitest"
   },
   "dependencies": {
-    "@appsemble/node-utils": "0.21.3",
+    "@appsemble/node-utils": "0.22.0",
+    "@appsemble/types": "0.22.0",
     "inquirer": "^9.0.0",
     "type-fest": "^4.0.0",
+    "yaml": "^2.0.0",
     "yargs": "^17.0.0"
   },
   "devDependencies": {

package/commands/block.d.ts

@@ -1,11 +0,0 @@
-import { type Argv } from 'yargs';
-export declare const command = "block";
-export declare const description = "Bootstrap a new Appsemble block.";
-interface BlockArgs {
-    organization?: string;
-    name?: string;
-    template?: string;
-}
-export declare function builder(yargs: Argv): Promise<Argv<any>>;
-export declare function handler(args: BlockArgs): Promise<void>;
-export {};

package/commands/block.js

@@ -1,60 +0,0 @@
-import { cp, readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { logger, readData, writeData } from '@appsemble/node-utils';
-import inquirer from 'inquirer';
-import pkg from '../package.json' assert { type: 'json' };
-const templateDir = new URL('../templates/', import.meta.url);
-export const command = 'block';
-export const description = 'Bootstrap a new Appsemble block.';
-export async function builder(yargs) {
-    const choices = await readdir(templateDir);
-    return yargs
-        .option('organization', {
-        describe: 'The ID the block should be created for.',
-    })
-        .option('name', {
-        describe: 'The name of the block',
-    })
-        .option('template', {
-        describe: 'The template to use.',
-        choices,
-    });
-}
-export async function handler(args) {
-    const choices = await readdir(templateDir);
-    const answers = await inquirer.prompt([
-        !args.organization && {
-            name: 'organization',
-            message: 'For which organization is the block?',
-        },
-        !args.name && { name: 'name', message: 'What should be the name of the block?' },
-        !args.template && {
-            name: 'template',
-            type: 'list',
-            choices,
-            message: 'What kind of block project should be bootstrapped?',
-        },
-    ].filter(Boolean));
-    const organization = answers.organization || args.organization;
-    const name = answers.name || args.name;
-    const template = answers.template || args.template;
-    const { version } = pkg;
-    const outputPath = join(process.cwd(), 'blocks', name);
-    const inputPath = new URL(`${template}/`, templateDir);
-    const pkgPath = new URL('package.json', inputPath);
-    const [inputPkg] = await readData(pkgPath);
-    const outputPkg = {
-        name: `@${organization}/${name}`,
-        version,
-        ...inputPkg,
-    };
-    await cp(inputPath, outputPath, {
-        errorOnExist: true,
-        filter: (src) => !src.endsWith('package.json'),
-        force: false,
-        recursive: true,
-    });
-    await writeData(join(outputPath, 'package.json'), outputPkg);
-    logger.info(`Successfully created @${organization}/${name}/${version} at ${outputPath}`);
-}
-//# sourceMappingURL=block.js.map

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

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

package/templates/mini-jsx/README.md

@@ -1,11 +0,0 @@
-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/mini-jsx/block.ts

@@ -1,48 +0,0 @@
-// 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/mini-jsx/i18n/en.json

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

package/templates/mini-jsx/package.json

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

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

@@ -1,19 +0,0 @@
-.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/mini-jsx/src/index.tsx

@@ -1,61 +0,0 @@
-// `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/mini-jsx/tsconfig.json

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

package/templates/preact/.appsemblerc.yaml

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

package/templates/preact/README.md

@@ -1,11 +0,0 @@
-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/preact/block.ts

@@ -1,37 +0,0 @@
-// 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/preact/i18n/en.json

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

package/templates/preact/package.json

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

package/templates/preact/src/index.tsx

@@ -1,99 +0,0 @@
-// `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/preact/tsconfig.json

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

package/templates/vanilla/.appsemblerc.yaml

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

package/templates/vanilla/README.md

@@ -1,10 +0,0 @@
-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/vanilla/block.ts

@@ -1,20 +0,0 @@
-// 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/vanilla/i18n/en.json

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

package/templates/vanilla/package.json

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

package/templates/vanilla/src/index.ts

@@ -1,25 +0,0 @@
-// `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/vanilla/tsconfig.json

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

package/vitest.config.d.ts

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