• Stars
    star
    140
  • Rank 261,473 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Take a snapshot of any website.

taki

NPM version NPM downloads CircleCI donate

Install

npm i taki

Built on the top of Google's Puppeteer, for a jsdom/chromy version please visit here.

Usage

const { request } = require('taki')

// Prerender this page to static HTML
// Wait for 1s since this page renders remote markdown file
request({ url: 'https://sao.js.org', wait: 1000 }).then((html) => {
  // serialized html string of target url
  console.log(html)
})

NOTE: You need to call cleanup when you no longer use request:

import { cleanup } from 'taki'

// After fetching..
cleanup()

Custom html selector

By default it returns the html for the entire document, but you can specify a selector to get the html for a specific element.

const { request } = require('taki')

request({ url: 'https://example.com', htmlSelector: '.some-element' }).then(
  (html) => {
    console.log(html)
  }
)

Manually take snapshot

By default taki will take a snapshot of the URL when all resources are loaded, if you have control of the website's source code, you can disable that and manually call window.snapshot:

request({
  url: 'http://my-web.com',
  manually: true,
})

And in your website's source code:

fetchSomeData().then(data => {
  this.setState({ data }, () => {
+    window.snapshot && window.snapshot()
  })
})

Alternatively, choose your own method to invoke when your app is ready to return HTML:

request({
  url: 'http://my-web.com',
  manually: 'iamready',
})

Then call window.iamready() instead of window.snapshot() in your app.

Wait

Wait for specific timeout or a CSS selector to appear in dom.

request({
  url,
  // Wait for 3000 ms
  wait: 3000,
  // Or wait for <div class="comments"></div> to appear
  wait: '.comments',
})

This option will be ignored if manually is set.

Minify

Minify HTML.

request({
  url,
  minify: true,
})

Filter resource

We always abort network requests to following types of resource: stylesheet image media font since they're not required to render the page. In addtion, you can use resourceFilter option to abort specfic type of resource:

request({
  url,
  /**
   * @param {Object} context
   * @param {string} context.type - Resource type
   * @see {@link https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#requestresourcetype}
   * @param {string} context.url - Resource URL
   * @see {@link https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#requesturl}
   * @returns {boolean} Whether to load this resource
   */
  resourceFilter({ type, url }) {
    // Return true to load the resource, false otherwise.
  },
})

You can also use blockCrossOrigin: true shortcut to block all cross-origin requests.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Author

taki ยฉ egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

Website ยท GitHub @egoist ยท Twitter @_egoistlily

More Repositories

1

tsup

The simplest and fastest way to bundle your TypeScript libraries.
TypeScript
5,588
star
2

poi

โšกA zero-config bundler for JavaScript applications.
JavaScript
5,243
star
3

docute

๐Ÿ“š Effortless documentation, done right.
JavaScript
3,725
star
4

devdocs-desktop

๐Ÿ—‚ A full-featured desktop app for DevDocs.io.
JavaScript
3,133
star
5

vue-content-loader

SVG component to create placeholder loading, like Facebook cards loading.
JavaScript
3,025
star
6

hack

โ›ท Dead simple CSS framework.
CSS
2,587
star
7

vuepack

๐Ÿ“ฆ A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron)
JavaScript
2,438
star
8

eme

Elegant Markdown Editor.
JavaScript
2,041
star
9

maid

Markdown driven task runner.
JavaScript
2,006
star
10

dum

An npm scripts runner written in Rust.
Rust
1,422
star
11

import-http

Import modules from URL instead of local node_modules
JavaScript
1,239
star
12

codepan

Like codepen and jsbin but works offline.
JavaScript
1,119
star
13

bili

Bili makes it easier to bundle JavaScript libraries.
TypeScript
1,047
star
14

esbuild-register

Transpile JSX, TypeScript and esnext features on the fly with esbuild
TypeScript
912
star
15

tailwindcss-icons

Use any icon (100,000+) from Iconify, for TailwindCSS
TypeScript
774
star
16

vue-timeago

