deps: updated template

- should fix any potential non-externalized deps problems

package.json

@@ -43,7 +43,7 @@
 		"gen:exports": "indexit update --ignore {Units,utils,internal}.ts -o '${path}.js'"
 	},
 	"dependencies": {
-		"@alanscodelog/utils": "4.0.0-beta.5"
+		"@alanscodelog/utils": "4.0.0-beta.9"
 	},
 	"peerDependencies": {
 		"colorjs.io": "^0.4.3",
@@ -59,22 +59,22 @@
 	},
 	"devDependencies": {
 		"@alanscodelog/commitlint-config": "^2.0.0",
-		"@alanscodelog/eslint-config": "^4.0.3",
+		"@alanscodelog/eslint-config": "^4.0.4",
 		"@alanscodelog/semantic-release-config": "^3.0.0",
-		"@alanscodelog/tsconfigs": "^3.1.3",
-		"@types/node": "^20.4.1",
-		"@typescript-eslint/eslint-plugin": "^5.61.0",
-		"@typescript-eslint/parser": "^5.61.0",
+		"@alanscodelog/tsconfigs": "^3.2.0",
+		"@types/node": "^20.4.2",
+		"@typescript-eslint/eslint-plugin": "^6.1.0",
+		"@typescript-eslint/parser": "^6.1.0",
 		"@vitest/coverage-c8": "^0.33.0",
 		"@vue/eslint-config-typescript": "^11.0.3",
 		"colorjs.io": "^0.4.5",
-		"commitlint": "^17.6.6",
+		"commitlint": "^17.6.7",
 		"concurrently": "^8.2.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.44.0",
+		"eslint": "^8.45.0",
 		"eslint-import-resolver-typescript": "^3.5.5",
 		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-jsdoc": "^46.4.3",
+		"eslint-plugin-jsdoc": "^46.4.4",
 		"eslint-plugin-simple-import-sort": "^10.0.0",
 		"eslint-plugin-vue": "^9.15.1",
 		"fast-glob": "^3.3.0",
@@ -85,12 +85,14 @@
 		"madge": "^6.1.0",
 		"onchange": "^7.1.0",
 		"semantic-release": "^21.0.7",
-		"tailwindcss": "^3.3.2",
+		"tailwindcss": "^3.3.3",
 		"ts-node": "^10.9.1",
 		"tsc-alias": "^1.8.7",
 		"typedoc": "^0.24.8",
 		"typescript": "^5.1.6",
-		"vite": "^4.4.2",
+		"vite": "^4.4.4",
+		"vite-plugin-dts": "^3.3.1",
+		"vite-plugin-externalize-deps": "^0.7.0",
 		"vite-tsconfig-paths": "^4.2.0",
 		"vitest": "^0.33.0"
 	},

src/Base.ts

