Hi, I'm Hiroki

I'm on a mission to open source tools to empower developers around the world, like you!

Follow me on my journey 🚀 ^✨

Check out my projects

Command-line tools

• ci - run npm ci using the appropriate Node package manager (npm, yarn, pnpm)
• deps - use V8 to identify which package dependencies are being executed
• i-peers - install your npm package's peerDependencies
• npm-multi-publish - publish an npm package to multiple registries
• pkg-size - measure the size of your npm package distribution
• playwright-start - start a long-running Playwright browser server via CLI
• prerelease-checks - run essential pre-release checks before releasing an npm package
• snap-tweet - snap a clean and simple screenshot of a tweet

Data

• minification-benchmarks - compare performance across popular JS minifiers
• rollup-playground - play with and learn about different Rollup configurations
• webpack-playground - play with and learn about different Webpack configurations

GitHub actions

• pkg-size-action - get size regression reports on your PRs

Ink components

• ink-task-list - render a task list in Ink

Markdown It!

• markdown-it-add-attrs - add attributes to every markdown element

Miscellaneous

• gh-emojis - access the GitHub emojis API response as an npm package
• systemjs-unpkg - auto-resolve bare specifiers in SystemJS using UNPKG

PostCSS plugins

• postcss-custom-properties-transformer - apply transformations to CSS custom properties
• postcss-import-alias - use aliases in @import statements

Rollup plugins

• rollup-plugin-aggregate-exports - emit an entry file to aggregate exports across multiple files
• rollup-plugin-htmlvue - import HTML/XML files (eg. SVGs) as Vue.js components

Utilities

• bfs - find the path to a value in a complex JavaScript object
• cli-simple-table - simply display tabular data in a CLI
• comment-mark - interpolate strings with HTML comment markers
• dbgr - use a lightweight debugger alternative for Node.js
• fs-require - create a require() function from any file-system
• fs.promises.exists - use a promise-based fs.existsSync() method
• mempack - run a completely in-memory Webpack build
• reactive-json-file - automatically save JS objects as you mutate them
• tasuku - minimally display tasks running in your script
• type-flag - parse CLI argv flags with first-class type support

Vue.js UI components

• vue-demo-collapse - nicely demo a Vue.js component with a collapsible code section
• vue-feather-icon-set - use an optimized Feather icon set for Vue.js
• vue-split-view - create an adjustable horizontal/vertical split-view in Vue.js

Vue.js utils/tools

• vue-2-3 - interop Vue 2 components in Vue 3 apps and vice versa
• vue-ast-utils - work with Vue 3 AST nodes
• vue-dom-hints - debug a Vue.js app without using Vue.js devtools
• vue-frag - create a Fragment (multiple root-nodes) in Vue 2
• vue-frag-plugin - add multiple root-node support to SFCs in Vue 2 via Webpack/Rollup/Vite plugin
• vue-grep - grep your Vue.js codebase with CSS selectors
• vue-just-ssr - add an SSR + HMR dev-env to a Webpack + Vue.js project
• vue-proxi - proxy Vue.js component props and event-listeners to a child component
• vue-pseudo-window - bind event-listeners to the window/document via template
• vue-subslot - pick out specific elements from component <slot>s
• vue-svg-icon-set - create an optimized icon-set in Vue.js using Webpack
• vue-v - render vNodes via component template
• vue-vnode-syringe - add attributes and event-listeners to component <slot>s

Web utilities

• svg-browser-export - export SVG to PNG, JPEG, or WEBP in the browser

Webpack

• browser-reload-plugin - automatically reload your browser page on Webpack watch builds
• code-inject-loader - apply code transformations to certain files
• entry-file-plugin - create an ESM entry-point to consolidate entry-points
• esbuild-loader - speed up Webpack with esbuild
• htmlvue-loader - import HTML/XML files (eg. SVGs) as Vue.js components
• instant-mocha - build tests with Webpack and run them with Mocha in one command
• md-vue-loader - import markdown files as Vue.js components
• svg-trace-loader - flatten imported SVGs into a single <path>
• vue-import-loader - auto-import & register components used in a Vue.js SFC template
• webpack-analyze-duplication-plugin - detect duplicated modules in your Webpack build
• webpack-dependency-size - track/evaluate dependencies bundled into a Webpack build
• webpack-distsize - track Webpack distribution size in version control
• webpack-json-access-optimizer - tree-shake and minify JSON modules
• webpack-localize-assets-plugin - localize your Webpack build with multiple locales
• webpack-test-utils - write in-memory tests for Webpack loaders & plugins

Websites/Services

• github-cdn - serve static content from a Github Enterprise server
• litemark - edit your markdown with a live preview of what it would look like on GitHub
• motion-orientation-api - visualize and understand the data you get from the Motion & Orientation API
• postcss-preset-env-playground - play with the different PostCSS preset-env configurations
• repkg - convert or bundle a npm package (or a specific file) to AMD/UMD on demand

_{😊 If you enjoyed any of my projects, make my day by starring them, following me, or tweeting @me!}