Skip to content

Commit

Permalink
refactor: Adds repo shared package @lucide/shared (#1904)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
ericfennis and SamstyleGhost authored Mar 6, 2024
1 parent d255c6a commit ad1accb
Show file tree
Hide file tree
Showing 33 changed files with 11,265 additions and 3,151 deletions.
7,557 changes: 7,557 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions packages/lucide-figma/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
},
"devDependencies": {
"@figma/plugin-typings": "^1.36.0",
"@lucide/shared": "workspace:*",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react": "^1.0.0",
Expand Down
12 changes: 1 addition & 11 deletions packages/lucide-figma/src/helpers/createIconComponent.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { forwardRef, createElement, SVGProps } from 'react';
import { IconNode } from '../api/fetchIcons';
import { toKebabCase } from '@lucide/shared';

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

/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = (string: string) =>
string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

const createIconComponent = (iconName: string, iconNode: IconNode) => {
const Component = forwardRef<SVGSVGElement, LucideProps>(
({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>
Expand Down
1 change: 1 addition & 0 deletions packages/lucide-preact/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
"@lucide/shared": "workspace:*",
"@preact/preset-vite": "^2.7.0",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/preact": "^3.2.3",
Expand Down
5 changes: 3 additions & 2 deletions packages/lucide-preact/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import plugins, { replace } from '@lucide/rollup-plugins';
import plugins from '@lucide/rollup-plugins';
import dts from 'rollup-plugin-dts';
import pkg from './package.json' assert { type: 'json' };

Expand Down Expand Up @@ -35,7 +35,7 @@ const configs = bundles
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
inputs.map((input) => ({
input,
plugins: plugins(pkg, minify),
plugins: plugins({ pkg, minify }),
external: ['preact'],
output: {
name: packageName,
Expand All @@ -49,6 +49,7 @@ const configs = bundles
preserveModules,
format,
sourcemap: true,
preserveModulesRoot: 'src',
globals: {
preact: 'preact',
},
Expand Down
14 changes: 5 additions & 9 deletions packages/lucide-preact/src/createLucideIcon.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
import defaultAttributes from './defaultAttributes';
import { toKebabCase } from '@lucide/shared';

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

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

/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
* Create a Lucide icon component
* @param {string} iconName
* @param {array} iconNode
* @returns {FunctionComponent} LucideIcon
*/
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',
Expand Down
2 changes: 1 addition & 1 deletion packages/lucide-react-native/rollup.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const configs = bundles
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
inputs.map((input) => ({
input,
plugins: plugins(pkg, minify),
plugins: plugins({ pkg, minify }),
external: ['react', 'react-native-svg'],
output: {
name: packageName,
Expand Down
1 change: 1 addition & 0 deletions packages/lucide-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
"@lucide/shared": "workspace:*",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/react": "^14.1.2",
"@types/react": "^18.2.37",
Expand Down
5 changes: 3 additions & 2 deletions packages/lucide-react/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import plugins, { replace } from '@lucide/rollup-plugins';
import plugins from '@lucide/rollup-plugins';
import pkg from './package.json' assert { type: 'json' };
import dts from 'rollup-plugin-dts';
import getAliasesEntryNames from './scripts/getAliasesEntryNames.mjs';
Expand Down Expand Up @@ -62,7 +62,7 @@ const configs = bundles
}) =>
inputs.map((input) => ({
input,
plugins: plugins(pkg, minify),
plugins: plugins({ pkg, minify }),
external: ['react', 'prop-types', ...external],
output: {
name: packageName,
Expand All @@ -80,6 +80,7 @@ const configs = bundles
format,
sourcemap: true,
preserveModules,
preserveModulesRoot: 'src',
globals: {
react: 'react',
'prop-types': 'PropTypes',
Expand Down
14 changes: 1 addition & 13 deletions packages/lucide-react/src/createLucideIcon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
RefAttributes,
} from 'react';
import defaultAttributes from './defaultAttributes';
import { toKebabCase } from '@lucide/shared';

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

Expand All @@ -19,19 +20,6 @@ export interface LucideProps extends ComponentAttributes {
}

export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = (string: string) =>
string
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
.toLowerCase()
.trim();

const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
const Component = forwardRef<SVGSVGElement, LucideProps>(
Expand Down
24 changes: 13 additions & 11 deletions packages/lucide-solid/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,31 +42,33 @@
},
"sideEffects": false,
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle && pnpm build:version",
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
"build:transpile": "tsc --jsx preserve -t es2020 --rootDir src --outDir dist --noEmit false",
"build:version": "node ./scripts/replaceVersion.mjs",
"build:bundle": "rollup -c rollup.config.mjs",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts",
"test": "vitest run",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.4",
"@babel/core": "^7.23.9",
"@babel/preset-env": "^7.23.9",
"@babel/preset-typescript": "^7.23.3",
"@lucide/build-icons": "workspace:*",
"@solidjs/testing-library": "^0.8.5",
"@testing-library/jest-dom": "^6.1.4",
"@lucide/rollup-plugins": "workspace:*",
"@lucide/shared": "workspace:*",
"@rollup/plugin-babel": "^6.0.4",
"@solidjs/testing-library": "^0.8.6",
"@testing-library/jest-dom": "^6.4.2",
"babel-preset-solid": "^1.8.12",
"jest-serializer-html": "^7.1.0",
"jsdom": "^23.0.1",
"rollup": "^4.9.2",
"rollup-plugin-license": "^3.0.1",
"rollup-preset-solid": "^2.0.1",
"solid-js": "^1.8.7",
"typescript": "^4.9.4",
"vite": "5.0.12",
"vite-plugin-solid": "^2.8.0",
"vitest": "0.34.2"
"vite-plugin-solid": "^2.10.1",
"vitest": "^1.1.1",
"esbuild": "^0.19.11"
},
"peerDependencies": {
"solid-js": "^1.4.7"
Expand Down
135 changes: 121 additions & 14 deletions packages/lucide-solid/rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -1,20 +1,127 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import withSolid from 'rollup-preset-solid';
import bundleSize from '@atomico/rollup-plugin-sizes';
import license from 'rollup-plugin-license';
import path from 'path';
import { babel } from '@rollup/plugin-babel';
import esbuild from 'esbuild';
import plugins from '@lucide/rollup-plugins';
import ts from 'typescript';

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

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

config.plugins = [
...config.plugins,
license({
banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
}),
bundleSize(),
const bundles = [
{
format: 'cjs',
inputs,
outputDir,
},
{
format: 'esm',
inputs,
outputDir,
},
];

export default config;
const configs = bundles
.map(({ inputs, outputDir, format, preserveModules }) =>
inputs.map((input) => ({
input,
plugins: [
babel({
extensions: ['.ts', '.tsx', '.js'],
babelHelpers: 'bundled',
presets: [
'babel-preset-solid',
'@babel/preset-typescript',
['@babel/preset-env', { bugfixes: true, targets: 'last 2 years' }],
],
}),
...plugins({
pkg,
withEsbuild: false,
}),
format === 'esm'
? {
name: 'ts',
buildEnd() {
// Transpile typescript to './dist/source'
esbuild.build({
entryPoints: ['./src/**/*.tsx', './src/**/*.ts'],
outdir: './dist/source',
loader: {
'.js': 'jsx',
},
jsx: 'preserve',
bundle: true,
format: 'esm',
sourcemap: true,
target: ['esnext'],
banner: {
js: `/**
* @license ${pkg.name} v${pkg.version} - ${pkg.license}
*
* This source code is licensed under the ${pkg.license} license.
* See the LICENSE file in the root directory of this source tree.
*/`,
},
plugins: [
{
name: 'externalize-everything-except-own-dependencies',
setup(build) {
build.onResolve({ filter: /(.*)/ }, (args) => {
const modulePath = path.join(args.resolveDir, args.path);
if (
args.kind === 'import-statement' &&
args.path !== '@lucide/shared' &&
!modulePath.includes('packages/shared')
) {
return { path: args.path, external: true };
}
});
},
},
],
external: ['solid-js'],
});

// Generate types
const program = ts.createProgram([pkg.source], {
target: ts.ScriptTarget.ESNext,
module: ts.ModuleKind.ESNext,
moduleResolution: ts.ModuleResolutionKind.NodeJs,
jsx: ts.JsxEmit.Preserve,
jsxImportSource: 'solid-js',
allowSyntheticDefaultImports: true,
esModuleInterop: true,
declarationDir: `dist/types`,
declaration: true,
emitDeclarationOnly: true,
});
program.emit();
},
}
: null,
],
external: ['solid-js', 'solid-js/web', 'solid-js/store'],
output: {
name: packageName,
...(preserveModules
? {
dir: `${outputDir}/${format}`,
exports: 'auto',
}
: {
file: `${outputDir}/${format}/${outputFileName}.js`,
}),
format: format === 'source' ? 'esm' : format,
preserveModules,
preserveModulesRoot: 'src',
sourcemap: true,
},
})),
)
.flat();

export default configs;
Loading

0 comments on commit ad1accb

Please sign in to comment.