feat: add toolbar

.eslintrc.yml

@@ -12,6 +12,8 @@ ignorePatterns:
  - prettier.config.js
  - .eslintrc.js
  - .eslintrc.cjs
+ - rollup.config.mjs
+ - tailwind.config.mjs
 
 overrides:
  - files: ['*.test.ts', '*.test.tsx']
@@ -37,8 +39,7 @@ settings:
  react:
  version: detect
 
- 'import/parsers':
- { '@typescript-eslint/parser': ['.ts', '.tsx', '.woff2', '.png'] }
+ 'import/parsers': { '@typescript-eslint/parser': ['.ts', '.tsx', '.woff2', '.png'] }
 
 rules:
  max-len: ['error', 120]

README.md

@@ -16,7 +16,7 @@ Multipass portable C lang compiler toolkit with IR code generator including back
 Currently supported architectures:
 
 1. X86 16bit real mode code emitter with floating point X87 coprocessor support
- 
+
 **🚧 Warn! The project is unstable so please do not use it on production!**
 
 ## Install

apps/cli/src/NodeFsIncludeResolver.ts

@@ -20,17 +20,15 @@ export class NodeFsIncludeResolver implements CInterpreterIncludeResolver {
 
  return E.tryCatch(
  () => ({
- content: readFileSync(absolutePath, { encoding: 'utf8' }),
+ content: readFileSync(absolutePath, {
+ encoding: 'utf8',
+ }),
  absolutePath,
  }),
  () =>
- new CPreprocessorError(
- CPreprocessorErrorCode.CANNOT_INCLUDE_FILE,
- null,
- {
- name: absolutePath,
- },
- ),
+ new CPreprocessorError(CPreprocessorErrorCode.CANNOT_INCLUDE_FILE, null, {
+ name: absolutePath,
+ }),
  );
  };
 }

apps/cli/src/index.ts

