SolidJS Dev-Tools 로케이터 기능 사용

제 글에서는 SolidJS Dev-Tools를 시작하고 응용 프로그램과 함께 실행하는 방법을 살펴보았습니다. 반응성 그래프를 디버그할 수 있는 디버그 기능과 프레임워크 내에서 보다 구체적인 이벤트(예: 효과 재실행 등)를 기록할 수 있는 로거도 다루었습니다.

이 게시물에서는 "페이지에서 구성 요소를 찾고 IDE에서 해당 소스 코드로 이동"할 수 있는 기능Locator에 대해 자세히 살펴보겠습니다.

Babel 변환 플러그인

그 전에 이전에 저를 괴롭혔던 문제를 해결하고 로케이터가 작동하도록 하는 인에이블러 역할도 하고 ​​싶습니다. 디버거를 열 때 신호에 "s606947053"과 같은 "이상한"이름이 많이 있었습니다.



(dev-tools 프로젝트의 관리자)가 나에게 언급했듯이 나중에 디버거에서 파싱할 수 있도록 주어진 이름을 추출하는 Babel 플러그인과 관련된 솔루션이 있습니다. 한번 해보자 -

docs 다음에 Babel 플러그인을 설치합니다.
yarn add -D @solid-devtools/transform
(개발 종속성으로 설치한다는 점에 유의하십시오.)

다음으로 다음과 같이 프로젝트의 vite 구성에 필요한 구성을 추가합니다.

import {defineConfig} from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtoolsPlugin from '@solid-devtools/transform';

export default defineConfig({
   plugins: [
       devtoolsPlugin({
           jsxLocation: true,
           name: true,
       }),
       solidPlugin(),
   ],
   build: {
       target: 'esnext',
       polyfillDynamicImport: false,
   },
});

여기에 상점이 없기 때문에 "wrapStores"옵션을 사용하지 않고 jsxLocation 및 name 만 사용합니다. 응용 프로그램을 새로 고치면 신호 이름을 볼 수 있습니다.



네, 여기 "cursor"와 bufferGap"이 있습니다. 노이스.
로케이터 기능으로 이동…

로케이터

신호에 대한 더 나은 이름을 얻었으므로 이제 Locator 기능을 확인해야 합니다.
앞에서 언급했듯이 jsxLocation가 활성화된 babel 변환 플러그인 세트가 있어야 합니다.

docs은 "몇 가지 옵션과 함께 useLocatorPlugin을 호출하여 구성"이라고 말합니다. 이는 훌륭하지만 질문이 남아 있습니다. 어디에?!
내가 생각하기에 가장 합리적이라고 생각하는 프로젝트의 진입점으로 가겠습니다. 이제 다음과 같이 보입니다.

import 'solid-devtools';
import {render} from 'solid-js/web';

import './index.css';
import App from './App';
import {useLocatorPlugin} from 'solid-devtools';

useLocatorPlugin({
   key: "shiftKey"
   targetIDE: 'vscode',
});

render(() => <App />, document.getElementById('root'));

새로고침한 후 Shift 키를 누르고 있으면 관련 구성요소에 마우스를 올려놓은 것이 보입니다.



좋습니다. BOOM!을 클릭하면 강조 표시된 구성 요소의 올바른 위치에서 내 VSCode IDE가 열립니다.
페이지의 요소를 열고 검사하면 각 관련 항목에 소스 코드의 파일 경로, 줄 및 열을 포함하는 속성data-source-loc이 있음을 알 수 있습니다.



달콤한 :)

개발자 모드

프로덕션이 아닌 기능을 개발할 때만 실행되는 로케이터와 같은 것을 원할 것입니다. Solid에는 쿼리하고 그에 따라 결정을 내릴 수 있는 좋은“DEV” feature이 있습니다.
dev에서만 Locator 플러그인을 사용하려면 다음과 같이 해야 합니다.

import 'solid-devtools';
import {render} from 'solid-js/web';
import {useLocatorPlugin} from 'solid-devtools';
import {DEV} from 'solid-js';
import {isServer} from 'solid-js/web';
import './index.css';
import App from './App';

if (DEV && !isServer) {
   console.log('In DEV mode');
   useLocatorPlugin({
       targetIDE: 'vscode',
   });
}

render(() => <App />, document.getElementById('root'));

마무리

음... 로케이터를 사용하면 구성 요소를 빠르게 탐색할 수 있습니다. 거기에 콜백이 있고 주어진 인수로 원하는 것은 무엇이든 할 수 있습니다. 그 외에도 호버링할 때 브라우저에서 구성 요소 실제 이름을 보는 것만으로도 빠르게 시작할 수 있습니다.
코드는 this GitHub repo에서 찾을 수 있습니다.

언제나처럼 의견이나 질문이 있으시면 아래 의견에 남겨주십시오.

여기요! 방금 읽은 내용이 마음에 들면 Twitter 🍻에서 확인하세요.

사진 제공: Andres Siimon on Unsplash