Import fixes (#1039)

* fix packages imports

* imports check scripts

* update packages

* svelte build improvements

* build fix

.build/rollup-plugins.mjs

@@ -22,7 +22,7 @@ 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' }) => {
+    .map(({ inputs, format, minify, preserveModules, outputDir = 'dist', extension = 'js', exports = 'named' }) => {
       return inputs.map(input => ({
         input,
         plugins: getRollupPlugins(pkg, minify),
@@ -40,6 +40,8 @@ export const getRollupConfig = (pkg, outputFileName, bundles, globals) => {
           format,
           sourcemap: true,
           preserveModules,
+          preserveModulesRoot: 'src',
+          exports,
           globals,
         },
       }))

.gitignore

@@ -36,3 +36,4 @@ packages/icons*/icons/*
 .sass-cache
 
 !/**/.gitkeep
+*.tgz

packages/icons-preact/package.json

@@ -17,16 +17,13 @@
     "url": "git+https://github.com/tabler/tabler-icons.git",
     "directory": "packages/icons-preact"
   },
-  "amdName": "tabler-icons-preact",
+  "main": "./dist/cjs/tabler-icons-preact.cjs",
-  "main": "dist/cjs/tabler-icons-preact.js",
+  "types": "./dist/esm/tabler-icons-preact.d.ts",
-  "main:umd": "dist/umd/tabler-icons-preact.js",
+  "module": "./dist/esm/tabler-icons-preact.mjs",
-  "module": "dist/esm/tabler-icons-preact.mjs",
+  "sideEffects": false,
-  "unpkg": "dist/umd/tabler-icons-preact.min.js",
-  "typings": "dist/tabler-icons-preact.d.ts",
   "files": [
     "dist"
   ],
-  "sideEffects": false,
   "scripts": {
     "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm typecheck && pnpm run build:bundles",
     "build:icons": "node build.mjs",
@@ -34,7 +31,8 @@
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
     "test": "vitest run --typecheck",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "imports-check": "attw $(npm pack)"
   },
   "dependencies": {
     "@tabler/icons": "3.0.0"

packages/icons-preact/rollup.config.mjs

@@ -7,17 +7,9 @@ const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
 const outputFileName = 'tabler-icons-preact';
 const inputs = ['./src/tabler-icons-preact.ts'];
 const bundles = [
-  {
-    format: 'umd',
-    inputs,
-    minify: true,
-  },
-  {
-    format: 'umd',
-    inputs,
-  },
   {
     format: 'cjs',
+    extension: 'cjs',
     inputs,
   },
   {
@@ -32,7 +24,9 @@ export default [
   {
     input: inputs[0],
     output: [{
-      file: `dist/${outputFileName}.d.ts`, format: "es"
+      file: `dist/esm/${outputFileName}.d.ts`
+    }, {
+      file: `dist/cjs/${outputFileName}.d.cts`
     }],
     plugins: [dts()],
   },

packages/icons-react-native/package.json

@@ -18,13 +18,22 @@
     "directory": "packages/icons-react-native"
   },
   "type": "module",
-  "amdName": "tabler-icons-react-native",
+  "main": "./dist/cjs/tabler-icons-react-native.cjs",
-  "main": "dist/cjs/tabler-icons-react-native.js",
+  "types": "./dist/cjs/tabler-icons-react-native.d.cts",
-  "main:umd": "dist/umd/tabler-icons-react-native.js",
+  "module": "./dist/esm/tabler-icons-react-native.mjs",
-  "module": "dist/esm/tabler-icons-react-native.mjs",
+  "react-native": "./dist/esm/tabler-icons-react-native.mjs",
-  "unpkg": "dist/umd/tabler-icons-react-native.min.js",
+  "exports": {
-  "typings": "dist/tabler-icons-react-native.d.ts",
+    ".": {
-  "react-native": "dist/esm/tabler-icons-react-native.js",
+      "require": {
+        "types": "./dist/cjs/tabler-icons-react-native.d.cts",
+        "default": "./dist/cjs/tabler-icons-react-native.cjs"
+      },
+      "import": {
+        "types": "./dist/esm/tabler-icons-react-native.d.ts",
+        "default": "./dist/esm/tabler-icons-react-native.cjs"
+      }
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -35,7 +44,8 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "imports-check": "attw $(npm pack)"
   },
   "dependencies": {
     "@tabler/icons": "3.0.0"

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

@@ -10,6 +10,7 @@ const bundles = [
   {
     format: 'cjs',
     inputs,
+    extension: 'cjs',
   },
   {
     format: 'esm',
@@ -23,7 +24,9 @@ export default [
   {
     input: inputs[0],
     output: [{
-      file: `dist/${outputFileName}.d.ts`, format: "es"
+      file: `dist/esm/${outputFileName}.d.ts`
+    }, {
+      file: `dist/cjs/${outputFileName}.d.cts`
     }],
     plugins: [dts()],
   },

packages/icons-react/package.json

@@ -17,12 +17,9 @@
     "url": "git+https://github.com/tabler/tabler-icons.git",
     "directory": "packages/icons-react"
   },
-  "type": "module",
+  "main": "./dist/cjs/tabler-icons-react.cjs",
-  "main": "dist/cjs/tabler-icons-react.js",
+  "types": "./dist/esm/tabler-icons-react.d.ts",
-  "main:umd": "dist/umd/tabler-icons-react.js",
+  "module": "./dist/esm/tabler-icons-react.mjs",
-  "module": "dist/esm/tabler-icons-react.mjs",
-  "unpkg": "dist/umd/tabler-icons-react.min.js",
-  "typings": "dist/tabler-icons-react.d.ts",
   "sideEffects": false,
   "files": [
     "dist"
@@ -34,7 +31,8 @@
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
     "test": "vitest run --typecheck",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "imports-check": "attw $(npm pack)"
   },
   "dependencies": {
     "@tabler/icons": "3.0.0"
@@ -48,6 +46,6 @@
     "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
-    "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+    "react": ">= 16"
   }
 }

packages/icons-react/rollup.config.mjs

@@ -7,17 +7,9 @@ const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
 const outputFileName = 'tabler-icons-react';
 const inputs = ['./src/tabler-icons-react.ts'];
 const bundles = [
-  {
-    format: 'umd',
-    inputs,
-    minify: true,
-  },
-  {
-    format: 'umd',
-    inputs,
-  },
   {
     format: 'cjs',
+    extension: 'cjs',
     inputs,
   },
   {
@@ -32,10 +24,13 @@ export default [
   {
     input: inputs[0],
     output: [{
-      file: `dist/${outputFileName}.d.ts`, format: "es"
+      file: `dist/esm/${outputFileName}.d.ts`, format: 'esm'
+    }, {
+      file: `dist/cjs/${outputFileName}.d.cts`, format: 'cjs'
     }],
     plugins: [dts()],
   },
+
   ...getRollupConfig(pkg, outputFileName, bundles, {
     react: 'react'
   })

packages/icons-solidjs/package.json

@@ -17,23 +17,12 @@
     "url": "git+https://github.com/tabler/tabler-icons.git",
     "directory": "packages/icons-solidjs"
   },
-  "source": "src/tabler-icons-solidjs.ts",
+  "main": "./dist/cjs/tabler-icons-solidjs.cjs",
-  "main": "dist/cjs/tabler-icons-solidjs.js",
+  "module": "./dist/esm/tabler-icons-solidjs.mjs",
-  "module": "dist/esm/tabler-icons-solidjs.mjs",
+  "types": "./dist/cjs/tabler-icons-solidjs.d.cts",
-  "types": "dist/types/tabler-icons-solidjs.d.ts",
   "files": [
     "dist"
   ],
-  "exports": {
-    ".": {
-      "types": "./dist/types/tabler-icons-solidjs.d.ts",
-      "solid": "./dist/source/tabler-icons-solidjs.js",
-      "import": "./dist/esm/tabler-icons-solidjs.js",
-      "browser": "./dist/esm/tabler-icons-solidjs.js",
-      "require": "./dist/cjs/tabler-icons-solidjs.js",
-      "node": "./dist/cjs/tabler-icons-solidjs.js"
-    }
-  },
   "scripts": {
     "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm typecheck && pnpm run build:bundles",
     "build:icons": "node build.mjs",
@@ -41,7 +30,8 @@
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
     "test": "vitest run",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "imports-check": "attw $(npm pack)"
   },
   "dependencies": {
     "@tabler/icons": "3.0.0"

packages/icons-solidjs/rollup.config.mjs

@@ -7,17 +7,9 @@ const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
 const outputFileName = 'tabler-icons-solidjs';
 const inputs = ['./src/tabler-icons-solidjs.ts'];
 const bundles = [
-  {
-    format: 'umd',
-    inputs,
-    minify: true,
-  },
-  {
-    format: 'umd',
-    inputs,
-  },
   {
     format: 'cjs',
+    extension: 'cjs',
     inputs,
   },
   {
@@ -32,7 +24,9 @@ export default [
   {
     input: inputs[0],
     output: [{
-      file: `dist/${outputFileName}.d.ts`, format: "es"
+      file: `dist/esm/${outputFileName}.d.ts`
+    }, {
+      file: `dist/cjs/${outputFileName}.d.cts`
     }],
     plugins: [dts()],
   },

packages/icons-svelte/build.mjs

@@ -1,6 +1,36 @@
 #!/usr/bin/env node
 
 import { buildJsIcons } from '../../.build/build-icons.mjs'
+import { readFileSync, writeFileSync } from 'fs'
+import { getAllIcons, toPascalCase } from '../../.build/helpers.mjs'
+
+const updatePackageJson = () => {
+  let packageJson = JSON.parse(readFileSync('package.json', 'utf-8'))
+
+  if (packageJson.exports) {
+    for (const key in packageJson.exports) {
+      if (key.match(/^\.\/[^\.]+\.svelte$/)) {
+        delete packageJson.exports[key]
+      }
+    }
+  }
+
+  const allIcons = getAllIcons(false, false)
+
+  Object.entries(allIcons).forEach(([type, icons]) => {
+    icons.forEach((icon, i) => {
+      const iconName = `${icon.name}${type !== 'outline' ? `-${type}` : ''}`,
+        iconNamePascal = `${icon.namePascal}${type !== 'outline' ? toPascalCase(type) : ''}`
+
+      packageJson.exports[`./${iconNamePascal}.svelte`] = {
+        types: `./dist/icons/${iconName}.svelte.d.ts`,
+        svelte: `./dist/icons/${iconName}.svelte`
+      }
+    })
+  })
+
+  writeFileSync('package.json', JSON.stringify(packageJson, null, 2))
+}
 
 const componentTemplate = ({
   type,
@@ -40,3 +70,5 @@ buildJsIcons({
   indexFile: 'index.ts',
   pascalName: false,
 })
+
+updatePackageJson()

packages/icons-vue/package.json

@@ -17,13 +17,9 @@
     "url": "git+https://github.com/tabler/tabler-icons.git",
     "directory": "packages/icons-vue"
   },
-  "amdName": "tabler-icons-vue",
+  "main": "./dist/cjs/tabler-icons-vue.cjs",
-  "main": "dist/cjs/tabler-icons-vue.js",
+  "module": "./dist/esm/tabler-icons-vue.mjs",
-  "main:umd": "dist/umd/tabler-icons-vue.js",
+  "types": "./dist/esm/tabler-icons-vue.d.ts",
-  "module": "dist/esm/tabler-icons-vue.mjs",
-  "unpkg": "dist/umd/tabler-icons-vue.min.js",
-  "typings": "dist/tabler-icons-vue.d.ts",
-  "sideEffects": false,
   "files": [
     "dist"
   ],
@@ -33,7 +29,8 @@
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +",
-    "test": "vitest run"
+    "test": "vitest run",
+    "imports-check": "attw $(npm pack)"
   },
   "dependencies": {
     "@tabler/icons": "3.0.0"

packages/icons-vue/rollup.config.mjs

@@ -7,17 +7,9 @@ const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
 const outputFileName = 'tabler-icons-vue';
 const inputs = ['./src/tabler-icons-vue.ts'];
 const bundles = [
-  {
-    format: 'umd',
-    inputs,
-    minify: true,
-  },
-  {
-    format: 'umd',
-    inputs,
-  },
   {
     format: 'cjs',
+    extension: 'cjs',
     inputs,
   },
   {
@@ -32,7 +24,9 @@ export default [
   {
     input: inputs[0],
     output: [{
-      file: `dist/${outputFileName}.d.ts`, format: "es"
+      file: `dist/esm/${outputFileName}.d.ts`, format: 'esm'
+    }, {
+      file: `dist/cjs/${outputFileName}.d.cts`, format: 'cjs'
     }],
     plugins: [
       dts({

test/test-svelte/src/App.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { IconAd, IconAdOff, IconAdFilled } from "@tabler/icons-svelte";
+  import IconAd from "@tabler/icons-svelte/IconAd.svelte";
+  import IconAdOff from "@tabler/icons-svelte/IconAdOff.svelte";
+  import IconAdFilled from "@tabler/icons-svelte/IconAdFilled.svelte";
   let active = false;
 </script>
 

turbo.json

@@ -19,6 +19,9 @@
     },
     "typecheck": {
       "dependsOn": ["build", "^build"]
+    },
+    "imports-check": {
+      "dependsOn": ["build", "^build"]
     }
   }
 }