tsx-pack
Dead Simple Static Site Generator
Write your website in TSX files and convert them to static HTML files with CSS and JS dependencies optimally bundled inline
Features ✨
- Write Type safe component templates with the power of Typescript and JSX
- Generates optimized pages with CSS & JS minified and inlined in HTML document to maximize the core web vital metrics of the page.
Getting Started 🚀
bootstrap project by running the below command
npx degit MananTank/tsx-pack/templates/tsx my-website-name
cd my-website-name
npm i
Writing Components 🧑🏻💻
Components are just regular functions that return JSX Element.
If a component has a dependency on a JS or CSS file, it must be declared via useCSS and useJS hooks
import { useCSS, useJS } from 'tsx-pack'
type FooProps = {
foo: string
}
export function Foo(props: FooProps) {
useCSS('./blog.css')
useJS('./blog.js')
return <div> {props.foo} </div>
}
Rendering to HTML 🎨
render the component with render method, second argument is the relative path at which you would like to put the generated file. ( make sure that folders you specify in this path already exist)
<CSS /> and <JS /> components represent inlined CSS and JS collected by the tsx-pack for the page.
import { render, CSS, JS } from 'tsx-pack'
import { Foo } from './components/Foo'
function FooPage() {
return (
<html>
<head>
<CSS />
<title> Foo </title>
</head>
<body>
<Foo />
<JS />
</body>
</html>
)
}
render(<FooPage />, '../../public/foo.html')
Development 🛠
Working on a Page
If you are working on page/Home/index.tsx page, run this command
npm run dev src/pages/Home/index.tsx
With this, Everytime you make a change inside the src folder, foo.tsx will run and generate the HTML file
Starting Live Dev Server
in a new instance of the terminal, run this command to have a live dev server that automatically reloads the page when you make a change in the source code
npm run dev-server
Creating Production Build 👷♂️🧰
Build All Pages
make sure all the pages you want to generate are listed in the build.ts file.
Then run this command to generate all the files
npm run build-all
Build particular page
If you only want to build a particular page - pages/Home/index.tsx for example, use this command:
npm run build src/pages/Home/index.tsx
