@appsemble/preact 0.20.8 → 0.20.11

package/.eslintrc.yaml

@@ -0,0 +1,4 @@
+extends:
+  - remcohaszing/preact
+rules:
+  react/prop-types: off

package/README.md

@@ -27,9 +27,10 @@ called when the block is done rendering. Actions won’t be finalized for any bl
 until all blocks are ready.
 
 ```tsx
-import { bootstrap } from '@appsemble/preact';
 import { useEffect } from 'preact/hooks';
 
+import { bootstrap } from '@appsemble/preact';
+
 bootstrap(({ actions }) => {
   useEffect(() => {
     ready();
@@ -52,9 +53,10 @@ Get the block context. This is available for components that are rendered within
 component rendered by [`bootstrap`](#bootstrap)
 
 ```tsx
-import { useBlock } from '@appsemble/preact';
 import { VNode } from 'preact';
 
+import { useBlock } from '@appsemble/preact';
+
 export function MyButton(): VNode {
   const { actions } = useBlock();
 
@@ -71,9 +73,10 @@ export function MyButton(): VNode {
 This helper component renders a translated message ID.
 
 ```tsx
-import { FormattedMessage } from '@appsemble/preact';
 import { VNode } from 'preact';
 
+import { FormattedMessage } from '@appsemble/preact';
+
 interface MyButtonProps {
   name: string;
 }

package/{dist/index.d.ts → index.d.ts}

@@ -9,7 +9,7 @@ export interface BlockProps extends BootstrapParams {
 /**
  * Mount a Preact component returned by a bootstrap function in the shadow DOM of a block.
  *
- * @param Component - The Preact component to mount.
+ * @param Component The Preact component to mount.
  * @returns A promise which gets resolved if the component calls `ready()`.
  */
 export declare function mount(Component: ComponentType<BlockProps>): (params: BootstrapParams) => Promise<void>;
@@ -17,7 +17,7 @@ export declare function bootstrap(Component: ComponentType<BlockProps>): void;
 /**
  * A HOC which passes the Appsemble block values to he wrapped Preact component.
  *
- * @param Component - The Preact componen to wrap.
+ * @param Component The Preact componen to wrap.
  * @returns The wrapper component.
  * @deprecated Use `useBlock()` instead.
  */

package/{dist/index.js → index.js}

@@ -6,7 +6,7 @@ const Context = createContext(null);
 /**
  * Mount a Preact component returned by a bootstrap function in the shadow DOM of a block.
  *
- * @param Component - The Preact component to mount.
+ * @param Component The Preact component to mount.
  * @returns A promise which gets resolved if the component calls `ready()`.
  */
 export function mount(Component) {
@@ -27,7 +27,7 @@ export function bootstrap(Component) {
 /**
  * A HOC which passes the Appsemble block values to he wrapped Preact component.
  *
- * @param Component - The Preact componen to wrap.
+ * @param Component The Preact componen to wrap.
  * @returns The wrapper component.
  * @deprecated Use `useBlock()` instead.
  */

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA6B,SAAS,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAiC,aAAa,EAAE,MAAM,EAAS,MAAM,QAAQ,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,MAAM,OAAO,GAAG,aAAa,CAAa,IAAI,CAAC,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CACnB,SAAoC;IAEpC,OAAO,CAAC,MAAM,EAAE,EAAE,CAChB,IAAI,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACpB,mEAAmE;QACnE,MAAM,KAAK,GAAG;YACZ,GAAG,MAAM;YACT,KAAK;SACN,CAAC;QACF,MAAM,SAAS,GAAG,CAChB,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC5B,KAAC,SAAS,OAAK,KAAK,GAAI,GACP,CACpB,CAAC;QACF,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;AACP,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,SAAoC;IAC5D,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,SAAuD;IAEvD,OAAO,CAAC,KAAQ,EAAE,EAAE,CAAC,CACnB,KAAC,OAAO,CAAC,QAAQ,cAAE,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,KAAM,MAAM,GAAI,GAAoB,CACxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC;AAC7B,CAAC;AAqBD;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAEsC;IAEtC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,mFAAmF;IACnF,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAA4B,CAAC;AAChF,CAAC"}

package/index.tsx

@@ -0,0 +1,94 @@
+import { BootstrapParams, Messages, bootstrap as sdkBootstrap } from '@appsemble/sdk';
+import { ComponentChild, ComponentType, createContext, render, VNode } from 'preact';
+import { useContext } from 'preact/hooks';
+
+export interface BlockProps extends BootstrapParams {
+  /**
+   * A function that must be called to indicate the block is ready to be rendered.
+   */
+  ready: () => void;
+}
+
+const Context = createContext<BlockProps>(null);
+
+/**
+ * Mount a Preact component returned by a bootstrap function in the shadow DOM of a block.
+ *
+ * @param Component The Preact component to mount.
+ * @returns A promise which gets resolved if the component calls `ready()`.
+ */
+export function mount(
+  Component: ComponentType<BlockProps>,
+): (params: BootstrapParams) => Promise<void> {
+  return (params) =>
+    new Promise((ready) => {
+      // eslint-disable-next-line react/jsx-no-constructed-context-values
+      const props = {
+        ...params,
+        ready,
+      };
+      const component = (
+        <Context.Provider value={props}>
+          <Component {...props} />
+        </Context.Provider>
+      );
+      render(component, params.shadowRoot);
+      params.utils.addCleanup(() => render(null, params.shadowRoot));
+    });
+}
+
+export function bootstrap(Component: ComponentType<BlockProps>): void {
+  sdkBootstrap(mount(Component));
+}
+
+/**
+ * A HOC which passes the Appsemble block values to he wrapped Preact component.
+ *
+ * @param Component The Preact componen to wrap.
+ * @returns The wrapper component.
+ * @deprecated Use `useBlock()` instead.
+ */
+export function withBlock<P extends {}>(
+  Component: ComponentType<Omit<BlockProps, keyof P> & P>,
+): ComponentType<P> {
+  return (props: P) => (
+    <Context.Consumer>{(values) => <Component {...props} {...values} />}</Context.Consumer>
+  );
+}
+
+export function useBlock(): BlockProps {
+  return useContext(Context);
+}
+
+interface FormattedMessagePropsWithoutValues<M extends keyof Messages> {
+  /**
+   * The ID of the message to render.
+   */
+  id: M;
+}
+
+interface FormattedMessagePropsWithValues<M extends keyof Messages> {
+  /**
+   * The ID of the message to render.
+   */
+  id: M;
+
+  /**
+   * Values to pass to the formatted message.
+   */
+  values: Messages[M] extends never ? undefined : Messages[M];
+}
+
+/**
+ * Render an Appsemble message.
+ */
+export function FormattedMessage<M extends keyof Messages>(
+  props: Messages[M] extends never
+    ? FormattedMessagePropsWithoutValues<M>
+    : FormattedMessagePropsWithValues<M>,
+): VNode {
+  const { utils } = useBlock();
+
+  // @ts-expect-error The messages interface isn’t implemented within the Preact SDK.
+  return utils.formatMessage(props.id, props.values) as ComponentChild as VNode;
+}

package/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../config/jest/config')(__dirname);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appsemble/preact",
-  "version": "0.20.8",
+  "version": "0.20.11",
   "description": "Build your own blocks using Preact",
   "keywords": [
     "app",
@@ -24,16 +24,17 @@
   "license": "LGPL-3.0-only",
   "author": "Appsemble <info@appsemble.com> (https://appsemble.com)",
   "sideEffects": false,
-  "main": "dist",
   "files": [
-    "dist"
+    "**/*.d.ts",
+    "**/*.js",
+    "!*.config.js"
   ],
   "scripts": {
-    "prepack": "tsc -p tsconfig.build.json",
+    "prepack": "tsc --noEmit false",
     "test": "jest"
   },
   "peerDependencies": {
-    "@appsemble/sdk": "0.20.8",
+    "@appsemble/sdk": "0.20.11",
     "preact": "^10"
   }
 }

package/tsconfig.json

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

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA6B,SAAS,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EAAiC,aAAa,EAAE,MAAM,EAAS,MAAM,QAAQ,CAAC;AACrF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAS1C,MAAM,OAAO,GAAG,aAAa,CAAa,IAAI,CAAC,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,UAAU,KAAK,CACnB,SAAoC;IAEpC,OAAO,CAAC,MAAM,EAAE,EAAE,CAChB,IAAI,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QACpB,mEAAmE;QACnE,MAAM,KAAK,GAAG;YACZ,GAAG,MAAM;YACT,KAAK;SACN,CAAC;QACF,MAAM,SAAS,GAAG,CAChB,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC5B,KAAC,SAAS,OAAK,KAAK,GAAI,GACP,CACpB,CAAC;QACF,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;AACP,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,SAAoC;IAC5D,YAAY,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,SAAuD;IAEvD,OAAO,CAAC,KAAQ,EAAE,EAAE,CAAC,CACnB,KAAC,OAAO,CAAC,QAAQ,cAAE,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,KAAM,MAAM,GAAI,GAAoB,CACxF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,OAAO,UAAU,CAAC,OAAO,CAAC,CAAC;AAC7B,CAAC;AAqBD;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAEsC;IAEtC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE7B,mFAAmF;IACnF,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAA4B,CAAC;AAChF,CAAC"}