How do you export a class from a web module?

Hi All,

I have this code below and wish to utilise it within a .JSW then call it from page code, usually there is a export and import process with functions, but how do we do this with a class? would it be as simple as “export class Block…” and then import on page code as “import Block from ‘backend/aModule.jsw’;” and then if there we further functions call them from the import, for example where is says compute hash there being a different action and it called createHash it would look like Block.createHash() for example:

function createNewBlock(){
var index;
var timestamp = Date.now();
var reference = uuidv4() ;
Block(index, timestamp, transactions, reference, data, precedingHash = " ");
}
class Block {
    constructor(index, timestamp, transactions, reference, data, precedingHash = " ") {
 this.index = index;
 this.timestamp = Date.now();
 this.reference = uuidv4();
 this.transactions = Transaction;
 this.data = data;
 this.precedingHash = precedingHash;
 this.hash = this.computeHash();
 this.nonce = 0;
    }

    computeHash() {
 return SHA256(
 this.index +
 this.precedingHash +
 this.timestamp +
 this.reference +
            JSON.stringify(this.data) +
            JSON.stringify(this.transactions) +
 this.nonce
        ).toString();
    }

    mineBlock(difficulty) {
 while (
 this.hash.substring(0, difficulty) !== Array(difficulty + 1).join("0")
        ) {
 this.nonce++;
 this.hash = this.computeHash();
        }
        console.log("BLOCK MINED:" + this.hash);
    }
}

any help and answers would be greatly appreciated.

Best wishes,

Simon

Hi Simon,

I had a go at exporting a class module to the front-end but was not able to. I’ll investigate further to see if there’s a solution.

However, as a workaround instead of trying to create and export a class you can try modifying your backend code and create a factory function instead and export it that way.

I created a simple example for demonstration:

backend/constructor.jsw

export function createPerson(name, age) {
 return {name, age};
}

client-side code

import { createPerson } from 'backend/constructor.jsw';

$w.onReady(function () {
 let john = createPerson('John', 27)
   .then((person) => {
    console.log(person);
    });
});

returns an Object

I also found these helpful links you may want to check out.

I hope this helps out!

Best regards,
Miguel

Hi Miguel,

Many thanks for taking the time to answer my question, I will look to see if I can do as you say, I was just not sure if using a class function if it would be as simple as the last line of the code that I have updated below:

class Block {
    constructor(index, timestamp, transactions, reference, data, precedingHash = " ") {
 this.index = index;
 this.timestamp = Date.now();
 this.reference = uuidv4();
 this.transactions = Transaction;
 this.data = data;
 this.precedingHash = precedingHash;
 this.hash = this.computeHash();
 this.nonce = 0;
    }

    computeHash() {
 return SHA256(
 this.index +
 this.precedingHash +
 this.timestamp +
 this.reference +
            JSON.stringify(this.data) +
            JSON.stringify(this.transactions) +
 this.nonce
        ).toString();
    }

    mineBlock(difficulty) {
 while (
 this.hash.substring(0, difficulty) !== Array(difficulty + 1).join("0")
        ) {
 this.nonce++;
 this.hash = this.computeHash();
        }
        console.log("BLOCK MINED:" + this.hash);
    }
}

module.exports = Block;

or alternatively 

export default Block;

I will follow your suggestion and also attempt the above examples to see if I can achieve creating them as JSW and will update with findings.

Many thanks again,

Si

Hi Miguel,

The solution seems to be to place the code within a public.js file and then export the class,

export class Block…

this works when importing the class to the page code as:

import * as Block from ‘public.Block.js’;

when console logging “Block.Block”

console.log(Block.Block)

It console logs the code for Block however I am now having to find a work around for how the details can be passed between page code and the public.js file to create the new Block.

I hope this makes sense.

Si

Hey Simon!

That’s a nice workaround you found there, I was able to get it to work by adding my class to a public file.

However, please keep in mind any security considerations when adding code to your public files.

To continue with my example, to add a new instance of your class on the front-end you can do something like:

public/class.js

export class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
    }
    getInfo() {
 return this.name + " is " + this.age;
    }
}

client-side

import { Person } from 'public/class.js';

$w.onReady(function () {
 
 //creates a new instance of person class
 let john = new Person("John", 20);
    console.log(john.getInfo())

});

console

Try it out and let me know!

Hi Miguel,

Thank you for this and you answer, in relation to security could I pass the public.js file into a backend web module? could I then call the function from their?

The solution you have provided I feel will help and I just have to adapt some of the code, I am now looking at the http-functions and trying to wrap my head around these and re-write some code as I can use these instead of creating a express or socket.io server, however this may then mean that there is a need for a centralised chain rather than a decentralised one all be it everyone will have access to the data collection and the chain.

best wishes,

Si

Hi Miguel,

Just to keep you updated the export class from public.js files is the way forwards for the work that I am doing, I have now managed to implement a working Blockchain and will work on creating the UI over the coming days and weeks this I hope will open blockchain to the masses and enable new ways of working.

Best wishes,

Si