Asearchの挙動テスト

2022-01-23

14:55:54 終了

https://gyazo.com/2b5b2bd701a43e3d5aa39e0ceac19f73

14:26:36 直った

14:21:01 何故かtype errorがでる

別のシステムでbundleして試す

code:index.ts

import { mount } from "./App.tsx";

mount();

code:App.tsx

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

/// <reference lib="dom" />

/** @jsx h */

/** @jsxFrag Fragment */

import {

useCallback,

useMemo,

useState,

let remove: () => void;

// node-asearch用

/*function match(pattern: string, candidate: string) {

const test = nodeAsearch(pattern);

if (!test(candidate, 3)) return { found: false };

return !test(candidate, 2) ? { found: true, distance: 3 }

: !test(candidate, 1) ? { found: true, distance: 2 }

: !test(candidate, 0) ? { found: true, distance: 1 }

: { found: true, distance: 0 };

}*/

function App() {

const result = useMemo(() => Asearch(pattern).match(candidate), [

// node-asearch用

// const result = useMemo(() => match(pattern, candidate), [

pattern,

candidate,

]);

const handlePattern = useCallback(

(e: h.JSX.TargetedEvent<HTMLInputElement>) =>

setPattern(e.currentTarget.value),

[],

);

const handleCandidate = useCallback(

(e: h.JSX.TargetedEvent<HTMLInputElement>) =>

setCandidate(e.currentTarget.value),

[],

);

return (

<>

<style>

{`

:host {

position: fixed;

top: 60px;

left: 50%;

code:App.tsx

transform: translate(-50%, 0);

padding: 5px;

border: 1px solid lime;

border-radius: 5px;

font-size: 14px;

background-color: var(--page-bg);

color: var(--page-text-color);

}

input {

min-width: 40%;

}

button {

position: absolute;

top: 0px;

right: 0px;

}

`}

</style>

<button onClick={remove}>x</button>

<p>

<label>

pattern: <input type="text" value={pattern} onInput={handlePattern} />

</label>

</p>

<p>

<label>

candidate: <input type="text" value={candidate} onInput={handleCandidate} />

</label>

</p>

<p>

</p>

</>

);

}

export function mount() {

const app = document.createElement("div");

const shadowRoot = app.attachShadow({ mode: "open" });

document.body.append(app);

remove = () => app.remove();

render(<App />, shadowRoot);

}