| theme | title | website | handle | favicon | highlighter | lineNumbers | layout |
|---|---|---|---|---|---|---|---|
./theme |
`unjs` - Unified JavaScript solutions |
lichter.io |
TheAlexLichter |
shiki |
true |
intro |
- Web Development Consultant
- Speaker & Instructor
- Nuxt.js Maintainer
- @TheAlexLichter
- https://lichter.io
- manniL
- Ideally any package supports...
- CJS (legacy)
- ESM
- running via Deno
- TS and provides own types
const { someFunction, someOtherVariable } = require('my-lib')
import { someFunction, someOtherVariable } from 'my-lib'
import { someFunction, someOtherVariable } from 'https://unpkg.com/my-lib/dist/index.mjs'
- What if you change the platform you deploy to?
- e.g. from a docker container into lambdas or workers
- What if you decide to utilize SSR?
- and which packages break now 👀
- Use "modern" packages
- Ideally those who are universally usable
- With as little sub-dependencies as possible
- And who support all "common" formats
layout: cover background: https://media0.giphy.com/media/26n6WywJyh39n1pBu/giphy.gif
layout: cover background: https://media1.giphy.com/media/l41lFw057lAJQMwg0/giphy.gif
layout: cover background: https://media2.giphy.com/media/DMC9w6MPUXYv9Yts49/giphy.gif
- ...more and more functionalities were introduced
- At first - more or less coupled to the core
- "Nuxt-related" logic -> extracted as Nuxt module
- "General" logic -> extracted as standalone NPM package
- Decoupled from the Nuxt core
- Easier to test
- Better to maintain
- Can be reused throughout projects...
- ...even in these that are not related to Nuxt
- Contained packages used in Nuxt or Nuxt projects
- From
connectmiddleware over testing tools to utilities - Evolved further to be more than just "packages from the Nuxt team"
![https://lichter.io/img/[email protected]](https://lichter.io/img/me@2x.jpg){kind=link}
- URL normalization
- Joining and resolving URLs while keeping query and hash
- Remove or add trailing/leading slash
- deduplicate slashes from URLs in general
- and way more
import { joinURL } from 'ufo'
joinURL('/my/', 'nice', 'url/')
// Will yield: /my/nice/url/
joinURL('/a?query=yes', '/b', '/c#hash')
// ???import { joinURL, resolveURL, cleanDoubleSlashes, parseURL } from 'ufo'
joinURL('/my/', 'nice', 'url/')
// Will yield: /my/nice/url/
joinURL('/a?query=yes', '/b', '/c#hash')
// /a?query=yes/b/c#hash - oh oh!
resolveURL('/a?query=yes', '/b#someOtherHash', '/c#hash')
// /a/b/c?query=yes#hash
cleanDoubleSlashes('https://conf.vuejs.de////schedule//')
// https://conf.vuejs.de/schedule/
parseURL('/unstorage-h3-file-server-example?file=index.js')
// { "pathname": "/unstorage-h3-file-server-example", "search": "?file=index.js", "hash": "" }
- There are so many existing http frameworks for node.js already:
- connect
- express
- fastify
- koa
- hapi.js
- and more...
- H3 is...
- ...platform-agnostic
- ...compatible with existing stacks
- ...minimal
- ...modern
- ...extendable
- ...coming with a built-in router
import { listen } from 'listhen'
import { createApp, createRouter } from 'h3'
const app = createApp()
const router = createRouter()
.get('/', () => 'Hallo Berlin!')
.get('/color/:color', (event) => `I like ${event.context.params.color}!`)
app.use(router)
listen(app)
- Nitro(pack) - We will have a look at it next!
- Nuxt 3 and Nuxt Bridge (via Nitro)
- GestaltJS - "A modern full-stack and batteries-included framework"
- serve - "A lightweight starting point for API applications"
- frourio-h3 - An unofficial port of the full-stack TS framework
- Powerful universal storage layer
- Unified API, < 5 kB
- Supports in-memory, filesystem, localstorage, redis and HTTP...
- ...GitHub repositories (read-only) and Cloudflare's KV-store via http and bindings
- Can be extended by creating custom drivers too!
- Also supports being used as storage server
import { listen } from 'listhen';
import { createApp, createRouter } from 'h3';
import { createStorage } from 'unstorage';
import fsDriver from 'unstorage/drivers/fs';
import { createStorageServer } from 'unstorage/server';
const storage = createStorage({
driver: fsDriver({ base: './' }),
});
const storageServer = createStorageServer(storage);
const app = createApp();
const router = createRouter()
.add('/storage/*', storageServer.handle)
.get('/', () => 'We have a file server now')
app.use(router);
listen(app);
- unstorage-pinia-plugin - A pinia plugin to persist your store via unstorage (can be any driver)
- Fabian's Webperlen EP15 - (German) article about unstorage - repo
- file-computed - Execute functions when the content of files change
- Nuxt 3 and Nuxt Bridge (via Nitro)
- Also in projects outside of Nuxt 3
- Toolchain and runtime framework at once
- Comes with HMR out of the box
- Supports various route rules (see Daniel's talk! 👀)
- Customizable, configurable and extendable
- Uses lots of
unjspackages (e.g.h3,unstorageandufo)
<style> h1 { @apply !text-5xl; } h2 { @apply !text-2xl; } </style>
- Nuxt 3 and Nuxt Bridge
- and any project built with Nuxt 3
- stacks.js - "A progressive, atomic full-stack framework"
- vitejs/rfcs-bot - "Automation of RFCs creation for vitejs/rfcs"
- issues-up - "Mirror issues to the upstream repos"
- jjw-proxy - "Customisable Cloudflare Workers proxy"
- We saw some during the examples already. And in addition:
unplugin- Unified plugin system for all major bundlers (Vite, Rollup, Webpack, esbuild)untyped- Generate types and markdown from a config objectconsola- Beautiful universal console loggerhookable- Async hook system- ...and way more! Check out the GitHub organisation
- When you browse around the
unjsorganization, you will see these images quite often:
- But also lots of other individual contributors of each project!
- Picking an NPM package that supports (almost) all platforms is not easy Writing and maintaining these too
- Extracting isolated features helps maintainability and reusability throughout the ecosystem
unjspackages power not only Nuxt, but also many other frameworks...- ...and can be used for your app too!
Hacktoberfest 22 is on!
- Web Development Consultant
- Speaker & Instructor
- Nuxt.js Maintainer
- @TheAlexLichter
- https://lichter.io
- manniL