import('/api/code/programming-notes/scrapbox-incremental-fulltext-search/sample.js');

deno run --allow-net --allow-read --allow-write --allow-run --allow-env --unstable https://scrapbox.io/api/code/takker/UserScriptをbundleするDeno_script/build.ts https://scrapbox.io/api/code/programming-notes/scrapbox-incremental-fulltext-search/sample.js --bundle --minify --outfile=script.min.js

deno run --allow-net --allow-read --allow-write --allow-run --allow-env --unstable https://scrapbox.io/api/code/takker/UserScriptをbundleするDeno_script/build.ts https://scrapbox.io/api/code/programming-notes/scrapbox-incremental-fulltext-search/sample.js --bundle --minify --outfile=script.min.js --external=../htm@3.0.4%2Fpreact/script.js --external=../preact@10.5.13/hooks.js

{ "name": "UpdatingSearchServerError", "message": "Updating search server. Please try again later." }

import {mount} from './script.js'; import {getProjectInfo} from '../scrapboxのproject情報を一括して取得するUserScript/script.js'; (async () => { // watch listからもとってくる const watchListIds = Object.keys(JSON.parse(localStorage.getItem('projectsLastAccessed'))); const watchList = [...await getProjectInfo(watchListIds)] .map(({id, name, displayName}) => ({id, name, displayName})) .sort((a, b) => a.displayName.localeCompare(b.displayName)); mount(watchList); })();

import {html, render} from '../htm@3.0.4%2Fpreact/script.js'; import {throttle} from '../custom-throttle/script.js'; import {FuzzySelect} from '../fuzzy-select-menu@0.1.0/script.js'; import {useState, useMemo, useEffect} from '../preact@10.5.13/hooks.js'; import {useLoader} from '../use-loader/script.js'; import {Background, CSS as BackgroundCSS} from '../modal-background@0.1.0/script.js'; import {ProjectSelector} from './selector.js'; import {ErrorMsg, CSS as ErrorCSS} from './error.js'; import {toLc} from '../scrapbox-titleLc/script.js'; const App = ({watchList}) => { const [open, setOpen] = useState(false); const [project, setProject] = useState(scrapbox.Project.name); const [query, setQuery] = useState(''); const [disabled, setDisabled] = useState(true); // ボタンの状態から、横断検索の開始を判定する const queryForProject = useMemo(() => disabled ? query : '', [disabled, query]); const [includeWatchList, setIncludeWatchList] = useState(false); const {loading, items} = useSearch({project, query}); // 全文検索する const {searching, error, projects} = useProjectSearch({ // projectを横断検索する query: queryForProject, watchList: watchList, includeWatchList, }); // FuzzySelect用にデータを加工する const list = useMemo(() => projects.map(({id, name, displayName}) => ({key: name, text: displayName})), [projects]); // 横断検索のAPI limitに引っかかっているときはボタンを無効化する useEffect(() => error && setDisabled(true), [error]); // 入力欄の値を反映する const onProjectChange = ({key}) => setProject(key); const onInput = ({target: {value}}) => { setDisabled(false); setQuery(value); }; // componentを閉じる const close = () => setOpen(false); const handleKeydown = ({key}) => { if (key !== 'Escape') return; close(); } const onClick = ({ctrlKey, shiftKey, altKey, metaKey, target}) => { if (target.target === '_blank' || ctrlKey || shiftKey || altKey || metaKey) return; close(); }; // project横断検索を開始する const onFilter = () => { setDisabled(true); } // Page Menuから操作する useEffect(() => scrapbox.PageMenu.addItem({ title: 'Fulltext Search', image: 'https://raw.githubusercontent.com/nota/kamon/master/svg/search.svg', onClick: () => setOpen(true), }), []); return open && html` <${Background} onClose="${close}"/> <div class="container" onKeydownCapture="${handleKeydown}"> <div class="search-form"> <${FuzzySelect} list="${list}" convert="${({key, text}) => `${key} ${text}`}" onSelect="${onProjectChange}" /> <input type="text" value="${query}" onInput="${onInput}" /> <button type="button" onClick="${onFilter}" disabled="${disabled}"> ${disabled ? `${searching ? 'Searching...: ' : ''}Found ${projects.length} projects` : 'Search for all projects' } </button> <input type="checkbox" value="${!includeWatchList}" onChange="${({target}) => setIncludeWatchList(target.value)}" /> <label>Search besides watch list</label> <span class="info"> ${loading ? `Searching for ${query}...` : `${items.length} results`} </span> <${ErrorMsg} error="${error}" /> </div> ${items.length > 0 && html` <ul class="dropdown"> ${items.map(item => html`<li key="${item.title}"> <a href="/${item.project}/${toLc(item.title)}" target="${item.project === scrapbox.Project.name ? '' : '_blank'}" rel="${item.project === scrapbox.Project.name ? 'route' : 'noopener noreferrer'}" onClick="${onClick}"> ${item.title} <div class="description"> ${item.lines.map(line => html`<span>${line}</span>`)} </div> </a> </li>`)} </ul> `} </div>`; };

function useSearch({project, query}) { const [items, setItems] = useState([]); const search = useMemo(() => throttle(async (_project, _query) => { if (_query === '' || _project === '') { setItems([]); return; } try { const res = await fetch(`/api/pages/${_project}/search/query?q=${encodeURIComponent(_query)}`); const {pages} = await res.json(); setItems(pages.map(({title, words, lines}) => ({project: _project, title, words, lines}))); } catch(e) { console.error(e); setItems([]); } }, 500, {immediate: false}), []); const {loading} = useLoader( async () => await search(project, query), {delay: 1500}, [search, project, query] ); return {loading, items}; }

function useProjectSearch({query, watchList: _watchList, includeWatchList}) { const [joinedList, setJoinedList] = useState([]); // 参加しているprojectのlist const watchList = useMemo(() => { // watchListから参加しているprojectを予め除いておく const ids = joinedList.map(({id}) => id); return _watchList.filter(({id}) => !ids.some(_id => _id === id)); }, [joinedList, _watchList]); const [projects, setProjects] = useState([]); // 検索結果 const [searching, setSearching] = useState(false); // 検索中かどうか const [error, setError] = useState(undefined); // project listを初期化する useEffect(() => (async () => { // 参加しているprojectを取得する const res = await fetch('/api/projects'); if (!res.ok) return []; const json = await res.json(); setJoinedList(json.projects?.map?. (({id, name, displayName}) => ({id, name, displayName})) ?? []); })(), []); // projectを横断検索する useEffect(() => (async () => { setError(undefined); // 検索語句が空なら、defaultのproject listを返す if (query === '') { setProjects([...joinedList, ...watchList]); return; } setSearching(true); setProjects([]); // 一旦クリア try { // 参加しているprojectから検索する { const res = await fetch(`/api/projects/search/query?q=${query}`); const json = await res.json(); if (!res.ok) throw Error(json.message); setProjects(json.projects); } // watch listから検索する if (includeWatchList) { // 100件ずつ検索する const chunkNum = Math.floor(watchList.length / 100) + 1; for (let index = 0; index < chunkNum; index++) { const params = new URLSearchParams(); params.append('q', query); watchList.slice(index * 100, 100 + index * 100) .forEach(({id}) => params.append('ids', id)); const res = await fetch(`/api/projects/search/watch-list?${params.toString()}`); const json = await res.json(); if (!res.ok) throw Error(json.message); setProjects(before => [...before, ...json.projects]); } } } catch(e) { setError(e.toString()); } finally { setSearching(false); } })(), [query, watchList, joinedList, includeWatchList], ); return {searching, error, projects}; }

const CSS = ` :host { --dropdown-text-color: var(--incremental-fulltext-search-text-color, #333); --dropdown-bg: var(--incremental-fulltext-search-result-bg, #fff); --dropdown-border-color: var(--body-bg, rgba(0,0,0,0.15)); --dropdown-shadow-color: rgba(0,0,0,0.175); --dropdown-item-hover-text-color: var(--incremental-fulltext-search-hover-text-color, #333); --dropdown-item-hover-bg: var(--incremental-fulltext-search-result-hover-bg, #f5f5f5); --dropdown-item-select-border-color: #66afe999; } .container { display: block; position: fixed; width: calc(100% - 20px); top: 5vh; left: 10px; color: var(--incremental-fulltext-search-text-color, #4a4a4a); z-index: 90000; } span { margin-right: .5em; } .search-form { width: inherit; border-radius: 5px; padding: 0 10px; border: transparent; box-shadow: none; font-size: 14px; color: var(--search-form-text-color, rgba(255,255,255,0.35)); background-color: var(--search-form-bg, rgba(255,255,255,0.15)); } .info { display: block; } .dropdown { max-height: 80vh; flex-direction: column; width: 100%; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; font-weight: normal; line-height: 28px; text-align: left; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; background-clip: padding-box; background-color: var(--incremental-fulltext-search-result-bg, #fefefe); white-space: nowrap; overflow-x: hidden; overflow-y: auto; text-overflow: ellipsis; } a { display: block; padding: 3px 20px; clear: both; align-items: center; font-weight:normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; text-overflow: ellipsis; color: var(--incremental-fulltext-search-text-color, #262626); background-color: var(--incremental-fulltext-search-result-bg, #f5f5f5); } a:hover { text-decoration: none; color: var(--incremental-fulltext-search-hover-text-color, #262626); background-color: var(--incremental-fulltext-search-result-hover-bg, #f5f5f5); } a:focus { color: var(--incremental-fulltext-search-hover-text-color, #262626); background-color: var(--incremental-fulltext-search-result-hover-bg, #f5f5f5); outline: 0; box-shadow: 0 0px 0px 3px rgba(102,175,233,0.6); border-color: #66afe9; transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s; } .description { display: block; margin-top: 0.5em; color: var(--incremental-fulltext-search-description-text-color, gray); font-size: 12px; line-height: 14px; max-height: 28px; overflow: hidden; text-overflow: ellipsis; } ${BackgroundCSS} ${ErrorCSS} `;

export function mount(watchList) { const app = document.createElement('div'); app.dataset.userscriptName = 'incremental-fulltext-search-form'; app.attachShadow({mode: 'open'}); document.body.append(app); render(html` <style> :host { --incremental-fulltext-search-text-color: var(--page-text-color, #4a4a4a); --incremental-fulltext-search-hover-text-color: var(--page-text-color, #4a4a4a); --incremental-fulltext-search-description-text-color: var(--card-description-color, gray); --incremental-fulltext-search-result-bg: var(--page-bg, #fefefe); --incremental-fulltext-search-result-hover-bg: var(--card-hover-bg, #f5f5f5); } ${CSS} </style> <${App} watchList="${watchList}"/> `, app.shadowRoot); }

import {html} from '../htm@3.0.4%2Fpreact/script.js'; import {useRef, useCallback} from '../preact@10.5.13/hooks.js'; export const ProjectSelector = ({projects, selectedProject, onSelect}) => { const ref = useRef(null); const handleWheel = useCallback(e => { e.preventDefault(); e.stopPropagation(); ref.current.selectedIndex = e.deltaY < 0 ? Math.max(ref.current.selectedIndex - 1, 0) : Math.min(ref.current.selectedIndex + 1, ref.current.length); onSelect?.(ref.current.value); }, []); return html` <select ref="${ref}" value="${selectedProject}" onChange="${({target: {value}}) => onSelect(value)}" onWheel="${handleWheel}"> ${projects.map(project => html`<option key="${project.id}" value="${project.name}">${project.displayName}</option>`)} </select> `; };

import {html} from '../htm@3.0.4%2Fpreact/script.js'; export const ErrorMsg = ({error}) => error && html` <div class="error">${error}</div> `; export const CSS = ` .error { display: block; padding: 15px; margin: 20px; text-align: center; border: 1px solid #ebccd1; background-color: #f2dede; color: #a94442; } .error::before { font: normal normal normal 14px/1 FontAwesome; content: '\f071'; margin-right: .3em; } `;

import {useState, useMemo, useEffect} from '../preact@10.5.13/hooks.js'; export const Description = ({text, words}) => { const = useMemo(() => {}, [text, words]); }