{"id":21388044,"url":"https://github.com/envoy-vc/aos-playground","last_synced_at":"2025-03-16T12:40:11.569Z","repository":{"id":227740530,"uuid":"772193354","full_name":"Envoy-VC/aos-playground","owner":"Envoy-VC","description":"Web Interface for \"ao\" Permaweb Computer Grid 🐰 🕳️ 👈","archived":false,"fork":false,"pushed_at":"2024-04-17T18:58:56.000Z","size":4307,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-23T00:24:50.189Z","etag":null,"topics":["aos","arweave","editor","lua","monaco-editor","terminal","wasm"],"latest_commit_sha":null,"homepage":"https://aos_playground.ar-io.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Envoy-VC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-14T17:57:50.000Z","updated_at":"2024-07-14T14:42:07.000Z","dependencies_parsed_at":"2024-04-17T20:08:46.963Z","dependency_job_id":null,"html_url":"https://github.com/Envoy-VC/aos-playground","commit_stats":null,"previous_names":["envoy-vc/ao-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Envoy-VC%2Faos-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Envoy-VC%2Faos-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Envoy-VC%2Faos-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Envoy-VC%2Faos-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Envoy-VC","download_url":"https://codeload.github.com/Envoy-VC/aos-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243870896,"owners_count":20361274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aos","arweave","editor","lua","monaco-editor","terminal","wasm"],"created_at":"2024-11-22T12:15:48.534Z","updated_at":"2025-03-16T12:40:11.535Z","avatar_url":"https://github.com/Envoy-VC.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture aligh=\"center\"\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./public/logo-dark.png\"\u003e\n    \u003cimg alt=\"AOS Playground Logo\" src=\"./public/logo-light.png\" width=\"400px\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eWelcome to the AOS Web Playground! Web Interface for 'ao' Permaweb Computer Grid 🐰 🕳️ 👈\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#how-it-works\"\u003eHow it works?\u003c/a\u003e •\n  \u003ca href=\"#tech-stack\"\u003eTech Stack\u003c/a\u003e •\n  \u003ca href=\"https://aos_playground.ar-io.dev\"\u003eTry Now ↗️\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cimg alt=\"AOS Playground Image\" src=\"https://devnet.irys.xyz/_4HXmADnGz1E0UUzKFOMKHcvX4oy1I3ubq0ZLNrrH5U\" style=\"border-radius: 8px;\" \u003e\n\n## Features\n\n- 🌐 **Decentralized**: AOS Playground is hosted on the Permaweb network.\n- ✨ **Multi-modal Support**: Multi-modal editor with a native file explorer built in.\n- 📦 **Resolved Imports**: Import from other files in the explorer using `pcall`.\n- 🗣️ **Language Formatting**: Language formatting for Lua files using wasm module.\n- 🐞 **Debugging**: Supports debugging using the Lua AST Parser.\n- 💾 **Persistence**: Entire application is persisted using LocalStorage and IndexedDB.\n- 🎨 **Themes**: Supports Multiple themes such as `Andromeda`, `Poimandres`, `Github Light/Dark`, `Slack Ochin`, and more\n\n## How it works?\n\nAOS Playground is a web interface for the AO Operating System. It is hosted on the Permaweb network and uses the `@permaweb/aoconnect` SDK to interact with the network.\n\nThe main part of the application using `monaco-editor` by Microsoft. The editor is configured to support Lua language.\n\nLanguage formatting is done using a custom compiled wasm module which runs in workers. (`⌘ + S` to test it)\n\nThe core feature of the editor is module resolve and import. Let's take an example to see how it works\n\n```lua\n-- src/file1.lua\n\nfile1 = {\n  message = \"Message from File 1\"\n}\n```\n\n```lua\n-- index.lua\n\nlocal ok = pcall(require,\".src.file1\")\n\nreturn file1.message\n```\n\nWhat happens when you run `index.lua` file?\n\nFirst a Abstract Syntax Trr will be generated for the Lua file.\n\n\u003cdetails\u003e\n\u003csummary\u003e\nAbstract Syntax Tree for index.lua\n\u003c/summary\u003e\n\n```json\n{\n  \"type\": \"Chunk\",\n  \"body\": [\n    {\n      \"type\": \"LocalStatement\",\n      \"variables\": [\n        {\n          \"type\": \"Identifier\",\n          \"name\": \"ok\"\n        }\n      ],\n      \"init\": [\n        {\n          \"type\": \"CallExpression\",\n          \"base\": {\n            \"type\": \"Identifier\",\n            \"name\": \"pcall\"\n          },\n          \"arguments\": [\n            {\n              \"type\": \"Identifier\",\n              \"name\": \"require\"\n            },\n            {\n              \"type\": \"StringLiteral\",\n              \"value\": null,\n              \"raw\": \"\\\".src.file1\\\"\"\n            }\n          ]\n        }\n      ]\n    },\n    {\n      \"type\": \"ReturnStatement\",\n      \"arguments\": [\n        {\n          \"type\": \"MemberExpression\",\n          \"indexer\": \".\",\n          \"identifier\": {\n            \"type\": \"Identifier\",\n            \"name\": \"message\"\n          },\n          \"base\": {\n            \"type\": \"Identifier\",\n            \"name\": \"file1\"\n          }\n        }\n      ]\n    }\n  ],\n  \"comments\": [\n    {\n      \"type\": \"Comment\",\n      \"value\": \" index.lua\",\n      \"raw\": \"-- index.lua\"\n    }\n  ]\n}\n```\n\n\u003c/details\u003e\n\nThen the content is traversed for any pcall statements. If a pcall statement is found, the value of the CallExpression is resolved in the local file explorer.\n\nIf the file is found then it recursively checks that file for other imports until there are no more imports.\n\nThen the order of execution is determined and the files are executed in that order.\n\n\u003e **Why pcall instead of require?**\n\u003e\n\u003e The reason for using pcall is to catch any errors that might occur during the execution of the file. If an error occurs, the error is caught and the error message is returned instead of the throwing the actual error.\n\n## Tech Stack\n\n- **Frontend**: `React`, `TypeScript`, `TailwindCSS`, `@shadcn/ui`\n- **Editor**: `Monaco Editor`, `skiki` (Syntax highlighting)\n- **Persistence**: `Dexie` and `LocalStorage`\n- **Querying**: `React Query`\n- **AO Operations**: `@permaweb/aoconnect`\n- **Language Formatting**: Custom compiled `wasm` module\n- **Debugging**: `Lua AST Parser`\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvoy-vc%2Faos-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenvoy-vc%2Faos-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenvoy-vc%2Faos-playground/lists"}