Gathering detailed insights and metrics for tsx-pack
Installations
npm install tsx-packDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.14.2
NPM Version
8.13.2
Score
66.9
Supply Chain
92.6
Quality
74.7
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
1
Download Statistics
Total Downloads
591
Last Day
1
Last Week
4
Last Month
9
Last Year
153
Bundle Size
881.33 kB
Minified
258.09 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.0.5
Package Id
tsx-pack@0.0.5
Unpacked Size
9.11 kB
Size
3.48 kB
File Count
6
NPM Version
8.13.2
Node Version
16.14.2
Total Downloads
Cumulative downloads
Total Downloads
591
Last day
0%
1
Compared to previous day
Last week
300%
4
Compared to previous week
Last month
-62.5%
9
Compared to previous month
Last year
6.3%
153
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
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
1npx degit MananTank/tsx-pack/templates/tsx my-website-name 2 3cd my-website-name 4npm 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
1import { useCSS, useJS } from 'tsx-pack' 2 3type FooProps = { 4 foo: string 5} 6 7export function Foo(props: FooProps) { 8 useCSS('./blog.css') 9 useJS('./blog.js') 10 11 return <div> {props.foo} </div> 12}
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.
1import { render, CSS, JS } from 'tsx-pack' 2import { Foo } from './components/Foo' 3 4function FooPage() { 5 return ( 6 <html> 7 <head> 8 <CSS /> 9 <title> Foo </title> 10 </head> 11 <body> 12 <Foo /> 13 <JS /> 14 </body> 15 </html> 16 ) 17} 18 19render(<FooPage />, '../../public/foo.html')
Development 🛠
Working on a Page
If you are working on page/Home/index.tsx page, run this command
1npm 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
1npm run build-all
Build particular page
If you only want to build a particular page - pages/Home/index.tsx for example, use this command:
1npm run build src/pages/Home/index.tsx
No vulnerabilities found.
No security vulnerabilities found.