[GSoC] Request for Feedback on Design Doc for Visible Component Extension

[pavi2410]

Update on the Progress in the first month

It's been a month since I started working on this. I have been working on a solution to provide the ability to define custom Mocks. So far, I have something to share with you.

Here are the updates:
So, now the external Mocks would be written in JavaScript. This is because in my testing, GWT purposely compiles code statically and this is what limits the possibility of writing Mocks in GWT/Java (which could be a plus considering internal Mocks are written in GWT/Java).

(Please refer to the comments in the code)

// This class is instantiated by the GWT end
class MockSimpleLabel extends MockVisibleExtension {
    static TYPE = "SimpleLabel" // the name of the Mock

    constructor(editor) {
        super(editor, MockSimpleLabel.TYPE)

        this.label = document.createElement("p")

        // initialise the Mock by using DOM elements
        this.initComponent(this.label)
    }

    onCreateFromPalette() {
        this.changeProperty("Text", this.getName());
    }

    // listen to changes in the property so as to make your Mocks reactive
    onPropertyChange(propertyName, newValue) {
        super.onPropertyChange(propertyName, newValue);

        switch (propertyName) {
            case "Text":
                this.label.textContent = newValue
                break
        }
    }

    // static factory method used by the GWT end
    static create(editor) {
        return new MockSimpleLabel(editor)
    }
}

// register the Mock class here
MockComponentRegistry.register(MockSimpleLabel.TYPE, MockSimpleLabel.create)

Preview of MockSimpleLabel in action
In the screenshot below, you can see that I was able to create a Mock from my custom extension (SimpleLabel; clone of the Label component) and was able to change its "Text" property successfully)

Note the above may change at a later point in time

---

There are more challenges, notably,

• Auto-load Mock JS, handle multiple projects, upgrading/unloading of Mocks.
• Securely load the Mock JS which could not tamper the App Inventor's client code running in the browser nor show annoying popups, ads, alerts, sent private data, misuse of being served from the same origin as appinventor.mit.edu (or even mit.edu)

If you have suggestions on how to tackle these challenging problems, I'd be more than happy

Thanks for the support