Improve formatting (#1814)

* Ignore linting for examples in docs

* Formatting JSX single attribute per line

* Separte `format` and `lint:format` in package.json

* Bump prettier version

* Run format

packages/lucide-preact/rollup.config.mjs

@@ -1,6 +1,6 @@
 import plugins, { replace } from '@lucide/rollup-plugins';
-import dts from "rollup-plugin-dts";
-import pkg from './package.json' assert { type: "json" };
+import dts from 'rollup-plugin-dts';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucidePreact';
 const outputFileName = 'lucide-preact';
@@ -33,7 +33,7 @@ const bundles = [
 
 const configs = bundles
   .map(({ inputs, outputDir, format, minify, preserveModules }) =>
-    inputs.map(input => ({
+    inputs.map((input) => ({
       input,
       plugins: plugins(pkg, minify),
       external: ['preact'],
@@ -57,13 +57,16 @@ const configs = bundles
   )
   .flat();
 
-  export default [
-    {
-      input: inputs[0],
-      output: [{
-        file: `dist/${outputFileName}.d.ts`, format: "es"
-      }],
-      plugins: [dts()],
-    },
-    ...configs
-  ];
+export default [
+  {
+    input: inputs[0],
+    output: [
+      {
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
+      },
+    ],
+    plugins: [dts()],
+  },
+  ...configs,
+];

packages/lucide-preact/src/createLucideIcon.ts

@@ -1,16 +1,16 @@
 import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
 import defaultAttributes from './defaultAttributes';
 
-export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][]
+export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][];
 
-export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
-  color?: string
-  size?: string | number
-  strokeWidth?: string | number
-  absoluteStrokeWidth?: boolean
+export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, 'ref' | 'size'>> {
+  color?: string;
+  size?: string | number;
+  strokeWidth?: string | number;
+  absoluteStrokeWidth?: boolean;
 }
 
-export type LucideIcon = FunctionComponent<LucideProps>
+export type LucideIcon = FunctionComponent<LucideProps>;
 
 /**
  * Converts string to KebabCase
@@ -20,20 +20,29 @@ export type LucideIcon = FunctionComponent<LucideProps>
  * @param {string} string
  * @returns {string} A kebabized string
  */
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export const toKebabCase = (string: string) =>
+  string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
-  const Component = (
-    { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, class: classes = '', ...rest }: LucideProps
-  ) =>
+  const Component = ({
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    children,
+    class: classes = '',
+    ...rest
+  }: LucideProps) =>
     h(
       'svg',
       {
         ...defaultAttributes,
-        width:  String(size),
+        width: String(size),
         height: size,
         stroke: color,
-        ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth
+          ? (Number(strokeWidth) * 24) / Number(size)
+          : strokeWidth,
         class: ['lucide', `lucide-${toKebabCase(iconName)}`, classes].join(' '),
         ...rest,
       },
@@ -45,4 +54,4 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
   return Component;
 };
 
-export default createLucideIcon
+export default createLucideIcon;

packages/lucide-preact/src/defaultAttributes.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'preact'
+import type { JSX } from 'preact';
 
 export default {
   xmlns: 'http://www.w3.org/2000/svg',

packages/lucide-preact/tests/lucide-preact.spec.tsx

@@ -1,14 +1,14 @@
 import { describe, it, expect } from 'vitest';
-import { render, cleanup } from '@testing-library/preact'
+import { render, cleanup } from '@testing-library/preact';
 import { Pen, Edit2, Grid, Droplet } from '../src/lucide-preact';
 
-type AttributesAssertion = { attributes: Record<string, { value: string }>}
+type AttributesAssertion = { attributes: Record<string, { value: string }> };
 
 describe('Using lucide icon components', () => {
   it('should render an component', () => {
-    const { container } = render( <Grid/> );
+    const { container } = render(<Grid />);
 
-    expect( container.innerHTML ).toMatchSnapshot();
+    expect(container.innerHTML).toMatchSnapshot();
   });
 
   it('should adjust the size, stroke color and stroke width', () => {
@@ -27,7 +27,7 @@ describe('Using lucide icon components', () => {
     expect(attributes.width.value).toBe('48');
     expect(attributes.height.value).toBe('48');
     expect(attributes['stroke-width'].value).toBe('4');
-    expect( container.innerHTML ).toMatchSnapshot();
+    expect(container.innerHTML).toMatchSnapshot();
   });
 
   it('should render the alias icon', () => {
@@ -41,9 +41,9 @@ describe('Using lucide icon components', () => {
       />,
     );
 
-    const PenIconRenderedHTML = container.innerHTML
+    const PenIconRenderedHTML = container.innerHTML;
 
-    cleanup()
+    cleanup();
 
     const { container: Edit2Container } = render(
       <Edit2
@@ -54,7 +54,7 @@ describe('Using lucide icon components', () => {
       />,
     );
 
-    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
+    expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
   });
 
   it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
@@ -74,17 +74,15 @@ describe('Using lucide icon components', () => {
     expect(attributes.width.value).toBe('48');
     expect(attributes.height.value).toBe('48');
     expect(attributes['stroke-width'].value).toBe('1');
-    expect( container.innerHTML ).toMatchSnapshot();
+    expect(container.innerHTML).toMatchSnapshot();
   });
 
   it('should apply all classes to the element', () => {
     const testClass = 'my-class';
-    const { container } = render(
-      <Droplet class={testClass} />,
-    );
+    const { container } = render(<Droplet class={testClass} />);
 
     expect(container.firstChild).toHaveClass(testClass);
     expect(container.firstChild).toHaveClass('lucide');
     expect(container.firstChild).toHaveClass('lucide-droplet');
   });
-})
+});

packages/lucide-preact/tests/setupVitest.js

@@ -1,5 +1,5 @@
-import { expect } from 'vitest'
+import { expect } from 'vitest';
 import '@testing-library/jest-dom';
-import htmlSerializer from 'jest-serializer-html'
+import htmlSerializer from 'jest-serializer-html';
 
-expect.addSnapshotSerializer(htmlSerializer)
+expect.addSnapshotSerializer(htmlSerializer);

packages/lucide-preact/tsconfig.json

@@ -21,5 +21,5 @@
     "jsxImportSource": "preact",
     "types": ["@testing-library/jest-dom"],
   },
-  "exclude": ["**/node_modules"]
+  "exclude": ["**/node_modules"],
 }