automatic including of sdk in web app

10 months ago · f1c01f9d47
parent 13d6e5e73f
commit f1c01f9d47
9 changed files with 143 additions and 25 deletions
--- a/README.md
+++ b/README.md
@ -39,6 +39,7 @@ cargo install wasm-pack --git https://github.com/rustwasm/wasm-pack.git --rev c2
 cargo install cargo-watch
 // optionally, if you want a Rust REPL: cargo install evcxr_repl
 git clone git@git.nextgraph.org:NextGraph/nextgraph-rs.git
+// or if you don't have a git account: git clone https://git.nextgraph.org/NextGraph/nextgraph-rs.git
 cd nextgraph-rs
 cargo build
 ```
@ -58,7 +59,7 @@ The crates are organized as follow :
 - ng-wallet : keeps the secret keys of all identities of the user in a safe wallet
 - [ng-sdk-js](ng-sdk-js/README.md) : contains the JS SDK, with example apps: web app, react app, or node service.
 - [ng-app](ng-app/README.md) : all the native apps, based on Tauri, and the web app.
- [ngone](ngone/README.md) : server for nextgraph.one (boostrap into the right app)
+- [ngone](ngone/README.md) : server for nextgraph.one (helps user bootstrap into the right app)
 - [ngaccount](ngaccount/README.md) : server for nextgraph's Broker Service Provider account manager.

 ### Run
@ -125,7 +126,6 @@ Otherwise, build from source the single-file release of ng-app
 npm install -g pnpm
 cd ng-sdk-js
 wasm-pack build --target bundler
-// uncomment line 14 of ng-app/src/App.svelte: import * as api from "ng-sdk-js";
 cd ../ng-app
 pnpm install
 pnpm webfilebuild
@ -146,7 +146,7 @@ The CLI tool can be obtained with :
 cargo build -r -p ngcli
 ```

-you can then use the binary `target/release/ngd`
+you can then use the binary `target/release/ngcli`

 For usage, see the documentation [here](ngd/README.md).

--- a/ng-app/README.md
+++ b/ng-app/README.md
@ -34,22 +34,23 @@ pnpm webdev

 #### Prod

-```
-pnpm webbuild
-// then the application is available in dist-web folder
-// can be served with:
-cd dist-web ; python3 -m http.server
-```
-
-in order to build a self-contained html file, useful for offline use, do:
+this will produce a single html file embedding all the resources. this is what you need for production

 ```
-// uncomment line 14 of src/App.svelte: import * as api from "ng-sdk-js";
 pnpm webfilebuild
 // single file is available in dist-file/index.html

 ```

