[sparkle] internal: refactor packaging, compile tsc & tailwind - take2 (

#6090)

sparkle/.eslintrc.js

@@ -9,11 +9,13 @@ module.exports = {
   ignorePatterns: [
     "rollup.config.js",
     "eslint.js",
+    ".eslintrc.js",
     "dist/",
     "node_modules/",
     "svgr.config.js",
     "postcss.config.js",
     "tailwind.config.js",
+    "svgr-*-template.js",
   ],
   rules: {
     curly: ["error", "all"],

sparkle/build_icons.sh

@@ -5,10 +5,16 @@ rm -rf src/icons/solid
 rm -rf src/logo/platforms
 rm -rf src/logo/dust
 
-npx @svgr/cli --out-dir src/icons/stroke/ src/icons/src/stroke/
-npx @svgr/cli --out-dir src/icons/solid/ src/icons/src/solid/
-npx @svgr/cli --out-dir src/logo/platforms/ src/logo/src/platforms/
-npx @svgr/cli --out-dir src/logo/dust/ src/logo/src/dust/
+npx @svgr/cli --no-prettier --index-template svgr-stroke-template.js  --out-dir src/icons/stroke/ src/icons/src/stroke/
+npx @svgr/cli --no-prettier --index-template svgr-icon-template.js --out-dir src/icons/solid/ src/icons/src/solid/
+npx @svgr/cli --no-prettier --index-template svgr-logo-template.js --out-dir src/logo/platforms/ src/logo/src/platforms/
+npx @svgr/cli --no-prettier --index-template svgr-logo-template.js --out-dir src/logo/dust/ src/logo/src/dust/
+
+# Prettify and lint - prettier 3 is not working with svgr, so we need to run it separately
+npx prettier --write src/icons/stroke
+npx prettier --write src/icons/solid
+npx prettier --write src/logo/platforms
+npx prettier --write src/logo/dust
 
 npx eslint --fix src/icons/stroke
 npx eslint --fix src/icons/solid

sparkle/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.219",
+  "version": "0.2.220",
   "scripts": {
-    "build": "rm -rf dist && rollup -c",
-    "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",
+    "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
+    "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
+    "build:esm": "npm run copy:esm && tsc && tsc-alias",
+    "copy:esm": "copyfiles -u 1 src/**/*.css src/**/*.svg src/**/*.png src/**/*.json dist/esm",
+    "build:cjs": "rollup -c",
     "storybook": "storybook dev -p 6006 --debug-webpack",
     "build-storybook": "storybook build",
     "format:check": "prettier --check .",
     "format": "prettier --write .",
     "lint": "eslint ."
   },
   "main": "dist/cjs/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
   "files": [
     "dist/",
@@ -45,6 +48,7 @@
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.3",
     "babel-preset-react-app": "^10.0.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.1.0",
@@ -60,7 +64,9 @@
     "sass-loader": "^13.3.2",
     "storybook": "^7.4.6",
     "tailwindcss": "^3.2.4",
+    "tsc-alias": "^1.8.10",
     "typescript": "^5.4.5",
+    "typescript-transform-paths": "^3.4.7",
     "uuid": "^9.0.1"
   },
   "peerDependencies": {

sparkle/rollup.config.mjs

@@ -1,32 +1,23 @@
+// Rollup configuration for building the library as a cjs bundle. This is used by front workers.
 import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
 import resolve from "@rollup/plugin-node-resolve";
-import typescript from "@rollup/plugin-typescript";
 import autoprefixer from "autoprefixer";
 import fs from "fs";
 import path from "path";
+import { rollup } from "rollup";
 import external from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
 import tailwindcss from "tailwindcss";
 import { fileURLToPath } from "url";
 
-let tsPluginOptions = {
-  tsconfig: "./tsconfig.json",
-  outputToFilesystem: true,
-};
-
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const pkg = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, "package.json"), "utf-8")
 );
 
-let entryFile = "src/index.ts";
-tsPluginOptions.exclude = "src/index_with_tw_base.ts";
-if (process.env.INCLUDE_TW_BASE) {
-  entryFile = "src/index_with_tw_base.ts";
-  tsPluginOptions.exclude = "src/index.ts";
-}
+let entryFile = "dist/esm/index.js";
 
 const config = {
   input: entryFile,
@@ -37,17 +28,11 @@ const config = {
       sourcemap: true,
       name: "react-lib",
     },
-    {
-      file: pkg.module,
-      format: "esm",
-      sourcemap: true,
-    },
   ],
   plugins: [
     external(),
     resolve(),
     commonjs(),
-    typescript(tsPluginOptions),
     postcss({
       plugins: [
         tailwindcss({