feat(demo): adopt xterm-search-addon new API (d10606a8) · Commits · e / tools / webadb

apps/book/package.json

+5 −5

Original line number	Diff line number	Diff line
		@@ -15,9 +15,9 @@
		"write-heading-ids": "docusaurus write-heading-ids"
		},
		"dependencies": {
		"@docusaurus/core": "^2.0.0-beta.18",
		"@docusaurus/preset-classic": "^2.0.0-beta.18",
		"@mdx-js/react": "^1.6.21",
		"@docusaurus/core": "^2.0.0-beta.21",
		"@docusaurus/preset-classic": "^2.0.0-beta.21",
		"@mdx-js/react": "^2.1.2",
		"@svgr/webpack": "^6.2.1",
		"clsx": "^1.1.1",
		"file-loader": "^6.2.0",
		@@ -40,7 +40,7 @@
		"devDependencies": {
		"plantuml-encoder": "^1.4.0",
		"mini-svg-data-uri": "^1.3.3",
		"node-fetch": "^2.6.1",
		"unist-util-visit": "^2.0.0"
		"node-fetch": "^3.2.6",
		"unist-util-visit": "^2.0.3"
		}
		}

apps/demo/next.config.js

+1 −8

Original line number	Diff line number	Diff line
		@@ -3,14 +3,7 @@ const withMDX = require('@next/mdx')({
		options: {
		// Disable MDX createElement hack
		// because we don't need rendering custom elements
		renderer: `
		import React from 'react';
		const mdx = (name, props, ...children) => {
		if (name === 'inlineCode') { name = 'code'; }
		delete props?.parentName;
		return React.createElement(name, props, ...children);
		}
		`,
		jsx: true,
		},
		});

apps/demo/package.json

+11 −11

Original line number	Diff line number	Diff line
		@@ -29,23 +29,23 @@
		"@yume-chan/stream-extra": "^0.0.16",
		"@yume-chan/stream-saver": "^2.0.6",
		"@yume-chan/struct": "^0.0.16",
		"mobx": "^6.5.0",
		"mobx": "^6.6.1",
		"mobx-react-lite": "^3.4.0",
		"next": "12.1.6",
		"next": "12.2.0",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"xterm": "^4.18.0",
		"xterm": "^4.19.0",
		"xterm-addon-fit": "^0.5.0",
		"xterm-addon-search": "^0.8.2",
		"xterm-addon-webgl": "^0.11.4"
		"xterm-addon-search": "^0.9.0",
		"xterm-addon-webgl": "^0.12.0"
		},
		"devDependencies": {
		"@mdx-js/loader": "^1.6.22",
		"@next/mdx": "^11.1.2",
		"@mdx-js/loader": "^2.1.2",
		"@next/mdx": "^12.2.0",
		"@types/react": "17.0.27",
		"eslint": "8.8.0",
		"eslint-config-next": "12.1.6",
		"source-map-loader": "^3.0.1",
		"typescript": "^4.7.3"
		"eslint": "8.19.0",
		"eslint-config-next": "12.2.0",
		"source-map-loader": "^4.0.0",
		"typescript": "^4.7.4"
		}
		}

apps/demo/src/pages/index.mdx

+2 −2

Original line number	Diff line number	Diff line
		@@ -3,9 +3,9 @@ import Head from 'next/head';
		import { ExternalLink } from '../components';
		import { RouteStackProps } from "../utils";

		<!--
		{/*
		cspell: ignore cybojenix
		-->
		*/}

		This is a demo for my <ExternalLink href="https://github.com/yume-chan/ya-webadb/">ya-webadb</ExternalLink> project, which can use ADB protocol to control Android phones, directly from Web browsers (or Node.js).

apps/demo/src/pages/shell.tsx

+59 −8

