mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Initial Vite migration setup
This commit is contained in:
BlackWolfNews
parent
7c58477382
commit
35171070a1
88 changed files with 3341 additions and 3664 deletions
|
|
@ -1,8 +1,8 @@
|
|||
const path = require("path");
|
||||
|
||||
const { build } = require("esbuild");
|
||||
|
||||
// contains all dependencies bundled inside
|
||||
console.log("Starting build...");
|
||||
|
||||
const getConfig = (outdir) => ({
|
||||
outdir,
|
||||
bundle: true,
|
||||
|
|
@ -20,6 +20,7 @@ const getConfig = (outdir) => ({
|
|||
});
|
||||
|
||||
function buildDev(config) {
|
||||
console.log("Building dev...");
|
||||
return build({
|
||||
...config,
|
||||
sourcemap: true,
|
||||
|
|
@ -30,6 +31,7 @@ function buildDev(config) {
|
|||
}
|
||||
|
||||
function buildProd(config) {
|
||||
console.log("Building prod...");
|
||||
return build({
|
||||
...config,
|
||||
minify: true,
|
||||
|
|
@ -40,13 +42,11 @@ function buildProd(config) {
|
|||
}
|
||||
|
||||
const createESMRawBuild = async () => {
|
||||
// development unminified build with source maps
|
||||
await buildDev(getConfig("dist/dev"));
|
||||
|
||||
// production minified build without sourcemaps
|
||||
await buildProd(getConfig("dist/prod"));
|
||||
console.log("Build complete.");
|
||||
};
|
||||
|
||||
(async () => {
|
||||
await createESMRawBuild();
|
||||
})();
|
||||
})();
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
const path = require("path");
|
||||
|
||||
const { build } = require("esbuild");
|
||||
const { sassPlugin } = require("esbuild-sass-plugin");
|
||||
|
||||
const { parseEnvVariables } = require("../packages/excalidraw/env.cjs");
|
||||
|
||||
const ENV_VARS = {
|
||||
development: {
|
||||
...parseEnvVariables(`${__dirname}/../.env.development`),
|
||||
DEV: true,
|
||||
},
|
||||
production: {
|
||||
...parseEnvVariables(`${__dirname}/../.env.production`),
|
||||
PROD: true,
|
||||
},
|
||||
};
|
||||
|
||||
// excludes all external dependencies and bundles only the source code
|
||||
const getConfig = (outdir) => ({
|
||||
outdir,
|
||||
bundle: true,
|
||||
splitting: true,
|
||||
format: "esm",
|
||||
packages: "external",
|
||||
plugins: [sassPlugin()],
|
||||
target: "es2020",
|
||||
assetNames: "[dir]/[name]",
|
||||
chunkNames: "[dir]/[name]-[hash]",
|
||||
alias: {
|
||||
"@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
|
||||
"@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
|
||||
"@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
|
||||
"@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
|
||||
"@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
|
||||
},
|
||||
loader: {
|
||||
".woff2": "file",
|
||||
},
|
||||
});
|
||||
|
||||
function buildDev(config) {
|
||||
return build({
|
||||
...config,
|
||||
sourcemap: true,
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify(ENV_VARS.development),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function buildProd(config) {
|
||||
return build({
|
||||
...config,
|
||||
minify: true,
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify(ENV_VARS.production),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const createESMRawBuild = async () => {
|
||||
const chunksConfig = {
|
||||
entryPoints: ["index.tsx", "**/*.chunk.ts"],
|
||||
entryNames: "[name]",
|
||||
};
|
||||
|
||||
// development unminified build with source maps
|
||||
await buildDev({
|
||||
...getConfig("dist/dev"),
|
||||
...chunksConfig,
|
||||
});
|
||||
|
||||
// production minified buld without sourcemaps
|
||||
await buildProd({
|
||||
...getConfig("dist/prod"),
|
||||
...chunksConfig,
|
||||
});
|
||||
};
|
||||
|
||||
(async () => {
|
||||
await createESMRawBuild();
|
||||
})();
|
||||
164
scripts/buildPackage.mjs
Normal file
164
scripts/buildPackage.mjs
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
import { build } from "esbuild";
|
||||
import { sassPlugin } from "esbuild-sass-plugin";
|
||||
import { fileURLToPath } from "url";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
const parseEnvVariables = (filePath) => {
|
||||
try {
|
||||
const envContent = fs.readFileSync(filePath, "utf8");
|
||||
const envVars = {};
|
||||
envContent.split("\n").forEach((line) => {
|
||||
const [key, value] = line.split("=");
|
||||
if (key && value) envVars[key.trim()] = value.trim();
|
||||
});
|
||||
return envVars;
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
const ENV_VARS = {
|
||||
development: {
|
||||
...parseEnvVariables(path.join(__dirname, "../.env.development")),
|
||||
DEV: true,
|
||||
},
|
||||
production: {
|
||||
...parseEnvVariables(path.join(__dirname, "../.env.production")),
|
||||
PROD: true,
|
||||
},
|
||||
};
|
||||
|
||||
const getConfig = (outdir) => ({
|
||||
outdir,
|
||||
bundle: true,
|
||||
splitting: true,
|
||||
format: "esm",
|
||||
target: "es2020",
|
||||
plugins: [
|
||||
sassPlugin({
|
||||
loadPaths: [
|
||||
path.resolve(__dirname, "../node_modules"),
|
||||
path.resolve(__dirname, "../node_modules/open-color"),
|
||||
path.resolve(__dirname, "../packages/excalidraw/css"),
|
||||
path.resolve(__dirname, "../packages/excalidraw/src"),
|
||||
path.resolve(__dirname, "../packages/excalidraw/components"),
|
||||
],
|
||||
precompile: (source, pathname) => {
|
||||
// Skip precompile for open-color and css files to avoid loops
|
||||
if (
|
||||
pathname.includes("node_modules/open-color") ||
|
||||
pathname.includes("css/variables.module.scss") ||
|
||||
pathname.includes("css/styles.scss") ||
|
||||
pathname.includes("css/theme.scss")
|
||||
) {
|
||||
return source;
|
||||
}
|
||||
if (pathname.endsWith(".scss")) {
|
||||
return `
|
||||
@use '../css/variables.module.scss' as vars;
|
||||
@use '../css/styles.scss' as styles;
|
||||
${source}
|
||||
`;
|
||||
}
|
||||
return source;
|
||||
},
|
||||
type: "css",
|
||||
sourceMap: false,
|
||||
logger: {
|
||||
warn: () => {},
|
||||
error: (msg) => {
|
||||
console.error("Sass compilation error:", msg);
|
||||
throw new Error(msg);
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
assetNames: "[dir]/[name]",
|
||||
chunkNames: "[dir]/[name]-[hash]",
|
||||
alias: {
|
||||
"@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
|
||||
"@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
|
||||
"@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
|
||||
"@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
|
||||
"@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
|
||||
},
|
||||
loader: { ".woff2": "file" },
|
||||
});
|
||||
|
||||
async function buildDev(config) {
|
||||
console.log("Starting dev build to", config.outdir);
|
||||
try {
|
||||
await build({
|
||||
...config,
|
||||
sourcemap: true,
|
||||
define: { "import.meta.env": JSON.stringify(ENV_VARS.development) },
|
||||
});
|
||||
console.log("Dev build completed successfully");
|
||||
} catch (err) {
|
||||
console.error("Dev build failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
async function buildProd(config) {
|
||||
console.log("Starting prod build to", config.outdir);
|
||||
try {
|
||||
await build({
|
||||
...config,
|
||||
minify: true,
|
||||
define: { "import.meta.env": JSON.stringify(ENV_VARS.production) },
|
||||
});
|
||||
console.log("Prod build completed successfully");
|
||||
} catch (err) {
|
||||
console.error("Prod build failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
const createESMRawBuild = async () => {
|
||||
console.log("Creating ESM raw build...");
|
||||
const prodDir = path.resolve(__dirname, "../packages/excalidraw/dist/prod");
|
||||
const devDir = path.resolve(__dirname, "../packages/excalidraw/dist/dev");
|
||||
|
||||
if (!fs.existsSync(prodDir)) {
|
||||
fs.mkdirSync(prodDir, { recursive: true });
|
||||
}
|
||||
if (!fs.existsSync(devDir)) {
|
||||
fs.mkdirSync(devDir, { recursive: true });
|
||||
}
|
||||
|
||||
const chunksConfig = {
|
||||
entryPoints: [
|
||||
path.resolve(__dirname, "../packages/excalidraw/index.tsx"),
|
||||
...fs
|
||||
.readdirSync(path.resolve(__dirname, "../packages/excalidraw"), { recursive: true })
|
||||
.filter((file) => file.endsWith(".chunk.ts"))
|
||||
.map((file) => path.resolve(__dirname, "../packages/excalidraw", file)),
|
||||
],
|
||||
entryNames: "[name]",
|
||||
};
|
||||
|
||||
await buildDev({
|
||||
...getConfig(path.resolve(__dirname, "../packages/excalidraw/dist/dev")),
|
||||
...chunksConfig,
|
||||
});
|
||||
await buildProd({
|
||||
...getConfig(path.resolve(__dirname, "../packages/excalidraw/dist/prod")),
|
||||
...chunksConfig,
|
||||
});
|
||||
console.log("ESM raw build finished");
|
||||
};
|
||||
|
||||
(async () => {
|
||||
console.log("Build script started");
|
||||
try {
|
||||
await createESMRawBuild();
|
||||
console.log("Build script completed successfully");
|
||||
} catch (err) {
|
||||
console.error("Build script failed:", err);
|
||||
process.exit(1);
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
const path = require("path");
|
||||
|
||||
const { build } = require("esbuild");
|
||||
const { sassPlugin } = require("esbuild-sass-plugin");
|
||||
|
||||
const { woff2ServerPlugin } = require("./woff2/woff2-esbuild-plugins");
|
||||
|
||||
// contains all dependencies bundled inside
|
||||
const getConfig = (outdir) => ({
|
||||
outdir,
|
||||
bundle: true,
|
||||
format: "esm",
|
||||
entryPoints: ["src/index.ts"],
|
||||
entryNames: "[name]",
|
||||
assetNames: "[dir]/[name]",
|
||||
alias: {
|
||||
"@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
|
||||
"@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
|
||||
"@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
|
||||
"@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
|
||||
"@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
|
||||
},
|
||||
});
|
||||
|
||||
function buildDev(config) {
|
||||
return build({
|
||||
...config,
|
||||
sourcemap: true,
|
||||
plugins: [sassPlugin(), woff2ServerPlugin()],
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ DEV: true }),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function buildProd(config) {
|
||||
return build({
|
||||
...config,
|
||||
minify: true,
|
||||
plugins: [
|
||||
sassPlugin(),
|
||||
woff2ServerPlugin({
|
||||
outdir: `${config.outdir}/assets`,
|
||||
}),
|
||||
],
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ PROD: true }),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const createESMRawBuild = async () => {
|
||||
// development unminified build with source maps
|
||||
await buildDev(getConfig("dist/dev"));
|
||||
|
||||
// production minified build without sourcemaps
|
||||
await buildProd(getConfig("dist/prod"));
|
||||
};
|
||||
|
||||
(async () => {
|
||||
await createESMRawBuild();
|
||||
})();
|
||||
104
scripts/buildUtils.mjs
Normal file
104
scripts/buildUtils.mjs
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { build } from "esbuild";
|
||||
import { sassPlugin } from "esbuild-sass-plugin";
|
||||
import { fileURLToPath } from "url";
|
||||
import path from "path";
|
||||
import fs from "fs";
|
||||
import { woff2ServerPlugin } from "./woff2/woff2-esbuild-plugins.mjs";
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
console.log("Starting build (ESM) - DEBUG VERSION...");
|
||||
|
||||
const ensureDir = (dir) => {
|
||||
console.log(`[DEBUG] Ensuring directory: ${dir}`);
|
||||
try {
|
||||
if (!fs.existsSync(dir)) {
|
||||
console.log(`[DEBUG] Creating directory: ${dir}`);
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
console.log(`[DEBUG] Successfully created directory: ${dir}`);
|
||||
} else {
|
||||
console.log(`[DEBUG] Directory already exists: ${dir}`);
|
||||
}
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error(`[ERROR] Failed to create directory ${dir}:`, err);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const getConfig = (outdir) => {
|
||||
ensureDir(outdir);
|
||||
return {
|
||||
outdir,
|
||||
bundle: true,
|
||||
format: "esm",
|
||||
entryPoints: ["src/index.ts"],
|
||||
entryNames: "[name]",
|
||||
assetNames: "[dir]/[name]",
|
||||
alias: {
|
||||
"@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
|
||||
"@excalidraw/element": path.resolve(__dirname, "../packages/element/src"),
|
||||
"@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
|
||||
"@excalidraw/math": path.resolve(__dirname, "../packages/math/src"),
|
||||
"@excalidraw/utils": path.resolve(__dirname, "../packages/utils/src"),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
async function buildDev(config) {
|
||||
console.log("Building dev version...");
|
||||
try {
|
||||
await build({
|
||||
...config,
|
||||
sourcemap: true,
|
||||
plugins: [sassPlugin(), woff2ServerPlugin()],
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ DEV: true }),
|
||||
},
|
||||
});
|
||||
console.log("Dev build completed successfully");
|
||||
} catch (err) {
|
||||
console.error("Dev build failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
async function buildProd(config) {
|
||||
console.log("Building prod version...");
|
||||
try {
|
||||
await build({
|
||||
...config,
|
||||
minify: true,
|
||||
plugins: [
|
||||
sassPlugin(),
|
||||
woff2ServerPlugin({
|
||||
outdir: `${config.outdir}/assets`,
|
||||
}),
|
||||
],
|
||||
define: {
|
||||
"import.meta.env": JSON.stringify({ PROD: true }),
|
||||
},
|
||||
});
|
||||
console.log("Prod build completed successfully");
|
||||
} catch (err) {
|
||||
console.error("Prod build failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
const createESMRawBuild = async () => {
|
||||
// development unminified build with source maps
|
||||
await buildDev(getConfig("dist/dev"));
|
||||
|
||||
// production minified build without sourcemaps
|
||||
await buildProd(getConfig("dist/prod"));
|
||||
console.log("All builds complete.");
|
||||
};
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
await createESMRawBuild();
|
||||
} catch (error) {
|
||||
console.error("Build failed:", error);
|
||||
process.exit(1);
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
const { execSync } = require("child_process");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const { Font } = require("fonteditor-core");
|
||||
const wawoff = require("wawoff2");
|
||||
const which = require("which");
|
||||
import { createHash } from "crypto";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { promisify } from "util";
|
||||
|
||||
/**
|
||||
* Custom esbuild plugin to:
|
||||
|
|
@ -17,80 +14,77 @@ const which = require("which");
|
|||
*
|
||||
* @returns {import("esbuild").Plugin}
|
||||
*/
|
||||
module.exports.woff2ServerPlugin = (options = {}) => {
|
||||
export const woff2ServerPlugin = (options = {}) => {
|
||||
return {
|
||||
name: "woff2ServerPlugin",
|
||||
name: "woff2-server-plugin",
|
||||
setup(build) {
|
||||
const fonts = new Map();
|
||||
|
||||
build.onResolve({ filter: /\.woff2$/ }, (args) => {
|
||||
const resolvedPath = path.resolve(args.resolveDir, args.path);
|
||||
|
||||
build.onResolve({ filter: /\.(woff|woff2)$/ }, (args) => {
|
||||
return {
|
||||
path: resolvedPath,
|
||||
namespace: "woff2ServerPlugin",
|
||||
path: path.isAbsolute(args.path)
|
||||
? args.path
|
||||
: path.join(path.dirname(args.importer), args.path),
|
||||
namespace: "woff2-asset",
|
||||
};
|
||||
});
|
||||
|
||||
build.onLoad(
|
||||
{ filter: /.*/, namespace: "woff2ServerPlugin" },
|
||||
async (args) => {
|
||||
let woff2Buffer;
|
||||
build.onLoad({ filter: /.*/, namespace: "woff2-asset" }, async (args) => {
|
||||
let woff2Buffer;
|
||||
|
||||
if (path.isAbsolute(args.path)) {
|
||||
// read local woff2 as a buffer (WARN: `readFileSync` does not work!)
|
||||
woff2Buffer = await fs.promises.readFile(args.path);
|
||||
} else {
|
||||
throw new Error(`Font path has to be absolute! "${args.path}"`);
|
||||
}
|
||||
if (path.isAbsolute(args.path)) {
|
||||
// read local woff2 as a buffer (WARN: `readFileSync` does not work!)
|
||||
woff2Buffer = await promisify(fs.readFile)(args.path);
|
||||
} else {
|
||||
throw new Error(`Font path has to be absolute! "${args.path}"`);
|
||||
}
|
||||
|
||||
// google's brotli decompression into snft
|
||||
const snftBuffer = new Uint8Array(
|
||||
await wawoff.decompress(woff2Buffer),
|
||||
).buffer;
|
||||
// google's brotli decompression into snft
|
||||
const snftBuffer = new Uint8Array(
|
||||
await wawoff.decompress(woff2Buffer),
|
||||
).buffer;
|
||||
|
||||
// load font and store per fontfamily & subfamily cache
|
||||
let font;
|
||||
// load font and store per fontfamily & subfamily cache
|
||||
let font;
|
||||
|
||||
try {
|
||||
font = Font.create(snftBuffer, {
|
||||
type: "ttf",
|
||||
hinting: true,
|
||||
kerning: true,
|
||||
});
|
||||
} catch {
|
||||
// if loading as ttf fails, try to load as otf
|
||||
font = Font.create(snftBuffer, {
|
||||
type: "otf",
|
||||
hinting: true,
|
||||
kerning: true,
|
||||
});
|
||||
}
|
||||
try {
|
||||
font = Font.create(snftBuffer, {
|
||||
type: "ttf",
|
||||
hinting: true,
|
||||
kerning: true,
|
||||
});
|
||||
} catch {
|
||||
// if loading as ttf fails, try to load as otf
|
||||
font = Font.create(snftBuffer, {
|
||||
type: "otf",
|
||||
hinting: true,
|
||||
kerning: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fontFamily = font.data.name.fontFamily;
|
||||
const subFamily = font.data.name.fontSubFamily;
|
||||
const fontFamily = font.data.name.fontFamily;
|
||||
const subFamily = font.data.name.fontSubFamily;
|
||||
|
||||
if (!fonts.get(fontFamily)) {
|
||||
fonts.set(fontFamily, {});
|
||||
}
|
||||
if (!fonts.get(fontFamily)) {
|
||||
fonts.set(fontFamily, {});
|
||||
}
|
||||
|
||||
if (!fonts.get(fontFamily)[subFamily]) {
|
||||
fonts.get(fontFamily)[subFamily] = [];
|
||||
}
|
||||
if (!fonts.get(fontFamily)[subFamily]) {
|
||||
fonts.get(fontFamily)[subFamily] = [];
|
||||
}
|
||||
|
||||
// store the snftbuffer per subfamily
|
||||
fonts.get(fontFamily)[subFamily].push(font);
|
||||
// store the snftbuffer per subfamily
|
||||
fonts.get(fontFamily)[subFamily].push(font);
|
||||
|
||||
// inline the woff2 as base64 for server-side use cases
|
||||
// NOTE: "file" loader is broken in commonjs and "dataurl" loader does not produce correct ur
|
||||
return {
|
||||
contents: `data:font/woff2;base64,${woff2Buffer.toString(
|
||||
"base64",
|
||||
)}`,
|
||||
loader: "text",
|
||||
};
|
||||
},
|
||||
);
|
||||
// inline the woff2 as base64 for server-side use cases
|
||||
// NOTE: "file" loader is broken in commonjs and "dataurl" loader does not produce correct ur
|
||||
return {
|
||||
contents: `data:font/woff2;base64,${woff2Buffer.toString(
|
||||
"base64",
|
||||
)}`,
|
||||
loader: "text",
|
||||
};
|
||||
});
|
||||
|
||||
build.onEnd(async () => {
|
||||
const { outdir } = options;
|
||||
Loading…
Add table
Add a link
Reference in a new issue