npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kepler16/clam

v0.0.16

Published

Basically trying to make a nextjs for clojurescript. We're very much trying to provide the same things for the same reasons.

Downloads

19

Readme

Clam

DO NOT USE THIS!!! EVERYTHING WILL CHANGE! EVERYTHING YOU BUILD WITH THIS WILL PROBABLY BREAK IN THE FUTURE

Basically trying to make a nextjs for clojurescript. We're very much trying to provide the same things for the same reasons.

Check out the template for an example of usage.

notes

  • We rely on deps.edn, no Leiningen support
  • Clam uses shadow-cljs under the hood
  • We assume a pages directory in the root of the clam project (where your site entry points will go). This directory uses file based routing, so the location of the .cljs files in it matter.
  • You need to make sure you have pages and .clam/cp in your deps.edn :paths entry.
  • Clam analyses code in the pages dir and generates complimentary code in .clam/cp
  • Clam apps are react apps that execute in a browser and are Serverside rendered via serverless functions in a node process.

crash course on internals

Clam leverages shadow-cljs for compilation, watching and hot-reloading. The integration is scripted so no shadow-cljs.edn is required.

Running npx clam dev runs a node script which:

  • Crawls directories upwards to find the clam.edn file, marking the clam project root
  • Does some directory preparation
  • Starts an node http server that can execute serverless functions
  • Kicks off a jvm which runs the clam build watcher

The clam build watcher watches the pages directory and runs the clojurescript analyzer against the .cljs files, which it then uses to create optimised shadow-cljs build configurations.

The build watcher kicks off a shadow-cljs server process and starts 2 watch processes. Once for the browser :clam/site and one for the serverless node environment :clam/api. Both of these are attachable with a repl.

Development Story

  • Clone clam template
  • run npm install
  • run npx clam dev
  • Connect to a remote repl from your editor (port should be auto picked up by the editor from .shadow-cljs/nrepl.port file). Attach to the shadow-cljs build: Either :clam/api or clam/site or both, depending on where you want your repl. Note that because there's no shadow-cljs.edn file, emacs (and probably others) won't auto pick up these builds so you will need to manually type them in.

You should have a hot reloadable development story. To add a new page to the site, just make a .cljs file in the corresponding place and

Vercel

Adding npx clam release --vercel to your package.json build script will generate release files in a way that just works with vercel.

Roadmap

  • [X] hot reloading
  • [X] file based routing
  • [X] serverside rendering
  • [X] Document and head manipulation
  • [ ] react wrapper
  • [ ] extensible serverless functions
  • [ ] React Fast Refresh
  • [ ] better & dynamic file based routing
  • [ ] dynamic module loading and progressive loading
  • [ ] route prefetching
  • [ ] SSG (build time generation / rendering) for static site generation