Yarn Classic

[BlackRam-oss]

Hi @blurymind I closed issue #161 and opened this one, because the first ink implementation is now complete, but I wanted to keep an issue open to keep myself informed about the possibility of developing in PixiVN with YarnClassic.

I will also link this issue to the PixiVN documentation, considering that it is a development phase.

[blurymind]

Hi, thanks :) I am still making steady progress with it. I got it to load pixijs, kaplayjs, kaboom and some other external modules (see gist demos). It loads them from a web address atm, so if pixivn doesn't have its dist file hosted anywhere to be included as a script tag, I am thinking of allowing to host it with the other files in the gist.

Running from yarns playground sort of requires to fully be able to run from a Web browser. It mimics how kaboomjs and kaplay do browser playgrounds, which is akin to codepen, jsfiddle and others. My approach is a bit quirky atm as you define an anonymous function that returns the data that gets rendered in the preview output. I will try to spin up pixivn as a module with no graphics and get it to render some text on the screen.

The yarn editor data is already included in the output html and can be referenced by any scripts.

The idea is to make a pixivn setup js file in the examples gist and allow anyone to quickly open yarn editor with that file ready to spin up pixivn with the editor data in a click.

From there on the power user can extend its js wrapper. The creative writer user will just work on the dialogue tree side. The power creative user will be able to do both directly in the browser and have it backed up as a public or secret gist.

The game can then be exported as a single html file with all the modules bundled in it. Resources like images and music could also be bundled as base64 strings in the html file, or cound be exported with it in a zip. I am still a bit undecided how to do them and for now am relying on them being hosted somewhere else, like the modules. Using base64 strings has the benefit of making it a bit harder for players to extract resources from a game bundle and just preview all the pictures in the game before even playing it.

In the future I might expand this to use proper github repositories instead of gist. I like the simplicity of gist :) btw they have commit history and can revert changes, so are quite a powerful system to store code in

yarn ticket https://github.com/blurymind/YarnClassic/issues/328

wip demo https://blurymind.github.io/YarnClassic/?gistPlugins=2ff124dc94f936e8f7d96632f559aecb&pluginFile=yarn-output-pixi-bunnies.js&mode=test

[blurymind]

The dist/index.js file that gets generated, can it be used outside of node modules scenario? Would it work in a codepen? https://www.npmjs.com/package/@drincs/pixi-vn?activeTab=code

I am assuming that its dependent modules dont get included in the same output module file?

var pixi_js = require('pixi.js');
var deepDiff = require('deep-diff');
var sha1 = require('crypto-js/sha1');
var devtools = require('@pixi/devtools');

[BlackRam-oss]

Would it work in a codepen?

it should work on codepen

[BlackRam-oss]

The dist/index.js file that gets generated, can it be used outside of node modules scenario?

what do you mean by "node modules scenario"?

[BlackRam-oss]

I am assuming that its dependent modules dont get included in the same output module file?

they are not included in the pixi-vn npm package. npm notices that it has some dependencies and installs them.

[blurymind]

can you effectively run pixi-vn when bundling it at a codepen? https://codepen.io/your-work Can you make a pixi-vn codepen - where it just loads it without errors?

Remember since its purely online, there is no npm, and no node. These dependencies are not included in the file so I am guessing you have to add them manually as script tags?

Pixijs sort of just works out of the box if you include a link to it as a script tag, because all of that was handled and tested. That is why there are lots of online in browser examples of pixijs which dont require the user to set up a dev environment and run a dev server. They just work on pixijs playground as well as codepens

for example can you do this

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/pixiVN.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pixi'VN</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://https://unpkg.com/pixi-vn"></script>
    <script>
       console.log(window.PixiVn)// not undefined
    </script>
  </body>
</html>

here is a simple pixi js example https://codepen.io/ma_suwa/pen/ExRjvxw see how it is included as a script element in the html and as a result - how the code sees it as a global class that can be initiated. That makes the module extremely capable of being used outside of node.

