Merge pull request #1128 from threefoldtech/development_UI_fix_issues

Added one more step in docs point the user what is next after building the UI package, fix linter issues
threefoldtech · Sep 24, 2023 · bf50ef8 · bf50ef8
2 parents bfa54af + 05b77b2
commit bf50ef8
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 82 deletions.
diff --git a/.github/workflows/threefold_ui_build.yaml b/.github/workflows/threefold_ui_build.yaml
@@ -1,4 +1,4 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code using yarn build-only
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code using yarn build
 
 name: Threefold UI Build
 
@@ -42,4 +42,4 @@ jobs:
       - name: Build
         run: |
           lerna run build --no-private
-          yarn workspace @threefold/ui build-only
+          yarn workspace @threefold/ui build
diff --git a/Makefile b/Makefile
@@ -42,7 +42,7 @@ else ifeq ($(project), weblets)
 else ifeq ($(project), playground)
 	cd packages/playground && yarn build
 else ifeq ($(project), UI)
-	cd packages/UI && yarn build-only
+	cd packages/UI && yarn build
 else
 	yarn lerna run build --no-private
 endif
diff --git a/packages/UI/docs/pdf_viewer.md b/packages/UI/docs/pdf_viewer.md
@@ -4,33 +4,72 @@
 
 1. [Introduction](#introduction)
 2. [Usage](#usage)
-   - [Build the PDF Signer](#build-the-pdf-signer)
+   - [Building the PDF Signer](#building-the-pdf-signer)
    - [Example of Usage](#example-of-usage)
    - [Using Providers and Extensions](#using-providers-and-extensions)
 
 ## Introduction
 
-The PDF Signer Web Component is a user-friendly PDF viewer that simplifies the process of signing PDF documents and sending them to a specified endpoint. This component is designed to make PDF signing and processing straightforward for your web applications.
+The PDF Signer Web Component simplifies the process of signing PDF documents and sending them to a specified endpoint. This user-friendly PDF viewer is designed to make PDF signing and processing straightforward for your web applications.
 
 **Key features:**
 
 - Load and view PDF files from a provided URL.
-- Enable users to sign PDF documents easily.
+- Easily sign PDF documents.
 - Seamlessly submit signed documents to a designated endpoint.
 
 ## Usage
 
-### Build the PDF Signer
+### Building the PDF Signer
 
 To use the PDF Signer Web Component, follow these steps:
 
 1. Clone the `tfgrid-sdk-ts` repository.
+
 2. Navigate to the `repository/packages/UI` directory.
-3. Run `yarn build-only` to generate the required distribution files.
+
+3. Run `yarn build` to generate the required distribution files.
+
 4. Locate the `dist` folder created in the previous step.
-5. Copy the `threefold-ui.umd.js` file and include it in your project's HTML files.
+
+5. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
+
+```html
+<body>
+  <!-- Include the PDF Signer component script -->
+  <script src="./threefold-ui.umd.js"></script>
+</body>
+```
+
 6. Copy the `dist/tailwind.css` file and use it for styling.
 
+```html
+<head>
+  <!-- Include the style and logo files -->
+  <link rel="stylesheet" href="./tailwind.css" />
+</head>
+```
+
+7. Include the `pdf-signer` custom element tag in your HTML file as follows:
+
+```html
+<body>
+  <pdf-signer
+    dest="http://localhost:3000/"
+    pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+    network="main"
+  />
+</body>
+```
+
+8. The `pdf-signer` HTML tag accepts three parameters:
+
+- `dest`: The destination where the signed script should be sent. Refer to [this document](./server_verification.md) for more information, and you can find a [server example here](../examples/server-example/).
+
+- `pdfUrl`: This is the PDF URL you want to sign its content.
+
+- `network`: This is required only if you decide to use the `threefoldConnectorProvider`. It points to the network of your account in the extension.
+
 ### Example of Usage
 
 Here's an example of how to use the PDF Signer Web Component in your HTML file:
@@ -60,19 +99,21 @@ Here's an example of how to use the PDF Signer Web Component in your HTML file:
 </html>
 ```
 
-In the example above, replace `<pdf-url>` and `<endpoint-url>` with the actual URLs for your PDF document and the destination where signed documents should be sent, also for the `<network>` should match one of the following networks `[main, test, qa, dev]`.
+In the example above, replace `<pdf-url>` and `<endpoint-url>` with the actual URLs for your PDF document and the destination where signed documents should be sent. Also, for the `<network>`, use one of the following network options: `[main, test, qa, dev]`.
 
 Feel free to customize the HTML structure and styles to match your application's design and requirements.
 
+**Now you can serve your HTML file on any live-server plugin.**
+
 ### Using Providers and Extensions
 
-The PDF Signer Web Component now supports providers/extensions for enhanced functionality. You can choose between two providers:
+The PDF Signer Web Component now supports providers and extensions for enhanced functionality. You can choose between two providers:
 
-- **threefoldSignerProvider**: A basic provider that requires a mnemonic provided in the [.env](../.env).
+- **threefoldSignerProvider**: A basic provider that requires a mnemonic provided in the [.env](../.env) file.
 
 - **threefoldConnectorProvider**: An extension that connects to the Threefold Connector extension for enhanced capabilities.
 
-To specify the provider/extension to use, you can set an environment variable in your project. For example, to use the `threefoldSignerProvider`, set the following environment variable:
+To specify the provider or extension to use, you can set an environment variable in your project. For example, to use the `threefoldSignerProvider`, set the following environment variable:
 
 ```bash
 VITE_MNEMONIC="<your_mnemonic_here>"
@@ -89,6 +130,6 @@ The component will automatically detect the environment variable and use the sel
 
 By adding this flexibility, you can choose the provider/extension that best fits your project's requirements.
 
-**Note**: If you choose to use the `threefoldConnectorProvider` extension, make sure it is installed and configured properly in your environment.
+**Note**: If you choose to use the `threefoldConnectorProvider` extension, make sure it is properly installed and configured in your environment.
 
 Now, you can seamlessly integrate PDF signing into your web application using the PDF Signer Web Component with your preferred provider/extension.
diff --git a/packages/UI/docs/script_editor.md b/packages/UI/docs/script_editor.md
@@ -10,26 +10,59 @@
 
 ## Introduction
 
-The Script Editor Web Component is a versatile tool that allows developers to seamlessly integrate a code editor into their web applications. It offers features like script management and code copying, making it ideal for building code-related applications or platforms.
+The Script Editor Web Component is a powerful tool that enables developers to seamlessly integrate a code editor into their web applications. It offers essential features such as script management and code copying, making it an ideal choice for building code-related applications or platforms.
 
 **Key features:**
 
-- Support for managing scripts.
-- Code copying.
+- Script management support.
+- Code copying functionality.
 
 ## Usage
 
 ### Building the Script Editor
 
-To create an instance of the Script Editor, you need to build the package first and then copy the generated `dist` folder into your project:
+To create an instance of the Script Editor, follow these steps:
 
 1. Clone the `tfgrid-sdk-ts` repository.
+
 2. Navigate to the `repository/packages/UI` directory.
-3. Run `yarn build-only` to generate the required distribution files.
+
+3. Run `yarn build` to generate the required distribution files.
+
 4. Locate the `dist` folder created in the previous step.
-5. Copy the `threefold-ui.umd.js` file and include it in your project's HTML files.
+
+5. Copy the `dist/threefold-ui.umd.js` file and include it in your project's HTML files.
+
+```html
+<body>
+  <!-- Include the Script Editor component script -->
+  <script src="./threefold-ui.umd.js"></script>
+</body>
+```
+
 6. Copy the `dist/tailwind.css` file and use it for styling.
 
+```html
+<head>
+  <!-- Include the style and logo files -->
+  <link rel="stylesheet" href="./tailwind.css" />
+</head>
+```
+
+7. Include the `script-editor` custom element tag in your HTML file as follows:
+
+```html
+<body>
+  <script-editor dest="http://localhost:3000/" network="main" />
+</body>
+```
+
+8. The `script-editor` HTML tag accepts two parameters:
+
+   - `dest`: The destination where the signed script should be sent. Refer to [this document](./server_verification.md) for more information, and you can find a [server example here](../examples/server-example/).
+
+   - `network`: This is required only if you decide to use the `threefoldConnectorProvider`. It points to the network of your account in the extension.
+
 ### Example of Usage
 
 Here's an example of how to use the Script Editor Web Component in your HTML file:
@@ -60,6 +93,8 @@ In the example above, replace `<dest>` and `<network>` with the actual destinati
 
 Feel free to customize the HTML structure and styles to match your application's design and requirements.
 
+**Now you can serve your HTML file on any live-server plugin.**
+
 ### Using Providers and Extensions
 
 The Script Editor Web Component now supports providers and extensions for enhanced functionality. You can choose between two providers:

diff --git a/packages/UI/docs/web_component.md b/packages/UI/docs/web_component.md
@@ -15,14 +15,14 @@ $ cd packages/UI
 2. Build the package:
 
 ```sh
-$ tfgrid-sdk-ts/packages/UI: yarn build-only
+$ tfgrid-sdk-ts/packages/UI: yarn build
 ```
 
 3. Copy the `dist` folder into the `html-tag-example/dist` directory:
 
 ```sh
 $ tfgrid-sdk-ts/packages/UI: cd ...
-$ tfgrid-sdk-ts: cp packages/UI/dist packages/UI/src/examples/html-tag-example/
+$ tfgrid-sdk-ts: cp packages/UI/dist packages/UI/examples/html-tag-example/
 ```
 
 4. Run the `index.html` file in a local server and navigate to it. This will allow you to test and interact with the `<pdf-signer />` and `<script-editor />` tags within your web application.

diff --git a/packages/UI/examples/html-tag-example/README.md b/packages/UI/examples/html-tag-example/README.md
@@ -15,7 +15,7 @@ $ cd packages/UI
 2. Build the package:
 
 ```sh
-$ tfgrid-sdk-ts/packages/UI: yarn build-only
+$ tfgrid-sdk-ts/packages/UI: yarn build
 ```
 
 3. Copy the `dist` folder into the `html-tag-example/dist` directory:

diff --git a/packages/UI/src/apiCustomElement.ts b/packages/UI/src/apiCustomElement.ts
@@ -178,8 +178,8 @@ export class VueElement extends BaseClass {
     );
 
     if (this._config.shadowRoot) {
-      if (this.shadowRoot && hydrate) {
-        hydrate(this._createVNode(), this._root!);
+      if (this._root && this.shadowRoot && hydrate) {
+        hydrate(this._createVNode(), this._root);
       } else {
         const __DEV__ = true;
         if (__DEV__ && this.shadowRoot) {
@@ -195,8 +195,8 @@ export class VueElement extends BaseClass {
         }
       }
     } else {
-      if (hydrate) {
-        hydrate(this._createVNode(), this._root!);
+      if (hydrate && this._root) {
+        hydrate(this._createVNode(), this._root);
       }
     }
   }
@@ -242,7 +242,9 @@ export class VueElement extends BaseClass {
     }
     nextTick(() => {
       if (!this._connected) {
-        render(null, this._root!);
+        if (this._root) {
+          render(null, this._root);
+        }
         this._instance = null;
       }
     });
@@ -262,7 +264,9 @@ export class VueElement extends BaseClass {
     // watch future attr changes
     this._ob = new MutationObserver(mutations => {
       for (const m of mutations) {
-        this._setAttr(m.attributeName!);
+        if (m.attributeName) {
+          this._setAttr(m.attributeName);
+        }
       }
     });
 
@@ -376,7 +380,9 @@ export class VueElement extends BaseClass {
   }
 
   private _update() {
-    render(this._createVNode(), this._root!);
+    if (this._root) {
+      render(this._createVNode(), this._root);
+    }
   }
 
   private _createVNode(): VNode<any, any> {
@@ -394,64 +400,14 @@ export class VueElement extends BaseClass {
           }
           return res;
         };
-        return this._slots!.map(ele => {
+        return this._slots?.map(ele => {
           const attrs = ele.attributes ? toObj(ele.attributes) : {};
           attrs.innerHTML = ele.innerHTML;
           return createVNode(ele.tagName, attrs, null);
         });
       };
     }
     const vnode = createVNode(this._def, extend({}, this._props), childs);
-    if (!this._instance) {
-      vnode.ce = (instance: ComponentInternalInstance | null) => {
-        this._instance = instance;
-        if (this._config.shadowRoot) {
-          instance.isCE = true;
-        }
-        // HMR
-        const __DEV__ = true;
-        if (__DEV__) {
-          instance.ceReload = (newStyles: string[] | undefined) => {
-            // always reset styles
-            if (this._styles) {
-              this._styles.forEach(s => this._root!.removeChild(s));
-              this._styles.length = 0;
-            }
-            this._applyStyles(newStyles);
-            this._instance = null;
-            this._update();
-          };
-        }
-
-        const dispatch = (event: string, args: any[]) => {
-          this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args,
-            }),
-          );
-        };
-
-        // intercept emit
-        instance.emit = (event: string, ...args: any[]) => {
-          // dispatch both the raw and hyphenated versions of an event
-          // to match Vue behavior
-          dispatch(event, args);
-          if (hyphenate(event) !== event) {
-            dispatch(hyphenate(event), args);
-          }
-        };
-
-        // locate nearest Vue custom element parent for provide/inject
-        let parent: Node | null = this;
-        while ((parent = parent && (parent.parentNode || (parent as ShadowRoot).host))) {
-          if (parent instanceof VueElement) {
-            instance.parent = parent._instance;
-            instance.provides = parent._instance!.provides;
-            break;
-          }
-        }
-      };
-    }
     return vnode;
   }
 
@@ -460,7 +416,7 @@ export class VueElement extends BaseClass {
       styles.forEach(css => {
         const s = document.createElement("style");
         s.textContent = css;
-        this._root!.appendChild(s);
+        this._root?.appendChild(s);
         // record for HMR
         const __DEV__ = true;
         if (__DEV__) {

diff --git a/packages/UI/src/modules.d.ts b/packages/UI/src/modules.d.ts
@@ -0,0 +1 @@
+declare module "html-parsed-element";