+alternatively, to obtain a regular dist folder with all resources (we dont use it anymore):
+
+```
+pnpm webbuild
+// then the application is available in dist-web folder
+// can be served with:
+cd dist-web ; python3 -m http.server
+```
+
 ## Desktop

 ```
--- a/ng-app/index-native.html
+++ b/ng-app/index-native.html
--- a/ng-app/index-web.html
+++ b/ng-app/index-web.html
@ -0,0 +1,61 @@
+<!--
+// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,
+    PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjUg
+    MjI1Ij48Y2lyY2xlIGN4PSIxMDkuODgxIiBjeT0iMTEyLjkwNSIgcj0iMTA2Ljk4IiBzdHlsZT0i
+    ZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMC4y
+    NjgzNzU7Ij48L2NpcmNsZT48cGF0aCBkPSJNOTguMzQzIDE5MC4yNjFjLTE3Ljk0LTIuNzI3LTMz
+    LjMzMS0xMC42ODMtNDUuNzM1LTIzLjYzOC0xNC4wMDYtMTQuNjI5LTIxLjQzLTMzLjIxLTIxLjQz
+    LTUzLjYzNSAwLTEwLjIxOCAxLjctMTkuNDQ0IDUuMjIxLTI4LjMzMiA0LjI4Ny0xMC44MiAxMC4w
+    MzgtMTkuMzkgMTguNTM1LTI3LjYyMiA0LjczLTQuNTgyIDYuNjA3LTYuMTA3IDExLjI4MS05LjE2
+    MyAxMS45LTcuNzggMjQuMTc0LTExLjg4IDM4LjA5Ni0xMi43MjUgMTkuODA1LTEuMjAxIDM5LjEx
+    MiA1LjExMyA1NC42MDMgMTcuODYgMS41MDcgMS4yNCAyLjczIDIuMzU4IDIuNzE2IDIuNDg2LS4w
+    MTMuMTI4LTMuODU4IDMuNjM1LTguNTQ0IDcuNzkzLTQuNjg2IDQuMTU3LTEwLjA0NyA4Ljk2Mi0x
+    MS45MTQgMTAuNjc3LTEuODY2IDEuNzE1LTMuNTQgMy4xMTktMy43MjEgMy4xMTktLjE4MSAwLTEu
+    NC0uNzQ2LTIuNzEtMS42NTYtNy41My01LjIzOS0xNS45OTQtNy44MjItMjUuNjI1LTcuODIyLTEy
+    LjczMiAwLTIzLjI1IDQuMzM4LTMyLjE0NCAxMy4yNTctNi4zOTYgNi40MTQtMTAuNzA0IDE0LjU1
+    Ni0xMi41IDIzLjYyNC0uNjkxIDMuNDg4LS42OSAxMy41My4wMDIgMTcuMDA5IDMuNzA1IDE4LjYy
+    NiAxOC4zMTggMzMuMTAyIDM2LjY0MiAzNi4yOTcgNC4xNjQuNzI2IDExLjk4LjcxMiAxNS45OS0u
+    MDI4IDE0LjAzMi0yLjU5NCAyNS44Ni0xMS4zNjggMzIuMjY1LTIzLjkzNi43NzQtMS41MTkgMS4y
+    Ni0yLjg4NSAxLjA4LTMuMDM2LS4xNzgtLjE1Mi02Ljg3NC0xLjE3OC0xNC44NzctMi4yODEtOS43
+    OC0xLjM0OC0xNC45MjQtMi4yMTQtMTUuNjg1LTIuNjQxLTEuNTItLjg1NC0yLjgzNi0yLjg4OC0y
+    LjgzNi00LjM4NiAwLTEuMTczIDIuMDI3LTE1Ljg2OSAyLjQ5LTE4LjA2LjI5OC0xLjQwMSAyLjQy
+    Ni0zLjQ5MyAzLjg0NC0zLjc3Ny42MjItLjEyNCA4LjgyNy44NTYgMTguMjggMi4xODQgOS40MzQg
+    MS4zMjUgMTcuMjYzIDIuMjk0IDE3LjM5OSAyLjE1NC4xMzYtLjE0IDEuMTE4LTYuNTQ4IDIuMTgz
+    LTE0LjI0IDEuMTA4LTggMi4yMDQtMTQuNjAyIDIuNTYyLTE1LjQyNi4zNDQtLjc5MyAxLjExLTEu
+    ODUgMS43MDMtMi4zNDggMi4wNjMtMS43MzYgMy4xNDMtMS43ODUgMTIuMjA0LS41NTMgOS42MzYg
+    MS4zMSAxMC43MDkgMS41NjIgMTIuMjggMi44ODUgMS42NDQgMS4zODMgMi4yNzQgMi44MSAyLjI2
+    IDUuMTIzLS4wMDcgMS4xMDItLjkyMiA4LjI5Ny0yLjAzMyAxNS45ODktMS4xMTIgNy42OTEtMS45
+    NzIgMTQuMDQtMS45MTIgMTQuMTA5LjA2MS4wNjggNy4xNjcgMS4xMTEgMTUuNzkyIDIuMzE4IDEx
+    LjEwNSAxLjU1NCAxNi4wMDggMi4zODcgMTYuODAyIDIuODU2IDEuNTMuOTA0IDIuNDggMi42NDgg
+    Mi40NSA0LjQ5OC0uMDQ2IDIuODQ0LTIuNDEzIDE4LjEyMy0yLjk3NSAxOS4yMS0uNjYyIDEuMjgt
+    Mi42MDMgMi41NDgtMy45MjEgMi41NjItLjUyLjAwNS03Ljg3NS0uOTYtMTYuMzQ0LTIuMTQ0LTgu
+    NDctMS4xODUtMTUuNDc2LTIuMDc3LTE1LjU3LTEuOTgzLS4wOTQuMDk0LTEuMTg4IDcuMzQxLTIu
+    NDMxIDE2LjEwNi0xLjQ0IDEwLjE1My0yLjQ5OCAxNi40MzYtMi45MTYgMTcuMzE2LS43MjUgMS41
+    MjgtMi43NjIgMy4wNjMtNC41MzggMy40MTgtLjk1Ny4xOTEtMTAuOS0uOTI4LTEzLjU5OC0xLjUz
+    LS41NDgtLjEyMy0xLjg5Mi42NzItNC41MSAyLjY2NS0xMS4yNjMgOC41NzYtMjQuMzQyIDEzLjkx
+    LTM4LjM1NyAxNS42NDItNC40LjU0NC0xNS43MjcuNDMzLTE5Ljg1NC0uMTk1eiIgc3R5bGU9ImZp
+    bGw6IHJnYig3MywgMTE0LCAxNjUpOyBmaWxsLW9wYWNpdHk6IDE7IHN0cm9rZTogcmdiKDczLCAx
+    MTQsIDE2NSk7IHN0cm9rZS13aWR0aDogMC4zNzc5NzY7IHN0cm9rZS1vcGFjaXR5OiAxOyI+PC9w
+    YXRoPjwvc3ZnPg==" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NextGraph</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main-web.ts"></script>
+  </body>
+</html>
--- a/ng-app/package.json
+++ b/ng-app/package.json
@ -4,13 +4,13 @@
  "version": "0.1.0",
  "type": "module",
  "scripts": {
-    "dev": "vite",
-    "webdev": "cross-env NG_APP_WEB=1 TAURI_DEBUG=1 vite",
-    "webbuild": "cross-env NG_APP_WEB=1 vite build && rm -f ./dist-web/assets/*.svg && tar --exclude .DS_Store -zcvf dist-web.tar.gz dist-web",
-    "webfilebuild": "cross-env NG_APP_WEB=1 NG_APP_FILE=1 vite build && node prepare-app-file.cjs && rm -rf ./dist-file/assets && tar --exclude .DS_Store -zcvf dist-file.tar.gz dist-file",
-    "webfilebuilddebug": "cross-env NG_APP_WEB=1 NG_APP_FILE=1 TAURI_DEBUG=1 vite build -m debug",
-    "build": "vite build && rm -f ./dist/assets/*.svg",
-    "buildfile": "cross-env NG_APP_FILE=1 vite build && rm -rf ./dist/assets && tar --exclude .DS_Store -zcvf dist.tar.gz dist",
+    "dev": "shx cp index-native.html index.html && vite",
+    "webdev": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 TAURI_DEBUG=1 vite",
+    "webbuild": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 vite build && rm -f ./dist-web/assets/*.svg && tar --exclude .DS_Store -zcvf dist-web.tar.gz dist-web",
+    "webfilebuild": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 NG_APP_FILE=1 vite build && node prepare-app-file.cjs && rm -rf ./dist-file/assets && tar --exclude .DS_Store -zcvf dist-file.tar.gz dist-file",
+    "webfilebuilddebug": "shx cp index-web.html index.html && cross-env NG_APP_WEB=1 NG_APP_FILE=1 TAURI_DEBUG=1 vite build -m debug",
+    "build": "shx cp index-native.html index.html && vite build && rm -f ./dist/assets/*.svg",
+    "buildfile": "shx cp index-native.html index.html && cross-env NG_APP_FILE=1 vite build && rm -rf ./dist/assets && tar --exclude .DS_Store -zcvf dist.tar.gz dist",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "tauri": "tauri"
@ -38,6 +38,7 @@
    "node-gzip": "^1.1.2",
    "postcss": "^8.4.23",
    "postcss-load-config": "^4.0.1",
+    "shx": "^0.3.4",
    "svelte": "^3.54.0",
    "svelte-check": "^3.0.0",
    "svelte-preprocess": "^5.0.3",
--- a/ng-app/src/App.svelte
+++ b/ng-app/src/App.svelte
@ -10,8 +10,6 @@
 -->

 <script lang="ts">
-  // this line is needed to have the SDK working when compiling for a single file bundle (pnpm webfilebuild)
-  // import * as api from "ng-sdk-js";
  import { push, default as Router } from "svelte-spa-router";
  import { onMount, tick, onDestroy } from "svelte";
  import {
--- a/ng-app/src/main-web.ts
+++ b/ng-app/src/main-web.ts
@ -0,0 +1,19 @@
+// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+
+import "./app.postcss";
+import "./styles.css";
+import * as api from "ng-sdk-js";
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.getElementById("app"),
+});
+
+export default app;
--- a/ng-sdk-js/README.md
+++ b/ng-sdk-js/README.md
@ -36,6 +36,11 @@ npm i ng-sdk-js

 ## For contributors

+We recommend contributors to use the production build, as the creation and opening of wallets is very slow in the dev build.
+Only use the dev build when debugging the sdk. see the next chapter for the production build.
+Please note that the dev and prod builds share the same output folder, they thus override each other.
+When building the app, be sure to have the production build of the SDK in the output folder.
+
 ```
 wasm-pack build --dev --target bundler