Original line number	Diff line number	Diff line
		import { IconButton, SearchBox, Stack, StackItem } from '@fluentui/react';
		import { action, autorun, makeAutoObservable } from "mobx";
		import { makeStyles, shorthands } from '@griffel/react';
		import { action, autorun, makeAutoObservable, runInAction } from "mobx";
		import { observer } from "mobx-react-lite";
		import { NextPage } from "next";
		import Head from "next/head";
		import { useCallback, useEffect } from 'react';
		import { ISearchOptions } from 'xterm-addon-search';
		import 'xterm/css/xterm.css';
		import { ResizeObserver } from '../components';
		import { GlobalState } from "../state";
		import { Icons, RouteStackProps } from '../utils';

		let terminal: import('../components/terminal').AdbTerminal;
		const useClasses = makeStyles({
		count: {
		...shorthands.padding('0', '8px'),
		}
		});

		let terminal: import('../components/terminal').AdbTerminal \| undefined;
		if (typeof window !== 'undefined') {
		const { AdbTerminal } = require('../components/terminal');
		terminal = new AdbTerminal();
		}

		const SEARCH_OPTIONS: ISearchOptions = {
		decorations: {
		matchBackground: '#232422',
		matchBorder: '#555753',
		matchOverviewRuler: '#555753',
		activeMatchBackground: '#ef2929',
		activeMatchBorder: '#ffffff',
		activeMatchColorOverviewRuler: '#ef2929'
		}
		};

		const state = makeAutoObservable({
		visible: false,
		index: undefined as number \| undefined,
		count: undefined as number \| undefined,
		setVisible(value: boolean) {
		this.visible = value;
		},
		@@ -24,20 +45,39 @@ const state = makeAutoObservable({
		searchKeyword: '',
		setSearchKeyword(value: string) {
		this.searchKeyword = value;
		terminal.searchAddon.findNext(value, { incremental: true });
		terminal!.searchAddon.findNext(value, {
		...SEARCH_OPTIONS,
		incremental: true,
		});
		},

		searchPrevious() {
		terminal.searchAddon.findPrevious(this.searchKeyword);
		terminal!.searchAddon.findPrevious(this.searchKeyword, SEARCH_OPTIONS);
		},
		searchNext() {
		terminal.searchAddon.findNext(this.searchKeyword);
		terminal!.searchAddon.findNext(this.searchKeyword, SEARCH_OPTIONS);
		}
		}, {
		searchPrevious: action.bound,
		searchNext: action.bound,
		});

		if (terminal) {
		terminal.searchAddon.onDidChangeResults((e) => {
		console.log(e);

		runInAction(() => {
		if (e) {
		state.index = e.resultIndex;
		state.count = e.resultCount;
		} else {
		state.index = undefined;
		state.count = undefined;
		}
		});
		});
		}

		autorun(() => {
		if (!terminal) {
		return;
		@@ -51,7 +91,7 @@ autorun(() => {
		if (!terminal.socket && state.visible) {
		GlobalState.device.subprocess.shell()
		.then(action(shell => {
		terminal.socket = shell;
		terminal!.socket = shell;
		}), (e) => {
		GlobalState.showErrorDialog(e);
		});
		@@ -62,17 +102,19 @@ const UpIconProps = { iconName: Icons.ChevronUp };
		const DownIconProps = { iconName: Icons.ChevronDown };

		const Shell: NextPage = (): JSX.Element \| null => {
		const classes = useClasses();

		const handleSearchKeywordChange = useCallback((e, value?: string) => {
		state.setSearchKeyword(value ?? '');
		}, []);

		const handleResize = useCallback(() => {
		terminal.fit();
		terminal!.fit();
		}, []);

		const handleContainerRef = useCallback((container: HTMLDivElement \| null) => {
		if (container) {
		terminal.setContainer(container);
		terminal!.setContainer(container);
		}
		}, []);

		@@ -99,6 +141,15 @@ const Shell: NextPage = (): JSX.Element \| null => {
		onSearch={state.searchNext}
		/>
		</StackItem>
		{state.count === 0 ? (
		<StackItem className={classes.count} align="center">
		No results
		</StackItem>
		) : state.count !== undefined ? (
		<StackItem className={classes.count} align='center'>
		{state.index! + 1} of {state.count}
		</StackItem>
		) : null}
		<StackItem>
		<IconButton
		disabled={!state.searchKeyword}