Page MenuHomePhorge
Create Task
Maniphest T15736

JavaScript modernization (umbrella task)
Open, WishlistPublic
Actions

Description

Vaguely related to T15734: CSS modernization (umbrella task). Phorge uses some pretty idiosyncratic JavaScript patterns which are not particularly developer friendly.

My thinking on this is currently not very well defined but I'd like to hear what others think about this.

While I would be fully against converting to something like React, I do feel like our JavaScript infrastructure could benefit from modernization. I'm a big fan of Web Components, so that's probably the direction I would most like to see, along with maybe a touch of TypeScript.

Related Objects
Search...

Event Timeline

20after4 created this task.Feb 11 2024, 22:31
Herald added subscribers: Cigaryno, Matthew, chris, tobiaswiese. · View Herald TranscriptFeb 11 2024, 22:31
20after4 triaged this task as Wishlist priority.Feb 11 2024, 22:32
20after4 added a subtask: T15168: Improve JavaScript i18n.
bekay subscribed.EditedFeb 12 2024, 12:56

Well, my idea would be:

  • Rewrites every javascript file to a typescript (or just esnext) module
  • Define types or add declaration files where necessary
  • Get rid of the JX namespace and the the require comments - use import and export like it is done in modern js
  • Use a tool like Vite
    • to have a working dev server when developing js - at the moment I have to ./bin/celerity map after every change to js and css to see my changes...
    • to build the sources (entry points, hashes, minifying)
  • when buildung the sources, some kind of map should be created that will replace celerity

Sounds crazy, but this is the modern way :D

avivey subscribed.Feb 12 2024, 19:44

to have a working dev server when developing js - at the moment I have to ./bin/celerity map after every change to js and css to see my changes...

Are you sure about that? I thought celerity map was only needed when adding a file (in dev mode).

avivey added a comment.Feb 12 2024, 19:46

also, adding this file in src/extensions/ will let you have css/js files from src/extensions/rsrc/ loaded automatically:

P31 CelerityStuffFromExtensions
1<?php
2
3final class CelerityStuffFromExtensions extends CelerityResourcesOnDisk {
4
5 private $map;
6
7 public function getName() {
8 return 'src-extensions';
9 }
10
11 public function getPathToResources() {
12 return __DIR__.'/rsrc';
13 }
14
15 public function getPathToMap() {
16 // throw new Exception("Generated at runtime");
17 return '/dev/null';
18 }
19
20 public function loadMap() {
21
22 if ($this->map === null) {
23 $generator = new CelerityResourceMapGenerator($this);
24
25 $data = $generator->generate();
26 $this->map = array(
27 'names' => $data->getNameMap(),
28 'symbols' => $data->getSymbolMap(),
29 'requires' => $data->getRequiresMap(),
30 'packages' => $data->getPackageMap(),
31 );
32 }
33 return $this->map;
34 }
35}

bekay added a comment.Feb 12 2024, 19:47
In T15736#15726, @avivey wrote:

to have a working dev server when developing js - at the moment I have to ./bin/celerity map after every change to js and css to see my changes...

Are you sure about that? I thought celerity map was only needed when adding a file (in dev mode).

You are right. Just discovered this today.

20after4 added a comment.Feb 13 2024, 23:21
In T15736#15681, @bekay wrote:
  • Get rid of the JX namespace and the the require comments - use import and export like it is done in modern js

I do really like the way ES Modules work for client side JS. I don't like them in NodeJS because they are not very interoperable with CommonJS modules.

When the number of JS files is reasonable it's actually practical to just import URLs and skip the rollups/compile steps. It enables a very efficient local development and testing workflow.

Content licensed under Creative Commons Attribution-ShareAlike 4.0 (CC-BY-SA) unless otherwise noted; code licensed under Apache 2.0 or other open source licenses. · CC BY-SA 4.0 · Apache 2.0