better support for linaria and alias

This commit is contained in:
Sebastian 2023-05-30 14:33:15 -03:00
parent 2a92ca8732
commit 592387cd74
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
2 changed files with 36 additions and 41 deletions

View File

@ -33,7 +33,13 @@
"pretty": "prettier --write src"
},
"devDependencies": {
"@babel/preset-react": "^7.22.3",
"@babel/preset-typescript": "^7.21.5",
"@gnu-taler/taler-util": "workspace:*",
"@linaria/babel-preset": "4.4.5",
"@linaria/core": "4.2.10",
"@linaria/esbuild": "4.2.11",
"@linaria/react": "4.3.8",
"@types/express": "^4.17.14",
"@types/node": "^18.11.17",
"@types/web": "^0.0.82",
@ -58,10 +64,6 @@
"dependencies": {
"@babel/core": "7.18.9",
"@babel/helper-compilation-targets": "7.18.9",
"@linaria/babel-preset": "3.0.0-beta.23",
"@linaria/core": "3.0.0-beta.22",
"@linaria/esbuild": "3.0.0-beta.22",
"@linaria/react": "3.0.0-beta.22",
"@types/chrome": "0.0.197",
"tailwindcss": "^3.3.2"
}

View File

@ -1,5 +1,5 @@
import esbuild, { PluginBuild } from "esbuild";
// import linaria from "@linaria/esbuild";
import linaria from "@linaria/esbuild";
import fs from "fs";
import path from "path";
import postcss from "postcss";
@ -10,27 +10,6 @@ import postcssrc from "postcss-load-config";
// the project is being built
const BASE = process.cwd();
const preact = path.join(
BASE,
"node_modules",
"preact",
"compat",
"dist",
"compat.module.js",
);
// https://preactjs.com/guide/v8/switching-to-preact/#how-to-alias-preact-compat
const preactCompatPlugin: esbuild.Plugin = {
name: "preact-compat",
setup(build) {
build.onResolve({ filter: /^(react-dom|react)$/ }, (args) => {
return {
path: preact,
};
});
},
};
export function getFilesInDirectory(
startPath: string,
regex?: RegExp,
@ -146,15 +125,20 @@ const postCssPlugin: esbuild.Plugin = {
},
};
/**
* This should be able to load the plugin but but some reason it does not work
*
* text: "Cannot find module '../plugins/preeval'\n" +
*
*/
function linariaPlugin() {
// const linariaCssPlugin: esbuild.Plugin = linaria.default({
// babelOptions: {
// babelrc: false,
// configFile: "./babel.config-linaria.json",
// },
// sourceMap: true,
// });
// return linariaCssPlugin;
const linariaCssPlugin: esbuild.Plugin = (linaria as any)({
babelOptions: {
presets: ["@babel/preset-typescript", "@babel/preset-react", "@linaria"],
},
sourceMap: true,
});
return linariaCssPlugin;
}
const defaultEsBuildConfig: esbuild.BuildOptions = {
@ -162,6 +146,7 @@ const defaultEsBuildConfig: esbuild.BuildOptions = {
minify: false,
loader: {
".svg": "file",
".inline.svg": "text",
".png": "dataurl",
".jpeg": "dataurl",
".ttf": "file",
@ -175,6 +160,10 @@ const defaultEsBuildConfig: esbuild.BuildOptions = {
sourcemap: true,
jsxFactory: "h",
jsxFragment: "Fragment",
alias: {
react: "preact/compat",
"react-dom": "preact/compat",
},
define: {
__VERSION__: `"${_package.version}"`,
__GIT_HASH__: `"${GIT_HASH}"`,
@ -186,13 +175,14 @@ export interface BuildParams {
assets: string[];
js: string[];
};
public?: string;
destination: string;
css: "sass" | "postcss"; // | "linaria";
css: "sass" | "postcss" | "linaria";
linariaPlugin?: () => esbuild.Plugin;
}
export function computeConfig(params: BuildParams) {
export function computeConfig(params: BuildParams): esbuild.BuildOptions {
const plugins: Array<esbuild.Plugin> = [
preactCompatPlugin,
copyFilesPlugin(params.source.assets),
];
@ -206,10 +196,12 @@ export function computeConfig(params: BuildParams) {
break;
}
// case "linaria": {
// plugins.push(linariaPlugin());
// break;
// }
case "linaria": {
if (params.linariaPlugin) {
plugins.push(params.linariaPlugin());
}
break;
}
default: {
const cssType: never = params.css;
@ -219,6 +211,7 @@ export function computeConfig(params: BuildParams) {
return {
...defaultEsBuildConfig,
entryPoints: params.source.js,
publicPath: params.public,
outdir: params.destination,
plugins,
};