How to Integrating SmartPy compiler within the browser?

Question

I have been trying to integrate the SmartPy compiler toolchain within Cryptoverse wars Learning interface and have been going through this video (OCaml Under The Hood: SmartPy) and have encountered blocker with the approach mentioned within the video used by SmartPy.io web IDE for compiling SmartPy code to Michelson.

---

What I want to achieve.

On a click of a button(frontend side), compile SmartPy code and generate JSON object which includes:

1. Michelson JSON and plain code
2. Contract initial storage JSON and plain Michelson code
3. Contract size info(optional)

Current Blockers:

From within the run function in smartpyio.py file.

def run(withTests):
    window.pythonTests.clear()
    window.cleanAll()
    import smartpy

    smartpy.defaultVerifyMessage = None
    smartpy.sp.types.unknownIds = 0
    smartpy.sp.types.seqCounter = 0
    code = window.editor.getValue()
    changes = syntaxChanges()
    for change in changes:
        if change[0] in code:
            if window.in_browser:
                message = (
                    "Warning: syntax change: %s -> %s" % (change[0], change[1])
                    + "\n\nMigrate Syntax to adapt your script automatically?\n\nOther changes:\n"
                    + "\n".join(
                        "%s -> %s" % (change[0], change[1]) for change in changes
                    )
                )
                from browser import confirm

                if confirm(message):
                    for ch in changes:
                        code = code.replace(ch[0], ch[1])
                    window.editor.setValue(code)
                    break
            else:
                print(
                    "Warning: syntax change: %s -> %s. You can use the editor to adapt it."
                    % (change[0], change[1])
                )
    code = adaptBlocks(code)
    env = context.copy()
    exec(code, env)
    window.cleanAll()
    for test in window.pythonTests:
        window.addButton(test.name, test.f)
        if withTests and test.is_default:
            test.eval()
    if withTests and len(window.pythonTests) == 0:
        html = ""
        for c in env:
            if "$" in c:
                continue
            if hasattr(env[c], "collectMessages"):
                html += (
                    "There is a sp.Contract class '%s' but no test is defined.\n\nPlease add a test such as:\n%s"
                    % (str(c), testTemplate % (c, c))
                )
        if html:
            alert(html)

1. I wasn't able to understand at what line is the smartml experssion is generated within the function and when does smartmljs script gets trigger from it to generate Michelson code.

2. From the smartmljs file, how do I get the Michelson & initial storage exported to the browser?

   • From my understanding, smartmljs code is tightly coupled and compiled to js for SmartPy.io IDE needs. How can I generate generic smartmljs for just compiling SmartPy code to Michelson within the browser ?

Answer 1

The very first step is to have these lines function properly.

    code = adaptBlocks(code)
    env = context.copy()
    exec(code, env)
    window.cleanAll() ## you can probably remove that
    for test in window.pythonTests:
        window.addButton(test.name, test.f) ## you can probably remove that
        if withTests and test.is_default: ## you can probably remove that
            test.eval()

At that point, the json file is computed (and a bit more).

Answer 2

Currently, SmartPy doesn't ship any standalone lib for this.

You will need libsodium, Brython, ...

We are migrating the frontend to React.js which is cleaner and easier to maintain, the new IDE is already being reviewed and should be ready next weekend.

I recommend you to wait a few days or look at the current frontend files here (mainly editor.js, dialog.js, and index.html)

EDIT

Extending @FFF answer:

Tests are used to infer the types and the initial storage, to get the compiled code you need to have an eval function like this in Test class.

    def eval(self):
        import smartpy

        window.activeScenario = None
        window.contractNextId = 0
        window.lambdaNextId = 0
        window.contracts = {}
        window.validityErrors = []
        try:
            self.f()
        finally:
            results = []
            for cIndex in window.contracts:
                contract = window.smartmlCtx.call("importContract", window.contracts[cIndex].contract.export())
                compiledContract = window.smartmlCtx.call("compileContract", contract)
                michelson = window.smartmlCtx.call("compiledContract_to_michelson", compiledContract)
                results.append(michelson)

            return results