Импортировать сгенерированный emscripten модуль в Svelte - PullRequest
Новая
       5

Импортировать сгенерированный emscripten модуль в Svelte

0 голосов
/ 14 января 2020

Я пытаюсь создать компонент Svelte, содержащий canvas, который бы показывал приложение webgl, скомпилированное по emscripten. В традиционном html это требует следующей настройки: 

<script>
  var canv = document.getElementById('canvas');
  var Module = { canvas: canv };
</script>
<script src="index.js"></src>

Ближайшее, что я получил к нему, было следующим: 

<script>
  let canv;
  let Module = { canvas: canv };
</script>

<svelte:head>
  <script src="index.js"></src>
</svelte:head>

<canvas bind:this={canv}></canvas>

Который загружает модуль, но индексирует . js не удается инициализировать с некоторой ошибкой: 

exception thrown: TypeError: eventHandler.target is null,registerOrRemoveHandler

Что в основном является индексом. js не удается увидеть Module - эта ошибка остается той же, если я вообще не инициализирую Module .

Я понимаю, что мог бы немного поиграть с опцией компилятора MODULARIZE (я пока не рассматривал его), но поскольку это приложение webgl, я бы предпочел, чтобы оно запускалось при загрузке, как в традиционном html, таким образом, я могу сосредоточиться на C ++, не настраивая сантехнику самостоятельно.

Как правильно это сделать?

1 Ответ

0 голосов
/ 15 января 2020

Здесь происходит несколько вещей.

Во-первых, компонент эквивалентен модулю JavaScript, что означает, что любые переменные, объявленные внутри компонента, являются локальными для этого компонента. Если вам нужно, чтобы Module был доступен глобально, вы должны установить его на window: 

window.Module = { canvas: canv };

Во-вторых, каждый раз, когда вы используете bind:this, вам нужно подождать, пока компонент фактически установлен. Код внутри <script> компонента выполняется перед созданием любого DOM (так как он часто определяет , какой DOM создан).

В этом случае попробуйте использовать onMount: 

<script>
  import { onMount } from 'svelte';

  let canv;

  onMount(() => {
    window.Module = { canvas: canv };
  });
</script>

<svelte:head>
  <script src="index.js"></src>
</svelte:head>

<canvas bind:this={canv}></canvas>
...