Loading ruffle builds through webpack

[hjri]

Describe the bug
I'm trying to use ruffle with webpack to add flash support in a vue-based website.
What i do is this:

      //contents of a "create" function in vue component
      require('ruffle-mirror/ruffle') // using ruffle-mirror to avoid putting wasm/built js into source tree
      window.RufflePlayer = window.RufflePlayer || {};
      window.RufflePlayer.config = {
        publicPath: '/static/ruffle', // using copy-webpack-plugin to copy .wasm files into specified dir
        polyfills: false
      }
      const ruffle = window.RufflePlayer.newest()
      const player = ruffle.createPlayer()
      // element in a component
      const container = this.$refs.container
      container.appendChild(player)
      player.load(this.src) // loading sfw file from property

This however doesn't work, as Ruffle seems to completely ignore publicPath and still tries to load the wasm from current path. No matter if i try to set publicPath on ruffle or player the outcome is same - it tries to fetch from ./ and gets 404.

Expected behavior
Everything works just like when putting ruffle build in a source tree (into static dir), publicPath setting works

Is the problem with the Ruffle desktop app, extension, or self-hosted version?
self-hosted version (through npm and ruffle-mirror https://github.com/rwv/ruffle-mirror)

What platform are you using?
Webpack 4.44
Firefox 81 Linux x64

[hjri]

Figured it out, i need to setup the config BEFORE loading ruffle.

However it's still strange that publicPath has no effect when setting it on player instance and others.

Another thing is that loading ruffle through webpack doesn't seem to be possible right now at all. No matter what I do I can't seem to be able to make webpack just generate url for wasm to make a publicPath out of it. It gets very complicated very quick.

Would be nice to have a separate builds for ruffle-core that can work with webpack.

[adrian17]

Another thing is that loading ruffle through webpack doesn't seem to be possible right now at all.

The demo page [1] is generated with webpack and uses ruffle-core; I know it doesn't substitute for good documentation, but for now it can serve as reference on usage.

[1] https://github.com/ruffle-rs/ruffle/blob/master/web/packages/demo/www/index.js

[hjri]

I tried looking at it, but as far as I understand, ruffle-core there is built locally and uses likewise locally-built wasm file, there are no releases for just ruffle-core + wasm file.

As far as I can see, there are three ways of using Ruffle in a somewhat complex project (i.e. vue/react website/app):

1. just download release, extract files and put them in VCS lmao
   ➕ easiest way to do it
   ➖ manual updates only
   ➖ tracking heavy files in VCS probably isn't a good idea and git-lfs is overcomplicating stuff.
2. use git-submodules and build ruffle-core, wasm et al locally.
   ➕ probably easier to test experiments in ruffle?
   ➖ you have to use submodules which can be annoying
   ➖ frontend developers will have to install rust toolchain and necessarily dependencies. Probably not a good idea
   ➖ you have to integrate ruffle build into your build, which also means if ruffle fails to build your project also fails to build = not good
3. use ruffle-mirror npm package to fetch release of ruffle-selfhosted and deal with that instead of ruffle-core
   ➕ easy way to fetch latest release automatically
   ➖ unofficial?
   ➖ less convenient API
   ➖ you have to integrate it into build to make the contents of module publicly available.

[hjri]

The dream developer UX would be:

• add it using npm install --save-dev or yarn add -D
• in code you would just do:

import RufflePlayer from 'ruffle-whatever-binary';
// ...
const ruffle = RufflePlayer.newest()
// ... mount to a component etc

[Dinnerbone]

As of #16928, ruffle-core is now usable as a module. You need to run installRuffle("local") somewhere to initialize it though.

We aren't yet publishing the module on npm though - that will come shortly.