On this page
Practices
Q&A
Since when has the project been progressing?
Work began around September 2023, and by October code containing many bugs had been created in the local environment. Initially, I was creating a compiler as part of creating an animation hook for React.
Compile error
elter uses fs to build css, so it cannot parse imports such as .css and .svg and other image file extention. To deal with this issue, load images via src="".
Do not use simultaneously on css and tsx (separate into ts files, or delete the css import)
elter only compiles ts or tsx files.
This is to minimize build times.
How does elter compile?
elter compile typescript at high speed with "tsx" and build the functions collected with "glob" using "fs".
How does elter hot reloading?
Mainly do hot reloading by injecting styles into the head appropriately, consistently on both the client and server.
The current rendering case like Next.js is special, it provides both a server-side case and a client-side case.
In all other cases short of server-side rendering, only client-side hot reloading works.
This Component trigger hot reload when a link is clicked or mounted or file is saved. The following is included in the ServerCSS component.
'use client';
import { useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';
export const RefreshOn = () => {
const router = useRouter();
const pathname = usePathname();
useEffect(() => {
router.refresh();
const handleSave = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
router.refresh();
}
};
const handleClick = (e: MouseEvent) => {
const target = e.target as HTMLElement;
const targetAnchor = target.closest('a');
if (pathname && targetAnchor instanceof HTMLAnchorElement && targetAnchor.origin === window.location.origin) {
router.refresh();
}
};
document.addEventListener('click', handleClick);
window.addEventListener('keydown', handleSave);
return () => {
document.removeEventListener('click', handleClick);
window.removeEventListener('keydown', handleSave);
};
}, [router, pathname]);
return null;
};