@@ -22,16 +22,13 @@ program
  .argument('<source>', 'Relative or absolute path to source file')
  .option('-b, --binary', 'Emits binary stdout')
  .addOption(
- new Option(
- '-o, --output <string>',
- 'Relative path to your output binary',
- ).conflicts('binary'),
- )
- .addOption(
- new Option('-d, --debug', 'Print AST tree and assembly output').conflicts(
+ new Option('-o, --output <string>', 'Relative path to your output binary').conflicts(
  'binary',
  ),
  )
+ .addOption(
+ new Option('-d, --debug', 'Print AST tree and assembly output').conflicts('binary'),
+ )
  .addOption(
  new Option('-ps, --print-assembly', 'Print assembly output').conflicts([
  'binary',
@@ -49,7 +46,10 @@ program
  'Generate 512B bootsector output. Remember to have main entrypoint.',
  )
  .action((source, options) => {
- const srcFile = fs.readFileSync(source, { encoding: 'utf8', flag: 'r' });
+ const srcFile = fs.readFileSync(source, {
+ encoding: 'utf8',
+ flag: 'r',
+ });
  const cCompile = pipe(
  srcFile,
  ccompiler({

apps/cli/webpack.config.js

@@ -14,6 +14,9 @@ module.exports = createConfig({
  },
  },
  plugins: [
- new webpack.BannerPlugin({ banner: '#!/usr/bin/env node', raw: true }),
+ new webpack.BannerPlugin({
+ banner: '#!/usr/bin/env node',
+ raw: true,
+ }),
  ],
 });

apps/site/.eslintrc.yml

@@ -2,9 +2,4 @@ extends: ../../.eslintrc.yml
 rules:
  '@typescript-eslint/consistent-type-imports': 'error'
  import/order:
- [
- 'error',
- {
- 'groups': ['builtin', 'external', 'type', 'parent', 'sibling', 'index'],
- },
- ]
+ ['error', { 'groups': ['builtin', 'external', 'type', 'parent', 'sibling', 'index'] }]

apps/site/package.json

@@ -25,7 +25,10 @@
  "clsx": "^2.1.0",
  "codemirror": "5",
  "constate": "^3.3.2",
+ "flowbite": "^2.2.1",
+ "flowbite-react": "^0.7.2",
  "react-codemirror2": "^7.3.0",
+ "react-icons": "^5.0.1",
  "sass": "^1.70.0",
  "tailwindcss": "^3.4.1"
  }

apps/site/src/i18n/I18nProvider.ts

@@ -0,0 +1,8 @@
+import constate from 'constate';
+import { I18N_PACKS } from './packs';
+
+const useI18nValue = () => ({
+ pack: I18N_PACKS.en,
+});
+
+export const [I18nProvider, useI18n] = constate(useI18nValue);

apps/site/src/i18n/index.ts

@@ -0,0 +1,2 @@
+export * from './I18nProvider';
+export * from './packs';

apps/site/src/i18n/packs/en.ts

@@ -0,0 +1,9 @@
+export const EN_18N_VALUE = {
+ header: {
+ run: 'Run',
+ stop: 'Stop',
+ links: {
+ github: 'Github project link',
+ },
+ },
+};

apps/site/src/i18n/packs/index.ts

@@ -0,0 +1,5 @@
+import { EN_18N_VALUE } from './en';
+
+export const I18N_PACKS = {
+ en: EN_18N_VALUE,
+};

apps/site/src/modules/Editor/EditorContainer.tsx

@@ -1,25 +1,29 @@
-import { useControlStrict } from '@under-control/forms';
-import { trimLines } from '@ts-c-compiler/core';
+import { useEditorState } from './EditorStateProvider';
 
-import type { EditorStateValue } from './types';
-
-import { EditorInput } from './Input/EditorInput';
+import { EditorInput } from './Input';
+import { EditorHeader } from './Header';
+import { EditorSidebar } from './EditorSidebar';
 
 export const EditorContainer = () => {
- const { bind, value } = useControlStrict<EditorStateValue>({
- defaultValue: {
- lang: 'c',
- code: trimLines(`
- int main() { return 0; }
- `),
- },
- });
-
- console.info(value);
+ const {
+ control: { bind, value },
+ } = useEditorState();
 
  return (
- <div className="flex justify-center items-center">
- <EditorInput lang={value.lang} {...bind.path('code')} />
+ <div className="flex h-screen flex-col">
+ <EditorHeader />
+
+ <div className="relative flex-1">
+ <div className="layer-absolute grid grid-cols-[1fr,40%]">
+ <EditorInput
+ {...bind.path('code')}
+ lang={value.lang}
+ className="border-r border-gray-100"
+ />
+
+ <EditorSidebar />
+ </div>
+ </div>
  </div>
  );
 };

apps/site/src/modules/Editor/EditorRoot.tsx

@@ -0,0 +1,11 @@
+import { I18nProvider } from '../../i18n';
+import { EditorContainer } from './EditorContainer';
+import { EditorStateProvider } from './EditorStateProvider';
+
+export const EditorRoot = () => (
+ <I18nProvider>
+ <EditorStateProvider>
+ <EditorContainer />
+ </EditorStateProvider>
+ </I18nProvider>
+);

apps/site/src/modules/Editor/EditorSidebar/EditorSidebar.tsx

@@ -0,0 +1,3 @@
+export const EditorSidebar = () => {
+ return <div className="p-4" />;
+};

apps/site/src/modules/Editor/EditorSidebar/index.ts

@@ -0,0 +1 @@
+export * from './EditorSidebar';

apps/site/src/modules/Editor/EditorStateProvider/EditorStateProvider.ts

@@ -0,0 +1,19 @@
+import { useControlStrict } from '@under-control/forms';
+import constate from 'constate';
+
+import type { EditorStateValue } from './types';
+
+const useEditorStateValue = () => {
+ const control = useControlStrict<EditorStateValue>({
+ defaultValue: {
+ lang: 'c',
+ code: 'int main() { return 0; }',
+ },
+ });
+
+ return {
+ control,
+ };
+};
+
+export const [EditorStateProvider, useEditorState] = constate(useEditorStateValue);

apps/site/src/modules/Editor/EditorStateProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './EditorStateProvider';
+export * from './types';

apps/site/src/modules/Editor/Header/EditorHeader.tsx

@@ -0,0 +1,47 @@
+import { Button } from 'flowbite-react';
+import { BiLogoGithub, BiPause, BiPlay } from 'react-icons/bi';
+
+import { useI18n } from 'i18n';
+
+export const EditorHeader = () => {
+ const t = useI18n().pack.header;
+
+ return (
+ <header
+ className="color-red flex w-full flex-row items-center justify-between border-b
+border-gray-200 bg-white px-4 py-2 align-middle"
+ >
+ <ol className="flex flex-row gap-2">
+ <li>
+ <Button color="blue" size="sm">
+ {t.run}
+
+ <BiPlay size={24} className="relative top-[1px] ml-1" />
+ </Button>
+ </li>
+
+ <li>
+ <Button disabled color="gray" size="sm">
+ {t.stop}
+
+ <BiPause size={24} className="relative top-[1px] ml-1" />
+ </Button>
+ </li>
+ </ol>
+
+ <ol className="flex flex-row gap-2">
+ <li>
+ <a
+ href="https://github.com/Mati365/ts-c-compiler"
+ target="_blank"
+ rel="noreferrer noopener"
+ title={t.links.github}
+ className="text-gray-500"
+ >
+ <BiLogoGithub size={38} />
+ </a>
+ </li>
+ </ol>
+ </header>
+ );
+};

apps/site/src/modules/Editor/Header/index.ts

@@ -0,0 +1 @@
+export * from './EditorHeader';

apps/site/src/modules/Editor/Input/EditorInput.module.scss

@@ -0,0 +1,9 @@
+.editor-codemirror :global {
+ .CodeMirror {
+ height: 100%;
+
+ &-code {
+ padding-top: 16px;
+ }
+ }
+}

apps/site/src/modules/Editor/Input/EditorInput.tsx

@@ -1,13 +1,14 @@
-import './EditorInput.scss';
-
 import { clsx } from 'clsx';
 import 'codemirror/mode/clike/clike';
+import 'codemirror/lib/codemirror.css';
 
 import { Controlled as CodeMirror, type ICodeMirror } from 'react-codemirror2';
 import { controlled } from '@under-control/forms';
 
-import type { EditorLang } from '../types';
+import type { EditorLang } from '../EditorStateProvider/types';
+
 import { nasmSyntaxDefine } from './syntax';
+import CSS from './EditorInput.module.scss';
 
 type EditorInputPops = ICodeMirror & {
  lang: EditorLang;
@@ -43,7 +44,7 @@ export const EditorInput = controlled<string, EditorInputPops>(
  return (
  <CodeMirror
  {...langProps}
- className={clsx(className, 'min-w-[50%]')}
+ className={clsx(className, CSS['editor-codemirror'], 'min-w-[50%]')}
  options={{
  ...langProps.options,
  lineNumbers: true,

apps/site/src/modules/Editor/Input/syntax/nasmCodemirrorSyntaxDefine.ts

@@ -114,19 +114,12 @@ export function nasmSyntaxDefine(): CodeMirror.Mode<any> {
  }
 
  if (cur) {
- if (
- Object.prototype.propertyIsEnumerable.call(
- conventionalInstructions,
- cur,
- )
- ) {
+ if (Object.prototype.propertyIsEnumerable.call(conventionalInstructions, cur)) {
  stream.eatWhile(/\w/);
  return 'keyword';
  }
 
- if (
- Object.prototype.propertyIsEnumerable.call(specialInstructions, cur)
- ) {
+ if (Object.prototype.propertyIsEnumerable.call(specialInstructions, cur)) {
  stream.eatWhile(/\w/);
  return 'tag';
  }

apps/site/src/modules/Editor/index.ts

@@ -1 +1,5 @@
 export * from './EditorContainer';
+export * from './EditorRoot';
+export * from './EditorStateProvider';
+export * from './Header';
+export * from './Input';

apps/site/src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
-import { EditorContainer } from '../modules';
+import { EditorRoot } from '../modules';
+
 ---
 
 <html lang="en">
@@ -14,6 +15,6 @@ import { EditorContainer } from '../modules';
  </head>
 
  <body>
- <EditorContainer client:only />
+ <EditorRoot client:only />
  </body>
 </html>

apps/site/tailwind.config.mjs

@@ -1,8 +1,19 @@
-/** @type {import('tailwindcss').Config} */
+import flowBitePlugin from 'flowbite/plugin';
+
 export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
  extend: {},
  },
- plugins: [],
+ content: ['src/**/*.{ts,tsx}', '../../node_modules/flowbite-react/lib/esm/**/*.js'],
+ plugins: [
+ ({ addComponents }) => {
+ flowBitePlugin,
+ addComponents({
+ '.layer-absolute': {
+ '@apply absolute left-0 top-0 w-full h-full': {},
+ },
+ });
+ },
+ ],
 };

apps/site/tsconfig.json

@@ -3,6 +3,7 @@
  "compilerOptions": {
  "jsx": "react-jsx",
  "jsxImportSource": "react",
+ "baseUrl": "src",
  "strict": true,
  "strictNullChecks": true
  }