From 518a4359c8c93591d02ebe3a2a5bc0d3cbf2b24e Mon Sep 17 00:00:00 2001 From: Yan Chen <48968912+chenyan-dfinity@users.noreply.github.com> Date: Tue, 3 Sep 2024 21:30:15 -0700 Subject: [PATCH] fmt --- craco.config.js | 83 -------------------------- package.json | 6 ++ vite.config.ts | 152 ++++++++++++++++++++++++------------------------ 3 files changed, 83 insertions(+), 158 deletions(-) delete mode 100644 craco.config.js diff --git a/craco.config.js b/craco.config.js deleted file mode 100644 index 76a0b772..00000000 --- a/craco.config.js +++ /dev/null @@ -1,83 +0,0 @@ -const { addBeforeLoader, loaderByName } = require("@craco/craco"); -const webpack = require("webpack"); - -// Patch unsupported MD4 hash function for Node >= 17.x -const crypto = require("crypto"); -const { createHash } = crypto; -crypto.createHash = (algorithm) => - createHash(algorithm === "md4" ? "sha256" : algorithm); - -let canisterEnv; - -function initCanisterIds() { - let localCanisters, prodCanisters, canisters; - try { - localCanisters = require("./.dfx/local/canister_ids.json"); - } catch (error) { - console.log("No local canister_ids.json found. Continuing production"); - } - try { - prodCanisters = require("./canister_ids.json"); - } catch (error) { - console.log("No production canister_ids.json found. Continuing with local"); - } - - const localNetwork = "local"; - const network = process.env.DFX_NETWORK || localNetwork; - - canisters = network === localNetwork ? localCanisters : prodCanisters; - - for (const canister in canisters) { - const canisterName = canister.toUpperCase() + "_CANISTER_ID"; - process.env[canisterName] = canisters[canister][network]; - canisterEnv = { - ...canisterEnv, - [canisterName]: canisters[canister][network], - }; - } -} -initCanisterIds(); - -const overrideWebpackConfig = ({ webpackConfig }) => { - webpackConfig.resolve.plugins = webpackConfig.resolve.plugins.filter( - (plugin) => - // Removes ModuleScopePlugin so `dfx-generated/` aliases work correctly - !Object.keys(plugin).includes("appSrcs") - ); - webpackConfig.plugins.push(new webpack.EnvironmentPlugin(canisterEnv)); - - // Load WASM modules - webpackConfig.resolve.extensions.push(".wasm"); - webpackConfig.module.rules.forEach((rule) => { - (rule.oneOf || []).forEach((oneOf) => { - if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) { - oneOf.exclude.push(/\.wasm$/); - } - }); - }); - addBeforeLoader(webpackConfig, loaderByName("file-loader"), { - test: /\.wasm$/, - exclude: /node_modules/, - loaders: ["wasm-loader"], - }); - - return webpackConfig; -}; - -module.exports = { - plugins: [ - { - plugin: { overrideWebpackConfig }, - }, - { - // Fixes a Babel error encountered on Node 16.x / 18.x - plugin: require("craco-babel-loader"), - options: { - includes: [ - /(\.dfx)/, - /node_modules\/@noble/, - ], - }, - }, - ], -}; diff --git a/package.json b/package.json index adaf4c0e..4b69fb05 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,12 @@ "lint-staged": { "src/**/*.{js,ts,jsx,tsx,json,css,scss,htm,html,md,mdx}": [ "prettier --write" + ], + "vite.config.ts": [ + "prettier --write" + ], + "package.json": [ + "prettier --write" ] } } diff --git a/vite.config.ts b/vite.config.ts index c36cc5cd..bc321221 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,21 +1,27 @@ -import { fileURLToPath, URL } from 'url'; +import { fileURLToPath, URL } from "url"; import { resolve } from "path"; import { readFileSync, existsSync } from "node:fs"; -import { defineConfig, loadEnv, Plugin, createFilter, transformWithEsbuild } from "vite"; +import { + defineConfig, + loadEnv, + Plugin, + createFilter, + transformWithEsbuild, +} from "vite"; import react from "@vitejs/plugin-react"; import setupProxy from "./src/setupProxy"; import wasm from "vite-plugin-wasm"; import topLevelAwait from "vite-plugin-top-level-await"; -import environment from 'vite-plugin-environment'; -import dotenv from 'dotenv'; +import environment from "vite-plugin-environment"; +import dotenv from "dotenv"; // https://vitejs.dev/config/ export default defineConfig(({ mode }) => { return { - build: { - outDir: "build", - emptyOutDir: true, - }, + build: { + outDir: "build", + emptyOutDir: true, + }, plugins: [ react(), environment("all", { prefix: "CANISTER_" }), @@ -25,23 +31,23 @@ export default defineConfig(({ mode }) => { devServerPlugin(), sourcemapPlugin(), svgrPlugin(), - + setupProxyPlugin(), ], - worker: { - format: "es", - }, - publicDir: 'public', - resolve: { - alias: [ - { - find: "declarations", - replacement: fileURLToPath( - new URL("./src/declarations", import.meta.url) - ), - }, - ], - }, + worker: { + format: "es", + }, + publicDir: "public", + resolve: { + alias: [ + { + find: "declarations", + replacement: fileURLToPath( + new URL("./src/declarations", import.meta.url), + ), + }, + ], + }, }; }); @@ -51,50 +57,48 @@ export default defineConfig(({ mode }) => { // https://vitejs.dev/config/server-options.html#server-https // https://vitejs.dev/config/server-options.html#server-port function devServerPlugin(): Plugin { - return { - name: "dev-server-plugin", - config(_, { mode }) { - const { HOST, PORT, HTTPS, SSL_CRT_FILE, SSL_KEY_FILE } = loadEnv( - mode, - ".", - ["HOST", "PORT", "HTTPS", "SSL_CRT_FILE", "SSL_KEY_FILE"], - ); - const https = HTTPS === "true"; - return { - server: { - host: HOST || "0.0.0.0", - port: parseInt(PORT || "3000", 10), - open: true, - ...(https && - SSL_CRT_FILE && - SSL_KEY_FILE && { - https: { - cert: readFileSync(resolve(SSL_CRT_FILE)), - key: readFileSync(resolve(SSL_KEY_FILE)), - }, - }), - }, - }; - }, - }; + return { + name: "dev-server-plugin", + config(_, { mode }) { + const { HOST, PORT, HTTPS, SSL_CRT_FILE, SSL_KEY_FILE } = loadEnv( + mode, + ".", + ["HOST", "PORT", "HTTPS", "SSL_CRT_FILE", "SSL_KEY_FILE"], + ); + const https = HTTPS === "true"; + return { + server: { + host: HOST || "0.0.0.0", + port: parseInt(PORT || "3000", 10), + open: true, + ...(https && + SSL_CRT_FILE && + SSL_KEY_FILE && { + https: { + cert: readFileSync(resolve(SSL_CRT_FILE)), + key: readFileSync(resolve(SSL_KEY_FILE)), + }, + }), + }, + }; + }, + }; } // Migration guide: Follow the guide below // https://vitejs.dev/config/build-options.html#build-sourcemap function sourcemapPlugin(): Plugin { - return { - name: "sourcemap-plugin", - config(_, { mode }) { - const { GENERATE_SOURCEMAP } = loadEnv(mode, ".", [ - "GENERATE_SOURCEMAP", - ]); - return { - build: { - sourcemap: GENERATE_SOURCEMAP === "true", - }, - }; - }, - }; + return { + name: "sourcemap-plugin", + config(_, { mode }) { + const { GENERATE_SOURCEMAP } = loadEnv(mode, ".", ["GENERATE_SOURCEMAP"]); + return { + build: { + sourcemap: GENERATE_SOURCEMAP === "true", + }, + }; + }, + }; } // In Create React App, SVGs can be imported directly as React components. This is achieved by svgr libraries. @@ -134,23 +138,21 @@ function svgrPlugin(): Plugin { }; } - // Configuring the Proxy Manually // https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually // https://vitejs.dev/guide/api-plugin.html#configureserver // Migration guide: Follow the guide below and remove src/setupProxy // https://vitejs.dev/config/server-options.html#server-proxy function setupProxyPlugin(): Plugin { - return { - name: "setup-proxy-plugin", - config() { - return { - server: { proxy: {} }, - }; - }, - configureServer(server) { - setupProxy(server.middlewares); - }, - }; + return { + name: "setup-proxy-plugin", + config() { + return { + server: { proxy: {} }, + }; + }, + configureServer(server) { + setupProxy(server.middlewares); + }, + }; } -