Loadhtml instead of loadUrl in electron (scripts and links are not working)


#1

I created question on stackoverflow and thought i should copy it here

I do the same thing as in this question, give data to my template, compile it and made it look like a file with

var file = 'data:text/html,' + encodeURIComponent(compiled);

All looks fine, template successfully rendered and i get my data, but now my tags in head stop working, tags like link or script with src attribute

here I get doc in pouchdb by id MAZ-63171 and give that doc to my template:

db.get('MAZ-63171')
	.then(function(doc) {
		var compileFn = pug.compileFile('./pugTemplates/index.pug', {
			pretty: true
		});
		var compiled = compileFn({doc: doc});
		console.log(compiled);
		// console.log(doc);
		// 'file://' + __dirname + '/pugTemplates/index.pug'
		var file = 'data:text/html,' + encodeURIComponent(compiled);
		mainWindow.loadURL(file);
	})
	.catch(function(err) {
		console.log(err);
	});

in index.pug I have this

doctype html
html(lang="en")
  head
    title="trucks"
    link(rel="stylesheet" href="../node_modules/semantic-ui/dist/semantic.min.css")
    //- script window.$ = window.jQuery = require('jquery');
    script(src="../node_modules/jquery/dist/jquery.min.js")
    script(src="../node_modules/semantic-ui/dist/semantic.min.js")
  body
    .ui.container
      .ui.grid
        .four.wide.column
        .eight.wide.column
          |#{doc._id}
        table.ui.celled.table
          thead
            tr
              th Header
              th Header
              th Header
          tbody
            tr
              td
                .ui.ribbon.label First
              td Cell
              td Cell
            tr
              td Cell
              td Cell
              td Cell
            tr
              td Cell
              td Cell
              td Cell

which compiles to this

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>trucks</title>
    <link rel="stylesheet" href="../node_modules/semantic-ui/dist/semantic.min.css">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/semantic-ui/dist/semantic.min.js"></script>
  </head>
  <body>
    <div class="ui container">
      <div class="ui grid">
        <div class="four wide column"></div>
        <div class="eight wide column">MAZ-63171</div>
        <table class="ui celled table">
          <thead>
            <tr>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div class="ui ribbon label">First</div>
              </td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

I get zero errors about css or js files i added, but semantic-ui is not working as you can see on screenshot

Why this is happening and how to fix it? I think it is because those conversion into string, maybe I should use other method to compile my templates.

Electron-pug module from npm seem not to get data from locals, it wait for it in promise and in that time standard loadUrl load pug template straight into window without rendering it. Maybe I do smth wrong.