Skip to content

Commit ad1accb

Browse files
refactor: Adds repo shared package @lucide/shared (#1904)
* Fixed import of toKebabCase helper function * Added utils package * utils * Make utils package work in build * Add lucide-shared * Transpile solid with esbuild * Fix resolve modules * Cleanup * Format files * Fix properties plugins function * Fix properties plugins in lucide package * Revert remove resolve plugin and cleanup * Update snapshots * Revert icon changes --------- Co-authored-by: Rohan <[email protected]>
1 parent d255c6a commit ad1accb

33 files changed

+11265
-3151
lines changed

package-lock.json

+7,557
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/lucide-figma/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
},
2020
"devDependencies": {
2121
"@figma/plugin-typings": "^1.36.0",
22+
"@lucide/shared": "workspace:*",
2223
"@types/react": "^17.0.0",
2324
"@types/react-dom": "^17.0.0",
2425
"@vitejs/plugin-react": "^1.0.0",

packages/lucide-figma/src/helpers/createIconComponent.ts

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { forwardRef, createElement, SVGProps } from 'react';
22
import { IconNode } from '../api/fetchIcons';
3+
import { toKebabCase } from '@lucide/shared';
34

45
const defaultAttributes = {
56
xmlns: 'http://www.w3.org/2000/svg',
@@ -17,17 +18,6 @@ export interface LucideProps extends Partial<SVGProps<SVGSVGElement>> {
1718
size?: string | number;
1819
}
1920

20-
/**
21-
* Converts string to KebabCase
22-
* Copied from scripts/helper. If anyone knows how to properly import it here
23-
* then please fix it.
24-
*
25-
* @param {string} string
26-
* @returns {string} A kebabized string
27-
*/
28-
export const toKebabCase = (string: string) =>
29-
string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
30-
3121
const createIconComponent = (iconName: string, iconNode: IconNode) => {
3222
const Component = forwardRef<SVGSVGElement, LucideProps>(
3323
({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>

packages/lucide-preact/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"devDependencies": {
4545
"@lucide/build-icons": "workspace:*",
4646
"@lucide/rollup-plugins": "workspace:*",
47+
"@lucide/shared": "workspace:*",
4748
"@preact/preset-vite": "^2.7.0",
4849
"@testing-library/jest-dom": "^6.1.4",
4950
"@testing-library/preact": "^3.2.3",

packages/lucide-preact/rollup.config.mjs

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import plugins, { replace } from '@lucide/rollup-plugins';
1+
import plugins from '@lucide/rollup-plugins';
22
import dts from 'rollup-plugin-dts';
33
import pkg from './package.json' assert { type: 'json' };
44

@@ -35,7 +35,7 @@ const configs = bundles
3535
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
3636
inputs.map((input) => ({
3737
input,
38-
plugins: plugins(pkg, minify),
38+
plugins: plugins({ pkg, minify }),
3939
external: ['preact'],
4040
output: {
4141
name: packageName,
@@ -49,6 +49,7 @@ const configs = bundles
4949
preserveModules,
5050
format,
5151
sourcemap: true,
52+
preserveModulesRoot: 'src',
5253
globals: {
5354
preact: 'preact',
5455
},

packages/lucide-preact/src/createLucideIcon.ts

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
22
import defaultAttributes from './defaultAttributes';
3+
import { toKebabCase } from '@lucide/shared';
34

45
export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][];
56

@@ -13,16 +14,11 @@ export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, 'ref' | 'si
1314
export type LucideIcon = FunctionComponent<LucideProps>;
1415

1516
/**
16-
* Converts string to KebabCase
17-
* Copied from scripts/helper. If anyone knows how to properly import it here
18-
* then please fix it.
19-
*
20-
* @param {string} string
21-
* @returns {string} A kebabized string
17+
* Create a Lucide icon component
18+
* @param {string} iconName
19+
* @param {array} iconNode
20+
* @returns {FunctionComponent} LucideIcon
2221
*/
23-
export const toKebabCase = (string: string) =>
24-
string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
25-
2622
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
2723
const Component = ({
2824
color = 'currentColor',

packages/lucide-react-native/rollup.config.mjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const configs = bundles
2525
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
2626
inputs.map((input) => ({
2727
input,
28-
plugins: plugins(pkg, minify),
28+
plugins: plugins({ pkg, minify }),
2929
external: ['react', 'react-native-svg'],
3030
output: {
3131
name: packageName,

packages/lucide-react/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"devDependencies": {
5252
"@lucide/build-icons": "workspace:*",
5353
"@lucide/rollup-plugins": "workspace:*",
54+
"@lucide/shared": "workspace:*",
5455
"@testing-library/jest-dom": "^6.1.6",
5556
"@testing-library/react": "^14.1.2",
5657
"@types/react": "^18.2.37",

packages/lucide-react/rollup.config.mjs

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import plugins, { replace } from '@lucide/rollup-plugins';
1+
import plugins from '@lucide/rollup-plugins';
22
import pkg from './package.json' assert { type: 'json' };
33
import dts from 'rollup-plugin-dts';
44
import getAliasesEntryNames from './scripts/getAliasesEntryNames.mjs';
@@ -62,7 +62,7 @@ const configs = bundles
6262
}) =>
6363
inputs.map((input) => ({
6464
input,
65-
plugins: plugins(pkg, minify),
65+
plugins: plugins({ pkg, minify }),
6666
external: ['react', 'prop-types', ...external],
6767
output: {
6868
name: packageName,
@@ -80,6 +80,7 @@ const configs = bundles
8080
format,
8181
sourcemap: true,
8282
preserveModules,
83+
preserveModulesRoot: 'src',
8384
globals: {
8485
react: 'react',
8586
'prop-types': 'PropTypes',

packages/lucide-react/src/createLucideIcon.ts

+1-13
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
RefAttributes,
88
} from 'react';
99
import defaultAttributes from './defaultAttributes';
10+
import { toKebabCase } from '@lucide/shared';
1011

1112
export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
1213

@@ -19,19 +20,6 @@ export interface LucideProps extends ComponentAttributes {
1920
}
2021

2122
export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
22-
/**
23-
* Converts string to KebabCase
24-
* Copied from scripts/helper. If anyone knows how to properly import it here
25-
* then please fix it.
26-
*
27-
* @param {string} string
28-
* @returns {string} A kebabized string
29-
*/
30-
export const toKebabCase = (string: string) =>
31-
string
32-
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
33-
.toLowerCase()
34-
.trim();
3523

3624
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
3725
const Component = forwardRef<SVGSVGElement, LucideProps>(

packages/lucide-solid/package.json

+13-11
Original file line numberDiff line numberDiff line change
@@ -42,31 +42,33 @@
4242
},
4343
"sideEffects": false,
4444
"scripts": {
45-
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle && pnpm build:version",
45+
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle",
4646
"copy:license": "cp ../../LICENSE ./LICENSE",
4747
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
48-
"build:transpile": "tsc --jsx preserve -t es2020 --rootDir src --outDir dist --noEmit false",
49-
"build:version": "node ./scripts/replaceVersion.mjs",
5048
"build:bundle": "rollup -c rollup.config.mjs",
5149
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts",
5250
"test": "vitest run",
5351
"version": "pnpm version --git-tag-version=false"
5452
},
5553
"devDependencies": {
56-
"@atomico/rollup-plugin-sizes": "^1.1.4",
54+
"@babel/core": "^7.23.9",
55+
"@babel/preset-env": "^7.23.9",
56+
"@babel/preset-typescript": "^7.23.3",
5757
"@lucide/build-icons": "workspace:*",
58-
"@solidjs/testing-library": "^0.8.5",
59-
"@testing-library/jest-dom": "^6.1.4",
58+
"@lucide/rollup-plugins": "workspace:*",
59+
"@lucide/shared": "workspace:*",
60+
"@rollup/plugin-babel": "^6.0.4",
61+
"@solidjs/testing-library": "^0.8.6",
62+
"@testing-library/jest-dom": "^6.4.2",
63+
"babel-preset-solid": "^1.8.12",
6064
"jest-serializer-html": "^7.1.0",
61-
"jsdom": "^23.0.1",
6265
"rollup": "^4.9.2",
63-
"rollup-plugin-license": "^3.0.1",
64-
"rollup-preset-solid": "^2.0.1",
6566
"solid-js": "^1.8.7",
6667
"typescript": "^4.9.4",
6768
"vite": "5.0.12",
68-
"vite-plugin-solid": "^2.8.0",
69-
"vitest": "0.34.2"
69+
"vite-plugin-solid": "^2.10.1",
70+
"vitest": "^1.1.1",
71+
"esbuild": "^0.19.11"
7072
},
7173
"peerDependencies": {
7274
"solid-js": "^1.4.7"
+121-14
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,127 @@
1-
// eslint-disable-next-line import/no-extraneous-dependencies
2-
import withSolid from 'rollup-preset-solid';
3-
import bundleSize from '@atomico/rollup-plugin-sizes';
4-
import license from 'rollup-plugin-license';
1+
import path from 'path';
2+
import { babel } from '@rollup/plugin-babel';
3+
import esbuild from 'esbuild';
4+
import plugins from '@lucide/rollup-plugins';
5+
import ts from 'typescript';
56

67
import pkg from './package.json' assert { type: 'json' };
78

8-
const config = withSolid({
9-
targets: ['esm', 'cjs'],
10-
});
9+
const packageName = 'LucideSolid';
10+
const outputFileName = 'lucide-solid';
11+
const outputDir = 'dist';
12+
const inputs = ['src/lucide-solid.ts'];
1113

12-
config.plugins = [
13-
...config.plugins,
14-
license({
15-
banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
16-
}),
17-
bundleSize(),
14+
const bundles = [
15+
{
16+
format: 'cjs',
17+
inputs,
18+
outputDir,
19+
},
20+
{
21+
format: 'esm',
22+
inputs,
23+
outputDir,
24+
},
1825
];
1926

20-
export default config;
27+
const configs = bundles
28+
.map(({ inputs, outputDir, format, preserveModules }) =>
29+
inputs.map((input) => ({
30+
input,
31+
plugins: [
32+
babel({
33+
extensions: ['.ts', '.tsx', '.js'],
34+
babelHelpers: 'bundled',
35+
presets: [
36+
'babel-preset-solid',
37+
'@babel/preset-typescript',
38+
['@babel/preset-env', { bugfixes: true, targets: 'last 2 years' }],
39+
],
40+
}),
41+
...plugins({
42+
pkg,
43+
withEsbuild: false,
44+
}),
45+
format === 'esm'
46+
? {
47+
name: 'ts',
48+
buildEnd() {
49+
// Transpile typescript to './dist/source'
50+
esbuild.build({
51+
entryPoints: ['./src/**/*.tsx', './src/**/*.ts'],
52+
outdir: './dist/source',
53+
loader: {
54+
'.js': 'jsx',
55+
},
56+
jsx: 'preserve',
57+
bundle: true,
58+
format: 'esm',
59+
sourcemap: true,
60+
target: ['esnext'],
61+
banner: {
62+
js: `/**
63+
* @license ${pkg.name} v${pkg.version} - ${pkg.license}
64+
*
65+
* This source code is licensed under the ${pkg.license} license.
66+
* See the LICENSE file in the root directory of this source tree.
67+
*/`,
68+
},
69+
plugins: [
70+
{
71+
name: 'externalize-everything-except-own-dependencies',
72+
setup(build) {
73+
build.onResolve({ filter: /(.*)/ }, (args) => {
74+
const modulePath = path.join(args.resolveDir, args.path);
75+
if (
76+
args.kind === 'import-statement' &&
77+
args.path !== '@lucide/shared' &&
78+
!modulePath.includes('packages/shared')
79+
) {
80+
return { path: args.path, external: true };
81+
}
82+
});
83+
},
84+
},
85+
],
86+
external: ['solid-js'],
87+
});
88+
89+
// Generate types
90+
const program = ts.createProgram([pkg.source], {
91+
target: ts.ScriptTarget.ESNext,
92+
module: ts.ModuleKind.ESNext,
93+
moduleResolution: ts.ModuleResolutionKind.NodeJs,
94+
jsx: ts.JsxEmit.Preserve,
95+
jsxImportSource: 'solid-js',
96+
allowSyntheticDefaultImports: true,
97+
esModuleInterop: true,
98+
declarationDir: `dist/types`,
99+
declaration: true,
100+
emitDeclarationOnly: true,
101+
});
102+
program.emit();
103+
},
104+
}
105+
: null,
106+
],
107+
external: ['solid-js', 'solid-js/web', 'solid-js/store'],
108+
output: {
109+
name: packageName,
110+
...(preserveModules
111+
? {
112+
dir: `${outputDir}/${format}`,
113+
exports: 'auto',
114+
}
115+
: {
116+
file: `${outputDir}/${format}/${outputFileName}.js`,
117+
}),
118+
format: format === 'source' ? 'esm' : format,
119+
preserveModules,
120+
preserveModulesRoot: 'src',
121+
sourcemap: true,
122+
},
123+
})),
124+
)
125+
.flat();
126+
127+
export default configs;

0 commit comments

Comments
 (0)