Merge pull request #5259 from BookStackApp/typescript-conversions

ssddanbrown · web-flow · commit 0a07b0d16236 · 2024-12-01T13:04:59.000Z
Conversion of Services to TypeScript
diff --git a/dev/build/esbuild.js b/dev/build/esbuild.js
@@ -10,7 +10,7 @@ const isProd = process.argv[2] === 'production';
 
 // Gather our input files
 const entryPoints = {
-    app: path.join(__dirname, '../../resources/js/app.js'),
+    app: path.join(__dirname, '../../resources/js/app.ts'),
     code: path.join(__dirname, '../../resources/js/code/index.mjs'),
     'legacy-modes': path.join(__dirname, '../../resources/js/code/legacy-modes.mjs'),
     markdown: path.join(__dirname, '../../resources/js/markdown/index.mjs'),
diff --git a/resources/js/app.js b/resources/js/app.js
diff --git a/resources/js/app.ts b/resources/js/app.ts
@@ -0,0 +1,23 @@
+import {EventManager} from './services/events';
+import {HttpManager} from './services/http';
+import {Translator} from './services/translations';
+import * as componentMap from './components/index';
+import {ComponentStore} from './services/components';
+import {baseUrl, importVersioned} from "./services/util";
+
+// eslint-disable-next-line no-underscore-dangle
+window.__DEV__ = false;
+
+// Make common important util functions global
+window.baseUrl = baseUrl;
+window.importVersioned = importVersioned;
+
+// Setup events, http & translation services
+window.$http = new HttpManager();
+window.$events = new EventManager();
+window.$trans = new Translator();
+
+// Load & initialise components
+window.$components = new ComponentStore();
+window.$components.register(componentMap);
+window.$components.init();
diff --git a/resources/js/components/add-remove-rows.js b/resources/js/components/add-remove-rows.js
@@ -1,5 +1,5 @@
-import {onChildEvent} from '../services/dom';
-import {uniqueId} from '../services/util';
+import {onChildEvent} from '../services/dom.ts';
+import {uniqueId} from '../services/util.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/ajax-delete-row.js b/resources/js/components/ajax-delete-row.js
@@ -1,4 +1,4 @@
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 export class AjaxDeleteRow extends Component {
diff --git a/resources/js/components/ajax-form.js b/resources/js/components/ajax-form.js
@@ -1,4 +1,4 @@
-import {onEnterPress, onSelect} from '../services/dom';
+import {onEnterPress, onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/attachments.js b/resources/js/components/attachments.js
@@ -1,4 +1,4 @@
-import {showLoading} from '../services/dom';
+import {showLoading} from '../services/dom.ts';
 import {Component} from './component';
 
 export class Attachments extends Component {
diff --git a/resources/js/components/auto-suggest.js b/resources/js/components/auto-suggest.js
@@ -1,7 +1,7 @@
-import {escapeHtml} from '../services/util';
-import {onChildEvent} from '../services/dom';
+import {escapeHtml} from '../services/util.ts';
+import {onChildEvent} from '../services/dom.ts';
 import {Component} from './component';
-import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
 
 const ajaxCache = {};
 
diff --git a/resources/js/components/book-sort.js b/resources/js/components/book-sort.js
@@ -1,6 +1,6 @@
 import Sortable, {MultiDrag} from 'sortablejs';
 import {Component} from './component';
-import {htmlToDom} from '../services/dom';
+import {htmlToDom} from '../services/dom.ts';
 
 // Auto sort control
 const sortOperations = {
diff --git a/resources/js/components/chapter-contents.js b/resources/js/components/chapter-contents.js
@@ -1,4 +1,4 @@
-import {slideUp, slideDown} from '../services/animations';
+import {slideUp, slideDown} from '../services/animations.ts';
 import {Component} from './component';
 
 export class ChapterContents extends Component {
diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
@@ -1,4 +1,4 @@
-import {onChildEvent, onEnterPress, onSelect} from '../services/dom';
+import {onChildEvent, onEnterPress, onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 export class CodeEditor extends Component {
diff --git a/resources/js/components/collapsible.js b/resources/js/components/collapsible.js
@@ -1,4 +1,4 @@
-import {slideDown, slideUp} from '../services/animations';
+import {slideDown, slideUp} from '../services/animations.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/confirm-dialog.js b/resources/js/components/confirm-dialog.js
@@ -1,4 +1,4 @@
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/dropdown-search.js b/resources/js/components/dropdown-search.js
@@ -1,5 +1,5 @@
-import {debounce} from '../services/util';
-import {transitionHeight} from '../services/animations';
+import {debounce} from '../services/util.ts';
+import {transitionHeight} from '../services/animations.ts';
 import {Component} from './component';
 
 export class DropdownSearch extends Component {
diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
@@ -1,5 +1,5 @@
-import {onSelect} from '../services/dom';
-import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {onSelect} from '../services/dom.ts';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/dropzone.js b/resources/js/components/dropzone.js
@@ -2,7 +2,7 @@ import {Component} from './component';
 import {Clipboard} from '../services/clipboard.ts';
 import {
     elem, getLoading, onSelect, removeLoading,
-} from '../services/dom';
+} from '../services/dom.ts';
 
 export class Dropzone extends Component {
 
diff --git a/resources/js/components/entity-permissions.js b/resources/js/components/entity-permissions.js
@@ -1,4 +1,4 @@
-import {htmlToDom} from '../services/dom';
+import {htmlToDom} from '../services/dom.ts';
 import {Component} from './component';
 
 export class EntityPermissions extends Component {
diff --git a/resources/js/components/entity-search.js b/resources/js/components/entity-search.js
@@ -1,4 +1,4 @@
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 export class EntitySearch extends Component {
diff --git a/resources/js/components/entity-selector.js b/resources/js/components/entity-selector.js
@@ -1,4 +1,4 @@
-import {onChildEvent} from '../services/dom';
+import {onChildEvent} from '../services/dom.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/event-emit-select.js b/resources/js/components/event-emit-select.js
@@ -1,4 +1,4 @@
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/expand-toggle.js b/resources/js/components/expand-toggle.js
@@ -1,4 +1,4 @@
-import {slideUp, slideDown} from '../services/animations';
+import {slideUp, slideDown} from '../services/animations.ts';
 import {Component} from './component';
 
 export class ExpandToggle extends Component {
diff --git a/resources/js/components/global-search.js b/resources/js/components/global-search.js
@@ -1,6 +1,6 @@
-import {htmlToDom} from '../services/dom';
-import {debounce} from '../services/util';
-import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {htmlToDom} from '../services/dom.ts';
+import {debounce} from '../services/util.ts';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
@@ -1,6 +1,6 @@
 import {
     onChildEvent, onSelect, removeLoading, showLoading,
-} from '../services/dom';
+} from '../services/dom.ts';
 import {Component} from './component';
 
 export class ImageManager extends Component {
diff --git a/resources/js/components/index.ts b/resources/js/components/index.ts
diff --git a/resources/js/components/optional-input.js b/resources/js/components/optional-input.js
@@ -1,4 +1,4 @@
-import {onSelect} from '../services/dom';
+import {onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 export class OptionalInput extends Component {
diff --git a/resources/js/components/page-comment.js b/resources/js/components/page-comment.js
@@ -1,5 +1,5 @@
 import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom';
+import {getLoading, htmlToDom} from '../services/dom.ts';
 import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class PageComment extends Component {
diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
@@ -1,5 +1,5 @@
 import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom';
+import {getLoading, htmlToDom} from '../services/dom.ts';
 import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class PageComments extends Component {
diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js
@@ -1,5 +1,5 @@
-import * as DOM from '../services/dom';
-import {scrollAndHighlightElement} from '../services/util';
+import * as DOM from '../services/dom.ts';
+import {scrollAndHighlightElement} from '../services/util.ts';
 import {Component} from './component';
 
 function toggleAnchorHighlighting(elementId, shouldHighlight) {
diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
@@ -1,5 +1,5 @@
-import {onSelect} from '../services/dom';
-import {debounce} from '../services/util';
+import {onSelect} from '../services/dom.ts';
+import {debounce} from '../services/util.ts';
 import {Component} from './component';
 import {utcTimeStampToLocalTime} from '../services/dates.ts';
 
diff --git a/resources/js/components/pointer.js b/resources/js/components/pointer.js
@@ -1,4 +1,4 @@
-import * as DOM from '../services/dom';
+import * as DOM from '../services/dom.ts';
 import {Component} from './component';
 import {copyTextToClipboard} from '../services/clipboard.ts';
 
diff --git a/resources/js/components/popup.js b/resources/js/components/popup.js
@@ -1,5 +1,5 @@
-import {fadeIn, fadeOut} from '../services/animations';
-import {onSelect} from '../services/dom';
+import {fadeIn, fadeOut} from '../services/animations.ts';
+import {onSelect} from '../services/dom.ts';
 import {Component} from './component';
 
 /**
diff --git a/resources/js/components/template-manager.js b/resources/js/components/template-manager.js
@@ -1,4 +1,4 @@
-import * as DOM from '../services/dom';
+import * as DOM from '../services/dom.ts';
 import {Component} from './component';
 
 export class TemplateManager extends Component {
diff --git a/resources/js/components/user-select.js b/resources/js/components/user-select.js
@@ -1,4 +1,4 @@
-import {onChildEvent} from '../services/dom';
+import {onChildEvent} from '../services/dom.ts';
 import {Component} from './component';
 
 export class UserSelect extends Component {
diff --git a/resources/js/global.d.ts b/resources/js/global.d.ts
@@ -7,10 +7,12 @@ declare global {
     const __DEV__: boolean;
 
     interface Window {
+        __DEV__: boolean;
         $components: ComponentStore;
         $events: EventManager;
         $trans: Translator;
         $http: HttpManager;
         baseUrl: (path: string) => string;
+        importVersioned: (module: string) => Promise<object>;
     }
 }
diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js
@@ -1,5 +1,5 @@
 import {provideKeyBindings} from './shortcuts';
-import {debounce} from '../services/util';
+import {debounce} from '../services/util.ts';
 import {Clipboard} from '../services/clipboard.ts';
 
 /**
diff --git a/resources/js/services/animations.ts b/resources/js/services/animations.ts
diff --git a/resources/js/services/dom.ts b/resources/js/services/dom.ts
diff --git a/resources/js/services/keyboard-navigation.ts b/resources/js/services/keyboard-navigation.ts
diff --git a/resources/js/services/util.js b/resources/js/services/util.js
diff --git a/resources/js/services/util.ts b/resources/js/services/util.ts
diff --git a/resources/js/wysiwyg-tinymce/plugin-drawio.js b/resources/js/wysiwyg-tinymce/plugin-drawio.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {onSelect} from '../services/dom';`
	`1`	`+import {onSelect} from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`export class AjaxDeleteRow extends Component {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {onEnterPress, onSelect} from '../services/dom';`
	`1`	`+import {onEnterPress, onSelect} from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {showLoading} from '../services/dom';`
	`1`	`+import {showLoading} from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`export class Attachments extends Component {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {slideUp, slideDown} from '../services/animations';`
	`1`	`+import {slideUp, slideDown} from '../services/animations.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`export class ChapterContents extends Component {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {onChildEvent, onEnterPress, onSelect} from '../services/dom';`
	`1`	`+import {onChildEvent, onEnterPress, onSelect} from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`export class CodeEditor extends Component {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {slideDown, slideUp} from '../services/animations';`
	`1`	`+import {slideDown, slideUp} from '../services/animations.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {htmlToDom} from '../services/dom';`
	`1`	`+import {htmlToDom} from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`export class EntityPermissions extends Component {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {onChildEvent} from '../services/dom';`
	`1`	`+import {onChildEvent} from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`
`4`	`4`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import * as DOM from '../services/dom';`
	`1`	`+import * as DOM from '../services/dom.ts';`
`2`	`2`	`import {Component} from './component';`
`3`	`3`	`import {copyTextToClipboard} from '../services/clipboard.ts';`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -7,10 +7,12 @@ declare global {`
`7`	`7`	`const __DEV__: boolean;`
`8`	`8`
`9`	`9`	`interface Window {`
	`10`	`+ __DEV__: boolean;`
`10`	`11`	`$components: ComponentStore;`
`11`	`12`	`$events: EventManager;`
`12`	`13`	`$trans: Translator;`
`13`	`14`	`$http: HttpManager;`
`14`	`15`	`baseUrl: (path: string) => string;`
	`16`	`+ importVersioned: (module: string) => Promise<object>;`
`15`	`17`	`}`
`16`	`18`	`}`