Skip to content

Commit cf30b14

Browse files
tomasboncotomasbonco
committed
Initialization speeded up. Plugin is usable again.
1 parent ada2bdd commit cf30b14

File tree

9 files changed

+380
-4257
lines changed

9 files changed

+380
-4257
lines changed

‎package-lock.json‎

Lines changed: 264 additions & 4164 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"devDependencies": {
33
"parcel-plugin-typescript": "^1.0.0",
4-
"preact": "^8.2.9",
54
"typescript": "^2.9.2"
65
},
76
"dependencies": {

‎src/inject/file.tsx‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { autoinject } from './container';
22
import { Metadata, IMetadata, EFileState } from './metadata';
3-
import { h, Component } from 'preact';
4-
import { CSS_PREFIX } from './constants'
3+
import { CSS_PREFIX } from './constants';
54

6-
interface IFileProps
5+
export interface IFileProps
76
{
87
id: number;
98
fullName: string;
@@ -17,69 +16,78 @@ interface IFileProps
1716

1817

1918
@autoinject
20-
export class File extends Component
19+
export class File
2120
{
21+
id: string = 'gtp' + Math.random().toString(36).substr(2, 10);
2222
state: IFileProps = {} as IFileProps;
2323

2424

2525
constructor( private metadata: Metadata )
26-
{
27-
super();
28-
}
26+
{}
2927

3028

3129
init( fullName: string, id: number ): File
3230
{
33-
this.setProps({ fullName, id })
31+
this.updateState({ fullName, id })
3432

3533
return this;
3634
}
3735

3836

39-
setProps( newProps: any ): File
37+
updateState( changes: any ): File
4038
{
41-
if ( newProps.fullName )
39+
if ( changes.fullName )
4240
{
43-
const fileNameParts: string[] = newProps.fullName.split( '.' );
44-
newProps.ext = fileNameParts.length > 0 ? fileNameParts.pop() : '';
45-
newProps.name = fileNameParts.join( '.' );
41+
const fileNameParts: string[] = changes.fullName.split( '.' );
42+
changes.ext = fileNameParts.length > 0 ? fileNameParts.pop() : '';
43+
changes.name = fileNameParts.join( '.' );
4644
}
4745

48-
console.log( newProps )
49-
if ( newProps.id !== undefined )
46+
if ( changes.id !== undefined )
5047
{
51-
console.log( 'well be famous')
52-
const metadata: IMetadata = this.metadata.get( newProps.id );
53-
newProps.hash = metadata.hash;
54-
newProps.type = metadata.type;
55-
newProps.isCommented = metadata.commented;
48+
const metadata: IMetadata = this.metadata.get( changes.id );
49+
changes.hash = metadata.hash;
50+
changes.type = metadata.type;
51+
changes.isCommented = metadata.commented;
5652
}
5753

58-
this.setState( newProps )
54+
Object.assign( this.state, changes );
55+
this.tryToRerender();
5956

6057
return this;
6158
}
6259

6360

6461
setActive(): void
6562
{
66-
this.setProps({ isActive: true })
63+
this.updateState({ isActive: true })
6764
}
6865

6966

7067
setInactive(): void
7168
{
72-
this.setProps({ isActive: false })
69+
this.updateState({ isActive: false })
70+
}
71+
72+
73+
tryToRerender(): void
74+
{
75+
const element: HTMLElement = document.getElementById( this.id );
76+
77+
if ( element )
78+
{
79+
element.outerHTML = this.render();
80+
}
7381
}
7482

7583

76-
render(): any
84+
render(): string
7785
{
78-
console.log( 'yuy', this.state.isActive )
79-
return (
80-
<a href={this.state.hash} class={`file gitlab-tree-plugin-file-updated ${ this.state.isActive ? CSS_PREFIX + '-active' : '' }`}>
81-
<span> { this.state.fullName } </span>
82-
</a>
83-
)
86+
return `
87+
<a id="${this.id}" href="${this.state.hash}" class="file gitlab-tree-plugin-file-${EFileState[this.state.type].toLocaleLowerCase()} ${ this.state.isActive ? CSS_PREFIX + '-file-active' : '' }">
88+
${ this.state.isCommented ? `<i class="fa fa-comments-o ${CSS_PREFIX}-file-commented-icon"></i>` : ''}
89+
<span> ${ this.state.fullName } </span>
90+
</a>
91+
`
8492
}
8593
}

‎src/inject/folder.tsx‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,61 @@
1-
import { h, Component } from 'preact';
21
import { File } from './file'
32
import { CSS_PREFIX } from './constants'
43

54

6-
export class Folder extends Component
5+
export class Folder
76
{
8-
state: { name: string; } = { name: '' };
9-
10-
private subfolders: Folder[] = [];
11-
private files: File[] = [];
7+
id: string = 'gtp' + Math.random().toString(36).substr(2, 10);
8+
state: { name: string; subfolders: Folder[]; files: File[] } = { name: '', subfolders: [], files: [] };
129

1310

1411
init( name: string ): Folder
1512
{
16-
this.setProps({ name })
13+
this.updateState({ name })
1714

1815
return this;
1916
}
2017

2118

22-
setProps( newProps: any ): Folder
19+
updateState( changes: any ): Folder
2320
{
24-
this.setState( newProps );
21+
Object.assign( this.state, changes )
22+
this.tryToRerender();
2523

2624
return this;
2725
}
2826

2927

3028
get subfoldersSize(): number
3129
{
32-
return this.subfolders.length;
30+
return this.state.subfolders.length;
3331
}
3432

3533

3634
get filesSize(): number
3735
{
38-
return this.files.length;
36+
return this.state.files.length;
3937
}
4038

4139

4240
addFolder( ...folders: Folder[] ): void
4341
{
44-
const copy: Folder[] = this.subfolders.slice(0)
42+
const copy: Folder[] = this.state.subfolders.slice(0)
4543
copy.push( ...folders );
46-
this.subfolders = copy;
44+
this.updateState({ subfolders: copy })
4745
}
4846

4947

5048
addFile( ...files: File[] ): void
5149
{
52-
const copy: File[] = this.files.slice(0);
50+
const copy: File[] = this.state.files.slice(0);
5351
copy.push( ...files );
54-
this.files = copy;
52+
this.updateState({ files: copy })
5553
}
5654

5755

5856
getFolder( folderName: string ): Folder
5957
{
60-
return this.subfolders.find( x => x.state.name === folderName );
58+
return this.state.subfolders.find( x => x.state.name === folderName );
6159
}
6260

6361

@@ -69,7 +67,7 @@ export class Folder extends Component
6967

7068
getFolders( sort = 0 ): Folder[]
7169
{
72-
const copy: Folder[] = this.subfolders.slice( 0 );
70+
const copy: Folder[] = this.state.subfolders.slice( 0 );
7371
// copy.sort( ( a, b ) );
7472

7573
return copy;
@@ -78,34 +76,44 @@ export class Folder extends Component
7876

7977
getFiles( sort = 0 ): File[]
8078
{
81-
const copy: File[] = this.files.slice( 0 );
79+
const copy: File[] = this.state.files.slice( 0 );
8280
return copy;
8381
}
8482

8583

8684
dropFolders(): void
8785
{
88-
this.subfolders = [];
86+
this.updateState({ subfolders: [] })
8987
}
9088

9189

9290
dropFiles(): void
9391
{
94-
this.files = [];
92+
this.updateState({ files: [] })
93+
}
94+
95+
96+
tryToRerender(): void
97+
{
98+
const element: HTMLElement = document.getElementById( this.id );
99+
100+
if ( element )
101+
{
102+
element.outerHTML = this.render();
103+
}
95104
}
96105

97106

98-
render(): any
107+
render(): string
99108
{
100-
console.log( this.state )
101-
return (
102-
<div class={ `${CSS_PREFIX}-folder ${CSS_PREFIX}-folder-expanded`}>
109+
return `
110+
<div class="${CSS_PREFIX}-folder ${CSS_PREFIX}-folder-expanded" id="${this.id}">
103111
104-
<div class={CSS_PREFIX + '-holder'} title={this.state.name}> {this.state.name}</div>
105-
{ this.subfolders.map( fdr => fdr.render() )}
106-
{ this.files.map( fls => fls.render() )}
112+
<div class="${CSS_PREFIX}-holder" title="${this.state.name}"> ${this.state.name} </div>
113+
${ this.state.subfolders.map( fdr => fdr.render() ).join('')}
114+
${ this.state.files.map( fls => fls.render() ).join('')}
107115
108116
</div>
109-
)
117+
`
110118
}
111119
}

‎src/inject/index.ts‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,44 @@ import { Container } from './container';
22
import { GitLabTree } from './inject';
33
import { CSS_PREFIX } from './constants'
44

5-
const container: Container = new Container();
6-
let instance: GitLabTree = container.get( GitLabTree );
7-
8-
/**
9-
* This is for fake AJAX re-renders of the page.
10-
*/
11-
function checkSiteChange(): void
5+
( () =>
126
{
13-
let files: Element = document.querySelector( '.files' );
7+
// Detection if we are on GitLab page
8+
9+
const isGitLab: Element = document.querySelector( 'meta[content="GitLab"]' );
10+
if ( ! isGitLab )
11+
{
12+
return;
13+
}
14+
15+
16+
const container: Container = new Container();
17+
let instance: GitLabTree = container.get( GitLabTree );
18+
let interval: number;
1419

15-
if ( files && ! files.classList.contains( CSS_PREFIX ) )
20+
21+
/**
22+
* This is for fake AJAX re-renders of the page.
23+
*/
24+
function checkSiteChange(): void
1625
{
17-
instance.teardown();
18-
container.drop( GitLabTree );
26+
let files: Element = document.querySelector( '.files' );
27+
28+
if ( files && ! files.classList.contains( CSS_PREFIX ) )
29+
{
30+
instance.teardown();
31+
container.drop( GitLabTree );
1932

20-
instance = container.get( GitLabTree );
33+
instance = container.get( GitLabTree );
34+
startCheckInterval( 3000 )
35+
}
36+
}
37+
38+
function startCheckInterval( time: number ): void
39+
{
40+
clearInterval( interval )
41+
interval = setInterval( () => checkSiteChange(), time );
2142
}
22-
}
2343

24-
setInterval( () => checkSiteChange(), 3000 )
44+
startCheckInterval( 150 )
45+
})()

‎src/inject/inject.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { CSS_PREFIX } from './constants'
44
import { Navigation } from './navigation';
55
import { Structure } from './structure'
66
import { File } from './File'
7-
import { h, render} from 'preact'
87

98
@autoinject
109
export class GitLabTree
@@ -27,13 +26,7 @@ export class GitLabTree
2726
constructor( private container: Container )
2827
{
2928
this.init();
30-
31-
32-
// Detection if we are on GitLab page
33-
34-
const isGitLab: Element = document.querySelector( 'meta[content="GitLab"]' );
35-
if ( ! isGitLab ) { return; }
36-
29+
3730

3831
// Detection if we have any files to generate tree from
3932

@@ -60,11 +53,9 @@ export class GitLabTree
6053
// Analyze filenames
6154

6255
const navigation: Navigation = container.get( Navigation )
63-
const navigationView: any = render( navigation.render(), this.leftElement )
56+
this.leftElement.innerHTML = navigation.render();
6457

65-
6658
// Hide files
67-
6859
this.copyAndHideFiles( files );
6960

7061

@@ -74,6 +65,7 @@ export class GitLabTree
7465
// Adjust DOM so that the Changes tab uses 100% width
7566
this.makeChangesTabWider();
7667

68+
7769
// Show file based on hash id
7870

7971
const currentFileHash: string = location.hash;
@@ -275,7 +267,6 @@ export class GitLabTree
275267
getFileLinkByHash( hash: string ): File
276268
{
277269
const structure: Structure = this.container.get( Structure );
278-
console.log( structure.flatFileStructure )
279270
return structure.flatFileStructure.find( file => file.state.hash === hash );
280271
}
281272
}

‎src/inject/metadata.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ export class Metadata
9191
for ( let rawFileMetadata of rawFilesMetadata )
9292
{
9393
const svgElement: HTMLElement = rawFileMetadata.querySelector( 'svg.diff-file-changed-icon' ) as HTMLElement;
94-
console.log( svgElement, rawFileMetadata )
9594
const typeRaw: string = svgElement.querySelector( 'use' ).getAttribute('xlink:href').split('#')[1];
9695
const hash: string = rawFileMetadata.querySelector( 'a' ).getAttribute('href');
9796
const filename: string = rawFileMetadata.querySelector( '.diff-changed-file' ).getAttribute('title');

0 commit comments

Comments
 (0)