Add vimwiki-wasm browser tests

chipsenkbeil / vimwiki-rs

Rust library and tooling to parse, render, and modify vimwiki text and files.

56 stars 2 forks source link

Need to add tests that validate that the package can be built and used in a browser. Need to figure out if going webpack or non-weback (web target) and then set up a headless browser test via github actions.

See https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/browsers.html and https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/continuous-integration.html#github-actions

Also, saving this non-webpack example as backup since it isn't checked in anywhere:

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <pre>
      <code id="vimwiki-snippet">
=== Header ===

This is a snippet of vimwiki that is displayed in a browser.

[[some link]]

[[diary:2021-05-18|My diary link]]

:my:tags:
      </code>
    </pre>
    <hr />
    <div id="vimwiki-output"></div>
    <!-- Note the usage of `type=module` here as this is an ES6 module -->
    <script type="module">
      import init, { parse_vimwiki_str } from './vimwiki_wasm.js';

      async function run() {
        await init();

        // Load the code snippet
        const code = document.getElementById("vimwiki-snippet");

        // Parse the code into an object
        const obj = parse_vimwiki_str(code.innerText);

        // Find regions in code that contain headers and highlight them by
        // transforming that text into spans with colors
        const regions = obj.find_all_header_regions();
        Object.values(regions).forEach(region => {
            console.log(region);
            // Select the header
            const range = new Range();
            range.setStart(code.firstChild, region.offset);
            range.setEnd(code.firstChild, region.len);

            // Build a colored version
            const colored = document.createElement("span");
            colored.style.color = "red";
            colored.innerText = range.toString();

            range.deleteContents();
            range.insertNode(colored);
        });

        // Inject HTML into output destination
        const output = document.getElementById("vimwiki-output");
        output.insertAdjacentHTML("afterbegin", obj.to_html_str());
      }

      run();
    </script>
  </body>
</html>

<html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> </head> <body> <pre> <code id="vimwiki-snippet"> === Header === This is a snippet of vimwiki that is displayed in a browser. [[some link]] [[diary:2021-05-18|My diary link]] :my:tags: </code> </pre> <hr /> <div id="vimwiki-output"></div>  <script type="module"> import init, { parse_vimwiki_str } from './vimwiki_wasm.js'; async function run() { await init(); // Load the code snippet const code = document.getElementById("vimwiki-snippet"); // Parse the code into an object const page = parse_vimwiki_str(code.innerText); // Find regions in code that contain headers and highlight them by // transforming that text into spans with colors const regions = page.descendants .filter(e => e.is_block()) .map(e => e.into_block()) .filter(e => e.is_header()) .map(e => e.into_header().region); Object.values(regions).forEach(region => { console.log(region.to_debug_str()); // Select the header const range = new Range(); range.setStart(code.firstChild, region.offset); range.setEnd(code.firstChild, region.len); // Build a colored version const colored = document.createElement("span"); colored.style.color = "red"; colored.innerText = range.toString(); range.deleteContents(); range.insertNode(colored); }); // Inject HTML into output destination const output = document.getElementById("vimwiki-output"); output.insertAdjacentHTML("afterbegin", page.to_html_str()); } run(); </script> </body> </html>

chipsenkbeil / vimwiki-rs

Add vimwiki-wasm browser tests #112