feature: ability to write yarn editor plugins inside yarn editor - Yarn Playground?

blurymind commented 5 months ago

Yarn editor uses ace-editor, which can pretty easily be enabled to edit javascript syntax files. Plugins can now be hosted on a gist, so in theory they can also be edited while hosted on that gist (we have the mechanism to load files from gists already)

The dream is to have a new settings button that lets you open the editor in js mode and edit the plugins. Then the process is to apply changes and hot reload.

The goal is to enable quick dev iteration directly in the browser - to add and remove custom features to yarn editor

Edit: This is now implemented, but there is more.. things done:

[x] new plugins editor that uses ace-editor's js mode and has 3 tabs: edit/test/commit. Its like a codepen built into yarn
[x] test tab lets you preview and even download the output of your code - sandboxed in an iframe. Small demo games can be made with it
[x] ability to store editor plugins and playground js on a gist
[x] ability to see a dif between your local changes and whats on the cloud before comiting changes
[x] ability to load external modules in a plugin or a playground test (kaboomjs and pixijs examples already available)
[x] ability to include other js files from the same gist and use them
[x] ability to save the test as a single html file that can be shared with others
[x] file edited, gist and mode are persisted via the url - which can also be shared with others as a link

some things to improve

[x] ace-editor linting - so its easier to spot js errors. Syntax highlighting works fine, but the linter is not enabled atm
[x] add console logging to preview window
[x] add gistId to url params - so the url share link always works
[x] ability to copy to clipboard a shareable link
[x] a reload yarn editor button when next to download output button in the test tab - for testing plugins
[ ] display correct file where an exception occurred - when including another file (not yet sure if possible)
[ ] actor tools wrapper - so its easier to use inkjs or yarn inside test projects
[ ] a welcome dialog with links to quickly open examples (ink/yarn and plugins) (do not show again option and in settings)
[ ] ability to use storage.js class inside yarn playground
[x] resources editor - to store/manage images as base64
[x] resource manager - support for previewing other file types (font, sound, video, etc)
[x] resource manager - support for storing resources in more than one json (add/remove resources.json files - so you can have images.json, fonts.json, sounds.json, etc)
[ ] - fix broken cases (offline/no gist, etc)
[ ] better file handling
[ ] potentially can even display commit history and be able to load previous versions of files (not sure if very useful yet)
[ ] global in js file search
[x] fuzzy search (ufuzzy.js?) - in all search fields (it currently just uses includes on lowercased stripped)

all demos so far are stored at: https://gist.github.com/blurymind/2ff124dc94f936e8f7d96632f559aecb a work in progress demo of this in action - loading pixijs and passing to it the data from yarn https://blurymind.github.io/YarnClassic/?gistPlugins=2ff124dc94f936e8f7d96632f559aecb&pluginFile=yarn-output-pixi-bunnies.js&mode=test

blurymind commented 4 months ago

would be good if the user can write plugins even if they dont have a github account - the plugin code would be stored locally on their computer and be exportable somehow

blurymind commented 3 months ago

a work in progress demo of this in action - loading pixijs and passing to it the data from yarn https://blurymind.github.io/YarnClassic/?gistPlugins=2ff124dc94f936e8f7d96632f559aecb&pluginFile=yarn-output-pixi-bunnies.js&mode=test

blurymind commented 3 months ago

We now have a plugin system set in place that allows creating them directly inside yarn and persisting them on the gist and local memory. You can even see a diff of your changes before committing them.

You can use the plugin api to output a game in a single html file that has bondagejs or inkjs, the yarn editor story data and whatever external module you want to use to render it.

You can also use it to alter yarn editor itself. Attach new buttons or render custom html straight inside yarn (need reloading it in the browser). I am thinking of allowing editor plugins only when in dev mode for now. You might potentially break yarn by writing bad javascript and will have to clear its local data to unbreak it. I tried to make hard to break, it needs to be stress tested more

blurymind commented 1 month ago

Now testing a shareable link that also loads image resources from the gist where the yarn file is stored https://blurymind.github.io/YarnClassic/?gist=1252aaa8f74a394b3ac5695107f16e51&fileName=yarnExample.json&gistPlugins=2ff124dc94f936e8f7d96632f559aecb&pluginFile=yarn-output-pixi-bunnies.js&mode=test

I still need to make this work properly, it doesnt.

When a gist url is passed, yarn needs to use it instead of the local cache to load any resources. if no resources are found - yarn needs to notify the user and instead load the local cached resources

blurymind / YarnClassic

feature: ability to write yarn editor plugins inside yarn editor - Yarn Playground? #328