create-appsemble 0.19.11

package/README.md

@@ -0,0 +1,35 @@
+# ![](https://gitlab.com/appsemble/appsemble/-/raw/0.18.23/config/assets/logo.svg) Appsemble Create
+
+> Bootstrap an Appsemble block
+
+[![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.18.23/pipeline.svg)](https://gitlab.com/appsemble/appsemble/-/releases/0.18.23)
+[![Code coverage](https://codecov.io/gl/appsemble/appsemble/branch/0.18.23/graph/badge.svg)](https://codecov.io/gl/appsemble/appsemble)
+[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)
+
+## Usage
+
+In a future release, this package lets a developer bootstrap Appsemble related boilerplate using
+`npm init` or `yarn create`.
+
+```sh
+npm init appsemble
+```
+
+```sh
+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.18.23/LICENSE.md) ©
+[Appsemble](https://appsemble.com)

package/dist/commands/block.d.ts

@@ -0,0 +1,11 @@
+import { 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>;
+export declare function handler(args: BlockArgs): Promise<void>;
+export {};

package/dist/commands/block.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handler = exports.builder = exports.description = exports.command = void 0;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const node_utils_1 = require("@appsemble/node-utils");
+const fs_extra_1 = require("fs-extra");
+const inquirer_1 = require("inquirer");
+const readPackageJson_1 = require("../lib/readPackageJson");
+const templateDir = path_1.resolve(__dirname, '../../templates');
+exports.command = 'block';
+exports.description = 'Bootstrap a new Appsemble block.';
+async function builder(yargs) {
+    const choices = await fs_1.promises.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,
+    });
+}
+exports.builder = builder;
+async function handler(args) {
+    const choices = await fs_1.promises.readdir(templateDir);
+    const answers = await inquirer_1.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: 'type',
+            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 } = await readPackageJson_1.readPackageJson();
+    const outputPath = path_1.join(process.cwd(), 'blocks', name);
+    const inputPath = path_1.join(templateDir, template);
+    const pkgPath = path_1.join(inputPath, 'package.json');
+    const [inputPkg] = await node_utils_1.readData(pkgPath);
+    const outputPkg = {
+        name: `@${organization}/${name}`,
+        version,
+        ...inputPkg,
+    };
+    await fs_extra_1.copy(inputPath, outputPath, { filter: (src) => src !== pkgPath });
+    await node_utils_1.writeData(path_1.join(outputPath, 'package.json'), outputPkg);
+    node_utils_1.logger.info(`Successfully created @${organization}/${name}/${version} at ${outputPath}`);
+}
+exports.handler = handler;
+//# sourceMappingURL=block.js.map

package/dist/commands/block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.js","sourceRoot":"","sources":["../../src/commands/block.ts"],"names":[],"mappings":";;;AAAA,2BAAoC;AACpC,+BAAqC;AAErC,sDAAoE;AACpE,uCAAgC;AAChC,uCAAkC;AAIlC,4DAAyD;AAEzD,MAAM,WAAW,GAAG,cAAO,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;AAE7C,QAAA,OAAO,GAAG,OAAO,CAAC;AAClB,QAAA,WAAW,GAAG,kCAAkC,CAAC;AAQvD,KAAK,UAAU,OAAO,CAAC,KAAW;IACvC,MAAM,OAAO,GAAG,MAAM,aAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAE9C,OAAO,KAAK;SACT,MAAM,CAAC,cAAc,EAAE;QACtB,QAAQ,EAAE,yCAAyC;KACpD,CAAC;SACD,MAAM,CAAC,MAAM,EAAE;QACd,QAAQ,EAAE,uBAAuB;KAClC,CAAC;SACD,MAAM,CAAC,UAAU,EAAE;QAClB,QAAQ,EAAE,sBAAsB;QAChC,OAAO;KACR,CAAC,CAAC;AACP,CAAC;AAdD,0BAcC;AAEM,KAAK,UAAU,OAAO,CAAC,IAAe;IAC3C,MAAM,OAAO,GAAG,MAAM,aAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,iBAAM,CAC1B;QACE,CAAC,IAAI,CAAC,YAAY,IAAI;YACpB,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,sCAAsC;SAChD;QACD,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,uCAAuC,EAAE;QAChF,CAAC,IAAI,CAAC,QAAQ,IAAI;YAChB,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,OAAO;YACP,OAAO,EAAE,oDAAoD;SAC9D;KACF,CAAC,MAAM,CAAC,OAAO,CAAC,CAClB,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC;IAC/D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC;IACvC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC;IAEnD,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,iCAAe,EAAE,CAAC;IAC5C,MAAM,UAAU,GAAG,WAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,WAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAI,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,qBAAQ,CAAc,OAAO,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG;QAChB,IAAI,EAAE,IAAI,YAAY,IAAI,IAAI,EAAE;QAChC,OAAO;QACP,GAAG,QAAQ;KACZ,CAAC;IACF,MAAM,eAAI,CAAC,SAAS,EAAE,UAAU,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC,CAAC;IACxE,MAAM,sBAAS,CAAC,WAAI,CAAC,UAAU,EAAE,cAAc,CAAC,EAAE,SAAS,CAAC,CAAC;IAC7D,mBAAM,CAAC,IAAI,CAAC,yBAAyB,YAAY,IAAI,IAAI,IAAI,OAAO,OAAO,UAAU,EAAE,CAAC,CAAC;AAC3F,CAAC;AAnCD,0BAmCC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const node_utils_1 = require("@appsemble/node-utils");
+const yargs_1 = __importDefault(require("yargs"));
+function main() {
+    return yargs_1.default
+        .option('verbose', {
+        alias: 'v',
+        describe: 'Increase verbosity',
+        type: 'count',
+    })
+        .option('quiet', {
+        alias: 'q',
+        describe: 'Decrease verbosity',
+        type: 'count',
+    })
+        .middleware([node_utils_1.configureLogger])
+        .commandDir(path_1.join(__dirname, 'commands'), {
+        extensions: [path_1.extname(__filename).slice(1)],
+    })
+        .demandCommand(1)
+        .fail(node_utils_1.handleError)
+        .help()
+        .completion().argv;
+}
+if (module === require.main) {
+    try {
+        main();
+    }
+    catch (error) {
+        node_utils_1.logger.error(error);
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AACA,+BAAqC;AAErC,sDAA6E;AAC7E,kDAA0B;AAE1B,SAAS,IAAI;IACX,OAAO,eAAK;SACT,MAAM,CAAC,SAAS,EAAE;QACjB,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,oBAAoB;QAC9B,IAAI,EAAE,OAAO;KACd,CAAC;SACD,MAAM,CAAC,OAAO,EAAE;QACf,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,oBAAoB;QAC9B,IAAI,EAAE,OAAO;KACd,CAAC;SACD,UAAU,CAAC,CAAC,4BAAe,CAAC,CAAC;SAC7B,UAAU,CAAC,WAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;QACvC,UAAU,EAAE,CAAC,cAAO,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAC3C,CAAC;SACD,aAAa,CAAC,CAAC,CAAC;SAChB,IAAI,CAAC,wBAAW,CAAC;SACjB,IAAI,EAAE;SACN,UAAU,EAAE,CAAC,IAAI,CAAC;AACvB,CAAC;AAED,IAAI,MAAM,KAAK,OAAO,CAAC,IAAI,EAAE;IAC3B,IAAI;QACF,IAAI,EAAE,CAAC;KACR;IAAC,OAAO,KAAc,EAAE;QACvB,mBAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACrB;CACF"}

package/dist/lib/readPackageJson.d.ts

@@ -0,0 +1,9 @@
+import { PackageJson } from 'type-fest';
+/**
+ * Read package.json
+ *
+ * TypeScript doesn’t allow importing files from outside of rootDir.
+ *
+ * @returns The contents of package.json
+ */
+export declare function readPackageJson(): Promise<PackageJson>;

package/dist/lib/readPackageJson.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readPackageJson = void 0;
+const node_utils_1 = require("@appsemble/node-utils");
+/**
+ * Read package.json
+ *
+ * TypeScript doesn’t allow importing files from outside of rootDir.
+ *
+ * @returns The contents of package.json
+ */
+async function readPackageJson() {
+    const [pkg] = await node_utils_1.readData(require.resolve('../../package.json'));
+    return pkg;
+}
+exports.readPackageJson = readPackageJson;
+//# sourceMappingURL=readPackageJson.js.map

package/dist/lib/readPackageJson.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readPackageJson.js","sourceRoot":"","sources":["../../src/lib/readPackageJson.ts"],"names":[],"mappings":";;;AAAA,sDAAiD;AAGjD;;;;;;GAMG;AACI,KAAK,UAAU,eAAe;IACnC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,qBAAQ,CAAc,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC,CAAC;IACjF,OAAO,GAAG,CAAC;AACb,CAAC;AAHD,0CAGC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "create-appsemble",
+  "version": "0.19.11",
+  "description": "Bootstrap an Appsemble project",
+  "keywords": [
+    "app",
+    "apps",
+    "appsemble",
+    "cli",
+    "framework",
+    "low-code",
+    "lowcode"
+  ],
+  "homepage": "https://appsemble.app",
+  "bugs": "https://gitlab.com/appsemble/appsemble/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/appsemble/appsemble.git",
+    "directory": "packages/create-appsemble"
+  },
+  "license": "LGPL-3.0-only",
+  "author": "Appsemble <info@appsemble.com> (https://appsemble.com)",
+  "main": "dist",
+  "bin": "dist/index.js",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "prepack": "tsc -p tsconfig.build.json",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@appsemble/node-utils": "0.19.11",
+    "fs-extra": "^10.0.0",
+    "inquirer": "^8.0.0",
+    "type-fest": "^2.0.0",
+    "yargs": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^9.0.0",
+    "@types/inquirer": "^8.0.0"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}

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

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

package/templates/mini-jsx/block.ts

@@ -0,0 +1,28 @@
+import { IconName, Remapper } from '@appsemble/sdk';
+
+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 {
+    data: {};
+  }
+
+  interface Parameters {
+    fields: Field[];
+  }
+}

package/templates/mini-jsx/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "dependencies": {
+    "@appsemble/sdk": "0.19.11",
+    "mini-jsx": "^3.0.0"
+  }
+}

package/templates/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/mini-jsx/src/index.tsx

@@ -0,0 +1,39 @@
+import { bootstrap } from '@appsemble/sdk';
+
+import styles from './index.module.css';
+
+bootstrap(({ events, parameters: { fields }, utils: { fa, remap } }) => {
+  const wrapper = (
+    <div className={styles.wrapper}>
+      <div className={styles.loader} />
+    </div>
+  );
+
+  events.on.data((data, error) => {
+    while (wrapper.lastElementChild) {
+      wrapper.lastElementChild.remove();
+    }
+
+    if (error) {
+      wrapper.append('error');
+    } else {
+      wrapper.append(
+        ...fields.map(({ icon, label, value }) => {
+          const remappedLabel = remap(label, data) as string;
+
+          return (
+            <div className={styles.field}>
+              <i className={`${fa(icon)} ${styles.icon}`} />
+              <div className={`has-text-weight-bold ${styles.value}`}>
+                {remap(value, data) as string}
+              </div>
+              {remappedLabel && <div>{remappedLabel}</div>}
+            </div>
+          );
+        }),
+      );
+    }
+  });
+
+  return <div>{wrapper}</div>;
+});

package/templates/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/preact/.appsemblerc.yaml

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

package/templates/preact/block.ts

@@ -0,0 +1,17 @@
+declare module '@appsemble/sdk' {
+  interface EventListeners {
+    /**
+     * This event can be used to receive incoming data to display.
+     */
+    data: never;
+  }
+
+  interface Parameters {
+    /**
+     * A list of fields to render out in a table.
+     */
+    fields: string[];
+  }
+}
+
+export {};

package/templates/preact/package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "dependencies": {
+    "@appsemble/preact": "0.19.11",
+    "@appsemble/sdk": "0.19.11",
+    "preact": "^10.0.0"
+  }
+}

package/templates/preact/src/index.tsx

@@ -0,0 +1,58 @@
+import { bootstrap } from '@appsemble/preact';
+import { useEffect, useState } from 'preact/hooks';
+
+bootstrap(({ events, parameters: { fields } }) => {
+  const [data, setData] = useState<any[]>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const onData = (newData: unknown[], newError: unknown): void => {
+      if (newError) {
+        setError(true);
+        setData(null);
+      } else {
+        setError(false);
+        setData(newData);
+      }
+    };
+
+    events.on.data(onData);
+
+    return () => {
+      events.off.data(onData);
+    };
+  }, [events]);
+
+  if (error) {
+    return <p>Error loading data.</p>;
+  }
+
+  if (!data) {
+    return <p>Loading…</p>;
+  }
+
+  if (!data.length) {
+    return <p>No data to display.</p>;
+  }
+
+  return (
+    <table className="table">
+      <thead>
+        <tr>
+          {fields.map((field) => (
+            <th key={field}>{field}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item, dataIndex) => (
+          <tr key={item.id || dataIndex}>
+            {fields.map((field) => (
+              <td key={field}>{item[field]}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+});

package/templates/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/vanilla/.appsemblerc.yaml

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

package/templates/vanilla/block.ts

@@ -0,0 +1,10 @@
+declare module '@appsemble/sdk' {
+  interface Actions {
+    /**
+     * What happens if the button is clicked.
+     */
+    onClick: never;
+  }
+}
+
+export {};

package/templates/vanilla/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "@appsemble/sdk": "0.19.11"
+  }
+}

package/templates/vanilla/src/index.ts

@@ -0,0 +1,25 @@
+import { bootstrap } from '@appsemble/sdk';
+
+/**
+ * @param {Object} actions - Prepared actions the block can dispatch.
+ * @param {Object} data - The data that was somehow passed into the block. I.e. data passed in from
+ * another block.
+ * @param {Object} events - Event related functions and constants.
+ * @param {Object} pageParameters - Parameters that the app creator defined in the app definition.
+ * @param {Object} utils - Some utility functions provided by the Appsemble framework.
+ */
+bootstrap(({ actions, data, events, pageParameters, shadowRoot, utils }) => {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.textContent = 'Click me!';
+  button.classList.add('button');
+  button.addEventListener(
+    'click',
+    (event) => {
+      event.preventDefault();
+      actions.onClick();
+    },
+    true,
+  );
+  return button;
+});

package/templates/vanilla/tsconfig.json

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