Requesting Dynamic HTML

PreviousRequesting base64 Encoded HTML Data URI NextBase Scripts

Last updated 2 years ago

Requesting Dynamic HTML

ScriptyBuilder supports injecting dynamically created scripts between statically stored scripts.

If the scriptContent field of requests is not empty, then ScriptyBuilder will use scriptContent instead of fetching the script from a contract.

Inline Script Request

InlineScriptRequest[] memory requests = new InlineScriptRequest[](2);
requests[0].name = "three.js";
requests[0].contractAddress = scriptyStorageContractAddress;

requests[1].scriptContent = 'console.log("hello world!")';

Wrapped Script Request

WrappedScriptRequest[] memory requests = new WrappedScriptRequest[](2);
requests[0].name = "three.js";
requests[0].contractAddress = scriptyStorageContractAddress;

requests[1].wrapType = 0;
requests[1].scriptContent = 'console.log("hello world!")';

You can set different wrapping options for dynamically created scripts. For more about wrapping options please check .

Example

Here we are requesting three.js and some generative art named cubes that depends on three.js. By itself, cubes script does nothing. A controller script is created with on-chain values and it initiates cubes script.

InlineScriptRequest[] memory requests = new InlineScriptRequest[](3);
requests[0].name = "three.js";
requests[1].name = "cubes";

// Calculate this off-chain:
uint256 bufferSizeForStoredScripts = 100000;

bytes  memory controllerScript = abi.encodePacked(
    'let cubes = new Cubes("',
    LibString.toString(block.timestamp),
    '");'
);

requests[2].scriptContent = controllerScript;

// New buffer size to cover dynamically 
// created script
uint256 bufferSize = bufferSizeForStoredScripts + controllerScript.length;

bytes  memory htmlFile = IScriptyBuilder(
    scriptyBuilderAddress
).getHTMLInline(
    requests, 
    controllerScript, 
    bufferSize
);

When it's controllerScript becomes something like this:

let cubes = new Cubes("1671835245");

Final output looks like this:

<html>
    <body style='margin:0;'>
        <script>
            [three.js]
            [cubes]
            let cubes = new Cubes("1671835245");
        </script>
    </body>
</html>