help with a npm module (possibly NSFW) | Tauri Apps | Page 1

desert crypt Dec 14, 2023, 3:28 PM

#

I am back at coding with tauri and again the same issue with an npm module!

so I did pnpm install @stripchat/stripchat-embedded

https://github.com/stripchat-team/stripchat-embedded/tree/master
using the example.html my code now is now

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tauri App</title>
    <script type="module" src="/main.js" defer></script>
    <style>
      .logo.vanilla:hover {
        filter: drop-shadow(0 0 2em #ffe21c);
      }
    </style>
  </head>

  <body>
    <div>
      <canvas style="width: 500px; height: 375px" id="canvas"></canvas>
    </div>
  
    <script>
      function onBundleScriptErrorHandler() {
        alert('./dist/index.js file is not found locally, run `npm install && npm run build`');
      }
    </script>
  
    <script src="./dist/index.js" onError="onBundleScriptErrorHandler()"></script>
  
    <script>
      const { StripchatPlayer } = StripchatEmbedded;
  
      function getRandomItemFromArray(array) {
        const randomIndex = Math.floor(Math.random() * array.length);
        return array[randomIndex];
      }
  
      function getRandomOnlineModel() {
        return window.fetch('https://stripchat.com/api/external/v4/widget')
          .then(response => response.json())
          .then(({ models }) => getRandomItemFromArray(models));
      }
  
      function initPlayer(canvasRef, model) {
        new StripchatPlayer()
          .setCanvasRef(canvasRef)
          .setModelId(model.id)
          .setModelToken(model.token)
          .setModelSnapshotServer(model.snapshotServer)
          .mount();
      }
  
      const canvasRef = document.getElementById('canvas');
  
      getRandomOnlineModel().then((model) => {
        initPlayer(canvasRef, model);
      });
    </script>
  
    
  </body>
</html>

#

my structure is as follows:
(now deleted index.js and player.js as I saw them in the npm module)

#

oh index.js and player.js are in the npm module? so I am really out of the water here, anyone can help me with 101 on how to import npm modules in tauri?

#

I used create-tauri-app using the powershell line in tauri instructions

#

also changed main.js to

const { invoke } = window.__TAURI__.tauri;

#

console output now

#

I know its a special way that I need to import modules and change something but its been a while and I dont recall what to do

heavy laurel Dec 14, 2023, 5:54 PM

#

This is just vanilla/regular js right?

#

Oh you already have type="module" hm 🤔

desert crypt Dec 14, 2023, 6:24 PM

#

yeah vanilla

orchid summit Dec 14, 2023, 6:25 PM

#

@desert crypt first of all we need more info like

on creating the app did you select

Typescript (uses vitejs as bundler)
or
Javascript (is vanilla and uses nothing .... so you need to add for example rollupjs or something)

in your code you never imported the Module (you just copy/pasted the example.html from the repo into your index.html)
you should move your code from index.html to main.js and do someting like

import { StripchatPlayer } from "@stripchat/stripchat-embedded";

// you can use this if you don't want to setup rollupjs or an other bundler

// import { StripchatPlayer } from "node_modules/@stripchat/stripchat-embedded/dist/index.js";

// don't forget when you build the app you need to add the node module to your resources or you get an error

function getRandomItemFromArray(array) {
        const randomIndex = Math.floor(Math.random() * array.length);
        return array[randomIndex];
}
function getRandomOnlineModel() {
        return window.fetch('https://stripchat.com/api/external/v4/widget')
          .then(response => response.json())
          .then(({ models }) => getRandomItemFromArray(models));
}
  
function initPlayer(canvasRef, model) {
        new StripchatPlayer()
          .setCanvasRef(canvasRef)
          .setModelId(model.id)
          .setModelToken(model.token)
          .setModelSnapshotServer(model.snapshotServer)
          .mount();
}
  
const canvasRef = document.getElementById('canvas');
  
getRandomOnlineModel().then((model) => {
  initPlayer(canvasRef, model);
});

should work ( or not ... i never tested it ) but overall this is how you should do it.

next time ... you should include more info and really try it .... not just copy/pasting examples... 😉

desert crypt Dec 14, 2023, 7:09 PM

#

I have never used a bundler, always it was about changing a bit the import syntax like changing the import to const or something

#

i put the code into main.js and changed to const and it works but I get another error

const { invoke } = window.__TAURI__.tauri;
const { StripchatPlayer } = "node_modules/@stripchat/stripchat-embedded/dist/index.js";
      //const { StripchatPlayer } = StripchatEmbedded;
  
      function getRandomItemFromArray(array) {
        const randomIndex = Math.floor(Math.random() * array.length);
        return array[randomIndex];
      }
  
      function getRandomOnlineModel() {
        return window.fetch('https://stripchat.com/api/external/v4/widget')
          .then(response => response.json())
          .then(({ models }) => getRandomItemFromArray(models));
      }
  
      function initPlayer(canvasRef, model) {
        new StripchatPlayer()
          .setCanvasRef(canvasRef)
          .setModelId(model.id)
          .setModelToken(model.token)
          .setModelSnapshotServer(model.snapshotServer)
          .mount();
      }
  
      const canvasRef = document.getElementById('canvas');
  
      getRandomOnlineModel().then((model) => {
        initPlayer(canvasRef, model);
      });

orchid summit Dec 14, 2023, 7:16 PM

#

maybe you should look into a few javascript tutorials befor you start to build your app

here is the import and export of modules explained.

https://javascript.info/import-export

Export and Import

desert crypt Dec 14, 2023, 7:51 PM

#

is there a webpack with tauri guide?

primal hawk Dec 15, 2023, 1:51 AM

#

No specific guide that I know of but there isn't any specific requirements other than the need to generate static files for production builds.

primal hawk Dec 15, 2023, 2:29 AM

#

If you're going to use Node.js modules that support TypeScript definitions, I would strongly recommend using TypeScript. It will save you incalculable hours of reading library source code using the debugger. create-tauri-app can also set TypeScript+Vite up for you.

#help with a npm module (possibly NSFW)