@ twind/wmr - WMR utilizing @ twind/preact

Intro

휴일에는 누워서 핸드폰을 만지작거리다가 1년 전 살짝 화제가 됐던 트윈드라는 경량판 테일윈드를 그냥 놔뒀는데 마침 1년이 지나 조금 해보고 싶어 무거운 허리를 들어 흔들었다.
https://github.com/tw-in-js/twind
Twind는 CSS-in-JS에서 CSS를 진행하는 프로그램 라이브러리와 도구를 Template Literal로 생성한 클래스의 API, SSR을 위한 CSS 파일 제작, Tailwind 클래스를 이용한 shim 라이브러리 구축 없음 등을 제공한다.
https://b.hatena.ne.jp/entry/s/github.com/tw-in-js/twind
그런 일은 손 옆에 있는 책갈피에 쓰여 있다.고마워요
계속 해.
2022/01/08twind@next v1 개발 중[email protected].

Start

트윈드는 프로젝트와 사상이 비슷해 프로젝트와 함께 사용하기로 했다.
트윈드가 발표된 tw-in-js의 창고를 살펴보면 WMR을 사용한 샘플이 있어 WMR과 함께 사용할 수 있는 포장@twind/wmr을 도입했다.
https://github.com/tw-in-js/use-twind-with/tree/main/packages/wmr
다만 README.md보니 이상한 문서만 적혀 있었고, 코드샌드박스에서 작동하는 샘플에도 WMR을 사용한 보일러 패널이 없었으니 WMR의 보일러 패널에 코드샌드박스 코드를 우선 이식하는 보일러 패널을 만들자.
https://gitlab.com/tkithrta/tw
했어.
설명은 번거로우니 나중에 diff 파일을 사용하세요.

$ npm init wmr tw
$ cd tw

우선 WMR 보일러 보드로 프로젝트를 제작한다.
중간에create-wmr를 사용하는지 물어볼 테니 y를 입력하거나 파이프를 통해 yes 명령을 전달하고 '예' 를 선택하십시오.

diff -ur -x package-lock.json -x node_modules wmr/package.json tw/package.json
--- wmr/package.json	2022-01-16 13:21:03.550069105 +0000
+++ tw/package.json	2022-01-16 12:24:55.000000000 +0000
@@ -1,16 +1,30 @@
 {
+	"name": "tw",
+	"version": "1.0.0",
 	"private": true,
+	"description": "Preact, Twind, WMR",
+	"main": "public/index.js",
 	"scripts": {
 		"start": "wmr",
 		"build": "wmr build --prerender",
-		"serve": "wmr serve"
+		"serve": "wmr serve",
+		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"eslintConfig": {
 		"extends": "preact"
 	},
+	"keywords": [
+		"preact",
+		"twind",
+		"wmr"
+	],
+	"author": "黒ヰ樹",
+	"license": "MIT",
 	"dependencies": {
+		"@twind/wmr": "^1.0.9",
 		"preact": "^10.6.4",
-		"preact-iso": "^2.3.0"
+		"preact-iso": "^2.3.0",
+		"twind": "^0.16.16"
 	},
 	"devDependencies": {
 		"wmr": "^3.7.2"

package.json에 필요한 최소한의 정보를 추가한다.

$ npm i
$ mkdir public/pages/twind
$ touch public/pages/twind/index.js

트윈드 관련 포장이 추가됐다.
트윈드 관련 페이지도 미리 제작한다.

diff -ur -x package-lock.json -x node_modules wmr/public/header.js tw/public/header.js
--- wmr/public/header.js	2022-01-16 13:21:02.369964304 +0000
+++ tw/public/header.js	2022-01-16 11:58:27.000000000 +0000
@@ -7,6 +7,7 @@
 			<nav>
 				<a href="/">Home</a>
 				<a href="/about">About</a>
+				<a href="/twind">Twind</a>
 				<a href="/error">Error</a>
 			</nav>
 			<label>
diff -ur -x package-lock.json -x node_modules wmr/public/index.js tw/public/index.js

먼저 머리글에 Twind 페이지의 링크를 생성합니다.

diff -ur -x package-lock.json -x node_modules wmr/public/index.js tw/public/index.js
--- wmr/public/index.js	2022-01-16 13:21:02.369964304 +0000
+++ tw/public/index.js	2022-01-16 13:24:57.694862846 +0000
@@ -1,9 +1,11 @@
-import { LocationProvider, Router, Route, lazy, ErrorBoundary, hydrate, prerender as ssr } from 'preact-iso';
+import { ErrorBoundary, LocationProvider, Route, Router, lazy } from 'preact-iso';
+import withTwind from "@twind/wmr";
 import Home from './pages/home/index.js';
 import NotFound from './pages/_404.js';
 import Header from './header.js';
 
 const About = lazy(() => import('./pages/about/index.js'));
+const Twind = lazy(() => import('./pages/twind/index.js'));
 
 export function App() {
 	return (
@@ -14,6 +16,7 @@
 					<Router>
 						<Route path="/" component={Home} />
 						<Route path="/about" component={About} />
+						<Route path="/twind" component={Twind} />
 						<Route default component={NotFound} />
 					</Router>
 				</ErrorBoundary>
@@ -22,8 +25,8 @@
 	);
 }
 
+const { hydrate, prerender } = withTwind(data => <App {...data} />);
+
 hydrate(<App />);
 
-export async function prerender(data) {
-	return await ssr(<App {...data} />);
-}
+export { prerender };

참조 몬스터 파일은 SSR을 사용하지 않는 방법으로 변경하여 withTwind를 증가시킵니다.

const Twind = () => (
	<section tw="h-screen bg-purple-400 flex items-center justify-center">
		<h1 tw="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
	</section>
);

export default Twind;

public/pages/twind/index.jsCodeSandBox에서 실행되는 샘플을 참고하여 Twind 페이지의 구성 요소를 씁니다.

$ npm start

시동.

다 됐습니다.
대단히 기쁘다.

Outro

오랜만에 JSX 모듈을 만들고 npm 지령을 써서 즐거웠어요.

핫 로딩에 대응하는 Tailwind를 쓸 수 있어 개발 체험이 좋다.

디렉터리 구조는 취미가 없고 HTML, CSS, 자바스크립트만 편집할 뿐 초보자에게도 좋다.

WMR의 보일러판은 YAML 등 일부를 제외하고는 시계 제작기로 축소된다.사상이 굳다.

리액터와 테일윈드를 직접 이동하는 것보다 가볍고 빠르다.항목 크기 nodemodules 포함 약 8MB

해봤어요 npm i typescriptnodemodules를 포함하여 모두 70MB입니다.@twind/wmr typescript는optional이기 때문에 추가하지 않아도 사용할 수 있습니다.

트윈드는 전혀 소개도 없이 끝났다.
개발 환경인 만큼 앞으로 트윈드가 노력하겠습니다.
P.S.
그나저나 Gitpod은 워크스페이스 URL에서 사용하는 ID가 됐네요.
소유자명과 창고명 아이디를 사용해서 놀랐어요.