@ -58,7 +63,7 @@ Or automated testing with headless chrome:
 wasm-pack test --chrome --headless
 ```

-## Production built
+## Production build

 ```
 wasm-pack build --target bundler
@ -72,7 +77,7 @@ cd ../pkg-node
 npm publish --access=public
 ```

-### Plain JS web app
+### Example Plain JS web app

 ```
 cd ../app-web
@ -84,7 +89,7 @@ npm start

 Open this URL in browser : [http://localhost:8080](http://localhost:8080)

-### React web app
+### Example React web app

 ```
 cd ../app-react
@ -96,7 +101,7 @@ npm run dev

 This URL will open automatically in browser : [http://localhost:8080](http://localhost:8080)

-### NodeJS app
+### Example NodeJS app

 ```
 cd ../app-node
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -25,6 +25,7 @@ importers:
      node-gzip: ^1.1.2
      postcss: ^8.4.23
      postcss-load-config: ^4.0.1
+      shx: ^0.3.4
      svelte: ^3.54.0
      svelte-check: ^3.0.0
      svelte-preprocess: ^5.0.3
@ -59,6 +60,7 @@ importers:
      node-gzip: 1.1.2
      postcss: 8.4.24
      postcss-load-config: 4.0.1_postcss@8.4.24
+      shx: 0.3.4
      svelte: 3.59.1
      svelte-check: 3.4.3_sxhny56dlbcmwov4vk7qwrzshi
      svelte-preprocess: 5.0.4_vmz4xia4c7tzh4ii3qac2x3tom
@ -1098,6 +1100,11 @@ packages:
      p-event: 4.2.0
    dev: true

+  /interpret/1.4.0:
+    resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
  /ip-regex/4.3.0:
    resolution: {integrity: sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==}
    engines: {node: '>=8'}
@ -1468,6 +1475,13 @@ packages:
      picomatch: 2.3.1
    dev: true

+  /rechoir/0.6.2:
+    resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      resolve: 1.22.2
+    dev: true
+
  /regexparam/2.0.1:
    resolution: {integrity: sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==}
    engines: {node: '>=8'}
@ -1540,6 +1554,25 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /shelljs/0.8.5:
+    resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+      interpret: 1.4.0
+      rechoir: 0.6.2
+    dev: true
+
+  /shx/0.3.4:
+    resolution: {integrity: sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+      shelljs: 0.8.5
+    dev: true
+
  /signal-exit/3.0.7:
    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
    dev: true