feat(asm): asm 汇编器架构

Author: kanalin

package-lock.json

@@ -0,0 +1,62 @@
+import React, { useCallback, useState } from 'react';
+import { Input, Button, Layout } from 'antd';
+import { AssemblerBox } from './style';
+
+const Assembler = () => {
+    const [input, changeInput] = useState<string>('');
+    const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        if (!event.target.files || !event.target.files[0]) {
+            return;
+        }
+
+        const file = event.target.files[0];
+        const reader = new FileReader();
+
+        // @ts-ignore
+        reader.onloadend = (ev: ProgressEvent<FileReader>) => {
+            if (!ev.target || ev.target.readyState !== FileReader.DONE) {
+                return;
+            }
+            changeInput((ev.target.result as string) || '');
+        };
+        reader.readAsText(file);
+    }, []);
+
+    const parser = useCallback(() => {
+        console.log('input', input);
+    }, [input]);
+
+    return (
+        <Layout>
+            <Layout.Header>
+                <h1 style={{ color: 'white' }}>assembler</h1>
+            </Layout.Header>
+            <Layout.Content
+                style={{
+                    boxSizing: 'border-box',
+                    height: 'calc(100vh - 64px)',
+                    padding: '20px',
+                }}
+            >
+                <AssemblerBox>
+                    <div className="header operate">
+                        <input type="file" onChange={handleChange} />
+                        <Button type="primary" className="parser-btn" onClick={parser}>
+                            编译
+                        </Button>
+                    </div>
+                    <div className="body">
+                        <div className="content left">
+                            <Input.TextArea className="file-content" rows={20} disabled value={input} />
+                        </div>
+                        <div className="content right">
+                            <Input.TextArea className="file-content" rows={20} disabled value={input} />
+                        </div>
+                    </div>
+                </AssemblerBox>
+            </Layout.Content>
+        </Layout>
+    );
+};
+
+export default Assembler;

src/component/assembler/Assembler.tsx

@@ -0,0 +1,2 @@
+import Assembler from './Assembler';
+export default Assembler;

src/component/assembler/index.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const AssemblerBox = styled.div`
+    .header {
+        margin-bottom: 10px;
+    }
+
+    .body {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+
+        .content {
+            box-sizing: border-box;
+            width: 49%;
+
+            .file-content {
+                color: rgba(0, 0, 0, 0.65);
+            }
+        }
+    }
+`;

src/component/assembler/style.ts

@@ -1,25 +1,22 @@
 import React from 'react';
-import {
-  BrowserRouter,
-  Switch,
-  Route,
-  Redirect,
-} from 'react-router-dom';
+import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
 import TankGame from '../tank-game/layout';
 import Regular from '../regular';
 import PlusTimes from '../plus-times';
+import Assembler from '../assembler';
 
 const Router = () => {
-  return (
-    <BrowserRouter>
-      <Switch>
-        <Route path="/regular" component={Regular} />
-        <Route path="/plus-time-compiler" component={PlusTimes} />
-        <Route path="/mini-compiler/:level" component={TankGame} />
-        <Redirect from="*" to="/regular" />
-      </Switch>
-    </BrowserRouter>
-  );
+    return (
+        <BrowserRouter>
+            <Switch>
+                <Route path="/regular" component={Regular} />
+                <Route path="/plus-time-compiler" component={PlusTimes} />
+                <Route path="/mini-compiler/:level" component={TankGame} />
+                <Route path="/asm" component={Assembler} />
+                <Redirect from="*" to="/asm" />
+            </Switch>
+        </BrowserRouter>
+    );
 };
 
 export default Router;

src/component/router/Router.tsx

@@ -0,0 +1,9 @@
+# 汇编解析器
+
+https://github.com/CorleoneYu/nand2tetris  
+
+https://www.jianshu.com/p/19bd2a6761d0  
+
+https://www.jianshu.com/p/19fb662248cd  
+
+课程中第六章，将 「汇编代码」 转换为 「机器语言」。

src/core/assembler/README.md

@@ -0,0 +1,24 @@
+class Code {
+    /**
+     * 返回 dest 助记符 的 二进制
+     */
+    public dest() {
+
+    }
+
+    /**
+     * 返回 comp 助记符 的 二进制
+     */
+    public comp() {
+
+    }
+
+    /**
+     * 返回 jump 助记符 的 二进制
+     */
+    public jump() {
+
+    }
+}
+
+export default Code;

src/core/assembler/code.ts

@@ -0,0 +1,8 @@
+import Code from './code';
+import Parser from './parser';
+
+class Assembler {
+
+}
+
+export default Assembler;

src/core/assembler/index.ts

@@ -0,0 +1,58 @@
+/**
+ * 封装对输入代码对访问操作
+ * 1. 提供访问汇编命令（域 符号）的方法；
+ * 2. 去掉所有空格和注释
+ */
+class Parser {
+    public hasMore() {
+
+    }
+
+    public advance() {
+
+    }
+
+    /**
+     * 返回当前命令的类型：
+     * 1. A_COMMAND: @Xxx 其中 Xxx 是符号或十进制数字
+     * 2. C_COMMAND: dest = comp:jump
+     * 3. L_COMMAND @Xxx 其中 Xxx 是符号
+     */
+    public commandType() {
+
+    }
+
+    /**
+     * 返回形如 @Xxx 的当前命令的符号或十进制
+     * 当且仅当类型为 A_COMMAND 或 L_COMMAND
+     */
+    public symbol() {
+
+    }
+
+    /**
+     * 返回当前 C_COMMAND 的 dest 助记符
+     * 8 种情况
+     */
+    public dest() {
+
+    }
+
+    /**
+     * 返回当前 C_COMMAND 的 comp 助记符
+     * 28 种情况
+     */
+    public comp() {
+
+    }
+
+    /**
+     * 返回当前 C_COMMAND 的 jump 助记符
+     * 8 种情况
+     */
+    public jump() {
+
+    }
+}
+
+export default Parser;

src/core/assembler/parser.ts

@@ -0,0 +1,5 @@
+class SymbolTable {
+
+}
+
+export default SymbolTable;