Improve build speed (#1382)

.build/build-icons.mjs

@@ -68,7 +68,7 @@ export const buildJsIcons = ({
       let filePath = path.resolve(
         DIST_DIR,
         'src/icons',
-        `${pascalName ? iconNamePascal : iconName}.${extension}`,
+        `${pascalName ? `Icon${iconNamePascal}` : iconName}.${extension}`,
       );
       fs.writeFileSync(filePath, component, 'utf-8');
 
@@ -138,7 +138,7 @@ export const buildIconsDynamicImport = (name) => {
       const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`,
         iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`;
 
-      dynamicImportString += `  '${iconName}': () => import('./icons/${iconNamePascal}'),\n`;
+      dynamicImportString += `  '${iconName}': () => import('./icons/Icon${iconNamePascal}'),\n`;
     });
   });
 

.build/helpers.mjs

@@ -77,7 +77,7 @@ export const getAllIcons = (withContent = false, withObject = false) => {
 
         return {
           name,
-          namePascal: toPascalCase(`icon ${name}`),
+          namePascal: toPascalCase(`${name}`),
           path: i,
           category: data.category || '',
           tags: data.tags || [],
@@ -529,7 +529,7 @@ export const getMaxUnicode = () => {
   let maxUnicode = 0;
 
   files.forEach(function (file) {
-    const svgFile = fs.readFileSync(file).toString();
+    const svgFile = readFileSync(file).toString();
 
     svgFile.replace(/unicode: "([a-f0-9.]+)"/i, function (m, unicode) {
       const newUnicode = parseInt(unicode, 16);

.build/import-categories.mjs

@@ -19,7 +19,7 @@ extensions.forEach(function (extension) {
 
       if (categoryOriginal || tagsOriginal) {
 
-        let data = fs.readFileSync(file).toString()
+        let data = readFileSync(file).toString()
         data = data.replace(/(\<\!--[\s\S]+?-->)/, function (m, headerContent) {
           console.log('categoryOriginal', fileOriginal, categoryOriginal && categoryOriginal[1], tagsOriginal && tagsOriginal[1])
 

.build/import.mjs

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import { readFileSync } from 'fs'
 import { glob } from 'glob'
 import { resolve, basename } from 'path'
 import { HOME_DIR, optimizeSVG, iconTemplate, types } from './helpers.mjs'
@@ -7,7 +7,7 @@ types.forEach(type => {
   const files = glob.sync(resolve(HOME_DIR, `./new/${type}/*.svg`))
 
   files.forEach(function (file, i) {
-    let fileData = fs.readFileSync(file).toString(),
+    let fileData = readFileSync(file).toString(),
       filename = basename(file, '.svg')
 
     console.log(`${type}/${filename}`)

.build/rollup-plugins.mjs

@@ -1,18 +1,25 @@
 import { visualizer } from 'rollup-plugin-visualizer'
 import license from 'rollup-plugin-license'
 import esbuild from 'rollup-plugin-esbuild'
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import bundleSize from '@atomico/rollup-plugin-sizes';
 
 const getRollupPlugins = (pkg, minify) => {
   return [
     esbuild({
       minify
     }),
+    nodeResolve({
+      extensions: ['.js', '.ts', '.jsx', '.tsx'],
+      // resolveOnly: [/^@tabler\/.*$/],
+    }),
     license({
       banner: `@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.`
     }),
+    bundleSize(),
     visualizer({
       sourcemap: false,
       filename: `stats/${pkg.name}${minify ? '-min' : ''}.html`
@@ -22,11 +29,22 @@ See the LICENSE file in the root directory of this source tree.`
 
 export const getRollupConfig = (pkg, outputFileName, bundles, globals) => {
   return bundles
-    .map(({ inputs, format, minify, preserveModules, outputDir = 'dist', extension = 'js', exports = 'named' }) => {
+    .map(({
+      inputs,
+      format,
+      minify,
+      preserveModules,
+      outputDir = 'dist',
+      extension = 'js',
+      exports = 'named',
+      outputFile,
+      external = [],
+      paths
+    }) => {
       return inputs.map(input => ({
         input,
         plugins: getRollupPlugins(pkg, minify),
-        external: Object.keys(globals),
+        external: [...Object.keys(globals), ...external],
         output: {
           name: pkg.name,
           ...(preserveModules
@@ -35,14 +53,15 @@ export const getRollupConfig = (pkg, outputFileName, bundles, globals) => {
               entryFileNames: `[name].${extension}`,
             }
             : {
-              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.${extension}`,
+              file: outputFile ?? `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.${extension}`,
             }),
           format,
           sourcemap: true,
           preserveModules,
           preserveModulesRoot: 'src',
-          exports,
           globals,
+          exports,
+          paths
         },
       }))
     })

.build/update-icons.mjs

@@ -1,5 +1,5 @@
 import { globSync } from 'glob'
-import fs from 'fs'
+import { readFileSync, writeFileSync } from 'fs'
 import path from 'path'
 import { ICONS_SRC_DIR, getMaxUnicode, getArgvs, getPackageJson } from './helpers.mjs'
 
@@ -12,7 +12,7 @@ const files = globSync(path.join(ICONS_SRC_DIR, '**/*.svg'))
 let maxUnicode = getMaxUnicode()
 
 files.forEach(function (file) {
-  let svgFile = fs.readFileSync(file).toString()
+  let svgFile = readFileSync(file).toString()
 
   // Add unicode to svg files
   if (!svgFile.match(/\nunicode: "?([a-f0-9.]+)"?/i)) {
@@ -25,7 +25,7 @@ files.forEach(function (file) {
       })
 
       console.log(`Add unicode "${unicode}" to "${file}"`)
-      fs.writeFileSync(file, svgFile, 'utf8')
+      writeFileSync(file, svgFile, 'utf8')
     }
   }
 
@@ -43,7 +43,7 @@ files.forEach(function (file) {
       console.log(svgFile);
 
       console.log(`Add version "${minorVersion}" to "${file}"`)
-      fs.writeFileSync(file, svgFile, 'utf8')
+      writeFileSync(file, svgFile, 'utf8')
     }
   }
 })

package.json

@@ -51,7 +51,9 @@
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
+    "@atomico/rollup-plugin-sizes": "^1.1.4",
     "@release-it-plugins/workspaces": "^4.2.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
     "@testing-library/jest-dom": "^6.4.2",
     "adm-zip": "^0.5.10",
     "cheerio": "^1.0.0-rc.12",

packages/icons-preact/build.mjs

@@ -14,7 +14,7 @@ export default createPreactComponent('${type}', '${name}', '${namePascal}', ${JS
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './${namePascal}';`
+}) => `export { default as Icon${namePascal} } from './Icon${namePascal}';`
 
 const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 

packages/icons-preact/package.json

@@ -18,7 +18,7 @@
     "directory": "packages/icons-preact"
   },
   "main": "./dist/cjs/tabler-icons-preact.cjs",
-  "types": "./dist/esm/tabler-icons-preact.d.ts",
+  "types": "./dist/tabler-icons-preact.d.ts",
   "module": "./dist/esm/tabler-icons-preact.mjs",
   "amdName": "TablerIconsPreact",
   "sideEffects": false,

packages/icons-preact/rollup.config.mjs

@@ -23,11 +23,12 @@ const bundles = [
 export default [
   {
     input: inputs[0],
-    output: [{
-      file: `dist/esm/${outputFileName}.d.ts`
-    }, {
-      file: `dist/cjs/${outputFileName}.d.cts`
-    }],
+    output: [
+      {
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
+      },
+    ],
     plugins: [dts()],
   },
   ...getRollupConfig(pkg, outputFileName, bundles, {

packages/icons-react-native/build.mjs

@@ -14,7 +14,7 @@ export default createReactNativeComponent('${type}', '${name}', '${namePascal}',
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './${namePascal}';`
+}) => `export { default as Icon${namePascal} } from './Icon${namePascal}';`
 
 const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 

packages/icons-react-native/package.json

@@ -30,7 +30,7 @@
         "default": "./dist/cjs/tabler-icons-react-native.cjs"
       },
       "import": {
-        "types": "./dist/esm/tabler-icons-react-native.d.ts",
+        "types": "./dist/tabler-icons-react-native.d.ts",
         "default": "./dist/esm/tabler-icons-react-native.mjs"
       }
     },
@@ -40,7 +40,7 @@
         "default": "./dist/cjs/icons/*.cjs"
       },
       "import": {
-        "types": "./dist/esm/icons/*.d.ts",
+        "types": "./dist/icons/*.d.ts",
         "default": "./dist/esm/icons/*.mjs"
       }
     }

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

@@ -26,12 +26,8 @@ export default [
     input: inputs[0],
     output: [
       {
-        dir: `dist/esm`,
-        preserveModules: true,
-      },
-      {
-        dir: `dist/cjs`,
-        preserveModules: true,
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
       },
     ],
     plugins: [dts()],

packages/icons-react/build.mjs

@@ -8,10 +8,16 @@ import {
 
 const componentTemplate = ({ type, name, namePascal, children }) => `\
 import createReactComponent from '../createReactComponent';
-export default createReactComponent('${type}', '${name}', '${namePascal}', ${JSON.stringify(children)});`;
+import { IconNode } from '../types';
+
+export const __iconNode: IconNode = ${JSON.stringify(children)}
+
+const Icon${namePascal} = createReactComponent('${type}', '${name}', '${namePascal}', __iconNode);
+
+export default Icon${namePascal};`;
 
 const indexItemTemplate = ({ name, namePascal }) =>
-  `export { default as ${namePascal} } from './${namePascal}';`;
+  `export { default as Icon${namePascal} } from './Icon${namePascal}';`;
 
 const aliasTemplate = ({ fromPascal, toPascal }) =>
   `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`;

packages/icons-react/package.json

@@ -18,8 +18,8 @@
     "directory": "packages/icons-react"
   },
   "main": "./dist/cjs/tabler-icons-react.cjs",
-  "types": "./dist/esm/tabler-icons-react.d.ts",
   "module": "./dist/esm/tabler-icons-react.mjs",
+  "types": "./dist/tabler-icons-react.d.ts",
   "amdName": "TablerIconsReact",
   "sideEffects": false,
   "files": [

packages/icons-react/rollup.config.mjs

@@ -18,6 +18,13 @@ const bundles = [
     preserveModules: true,
     inputs,
   },
+  {
+    format: 'esm',
+    extension: 'mjs',
+    preserveModules: true,
+    inputs: ['./src/dynamic-imports.ts'],
+    external: [/src\/icons/],
+  },
 ];
 
 export default [
@@ -25,12 +32,8 @@ export default [
     input: inputs[0],
     output: [
       {
-        dir: `dist/esm`,
-        preserveModules: true,
-      },
-      {
-        dir: `dist/cjs`,
-        preserveModules: true,
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
       },
     ],
     plugins: [dts()],

packages/icons-react/src/tabler-icons-react.ts

@@ -1,7 +1,7 @@
-export * from './icons/index';
-export * as icons from './icons/index';
+export * from './icons';
+export * as icons from './icons';
 export * as iconsList from './icons-list';
 export * from './aliases';
-export { default as createReactComponent } from './createReactComponent';
+export * from './types';
 
-export type { Icon, IconNode, IconProps, TablerIcon } from './types';
+export { default as createReactComponent } from './createReactComponent';

packages/icons-react/tsconfig.json

@@ -14,6 +14,7 @@
     "skipLibCheck": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "downlevelIteration": true,
     "sourceMap": true,
     "outDir": "./dist",
@@ -21,4 +22,5 @@
     "types": ["@testing-library/jest-dom"]
   },
   "exclude": ["**/node_modules"],
+  "include": ["src"]
 }

packages/icons-solidjs/build.js

@@ -14,7 +14,7 @@ export default createSolidComponent('${type}', '${name}', '${namePascal}', ${JSO
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './${namePascal}';`
+}) => `export { default as Icon${namePascal} } from './Icon${namePascal}';`
 
 const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 

packages/icons-solidjs/package.json

@@ -23,7 +23,7 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/esm/tabler-icons-solidjs.d.ts",
+        "types": "./dist/tabler-icons-solidjs.d.ts",
         "default": "./dist/esm/tabler-icons-solidjs.js"
       },
       "require": {

packages/icons-solidjs/rollup.config.js

@@ -23,11 +23,12 @@ const bundles = [
 export default [
   {
     input: inputs[0],
-    output: [{
-      file: `dist/esm/${outputFileName}.d.ts`, format: 'esm'
-    }, {
-      file: `dist/cjs/${outputFileName}.d.cts`, format: 'cjs'
-    }],
+    output: [
+      {
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
+      },
+    ],
     plugins: [dts()],
   },
   ...getRollupConfig(pkg, outputFileName, bundles, {

packages/icons-svelte/build.mjs

@@ -28,7 +28,7 @@ const aliasTemplate = ({ fromPascal, to }) => `export { default as Icon${fromPas
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './${name}.svelte';`
+}) => `export { default as Icon${namePascal} } from './${name}.svelte';`
 
 buildJsIcons({
   name: 'icons-svelte',

packages/icons-vue/build.mjs

@@ -14,7 +14,7 @@ export default createVueComponent('${type}', '${name}', '${namePascal}', ${JSON.
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './${namePascal}';`
+}) => `export { default as Icon${namePascal} } from './Icon${namePascal}';`
 
 const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 

packages/icons-vue/package.json

@@ -19,7 +19,7 @@
   },
   "main": "./dist/cjs/tabler-icons-vue.cjs",
   "module": "./dist/esm/tabler-icons-vue.mjs",
-  "types": "./dist/esm/tabler-icons-vue.d.ts",
+  "types": "./dist/tabler-icons-vue.d.ts",
   "amdName": "TablerIconsVue",
   "files": [
     "dist"

packages/icons-vue/rollup.config.mjs

@@ -23,11 +23,12 @@ const bundles = [
 export default [
   {
     input: inputs[0],
-    output: [{
-      file: `dist/esm/${outputFileName}.d.ts`, format: 'esm'
-    }, {
-      file: `dist/cjs/${outputFileName}.d.cts`, format: 'cjs'
-    }],
+    output: [
+      {
+        file: `dist/${outputFileName}.d.ts`,
+        format: 'es',
+      },
+    ],
     plugins: [
       dts({
         compilerOptions: {