Preview to Web Page works as expected but Export to HTML does not work

samrickman commented 1 year ago

Hi - I am a regular user of R markdown, who has arrived here after switching to Quarto and discovering the awesome world of Observable JS, and imaging the world of possibility running javascript directly on our data in the browser.

However, I am quite new to this, so it is quite possible I am missing something really obvious.

I have installed Observable JS extension v0.4.26 and Javsascript (sic) Notebook Extension Pack Notebook Extension Pack 1.0.6 on Windows 10.

I have tried running HelloWorld.omd.

If I use the OJS: Preview Web Page command, the output is as expected:

However, if I use the OJS: Export to HTML command, and open the resulting web page in Chrome, it is completely blank. The html is:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hpcc-js/common/font-awesome/css/font-awesome.min.css">
    <style>
    body {
        padding: 0px;
        margin: 8px;
        background: white;
        color: black;
    }
    #placeholder {
        position: absolute;
        left: 8px;
        top: 8px;
        right: 8px;
        bottom: 8px;
        max-width: 480px;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@hpcc-js/observable-md/dist/index.full.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var omdMod = window["@hpcc-js/observable-md"]
    </script>

</head>

<body onresize="doResize()">
    <div id="placeholder">
    </div>
    <script>
        var app = new omdMod.Observable()
            .target("placeholder")
            .showValues(true)
            .mode("omd")
            .text(`# Hello and \${w}

\`\`\`
w = 'Welcome!';
\`\`\``)
            ;

        doResize();

        function doResize() {
        if (app) {
            app
                .resize()
                .lazyRender()
                ;
        }
    }
    </script>
</body>

</html>

If I was trying to compile with Quarto, R markdown or Pandoc, I would know which command was being run when I try to export to html (e.g. quarto render HelloWorld.qmd). However I am completely new to this and I am not sure what is actually happening when I select the Export option in the command palette.

How do I proceed with troubleshooting something like this?

GordonSmith commented 1 year ago

This sounds like an issue and its interesting you mention Quarto...

FWIW I recently rewrote the underlying ObservableHQ compiler / interpreter, to drive the ObservableHQ VS Code Notebook support and just back ported the new compiler to OMD and OJS files and their preview - the code generation for html is still based on the older compiler and it looks like I have broken something there which I will fix (in truth I will upgrade to code generation to use new compiler as its just better).

Re Quarto - I am also finalizing a PR to switch the quarto OJS runtime to use this new compiler (again it just has better support for newer ObservableHQ notebooks).

Thanks for the report!

samrickman commented 1 year ago

OK great thanks - I will wait for the update. Thanks for creating this extension - creating omd files is a very exciting development in presenting data generated in reproducible research.

GordonSmith commented 1 year ago

This should be resolved in v0.4.28

samrickman commented 1 year ago

This should be resolved in v0.4.28

Wow that was quick! Just updated and can confirm I am now seeing the same output with Preview and Export to HTML. Nice one!

GordonSmith / vscode-ojs

Preview to Web Page works as expected but Export to HTML does not work #46