Initial commit

This commit is contained in:
Ammaar Reshi
2025-01-04 14:06:53 +00:00
parent 7082408604
commit d6025af146
23760 changed files with 3299690 additions and 0 deletions

View File

@ -0,0 +1,7 @@
import { Plugin } from 'vite';
declare function viteRuntimeErrorOverlayPlugin(options?: {
filter?: (error: Error) => boolean;
}): Plugin;
export { viteRuntimeErrorOverlayPlugin as default };

View File

@ -0,0 +1,7 @@
import { Plugin } from 'vite';
declare function viteRuntimeErrorOverlayPlugin(options?: {
filter?: (error: Error) => boolean;
}): Plugin;
export { viteRuntimeErrorOverlayPlugin as default };

View File

@ -0,0 +1,222 @@
'use strict';
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if ((from && typeof from === 'object') || typeof from === 'function') {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, {
get: () => from[key],
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
});
}
return to;
};
var __toCommonJS = (mod) =>
__copyProps(__defProp({}, '__esModule', { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
default: () => viteRuntimeErrorOverlayPlugin,
});
module.exports = __toCommonJS(src_exports);
var import_node_fs = require('fs');
var import_trace_mapping = require('@jridgewell/trace-mapping');
var packageName = 'runtime-error-plugin';
function viteRuntimeErrorOverlayPlugin(options) {
return {
name: packageName,
apply(config, env) {
return env.command === 'serve' && !config.ssr;
},
transformIndexHtml() {
return [
{
tag: 'script',
attrs: { type: 'module' },
children: CLIENT_SCRIPT,
},
];
},
configureServer(server) {
server.ws.on(MESSAGE_TYPE, (data, client) => {
const error = Object.assign(new Error(), data);
if (!error.stack) {
return;
}
if (options?.filter && !options.filter(error)) {
return;
}
const { stack, loc } = rewriteStacktrace(
error.stack,
server.moduleGraph,
);
const err = {
name: error.name,
message: error.message,
stack,
loc,
plugin: packageName,
};
if (loc?.file) {
err.id = loc?.file;
const source = (0, import_node_fs.readFileSync)(loc.file, 'utf-8');
err.frame = generateCodeFrame(source, {
line: loc.line,
column: loc.column - 1,
});
}
client.send({
type: 'error',
err,
});
});
},
};
}
var MESSAGE_TYPE = `${packageName}:error`;
var CLIENT_SCRIPT = `
import { createHotContext } from "/@vite/client";
const hot = createHotContext("/__dummy__${packageName}");
function sendError(error) {
if (!(error instanceof Error)) {
error = new Error("(unknown runtime error)");
}
const serialized = {
message: error.message,
stack: error.stack,
};
hot.send("${MESSAGE_TYPE}", serialized);
}
window.addEventListener("error", (evt) => {
sendError(evt.error);
});
window.addEventListener("unhandledrejection", (evt) => {
sendError(evt.reason);
});
`;
function cleanStack(stack) {
return stack
.split(/\n/g)
.filter((l) => /^\s*at/.test(l))
.join('\n');
}
function rewriteStacktrace(stack, moduleGraph) {
let loc = void 0;
const rewrittenStack = cleanStack(stack)
.split('\n')
.map((line) => {
return line.replace(
/^ {4}at (?:(\S+?) )?\(?(?:https|http):\/\/[^\/]+(\/[^\s?]+).*:(\d+):(\d+)\)?$/,
(input, varName, url, line2, column) => {
if (!url) {
return input;
}
const module2 = moduleGraph.urlToModuleMap.get(url);
if (!module2) {
return '';
}
const rawSourceMap = module2?.transformResult?.map;
if (rawSourceMap) {
const traced = new import_trace_mapping.TraceMap(rawSourceMap);
const pos = (0, import_trace_mapping.originalPositionFor)(traced, {
line: Number(line2),
// stacktrace's column is 1-indexed, but sourcemap's one is 0-indexed
column: Number(column) - 1,
});
if (pos.source && pos.line >= 0 && pos.column >= 0) {
line2 = pos.line;
column = pos.column + 1;
}
}
const trimmedVarName = varName?.trim();
const sourceFile = module2.file;
const source = `${module2.file}:${line2}:${column}`;
if (sourceFile) {
loc ??= {
line: Number(line2),
column: Number(column),
file: sourceFile,
};
}
if (!trimmedVarName || trimmedVarName === 'eval') {
return ` at ${source}`;
} else {
return ` at ${trimmedVarName} ${source}`;
}
},
);
})
.join('\n');
return {
stack: rewrittenStack,
loc,
};
}
var splitRE = /\r?\n/g;
var range = 2;
function posToNumber(source, pos) {
if (typeof pos === 'number') {
return pos;
}
const lines = source.split(splitRE);
const { line, column } = pos;
let start = 0;
for (let i = 0; i < line - 1 && i < lines.length; i++) {
start += lines[i].length + 1;
}
return start + column;
}
function generateCodeFrame(source, start = 0, end) {
start = Math.max(posToNumber(source, start), 0);
end = Math.min(
end !== void 0 ? posToNumber(source, end) : start,
source.length,
);
const lines = source.split(splitRE);
let count = 0;
const res = [];
for (let i = 0; i < lines.length; i++) {
count += lines[i].length;
if (count >= start) {
for (let j = i - range; j <= i + range || end > count; j++) {
if (j < 0 || j >= lines.length) {
continue;
}
const line = j + 1;
res.push(
`${line}${' '.repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]}`,
);
const lineLength = lines[j].length;
if (j === i) {
const pad = Math.max(start - (count - lineLength), 0);
const length = Math.max(
1,
end > count ? lineLength - pad : end - start,
);
res.push(` | ` + ' '.repeat(pad) + '^'.repeat(length));
} else if (j > i) {
if (end > count) {
const length = Math.max(Math.min(end - count, lineLength), 1);
res.push(` | ` + '^'.repeat(length));
}
count += lineLength + 1;
}
}
break;
}
count++;
}
return res.join('\n');
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,191 @@
// src/index.ts
import { readFileSync } from "node:fs";
import { originalPositionFor, TraceMap } from "@jridgewell/trace-mapping";
var packageName = "runtime-error-plugin";
function viteRuntimeErrorOverlayPlugin(options) {
return {
name: packageName,
apply(config, env) {
return env.command === "serve" && !config.ssr;
},
transformIndexHtml() {
return [
{
tag: "script",
attrs: { type: "module" },
children: CLIENT_SCRIPT
}
];
},
configureServer(server) {
server.ws.on(MESSAGE_TYPE, (data, client) => {
const error = Object.assign(new Error(), data);
if (!error.stack) {
return;
}
if (options?.filter && !options.filter(error)) {
return;
}
const { stack, loc } = rewriteStacktrace(
error.stack,
server.moduleGraph
);
const err = {
name: error.name,
message: error.message,
stack,
loc,
plugin: packageName
};
if (loc?.file) {
err.id = loc?.file;
const source = readFileSync(loc.file, "utf-8");
err.frame = generateCodeFrame(source, {
line: loc.line,
column: loc.column - 1
});
}
client.send({
type: "error",
err
});
});
}
};
}
var MESSAGE_TYPE = `${packageName}:error`;
var CLIENT_SCRIPT = `
import { createHotContext } from "/@vite/client";
const hot = createHotContext("/__dummy__${packageName}");
function sendError(error) {
if (!(error instanceof Error)) {
error = new Error("(unknown runtime error)");
}
const serialized = {
message: error.message,
stack: error.stack,
};
hot.send("${MESSAGE_TYPE}", serialized);
}
window.addEventListener("error", (evt) => {
sendError(evt.error);
});
window.addEventListener("unhandledrejection", (evt) => {
sendError(evt.reason);
});
`;
function cleanStack(stack) {
return stack.split(/\n/g).filter((l) => /^\s*at/.test(l)).join("\n");
}
function rewriteStacktrace(stack, moduleGraph) {
let loc = void 0;
const rewrittenStack = cleanStack(stack).split("\n").map((line) => {
return line.replace(
/^ {4}at (?:(\S+?) )?\(?(?:https|http):\/\/[^\/]+(\/[^\s?]+).*:(\d+):(\d+)\)?$/,
(input, varName, url, line2, column) => {
if (!url) {
return input;
}
const module = moduleGraph.urlToModuleMap.get(url);
if (!module) {
return "";
}
const rawSourceMap = module?.transformResult?.map;
if (rawSourceMap) {
const traced = new TraceMap(rawSourceMap);
const pos = originalPositionFor(traced, {
line: Number(line2),
// stacktrace's column is 1-indexed, but sourcemap's one is 0-indexed
column: Number(column) - 1
});
if (pos.source && pos.line >= 0 && pos.column >= 0) {
line2 = pos.line;
column = pos.column + 1;
}
}
const trimmedVarName = varName?.trim();
const sourceFile = module.file;
const source = `${module.file}:${line2}:${column}`;
if (sourceFile) {
loc ??= {
line: Number(line2),
column: Number(column),
file: sourceFile
};
}
if (!trimmedVarName || trimmedVarName === "eval") {
return ` at ${source}`;
} else {
return ` at ${trimmedVarName} ${source}`;
}
}
);
}).join("\n");
return {
stack: rewrittenStack,
loc
};
}
var splitRE = /\r?\n/g;
var range = 2;
function posToNumber(source, pos) {
if (typeof pos === "number") {
return pos;
}
const lines = source.split(splitRE);
const { line, column } = pos;
let start = 0;
for (let i = 0; i < line - 1 && i < lines.length; i++) {
start += lines[i].length + 1;
}
return start + column;
}
function generateCodeFrame(source, start = 0, end) {
start = Math.max(posToNumber(source, start), 0);
end = Math.min(
end !== void 0 ? posToNumber(source, end) : start,
source.length
);
const lines = source.split(splitRE);
let count = 0;
const res = [];
for (let i = 0; i < lines.length; i++) {
count += lines[i].length;
if (count >= start) {
for (let j = i - range; j <= i + range || end > count; j++) {
if (j < 0 || j >= lines.length) {
continue;
}
const line = j + 1;
res.push(
`${line}${" ".repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]}`
);
const lineLength = lines[j].length;
if (j === i) {
const pad = Math.max(start - (count - lineLength), 0);
const length = Math.max(
1,
end > count ? lineLength - pad : end - start
);
res.push(` | ` + " ".repeat(pad) + "^".repeat(length));
} else if (j > i) {
if (end > count) {
const length = Math.max(Math.min(end - count, lineLength), 1);
res.push(` | ` + "^".repeat(length));
}
count += lineLength + 1;
}
}
break;
}
count++;
}
return res.join("\n");
}
export {
viteRuntimeErrorOverlayPlugin as default
};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,37 @@
{
"name": "@replit/vite-plugin-runtime-error-modal",
"version": "0.0.3",
"private": false,
"devDependencies": {
"tsup": "^8.3.5",
"tsx": "^4.9.5",
"vite": "^5.4.10",
"yargs": "^17.5.1",
"@replit/tsconfig": "0.0.0"
},
"exports": {
"import": {
"types": "./dist/index.d.mts",
"import": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"require": "./dist/index.js"
}
},
"files": [
"dist"
],
"dependencies": {
"@jridgewell/trace-mapping": "^0.3.25"
},
"//": "This is the correct way to set up a package with a `src/index.ts` root file that supports both ESM and CJS modules.",
"///": "https://johnnyreilly.com/dual-publishing-esm-cjs-modules-with-tsup-and-are-the-types-wrong",
"type": "module",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.mts",
"scripts": {
"build": "tsup src/index.ts --external vite --format cjs,esm --dts --clean --sourcemap"
}
}

View File

@ -0,0 +1,19 @@
import { Plugin } from 'vite';
import * as _sinclair_typebox from '@sinclair/typebox';
import { Static } from '@sinclair/typebox';
declare const ThemeJsonSchema: _sinclair_typebox.TObject<{
primary: _sinclair_typebox.TString;
variant: _sinclair_typebox.TUnion<[_sinclair_typebox.TLiteral<"professional">, _sinclair_typebox.TLiteral<"tint">, _sinclair_typebox.TLiteral<"vibrant">]>;
appearance: _sinclair_typebox.TUnion<[_sinclair_typebox.TLiteral<"light">, _sinclair_typebox.TLiteral<"dark">, _sinclair_typebox.TLiteral<"system">]>;
radius: _sinclair_typebox.TNumber;
}>;
type Theme = Static<typeof ThemeJsonSchema>;
interface ThemePluginOptions {
themeJsonPath: string;
createThemeVars: (theme: Theme) => string;
}
declare function themePlugin(_options?: Partial<ThemePluginOptions>): Plugin;
export { themePlugin as default };

View File

@ -0,0 +1,19 @@
import { Plugin } from 'vite';
import * as _sinclair_typebox from '@sinclair/typebox';
import { Static } from '@sinclair/typebox';
declare const ThemeJsonSchema: _sinclair_typebox.TObject<{
primary: _sinclair_typebox.TString;
variant: _sinclair_typebox.TUnion<[_sinclair_typebox.TLiteral<"professional">, _sinclair_typebox.TLiteral<"tint">, _sinclair_typebox.TLiteral<"vibrant">]>;
appearance: _sinclair_typebox.TUnion<[_sinclair_typebox.TLiteral<"light">, _sinclair_typebox.TLiteral<"dark">, _sinclair_typebox.TLiteral<"system">]>;
radius: _sinclair_typebox.TNumber;
}>;
type Theme = Static<typeof ThemeJsonSchema>;
interface ThemePluginOptions {
themeJsonPath: string;
createThemeVars: (theme: Theme) => string;
}
declare function themePlugin(_options?: Partial<ThemePluginOptions>): Plugin;
export { themePlugin as default };

View File

@ -0,0 +1,401 @@
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
default: () => themePlugin
});
module.exports = __toCommonJS(src_exports);
var import_promises = __toESM(require("fs/promises"));
var import_path = __toESM(require("path"));
// src/createTheme.ts
var import_colorjs = __toESM(require("colorjs.io"));
var import_dedent = __toESM(require("dedent"));
// src/utils.ts
var WCAG_THRESHOLD = 2.3;
var getForegroundColor = (background, _light, _dark) => {
const lightColor = _light ?? background.mix("white", 0.97, {
space: "oklch",
outputSpace: "oklch"
});
const darkColor = _dark ?? background.mix("black", 0.7, {
space: "oklch",
outputSpace: "oklch"
});
const contrast = background.contrast(lightColor, "WCAG21");
if (contrast > WCAG_THRESHOLD) {
return lightColor;
}
return darkColor;
};
function toShadCn(color) {
const [hueStr, saturationPercentStr, lightnessPercentStr] = color.to("hsl").toString().replace("hsl(", "").replace(")", "").split(" ");
const [hue, saturation, lightness] = [
parseFloat(hueStr),
parseFloat(saturationPercentStr.replace("%", "")),
parseFloat(lightnessPercentStr.replace("%", ""))
];
return `${Math.round(hue)} ${Math.round(saturation)}% ${Math.round(lightness)}%`;
}
// src/createTheme.ts
var createCssVarsString = (vars) => {
return Object.entries(vars).map(([key, value]) => ` ${key}: ${value};`).join("\n");
};
var createCssString = ({
appearance,
lightVars,
darkVars
}) => {
if (appearance === "dark") {
return import_dedent.default`
:root {
${createCssVarsString(darkVars)}
}
.light {
${createCssVarsString(lightVars)}
}
`;
}
if (appearance === "light") {
return import_dedent.default`
:root {
${createCssVarsString(lightVars)}
}
.dark {
${createCssVarsString(darkVars)}
}
`;
}
return import_dedent.default`
:root {
${createCssVarsString(lightVars)}
}
@media (prefers-color-scheme: dark) {
:root {
${createCssVarsString(darkVars)}
}
}
.light {
${createCssVarsString(lightVars)}
}
.dark {
${createCssVarsString(darkVars)}
}
`;
};
var createTheme = ({
primary: oklch,
radius: radiusRem,
variant: kind = "professional",
appearance
}) => {
const color = new import_colorjs.default(oklch);
if (kind === "tint") {
const lightBg = new import_colorjs.default(color).set("oklch.l", 0.98).set("oklch.c", 0.01);
const darkBg = new import_colorjs.default(color).set("oklch.l", 0.2).set("oklch.c", 0.02);
const lightPrimary = new import_colorjs.default(color).set("oklch.l", 0.5);
const darkPrimary = new import_colorjs.default(color).set("oklch.l", 0.7);
const lightAccent = new import_colorjs.default(color).set("oklch.l", 0.94).set("oklch.c", 0.05);
const darkAccent = new import_colorjs.default(color).set("oklch.l", 0.3).set("oklch.c", 0.08);
const lightBorder = new import_colorjs.default(color).set("oklch.l", 0.9).set("oklch.c", 0.05);
const darkBorder = new import_colorjs.default(color).set("oklch.l", 0.3).set("oklch.c", 0.08);
const lightFg = new import_colorjs.default(color).set("oklch.l", 0.1).set("oklch.c", 0.1);
const darkFg = new import_colorjs.default(color).set("oklch.l", 0.9).set("oklch.c", 0.05);
const lightVars = {
"--background": toShadCn(lightBg),
"--foreground": toShadCn(lightFg),
"--muted": toShadCn(lightBorder),
"--muted-foreground": toShadCn(lightFg),
"--popover": toShadCn(lightBg),
"--popover-foreground": toShadCn(lightFg),
"--card": toShadCn(lightBg),
"--card-foreground": toShadCn(lightFg),
"--border": toShadCn(lightBorder),
"--input": toShadCn(lightBorder),
"--primary": toShadCn(lightPrimary),
"--primary-foreground": toShadCn(getForegroundColor(lightPrimary)),
"--secondary": toShadCn(lightAccent),
"--secondary-foreground": toShadCn(lightFg),
"--accent": toShadCn(lightAccent),
"--accent-foreground": toShadCn(lightFg),
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "60 9.1% 97.8%",
"--ring": toShadCn(lightPrimary),
"--radius": `${radiusRem}rem`
};
const darkVars = {
"--background": toShadCn(darkBg),
"--foreground": toShadCn(darkFg),
"--muted": toShadCn(darkBorder),
"--muted-foreground": toShadCn(darkFg),
"--popover": toShadCn(darkBg),
"--popover-foreground": toShadCn(darkFg),
"--card": toShadCn(darkBg),
"--card-foreground": toShadCn(darkFg),
"--border": toShadCn(darkBorder),
"--input": toShadCn(darkBorder),
"--primary": toShadCn(darkPrimary),
"--primary-foreground": toShadCn(getForegroundColor(darkPrimary)),
"--secondary": toShadCn(darkAccent),
"--secondary-foreground": toShadCn(darkFg),
"--accent": toShadCn(darkAccent),
"--accent-foreground": toShadCn(darkFg),
"--destructive": "0 62.8% 30.6%",
"--destructive-foreground": "0 0% 98%",
"--ring": toShadCn(darkPrimary),
"--radius": `${radiusRem}rem`
};
return createCssString({ appearance, lightVars, darkVars });
}
if (kind === "vibrant") {
const lightBg = new import_colorjs.default(color).set("oklch.l", 0.8).set("oklch.c", 0.1);
const lightElementBg = new import_colorjs.default(color).set("oklch.l", 0.98).set("oklch.c", 0.05);
const lightPrimary = new import_colorjs.default(color).set("oklch.l", 0.7).set("oklch.c", 0.2);
const lightAccent = new import_colorjs.default(color).set("oklch.l", 0.85).set("oklch.c", 0.1);
const lightBorder = new import_colorjs.default(color).set("oklch.l", 0.7).set("oklch.c", 0.15);
const lightFg = new import_colorjs.default(color).set("oklch.l", 0.2).set("oklch.c", 0.15);
const darkBg = new import_colorjs.default(color).set("oklch.l", 0.05).set("oklch.c", 0.15);
const darkElementBg = new import_colorjs.default(color).set("oklch.l", 0.2).set("oklch.c", 0.08);
const darkPrimary = new import_colorjs.default(color).set("oklch.l", 0.6).set("oklch.c", 0.2);
const darkAccent = new import_colorjs.default(color).set("oklch.l", 0.4).set("oklch.c", 0.15);
const darkBorder = new import_colorjs.default(color).set("oklch.l", 0.4).set("oklch.c", 0.15);
const darkFg = new import_colorjs.default(color).set("oklch.l", 0.95).set("oklch.c", 0.15);
const lightVars = {
"--background": toShadCn(lightBg),
"--foreground": toShadCn(lightFg),
"--muted": toShadCn(lightBorder),
"--muted-foreground": toShadCn(lightFg),
"--popover": toShadCn(lightElementBg),
"--popover-foreground": toShadCn(lightFg),
"--card": toShadCn(lightElementBg),
"--card-foreground": toShadCn(lightFg),
"--border": toShadCn(lightBorder),
"--input": toShadCn(lightBorder),
"--primary": toShadCn(lightPrimary),
"--primary-foreground": toShadCn(getForegroundColor(lightPrimary)),
"--secondary": toShadCn(lightAccent),
"--secondary-foreground": toShadCn(lightFg),
"--accent": toShadCn(lightAccent),
"--accent-foreground": toShadCn(lightFg),
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "60 9.1% 97.8%",
"--ring": toShadCn(lightPrimary),
"--radius": `${radiusRem}rem`
};
const darkVars = {
"--background": toShadCn(darkBg),
"--foreground": toShadCn(darkFg),
"--muted": toShadCn(darkBorder),
"--muted-foreground": toShadCn(darkFg),
"--popover": toShadCn(darkElementBg),
"--popover-foreground": toShadCn(darkFg),
"--card": toShadCn(darkElementBg),
"--card-foreground": toShadCn(darkFg),
"--border": toShadCn(darkBorder),
"--input": toShadCn(darkBorder),
"--primary": toShadCn(darkPrimary),
"--primary-foreground": toShadCn(getForegroundColor(darkPrimary)),
"--secondary": toShadCn(darkAccent),
"--secondary-foreground": toShadCn(darkFg),
"--accent": toShadCn(darkAccent),
"--accent-foreground": toShadCn(darkFg),
"--destructive": "0 62.8% 30.6%",
"--destructive-foreground": "0 0% 98%",
"--ring": toShadCn(darkPrimary),
"--radius": `${radiusRem}rem`
};
return createCssString({ appearance, lightVars, darkVars });
}
return createCssString({
appearance,
darkVars: {
"--background": "240 10% 3.9%",
"--foreground": "0 0% 98%",
"--muted": "240 3.7% 15.9%",
"--muted-foreground": "240 5% 64.9%",
"--popover": "240 10% 3.9%",
"--popover-foreground": "0 0% 98%",
"--card": "240 10% 3.9%",
"--card-foreground": "0 0% 98%",
"--border": "240 3.7% 15.9%",
"--input": "240 3.7% 15.9%",
"--primary": toShadCn(color),
"--primary-foreground": toShadCn(getForegroundColor(color)),
"--secondary": "240 3.7% 15.9%",
"--secondary-foreground": "0 0% 98%",
"--accent": "240 3.7% 15.9%",
"--accent-foreground": "0 0% 98%",
"--destructive": "0 62.8% 30.6%",
"--destructive-foreground": "0 0% 98%",
"--ring": "240 4.9% 83.9%",
"--radius": `${radiusRem}rem`
},
lightVars: {
"--background": "0 0% 100%",
"--foreground": "20 14.3% 4.1%",
"--muted": "60 4.8% 95.9%",
"--muted-foreground": "25 5.3% 44.7%",
"--popover": "0 0% 100%",
"--popover-foreground": "20 14.3% 4.1%",
"--card": "0 0% 100%",
"--card-foreground": "20 14.3% 4.1%",
"--border": "20 5.9% 90%",
"--input": "20 5.9% 90%",
"--primary": toShadCn(color),
"--primary-foreground": toShadCn(getForegroundColor(color)),
"--secondary": "60 4.8% 95.9%",
"--secondary-foreground": "24 9.8% 10%",
"--accent": "60 4.8% 95.9%",
"--accent-foreground": "24 9.8% 10%",
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "60 9.1% 97.8%",
"--ring": "20 14.3% 4.1%",
"--radius": `${radiusRem}rem`
}
});
};
// src/schemas.ts
var import_typebox = require("@sinclair/typebox");
var import_value = require("@sinclair/typebox/value");
var import_colorjs2 = __toESM(require("colorjs.io"));
var ThemeJsonSchema = import_typebox.Type.Object({
primary: import_typebox.Type.String(),
variant: import_typebox.Type.Union([
import_typebox.Type.Literal("professional"),
import_typebox.Type.Literal("tint"),
import_typebox.Type.Literal("vibrant")
]),
appearance: import_typebox.Type.Union([
import_typebox.Type.Literal("light"),
import_typebox.Type.Literal("dark"),
import_typebox.Type.Literal("system")
]),
radius: import_typebox.Type.Number()
});
var safeParseThemeJson = (content) => {
try {
const parsed = JSON.parse(content);
const result = import_value.Value.Parse(ThemeJsonSchema, parsed);
new import_colorjs2.default(result.primary);
return result;
} catch (e) {
console.error(e);
return null;
}
};
// src/index.ts
function themePlugin(_options) {
const options = {
themeJsonPath: "./theme.json",
createThemeVars: (theme) => createTheme(theme),
..._options
};
let cachedCss = null;
const virtualModuleId = "virtual:theme-vars";
const resolvedVirtualModuleId = "\0" + virtualModuleId;
return {
name: "vite-plugin-theme",
async buildStart() {
try {
const themeContent = await import_promises.default.readFile(options.themeJsonPath, "utf-8");
const themeConfig = safeParseThemeJson(themeContent);
cachedCss = themeConfig ? options.createThemeVars(themeConfig) : null;
} catch (e) {
this.error(`Failed to read theme file: ${e.message}`);
}
},
configureServer(server) {
const resolvedPath = import_path.default.resolve(options.themeJsonPath);
server.watcher.add(resolvedPath);
server.watcher.on("change", async (changedPath) => {
if (changedPath === resolvedPath) {
try {
const componentsJsonFile = await import_promises.default.readFile(resolvedPath, "utf-8");
const themeConfig = safeParseThemeJson(componentsJsonFile);
cachedCss = themeConfig ? options.createThemeVars(themeConfig) : null;
server.ws.send({
type: "full-reload",
path: "*"
});
server.moduleGraph.invalidateAll();
} catch (e) {
server.config.logger.error(`Failed to update theme: ${e.message}`);
}
}
});
},
resolveId(id) {
if (id === virtualModuleId) {
return resolvedVirtualModuleId;
}
},
load(id) {
if (id === resolvedVirtualModuleId && cachedCss) {
return `
// Remove any existing theme styles first
document.querySelector('style[data-vite-theme]')?.remove()
const style = document.createElement('style')
style.setAttribute('data-vite-theme', '')
style.textContent = ${JSON.stringify(cachedCss)}
document.head.insertBefore(style, document.head.firstChild)
`;
}
},
transformIndexHtml(html) {
if (!cachedCss) {
return;
}
return {
html,
tags: [
{
tag: "style",
attrs: {
"data-vite-theme": "",
// Add lower priority by inserting at start of head
"data-inject-first": ""
},
children: cachedCss,
injectTo: "head-prepend"
// Change to prepend instead of default append
}
]
};
}
};
}
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,370 @@
// src/index.ts
import fs from "fs/promises";
import path from "path";
// src/createTheme.ts
import Color from "colorjs.io";
import dedent from "dedent";
// src/utils.ts
var WCAG_THRESHOLD = 2.3;
var getForegroundColor = (background, _light, _dark) => {
const lightColor = _light ?? background.mix("white", 0.97, {
space: "oklch",
outputSpace: "oklch"
});
const darkColor = _dark ?? background.mix("black", 0.7, {
space: "oklch",
outputSpace: "oklch"
});
const contrast = background.contrast(lightColor, "WCAG21");
if (contrast > WCAG_THRESHOLD) {
return lightColor;
}
return darkColor;
};
function toShadCn(color) {
const [hueStr, saturationPercentStr, lightnessPercentStr] = color.to("hsl").toString().replace("hsl(", "").replace(")", "").split(" ");
const [hue, saturation, lightness] = [
parseFloat(hueStr),
parseFloat(saturationPercentStr.replace("%", "")),
parseFloat(lightnessPercentStr.replace("%", ""))
];
return `${Math.round(hue)} ${Math.round(saturation)}% ${Math.round(lightness)}%`;
}
// src/createTheme.ts
var createCssVarsString = (vars) => {
return Object.entries(vars).map(([key, value]) => ` ${key}: ${value};`).join("\n");
};
var createCssString = ({
appearance,
lightVars,
darkVars
}) => {
if (appearance === "dark") {
return dedent`
:root {
${createCssVarsString(darkVars)}
}
.light {
${createCssVarsString(lightVars)}
}
`;
}
if (appearance === "light") {
return dedent`
:root {
${createCssVarsString(lightVars)}
}
.dark {
${createCssVarsString(darkVars)}
}
`;
}
return dedent`
:root {
${createCssVarsString(lightVars)}
}
@media (prefers-color-scheme: dark) {
:root {
${createCssVarsString(darkVars)}
}
}
.light {
${createCssVarsString(lightVars)}
}
.dark {
${createCssVarsString(darkVars)}
}
`;
};
var createTheme = ({
primary: oklch,
radius: radiusRem,
variant: kind = "professional",
appearance
}) => {
const color = new Color(oklch);
if (kind === "tint") {
const lightBg = new Color(color).set("oklch.l", 0.98).set("oklch.c", 0.01);
const darkBg = new Color(color).set("oklch.l", 0.2).set("oklch.c", 0.02);
const lightPrimary = new Color(color).set("oklch.l", 0.5);
const darkPrimary = new Color(color).set("oklch.l", 0.7);
const lightAccent = new Color(color).set("oklch.l", 0.94).set("oklch.c", 0.05);
const darkAccent = new Color(color).set("oklch.l", 0.3).set("oklch.c", 0.08);
const lightBorder = new Color(color).set("oklch.l", 0.9).set("oklch.c", 0.05);
const darkBorder = new Color(color).set("oklch.l", 0.3).set("oklch.c", 0.08);
const lightFg = new Color(color).set("oklch.l", 0.1).set("oklch.c", 0.1);
const darkFg = new Color(color).set("oklch.l", 0.9).set("oklch.c", 0.05);
const lightVars = {
"--background": toShadCn(lightBg),
"--foreground": toShadCn(lightFg),
"--muted": toShadCn(lightBorder),
"--muted-foreground": toShadCn(lightFg),
"--popover": toShadCn(lightBg),
"--popover-foreground": toShadCn(lightFg),
"--card": toShadCn(lightBg),
"--card-foreground": toShadCn(lightFg),
"--border": toShadCn(lightBorder),
"--input": toShadCn(lightBorder),
"--primary": toShadCn(lightPrimary),
"--primary-foreground": toShadCn(getForegroundColor(lightPrimary)),
"--secondary": toShadCn(lightAccent),
"--secondary-foreground": toShadCn(lightFg),
"--accent": toShadCn(lightAccent),
"--accent-foreground": toShadCn(lightFg),
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "60 9.1% 97.8%",
"--ring": toShadCn(lightPrimary),
"--radius": `${radiusRem}rem`
};
const darkVars = {
"--background": toShadCn(darkBg),
"--foreground": toShadCn(darkFg),
"--muted": toShadCn(darkBorder),
"--muted-foreground": toShadCn(darkFg),
"--popover": toShadCn(darkBg),
"--popover-foreground": toShadCn(darkFg),
"--card": toShadCn(darkBg),
"--card-foreground": toShadCn(darkFg),
"--border": toShadCn(darkBorder),
"--input": toShadCn(darkBorder),
"--primary": toShadCn(darkPrimary),
"--primary-foreground": toShadCn(getForegroundColor(darkPrimary)),
"--secondary": toShadCn(darkAccent),
"--secondary-foreground": toShadCn(darkFg),
"--accent": toShadCn(darkAccent),
"--accent-foreground": toShadCn(darkFg),
"--destructive": "0 62.8% 30.6%",
"--destructive-foreground": "0 0% 98%",
"--ring": toShadCn(darkPrimary),
"--radius": `${radiusRem}rem`
};
return createCssString({ appearance, lightVars, darkVars });
}
if (kind === "vibrant") {
const lightBg = new Color(color).set("oklch.l", 0.8).set("oklch.c", 0.1);
const lightElementBg = new Color(color).set("oklch.l", 0.98).set("oklch.c", 0.05);
const lightPrimary = new Color(color).set("oklch.l", 0.7).set("oklch.c", 0.2);
const lightAccent = new Color(color).set("oklch.l", 0.85).set("oklch.c", 0.1);
const lightBorder = new Color(color).set("oklch.l", 0.7).set("oklch.c", 0.15);
const lightFg = new Color(color).set("oklch.l", 0.2).set("oklch.c", 0.15);
const darkBg = new Color(color).set("oklch.l", 0.05).set("oklch.c", 0.15);
const darkElementBg = new Color(color).set("oklch.l", 0.2).set("oklch.c", 0.08);
const darkPrimary = new Color(color).set("oklch.l", 0.6).set("oklch.c", 0.2);
const darkAccent = new Color(color).set("oklch.l", 0.4).set("oklch.c", 0.15);
const darkBorder = new Color(color).set("oklch.l", 0.4).set("oklch.c", 0.15);
const darkFg = new Color(color).set("oklch.l", 0.95).set("oklch.c", 0.15);
const lightVars = {
"--background": toShadCn(lightBg),
"--foreground": toShadCn(lightFg),
"--muted": toShadCn(lightBorder),
"--muted-foreground": toShadCn(lightFg),
"--popover": toShadCn(lightElementBg),
"--popover-foreground": toShadCn(lightFg),
"--card": toShadCn(lightElementBg),
"--card-foreground": toShadCn(lightFg),
"--border": toShadCn(lightBorder),
"--input": toShadCn(lightBorder),
"--primary": toShadCn(lightPrimary),
"--primary-foreground": toShadCn(getForegroundColor(lightPrimary)),
"--secondary": toShadCn(lightAccent),
"--secondary-foreground": toShadCn(lightFg),
"--accent": toShadCn(lightAccent),
"--accent-foreground": toShadCn(lightFg),
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "60 9.1% 97.8%",
"--ring": toShadCn(lightPrimary),
"--radius": `${radiusRem}rem`
};
const darkVars = {
"--background": toShadCn(darkBg),
"--foreground": toShadCn(darkFg),
"--muted": toShadCn(darkBorder),
"--muted-foreground": toShadCn(darkFg),
"--popover": toShadCn(darkElementBg),
"--popover-foreground": toShadCn(darkFg),
"--card": toShadCn(darkElementBg),
"--card-foreground": toShadCn(darkFg),
"--border": toShadCn(darkBorder),
"--input": toShadCn(darkBorder),
"--primary": toShadCn(darkPrimary),
"--primary-foreground": toShadCn(getForegroundColor(darkPrimary)),
"--secondary": toShadCn(darkAccent),
"--secondary-foreground": toShadCn(darkFg),
"--accent": toShadCn(darkAccent),
"--accent-foreground": toShadCn(darkFg),
"--destructive": "0 62.8% 30.6%",
"--destructive-foreground": "0 0% 98%",
"--ring": toShadCn(darkPrimary),
"--radius": `${radiusRem}rem`
};
return createCssString({ appearance, lightVars, darkVars });
}
return createCssString({
appearance,
darkVars: {
"--background": "240 10% 3.9%",
"--foreground": "0 0% 98%",
"--muted": "240 3.7% 15.9%",
"--muted-foreground": "240 5% 64.9%",
"--popover": "240 10% 3.9%",
"--popover-foreground": "0 0% 98%",
"--card": "240 10% 3.9%",
"--card-foreground": "0 0% 98%",
"--border": "240 3.7% 15.9%",
"--input": "240 3.7% 15.9%",
"--primary": toShadCn(color),
"--primary-foreground": toShadCn(getForegroundColor(color)),
"--secondary": "240 3.7% 15.9%",
"--secondary-foreground": "0 0% 98%",
"--accent": "240 3.7% 15.9%",
"--accent-foreground": "0 0% 98%",
"--destructive": "0 62.8% 30.6%",
"--destructive-foreground": "0 0% 98%",
"--ring": "240 4.9% 83.9%",
"--radius": `${radiusRem}rem`
},
lightVars: {
"--background": "0 0% 100%",
"--foreground": "20 14.3% 4.1%",
"--muted": "60 4.8% 95.9%",
"--muted-foreground": "25 5.3% 44.7%",
"--popover": "0 0% 100%",
"--popover-foreground": "20 14.3% 4.1%",
"--card": "0 0% 100%",
"--card-foreground": "20 14.3% 4.1%",
"--border": "20 5.9% 90%",
"--input": "20 5.9% 90%",
"--primary": toShadCn(color),
"--primary-foreground": toShadCn(getForegroundColor(color)),
"--secondary": "60 4.8% 95.9%",
"--secondary-foreground": "24 9.8% 10%",
"--accent": "60 4.8% 95.9%",
"--accent-foreground": "24 9.8% 10%",
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "60 9.1% 97.8%",
"--ring": "20 14.3% 4.1%",
"--radius": `${radiusRem}rem`
}
});
};
// src/schemas.ts
import { Type } from "@sinclair/typebox";
import { Value } from "@sinclair/typebox/value";
import Color2 from "colorjs.io";
var ThemeJsonSchema = Type.Object({
primary: Type.String(),
variant: Type.Union([
Type.Literal("professional"),
Type.Literal("tint"),
Type.Literal("vibrant")
]),
appearance: Type.Union([
Type.Literal("light"),
Type.Literal("dark"),
Type.Literal("system")
]),
radius: Type.Number()
});
var safeParseThemeJson = (content) => {
try {
const parsed = JSON.parse(content);
const result = Value.Parse(ThemeJsonSchema, parsed);
new Color2(result.primary);
return result;
} catch (e) {
console.error(e);
return null;
}
};
// src/index.ts
function themePlugin(_options) {
const options = {
themeJsonPath: "./theme.json",
createThemeVars: (theme) => createTheme(theme),
..._options
};
let cachedCss = null;
const virtualModuleId = "virtual:theme-vars";
const resolvedVirtualModuleId = "\0" + virtualModuleId;
return {
name: "vite-plugin-theme",
async buildStart() {
try {
const themeContent = await fs.readFile(options.themeJsonPath, "utf-8");
const themeConfig = safeParseThemeJson(themeContent);
cachedCss = themeConfig ? options.createThemeVars(themeConfig) : null;
} catch (e) {
this.error(`Failed to read theme file: ${e.message}`);
}
},
configureServer(server) {
const resolvedPath = path.resolve(options.themeJsonPath);
server.watcher.add(resolvedPath);
server.watcher.on("change", async (changedPath) => {
if (changedPath === resolvedPath) {
try {
const componentsJsonFile = await fs.readFile(resolvedPath, "utf-8");
const themeConfig = safeParseThemeJson(componentsJsonFile);
cachedCss = themeConfig ? options.createThemeVars(themeConfig) : null;
server.ws.send({
type: "full-reload",
path: "*"
});
server.moduleGraph.invalidateAll();
} catch (e) {
server.config.logger.error(`Failed to update theme: ${e.message}`);
}
}
});
},
resolveId(id) {
if (id === virtualModuleId) {
return resolvedVirtualModuleId;
}
},
load(id) {
if (id === resolvedVirtualModuleId && cachedCss) {
return `
// Remove any existing theme styles first
document.querySelector('style[data-vite-theme]')?.remove()
const style = document.createElement('style')
style.setAttribute('data-vite-theme', '')
style.textContent = ${JSON.stringify(cachedCss)}
document.head.insertBefore(style, document.head.firstChild)
`;
}
},
transformIndexHtml(html) {
if (!cachedCss) {
return;
}
return {
html,
tags: [
{
tag: "style",
attrs: {
"data-vite-theme": "",
// Add lower priority by inserting at start of head
"data-inject-first": ""
},
children: cachedCss,
injectTo: "head-prepend"
// Change to prepend instead of default append
}
]
};
}
};
}
export {
themePlugin as default
};
//# sourceMappingURL=index.mjs.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,39 @@
{
"name": "@replit/vite-plugin-shadcn-theme-json",
"version": "0.0.4",
"private": false,
"devDependencies": {
"tsup": "^8.3.5",
"tsx": "^4.9.5",
"vite": "^5.4.10",
"yargs": "^17.5.1",
"@replit/tsconfig": "0.0.0"
},
"exports": {
"import": {
"types": "./dist/index.d.mts",
"import": "./dist/index.mjs"
},
"require": {
"types": "./dist/index.d.ts",
"require": "./dist/index.js"
}
},
"files": [
"dist"
],
"dependencies": {
"@sinclair/typebox": "^0.33.17",
"colorjs.io": "^0.5.2",
"dedent": "^1.5.3"
},
"//": "This is the correct way to set up a package with a `src/index.ts` root file that supports both ESM and CJS modules.",
"///": "https://johnnyreilly.com/dual-publishing-esm-cjs-modules-with-tsup-and-are-the-types-wrong",
"type": "module",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.mts",
"scripts": {
"build": "tsup src/index.ts --external vite --format cjs,esm --dts --clean --sourcemap"
}
}