full rewrite - ES6 modernization by xero · Pull Request #38 · xero/text0wnz

xero · 2025-09-16T18:38:57Z

This pull request is a comprehensive refactoring that modernizes the codebase.

Key Changes:

Migration to ES6 Modules:
- Transitioned from script-based loading to ES6 module system.
- Consolidated global variables into a centralized state management system.
All new slick UI:
- Icon PNG images removed in-favor of a single SVG with symbols for external DOM embedding
- Mobile first designs and handlers for a working ipad/phone drawing experience.
Adds extended XBIN font support.
- Popular "modern" fonts from moebius-xbin are added directly into the editor.
Deprecated public and server dual project roots in favor of a unified src dir:

src/
├── css/
├── fonts/
├── img/
└── js/
    ├── client/
    └── server/

Toolchain Updates:

Updated development environment to use Vite with ES2022 target.
Client and server unit testing with vitest
Automatic formatting and linting with prettier and eslint

Code Modernization:

Adopted ES6+ syntax, including arrow functions.
Removed deprecated files and re-consolidated functionality into dedicated modules.
Async await logic in place of callbacks where appropriate.

Specific File Changes:

Front end (now in `/src/js/client`)

New modules for state management state.js, color palette palette.js, and font loading font.js.
Refactored textArtCanvas canvas.js to integrate state management and modular functionality.
Frontend networking code now split into network.js for app handling and worker.js for webworkers.
- This file inclusion split is mandatory for websockets to function properly.
- Post build, vite's static-copy moves worker.js into place in dist.
Eliminated unused or outdated files like savers.js, elementhelper.js, loaders.js, etc.
Enhanced file handling and SAUCE parsing in file.js.
Updated build scripts, dependencies, etc, for modern standards.

Backend end (now in `/src/js/server`)

Updated server backend to also use updated deps, ES6 conventions, and refactored the monolithic ansiedit.js into modules.
- Argument parsing config.js, file reading/saving fileio.js, routing server.js, socket handlers websockets.js, existing business logic into text0wnz.js, and other smaller helper modules.

New Build Process Overview

The app now uses Vite as its build tool, with several plugins to enable a modern, flexible, and offline-capable web app.

Steps

Environment Configuration
- Environment variables are loaded via Vite’s loadEnv().
- The UI asset directory (uiDir) is dynamically set using the VITE_UI_DIR environment variable, defaulting to ui/.
- Other variables like VITE_DOMAIN and VITE_WORKER_FILE are also utilized for domain and worker configuration.
Asset Output Structure
- All built assets are placed in a custom UI directory, easily rebranded by changing the environment variable.
- Only index.css is renamed to stylez.css for clarity; other assets retain their original names.
Plugins Used
- vite-plugin-static-copy: Copies worker scripts and fonts into the UI directory at build time, ensuring all necessary files are available offline.
- vite-plugin-sitemap: Generates sitemap.xml and robots.txt with custom rules for crawler exclusion.
- vite-plugin-pwa: Configures a Service Worker for offline capability, caching strategies, and generates a web app manifest with icon and screenshot references using the UI directory.
Build Targets and Output
- Output is set to dist with all assets in its root or within the UI directory.
- No code-splitting or asset inlining is performed; all assets are separate for easier cache control.
Offline PWA Support
- Service Worker caches critical assets (js, css, images, fonts, etc.) using "CacheFirst" strategies.
- The manifest and screenshots are referenced dynamically via the UI directory, supporting easy repo re-use and branding.
- The app is installable and works fully offline after the first load.

Customization

To change the UI asset directory, set VITE_UI_DIR in your .env file before building.
Other branding or output customizations can be made by modifying environment variables or the build config.

Copilot

Pull Request Overview

This pull request is a comprehensive refactoring that modernizes the codebase by migrating from a script-based architecture to ES6 modules. The changes include consolidating global variables into a centralized state management system, removing unused files, and updating the development toolchain to use Vite with ES2022 target.

Migration from script-based loading to ES6 module system
Introduction of a centralized state management system to replace global variables
Code modernization including ES6+ syntax and arrow functions
Removal of deprecated files and consolidation of functionality

Reviewed Changes

Copilot reviewed 21 out of 23 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
vite.config.js	Updated build target from ES2018 to ES2022 and cleaned up configuration
public/js/worker.js	Modernized worker code with ES6 syntax and improved error handling
public/js/ui.js	Migrated to ES6 modules and integrated with new state management system
public/js/toolbar.js	Extracted standalone toolbar module from ui.js
public/js/state.js	New centralized state management system with pub/sub eventing
public/js/savers.js	Removed entire file (functionality moved elsewhere)
public/js/palette.js	New dedicated palette module extracted from canvas.js
public/js/network.js	Updated to use new state management and ES6 modules
public/js/main.js	New main entry point replacing document_onload.js
public/js/loaders.js	Removed entire file (functionality moved to file.js)
public/js/keyboard.js	Modernized with ES6 syntax and state management integration
public/js/freehand_tools.js	Updated to use state management and modernized syntax
public/js/font.js	New dedicated font loading module
public/js/file.js	Enhanced file handling with improved SAUCE parsing and ES6 syntax
public/js/elementhelper.js	Removed unused utility file
public/js/document_onload.js	Removed and replaced by main.js
public/js/canvas.js	Significantly refactored to use state management and extract modules
public/index.html	Updated menu keyboard shortcuts styling
public/css/style.css	Updated CSS variables and styling improvements
package.json	Updated dependencies and build scripts
eslint.config.js	Updated ESLint configuration for ES2022 and module support