@@ -1,19 +1,23 @@
 export class Base {
 	protected _dependants: Base[] = []
+
 	addDep(dep: any): void {
 		this._dependants.push(dep)
 	}
+
 	removeDep(dep: any): void {
 		const i = this._dependants.indexOf(dep)
 		if (i >= 0) {
 			this._dependants.slice(i, 1)
 		}
 	}
+
 	protected _notify(): void {
 		for (const dep of this._dependants) {
 			dep.notify(this)
 		}
 	}
+
 	protected notify(..._any: any[]): void {
 		throw new Error("Extending class must implement.")
 	}

src/ControlVar.ts

@@ -31,7 +31,9 @@ export class ControlVar<
 		TVal extends Record<string, any> ? TVal : Record<"_", MakePrimitive<TVal>>,
 > extends Base {
 	unit: (value: TUnit) => string
+
 	value!: TUnit
+
 	css: string = ""
 
 	constructor(
@@ -43,14 +45,17 @@ export class ControlVar<
 		this.unit = unit
 		this.set(value as any)
 	}
+
 	set(value: MakePrimitive<TVal> | TUnit): void {
 		this.value = (["number", "string", "boolean"].includes(typeof value) ? { _: value } : value) as TUnit
 		this.notify()
 	}
+
 	protected notify(): void {
 		this.recompute()
 		this._notify()
 	}
+
 	protected recompute(): void {
 		this.css = this.unit(this.value)
 	}

src/InterpolatedVars.ts

@@ -62,11 +62,17 @@ export class InterpolatedVars<
 	TUnit extends Record<string, any> = Record<string, any>,
 > extends Base {
 	name: string
+
 	unit: (value: TUnit) => string
+
 	values!: Value<TUnit>
+
 	ready: boolean = false
+
 	value: Record<string, any>[] = []
+
 	interpolated: Record<string, string> = {}
+
 	options: InterpolatedVarsOptions<ControlVar<any, TUnit>> = {
 		roundTo: 3,
 		exclude: [],
@@ -76,6 +82,7 @@ export class InterpolatedVars<
 		separator: "-",
 		steps: 10,
 	}
+
 	constructor(
 		name: string,
 		unit: (value: TUnit) => string,
@@ -92,10 +99,12 @@ export class InterpolatedVars<
 		this.ready = true
 		this.notify()
 	}
+
 	setOpts(value: Partial<InterpolatedVarsOptions<ControlVar<any, TUnit>>>): void {
 		this.options = { ...this.options, ...value }
 		if (this.ready) { this.notify() }
 	}
+
 	set(value: Value<TUnit>): void {
 		// :/ https://github.com/microsoft/TypeScript/issues/50652
 		type Stop = StopEntry<TUnit>
@@ -121,10 +130,12 @@ export class InterpolatedVars<
 
 		if (this.ready) { this.notify() }
 	}
+
 	protected notify(): void {
 		this.recompute()
 		this._notify()
 	}
+
 	protected recompute(): void {
 		const valRes: Record<string, any>[] = []
 		const interpolatedRes: Record<string, string> = {}

src/Theme.ts

@@ -11,31 +11,40 @@ import { escapeKey } from "./utils.js"
  */
 export class Theme<TValues extends Record<string, InterpolatedVars<any> | ControlVar<any, any>> = Record<string, InterpolatedVars<any> | ControlVar<any, any>>> extends Base {
 	protected ready: boolean = false
+
 	els: HTMLElement[] = []
+
 	css: Record<string, string> = {}
+
 	value: TValues = {} as any
+
 	options: { escapeChar: string } = {
 		/** For replacing invalid css variable key characters. */
 		escapeChar: "-",
 	}
+
 	protected _listeners: Record<string, (() => void) []> = { change: []}
+
 	constructor(value: TValues, opts: Partial<Theme<TValues>["options"]> = {}) {
 		super()
 		this.add(value)
 		this.setOpts(opts)
 		this.recompute(false)
 		this.ready = true
 	}
+
 	setOpts(value: Partial<Theme<TValues>["options"]> = {}): void {
 		this.options = { ...this.options, ...value }
 		if (!this.ready) return
 		this.notify()
 	}
+
 	add(value: Record<string, ControlVar<any, any> | InterpolatedVars<any> >): void {
 		for (const key of keys(value)) {
 			this._add(key, value[key])
 		}
 	}
+
 	protected _add(key: string, value: InterpolatedVars<any> | ControlVar<any, any>): void {
 		if (this.value[key]) throw new Error(`Key ${key} already exists in theme. Use set to change the value.`)
 		if (this.ready) { this.value[key]?.removeDep(this) }
@@ -46,6 +55,7 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 
 		if (this.ready) { this.notify() }
 	}
+
 	remove(key: string): void {
 		if (!this.value[key]) return
 		if (this.ready) { this.value[key]?.removeDep(this) }
@@ -57,6 +67,7 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 		// NOTE the use of _, we don't need to recompute other keys
 		if (this.ready) { this.notify() }
 	}
+
 	set(key: string, value: InterpolatedVars<any> | ControlVar<any, any>): void {
 		if (this.ready) { this.value[key]?.removeDep(this) }
 
@@ -66,6 +77,7 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 
 		if (this.ready) { this.notify({ recompute: false }) }
 	}
+
 	protected notify({ recompute = true }: { recompute?: boolean } = {}): void {
 		if (!this.ready) return
 		if (recompute) this.recompute(false)
@@ -77,15 +89,18 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 			this._lastPropertiesSet = Theme.setElVariables(el, this.css, this._lastPropertiesSet)
 		}
 	}
+
 	on(type: "change", cb: () => void): void {
 		this._listeners[type].push(cb)
 	}
+
 	off(type: "change", cb: () => void): void {
 		const i = this._listeners[type].findIndex(cb)
 		if (i > -1) {
 			this._listeners[type].splice(i, 1)
 		}
 	}
+
 	protected _generateCss(
 		res: Record<string, string>,
 		key: string,
@@ -127,7 +142,9 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 		}
 		this.css = res
 	}
+
 	protected _lastPropertiesSet: string[] = []
+
 	// todo move to utils?
 	/**
 	 * Set css variables on an element.
@@ -147,6 +164,7 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 		}
 		return newLastPropertiesSet
 	}
+
 	/**
 	 * Attach to an element and automatically set and update the theme's properties on it.
 	 *
@@ -156,6 +174,7 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 		this.els.push(el)
 		this._lastPropertiesSet = Theme.setElVariables(el, this.css, this._lastPropertiesSet)
 	}
+
 	detach(el: HTMLElement = document.documentElement): void {
 		const existing = this.els.indexOf(el)
 		if (existing >= 0) {
@@ -168,6 +187,7 @@ export class Theme<TValues extends Record<string, InterpolatedVars<any> | Contro
 			console.warn("Was not attached to element:", el)
 		}
 	}
+
 	/**
 	 * Write theme variables to get autocomplete while developing. Only works from node.
 	 *

tests/BaseTheme.spec.ts

@@ -1,4 +1,5 @@
-import { keys, pretty, testName } from "@alanscodelog/utils"
+import { keys } from "@alanscodelog/utils"
+import { testName } from "@alanscodelog/utils/testing"
 import { describe, expect, it } from "vitest"
 
 import { baseTheme } from "../src/BaseTheme.js"

tests/ControlVar.spec.ts

@@ -1,4 +1,4 @@
-import { testName } from "@alanscodelog/utils"
+import { testName } from "@alanscodelog/utils/testing"
 import { describe, expect, it } from "vitest"
 
 import { ControlVar } from "../src/ControlVar.js"

tests/InterpolatedVar.spec.ts

@@ -1,4 +1,4 @@
-import { expectType, testName } from "@alanscodelog/utils"
+import { expectType, testName } from "@alanscodelog/utils/testing"
 import { describe, expect, it } from "vitest"
 
 import { ControlVar } from "../src/ControlVar.js"

tests/README.spec.ts

@@ -1,4 +1,4 @@
-import { testName } from "@alanscodelog/utils"
+import { testName } from "@alanscodelog/utils/testing"
 import Color from "colorjs.io"
 import { describe, it } from "vitest"
 

tests/Theme.spec.ts

@@ -1,4 +1,4 @@
-import { testName } from "@alanscodelog/utils"
+import { testName } from "@alanscodelog/utils/testing"
 import { describe, expect, it, vi } from "vitest"
 
 import { ControlVar } from "../src/ControlVar.js"

tests/template.ts

@@ -1,4 +1,4 @@
-import { testName } from "@alanscodelog/utils"
+import { testName } from "@alanscodelog/utils/testing"
 import { describe, expect, it } from "vitest"
 
 

tsconfig.json

@@ -8,11 +8,12 @@
 		"target": "ESNext",
 		"outDir": "dist",
 		// "baseUrl": "src",
-		"lib": [  "dom",  "esnext" ],
-		"noErrorTruncation":true,
-		"importsNotUsedAsValues": "remove", // todo - workaround for https://github.com/microsoft/TypeScript/issues/53302 - must remove from main config package
+		"lib": [
+			"dom",
+			"esnext"
+		],
+		"noErrorTruncation": true,
 		"verbatimModuleSyntax": true,
-
 		"moduleResolution": "bundler"
 	},
 	"include": [