Storybook.JS with Shadow-CLJS

• shadow-cljs

  20 2,205 9.1 Clojure

  ClojureScript compilation made easy

By default, Shadow-CLJS generates the output to public/js, hence the highlighted line (line 9). When the page is ready, init will run and renders the header component. Before running npm run dev, add dev-http to shadow-cljs.edn to configure the dev-server to listen to port 8080 and serve artifacts from public directory:

• storybook.js-with-shadow-cljs

  1 4 0.0 Clojure

Storybook.JS is a very interesting development tool from JavaScript ecosystem1. This tutorial shows how we can use it with Shadow-CLJS. The code resides at storybook.js-with-shadow-cljs repo.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• helix

  16 611 5.6 Clojure

  A simple, easy to use library for React development in ClojureScript. (by lilactown)

That concludes this tutorial on using Storybook.JS with Shadow-CLJS. In this case, we are using Reagent to create the components for Storybook.JS to render. It shouldn't be that difficult to adapt the setup to work with other ClojureScript rendering libraries, e.g., Helix.

• storybook

  323 82,947 10.0 TypeScript

  Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  

The snippet above uses Component Story Format, hence the need to add the metadata ^:export to default and HelloWorldHeader. Because Storybook.JS operates on React components, reactify-component at line 7 turns the Reagent component into a React one.3 With all these preparation, run npm run dev-stories in one console, and npm run storybook in another. You should see Storybook.JS render our first story:

• reagent

  41 4,718 1.1 Clojure

  A minimalistic ClojureScript interface to React.js

  

Line 8 adds Reagent as a dependency; lines 11 and 12 create the profile :frontend (that matches the npm script's shadow-cljs watch command). This profile specifies that the build targets the browser and should generate the file main.js ('cos of the :main key) that will invoke acme.core/init function at initialization. Let's implement init that uses a simple Reagent component in src/main/acme/core.cljs:

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

Suggest a related project