A timeago component for Vue.
JavaScript
729
star
17

docup

The easiest way to write beautiful docs.
TypeScript
707
star
18

dropcode

A simple and lightweight code snippet manager.
TypeScript
676
star
19

rollup-plugin-postcss

Seamless integration between Rollup and PostCSS.
JavaScript
673
star
20

vue-monaco

MonacoEditor component for Vue.js
JavaScript
651
star
21

vue-feather-icons

Simply beautiful open source icons as Vue functional components.
Vue
586
star
22

rollup-plugin-esbuild

Use ESBuild with Rollup to transform ESNext and TypeScript code.
TypeScript
566
star
23

vue-mugen-scroll

Infinite scroll component for Vue.js 2
JavaScript
546
star
24

vue-client-only

Vue component to wrap non SSR friendly components (428 bytes)
JavaScript
473
star
25

biu

๐Ÿšจ An alert replacement
HTML
442
star
26

styled-vue

Use dynamic styles in Vue single-file components.
JavaScript
428
star
27

package-size

Get the bundle size of an npm package.
JavaScript
422
star
28

tooling

Modular JavaScript Tooling.
JavaScript
417
star
29

vue-router-prefetch

Prefetch links when they are visible in viewport.
JavaScript
383
star
30

node-vs-deno

A Deno guide for Node.js developers
363
star
31

presite

A static site generator based on Puppeteer.
TypeScript
331
star
32

esmon

like nodemon but very esbuild.
TypeScript
324
star
33

franxx

A vanilla JavaScript router that works everywhere.
TypeScript
321
star
34

ts-lib-starter

My minimal TypeScript library starter
TypeScript
269
star
35

vue-final-form

๐Ÿ High performance subscription-based form state management for Vue.js.
Vue
265
star
36

hanabi

๐Ÿ’ฅ Highlight any code, in a colorful way. (seriously 700 bytes)
JavaScript
245
star
37

lit-vue

๐Ÿ”ฅ Vue SFC goodies directly in JavaScript files.
JavaScript
244
star
38

Miu

๐Ÿšซ [Deprecated] Miu is a Markdown Editor for Windows (Do not star, this code looks like a sh*t)
JavaScript
241
star
39

tooling.one

A collection of useful tools for developers.
TypeScript
239
star
40

svg-to-vue-component

Transform SVG files into Vue SFC (with hot reloading and SVGO support)
JavaScript
234
star
41

haya

โšก๏ธ esbuild based dev server and production bundler, it's really fast
TypeScript
231
star
42

awesome-esbuild

A curated list of awesome esbuild resources
225
star
43

vue-dts-gen

Generate `d.ts` from `.vue` files.
TypeScript
220
star
44

bget

Download and install binaries from GitHub Releases, interactively.
Go
216
star
45

vue-emotion

Seamlessly use emotion (CSS-in-JS) with Vue.js
JavaScript
214
star
46

vite-plugin-mix

Adding backend API to your Vite app.
TypeScript
210
star
47

mordred

[Experimental] Source data from anywhere, for Next.js, Nuxt.js, Eleventy and many more.
TypeScript
206
star
48

eva.js

๐Ÿ’ซ A complete solution to building modern webs with Vue.js and its friends.
JavaScript
205
star
49

next-fullstack-starter

Next.js + Prisma + TailwindCSS +TRPC
TypeScript
202
star
50

openai-proxy

OpenAI proxy on Cloudflare Worker / Vercel Edge
TypeScript
201
star
51

vue-inter

Simple yet powerful 1kB i18n library for Vue.js
JavaScript
198
star
52

vue-to-react

Turn a Vue component into a React component.
TypeScript
197
star
53

vue-media

A CSS media query component for Vue.js
JavaScript
194
star
54

typed-worker

Type-safe and Promisified API for Web Worker and Iframe
TypeScript
191
star
55

evangelion-card

Generate Evangelion title card like a boss ๐Ÿ˜Ž
Vue
188
star
56

vue-html

An alternative to Vue template and Vue JSX
JavaScript
186
star
57

