JSPM

If the video looks blurry, please play it in fullscreen

https://user-images.githubusercontent.com/11073373/153986424-9e75c62e-42a8-49eb-b9af-144801067e00.mp4

Below is the summary and some information of the video:

1. Open Blackprint editor's sketch page
2. Creating notes node (this module get loaded when you choose the example)
3. Load nodes-polkadot.js module from NPM repository
   • You may see a loading progress on your first try
4. Creating new nodes from nodes-polkadot.js module
5. Opening example that get loaded to our editor when we choose the module
   • The example is loaded from the published release on NPM registry
   • But you can also manually copy paste the JSON content from the /example directory to load it on the editor
6. Open encrypt/decrypt example
   • If the published example for encrypt/decrypt was looks compact and complicated, please import from the updated /example instead
   • On this example there are 2 keypair that is randomly generated, the address may different and causes the Decrypt Data node can't decrypted the data from Encrypt Data node because the author address was different
   • You will need to copy Alice's wallet address from Log node to Input node that connected to Encrypt Data, the node then will encrypt the data with Alice's public key/wallet address
   • The testing message will now get encrypted for Alice's wallet from Bob's wallet and can be decrypted by Alice's wallet where the author is Bob's wallet
7. Open sign verify: extension example
   • On your first try, you may need to allow Blackprint on your Polkadot.js's browser extension
   • Then, please copy your wallet address for testing into the input box
   • After you connect the signer, it will ask your extension to sign the message: testing
   • By the way if you see an error message on my DevTools, it's because I canceled the extension to sign the message

Blackprint is designed to be flexible, it's not limited to browser only or for web development only. For an example you can also build a Telegram bot with Blackprint for sending balances between account:

If the video looks blurry, please play it in fullscreen

https://user-images.githubusercontent.com/11073373/187060396-f7d66d23-f69d-4237-9393-9c7e26874ef2.mp4

When using Deno, it's pretty easy to start with as you can easily import module with URL natively. Let's get straight into the code, for a quick start you can copy and paste the code below:

import Blackprint from 'https://cdn.skypack.dev/@blackprint/engine';

// Only allow load module from specific domain
Blackprint.allowModuleOrigin('cdn.jsdelivr.net');

// Fix the bundled version of Polkadot.js's library for Deno
globalThis.location = { href: '' };

// Create the instance and import the JSON
let MyInstance = new Blackprint.Engine();
await MyInstance.importJSON(`{ ... }`);

// Don't forget to add an ID to your node so you can easily access it like below
let { your_node_id, other_node_id } = MyInstance.ref;

After you replaced the JSON, you can run the app with:

$ deno run --allow-net ./init.mjs

https://user-images.githubusercontent.com/11073373/187770396-4048ee38-80b4-4dc6-b77e-4de530d4e01b.mp4

When using Node.js you will need to install the Blackprint Engine and the modules. But you can also import the module via URL and it will be downloaded when you run your app.

$ cd /your/project/folder
$ npm init
$ pnpm i @blackprint/engine @blackprint/nodes-polkadot.js

For a quick start, you can copy and paste the code below:

import Blackprint from "@blackprint/engine";

// For this module on Node.js, you must import/install this module manually as it has dependencies
import "@blackprint/nodes-polkadot.js/dist/nodes-polkadotjs.mjs";

let json = { ... };

// Remove Polkadot module URL as it already been loaded manually
json._.moduleJS = json._.moduleJS.filter(url => !url.includes('@blackprint/nodes-polkadot.js'));

// Only allow load module from specific domain (if using URL module loader)
Blackprint.allowModuleOrigin('cdn.jsdelivr.net');

// Create the instance and import the JSON
let MyInstance = new Blackprint.Engine();
await MyInstance.importJSON(json);

// Don't forget to add an ID to your node so you can easily access it like below
let { your_node_id, other_node_id } = MyInstance.ref;

After you replaced the JSON, you can run the app with:

$ node ./init.mjs

# If you want to use HTTPS module loader you need to use this
$ node --loader ./node_modules/@blackprint/engine/es6-https-loader.mjs ./init.mjs

https://user-images.githubusercontent.com/11073373/187770503-c1a3fe92-c005-4d8d-96e4-8cb67e49c536.mp4

For browser, you will need to import the Blackprint Engine and the Vue framework. Below is the HTML example if you want to use CDN to load the library:

<head>
  <!-- Blackprint Engine -->
  <script src="https://cdn.jsdelivr.net/npm/@blackprint/engine"></script>
  
  <!-- Vue 3 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

If you prefer to use bundler like Webpack or Vite, you may need to install the module with a package manager first:

$ pnpm install @blackprint/engine vue@next

After that you can write your Vue template and bind the engine instance with your Vue app:

<body>
  <!-- Your Vue template -->
  <div id="v-model-basic">
    Port value: {{ your_node_id.Output.MyPort }}

    <input @input="your_node_id.Input.MyPortIn = $event.target.value">
  </div>

  <script>
    // Only allow module import from cdn.jsdelivr.net  
    Blackprint.allowModuleOrigin('cdn.jsdelivr.net');

    // Create new engine instance
    var instance = new Blackprint.Engine();

    // You can copy paste this to Blackprint Editor
    instance.importJSON(`{ ... }`).then(function(){
      // Create Vue app and bind the Blackprint port references with the app
      Vue.createApp({
        data() {
          // Obtain Interface by ID and get the port references
          let { your_node_id, other_node_id } = instance.ref;

          // Vue 3 is using Proxy for their reactivity
          // You may need to use event listener and update Vue element's value manually like:
          your_node_id.IOutput.MyPort.on('value', ({ port })=> this.myProp = port.value);

          // Put the ports reference to this component scope
          return { your_node_id, other_node_id };
        }
      }).mount('#v-model-basic');
    });
  </script>
</body>

That's it, don't forget to add an ID to your node so you can easily access it from instance.ref.

Some example:

1. Blackprint + Vue 3
2. Blackprint + React

After running the module server, you can go to https://blackprint.github.io/dev.html and open a new sketch. Click the main menu on the top left and click Remote -> Module, then paste your module server's URL the click Connect.