About Play Seed

Seed is a frontend Rust framework for creating fast and reliable web apps with an elm-like architecture.

Play Seed is a playground, where you can write simple Seed based application in the browser, build it and run.

Sources

You can find sources in the Gitlab: frontend and backend.

Acknowledgements

Play Seed has been forked from two base sources:

Without those projects Play Seed would've never be created.

How it works

In the playground you will see three buttons: 'Run', 'Build' and 'Build & Run'.

Build

'Build' would cause .play-seed/build.ts script execution, which by default would grab src folder and send it to backend for compilation. There is predefined Cargo.toml file, which backend sandbox would use to compile received sources with standard 'wasm-pack' call, the results of which (wasm and js files) would be returned back to the frontend app and put in the out folder in the playground. Also, once build is finished you will see stdout and stderr results in the Output panel. If you want to know more about backend sandbox, check Backend in Sandbox.

Run

'Run' would grab .play-seed/main.html and use it as an entrypoint, populating iframe with it's content and additionally loading any JS or CSS files linked from it into same iframe. This loading process, however, is currently imperfect (see Sandbox). By default main.html would link main.js, which in its turn would load wasm-bindgen built js from 'out/index.js' and pass loaded 'out/main.wasm' to it.

'Run' is blocked until build happens at least once.

Build and Run

As you have probably guessed, 'Build & Run' would simply run both 'Build' and 'Run' sequentially. As build process might be somewhat long, if you don't change Rust code, you could use only 'Run' to see new result.

Limits

Additionally you might need to know, that currently backend allows only three simultaneous builds running, as they are somewhat heavy and compute capabilities are quite limited. In case if limit is exceeded you will see message 'max connections reached' in the Output.

Sandbox

Frontend

Frontend sandbox runs in the browser window using <iframe> tag, with all JS scripts, CSS files and main.wasm loaded as blobs.

During loading process, Play Seed would process links to JS files from .play-seed/main.html and substitutes their src to blob url. Then JS files would be processed recursively, so if one file uses import to connect another file, it would also be loaded.

CSS loading is currently simpler and in case if CSS file links another file, it would be ignored. CSS files are loaded by href attribute in <link> of .play-seed/main.html.

Backend

Backend build sandbox using docker to compile sources you've entered under src folder. Only this folder would be mounted to docker container. Everything outside it, would be ignored during build. This also includes, for example Cargo.toml. Backend would use it's own Cargo.toml and does not allow currently to change it. Same goes for build.rs.

Build would call wasm-pack command with debug mode enabled (because it is the fastest currently). The whole compilation would timeout of after about 20 seconds. If timeouted, you might see some unclear error output. In addition to timeout, backend applies rate limiting, when no more than 3 in-flight requests are allowed in general.

Dependencies

Currently Cargo.toml has a number of precompiled dependencies, which could be used in the code. You can see current version in the sources here. As of now there's no way to add anything to these dependencies except make merge request to that file. Before doing that, you might want to communicate with me (see Contacts).

Github Integration

Open from repository

GitHub repositories could be specified in the github parameter of URL to playground like this: https://ide.play-seed.dev/?github=MartinKavik/seed-app-counter.

When playground is opened from such URL, it would try to load sources from that repository. Currently by default only src folder would be loaded. However, that could be configured, see Configuration below for details.

To integrate any repository with Play Seed, during loading process three standard files would be also added into playground under .play-seed directory - main.html, main.js and build.ts. Those files would be added only if they were not present in the repository. Counter example linked above is one of those simple apps, which are compatible with standard Play Seed entrypoint. However, other repositories might need to override stadart project bootstrap by creating those files in the repository. You might also want to only override some of those files, then playground would fill the rest.

Configuration

Before loading the sources, Play Seed would try to see if repository contains configurations in .play-seed/config.yml file. If the file is present, it would be recognized and used during sources loading.

Currently only one configuration option is supported there - directories array allows you to choose which directories to load into playground.

Here's an example how to add css folder in addition to default src: 

directories: 
  - src # default 
  - css # additional

Rate limit

GitHub limits the number of requests made anonymously, so if first request failed with message about rate limit, playground would request you to authorize it to make requests on your behalf, which grants much more loose restriction.

Additionally you will be asked authorization to create gists.

Gists

You can press right button in the file tree and select to create a Gist from files currently saved in playground or use button "Create Gist" in the toolbar. That would require authorization to GitHub.

If you place id of your Gist in the url, for example like this: 

https://ide.play-seed.dev/?g=5d53999f5d75f9b5526340ae4b99cf38

, Play Seed would try to load sources from Gist.

It does not support loading truncated Gists yet.

Url of your currently opened sources would also have g after you create Gist. To share created Gist with others, you can just copy url from browser and send it to someone to discuss.

Roadmap

More dependencies

Initial backend from Rust Playground supported building compiler image with 100 most popular crates. Need to support that too in addition to all crates required for Seed and examples.

Integrate with router

Right now router from Seed would not work in playground, because it tries to access url, but playground sandbox runs in frame, which does not have access to url and even if it had, it is not correct to change playground url to keep state of app in iframe. History API should be either stubbed and mapped to different state or at least mocked to prevent runtime errors.

Send compile errors to Problems

When compiler failed, need to highlight relevant code and display errors in Problems tab. UI seems to have that functionality already, but it was not integrated with backend yet.

Embedding

There should be a possibility to embed playground into any website in order to support two functionalities: "Open in IDE" and "Run and Render". Iframe which produced should support options to display either only one of buttons and/or code.

Open in IDE

Should simply open code from embedded iframe in the IDE. It's an open question how to send data from website to frontend. Might need to temporary save it via backend. Alternatively could just use Gist for storage.

Run and Render

Should communicate with Playground API to build and then run in iframe right on the embedding website.

Complete CI/CD

Currently when backend change is done, some manual actions over SSH are required, such as download image (if compiler was changed) or download binary and restart service. Those are already scripted, but not fully automated. They should be run from Gitlab CI as well as builds.

Mobile layout

Even though monaco-editor used in UI does not support mobile, we can still adjust layout to make it at least somehow adaptive.

Contacts

Author

My name is Timur Sultanaev, regarding this playground you can contact me via seed-rs Discord, my nickname there is @strowk, just tag me if you have any questions about the playground.