Example of how to use VimeJS with Sapper / Svelte Kit

Documentation

SSR Examples for new Vime JS.

Documentation page URL: Does not yet exist

Reason: The only existing “documentation” around this is the final comment on https://github.com/vime-js/vime/issues/38 - using dynamic imports is easy, but then you have to also use svelte:component in order to use those dynamic modules, and even then there are loads of console errors during build:

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                    ^
2:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3:     return new (P || (P = Promise))(function (resolve, reject) {
The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                            ^
2:     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3:     return new (P || (P = Promise))(function (resolve, reject) {

It would be good to have a written example of using the new “web components” based VimeJS, as I can’t see a clear path forward for using it in an SSR enabled environment.

[louishuddleston]

Here’s how I’ve got Vime working with SvelteKit using @vime/core

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

  export let src;
  let showPlayer = false;
  let player;

  onMount(async () => {
    const { defineCustomElements } = await import('@vime/core');
    defineCustomElements();
    showPlayer = true;
  });
</script>

{#if showPlayer}
  <vm-player bind:this={player}>
    <vm-video>
      <source data-src={src} type="video/mp4" />
    </vm-video>
    <vm-ui>
      <vm-default-controls />
    </vm-ui>
  </vm-player>
{/if}

@sveltejs/kit@1.0.0-next.180 @vime/core@5.0.33 svelte@3.43.1

[ralyodio]

why are the docs trash for svelte? can someone post an official solution here?