feat(global): add basic astro installation

Mati365 · Nov 12, 2023 · 21846b1 · 21846b1
1 parent e6547be
commit 21846b1
Show file tree

Hide file tree

Showing 17 changed files with 3,212 additions and 56 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -1,5 +1,8 @@
 ---
-extends: airbnb-typescript
+extends:
+  - airbnb-typescript
+  - plugin:astro/recommended
+
 parser: '@typescript-eslint/parser'
 parserOptions:
   ecmaVersion: 6
@@ -16,6 +19,12 @@ overrides:
       quotes: 0
       '@typescript-eslint/quotes': 0
 
+  - files: ['*.astro']
+    parser: 'astro-eslint-parser'
+    parserOptions:
+      parser: '@typescript-eslint/parser'
+      extraFileExtensions: ['.astro']
+
 env:
   browser: true
   mocha: true
@@ -96,6 +105,8 @@ rules:
   react/no-danger: 0
   react/prop-types: 0
   react/jsx-props-no-spreading: 0
+  react/jsx-filename-extension:
+    [1, { 'extensions': ['.jsx', '.tsx', '.astro'] }]
   react/sort-comp:
     - 1
     - order: ['static-methods', 'lifecycle', 'everything-else', 'render']

diff --git a/.gitignore b/.gitignore
@@ -132,3 +132,4 @@ dist
 .turbo
 .swc
 .mock
+.astro/
diff --git a/README.md b/README.md
@@ -46,6 +46,12 @@ Options:
 
 ### Example
 
+Compile `main.c` and open `x86-16` runner:
+
+```bash
+npx ts-c ./main.c -b > npx run-x86_16-vm
+```
+
 Compile `main.c` to x86-16 binary:
 
 ```bash

diff --git a/apps/x86-16-vm/.eslintrc.yml b/apps/x86-16-vm/.eslintrc.yml
@@ -0,0 +1 @@
+extends: ../../.eslintrc.yml
diff --git a/apps/x86-16-vm/astro.config.mjs b/apps/x86-16-vm/astro.config.mjs
@@ -0,0 +1,8 @@
+/* eslint-disable import/no-default-export */
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+import tailwind from '@astrojs/tailwind';
+
+export default defineConfig({
+  integrations: [react(), tailwind()],
+});
diff --git a/apps/x86-16-vm/package.json b/apps/x86-16-vm/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@ts-c-compiler/x86-16-vm",
+  "version": "1.1.0",
+  "private": false,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "lint": "npx eslint --max-warnings=0 src/",
+    "check:types": "npx tsc --noEmit",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@ts-c-compiler/x86-cpu": "*"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.3.1",
+    "@astrojs/react": "^3.0.4",
+    "astro": "^3.5.2",
+    "sass": "^1.69.5",
+    "@astrojs/tailwind": "^5.0.2",
+    "tailwindcss": "^3.0.24"
+  }
+}
diff --git a/apps/x86-16-vm/src/components/index.ts b/apps/x86-16-vm/src/components/index.ts
@@ -0,0 +1 @@
+export * from './screen';
diff --git a/apps/x86-16-vm/src/components/screen.tsx b/apps/x86-16-vm/src/components/screen.tsx
@@ -0,0 +1,44 @@
+import React, { useRef, useEffect } from 'react';
+import { Buffer } from 'buffer';
+import { X86CPU, VGARenderLoopDriver } from '@ts-c-compiler/x86-cpu';
+
+type ScreenProps = {
+  binary: Buffer;
+};
+
+export const Screen = ({ binary }: ScreenProps) => {
+  const screenRef = useRef<HTMLCanvasElement>();
+
+  useEffect(() => {
+    if (!screenRef.current) {
+      return;
+    }
+
+    const cpu = new X86CPU();
+    cpu
+      .attach(VGARenderLoopDriver, {
+        screenElement: screenRef.current,
+        upscaleWidth: Number.parseInt(
+          getComputedStyle(document.body).getPropertyValue(
+            '--repl-output-width',
+          ),
+          10,
+        ),
+      })
+      .boot(binary);
+
+    return () => {
+      cpu.release();
+    };
+  }, [screenRef.current]);
+
+  return (
+    <canvas
+      ref={screenRef}
+      className='block mx-auto text-center'
+      style={{
+        imageRendering: 'pixelated',
+      }}
+    />
+  );
+};
diff --git a/apps/x86-16-vm/src/env.d.ts b/apps/x86-16-vm/src/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="astro/client" />
diff --git a/apps/x86-16-vm/src/layouts/Layout.astro b/apps/x86-16-vm/src/layouts/Layout.astro
@@ -0,0 +1,28 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!doctype html>
+<html lang='en'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='description' content='Astro description' />
+    <meta name='viewport' content='width=device-width' />
+    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
+    <meta name='generator' content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style lang='scss' is:global>
+  html {
+    font-family: Arial, system-ui, sans-serif;
+  }
+</style>
diff --git a/apps/x86-16-vm/src/pages/index.astro b/apps/x86-16-vm/src/pages/index.astro
@@ -0,0 +1,13 @@
+---
+import { buffer } from 'node:stream/consumers';
+import Layout from '../layouts/Layout.astro';
+import { Screen } from '../components';
+
+const binary = await buffer(process.stdin);
+---
+
+<Layout title='X86-16bit emulator'>
+  <div class='fixed left-0 top-0 w-full h-full flex items-center justify-center'>
+    <Screen binary={binary} client:load />
+  </div>
+</Layout>
diff --git a/apps/x86-16-vm/tailwind.config.mjs b/apps/x86-16-vm/tailwind.config.mjs
@@ -0,0 +1,9 @@
+/* eslint-disable import/no-default-export */
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/apps/x86-16-vm/tsconfig.json b/apps/x86-16-vm/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/"],
+  "compilerOptions": {
+    "baseUrl": "src",
+    "module": "CommonJS",
+    "declaration": false,
+    "declarationMap": false
+  }
+}
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -3,7 +3,6 @@ const nodeExternals = require('webpack-node-externals');
 const NodemonPlugin = require('nodemon-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const PRODUCTION_MODE = process.env.NODE_ENV !== 'development';
 
@@ -87,13 +86,6 @@ exports.createConfig = ({
     __dirname: false,
   },
   plugins: [
-    ...(target === 'node'
-      ? []
-      : [
-          new HtmlWebpackPlugin({
-            title: 'Emulator',
-          }),
-        ]),
     new ESLintPlugin({
       extensions: ['js', 'jsx', 'ts', 'tsx'],
       exclude: ['node_modules'],

diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "eslint": "^8.31.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-astro": "^0.29.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.11",

diff --git a/prettier.config.js b/prettier.config.js
@@ -3,4 +3,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   arrowParens: 'avoid',
+  jsxSingleQuote: true,
 };