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
blurymind/YarnClassic#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/[email protected]
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/[email protected]/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/[email protected]/dist/
https://unpkg.com/browse/[email protected]/dist/

importing https://unpkg.com/browse/@drincs/[email protected]/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/[email protected]/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. #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)

[blurymind]

what happens if you include pixijs in the same codepen? Can it be made to work that way?

Just to be clear, if this doesnt work in codepen, it will not work in yarn

[BlackRam-oss]

I tried, but it didn't work.

the thing is that I don't understand the problem and why it gives that error. I import Assets in the correct way https://pixijs.download/dev/docs/assets.html.

I had to go by trial and error to solve it.

[blurymind]

I tried, but it didn't work.

the thing is that I don't understand the problem and why it gives that error. I import Assets in the correct way https://pixijs.download/dev/docs/assets.html.

I had to go by trial and error to solve it.

You need to use vite as a bundler
https://youtu.be/5IG4UmULyoA?si=_Dhk5lZoeNfFs0Gz
It needs to create a single file bundle of your module plus all its deps.

That way the output is guaranteed to work the same way as it does in a dev environment.
Just to be clear I don't recommend using webpack, but this needs to be bundled to work. The dependencies are not being bundled in the output atm and that's a big problem if you wanna use it like I do :)

If you don't use a bundler output, what if whoever tries pixivn uses the wrong pixijs version with it. You run in all sorts of issues if you have a library with dependencies and you are not bundling the output. Just by using different versions of the dependencies, they are almost certain to run into bugs with version combinations you haven't tested.

If you didn't have any deps like pixijs and others, you could have had it as a simple es6 module and do it with the import keyword from a script tagged as type module. But it has dependencies that the web browser doesn't know where to find. That's the reason we have and use bundlers. Its a build process setup problem, nothing with the code imo.

I am assuming the vite configuration file needs to be told to export this type of module to produce a single file bundle? vitejs/vite#16123

I'm not entirely sure why its not bundling them, so I guess it just needs some googling
vitejs/vite#6198

[BlackRam-oss]

hello sorry but it's not clear to me what I should do.
what I understood is that for you I should include the dependencies directly in the "package" of PixiVN.

I currently use "tsup" to generate the package. and reading here it seems that there is a way to do it egoist/tsup#619

what do you think?

but I don't like the fact of inserting pixi.js in the pixivn package. being able to update PixiJS to a more recent version than the one in pixivn can have its advantages.

I've never used yarn, but if I'm not mistaken you don't import the libraries via an HTML file like I'm doing on codepen, right? I'm afraid that on codepen I'm not importing the libraries in the right way, maybe with yarn now it could work

[blurymind]

So in my approach I have to keep yarn's bundle size small - so i created a plugin api to allow to treat these features as an extension - something the user chooses to add to yarn from a gist or a web address.

For that to work, it needs to use a web module import - not a new node module dependency.

With web modules, as I explained they all do that - bundle their dependencies in the same output file. pixijs itself does that too - you end up with a bigger file, but it guarantees that it will work regardless of how its used.

The bundler can reduce the file size by minifying it.
There is a trade off indeed - so some modules have different outputs - a node module one and a web module one.
Since the bundle size with included dependencies is not that much greater most times - the size is not a huge problem.

But this not about using one over the other - but adding the option for using a web module version to the already existing option.
It will greatly improve pixivn's ability to be included in other projects.
The bundler should do all of that for you - it should output different versions as part of the build process.

[BlackRam-oss]

Ok, this is the best solution.

I wonder if it is possible to do this with tsup. https://github.com/egoist/tsup

[blurymind]

Ok, this is the best solution.

I wonder if it is possible to do this with tsup. https://github.com/egoist/tsup

Cool, I haven't hear of this before but its interesting. I thought that ts and vite already handle this.
Btw heres another interesting video on modules and bundlers
https://youtu.be/6_JNPmjSevo?si=bMpTjad47ECohlBU

[BlackRam-oss]

I solved it, just put the libraries in devDependencies.
I just created a new version

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

[BlackRam-oss]

the best thing is that now I can use codepen for the wiki examples

[blurymind]

Hi Thanks for getting it this far :)
The import method is a bit unconventional and you can notice that it loads slower because it is still requesting multiple files, which makes the browser do multiple round trips. I keep saying this, but having a no dependencies singular bundle library will make it load much faster. At least now it appears to load, which is fantastic!

On your demo, can you at least make it show a picture and draw some text, so we can be sure that at its most basic its functional? The demo is just drawing a red square atm.
I will likely port your codepen demo directly to the yarn demo btw - so whatever you put there will also advertise how pixivn can be easy to set up do its most basic feature.
I will have your official demo there as well as my own extension to it -to demonstrate yarn + pixivn working together.
I always think of these demos as something to lure the developer into trying the library, not overwhelm them - but at least show a pretty thing quickly.
In the context of yarn playground, I also start to see them as a beginning template for prototyping story games in it. Potentially someone will load the example and start altering it to extend it to do more. They will go through the existing official demos and like one and start tinkering with it to integrate it with their stuff.

Most of the current yarn demos are a copy of either pixijs playground, codepens or kaboomjs playground. I like using those as a way to also test my own playground. If it works on any of the other playgrounds, but doesnt in yarn - that means that yarn's playground has a problem.

The cool thing about all of this is that it already allows creating easy share links where people can try these demos in a click and even save them locally. I am going to update the readme with a nice list with links to these playground demos too - so they are more visible

[BlackRam-oss]

I really like the possibility of using YarnClassic. I also read the readme you updated recently, and I can't wait to try using it with pixi-vn.

The import method is a bit unconventional and you can notice that it loads slower because it is still requesting multiple files, which makes the browser do multiple round trips. I keep saying this, but having a no dependencies singular bundle library will make it load much faster. At least now it appears to load, which is fantastic!

Theoretically it shouldn't have any dependencies now. But I haven't done enough testing to get a feel for the performance. Is it that slow?
If it's very noticeable that it's slow, I'll take a look, otherwise I'll put this problem aside for now because there are other things that have priority.

On your demo, can you at least make it show a picture and draw some text, so we can be sure that at its most basic its functional? The demo is just drawing a red square atm.

Ok I can create a test example from that site. What do you think I should show in the example?
One thing that is not clear to me is that a pixi-vn game needs an "external interface" (eg react) to show the current dialogue, choice menu and more.
I saw that this interface already exists on YarnClassic, will it be linked to pixi-vn?
or should I put some buttons in the example to show a next button?

in the example i would like to show the fact that it is possible to use ink to write the narration, i should finish a big update soon that adds many functions of ink (pretty much all except the use of functions), and i would also like to finish DRincs-Productions/pixi-vn-ink#24

how would the connection between pixi-vn, YarnClassic and Ink work?

[BlackRam-oss]

Hi @blurymind I've finished the development of the ink integration.

I just created an example on code pen to see if the inports work: https://codepen.io/BlackRam-oss/pen/XWvjVjv

Here you can find the documentation of the integration: https://pixi-vn.web.app/ink/ink.html

[BlackRam-oss]

@blurymind Hi, sorry to insist, could you tell me if you can import the pixi-vn-ink library correctly?
In this way I can archive the ink development for a while

[blurymind]

I will have another test. It need to import and render a sprite with some text at least imo. If that works in your codepen, it should be enough to confirm that it works

[BlackRam-oss]

Ok I also added an image. Anyway if you want to do quick tests I added a sandbox to the wiki to do quick tests https://pixi-vn.web.app/ink/ink.html