aboutsummaryrefslogtreecommitdiff
path: root/packages/web-util/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/web-util/src')
-rw-r--r--packages/web-util/src/cli.ts1
-rw-r--r--packages/web-util/src/index.browser.ts1
-rw-r--r--packages/web-util/src/index.build.ts141
-rw-r--r--packages/web-util/src/index.testing.ts3
-rw-r--r--packages/web-util/src/index.ts1
-rw-r--r--packages/web-util/src/serve.ts167
-rw-r--r--packages/web-util/src/tests/index.ts2
7 files changed, 185 insertions, 131 deletions
diff --git a/packages/web-util/src/cli.ts b/packages/web-util/src/cli.ts
index b02947f7a..05a22bc8a 100644
--- a/packages/web-util/src/cli.ts
+++ b/packages/web-util/src/cli.ts
@@ -36,7 +36,6 @@ walletCli
return serve({
folder: args.serve.folder || "./dist",
port: args.serve.port || 8000,
- development: args.serve.development,
});
});
diff --git a/packages/web-util/src/index.browser.ts b/packages/web-util/src/index.browser.ts
index c7ba8435f..2a537b405 100644
--- a/packages/web-util/src/index.browser.ts
+++ b/packages/web-util/src/index.browser.ts
@@ -5,5 +5,4 @@ export * from "./utils/http-impl.sw.js";
export * from "./utils/observable.js";
export * from "./context/index.js";
export * from "./components/index.js";
-export * as tests from "./tests/index.js";
export { renderStories, parseGroupImport } from "./stories.js";
diff --git a/packages/web-util/src/index.build.ts b/packages/web-util/src/index.build.ts
index 02e6886ab..19bb7fdfb 100644
--- a/packages/web-util/src/index.build.ts
+++ b/packages/web-util/src/index.build.ts
@@ -1,15 +1,14 @@
-import esbuild from "esbuild";
-import path from "path";
+import esbuild, { PluginBuild } from "esbuild";
+// import linaria from "@linaria/esbuild";
import fs from "fs";
+import path from "path";
+import postcss from "postcss";
import sass from "sass";
-import { PluginBuild } from "esbuild";
+import postcssrc from "postcss-load-config";
// this should give us the current directory where
// the project is being built
const BASE = process.cwd();
-const distProd = path.join(BASE, "dist", "prod");
-const distDev = path.join(BASE, "dist", "dev");
-const sourceDir = path.join(BASE, "src");
const preact = path.join(
BASE,
@@ -32,11 +31,10 @@ const preactCompatPlugin: esbuild.Plugin = {
},
};
-export function getFilesInSource(regex: RegExp): string[] {
- return getFilesInDirectory(sourceDir, regex);
-}
-
-function getFilesInDirectory(startPath: string, regex: RegExp): string[] {
+export function getFilesInDirectory(
+ startPath: string,
+ regex?: RegExp,
+): string[] {
if (!fs.existsSync(startPath)) {
return [];
}
@@ -49,7 +47,7 @@ function getFilesInDirectory(startPath: string, regex: RegExp): string[] {
if (stat.isDirectory()) {
return getFilesInDirectory(filename, regex);
}
- if (regex.test(filename)) {
+ if (!regex || regex.test(filename)) {
return [filename];
}
return [];
@@ -108,7 +106,7 @@ function copyFilesPlugin(files: Array<string>) {
const DEFAULT_SASS_FILTER = /\.(s[ac]ss|css)$/;
-const buildSassPlugin: esbuild.Plugin = {
+const sassPlugin: esbuild.Plugin = {
name: "custom-build-sass",
setup(build) {
build.onLoad({ filter: DEFAULT_SASS_FILTER }, ({ path: file }) => {
@@ -124,7 +122,42 @@ const buildSassPlugin: esbuild.Plugin = {
},
};
-const buildConfig: esbuild.BuildOptions = {
+const postCssPlugin: esbuild.Plugin = {
+ name: "custom-build-postcss",
+ setup(build) {
+ build.onLoad({ filter: DEFAULT_SASS_FILTER }, async ({ path: file }) => {
+ const resolveDir = path.dirname(file);
+ const sourceBuffer = fs.readFileSync(file);
+ const source = sourceBuffer.toString("utf-8");
+ const postCssConfig = await postcssrc();
+ postCssConfig.options.from = file;
+
+ const { css: contents } = await postcss(postCssConfig.plugins).process(
+ source,
+ postCssConfig.options,
+ );
+
+ return {
+ resolveDir,
+ loader: "css",
+ contents,
+ };
+ });
+ },
+};
+
+function linariaPlugin() {
+ // const linariaCssPlugin: esbuild.Plugin = linaria.default({
+ // babelOptions: {
+ // babelrc: false,
+ // configFile: "./babel.config-linaria.json",
+ // },
+ // sourceMap: true,
+ // });
+ // return linariaCssPlugin;
+}
+
+const defaultEsBuildConfig: esbuild.BuildOptions = {
bundle: true,
minify: false,
loader: {
@@ -146,43 +179,71 @@ const buildConfig: esbuild.BuildOptions = {
__VERSION__: `"${_package.version}"`,
__GIT_HASH__: `"${GIT_HASH}"`,
},
- plugins: [
- preactCompatPlugin,
- copyFilesPlugin(["./src/index.html"]),
- buildSassPlugin,
- ],
};
-/**
- * Build sources for prod environment
- */
-export function buildProd(entryPoints: string[]) {
- return esbuild.build({
- ...buildConfig,
- entryPoints,
- outdir: distProd,
- });
+export interface BuildParams {
+ source: {
+ assets: string[];
+ js: string[];
+ };
+ destination: string;
+ css: "sass" | "postcss"; // | "linaria";
+}
+
+export function computeConfig(params: BuildParams) {
+ const plugins: Array<esbuild.Plugin> = [
+ preactCompatPlugin,
+ copyFilesPlugin(params.source.assets),
+ ];
+
+ switch (params.css) {
+ case "sass": {
+ plugins.push(sassPlugin);
+ break;
+ }
+ case "postcss": {
+ plugins.push(postCssPlugin);
+ break;
+ }
+
+ // case "linaria": {
+ // plugins.push(linariaPlugin());
+ // break;
+ // }
+
+ default: {
+ const cssType: never = params.css;
+ throw Error(`not supported: ${cssType}`);
+ }
+ }
+ return {
+ ...defaultEsBuildConfig,
+ entryPoints: params.source.js,
+ outdir: params.destination,
+ plugins,
+ };
}
/**
- * Build sources for dev environment
+ * Build sources for prod environment
*/
-function buildDev(entryPoints: string[]): Promise<esbuild.BuildResult> {
- return esbuild.build({
- ...buildConfig,
- entryPoints,
- outdir: distDev,
- });
+export function build(config: BuildParams) {
+ return esbuild.build(computeConfig(config));
}
+const LIVE_RELOAD_SCRIPT =
+ "./node_modules/@gnu-taler/web-util/lib/live-reload.mjs";
+
/**
* Do startup for development environment
*/
export function initializeDev(
- entryPoints: string[],
+ config: BuildParams,
): () => Promise<esbuild.BuildResult> {
- buildConfig.inject = [
- "./node_modules/@gnu-taler/web-util/lib/live-reload.mjs",
- ];
- return () => buildDev(entryPoints);
+ function buildDevelopment() {
+ const result = computeConfig(config);
+ result.inject = [LIVE_RELOAD_SCRIPT];
+ return esbuild.build(result);
+ }
+ return buildDevelopment;
}
diff --git a/packages/web-util/src/index.testing.ts b/packages/web-util/src/index.testing.ts
new file mode 100644
index 000000000..2349debc5
--- /dev/null
+++ b/packages/web-util/src/index.testing.ts
@@ -0,0 +1,3 @@
+export * from "./tests/hook.js";
+export * from "./tests/swr.js";
+export * from "./tests/mock.js";
diff --git a/packages/web-util/src/index.ts b/packages/web-util/src/index.ts
deleted file mode 100644
index ff8b4c563..000000000
--- a/packages/web-util/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/packages/web-util/src/serve.ts b/packages/web-util/src/serve.ts
index f37ef90ce..93d8082fe 100644
--- a/packages/web-util/src/serve.ts
+++ b/packages/web-util/src/serve.ts
@@ -21,7 +21,6 @@ const logger = new Logger("serve.ts");
const PATHS = {
WS: "/ws",
- NOTIFY: "/notify",
EXAMPLE: "/examples",
APP: "/app",
};
@@ -30,101 +29,97 @@ export async function serve(opts: {
folder: string;
port: number;
source?: string;
- development?: boolean;
examplesLocationJs?: string;
examplesLocationCss?: string;
- onUpdate?: () => Promise<void>;
+ onSourceUpdate?: () => Promise<void>;
}): Promise<void> {
const app = express();
app.use(PATHS.APP, express.static(opts.folder));
- const servers = [
- http.createServer(app),
- https.createServer(httpServerOptions, app),
- ];
- logger.info(` ${PATHS.APP}: application`);
- logger.info(` ${PATHS.EXAMPLE}: examples`);
- logger.info(` ${PATHS.WS}: websocket`);
- logger.info(` ${PATHS.NOTIFY}: broadcast`);
-
- if (opts.development) {
- const wss = new WebSocket.Server({ noServer: true });
-
- wss.on("connection", function connection(ws) {
- ws.send("welcome");
- });
-
- servers.forEach(function addWSHandler(server) {
- server.on("upgrade", function upgrade(request, socket, head) {
- const { pathname } = parse(request.url || "");
- if (pathname === PATHS.WS) {
- wss.handleUpgrade(request, socket, head, function done(ws) {
- wss.emit("connection", ws, request);
- });
- } else {
- socket.destroy();
- }
- });
- });
- const sendToAllClients = function (data: object): void {
- wss.clients.forEach(function each(client) {
- if (client.readyState === WebSocket.OPEN) {
- client.send(JSON.stringify(data));
- }
- });
- };
- const watchingFolder = opts.source ?? opts.folder;
- logger.info(`watching ${watchingFolder} for change`);
-
- chokidar.watch(watchingFolder).on("change", (path, stats) => {
- logger.info(`changed ${path}`);
-
- if (opts.onUpdate) {
- sendToAllClients({ type: "file-updated-start", data: { path } });
- opts
- .onUpdate()
- .then((result) => {
- sendToAllClients({
- type: "file-updated-done",
- data: { path, result },
- });
- })
- .catch((error) => {
- sendToAllClients({
- type: "file-updated-failed",
- data: { path, error },
- });
- });
+ const httpServer = http.createServer(app);
+ const httpPort = opts.port;
+ const httpsServer = https.createServer(httpServerOptions, app);
+ const httpsPort = opts.port + 1;
+ const servers = [httpServer, httpsServer];
+
+ logger.info(`Dev server. Endpoints:`);
+ logger.info(` ${PATHS.APP}: where root application can be tested`);
+ logger.info(` ${PATHS.EXAMPLE}: where examples can be found and browse`);
+ logger.info(` ${PATHS.WS}: websocket for live reloading`);
+
+ const wss = new WebSocket.Server({ noServer: true });
+
+ wss.on("connection", function connection(ws) {
+ ws.send("welcome");
+ });
+
+ servers.forEach(function addWSHandler(server) {
+ server.on("upgrade", function upgrade(request, socket, head) {
+ const { pathname } = parse(request.url || "");
+ if (pathname === PATHS.WS) {
+ wss.handleUpgrade(request, socket, head, function done(ws) {
+ wss.emit("connection", ws, request);
+ });
} else {
- sendToAllClients({ type: "file-change", data: { path } });
+ socket.destroy();
}
});
+ });
- if (opts.onUpdate) opts.onUpdate();
-
- app.get(PATHS.EXAMPLE, function (req: any, res: any) {
- res.set("Content-Type", "text/html");
- res.send(
- storiesHtml
- .replace(
- "__EXAMPLES_JS_FILE_LOCATION__",
- opts.examplesLocationJs ?? `.${PATHS.APP}/stories.js`,
- )
- .replace(
- "__EXAMPLES_CSS_FILE_LOCATION__",
- opts.examplesLocationCss ?? `.${PATHS.APP}/stories.css`,
- ),
- );
- });
-
- app.get(PATHS.NOTIFY, function (req: any, res: any) {
- res.send("ok");
- });
-
- servers.forEach(function startServer(server, index) {
- logger.info(`serving ${opts.folder} on ${opts.port + index}`);
- server.listen(opts.port + index);
+ const sendToAllClients = function (data: object): void {
+ wss.clients.forEach(function each(client) {
+ if (client.readyState === WebSocket.OPEN) {
+ client.send(JSON.stringify(data));
+ }
});
- }
+ };
+ const watchingFolder = opts.source ?? opts.folder;
+ logger.info(`watching ${watchingFolder} for changes`);
+
+ chokidar.watch(watchingFolder).on("change", (path, stats) => {
+ logger.info(`changed: ${path}`);
+
+ if (opts.onSourceUpdate) {
+ sendToAllClients({ type: "file-updated-start", data: { path } });
+ opts
+ .onSourceUpdate()
+ .then((result) => {
+ sendToAllClients({
+ type: "file-updated-done",
+ data: { path, result },
+ });
+ })
+ .catch((error) => {
+ sendToAllClients({
+ type: "file-updated-failed",
+ data: { path, error },
+ });
+ });
+ } else {
+ sendToAllClients({ type: "file-change", data: { path } });
+ }
+ });
+
+ if (opts.onSourceUpdate) opts.onSourceUpdate();
+
+ app.get(PATHS.EXAMPLE, function (req: any, res: any) {
+ res.set("Content-Type", "text/html");
+ res.send(
+ storiesHtml
+ .replace(
+ "__EXAMPLES_JS_FILE_LOCATION__",
+ opts.examplesLocationJs ?? `.${PATHS.APP}/stories.js`,
+ )
+ .replace(
+ "__EXAMPLES_CSS_FILE_LOCATION__",
+ opts.examplesLocationCss ?? `.${PATHS.APP}/stories.css`,
+ ),
+ );
+ });
+
+ logger.info(`Serving ${opts.folder} on ${httpPort}: plain HTTP`);
+ httpServer.listen(httpPort);
+ logger.info(`Serving ${opts.folder} on ${httpsPort}: HTTP + TLS`);
+ httpsServer.listen(httpsPort);
}
diff --git a/packages/web-util/src/tests/index.ts b/packages/web-util/src/tests/index.ts
deleted file mode 100644
index 2c0d929f8..000000000
--- a/packages/web-util/src/tests/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./hook.js";
-// export * from "./axios.js"
generated by cgit v1.2.3 (git 2.26.2) at 2024-09-20 23:28:16 +0000