prisma-repl

REPL for Prisma databases.
TypeScript
185
star
58

unplugin-swc

SWC plugin for Vite and Rollup
TypeScript
185
star
59

testen

โœ”๏ธ Run tests for multiple versions of Node.js in local env.
JavaScript
175
star
60

vue-cli-gui

GUI for vue-cli UI.
JavaScript
165
star
61

vmark

Convert markdown to Vue component.
JavaScript
164
star
62

bina

An installer for self-contained, single-file binaries, no additional CLI needed.
TypeScript
163
star
63

vue-compile

Compile the blocks in Vue single-file components to use JS/CSS instead of Babel/Sass/Stylus.
TypeScript
158
star
64

is-trademarked-cli

โ„ข๏ธ CLI tool to check if a word is trademarked.
JavaScript
158
star
65

play-esbuild

esbuild online playground
TypeScript
157
star
66

vue-prism-component

highlight code using prism.js and vue component
JavaScript
156
star
67

native-toast

Native-like toast notification but for the web.
HTML
150
star
68

loglive

Render changelog as a website on the fly.
JavaScript
149
star
69

logbox

View console logs and errors on any website without opening the devtools
TypeScript
148
star
70

vue-isomorphic-starter

Vue server-side rendering in real life. ~(โ‰งโ–ฝโ‰ฆ)/~
JavaScript
146
star
71

vue-ga

Google Analytics for Vue.js
JavaScript
142
star
72

tokio

Web scraping made simple.
JavaScript
142
star
73

esbuild-plugin-vue

Basic .vue support for esbuild.
TypeScript
137
star
74

joycon

Find and load config files with joy.
JavaScript
133
star
75

vue-preload

Preloading data for Vue
JavaScript
133
star
76

bundle-require

bundle and `require` a file, the same way Vite loads `vite.config.ts`
TypeScript
133
star
77

vitekit

Remix and Vite had a baby. [WIP]
TypeScript
132
star
78

md

A markdown parser and compiler. Built for speed.
JavaScript
130
star
79

io-spin

TJ Holowaychuk's go-spin node.js port
JavaScript
125
star
80

vue-windows

Vue components for creating neat windows.
Vue
125
star
81

tsno

`node` with typescript support, importing from URL, etc.
TypeScript
118
star
82

data-tip.css

๐Ÿ’ˆ Wow, such tooltip, with pure css!
HTML
117
star
83

eventstop

A minimal event library for Node.js and browser.
JavaScript
115
star
84

kanpai

๐Ÿป Kanpai is a better way to publish npm packages.
TypeScript
111
star
85

preader

Extract the main content from a web page.
TypeScript
111
star
86

esbuild-service

esbuild as a service. bundle any npm package on the fly as you request.
Go
108
star
87

app-loading

Focus on Medium-like app loading style
JavaScript
104
star
88

vue-slim-tabs

A slim tab component for Vue.js (1.3 kB minified)
Vue
103
star
89

gh-pinned-repos

API service for retrieving pinned repos on GitHub.
TypeScript
103
star
90

follower-count

Get follower count for Instagram, Twitter, TikTok, Youtube accounts
TypeScript
102
star
91

vite-plugin-compile-time

Some compile-time magic for your Vite project
TypeScript
101
star
92

ideas

๐Ÿ’กideas / thoughts / polls from egoist
101
star
93

doko

A docker-based development dependency manager.
TypeScript
101
star
94

nswatch

Like gulp.watch but for npm scripts.
TypeScript
100
star
95

npm-size

Get the install size of an npm package.
JavaScript
99
star
96

vue-head

Document <head> manager for Vue 3, SSR ready.
TypeScript
98
star
97

logo-maker

create a simple logo..
CSS
97
star
98

always-bet-on-vue

Chunibyo's overwhelming victory
96
star
99

hakka

ALPHA. A reddit-like online community (but less noisy).
TypeScript
96
star
100

feedbackok-js

Collecting feedback with ease.
TypeScript
94
star