Frontend uudelleenrakennettu: Astro-komponentit, Wasm pääsäikeessä, ei Workeria

Vanha frontend siirretty temp/. Uusi rakenne:
- StatusBar.astro, Terminal.astro, Editor.astro, Guide.astro
- global.css erillinen
- Wasm pääsäikeessä (ei Worker — yksinkertainen, debugattava)
- Tab-completion, dropdown, projektikortti, Monaco, GUIDE.md
- Ei tokenisointia eikä koodilaboratoriota

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaakko Vanhala
2026-04-09 20:17:39 +03:00
parent e3fdb91ac5
commit a8c4af0975
9617 changed files with 996171 additions and 5349 deletions

View File

@@ -0,0 +1,72 @@
# Astro Compiler
Astros [Go](https://golang.org/) + WASM compiler.
## Install
```
npm install @astrojs/compiler
```
## Usage
#### Transform `.astro` to valid TypeScript
The Astro compiler can convert `.astro` syntax to a TypeScript Module whose default export generates HTML.
**Some notes**...
- TypeScript is valid `.astro` syntax! The output code may need an additional post-processing step to generate valid JavaScript.
- `.astro` files rely on a server implementation exposed as `astro/runtime/server/index.js` in the Node ecosystem. Other runtimes currently need to bring their own rendering implementation and reference it via `internalURL`. This is a pain point we're looking into fixing.
```js
import { transform, type TransformResult } from "@astrojs/compiler";
const result = await transform(source, {
filename: "/Users/astro/Code/project/src/pages/index.astro",
sourcemap: "both",
internalURL: "astro/runtime/server/index.js",
});
```
#### Parse `.astro` and return an AST
The Astro compiler can emit an AST using the `parse` method.
**Some notes**...
- Position data is currently incomplete and in some cases incorrect. We're working on it!
- A `TextNode` can represent both HTML `text` and JavaScript/TypeScript source code.
- The `@astrojs/compiler/utils` entrypoint exposes `walk` and `walkAsync` functions that can be used to traverse the AST. It also exposes the `is` helper which can be used as guards to derive the proper types for each `node`.
```js
import { parse } from "@astrojs/compiler";
import { walk, walkAsync, is } from "@astrojs/compiler/utils";
const result = await parse(source, {
position: false, // defaults to `true`
});
walk(result.ast, (node) => {
// `tag` nodes are `element` | `custom-element` | `component`
if (is.tag(node)) {
console.log(node.name);
}
});
await walkAsync(result.ast, async (node) => {
if (is.tag(node)) {
node.value = await expensiveCalculation(node)
}
});
```
## Develop
### VSCode / CodeSpaces
A `devcontainer` configuration is available for use with VSCode's [Remote Development extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) and GitHub CodeSpaces.
## Contributing
[CONTRIBUTING.md](/CONTRIBUTING.md)