caveman VS svgr

We are going to walk through the examples by building an online Warehouse management system using Caveman

Djula is a port of Python's Django template engine to Common Lisp. It's the default templating engine used by the framework Caveman for building web applications

Appreciate it. Can I ask one last thing. Between Snooze and Caveman2, which is the more current project?

This is interesting from a "look what we can do!" perspective, but practically speaking, I'm not sure there's a good reason for doing it this way. For all practical purposes, it would be better to use one of the "native" Common Lisp libraries for doing this, such as Caveman: http://8arrow.org/caveman/

Even as a big Common Lisp fan, I would really question using it in a situation where the project has strict requirements to use a particular framework for another language.

In this post, I am going to walk you through to setup Tailwind CSS for a Common Lisp web application using Caveman. If you want to know more about creating web applications using Common Lisp and Caveman, please check my previous posts on the topic.

We are going to use Caveman for scaffolding this project. Caveman is a lightweight web application framework created by Eitaro Fukamachi for Common lisp. Caveman is available on Quicklisp, so you can install it with:

Hence I chose Caveman for this project. After having been played around with and without Caveman for building web applications in Common Lisp, I found that it is the best framework out there for developing web apps in Lisp. Caveman is a lightweight web application framework created by Eitaro Fukamachi for Common lisp. Fukamachi has got some serious tools for doing web development in Lisp. Please feel free to check out his Github profile for more useful tools.

I have been trying to come up with a standard template using Caveman to deploy on Heroku. But I am struck with these issues, not quite getting it to work with the available buildpacks. Lot of the related articles are hopelessly outdated. Appreciate any help or pointers? https://github.com/fukamachi/caveman/issues/126 https://gitlab.com/duncan-bayne/heroku-buildpack-common-lisp/-/issues/6

//@ts-check // eslint-disable-next-line @typescript-eslint/no-var-requires const { composePlugins, withNx } = require('@nx/next'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/svgr svgr: false, }, }; const plugins = [ // Add more Next.js plugins to this list if needed. withNx, ]; module.exports = composePlugins(...plugins)(nextConfig);

Most of the time, developers tend to add svg images to an assets directory and import them either directly or as a React component. This process not only increases your app bundle size but also makes managing all the assets difficult. What if there was a way to manage all the application icons like the way we import them from any other icon library? Yes, react-svgr helps you manage all the icons in your React application.

If you are using react, there is a tool called SVGR, which will take in an SVG file and return a react component with all the props. This can be really useful if you want to treat SVG more like a markup that will be embedded directly into your HTML. This becomes really helpful when you want to style SVG through props or add transformations and animations. Using SVG directly in markup has so many perks and advantages to the point i don't use them as source in image tags.

Really interesting framework agnostic approach, but I think SVGR is a better option for my React homies. It imports an SVG file as a React component. Shouts also to react-icons if Font Awesome, Material Icons and friends are more your bag.

SVGR

There is another way to import an SVG in Create React App, though. We can import the SVG as a ReactComponent. This is because CRA leverages SVGR to process SVGs.

const { types } = require('@babel/core'); module.exports = { ... template: function svgrCustomTemplate( { imports, interfaces, componentName, props, jsx, exports }, { tpl } ) { // меняем корневой элемент на SvgIcon jsx.openingElement.name.name = 'SvgIcon'; jsx.closingElement.name.name = 'SvgIcon'; // https://github.com/gregberge/svgr/issues/530 // при изменении корневого элемента пропадает спред пропсов // поэтому необходимо добавить спред пропсов самостоятельно jsx.openingElement.attributes.push( types.jSXSpreadAttribute(types.identifier('props')) ); return tpl` ${imports}; import { SvgIcon } from '../SvgIcon'; ${interfaces}; const ${componentName} = (${props}) => ( ${jsx} ); ${exports}; ` } }

Is this an icon or icon set? Because you can absolutely change SVG icons into react components with SVGR. https://react-svgr.com/