) // support data-* attributes
29 | | void
30 | loadWithFastRedirect?(url: string, element: HTMLElement): boolean | void
31 | usePlatformHooks?(): void
32 | mapErrorMessage?: (error: Error) => string | void
33 | }
34 |
--------------------------------------------------------------------------------
/src/react-override.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | // Patch the removed `children` prop
3 | declare namespace React {
4 | interface FunctionComponent {
5 | (props: PropsWithChildren
, context?: any): ReactElement | null
6 | propTypes?: WeakValidationMap | undefined
7 | contextTypes?: ValidationMap | undefined
8 | defaultProps?: Partial | undefined
9 | displayName?: string | undefined
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/styles/clippy.scss:
--------------------------------------------------------------------------------
1 | @mixin clippy {
2 | .clippy-wrapper {
3 | position: relative;
4 | width: 0;
5 | height: 0;
6 | top: 8px;
7 | left: calc(100% - 40px);
8 | z-index: 1;
9 |
10 | .clippy {
11 | width: 32px;
12 | height: 32px;
13 | border: 1px solid var(--color-border-default);
14 | border-radius: 4px;
15 |
16 | @include interactive-background;
17 | .icon {
18 | width: 100%;
19 | height: 100%;
20 | display: block;
21 | background-image: url('~@primer/octicons-react/build/svg/copy-16.svg?inline');
22 | background-position: center;
23 | background-repeat: no-repeat;
24 | &.success {
25 | background-image: url('~@primer/octicons-react/build/svg/check-16.svg?inline');
26 | }
27 | &.fail {
28 | background-image: url('~@primer/octicons-react/build/svg/x-16.svg?inline');
29 | }
30 | }
31 | }
32 | }
33 | }
34 |
35 | // TODO: use react to render the button content and set color with CSS variables
36 | @media (prefers-color-scheme: dark) {
37 | :root[data-color-mode='auto'] .markdown-body .clippy .icon {
38 | filter: invert(0.7); // hack to make it looks like a normal color :P
39 | }
40 | }
41 | :root[data-color-mode='dark'] {
42 | .markdown-body .clippy .icon {
43 | filter: invert(0.7); // hack to make it looks like a normal color :P
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/styles/code-folding.scss:
--------------------------------------------------------------------------------
1 | @mixin code-folding {
2 | .blob-wrapper table .blob-num {
3 | position: relative; // for positioning
4 | min-width: 60px;
5 | padding-right: 20px;
6 | }
7 |
8 | // hide code fold handler if not enabled
9 | .gitako-code-fold-handler {
10 | display: none;
11 | }
12 |
13 | .gitako-code-fold-attached:not(.gitako-code-fold-attached-disabled) {
14 | tr {
15 | .gitako-code-fold-handler {
16 | @include hide-for-print();
17 |
18 | display: initial;
19 | position: absolute;
20 | top: 0px;
21 | right: 0px;
22 | width: 20px;
23 | height: 20px;
24 | display: flex;
25 | justify-content: center;
26 | align-items: center;
27 |
28 | &::before {
29 | width: 16px;
30 | height: 20px;
31 | transition: 0.25s ease;
32 | @include pseudo-primer-icon('chevron-down-16');
33 | }
34 |
35 | @include interactive-background-on-before(
36 | var(--color-fg-subtle),
37 | var(--color-fg-default),
38 | var(--color-fg-muted)
39 | );
40 | }
41 |
42 | &.gitako-code-fold-active {
43 | background-color: var(--color-neutral-muted);
44 |
45 | .gitako-code-fold-handler {
46 | &::before {
47 | transform: rotate(-90deg);
48 | }
49 |
50 | @include interactive-background-on-before(
51 | var(--color-fg-muted),
52 | var(--color-fg-default),
53 | var(--color-fg-subtle)
54 | );
55 | }
56 |
57 | .blob-code::after {
58 | color: var(--color-fg-muted);
59 | content: '⋯';
60 | margin: 0.1em 0.2em 0px;
61 | }
62 | }
63 |
64 | // hide folded sections, except for print
65 | &.gitako-code-fold-hidden {
66 | @media screen {
67 | display: none;
68 | }
69 | }
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/styles/gitee.scss:
--------------------------------------------------------------------------------
1 | $gitee-header-z-index: 1002;
2 |
3 | @mixin gitee($name) {
4 | [data-gitako-platform='Gitee'] {
5 | &[data-#{$name}-ready='true'] {
6 | // reset styles
7 | .#{$name}-side-bar {
8 | input[type='text'],
9 | input[type='password'],
10 | .ui-autocomplete-input,
11 | textarea,
12 | .uneditable-input {
13 | padding: initial;
14 | border: none;
15 | }
16 | }
17 |
18 | padding-top: 0;
19 |
20 | .#{$name}-side-bar {
21 | h1,
22 | h2,
23 | h3,
24 | h4,
25 | h5,
26 | h6 {
27 | margin: 0;
28 | }
29 | }
30 | }
31 |
32 | &[data-with-gitako-spacing='left'] {
33 | body {
34 | width: auto; // shrink width
35 | .site-content {
36 | min-width: 1040px;
37 | }
38 | }
39 |
40 | &[data-with-gitako-spacing='right'] {
41 | body {
42 | min-width: calc(1040px + var(--gitako-width));
43 | }
44 | }
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/styles/github.scss:
--------------------------------------------------------------------------------
1 | @mixin github($github-content-width) {
2 | @media (min-width: $github-content-width) {
3 | [data-gitako-platform='GitHub'] {
4 | body {
5 | min-width: $github-content-width;
6 | }
7 |
8 | &[data-with-gitako-spacing='left'],
9 | &[data-with-gitako-spacing='right'] {
10 | #files-bucket,
11 | .files-bucket {
12 | & > .position-relative.px-4 {
13 | width: unset !important;
14 | left: unset !important;
15 | right: unset !important;
16 | margin-left: unset !important;
17 | margin-right: unset !important;
18 | }
19 | }
20 | }
21 |
22 | &[data-with-gitako-spacing='right'] {
23 | body {
24 | min-width: auto; // it will break layout when too narrow, but at least it makes everything visible
25 |
26 | .container-xl {
27 | margin-left: max(
28 | 0,
29 | calc((100vw - 1280px - var(--gitako-width)) / 2)
30 | ); // override margin-left: auto;
31 | margin-right: max(
32 | 0,
33 | calc((100vw - 1280px - var(--gitako-width)) / 2)
34 | ); // override margin-right: auto;
35 | }
36 | }
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/styles/keyframes.scss:
--------------------------------------------------------------------------------
1 | @keyframes rotate {
2 | from {
3 | transform: rotateZ(0);
4 | }
5 | to {
6 | transform: rotateZ(360deg);
7 | }
8 | }
9 |
10 | @keyframes pulse-rotate {
11 | 0% {
12 | transform: rotateZ(0);
13 | }
14 | 20% {
15 | transform: rotateZ(190deg);
16 | }
17 | 30% {
18 | transform: rotateZ(175deg);
19 | }
20 | 50% {
21 | transform: rotateZ(180deg);
22 | }
23 | 70% {
24 | transform: rotateZ(370deg);
25 | }
26 | 80% {
27 | transform: rotateZ(355deg);
28 | }
29 | 100% {
30 | transform: rotateZ(360deg);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/styles/layout.scss:
--------------------------------------------------------------------------------
1 | @mixin flex($justify: center, $align: center, $inline: true) {
2 | @if $inline {
3 | display: inline-flex;
4 | } @else {
5 | display: flex;
6 | }
7 |
8 | @if $justify {
9 | justify-content: $justify;
10 | }
11 | @if $align {
12 | align-items: $align;
13 | }
14 | }
15 |
16 | @mixin flex-center {
17 | @include flex();
18 | }
19 |
--------------------------------------------------------------------------------
/src/styles/primer-like.scss:
--------------------------------------------------------------------------------
1 | // primer-like styles
2 | @import './themes.scss';
3 |
4 | @mixin interactive-frame() {
5 | @include interactive-border;
6 | @include interactive-background;
7 | }
8 |
9 | @mixin interactive-border(
10 | $default: var(--color-btn-border),
11 | $hover: var(--color-btn-hover-border),
12 | $active: var(--color-btn-active-border),
13 | $focus: $hover
14 | ) {
15 | border: 1px solid $default;
16 | &:hover {
17 | border: 1px solid $hover;
18 | }
19 | &:focus {
20 | border: 1px solid $focus;
21 | }
22 | &:active {
23 | border: 1px solid $active;
24 | }
25 | }
26 |
27 | @mixin interactive-background(
28 | $default: var(--color-btn-bg),
29 | $hover: var(--color-btn-hover-bg),
30 | $active: var(--color-btn-active-bg),
31 | $focus: $hover
32 | ) {
33 | background-color: $default;
34 | &:hover {
35 | background-color: $hover;
36 | }
37 | &:focus {
38 | background-color: $focus;
39 | }
40 | &:active {
41 | background-color: $active;
42 | }
43 | }
44 |
45 | @mixin interactive-background-on-before($default, $hover, $active, $focus: $hover) {
46 | &::before {
47 | background-color: $default;
48 | }
49 | &:hover {
50 | &::before {
51 | background-color: $hover;
52 | }
53 | }
54 | &:active {
55 | &::before {
56 | background-color: $active;
57 | }
58 | }
59 | &:hover {
60 | &::before {
61 | background-color: $hover;
62 | }
63 | }
64 | }
65 |
66 | @mixin pseudo-primer-icon($icon-name) {
67 | content: '';
68 | display: block;
69 | cursor: pointer;
70 | user-select: none;
71 | -webkit-mask-image: url('~@primer/octicons-react/build/svg/' + $icon-name + '.svg?inline');
72 | mask-image: url('~@primer/octicons-react/build/svg/' + $icon-name + '.svg?inline');
73 | -webkit-mask-size: contain;
74 | mask-size: contain;
75 | -webkit-mask-position: center;
76 | mask-position: center;
77 | }
78 |
79 | @mixin icon-button(
80 | $default: transparent,
81 | $hover: var(--color-btn-hover-bg),
82 | $active: var(--color-btn-focus-bg),
83 | $focus: $hover
84 | ) {
85 | @include flex-center();
86 | cursor: pointer;
87 | padding: 0;
88 | border: none;
89 |
90 | @include interactive-background($default, $hover, $active, $focus);
91 | }
92 |
--------------------------------------------------------------------------------
/src/utils/$.ts:
--------------------------------------------------------------------------------
1 | export function $(selector: string): E | null
2 | export function $(selector: string, existCallback: (element: HTMLElement) => R1): R1 | null
3 | export function $(
4 | selector: string,
5 | existCallback: (element: HTMLElement) => R1,
6 | otherwise: () => R2,
7 | ): R1 | R2
8 | export function $(
9 | selector: string,
10 | existCallback: undefined | null,
11 | otherwise: () => R2,
12 | ): E | R2
13 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
14 | export function $(selector: string, existCallback?: any, otherwise?: any) {
15 | const element = document.querySelector(selector)
16 | if (element) {
17 | return existCallback ? existCallback(element) : element
18 | }
19 | return otherwise ? otherwise() : null
20 | }
21 |
--------------------------------------------------------------------------------
/src/utils/EventHub.ts:
--------------------------------------------------------------------------------
1 | export class EventSubscription = VoidFN> {
2 | listeners: Listener[] = []
3 |
4 | emit(data: Data) {
5 | for (const listener of this.listeners) listener(data)
6 | }
7 |
8 | addEventListener(listener: Listener) {
9 | this.listeners.push(listener)
10 | return () => this.removeEventListener(listener)
11 | }
12 |
13 | removeEventListener(listener: Listener) {
14 | const index = this.listeners.indexOf(listener)
15 | if (index !== -1) this.listeners.splice(index, 1)
16 | }
17 | }
18 |
19 | export class EventHub<
20 | Shape extends {
21 | [event: string]: unknown
22 | },
23 | > {
24 | ports: {
25 | [key in keyof Shape]: EventSubscription
26 | } = {} as EventHub['ports']
27 |
28 | getPort(event: Event) {
29 | if (!this.ports[event]) this.ports[event] = new EventSubscription()
30 |
31 | return this.ports[event]
32 | }
33 |
34 | emit(event: Event, data: Shape[Event]) {
35 | const port = this.getPort(event)
36 | return port.emit(data)
37 | }
38 |
39 | addEventListener(
40 | event: Event,
41 | listener: (data: Shape[Event]) => void,
42 | ) {
43 | const port = this.getPort(event)
44 | return port.addEventListener(listener)
45 | }
46 |
47 | removeEventListener(
48 | event: Event,
49 | listener: (data: Shape[Event]) => void,
50 | ) {
51 | const port = this.getPort(event)
52 | return port.removeEventListener(listener)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/utils/URLHelper.ts:
--------------------------------------------------------------------------------
1 | export const sanitizedLocation = {
2 | get href() {
3 | const { href, pathname } = window.location
4 | const hasDupSlashes = pathname.includes('//')
5 | const needSanitize = hasDupSlashes
6 | if (!needSanitize) return href
7 |
8 | const url = new URL(href)
9 | url.pathname = sanitizedLocation.pathname
10 | return url.href
11 | },
12 | get pathname() {
13 | const { pathname } = window.location
14 | // remove duplicated slashes
15 | return pathname.replace(/^\/\/+/g, '/')
16 | },
17 | }
18 |
--------------------------------------------------------------------------------
/src/utils/VisibleNodesGenerator/BaseLayer.ts:
--------------------------------------------------------------------------------
1 | import { EventHub } from '../EventHub'
2 | import { findNode } from '../general'
3 | import { Options } from './index'
4 |
5 | function mergeNodes(target: TreeNode, source: TreeNode) {
6 | for (const node of source.contents || []) {
7 | const dup = target.contents?.find($node => $node.path === node.path)
8 | if (dup) {
9 | mergeNodes(dup, node)
10 | } else {
11 | if (!target.contents) target.contents = []
12 | target.contents.push(node)
13 | }
14 | }
15 | }
16 |
17 | export class BaseLayer {
18 | baseRoot: TreeNode
19 | getTreeData: (path: string) => Async
20 | loading: Set = new Set()
21 | defer: boolean
22 |
23 | baseHub = new EventHub<{
24 | emit: BaseLayer['baseRoot']
25 | loadingChange: BaseLayer['loading']
26 | }>()
27 |
28 | constructor({ root, getTreeData, defer = false }: Options) {
29 | this.baseRoot = root
30 | this.getTreeData = getTreeData
31 | this.defer = defer
32 | }
33 |
34 | loadTreeData = async (path: string) => {
35 | const node = await findNode(this.baseRoot, path)
36 | if (node && node.type !== 'tree') return node
37 | if (node?.contents?.length) return node // check in memory
38 | if (this.loading.has(path)) return
39 |
40 | this.loading.add(path)
41 | this.baseHub.emit('loadingChange', this.loading)
42 | mergeNodes(this.baseRoot, await this.getTreeData(path))
43 | this.loading.delete(path)
44 | this.baseHub.emit('loadingChange', this.loading)
45 | this.baseHub.emit('emit', this.baseRoot)
46 |
47 | return await findNode(this.baseRoot, path)
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/utils/VisibleNodesGenerator/CompressLayer.ts:
--------------------------------------------------------------------------------
1 | import { EventHub } from '../EventHub'
2 | import { withEffect } from '../general'
3 | import { Options } from './index'
4 | import { ShakeLayer } from './ShakeLayer'
5 |
6 | function compressTree(root: TreeNode, prefix: string[] = []): TreeNode {
7 | if (root.contents) {
8 | if (root.contents.length === 1) {
9 | const [singleton] = root.contents
10 | if (singleton.type === 'tree') {
11 | return compressTree(singleton, [...prefix, root.name])
12 | }
13 | }
14 |
15 | let compressed = false
16 | const contents = []
17 | for (const node of root.contents) {
18 | const $node = compressTree(node)
19 | if ($node !== node) compressed = true
20 | contents.push($node)
21 | }
22 | if (compressed)
23 | return {
24 | ...root,
25 | name: [...prefix, root.name].join('/'),
26 | contents,
27 | }
28 | }
29 | return prefix.length
30 | ? {
31 | ...root,
32 | name: [...prefix, root.name].join('/'),
33 | }
34 | : root
35 | }
36 |
37 | export class CompressLayer extends ShakeLayer {
38 | private compress: boolean
39 | depths = new Map()
40 | compressedRoot: TreeNode | null = null
41 | compressHub = new EventHub<{ emit: TreeNode | null }>()
42 |
43 | constructor(options: Options) {
44 | super(options)
45 | this.compress = Boolean(options.compress)
46 |
47 | this.shakeHub.addEventListener('emit', () => this.compressTree())
48 | }
49 |
50 | setCompression(compress: CompressLayer['compress']) {
51 | this.compress = compress
52 | this.compressTree()
53 | }
54 |
55 | private compressTree = withEffect(
56 | () => {
57 | this.compressedRoot =
58 | this.compress && this.shackedRoot
59 | ? {
60 | ...this.shackedRoot,
61 | contents: this.shackedRoot.contents?.map(node => compressTree(node)),
62 | }
63 | : this.shackedRoot
64 |
65 | if (this.compressedRoot) {
66 | const depths = new Map()
67 | const recordDepth = (node: TreeNode, depth = 0) => {
68 | depths.set(node, depth)
69 | for (const $node of node.contents || []) {
70 | recordDepth($node, depth + 1)
71 | }
72 | }
73 | recordDepth(this.compressedRoot, -1)
74 | this.depths = depths
75 | }
76 | },
77 | () => this.compressHub.emit('emit', this.compressedRoot),
78 | )
79 | }
80 |
--------------------------------------------------------------------------------
/src/utils/VisibleNodesGenerator/ShakeLayer.ts:
--------------------------------------------------------------------------------
1 | import { EventHub } from '../EventHub'
2 | import { withEffect } from '../general'
3 | import { BaseLayer } from './BaseLayer'
4 | import { Options, SearchParams } from './index'
5 |
6 | function search(
7 | root: TreeNode,
8 | match: (node: TreeNode) => boolean,
9 | onChildMatch: (node: TreeNode) => void,
10 | ): TreeNode | null {
11 | // go traverse no matter whether root matches to make sure find & expand the related nodes
12 | // The `related nodes` are the nodes that either itself matches or any of direct or indirect children match
13 | const contents = []
14 |
15 | if (root.type === 'tree' && root.contents) {
16 | for (const node of root.contents) {
17 | const $node = search(node, match, onChildMatch)
18 | if ($node) contents.push($node)
19 | }
20 |
21 | if (contents.length) onChildMatch(root)
22 | }
23 |
24 | // Return root if itself matches
25 | if (match(root)) return root
26 |
27 | // Otherwise, but when deeper nodes match, return partial root
28 | if (contents.length) {
29 | return {
30 | ...root,
31 | contents,
32 | }
33 | }
34 |
35 | return null
36 | }
37 |
38 | export class ShakeLayer extends BaseLayer {
39 | shackedRoot: TreeNode | null = this.baseRoot
40 | lastSearchParams: SearchParams | null = null
41 | shakeHub = new EventHub<{ emit: TreeNode | null }>()
42 |
43 | get isSearching() {
44 | return this.lastSearchParams !== null
45 | }
46 |
47 | constructor(options: Options) {
48 | super(options)
49 |
50 | this.baseHub.addEventListener('emit', () => this.shake(this.lastSearchParams))
51 | }
52 |
53 | shake = withEffect(
54 | (searchParams: ShakeLayer['lastSearchParams']) => {
55 | this.lastSearchParams = searchParams
56 |
57 | let root: ShakeLayer['shackedRoot'] = this.baseRoot
58 | if (searchParams) {
59 | const { matchNode, onChildMatch } = searchParams
60 | root = search(this.baseRoot, matchNode, onChildMatch)
61 | }
62 | this.shackedRoot = root
63 | },
64 | () => this.shakeHub.emit('emit', this.shackedRoot),
65 | )
66 | }
67 |
--------------------------------------------------------------------------------
/src/utils/VisibleNodesGenerator/VisibleNodesGenerator.test.ts:
--------------------------------------------------------------------------------
1 | import { VisibleNodes, VisibleNodesGenerator } from '.'
2 | import { searchModes } from '../../components/searchModes/index'
3 | import { prepareVisibleNodes } from './prepare'
4 | import searchResult__json from './searchResults/json.json'
5 | import treeRoot from './treeData.json'
6 |
7 | const compressSingletonFolder = true
8 | const restoreExpandedFolders = true
9 |
10 | const visibleNodesGenerator = new VisibleNodesGenerator({
11 | root: treeRoot as TreeNode,
12 | compress: compressSingletonFolder,
13 | async getTreeData() {
14 | throw new Error(`\`getTreeData\` should not be called`)
15 | },
16 | })
17 |
18 | const search = (searchKey: string, searchMode: 'regex' | 'fuzzy') =>
19 | new Promise(resolve => {
20 | const cancel = visibleNodesGenerator.onUpdate(visibleNodes => {
21 | cancel()
22 | resolve(visibleNodes)
23 | })
24 | visibleNodesGenerator.search(
25 | searchModes[searchMode].getSearchParams(searchKey),
26 | restoreExpandedFolders,
27 | )
28 | })
29 |
30 | // In Jest, `it`s does not handle async flow as expected,
31 | // there will be errors if the `it`s are in the same `describe`.
32 | // But `describes` run in sequence.
33 |
34 | describe('VisibleNodesGenerator Regex Search', () => {
35 | it('finds all nodes when searching regexp /./', async () => {
36 | for (const node of visibleNodesGenerator.visibleNodes.nodes) {
37 | await visibleNodesGenerator.toggleExpand(node, true)
38 | }
39 | const initialVisibleNodes = visibleNodesGenerator.visibleNodes
40 | expect(prepareVisibleNodes(await search('.', 'regex')).nodes).toEqual(
41 | prepareVisibleNodes(initialVisibleNodes).nodes,
42 | )
43 | })
44 | })
45 |
46 | describe('VisibleNodesGenerator Fuzzy Search', () => {
47 | it('finds correct nodes when searching path `json`', async () => {
48 | expect(prepareVisibleNodes(await search('json', 'fuzzy'))).toEqual(searchResult__json)
49 | })
50 | })
51 |
--------------------------------------------------------------------------------
/src/utils/VisibleNodesGenerator/index.ts:
--------------------------------------------------------------------------------
1 | import { EventHub } from '../EventHub'
2 | import { BaseLayer } from './BaseLayer'
3 | import { CompressLayer } from './CompressLayer'
4 | import { FlattenLayer } from './FlattenLayer'
5 |
6 | export type SearchParams = {
7 | matchNode(node: TreeNode): boolean
8 | onChildMatch(node: TreeNode): void
9 | }
10 |
11 | export type Options = {
12 | root: BaseLayer['baseRoot']
13 | defer?: BaseLayer['defer']
14 | getTreeData: BaseLayer['getTreeData']
15 | compress: CompressLayer['compress']
16 | }
17 |
18 | export type VisibleNodes = {
19 | loading: BaseLayer['loading']
20 | depths: CompressLayer['depths']
21 | nodes: FlattenLayer['nodes']
22 | expandedNodes: FlattenLayer['expandedNodes']
23 | focusedNode: FlattenLayer['focusedNode']
24 | }
25 |
26 | export class VisibleNodesGenerator extends FlattenLayer {
27 | hub = new EventHub<{
28 | emit: VisibleNodes
29 | }>()
30 |
31 | constructor(options: Options) {
32 | super(options)
33 |
34 | this.flattenHub.addEventListener('emit', () => this.update())
35 | this.baseHub.addEventListener('loadingChange', () => this.update())
36 |
37 | this.search(null)
38 | }
39 |
40 | onUpdate(callback: (visibleNodes: VisibleNodes) => void) {
41 | return this.hub.addEventListener('emit', callback)
42 | }
43 |
44 | onNextUpdate(callback: (visibleNodes: VisibleNodes) => void) {
45 | const oneTimeSubscription = (visibleNodes: VisibleNodes) => {
46 | cancel()
47 | callback(visibleNodes)
48 | }
49 | const cancel = this.hub.addEventListener('emit', oneTimeSubscription)
50 | return cancel
51 | }
52 |
53 | update() {
54 | this.hub.emit('emit', this.visibleNodes)
55 | }
56 |
57 | get visibleNodes(): VisibleNodes {
58 | return {
59 | nodes: this.nodes,
60 | depths: this.depths,
61 | expandedNodes: this.expandedNodes,
62 | focusedNode: this.focusedNode,
63 | loading: this.loading,
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/utils/assert.ts:
--------------------------------------------------------------------------------
1 | export function assert(condition: boolean, errorMessage?: string): asserts condition {
2 | if (!condition) throw new Error(errorMessage)
3 | }
4 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/1.0.1.ts:
--------------------------------------------------------------------------------
1 | import { is } from 'utils/is'
2 | import { storageHelper } from 'utils/storageHelper'
3 | import { Migration } from '.'
4 | import { Storage } from '../../storageHelper'
5 |
6 | export const migration: Migration = {
7 | version: '1.0.1',
8 | async migrate(version) {
9 | const config: JSONObject | void = await storageHelper.get([
10 | 'configVersion',
11 | 'sideBarWidth',
12 | 'shortcut',
13 | 'access_token',
14 | 'compressSingletonFolder',
15 | 'copyFileButton',
16 | 'copySnippetButton',
17 | 'intelligentToggle',
18 | 'icons',
19 | ])
20 | if (
21 | config &&
22 | (!('configVersion' in config) ||
23 | config.configVersion === null ||
24 | !is.string(config.configVersion) ||
25 | config.configVersion < version)
26 | ) {
27 | await storageHelper.set({ platform_GitHub: config, configVersion: version })
28 | }
29 | },
30 | }
31 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/1.3.4.ts:
--------------------------------------------------------------------------------
1 | import { is } from 'utils/is'
2 | import { storageHelper } from 'utils/storageHelper'
3 | import { Migration } from '.'
4 | import { Config, VersionedConfig } from '../helper'
5 |
6 | export const migration: Migration = {
7 | version: '1.3.4',
8 | async migrate(version) {
9 | const config: JSONObject | void = await storageHelper.get>([
10 | 'configVersion',
11 | 'platform_undefined',
12 | 'platform_GitHub',
13 | 'platform_github.com',
14 | ])
15 | if (
16 | config &&
17 | 'configVersion' in config &&
18 | is.string(config.configVersion) &&
19 | config.configVersion < version &&
20 | (config.platform_GitHub || config.platform_undefined) &&
21 | !config['platform_github.com']
22 | ) {
23 | await storageHelper.set({
24 | ['platform_github.com']: config.platform_GitHub || config.platform_undefined,
25 | configVersion: version,
26 | })
27 | }
28 | },
29 | }
30 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/2.6.0.ts:
--------------------------------------------------------------------------------
1 | import { storageHelper } from 'utils/storageHelper'
2 | import { Migration, onConfigOutdated } from '.'
3 |
4 | export const migration: Migration = {
5 | version: '2.6.0',
6 | async migrate(version) {
7 | type ConfigBeforeMigrate = {
8 | access_token?: string
9 | }
10 | type ConfigAfterMigrate = {
11 | accessToken?: string
12 | }
13 |
14 | await onConfigOutdated(version, async configs => {
15 | for (const key of Object.keys(configs)) {
16 | const target = configs[key]
17 | if (typeof target === 'object' && target !== null && 'access_token' in target) {
18 | const configBeforeMigrate: ConfigBeforeMigrate = target
19 | const { access_token: accessToken, ...rest } = configBeforeMigrate
20 | const configAfterMigrate: ConfigAfterMigrate = {
21 | ...rest,
22 | accessToken,
23 | }
24 | await storageHelper.set({
25 | [key]: configAfterMigrate,
26 | })
27 | }
28 | }
29 | })
30 | },
31 | }
32 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/3.0.0.ts:
--------------------------------------------------------------------------------
1 | import { storageHelper } from 'utils/storageHelper'
2 | import { Migration, onConfigOutdated } from '.'
3 |
4 | export const migration: Migration = {
5 | version: '3.0.0',
6 | async migrate(version) {
7 | // disable copy snippet button for github.com
8 | type ConfigBeforeMigrate = {
9 | copySnippetButton: boolean
10 | }
11 | type ConfigAfterMigrate = {
12 | copySnippetButton: boolean
13 | }
14 |
15 | await onConfigOutdated(version, async configs => {
16 | const key = 'platform_github.com'
17 | const config = configs[key]
18 | if (typeof config === 'object' && config !== null && 'copySnippetButton' in config) {
19 | const configBeforeMigrate = config as ConfigBeforeMigrate
20 | const { copySnippetButton, ...rest } = configBeforeMigrate
21 | if (copySnippetButton) {
22 | const configAfterMigrate: ConfigAfterMigrate = {
23 | ...rest,
24 | copySnippetButton: false,
25 | }
26 | await storageHelper.set({
27 | [key]: configAfterMigrate,
28 | })
29 | }
30 | }
31 | })
32 | },
33 | }
34 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/3.13.1.ts:
--------------------------------------------------------------------------------
1 | import { storageHelper } from 'utils/storageHelper'
2 | import { Migration, onConfigOutdated } from '.'
3 |
4 | export const migration: Migration = {
5 | version: '3.13.1',
6 | async migrate(version) {
7 | // disable copy snippet button for github.com
8 | type ConfigBeforeMigrate = {
9 | toggleButtonVerticalDistance: number
10 | }
11 | type ConfigAfterMigrate = {
12 | toggleButtonVerticalDistance: number
13 | }
14 |
15 | await onConfigOutdated(version, async configs => {
16 | const key = 'platform_github.com'
17 | const config = configs[key]
18 | if (
19 | typeof config === 'object' &&
20 | config !== null &&
21 | 'toggleButtonVerticalDistance' in config
22 | ) {
23 | const configBeforeMigrate = config as ConfigBeforeMigrate
24 | const { toggleButtonVerticalDistance, ...rest } = configBeforeMigrate
25 | const previousDefaultToggleButtonVerticalDistance = 124
26 | const newDefaultToggleButtonVerticalDistance = 64
27 | if (toggleButtonVerticalDistance === previousDefaultToggleButtonVerticalDistance) {
28 | const configAfterMigrate: ConfigAfterMigrate = {
29 | ...rest,
30 | toggleButtonVerticalDistance: newDefaultToggleButtonVerticalDistance,
31 | }
32 | await storageHelper.set({
33 | [key]: configAfterMigrate,
34 | })
35 | }
36 | }
37 | })
38 | },
39 | }
40 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/3.5.0.ts:
--------------------------------------------------------------------------------
1 | import { storageHelper } from 'utils/storageHelper'
2 | import { Migration, onConfigOutdated } from '.'
3 |
4 | export const migration: Migration = {
5 | version: '3.5.0',
6 | async migrate(version) {
7 | // disable copy snippet button for github.com
8 | type ConfigBeforeMigrate = {
9 | copyFileButton: boolean
10 | }
11 | type ConfigAfterMigrate = {
12 | copyFileButton: false
13 | }
14 |
15 | await onConfigOutdated(version, async configs => {
16 | const key = 'platform_github.com'
17 | const config = configs[key]
18 | if (typeof config === 'object' && config !== null && 'copyFileButton' in config) {
19 | const configBeforeMigrate = config as ConfigBeforeMigrate
20 | const { copyFileButton, ...rest } = configBeforeMigrate
21 | if (copyFileButton) {
22 | const configAfterMigrate: ConfigAfterMigrate = {
23 | ...rest,
24 | copyFileButton: false,
25 | }
26 | await storageHelper.set({
27 | [key]: configAfterMigrate,
28 | })
29 | }
30 | }
31 | })
32 | },
33 | }
34 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/clearRaiseErrorCache.ts:
--------------------------------------------------------------------------------
1 | import { storageHelper } from 'utils/storageHelper'
2 | import { Migration, onConfigOutdated } from '.'
3 | import packageJson from '../../../../package.json'
4 |
5 | // Run every time a new version is released.
6 | export const migration: Migration = {
7 | version: packageJson.version,
8 | async migrate(version) {
9 | await onConfigOutdated(version, async () => {
10 | await storageHelper.set({ raiseErrorCache: [] })
11 | })
12 | },
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/config/migrations/index.ts:
--------------------------------------------------------------------------------
1 | import { storageHelper, storageKeys } from 'utils/storageHelper'
2 | import packageJson from '../../../../package.json'
3 | import { Storage } from '../../storageHelper'
4 | import { migration as v1v0v1 } from './1.0.1'
5 | import { migration as v1v3v4 } from './1.3.4'
6 | import { migration as v2v6v0 } from './2.6.0'
7 | import { migration as v3v0v0 } from './3.0.0'
8 | import { migration as v3v5v0 } from './3.5.0'
9 | import { migration as clearRaiseErrorCache } from './clearRaiseErrorCache'
10 |
11 | export type Migration = {
12 | version: string
13 | migrate(version: Migration['version']): Async
14 | }
15 |
16 | export async function migrateConfig() {
17 | const migrations: Migration[] = [v1v0v1, v1v3v4, v2v6v0, v3v0v0, v3v5v0]
18 | migrations.push(clearRaiseErrorCache) // Make sure this is run after other version-specific migrations
19 |
20 | for (const { version, migrate } of migrations) {
21 | await migrate(version)
22 | }
23 |
24 | await storageHelper.set({ [storageKeys.configVersion]: packageJson.version })
25 | }
26 |
27 | export async function onConfigOutdated(
28 | migrationConfigVersion: string,
29 | runIfOutdated: (config: T) => Async,
30 | ) {
31 | const config = await storageHelper.get()
32 |
33 | if (config) {
34 | const {
35 | [storageKeys.configVersion]: savedConfigVersion,
36 | [storageKeys.raiseErrorCache]: __, // eslint-disable-line @typescript-eslint/no-unused-vars
37 | ...restConfig
38 | } = config
39 | if (savedConfigVersion < migrationConfigVersion) {
40 | await runIfOutdated(restConfig as T)
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/utils/createAnchorClickHandler.ts:
--------------------------------------------------------------------------------
1 | import { isOpenInNewWindowClick } from './general'
2 | import { loadWithFastRedirect } from './hooks/useFastRedirect'
3 |
4 | export function createAnchorClickHandler(url: string) {
5 | return (e: React.MouseEvent) => {
6 | if (isOpenInNewWindowClick(e)) return
7 |
8 | e.preventDefault()
9 | loadWithFastRedirect(url, e.currentTarget)
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/utils/cx.ts:
--------------------------------------------------------------------------------
1 | type CXValue = string | boolean | null | undefined
2 |
3 | /**
4 | * cx('class1', { class2: true, class3: false }) --> 'class1 class2'
5 | */
6 | export function cx(
7 | ...classNames: (
8 | | CXValue
9 | | {
10 | [className: string]: CXValue
11 | }
12 | )[]
13 | ): string {
14 | return classNames.map(handleClassName).filter(Boolean).join(' ')
15 | }
16 |
17 | function handleClassName(className: Parameters[number]): string | false {
18 | switch (typeof className) {
19 | case 'string':
20 | return className
21 | case 'object':
22 | return className === null
23 | ? false
24 | : cx(...Object.entries(className).map(([key, value]) => (value ? key : false)))
25 | default:
26 | return false
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/utils/features.ts:
--------------------------------------------------------------------------------
1 | export const resize = Boolean(window.ResizeObserver)
2 |
--------------------------------------------------------------------------------
/src/utils/general.test.ts:
--------------------------------------------------------------------------------
1 | import { atomicAsyncFunction, resolveDiffGraphMeta } from './general'
2 |
3 | it(`should resolve diff stat graph meta properly`, () => {
4 | const example = `
5 | 2 10 0 4
6 | 3 10 1 3
7 | 3 17 0 4
8 | 4 17 0 4
9 | 4 26 0 4
10 | 5 17 1 3
11 | 6 17 1 3
12 | 12 0 5 0
13 | 0 12 0 5
14 | 17 74 0 4
15 | 11 23 1 3
16 | 18 28 1 3
17 | 34 24 2 2
18 | `
19 |
20 | example
21 | .split(/\n/)
22 | .map(line => line.trim())
23 | .filter(line => line.length)
24 | .map(line => line.split(/\s+/).map(_ => parseInt(_)))
25 | .forEach(([additions, deletions, g, r]) => {
26 | const meta = resolveDiffGraphMeta(additions, deletions, additions + deletions)
27 | expect([meta.g, meta.r]).toEqual([g, r])
28 | })
29 | })
30 |
31 | it(`should schedule atomic promises properly`, async () => {
32 | const sleep = (duration: number) => new Promise(resolve => setTimeout(resolve, duration))
33 |
34 | const recorder: string[] = []
35 | const sleepWithNoise = async (duration: number, noise: string) => {
36 | await sleep(duration)
37 | recorder.push(noise)
38 | return noise
39 | }
40 |
41 | const atomicSleep = atomicAsyncFunction(sleepWithNoise)
42 |
43 | recorder.length = 0
44 | const atomicReturns = await Promise.all([atomicSleep(200, 'a'), atomicSleep(100, 'b')])
45 | // Expected time sheet
46 | // 0 100 200 300
47 | // [a ]
48 | // [b ]
49 | // Recorder: [a, b]
50 | //
51 | expect(recorder).toEqual(['a', 'b'])
52 | expect(atomicReturns).toEqual(['a', 'b'])
53 |
54 | recorder.length = 0
55 | const normalReturns = await Promise.all([sleepWithNoise(200, 'a'), sleepWithNoise(100, 'b')])
56 | // Time sheet if not atomic
57 | // 0 100 200
58 | // [a ]
59 | // [b ]
60 | // Recorder: [b, a]
61 | expect(recorder).toEqual(['b', 'a'])
62 | expect(normalReturns).toEqual(['a', 'b'])
63 | })
64 |
--------------------------------------------------------------------------------
/src/utils/getSafeWidth.test.ts:
--------------------------------------------------------------------------------
1 | import { getSafeWidth, MINIMAL_CONTENT_VIEWPORT_WIDTH, MINIMAL_WIDTH } from './getSafeWidth'
2 |
3 | jest.retryTimes(3) // Math.random may result in failure due to floating point precision
4 |
5 | it(`should shrink when window is being resized smaller`, () => {
6 | const randomGrow = 100 * Math.random()
7 | expect(
8 | getSafeWidth(
9 | MINIMAL_WIDTH + MINIMAL_CONTENT_VIEWPORT_WIDTH + randomGrow * 2,
10 | MINIMAL_WIDTH + MINIMAL_CONTENT_VIEWPORT_WIDTH + randomGrow,
11 | ),
12 | ).toBe(MINIMAL_WIDTH + randomGrow)
13 | })
14 |
15 | it(`should not shrink when window is being resized smaller than minimal size`, () => {
16 | const randomGrow = 100 * Math.random()
17 | expect(getSafeWidth(0, MINIMAL_WIDTH + MINIMAL_CONTENT_VIEWPORT_WIDTH - randomGrow)).toBe(
18 | MINIMAL_WIDTH,
19 | )
20 | })
21 |
22 | it(`should return user-preferred size if not reaching bounds`, () => {
23 | const randomGrow = 100 * Math.random()
24 | expect(
25 | getSafeWidth(
26 | MINIMAL_WIDTH + randomGrow,
27 | MINIMAL_WIDTH + MINIMAL_CONTENT_VIEWPORT_WIDTH + randomGrow * 2,
28 | ),
29 | ).toBe(MINIMAL_WIDTH + randomGrow)
30 | })
31 |
--------------------------------------------------------------------------------
/src/utils/getSafeWidth.ts:
--------------------------------------------------------------------------------
1 | import { Size } from '../components/Size'
2 |
3 | export const MINIMAL_CONTENT_VIEWPORT_WIDTH = 100
4 | export const MINIMAL_WIDTH = 240
5 |
6 | export function getSafeWidth(width: Size, windowWidth: number) {
7 | // if window width is too small, prevent reducing anymore
8 | if (windowWidth < MINIMAL_WIDTH + MINIMAL_CONTENT_VIEWPORT_WIDTH) return MINIMAL_WIDTH
9 | // if trying to enlarge to much, leave some space
10 | if (width > windowWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH)
11 | return windowWidth - MINIMAL_CONTENT_VIEWPORT_WIDTH
12 | if (width < MINIMAL_WIDTH) return MINIMAL_WIDTH
13 | return width
14 | }
15 |
--------------------------------------------------------------------------------
/src/utils/gitSubmodule.ts:
--------------------------------------------------------------------------------
1 | import * as ini from 'ini'
2 | import { findNode } from 'utils/general'
3 |
4 | const subModuleURLRegex = {
5 | HTTP: /^https?:\/\/.*?$/,
6 | HTTPGit: /^https:.*?\.git$/,
7 | git: /^git@.*?:(.*?)\/(.*?)\.git$/,
8 | }
9 |
10 | function transformModuleGitURL(node: TreeNode, URL: string) {
11 | const matched = URL.match(subModuleURLRegex.git)
12 | if (!matched) return
13 | const [, userName, repoName] = matched
14 | return appendCommitPath(`${window.location.origin}/${userName}/${repoName}`, node)
15 | }
16 |
17 | function cutDotGit(URL: string) {
18 | return URL.replace(/\.git$/, '')
19 | }
20 |
21 | function appendCommitPath(URL: string, node: TreeNode) {
22 | return URL.replace(/\/?$/, `/tree/${node.sha}`)
23 | }
24 |
25 | function transformModuleHTTPDotGitURL(node: TreeNode, URL: string) {
26 | return appendCommitPath(cutDotGit(URL), node)
27 | }
28 |
29 | function transformModuleHTTPURL(node: TreeNode, URL: string) {
30 | return appendCommitPath(URL, node)
31 | }
32 |
33 | type ParsedINI = {
34 | [key: string]: ParsedModule | ParsedINI | undefined
35 | }
36 |
37 | type ParsedModule = {
38 | [key: string]: string | undefined
39 | }
40 |
41 | // TODO: merge into getTreeData callback
42 | async function handleParsed(root: TreeNode, parsed: ParsedINI) {
43 | for (const value of Object.values(parsed)) {
44 | if (typeof value === 'string') return
45 | const url = value?.url
46 | const path = value?.path
47 | if (typeof url === 'string' && typeof path === 'string') {
48 | const node = await findNode(root, path)
49 | if (node) {
50 | if (subModuleURLRegex.HTTPGit.test(url)) {
51 | node.url = transformModuleHTTPDotGitURL(node, url)
52 | } else if (subModuleURLRegex.git.test(url)) {
53 | node.url = transformModuleGitURL(node, url)
54 | } else if (subModuleURLRegex.HTTP.test(url)) {
55 | node.url = transformModuleHTTPURL(node, url)
56 | } else {
57 | node.accessDenied = true
58 | }
59 | } else {
60 | // It turns out that we did not miss any submodule after a lot of tests.
61 | // Commenting this.
62 | // raiseError(new Error(`Submodule node not found`), { path })
63 | }
64 | } else {
65 | await handleParsed(root, value as ParsedINI)
66 | }
67 | }
68 | }
69 |
70 | export async function resolveGitModules(root: TreeNode, content: string) {
71 | try {
72 | if (Array.isArray(root.contents)) {
73 | const parsed: ParsedINI = ini.parse(content)
74 | await handleParsed(root, parsed)
75 | }
76 | } catch (err) {
77 | throw new Error(`Error resolving git modules`)
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/utils/hooks/useAbortableEffect.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 |
3 | /**
4 | * This effect addresses such a problem:
5 | * the later effect ends earlier than the previous one, and the previous effect overlaps later effect's result.
6 | */
7 | export function useAbortableEffect(
8 | effect: () => {
9 | getAsyncGenerator: () => AsyncGenerator
10 | cancel?: () => void
11 | },
12 | ) {
13 | useEffect(() => {
14 | const abortController = new AbortController()
15 | // The previous effect should stop running if the signal indicates should abort
16 | const { getAsyncGenerator, cancel } = effect()
17 | runAbortableAsyncGenerator(getAsyncGenerator(), abortController.signal)
18 | return () => {
19 | cancel?.()
20 | abortController.abort()
21 | }
22 | }, [effect])
23 | }
24 |
25 | async function runAbortableAsyncGenerator(
26 | generator: AsyncGenerator,
27 | signal?: AbortSignal,
28 | ) {
29 | let latestResult: IteratorResult | undefined
30 | do {
31 | if (signal?.aborted) return
32 | latestResult = await generator.next(await latestResult?.value)
33 | } while (!latestResult.done)
34 | return latestResult.value
35 | }
36 |
--------------------------------------------------------------------------------
/src/utils/hooks/useCSSVariable.ts:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect } from 'react'
2 | import { setCSSVariable } from 'utils/DOMHelper'
3 |
4 | export function useCSSVariable(
5 | name: string,
6 | value: string,
7 | element: HTMLElement = document.documentElement,
8 | ) {
9 | useLayoutEffect(() => {
10 | setCSSVariable(name, value, element)
11 | }, [name, value, element])
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/hooks/useConditionalHook.ts:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | export function useConditionalHook(condition: () => boolean, hook: () => T) {
4 | const [use] = useState(condition)
5 | if (use) return hook()
6 | }
7 |
--------------------------------------------------------------------------------
/src/utils/hooks/useEffectOnSerializableUpdates.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo } from 'react'
2 |
3 | export function useEffectOnSerializableUpdates(
4 | value: T,
5 | serialize: (value: T) => string,
6 | onChange: (value: T) => void,
7 | ) {
8 | const serialized = useMemo(() => serialize(value), [value, serialize])
9 | useEffect(() => onChange(value), [onChange, serialized]) // eslint-disable-line react-hooks/exhaustive-deps
10 | }
11 |
--------------------------------------------------------------------------------
/src/utils/hooks/useElementSize.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react'
2 | import * as features from 'utils/features'
3 | import { Size2D } from '../../components/Size'
4 |
5 | export function useElementSize() {
6 | const ref = useRef(null)
7 |
8 | const [size, setSize] = useState([0, 0])
9 |
10 | useEffect(() => {
11 | if (ref.current) {
12 | if (features.resize) {
13 | const observer = new window.ResizeObserver(entries => {
14 | const entry = entries[0]
15 | if (!entry) return
16 | const { width, height } = entry.contentRect
17 | setSize([width, height])
18 | })
19 | observer.observe(ref.current)
20 | return () => observer.disconnect()
21 | } else if ('getBoundingClientRect' in ref.current) {
22 | const { width, height } = ref.current.getBoundingClientRect()
23 | setSize([width, height])
24 | }
25 | }
26 | }, [])
27 |
28 | return {
29 | ref,
30 | size,
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/utils/hooks/useFastRedirect.ts:
--------------------------------------------------------------------------------
1 | import { useConfigs } from 'containers/ConfigsContext'
2 | import { platform } from 'platforms'
3 | import { useCallback, useEffect, useRef } from 'react'
4 | import { useEvent, useInterval } from 'react-use'
5 | import { run } from 'utils/general'
6 |
7 | const config: import('pjax-api').Config = {
8 | areas: [
9 | // github
10 | '.repository-content',
11 | // gitee
12 | '#git-project-content',
13 | // gitea
14 | '.repository > .ui.container',
15 | ],
16 | update: {
17 | css: false,
18 | },
19 | fetch: {},
20 | link: 'a:not(a)', // this helps fixing the go-back-in-history issue
21 | form: 'form:not(form)', // prevent blocking form submissions
22 | fallback(/* target, reason */) {
23 | // prevent unexpected reload
24 | },
25 | }
26 |
27 | export function usePJAXAPI() {
28 | const { pjaxMode } = useConfigs().value
29 | // make history travel work
30 | useEffect(() => {
31 | if (pjaxMode === 'pjax-api') {
32 | run(async () => {
33 | const { Pjax } = await import('pjax-api')
34 | new Pjax({
35 | ...config,
36 | filter() {
37 | return false
38 | },
39 | })
40 | })
41 | }
42 | }, []) // eslint-disable-line react-hooks/exhaustive-deps
43 |
44 | // bindings for legacy support
45 | useRedirectedEvents(window, 'pjax:fetch', 'pjax:start', document)
46 | useRedirectedEvents(document, 'pjax:ready', 'pjax:end')
47 | }
48 |
49 | export const loadWithFastRedirect = (url: string, element: HTMLElement) => {
50 | // eslint-disable-next-line @typescript-eslint/no-var-requires
51 | platform.loadWithFastRedirect?.(url, element) || require('pjax-api').Pjax.assign(url, config)
52 | }
53 |
54 | export function useAfterRedirect(callback: () => void) {
55 | const latestHref = useRef(location.href)
56 | const raceCallback = useCallback(() => {
57 | const { href } = location
58 | if (latestHref.current !== href) {
59 | latestHref.current = href
60 | callback()
61 | }
62 | }, [callback])
63 | useInterval(raceCallback, 500)
64 | useEvent('pjax:end', raceCallback, document) // legacy support
65 | useEvent('turbo:render', raceCallback, document) // prevent page content shift after first redirect to new page via turbo when sidebar is pinned
66 | }
67 |
68 | export function useRedirectedEvents(
69 | originalTarget: Window | Document | Element,
70 | originalEvent: string,
71 | redirectedEvent: string,
72 | redirectToTarget = originalTarget,
73 | ) {
74 | useEvent(
75 | originalEvent,
76 | () => {
77 | redirectToTarget.dispatchEvent(new Event(redirectedEvent))
78 | },
79 | originalTarget,
80 | )
81 | }
82 |
--------------------------------------------------------------------------------
/src/utils/hooks/useHandleNetworkError.ts:
--------------------------------------------------------------------------------
1 | import { useConfigs } from 'containers/ConfigsContext'
2 | import { errors, platform, platformName } from 'platforms'
3 | import { useCallback } from 'react'
4 | import { useLoadedContext } from 'utils/hooks/useLoadedContext'
5 | import { SideBarErrorContext } from '../../containers/ErrorContext'
6 | import { SideBarStateContext } from '../../containers/SideBarState'
7 |
8 | export function useHandleNetworkError() {
9 | const { accessToken } = useConfigs().value
10 | const changeErrorContext = useLoadedContext(SideBarErrorContext).onChange
11 | const changeStateContext = useLoadedContext(SideBarStateContext).onChange
12 |
13 | return useCallback(
14 | function handleNetworkError(err: Error) {
15 | const message = platform.mapErrorMessage?.(err) || err.message
16 | if (message === errors.EMPTY_PROJECT) {
17 | changeErrorContext('This project seems to be empty.')
18 | return
19 | }
20 |
21 | if (message === errors.BLOCKED_PROJECT) {
22 | changeErrorContext('Access to the project is blocked.')
23 | return
24 | }
25 |
26 | if (
27 | message === errors.NOT_FOUND ||
28 | message === errors.BAD_CREDENTIALS ||
29 | message === errors.API_RATE_LIMIT
30 | ) {
31 | changeStateContext('error-due-to-auth')
32 | return
33 | }
34 |
35 | if (message === errors.CONNECTION_BLOCKED) {
36 | if (accessToken) changeErrorContext(`Cannot connect to ${platformName}.`)
37 | else changeStateContext('error-due-to-auth')
38 |
39 | return
40 | }
41 |
42 | if (message === errors.SERVER_FAULT) {
43 | changeErrorContext(`${platformName} server went down.`)
44 | return
45 | }
46 |
47 | changeStateContext('disabled')
48 | changeErrorContext('Something unexpected happened.')
49 | throw err
50 | },
51 | [accessToken, changeErrorContext, changeStateContext],
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/utils/hooks/useLoadedContext.ts:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 |
3 | export function useLoadedContext(context: React.Context): T {
4 | const ctx = useContext(context)
5 | if (ctx === null) throw new Error(`Context not loaded`)
6 | return ctx
7 | }
8 |
--------------------------------------------------------------------------------
/src/utils/hooks/useOnLocationChange.ts:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { useLocation } from 'react-use'
3 |
4 | export function useOnLocationChange(
5 | callback: React.EffectCallback,
6 | extraDeps: React.DependencyList = [],
7 | ) {
8 | const { href, pathname, search } = useLocation()
9 | useEffect(callback, [href, pathname, search, callback, ...extraDeps])
10 | }
11 |
--------------------------------------------------------------------------------
/src/utils/hooks/useOnShortcutPressed.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { useLoadedContext } from 'utils/hooks/useLoadedContext'
3 | import * as keyHelper from 'utils/keyHelper'
4 | import { SideBarStateContext } from '../../containers/SideBarState'
5 |
6 | export function useOnShortcutPressed(
7 | shortcut: string | undefined,
8 | onPressed: (e: KeyboardEvent) => void,
9 | ) {
10 | const state = useLoadedContext(SideBarStateContext).value
11 | const isDisabled = state === 'disabled' || !shortcut
12 | useEffect(
13 | function attachKeyDown() {
14 | if (isDisabled) return
15 |
16 | function onKeyDown(e: KeyboardEvent) {
17 | const keys = keyHelper.parseEvent(e)
18 | if (keys === shortcut) onPressed(e)
19 | }
20 | window.addEventListener('keydown', onKeyDown)
21 | return () => window.removeEventListener('keydown', onKeyDown)
22 | },
23 | [onPressed, isDisabled, shortcut],
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/utils/hooks/useProgressBar.ts:
--------------------------------------------------------------------------------
1 | import * as NProgress from 'nprogress'
2 | import { useEffect } from 'react'
3 | import { useEvent } from 'react-use'
4 |
5 | const progressBar = {
6 | mount() {
7 | NProgress.start()
8 | },
9 | unmount() {
10 | NProgress.done()
11 | },
12 | }
13 |
14 | export function useProgressBar() {
15 | useEffect(() => {
16 | NProgress.configure({ showSpinner: false })
17 | }, [])
18 | useEvent('pjax:fetch', progressBar.mount, window)
19 | useEvent('pjax:unload', progressBar.unmount, window)
20 | }
21 |
--------------------------------------------------------------------------------
/src/utils/hooks/useStateIO.ts:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useState } from 'react'
2 |
3 | export function useStateIO(initialState: S | (() => S)): {
4 | value: S
5 | onChange: React.Dispatch>
6 | } {
7 | const [value, onChange] = useState(initialState)
8 | return useMemo(() => ({ value, onChange }), [value])
9 | }
10 |
--------------------------------------------------------------------------------
/src/utils/hooks/useUpdateReason.ts:
--------------------------------------------------------------------------------
1 | import { IN_PRODUCTION_MODE } from 'env'
2 | import { useEffect, useRef } from 'react'
3 |
4 | export function useUpdateReason>(props: P) {
5 | const lastPropsRef = useRef
(props)
6 | useEffect(() => {
7 | if (IN_PRODUCTION_MODE) return
8 | const output: ([string, keyof P, P[keyof P]] | [string, keyof P, P[keyof P], P[keyof P]])[] = []
9 | for (const key of Object.keys(props)) {
10 | if (key === 'children') continue
11 | const $key = key as keyof P
12 | if (!(key in lastPropsRef.current)) output.push([`[Added]`, $key, props[$key]])
13 | if (lastPropsRef.current[$key] !== props[$key])
14 | output.push([`[Updated]`, $key, lastPropsRef.current[$key], props[$key]])
15 | }
16 |
17 | for (const key of Object.keys(lastPropsRef.current)) {
18 | if (key === 'children') continue
19 | const $key = key as keyof P
20 | if (!(key in props)) output.push([`[Removed]`, $key, props[$key]])
21 | }
22 |
23 | if (output.length) {
24 | console.group(`[Update Reasons]`)
25 | for (const record of output) {
26 | console.log(...record.map(r => (typeof r === 'function' ? '[fn]' : r)))
27 | }
28 | console.groupEnd()
29 | }
30 |
31 | lastPropsRef.current = props
32 | })
33 | }
34 |
--------------------------------------------------------------------------------
/src/utils/keyHelper.ts:
--------------------------------------------------------------------------------
1 | const keyCodeArray = [
2 | ...'1234567890abcdefghijklmnopqrstuvwxyz'.split(''),
3 | /* the key that's located left to the 1 key in Mac
4 | keybords in multiple Engligh laybouts (Backquote) */
5 | ...'`§'.split(''),
6 | ..."[]\\;',./".split(''),
7 | 'alt',
8 | 'shift',
9 | 'ctrl',
10 | 'meta',
11 | ]
12 | const validKeyCodes = new Set(keyCodeArray)
13 |
14 | function isValidKey(key: string) {
15 | return validKeyCodes.has(key)
16 | }
17 |
18 | /**
19 | * parse a string representation of key combination
20 | *
21 | * @param {string} keysString
22 | * @returns {string}
23 | */
24 | function parse(keysString: string) {
25 | return (
26 | keysString
27 | .split('+')
28 | /* when trying to set a combination includes '+',
29 | input should be 'shift + =' instead of 'shift + +',
30 | thus a valid key string won't contain '++' */
31 | .map(_ => _.trim().toLowerCase())
32 | .filter(isValidKey)
33 | .sort((a, b) => keyCodeArray.indexOf(b) - keyCodeArray.indexOf(a))
34 | .join('+')
35 | )
36 | }
37 |
38 | function parseKeyCode(code: string) {
39 | return code.toLowerCase().replace(/^control$/, 'ctrl')
40 | }
41 |
42 | export function parseEvent(e: KeyboardEvent | React.KeyboardEvent) {
43 | const { altKey: alt, shiftKey: shift, metaKey: meta, ctrlKey: ctrl } = e
44 | try {
45 | const code = parseKeyCode(e.key)
46 | const keys = { meta, ctrl, shift, alt, [code]: true }
47 | const combination = parse(
48 | Object.entries(keys)
49 | .filter(([, pressed]) => pressed)
50 | .map(([key]) => key)
51 | .join('+'),
52 | )
53 | return combination
54 | } catch (err) {
55 | const serializedKeyData = JSON.stringify({
56 | keyCode: e.keyCode,
57 | key: e.key,
58 | charCode: e.charCode,
59 | })
60 | throw new Error(`Error parse keyboard event: ${serializedKeyData}`)
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/utils/networkService.ts:
--------------------------------------------------------------------------------
1 | export const gitakoServiceHost = 'gitako.enix.one'
2 |
--------------------------------------------------------------------------------
/src/utils/parseIconMapCSV.ts:
--------------------------------------------------------------------------------
1 | import rawFileIconIndex from 'assets/icons/file-icons-index.csv'
2 | import rawFolderIconIndex from 'assets/icons/folder-icons-index.csv'
3 |
4 | const rowSeparator = '\n'
5 | const colSeparator = ','
6 | const arraySeparator = ':'
7 |
8 | function parseFileIconMapCSV() {
9 | const filenameIndex = new Map()
10 | const fileExtensionIndex = new Map()
11 | for (const line of rawFileIconIndex.split(rowSeparator)) {
12 | if (!line) continue
13 | const [name, names, exts] = line.split(colSeparator)
14 | if (names) {
15 | for (const filename of names.split(arraySeparator)) {
16 | if (!filename) continue
17 | filenameIndex.set(filename, name)
18 | }
19 | }
20 | if (exts) {
21 | for (const ext of exts.split(arraySeparator)) {
22 | if (!ext) continue
23 | fileExtensionIndex.set(ext, name)
24 | }
25 | }
26 | }
27 | return {
28 | filenameIndex,
29 | fileExtensionIndex,
30 | }
31 | }
32 |
33 | function parseFolderIconMapCSV() {
34 | const folderNameIndex = new Map()
35 | for (const line of rawFolderIconIndex.split(rowSeparator)) {
36 | if (!line) continue
37 | const [name, names] = line.split(colSeparator)
38 | for (const folderName of names.split(arraySeparator)) {
39 | if (!folderName) continue
40 | folderNameIndex.set(folderName, name)
41 | }
42 | }
43 | return {
44 | folderNameIndex,
45 | }
46 | }
47 |
48 | const { folderNameIndex } = parseFolderIconMapCSV()
49 |
50 | export function getFolderIconURL(node: TreeNode, open: boolean) {
51 | const name = folderNameIndex.get(node.name.toLowerCase())
52 | return getIconURL('folder', name, open)
53 | }
54 |
55 | const { filenameIndex, fileExtensionIndex } = parseFileIconMapCSV()
56 |
57 | export function getFileIconURL(node: TreeNode) {
58 | const fileName = node.name.toLowerCase()
59 | let iconName = filenameIndex.get(fileName)
60 | if (!iconName) {
61 | const tail = fileName.split('.')
62 | while (!iconName && tail.length > 0) {
63 | iconName = fileExtensionIndex.get(tail.join('.'))
64 | tail.shift()
65 | }
66 | }
67 | return getIconURL('file', iconName)
68 | }
69 |
70 | // memorize for
71 | // 1. swap time with space
72 | // 2. prevent app crash on when extension context invalidates
73 | const extensionURL = browser.runtime.getURL('').replace(/\/$/, '')
74 | export function getIconURL(type: 'folder' | 'file', name = 'default', open?: boolean) {
75 | const filename =
76 | (name === 'default' ? 'default_' + type : type + '_type_' + name) +
77 | (open ? '_opened' : '') +
78 | '.svg'
79 | return extensionURL + `/icons/vscode/${filename}`
80 | }
81 |
--------------------------------------------------------------------------------
/src/utils/storageHelper.ts:
--------------------------------------------------------------------------------
1 | const localStorage = browser.storage.local
2 |
3 | const keys = {
4 | configVersion: 'configVersion',
5 | raiseErrorCache: 'raiseErrorCache',
6 | } as const
7 |
8 | export const storageKeys = keys
9 |
10 | export type Storage = {
11 | // save root level keys for easier future migrating
12 | [key in EnumString]: string
13 |
14 | // separate different platform configs to simplify interactions with browser storage API
15 | // e.g.
16 | // ['platform_github.com']?: Config
17 | }
18 |
19 | async function get(mapping: string | string[] | null = null) {
20 | return (await localStorage.get(mapping || undefined)) as T | undefined
21 | }
22 |
23 | function set>(value: T): Promise | void {
24 | return localStorage.set(value)
25 | }
26 |
27 | export const storageHelper = { get, set }
28 |
--------------------------------------------------------------------------------
/src/utils/treeParser.ts:
--------------------------------------------------------------------------------
1 | const isFolder = (node: TreeNode) => node.type === 'tree'
2 | const isNotFolder = (node: TreeNode) => node.type !== 'tree'
3 |
4 | export function sortFoldersToFront(root: TreeNode) {
5 | const nodes = root.contents
6 | if (nodes) {
7 | nodes.splice(0, Infinity, ...nodes.filter(isFolder), ...nodes.filter(isNotFolder))
8 | nodes.forEach(sortFoldersToFront)
9 | }
10 | }
11 |
12 | export function findGitModules(root: TreeNode) {
13 | if (root.contents) {
14 | const modulesFile = root.contents.find(content => content.name === '.gitmodules')
15 | if (modulesFile) {
16 | return modulesFile
17 | }
18 | }
19 | return null
20 | }
21 |
--------------------------------------------------------------------------------
/src/utils/waitForNextEvent.ts:
--------------------------------------------------------------------------------
1 | export const waitForNextDocumentEvent = (
2 | type: EnumString,
3 | options?: boolean | AddEventListenerOptions,
4 | ) =>
5 | new Promise(resolve => {
6 | const listener = (ev: DocumentEventMap[K] | Event) => {
7 | document.removeEventListener(type, listener, options)
8 | resolve(ev)
9 | }
10 | document.addEventListener(type, listener, options)
11 | })
12 |
13 | export const waitForNextWindowEvent = (
14 | type: EnumString,
15 | options?: boolean | AddEventListenerOptions,
16 | ) =>
17 | new Promise(resolve => {
18 | const listener = (ev: WindowEventMap[K] | Event) => {
19 | window.removeEventListener(type, listener, options)
20 | resolve(ev)
21 | }
22 | window.addEventListener(type, listener, options)
23 | })
24 |
25 | export const waitForNext = {
26 | documentEvent: waitForNextDocumentEvent,
27 | windowEvent: waitForNextWindowEvent,
28 | }
29 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "ts-node": {
3 | "files": true,
4 | "compilerOptions": {
5 | "module": "CommonJS"
6 | }
7 | },
8 | "compilerOptions": {
9 | "moduleResolution": "Node",
10 | "module": "ESNext",
11 | "target": "ESNext",
12 | "jsx": "react",
13 | "strict": true,
14 | "lib": ["dom", "es2017.object", "es2016", "ES2019.Array", "ES2020.String", "ES2022.Error"],
15 | "baseUrl": "src",
16 | "resolveJsonModule": true,
17 | "allowSyntheticDefaultImports": true,
18 | "outDir": "dist"
19 | },
20 | "include": ["src"]
21 | }
22 |
--------------------------------------------------------------------------------
5 | 
25 | 
26 | 
27 |
28 | It is more recommended for Edge users to install from Chrome store. It may delay for weeks before updates got published to Edge store because its review process is slow.
29 |
30 | ### Help Gitako
31 |
32 | Gitako is **FREE**. If you like it, please
33 |
34 | - ⭐️ Star it at GitHub
35 | - 👍 Review in the extension store
36 |
37 | [Feature discussions](https://github.com/EnixCoda/Gitako/discussions) and [bug reports](https://github.com/EnixCoda/Gitako/issues/) are also welcome!
38 |
39 | Check out [contributing.md](./contributing.md) if you want to contribute to Gitako directly.
40 |
41 | ### About
42 |
43 | #### Source of the name and logo?
44 |
45 | The totem of GitHub is a cute octopus. And octopus in Japanese is `タコ`(tako).
46 | Then concat them together:
47 |
48 | git + tako -> gitako
49 |
50 | The logo of Gitako is a tentacle of octopus, indicates that Gitako works like a part of GitHub.
51 |
--------------------------------------------------------------------------------
/Safari/.gitignore:
--------------------------------------------------------------------------------
1 | # Xcode
2 | #
3 | # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore
4 |
5 | ## User settings
6 | xcuserdata/
7 |
8 | ## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9)
9 | *.xcscmblueprint
10 | *.xccheckout
11 |
12 | ## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4)
13 | build/
14 | DerivedData/
15 | *.moved-aside
16 | *.pbxuser
17 | !default.pbxuser
18 | *.mode1v3
19 | !default.mode1v3
20 | *.mode2v3
21 | !default.mode2v3
22 | *.perspectivev3
23 | !default.perspectivev3
24 |
25 | ## Gcc Patch
26 | /*.gcno
27 |
28 | Resources
29 |
--------------------------------------------------------------------------------
/Safari/Gitako/Gitako Extension/Gitako_Extension.entitlements:
--------------------------------------------------------------------------------
1 |
2 |
3 |