I think you can get it to do that by playing with the settings of your bundler. These type of modules try to pack all their deps in the same file - so do have an increased dist size. Dev dependencies are not included btw. So if any of them are needed for it to function, they need to be moved to ordinary deps.

[BlackRam-oss]

I tried it, but I couldn't get it to work (I'm not sure if I imported the library correctly, it's my first time using codepen). https://codepen.io/BlackRam-oss/pen/oNrqgNd

Theoretically the initialization shouldn't be much different from initializing the pixi-js application https://github.com/DRincs-Productions/pixi-vn/blob/main/src/managers/WindowManager.ts

I don't know why it doesn't work.

[blurymind]

the module at https://esm.sh/@drincs/pixi-vn@0.6.14 its an index file that imports other stuff. Usually with this kind of module - everything is bundled in a single file.

It looks more like this https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.1.0/pixi.min.js or this https://unpkg.com/kaplay@3001.0.0-alpha.21/dist/kaplay.js

see how all of the dependencies, all the files from the project needed to run it - its all bundled in one file that is minified. Nothing is imported or required.

On the codepen it looks like it tries to load a bunch of (relative?) files and fails to do so

[BlackRam-oss]

I was looking at unpkg. pixi-vn has a tree structure (there is a setting to make it that way), while pixi.js has everything in dist/pixi.js.

https://unpkg.com/browse/@drincs/pixi-vn@0.6.14/dist/ https://unpkg.com/browse/pixi.js@8.3.3/dist/

importing https://unpkg.com/browse/@drincs/pixi-vn@0.6.14/dist/index.js might work

[BlackRam-oss]

On the codepen it looks like it tries to load a bunch of (relative?) files and fails to do so

are you trying to import pixi-vn or pixi.js?

[blurymind]

pixivn is the goal of this :) Pixijs has no problems importing in node or web - it just works

https://unpkg.com/browse/@drincs/pixi-vn@0.6.14/dist/index.js this wont work imo, because it is trying to require the dependencies. Its not bundling them in the same file.

This is something that vite probably can output for you btw. I suspect that you just have to enable it somehow. It is what bundlers are supposed to solve (rollup, webpack, vite, etc)

maybe this? https://vitejs.dev/guide/dep-pre-bundling

in theory the output file will contain pixijs and all the other files that you require/import, which means the browser has to do a single fetch request to get pixi-vn downloaded and ready to run.

Having such an output file will not just benefit Yarn, it will benefit anyone else trying to use this module in a web scenario

[BlackRam-oss]

pixivn is the goal of this :) Pixijs has no problems importing in node or web - it just works

It doesn't make sense to me, because pixi vn doesn't use version 8.3.3, but 8.3.2 Your error comes from 8.3.3.

I had done some tests, in theory it works for all modules, exactly like pixi.js. However I will check better.

I made a step forward I managed to import the library GameWindowManager recognizes me, but it is undefined

https://codepen.io/BlackRam-oss/pen/oNrqgNd

[blurymind]

In console you can see - the browser doesnt recognise "require" as part of its api

[BlackRam-oss]

@blurymind

I added the ability to import the library with "many more technologies"(module CJS ESM). I basically followed this solution https://dev.to/orabazu/how-to-bundle-a-tree-shakable-typescript-library-with-tsup-and-publish-with-npm-3c46

Now you won't have the "require" error anymore. Could you try again?

I noticed another error with the pixi.js import on codepen, I don't think you have it too. https://github.com/DRincs-Productions/pixi-vn/issues/209

To fix it I think I have to import all the Pixi.js features with:

import * as PIXI from "pixi.js"

I'll create another version to fix it, with other small fixes of the new version 0.7.0

[blurymind]

thank you :) I will give this a try over the weekend. Is the codepen here working then? https://codepen.io/BlackRam-oss/pen/oNrqgNd Its still showing a failure to import pixi error (assuming that it still uses the version that doesnt include deps)

[BlackRam-oss]

no, I think to make it work just import pixi with:

import * as PIXI from "pixi.js"

for some reason if I import Assert like this with Githubissues.

Githubissues is a development platform for aggregating issues.