Comments suppressed due to low confidence (1)

public/js/freehand_tools.js:1

Missing spaces around assignment operators. Should be g = getter; and s = setter; for consistent code formatting.

import { createToggleButton } from './ui.js';

public/js/worker.js

public/js/state.js

public/js/file.js

public/js/canvas.js

Copilot

Pull Request Overview

Copilot reviewed 21 out of 23 changed files in this pull request and generated 6 comments.

src/js/client/worker.js

public/js/ui.js

public/js/freehand_tools.js

public/js/canvas.js

Copilot

Pull Request Overview

Copilot reviewed 21 out of 23 changed files in this pull request and generated 3 comments.

public/js/state.js

public/js/freehand_tools.js

public/js/canvas.js

Copilot

Pull Request Overview

Copilot reviewed 56 out of 258 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

src/js/client/font.js:1

Potential issue with undefined getUnicodeReverseMap - this variable is imported but may not be available when this code executes, which could cause a runtime error.

import State from './state.js';

src/js/client/canvas.js

src/index.html

Copilot · 2025-10-08T14:22:37Z

src/css/style.css

+	@keyframes blink {
+		50% {
+			border: 1px solid var(--silver);
+		}
+	}


The blink animation should respect prefers-reduced-motion setting to avoid triggering issues for users with vestibular disorders.

Copilot

Pull Request Overview

Copilot reviewed 56 out of 258 changed files in this pull request and generated 3 comments.

src/js/client/file.js

src/index.html

src/css/style.css

Copilot

Pull Request Overview

Copilot reviewed 60 out of 265 changed files in this pull request and generated 2 comments.

src/js/client/file.js

src/js/client/canvas.js

Copilot

Pull Request Overview

Copilot reviewed 61 out of 266 changed files in this pull request and generated 5 comments.

src/index.html

src/css/style.css

Copilot

Pull Request Overview

Copilot reviewed 61 out of 266 changed files in this pull request and generated 3 comments.

src/css/style.css

Copilot

Pull Request Overview

Copilot reviewed 61 out of 266 changed files in this pull request and generated 1 comment.

src/index.html

Copilot

Pull Request Overview

Copilot reviewed 61 out of 266 changed files in this pull request and generated 2 comments.

src/css/style.css

postcss.config.js

xero added 19 commits September 12, 2025 23:16

fix(keyboard) fkey colors

9be76f8

chore(deps)

eb3a366

feat(shading) new algo

02d99c8

fix(character brush)

fe78c64

fix(char palette) redraw on font change

2f0a9f5

feat(state) global state machine

c9bcd1e

fix(new file) properly reinit canvas and tools

d213b83

fix(file_io, sauce)

64b59ce

chore(cleanup)

c204009

chore(cleanup)

cbc02fa

fix(state) global state migration

ef534e5

fix(net) update network build flow

310218f

refactor(modulize) smaller

bc8ef9f

chore(house keeping)

da8bd57

feat(modules) extract toolbar

8502eb1

fix(lint)

0ff0e22

fix(lint) more es6 action

22beea9

fix(arrows) more es6 action

b69ad1a

fix(state) scoping

e61be01

xero requested a review from Copilot September 16, 2025 18:39

xero added the enhancement New feature or request label Sep 16, 2025

Copilot AI reviewed Sep 16, 2025

View reviewed changes

lint(fix)

d062d62

xero requested a review from Copilot September 16, 2025 18:52

Copilot AI reviewed Sep 16, 2025

View reviewed changes

xero added 2 commits September 16, 2025 15:22

fix(lint)

1dc5642

fix(xb font race)

1068221

xero requested a review from Copilot September 16, 2025 21:35

Copilot AI reviewed Sep 16, 2025

View reviewed changes

public/js/state.js Outdated Show resolved Hide resolved

public/js/freehand_tools.js Outdated Show resolved Hide resolved

public/js/canvas.js Outdated Show resolved Hide resolved

fix(font race)

5d57c2b

Copilot AI review requested due to automatic review settings October 8, 2025 14:20

Copilot AI reviewed Oct 8, 2025

View reviewed changes

xero added 2 commits October 8, 2025 10:23

fix(cicd)

c2cae97

style(ansi)

f266d62

Copilot AI review requested due to automatic review settings October 8, 2025 15:02

Copilot AI reviewed Oct 8, 2025

View reviewed changes

src/js/client/file.js Outdated Show resolved Hide resolved

src/index.html Outdated Show resolved Hide resolved

src/css/style.css Show resolved Hide resolved

xero added 3 commits October 8, 2025 18:45

docs(privacy) add policy

37bb6d8

feat(font-select)

9126e44

docs

b607e1f

Copilot AI review requested due to automatic review settings October 9, 2025 03:36