update build options

Author: simeydotme

package-lock.json

@@ -12,7 +12,7 @@
     "build:svelte": "svelte-kit sync && svelte-package -o dist/svelte && publint",
     "build:vanilla": "rollup -c",
     "preview": "vite preview",
-    "prepublishOnly": "npm run package",
+    "prepublishOnly": "npm run build",
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -21,14 +21,24 @@
     "lint": "prettier --check .",
     "format": "prettier --write ."
   },
+  "type": "module",
+  "module": "./dist/range-slider-pips.mjs",
+  "main": "./dist/range-slider-pips.js",
+  "svelte": "./dist/svelte/index.js",
+  "types": "./dist/svelte/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/svelte/index.d.ts",
-      "svelte": "./dist/svelte/index.js"
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/range-slider-pips.mjs",
+      "require": "./dist/range-slider-pips.js",
+      "style": "./dist/range-slider-pips.css"
+    },
+    "./dist/*.css": {
+      "import": "./dist/range-slider-pips.css",
+      "require": "./dist/range-slider-pips.css"
     }
   },
-  "module": "./dist/es/range-slider-pips.mjs",
-  "main": "./dist/umd/range-slider-pips.js",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -47,12 +57,14 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/node": "^20.11.16",
     "globby": "^14.0.0",
     "prettier": "^3.1.1",
     "prettier-plugin-svelte": "^3.1.2",
     "publint": "^0.1.9",
     "rollup": "^4.9.6",
     "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-svelte": "^7.1.6",
     "svelte": "^4.2.7",
@@ -63,9 +75,6 @@
     "vite": "^5.0.11",
     "vitest": "^1.2.0"
   },
-  "svelte": "./dist/svelte/index.js",
-  "types": "./dist/svelte/index.d.ts",
-  "type": "module",
   "keywords": [
     "svelte",
     "component",

package.json

@@ -1,3 +1,6 @@
+
+import fs from 'fs';
+import del from 'rollup-plugin-delete'
 import svelte from 'rollup-plugin-svelte';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
@@ -7,17 +10,27 @@ import typescript from '@rollup/plugin-typescript';
 import css from 'rollup-plugin-css-only';
 
 import { globbySync } from 'globby';
-import pkg from './package.json' with { type: 'json' };
 
-const name = pkg.name
+const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'));
+
+// for use with exports options
+const packageName = pkg.name
 	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
+
+// this is the name of the component when imported
+// like: import { Component } from 'package' or require('package').Component
+// and: const myComponent = new Component();
+const moduleName = packageName
 	.replace(/^\w/, (m) => m.toUpperCase())
 	.replace(/-\w/g, (m) => m[1].toUpperCase());
 
+	// banner to be added to the top of each generated file
 const banner = `/**
  * ${pkg.name} ~ ${pkg.version}
  * ${pkg.description || ''}
- * © MPL-2.0 ~ ${pkg.author} ~ ${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()}
+ * ${pkg.homepage ? `Project home: ${pkg.homepage}` : ''}
+ * © ${new Date().getFullYear()} ${pkg.author} ~ ${pkg.license} License
+ * Published: ${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()} @ ${new Date().getHours()}:${new Date().getMinutes()}
  */`;
 
 const production = !process.env.ROLLUP_WATCH;
@@ -29,19 +42,20 @@ const exports = components.map((component) => ({
 	input: `src/lib/components/${component}.svelte`,
 	output: [
 		{
-			file: pkg.module,
+			file: pkg.exports['.'].import,
 			format: 'es',
-			name,
+			name: moduleName,
 			banner
 		},
 		{
-			file: pkg.main,
+			file: pkg.exports['.'].require,
 			format: 'umd',
-			name,
+			name: moduleName,
 			banner
 		}
 	],
 	plugins: [
+		del({ targets: 'dist/*' }),
 		svelte({
 			preprocess: autoPreprocess(),
 			compilerOptions: {
@@ -50,7 +64,7 @@ const exports = components.map((component) => ({
 			}
 		}),
 		typescript(),
-		css({ output: 'range-slider-pips.css' }),
+		css({ output: pkg.exports['.'].style.split('/').at(-1) }),
 		resolve({
 			browser: true,
 			dedupe: ['svelte']