Feat: Upgrade to tailwind 4

.changeset/chilly-yaks-listen.md

@@ -0,0 +1,13 @@
+---
+'@evidence-dev/tailwind': patch
+---
+
+[!] BREAKING CHANGE:
+Custom theme colors are converted implicitly to kebab-case by tailwindcss
+
+This means that some color defined in `evidence.config.yaml` as `myCustomColor`
+should be used as (for example) `text-my-custom-color`. (`text-myCustomColor` will not work)
+
+When referencing custom theme colors in Javascript the original case should still be used
+(for example) `myCustomColor` would still be `<BarChart ... fillColor=myCustomColor />`
+_NOT_ `<BarChart ... fillColor="my-custom-color" />`

.changeset/kind-fishes-mate.md

@@ -0,0 +1,7 @@
+---
+'@evidence-dev/core-components': patch
+'@evidence-dev/tailwind': patch
+'@evidence-dev/evidence': patch
+---
+
+Use theme class instead of data-

.changeset/strong-wombats-admire.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/evidence': patch
+---
+
+Add theme.css export for svelte component <style/> tags that need to access tailwind theme

e2e/base-path/tests/tests.spec.js

@@ -191,6 +191,24 @@ test.describe('Page', () => {
 	});
 });
 
+test.describe('Parquet Files', () => {
+	test('Manifest links should use base path', async ({ page }) => {
+		// Firefox does not behave as expected in playwright.
+		// This isn't a browser-specific test, so we can get away with
+		// not running on firefox
+		if (test.info().project.name === 'firefox') return;
+		page.addListener('request', (req) => {
+			console.log(req.url());
+		});
+		const reqPromise = page.waitForRequest(`${basePath}/data/needful_things/orders/orders.parquet`);
+		page.goto(basePath);
+		const req = await reqPromise;
+
+		const res = await req.response();
+		expect(res?.ok()).toBe(true);
+	});
+});
+
 test.describe('Components', () => {
 	test('Table row links should use base path', async ({ page }) => {
 		await page.goto(`${basePath}/table-row-links`);

e2e/hmr/tests/tests.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
-import { createFile, deleteFile, editFile, restoreChangedFiles } from './fs-utils';
+import { editFile, restoreChangedFiles } from './fs-utils';
 import { waitForPageToLoad } from '../../test-utils';
 
 /** @param {import("@playwright/test").Page} page */
@@ -26,34 +26,6 @@ test.describe('pages', () => {
 
 		await expect(page.getByText('This page has some different text on it')).toBeVisible();
 	});
-
-	test('creating should add to the sidebar and allow navigation', async ({ page }) => {
-		await page.goto('/');
-		await waitForPageToLoad(page);
-
-		await expect(page.getByText('Index')).toBeVisible();
-
-		createFile('pages/new-page.md', 'This is a new page');
-		// file deletions trigger full reload, so we don't waitForHMR() here
-
-		await expect(page.getByRole('link', { name: 'New Page' })).toBeVisible();
-		await page.goto('/new-page');
-		await expect(page.getByText('This is a new page')).toBeVisible();
-	});
-
-	test('deleting should remove from the sidebar and prevent navigation', async ({ page }) => {
-		await page.goto('/');
-		await waitForPageToLoad(page);
-
-		await expect(page.getByText('Index')).toBeVisible();
-
-		deleteFile('pages/page.md');
-		await waitForHMR(page);
-
-		await expect(page.getByRole('link', { name: 'Page' })).not.toBeVisible();
-		await page.goto('/page');
-		await expect(page.getByText('Page Not Found')).toBeVisible();
-	});
 });
 
 test.describe('sources', () => {

e2e/themes/pages/index.md

@@ -6,7 +6,7 @@
 	div-primary-var
 </div>
 
-<div data-testid="div-myCustomColor-class" class="bg-myCustomColor">
+<div data-testid="div-myCustomColor-class" class="bg-my-custom-color">
 	div-myCustomColor-class
 </div>
 

package.json

@@ -26,6 +26,8 @@
 		"@evidence-dev/telemetry": "link:packages/lib/telemetry",
 		"@evidence-dev/trino": "link:packages/datasources/trino",
 		"@evidence-dev/universal-sql": "link:packages/lib/universal-sql",
+		"@tailwindcss/vite": "^4.0.0",
+		"tailwindcss": "^4.0.0",
 		"@parcel/packager-ts": "2.12.0",
 		"@parcel/transformer-typescript-types": "2.12.0",
 		"@playwright/test": "^1.45.3",

packages/evidence/package.json

@@ -21,6 +21,9 @@
 	"bin": {
 		"evidence": "cli.js"
 	},
+	"exports": {
+		"./theme.css": "./template/src/app.css"
+	},
 	"scripts": {
 		"build": "node scripts/build-template",
 		"prepublishOnly": "npm run build"
@@ -54,12 +57,10 @@
 		"autoprefixer": "^10.4.7",
 		"debounce": "^1.2.1",
 		"git-remote-origin-url": "4.0.0",
-		"postcss": "^8.4.14",
-		"postcss-load-config": "^4.0.1",
 		"svelte": "4.2.19",
 		"svelte-preprocess": "5.1.3",
 		"svelte2tsx": "0.7.4",
-		"tailwindcss": "^3.3.1",
+		"tailwindcss": "^4.0.0",
 		"typescript": "5.4.2",
 		"unist-util-visit": "4.1.2",
 		"vite": "5.4.14"

packages/evidence/scripts/build-template.js

@@ -21,9 +21,7 @@ const templatePaths = [
 	'src/pages/settings/',
 	'src/pages/explore',
 	'src/pages/api/',
-	'src/pages/manifest.webmanifest/+server.js',
-	'tailwind.config.cjs',
-	'postcss.config.cjs'
+	'src/pages/manifest.webmanifest/+server.js'
 ];
 const ignorePaths = ['static/data'];
 
@@ -54,6 +52,7 @@ fsExtra.outputFileSync(
 	import { isDebug } from '@evidence-dev/sdk/utils';
 	import { log } from "@evidence-dev/sdk/logger";
 	import { evidenceThemes } from '@evidence-dev/tailwind/vite-plugin';
+	import tailwindcss from '@tailwindcss/vite';
 
 
 	process.removeAllListeners('warning');
@@ -73,7 +72,7 @@ fsExtra.outputFileSync(
     /** @type {import('vite').UserConfig} */
      const config = 
     {
-        plugins: [sveltekit(), configVirtual(), queryDirectoryHmr, sourceQueryHmr(), evidenceThemes()],
+        plugins: [tailwindcss(), sveltekit(), configVirtual(), queryDirectoryHmr, sourceQueryHmr(), evidenceThemes()],
         optimizeDeps: {
             include: ['echarts-stat', 'echarts', 'blueimp-md5', 'nanoid', '@uwdata/mosaic-sql',
 				// We need these to prevent HMR from doing a full page reload

packages/evidence/scripts/svelte.config.js

@@ -1,5 +1,5 @@
 import evidencePreprocess from '@evidence-dev/preprocess';
-import preprocess from 'svelte-preprocess';
+
 import adapter from '@sveltejs/adapter-static';
 import { addBasePathToHrefAndSrc, injectComponents } from '@evidence-dev/sdk/build/svelte';
 import fs from 'fs';
@@ -37,14 +37,7 @@ function errorHandler(warning) {
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	extensions: ['.svelte', '.md'],
-	preprocess: [
-		...evidencePreprocess(true),
-		injectComponents(),
-		preprocess({
-			postcss: true
-		}),
-		addBasePathToHrefAndSrc
-	],
+	preprocess: [...evidencePreprocess(true), injectComponents(), addBasePathToHrefAndSrc],
 	onwarn: errorHandler,
 	kit: {
 		adapter: adapter({

packages/lib/component-utilities/src/stores.js

@@ -1,6 +1,6 @@
 import { dev } from '$app/environment';
 import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 export const pageHasQueries = writable(true);
 export const routeHash = writable('');
@@ -60,17 +60,6 @@ function createToastsObject() {
 /** @type {import('svelte/store').Readable<Toast[]> & { add: (toast: Toast, timeout: number) => void }} */
 export const toasts = createToastsObject();
 
-/**
- * @template T
- * @param {import('svelte/store').Readable<T>} store
- * @returns {T}
- */
-const getStoreVal = (store) => {
-	let v;
-	store.subscribe((x) => (v = x))();
-	return v;
-};
-
 /** @template T @typedef {{ serialize: (value: T) => string; deserialize: (raw: string) => T }} SerializeAndDeserialize */
 
 /**
@@ -99,7 +88,7 @@ export const localStorageStore = (key, init, serializeAndDeserialize) => {
 		}
 	};
 
-	flush(getStoreVal(store));
+	flush(get(store));
 
 	/** @type {Writable<T>} */
 	return {
@@ -109,7 +98,7 @@ export const localStorageStore = (key, init, serializeAndDeserialize) => {
 			flush(v);
 		},
 		update: (cb) => {
-			const updatedStore = cb(getStoreVal(store));
+			const updatedStore = cb(get(store));
 			set(updatedStore);
 			flush(updatedStore);
 		}

packages/lib/universal-sql/package.json

@@ -20,7 +20,6 @@
 		"cli-progress": "^3.12.0",
 		"lodash.chunk": "^4.2.0",
 		"parquet-wasm": "0.5.0",
-		"@evidence-dev/sdk": "workspace:*",
 		"web-worker": "^1.2.0"
 	},
 	"exports": {

packages/lib/universal-sql/src/build-parquet.js

@@ -20,7 +20,7 @@ import { emptyDbFs, initDB, query } from './client-duckdb/node.js';
 import chunk from 'lodash.chunk';
 import { columnsToScore } from './calculateScore.js';
 import chalk from 'chalk';
-import { log } from '@evidence-dev/sdk/logger';
+// import { log } from '@evidence-dev/sdk/logger';
 
 /**
  * @param {{name: string, evidenceType: string}} column
@@ -86,19 +86,19 @@ export async function buildMultipartParquet(
 	outputFilename,
 	batchSize = 1000000
 ) {
-	log.debug(`Building parquet file ${outputFilename}`);
-	let { meta: fn_meta, done: fn_done } = log.measure('buildMultipartParquet');
-	fn_meta('output filename', outputFilename);
+	// log.debug(`Building parquet file ${outputFilename}`);
+	// let { meta: fn_meta, done: fn_done } = log.measure('buildMultipartParquet');
+	// fn_meta('output filename', outputFilename);
 
 	let batchNum = 0;
 	const outputSubpath = outputFilename.split('.parquet')[0];
 	let tmpFilenames = [];
 	let rowCount = 0;
 
 	const flush = async (results) => {
-		log.debug(`Flushing batch ${batchNum} with ${results.length} rows`);
-		let { meta, done } = log.measure('flush');
-		meta('batch number', batchNum);
+		// log.debug(`Flushing batch ${batchNum} with ${results.length} rows`);
+		// let { meta, done } = log.measure('flush');
+		// meta('batch number', batchNum);
 
 		// Convert JS Objects -> Arrow
 		const vectorized = Object.fromEntries(
@@ -131,8 +131,8 @@ export async function buildMultipartParquet(
 		tmpFilenames.push(tempFilename);
 		rowCount += results.length;
 
-		done();
-		log.debug(`Flushed batch ${batchNum} with ${results.length} rows`);
+		// done();
+		// log.debug(`Flushed batch ${batchNum} with ${results.length} rows`);
 
 		batchNum++;
 	};
@@ -153,26 +153,26 @@ export async function buildMultipartParquet(
 		})();
 	}
 
-	log.debug('Reading rows from a generator object');
-	let { meta, done } = log.measure('buildMultipartParquet');
-	meta('batch number', batchNum);
+	// log.debug('Reading rows from a generator object');
+	// let { meta, done } = log.measure('buildMultipartParquet');
+	// meta('batch number', batchNum);
 
 	const currentBatch = [];
 	for await (const results of data) {
 		for (const result of results) currentBatch.push(result);
 
 		if (currentBatch.length >= batchSize) {
-			done();
-			log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`);
+			// done();
+			// log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`);
 			await flush(currentBatch);
 			currentBatch.length = 0;
-			({ meta, done } = log.measure('buildMultipartParquet'));
-			meta('batch number', batchNum);
+			// ({ meta, done } = log.measure('buildMultipartParquet'));
+			// meta('batch number', batchNum);
 		}
 	}
 
-	done();
-	log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`);
+	// done();
+	// log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`);
 
 	if (currentBatch.length) await flush(currentBatch);
 
@@ -230,7 +230,7 @@ export async function buildMultipartParquet(
 	}
 	await emptyDbFs('*');
 
-	fn_done();
+	// fn_done();
 
 	return rowCount;
 }

packages/lib/universal-sql/src/client-duckdb/browser.d.ts

@@ -25,10 +25,13 @@ export function query(sql: string): Promise<Record<string, unknown>[]>;
  * Adds a new view to the database, pointing to the provided parquet URLs.
  *
  * @param {Record<string, string[]>} urls
- * @param {boolean} [append]
+ * @param {{ append?: boolean, addBasePath?: (path: string) => string }} [opts]
  * @returns {Promise<void>}
  */
-export function setParquetURLs(urls: Record<string, string[]>, append?: boolean): Promise<void>;
+export function setParquetURLs(
+	urls: Record<string, string[]>,
+	opts?: { append?: boolean; addBasePath?: (path: string) => string }
+): Promise<void>;
 
 /**
  * Converts an Apache Arrow table to a Javascript array.