@andrivet/z80-assembler 1.3.2 → 1.4.0

package/apps/z80-assembler-app/src/app/editor.tsx

@@ -0,0 +1,228 @@
+/**
+ * Z80 Assembler in Typescript
+ *
+ * File:        editor.tsx
+ * Description: Code editor
+ * Author:			Sebastien Andrivet
+ * License:			GPLv3
+ * Copyrights: 	Copyright (C) 2023 Sebastien Andrivet
+ */
+import {Tabs} from "react-daisyui";
+import {FaWindowClose} from "react-icons/fa";
+import CodeMirror, {basicSetup} from "@uiw/react-codemirror";
+import {linter, lintGutter} from '@codemirror/lint'
+import React, {useState, useImperativeHandle} from "react";
+import {directoryOpen, fileOpen, fileSave, FileWithDirectoryAndFileHandle} from "browser-fs-access";
+import {closeDropdown} from "./misc";
+import {CompilationError} from "@andrivet/z80-assembler";
+
+const validExt = ['.asm', '.zx81'];
+
+interface AppEditorHandlers {
+  openCode: () => void;
+  openCodeDirectory: () => void;
+  saveCode: () => void;
+  closeCode: () => void;
+  closeAll: () => void;
+  getCode: (filename: string) => string;
+}
+
+interface AppEditorProps {
+  code: string,
+  setFilePath: React.Dispatch<React.SetStateAction<string>>,
+  setCode: React.Dispatch<React.SetStateAction<string>>,
+  errors: CompilationError[] | undefined,
+  setErrors: React.Dispatch<React.SetStateAction<CompilationError[] | undefined>>
+}
+
+type CodeFile = {
+  filepath: string,
+  name: string | undefined,
+  code: string
+};
+
+function getExt(name: string) {
+  return /(?:\.([^.]+))?$/.exec(name);
+}
+
+function isValidExt(name: string){
+  const ext = getExt(name)?.[1];
+  if(!ext) return false;
+  return validExt.indexOf('.' + ext) !== -1
+}
+
+
+function AppEditor(props: AppEditorProps, ref: React.ForwardedRef<AppEditorHandlers>) {
+  const [codeFiles, setCodeFiles] = useState<CodeFile[]>([{filepath: '', name: undefined, code: ''}]);
+  const [currentFile, setCurrentFile] = useState<number>(0);
+
+  async function handleOpenCode() {
+    const blob = await fileOpen({extensions: validExt});
+    closeDropdown();
+    const content = await blob.text();
+
+    let files: CodeFile[];
+    let current = codeFiles[currentFile];
+    if(current.name == null && current.code.length <= 0) {
+      files = [...codeFiles]; // Have to be a copy
+      current = files[currentFile];
+      current.filepath = blob.name;
+      current.name = blob.name;
+      current.code = content;
+    }
+    else
+      files = [...codeFiles, {filepath: blob.name, name: blob.name, code: content}]; // Must be a copy
+
+    setCodeFiles(files);
+    setCurrentFile(files.length - 1);
+    props.setCode(content);
+    props.setFilePath(blob.name);
+    props.setErrors(undefined);
+  }
+
+  async function handleOpenDirectory() {
+    const blobs = await directoryOpen({
+      recursive: true
+    });
+    closeDropdown();
+
+    const files = [...codeFiles]; // Have to be a copy
+    for (const blob of blobs) {
+      if (!isValidExt(blob.name)) continue;
+      const file = blob as FileWithDirectoryAndFileHandle;
+      const content = await file.text();
+      files.push({filepath: file.webkitRelativePath, name: blob.name, code: content});
+    }
+    const index = files.length - 1;
+    setCodeFiles(files);
+    setCurrentFile(index);
+    props.setCode(files[index].code);
+    props.setFilePath(files[index].filepath);
+    props.setErrors(undefined);
+  }
+
+  async function handleSaveCode() {
+    closeDropdown();
+    const file = codeFiles[currentFile];
+    if (!file) return;
+    const blob = new Blob([file.code]);
+    await fileSave(blob, {
+      fileName: file.name ?? 'untitled.asm',
+      extensions: validExt
+    });
+  }
+
+  function handleGetCode(filename: string) {
+    const file = codeFiles.find(f => f.filepath.endsWith(filename));
+    if(file == null) throw new Error(`File ${filename} not found`);
+    return file.code;
+  }
+
+  function handleCloseCode() {
+    closeDropdown();
+    handleCloseTab(currentFile);
+  }
+
+  function handleCloseAll() {
+    closeDropdown();
+    setCodeFiles([{filepath: '', name: undefined, code: ''}]);
+    setCurrentFile(0);
+    props.setCode('');
+    props.setFilePath('');
+    props.setErrors(undefined);
+  }
+
+  useImperativeHandle(ref, () => {
+    return {
+      openCode: handleOpenCode,
+      openCodeDirectory: handleOpenDirectory,
+      saveCode: handleSaveCode,
+      getCode: handleGetCode,
+      closeCode: handleCloseCode,
+      closeAll: handleCloseAll
+    }
+  });
+
+  function handleChangeTab(index: number) {
+    if (index >= codeFiles.length) index = codeFiles.length > 0 ? codeFiles.length - 1 : 0;
+    setCurrentFile(index);
+    if(codeFiles.length > 0) {
+      const file = codeFiles[index];
+      props.setCode(file.code);
+      props.setFilePath(file.filepath);
+    }
+    else {
+      props.setCode('');
+      props.setFilePath('');
+    }
+    props.setErrors(undefined);
+  }
+
+  function handleCloseTab(index: number) {
+    const files = codeFiles.slice(0, index).concat(codeFiles.slice(index + 1));
+    if(files.length <= 0) {
+      setCodeFiles([{filepath: '', name: undefined, code: ''}]);
+      setCurrentFile(0);
+      props.setCode('');
+      props.setFilePath('');
+      props.setErrors(undefined);
+    }
+    else {
+      setCodeFiles(files);
+      if (index >= files.length) index = files.length - 1;
+      setCurrentFile(index);
+      const file = files[index];
+      props.setCode(file.code);
+      props.setFilePath(file.filepath);
+      props.setErrors(undefined);
+    }
+  }
+
+  const asmLinter = linter(view => {
+    return props.errors == null ? [] : props.errors
+      ?.filter(value => codeFiles[currentFile].filepath === value.position.filename)
+      .map(value => {
+      const from = view.state.doc.line(value.position.pos.line).from + value.position.pos.offset;
+      return {
+        from: from,
+        to: from + 1,
+        severity: "error",
+        message: value.message
+      }
+    })
+  });
+
+  return(
+    <>
+      <h1 className="font-bold mb-2 text-orange-400">Assembler Code</h1>
+      <div className="flex flex-col flex-1">
+        <Tabs
+          variant={"lifted"}
+          value={currentFile}
+        >{
+          codeFiles.map((file, index) => (
+            <Tabs.Tab key={index} value={index}>
+              <FaWindowClose
+                className="h-4 w-4 mr-2"
+                onClick={() => handleCloseTab(index)} />
+              <p onClick={() => handleChangeTab(index)}>{file.name ?? 'untitled.asm'}</p>
+            </Tabs.Tab>
+          ))}
+        </Tabs>
+        <div className="flex flex-auto h-full relative mt-0">
+          <CodeMirror
+            className="absolute top-0 bottom-0 left-0 right-0"
+            theme="dark"
+            height="100%"
+            value={props.code}
+            onChange={(value) => props.setCode(value)}
+            extensions={[basicSetup(), asmLinter, lintGutter()]}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default React.forwardRef(AppEditor);
+export {AppEditorHandlers};

package/apps/z80-assembler-app/src/app/errors.tsx

@@ -0,0 +1,31 @@
+/**
+ * Z80 Assembler in Typescript
+ *
+ * File:        errors.tsx
+ * Description: Compilation errors
+ * Author:			Sebastien Andrivet
+ * License:			GPLv3
+ * Copyrights: 	Copyright (C) 2023 Sebastien Andrivet
+ */
+import {CompilationError} from "@andrivet/z80-assembler";
+
+interface ErrorsProps {
+  errors: CompilationError[] | undefined;
+}
+
+function errorText(errors: CompilationError[] | undefined) {
+  if(errors == null) return '';
+  if(errors.length <= 0) return 'Successful compilation';
+  return errors[0].toString();
+}
+
+function Errors({errors}: ErrorsProps) {
+  const hasError = errors && errors?.length > 0;
+  const text = errorText(errors);
+  return (
+    <div className=" h-8 mx-3 mb-4">
+      <p className={`px-2 pt-0.5 ${hasError ? 'text-red-300' : ' text-green-300'}`}>{text}</p>
+    </div>);
+}
+
+export default Errors;

package/apps/z80-assembler-app/src/app/footer.tsx

@@ -0,0 +1,20 @@
+/**
+ * Z80 Assembler in Typescript
+ *
+ * File:        footer.tsx
+ * Description: Footer of the application
+ * Author:			Sebastien Andrivet
+ * License:			GPLv3
+ * Copyrights: 	Copyright (C) 2023 Sebastien Andrivet
+ */
+import {Footer} from "react-daisyui";
+import React from "react";
+
+export default function AppFooter() {
+  return (
+    <div className="flex-none">
+    <Footer className="footer-center sticky mb-0 py-2 bg-neutral-700">
+    <a href='https://www.github.com/andrivet/z80-assembler'>Z80 Assembler in Typescript - Copyright &copy; 2023 Sebastien Andrivet</a>
+  </Footer>
+  </div>);
+}

package/apps/z80-assembler-app/src/app/header.tsx

@@ -0,0 +1,57 @@
+/**
+ * Z80 Assembler in Typescript
+ *
+ * File:        header.tsx
+ * Description: Header of the application
+ * Author:			Sebastien Andrivet
+ * License:			GPLv3
+ * Copyrights: 	Copyright (C) 2023 Sebastien Andrivet
+ */
+import React from "react";
+import {Button, Dropdown, Navbar} from "react-daisyui";
+import logoUrl from "../assets/images/logo192.png";
+import {FaChevronDown, FaCog, FaFile, FaFileAlt, FaCodepen, FaFolderOpen, FaSave, FaTimesCircle} from "react-icons/fa";
+
+
+interface AppHeaderProps {
+  onOpenCode: () => void;
+  onOpenCodeDirectory: () => void;
+  onSaveCode: () => void;
+  onSaveBinary: () => void;
+  onSaveSld: () => void;
+  onCompile: () => void;
+  onShowOpCodes: () => void;
+  onClose: () => void;
+  onCloseAll: () => void;
+}
+
+export default function AppHeader(props: AppHeaderProps) {
+
+  return (
+    <div className="flex-none">
+      <Navbar className="bg-neutral-700 top-0">
+        <Navbar.Start>
+          <img src={logoUrl} width={32} className="mx-4" alt="Logo"></img><span className="text-orange-400">Z80 Assembler</span>
+        </Navbar.Start>
+        <Navbar.Center className="flex">
+          <Dropdown hover={true}  className="z-10">
+            <Dropdown.Toggle color="ghost"><FaFile className="h-5 w-5" />File<FaChevronDown className="w-4 h-4" /></Dropdown.Toggle>
+            <Dropdown.Menu className="w-56">
+              <Dropdown.Item onClick={props.onOpenCode}><FaFileAlt className="h-5 w-5" />Open Code...</Dropdown.Item>
+              <Dropdown.Item onClick={props.onOpenCodeDirectory}><FaFolderOpen className="h-5 w-5" />Open Code Directory...</Dropdown.Item>
+              <Dropdown.Item onClick={props.onSaveCode}><FaSave className="h-5 w-5" />Save Code...</Dropdown.Item>
+              <Dropdown.Item onClick={props.onSaveBinary}><FaSave className="h-5 w-5" />Save Binary...</Dropdown.Item>
+              <Dropdown.Item onClick={props.onSaveSld}><FaSave className="h-5 w-5" />Save SLD File...</Dropdown.Item>
+              <Dropdown.Item onClick={props.onClose}><FaTimesCircle className="h-5 w-5" />Close Code</Dropdown.Item>
+              <Dropdown.Item onClick={props.onCloseAll}><FaTimesCircle className="h-5 w-5" />Close All</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Button color="ghost" onClick={props.onCompile}><FaCog className="h-5 w-5"/>Compile</Button>
+        </Navbar.Center>
+        <Navbar.End>
+          <Button color="ghost" onClick={props.onShowOpCodes}><FaCodepen className="h-5 w-5" />Z80 Opcodes</Button>
+        </Navbar.End>
+      </Navbar>
+    </div>
+  );
+}

package/apps/z80-assembler-app/src/app/misc.ts

@@ -0,0 +1,13 @@
+/**
+ * Z80 Assembler in Typescript
+ *
+ * File:        misc.ts
+ * Description: Helpers
+ * Author:			Sebastien Andrivet
+ * License:			GPLv3
+ * Copyrights: 	Copyright (C) 2023 Sebastien Andrivet
+ */
+export function closeDropdown() {
+  const elem = document.activeElement as HTMLElement;
+  if(elem) elem?.blur();
+}