@formsort/custom-question-api - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

lib/utils.d.ts

 import WindowMessageEventsEmitter from './WindowMessageEmitter';
 export declare const getEmitter: () => WindowMessageEventsEmitter;
-export declare const sendMessageToWindowParent: (type: string, payload?: any) => void;
+export declare const sendMessageToWindowParent: (type: string, payload?: any, requestId?: string | undefined) => void;
 export declare const getValueFromWindowParent: <T>(requestEventType: string, responseEventType: string, requestPayload?: any) => Promise<T>;

lib/utils.js

@@ -11,3 +11,3 @@ "use strict";
 };
-exports.sendMessageToWindowParent = function (type, payload) {
+exports.sendMessageToWindowParent = function (type, payload, requestId) {
     if (!window.parent) {
@@ -19,11 +19,17 @@ throw new Error('Custom questions must run within a Formsort flow custom question to work.');
         payload: payload,
+        requestId: requestId,
     }, '*');
 };
 exports.getValueFromWindowParent = function (requestEventType, responseEventType, requestPayload) {
+    var requestId = Math.random().toString();
     return new Promise(function (resolve) {
-        exports.getEmitter().once(responseEventType, function (res) {
-            resolve(res);
-        });
-        exports.sendMessageToWindowParent(requestEventType, requestPayload);
+        var onMessage = function (value, returningRequestId) {
+            if (requestId === returningRequestId) {
+                resolve(value);
+                exports.getEmitter().removeListener(responseEventType, onMessage);
+            }
+        };
+        exports.getEmitter().on(responseEventType, onMessage);
+        exports.sendMessageToWindowParent(requestEventType, requestPayload, requestId);
     });
 };

lib/WindowMessageEmitter.js

@@ -22,2 +22,3 @@ "use strict";
     constants_1.CustomQuestionMessage.SET_RESPONDER_UUID_MSG,
+    constants_1.CustomQuestionMessage.SET_SEMANTIC_ANSWER_VALUE_MSG,
 ]);
@@ -29,7 +30,7 @@ var WindowMessageEventsEmitter = /** @class */ (function (_super) {
         _this.onWindowMessage = function (e) {
-            var _a = e.data, type = _a.type, payload = _a.payload;
+            var _a = e.data, type = _a.type, payload = _a.payload, requestId = _a.requestId;
             if (!type || !EVENTS_TO_EMIT.has(type)) {
                 return;
             }
-            _this.emit(type, payload);
+            _this.emit(type, payload, requestId);
         };
@@ -36,0 +37,0 @@ window.addEventListener('message', _this.onWindowMessage);

package.json

 {
   "name": "@formsort/custom-question-api",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Helpers for implementing custom questions in Formsort",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # @formsort/custom-question-api
 
-Helpers for implementing custom questions in Formsort.
+Helpers for implementing custom questions in [Formsort](https://formsort.com).
 
 Custom questions allow extending the Formsort platform with custom behavior, without needing to rewrite an entire form flow from scratch.
 
-## Devlopment workflow
+## Development workflow
 
+0. Build your custom question using whatever javascript framework you'd like
+1. Run [ngrok](https://ngrok.com/) to expose your local server on a public IP with HTTPs
+2. Use the formsort [Custom question scaffold](https://formsort.com/tools/custom-question-scaffold/) to load your custom question and test existing answers.
+
+### Directly within formsort
+
 1. Add a **custom** question within a Formsort flow.
-2. Set the **source url** to a URL with a custom question renderer (`localhost` is best for development).
+2. Set the **source url** (proxied to a URL with a custom question renderer (`localhost` is best for development).
 3. Load the question in the live preview window.
 4. Use the helpers in this library to communicate with Formsort.
-5. When you're ready, deploy your question question to a publicly available URL, update the **source url** to that, and you're good to go.
 
+## Deployment
+
+When you're ready, deploy your question question to a publicly available URL, update the **source url** to that, and you're good to go. Formsort preloads custom questions, so you don't need to worry too much about bandwidth.
+
 ## Usage
@@ -39,3 +48,5 @@
 
-### `getAnswerValue() => Promise<any>`
+```tsx
+getAnswerValue() => Promise<any>
+```
 
@@ -46,23 +57,47 @@ Returns a promise for the current value of the answer this question is collecting. It may be undefined.
 
-### `setAnswerValue(value: number | string | boolean) => void`
+```tsx
+getAllAnswerValues() => Promise<{ [key: string]: any}>
+```
 
+Returns a promise for an object containing _all_ of the answers provided by the receipient thus far in filling out their flow. The keys are the variable names as defined within Formsort.
+
+```tsx
+getResponderUuid() => Promise<string>
+```
+
+Get the current responder's UUID. Useful if you need to look something up about this user that isn't within the Formsort answer set.
+
+```tsx
+setAnswerValue(value: number | string | boolean) => void
+```
+
 Sets the value for this question's answer. If you have `Can autoadvance` checked within the Formsort studio settings for this question and this is the last remaining question within the step, the flow will advance to the next step.
 
-### `clearAnswerValue() => void`
+```tsx
+clearAnswerValue() => void
+```
 
 Resets the answer for this particular question's answer.
 
-### `getAllAnswerValues() => Promise<{ [key: string]: any}>`
+```tsx
+getAllAnswerValues() => Promise<{ [key: string]: any}>
+```
 
 Returns a promise for an object containing _all_ of the answers provided by the receipient thus far in filling out their flow. The keys are the variable names as defined within Formsort.
 
-### `getSemanticAnswerValue(semanticType: AnswerSemanticType) => Promise<any>`
+```tsx
+getSemanticAnswerValue(semanticType: AnswerSemanticType) => Promise<any>
+```
 
 Returns a promise for the value of a specific _semantic_ answer value, such as `responder_email`. This is useful to make your custom questions more modular. Depending on an answer variable name being `email` or `userEmail` is not reliable, but using semantic meaning, answers can be looked up by what they represent, even if a particular flow or variant references them differently.
 
-### `getResponderUuid() => Promise<string>`
+```tsx
+getResponderUuid() => Promise<string>
+```
 
 Get the current responder's UUID. Useful if you need to look something up about this user that isn't within the Formsort answer set.
 
-### `setQuestionSize(width?: number, height?: number) => void`
+```
+setQuestionSize(width?: number, height?: number) => void
+```
 
@@ -69,0 +104,0 @@ Sets the width and height of the question within Formsort.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13836

increased by11.32%

Lines of code

124

increased by5.98%

Number of lines in readme file

158

increased by28.46%

No dependency changes