mancha 0.17.3 → 0.17.4

package/global.d.ts

@@ -1,4 +1,4 @@
 declare module "*.css" {
-  const content: string;
-  export default content;
+	const content: string;
+	export default content;
 }

package/gulpfile.ts

@@ -0,0 +1,44 @@
+import * as fs from "fs/promises";
+import GulpClient from "gulp";
+import csso from "gulp-csso";
+import { exec } from "child_process";
+
+const execTask = (command: string) => {
+	return async function (done: (err?: any) => void) {
+		const { err, stderr, stdout } = await new Promise<{ err: any; stderr: string; stdout: string }>(
+			(resolve) => exec(command, (err, stdout, stderr) => resolve({ err, stderr, stdout })),
+		);
+		if (stdout) console.log(stdout);
+		if (stderr) console.error(stderr);
+		done(err);
+	};
+};
+
+// Clean tasks
+
+GulpClient.task("clean", function (done) {
+	return fs.rm("dist", { recursive: true, force: true }).then(() => done());
+});
+
+// Build tasks
+
+GulpClient.task("ts", execTask("tsec -m NodeNext -p ."));
+
+GulpClient.task("chmod", function (done) {
+	return fs.chmod("dist/cli.js", 0o755).then(() => done());
+});
+
+GulpClient.task("css", function () {
+	return GulpClient.src("src/**/*.css").pipe(csso()).pipe(GulpClient.dest("dist"));
+});
+
+GulpClient.task("webpack:main", execTask("webpack --config webpack.config.ts"));
+GulpClient.task("webpack:esmodule", execTask("webpack --config webpack.config.esmodule.ts"));
+
+GulpClient.task("fixtures", function () {
+	return GulpClient.src("src/fixtures/**/*").pipe(GulpClient.dest("dist/fixtures"));
+});
+
+GulpClient.task("webpack", GulpClient.series("webpack:main", "webpack:esmodule"));
+GulpClient.task("build", GulpClient.series("ts", "chmod", "css", "webpack", "fixtures"));
+GulpClient.task("default", GulpClient.series("build"));

package/package.json

@@ -1,86 +1,88 @@
 {
-  "name": "mancha",
-  "version": "0.17.3",
-  "description": "Javscript HTML rendering engine",
-  "main": "dist/index.js",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "unpkg": "dist/mancha.js",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./browser": {
-      "types": "./dist/browser.d.ts",
-      "default": "./dist/browser.js"
-    },
-    "./dist/*.js": {
-      "types": "./dist/*.d.ts",
-      "default": "./dist/*.js"
-    }
-  },
-  "scripts": {
-    "clean": "rm -rf dist/",
-    "build": "gulp build",
-    "pretest": "npm run build",
-    "test:node": "mocha 'dist/**/*.test.js' --ignore 'dist/browser.test.js'",
-    "test:browser": "web-test-runner 'dist/**/*.test.js' '!dist/cli.test.js' '!dist/ssr.test.js' '!dist/index.test.js' '!dist/worker.test.js' '!dist/type_checker.test.js' --node-resolve --compatibility all --playwright --browsers chromium --no-sandbox",
-    "test": "npm run test:node && npm run test:browser",
-    "check_size": "brotli -c dist/mancha.js | wc -c",
-    "cli": "node dist/cli.js"
-  },
-  "bin": {
-    "mancha": "dist/cli.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/fresho-dev/mancha.git"
-  },
-  "keywords": [
-    "templating",
-    "rendering",
-    "reactive",
-    "html"
-  ],
-  "author": "contact@fresho.dev",
-  "license": "MIT",
-  "dependencies": {
-    "dom-serializer": "^2.0.0",
-    "glob": "^10.3.10",
-    "htmlparser2": "^9.1.0",
-    "jsdom": "^27.0.1",
-    "safevalues": "^0.6.0",
-    "typescript": "^5.9.3",
-    "yargs": "^17.7.2"
-  },
-  "devDependencies": {
-    "@types/chai": "^5.2.3",
-    "@types/chai-as-promised": "^8.0.1",
-    "@types/glob": "^8.1.0",
-    "@types/jsdom": "^21.1.6",
-    "@types/mocha": "^10.0.10",
-    "@types/node": "^20.12.11",
-    "@types/path-browserify": "^1.0.1",
-    "@types/trusted-types": "^2.0.7",
-    "@types/yargs": "^17.0.29",
-    "@web/test-runner": "^0.19.0",
-    "@web/test-runner-playwright": "^0.11.1",
-    "chai": "^5.3.3",
-    "chai-as-promised": "^8.0.1",
-    "css-loader": "^7.1.2",
-    "csso": "^5.0.5",
-    "gulp": "^5.0.0",
-    "gulp-csso": "^4.0.1",
-    "gulp-typescript": "^6.0.0-alpha.1",
-    "mocha": "^11.0.1",
-    "static-server": "^3.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-node": "^10.9.2",
-    "tsec": "^0.2.8",
-    "typescript": "^5.9.3",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^5.1.4",
-    "yargs": "^17.7.2"
-  }
+	"name": "mancha",
+	"version": "0.17.4",
+	"description": "Javscript HTML rendering engine",
+	"main": "dist/index.js",
+	"type": "module",
+	"types": "dist/index.d.ts",
+	"unpkg": "dist/mancha.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./browser": {
+			"types": "./dist/browser.d.ts",
+			"default": "./dist/browser.js"
+		},
+		"./dist/*.js": {
+			"types": "./dist/*.d.ts",
+			"default": "./dist/*.js"
+		}
+	},
+	"scripts": {
+		"clean": "rm -rf dist/",
+		"build": "gulp build",
+		"pretest": "npm run build",
+		"test:node": "mocha 'dist/**/*.test.js' --ignore 'dist/browser.test.js'",
+		"test:browser": "web-test-runner 'dist/**/*.test.js' '!dist/cli.test.js' '!dist/ssr.test.js' '!dist/index.test.js' '!dist/worker.test.js' '!dist/type_checker.test.js' --node-resolve --compatibility all --playwright --browsers chromium --no-sandbox",
+		"test": "npm run test:node && npm run test:browser",
+		"check_size": "brotli -c dist/mancha.js | wc -c",
+		"cli": "node dist/cli.js",
+		"gen:docs": "tsx scripts/generate-css-docs.ts"
+	},
+	"bin": {
+		"mancha": "dist/cli.js"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/fresho-dev/mancha.git"
+	},
+	"keywords": [
+		"templating",
+		"rendering",
+		"reactive",
+		"html"
+	],
+	"author": "contact@fresho.dev",
+	"license": "MIT",
+	"dependencies": {
+		"dom-serializer": "^2.0.0",
+		"glob": "^10.3.10",
+		"htmlparser2": "^9.1.0",
+		"jsdom": "^27.0.1",
+		"safevalues": "^0.6.0",
+		"typescript": "^5.9.3",
+		"yargs": "^17.7.2"
+	},
+	"devDependencies": {
+		"@types/chai": "^5.2.3",
+		"@types/chai-as-promised": "^8.0.1",
+		"@types/glob": "^8.1.0",
+		"@types/jsdom": "^21.1.6",
+		"@types/mocha": "^10.0.10",
+		"@types/node": "^20.12.11",
+		"@types/path-browserify": "^1.0.1",
+		"@types/trusted-types": "^2.0.7",
+		"@types/yargs": "^17.0.29",
+		"@web/test-runner": "^0.19.0",
+		"@web/test-runner-playwright": "^0.11.1",
+		"chai": "^5.3.3",
+		"chai-as-promised": "^8.0.1",
+		"css-loader": "^7.1.2",
+		"csso": "^5.0.5",
+		"gulp": "^5.0.0",
+		"gulp-csso": "^4.0.1",
+		"gulp-typescript": "^6.0.0-alpha.1",
+		"mocha": "^11.0.1",
+		"static-server": "^3.0.0",
+		"terser-webpack-plugin": "^5.3.10",
+		"ts-node": "^10.9.2",
+		"tsec": "^0.2.8",
+		"tsx": "^4.21.0",
+		"typescript": "^5.9.3",
+		"webpack": "^5.97.1",
+		"webpack-cli": "^5.1.4",
+		"yargs": "^17.7.2"
+	}
 }

package/scripts/generate-css-docs.ts

@@ -0,0 +1,263 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import {
+	MEDIA_BREAKPOINTS,
+	PROPS_CUSTOM,
+	PROPS_COLORS,
+	PROPS_SPACING,
+	PROPS_SIZING,
+	PROPS_POSITION,
+	PROPS_SIZING_MINMAX,
+	UNITS_ALL,
+	REM_UNIT,
+	PERCENTS,
+	DURATIONS,
+} from "../src/css_gen_utils.ts";
+
+const DOCS_PATH = path.join(process.cwd(), "docs", "css.md");
+
+function handledBySize(klass: string) {
+	return klass.startsWith("text-") && (klass.endsWith("px") || klass.endsWith("rem"));
+}
+
+function generateMarkdown() {
+	let md = "# CSS Documentation\n\n";
+
+	md +=
+		"Mancha provides a set of CSS utilities and basic styles to help you build your application.\n\n";
+
+	md += "## Basic CSS\n\n";
+	md +=
+		'The basic CSS rules provide a clean, readable default style for standard HTML elements. You can inject them using `injectBasicCss()` or by adding `css="basic"` to your script tag.\n\n';
+	md += "### Reset & Defaults\n";
+	md += "- **Max Width**: 70ch (centered)\n";
+	md += "- **Padding**: 2em 1em\n";
+	md += "- **Line Height**: 1.75\n";
+	md += "- **Font Family**: sans-serif\n";
+	md += "- **H1-H6 Margin**: 1em 0 0.5em\n";
+	md += "- **P, UL, OL Margin Bottom**: 1em\n\n";
+
+	md += "## Utility CSS\n\n";
+	md +=
+		'The utility CSS rules are inspired by Tailwind CSS. You can inject them using `injectUtilsCss()` or by adding `css="utils"` to your script tag.\n\n';
+
+	md += "### Media Breakpoints\n\n";
+	md += "| Prefix | Min Width |\n";
+	md += "| --- | --- |\n";
+	for (const [bp, width] of Object.entries(MEDIA_BREAKPOINTS)) {
+		md += `| \`${bp}:\` | \`${width}px\` |\n`;
+	}
+	md += "\n";
+
+	md += "### Pseudo States\n\n";
+	md += "The following pseudo states are supported for all utilities:\n";
+	md += "- `hover:`\n";
+	md += "- `focus:`\n";
+	md += "- `disabled:`\n";
+	md += "- `active:`\n\n";
+
+	md += "### Spacing (Margin & Padding)\n\n";
+	md += "Spacing utilities use a 0.25rem (4px) unit by default.\n\n";
+	md += "| Prefix | Property | Values |\n";
+	md += "| --- | --- | --- |\n";
+	for (const [prop, prefix] of Object.entries(PROPS_SPACING)) {
+		md += `| \`${prefix}-\` | \`${prop}\` | \`0\`, \`0.25rem\` - \`128rem\` (and negative versions) |\n`;
+		md += `| \`${prefix}x-\` | \`${prop}-left/right\` | Same as above |\n`;
+		md += `| \`${prefix}y-\` | \`${prop}-top/bottom\` | Same as above |\n`;
+		md += `| \`${prefix}t-\` | \`${prop}-top\` | Same as above |\n`;
+		md += `| \`${prefix}b-\` | \`${prop}-bottom\` | Same as above |\n`;
+		md += `| \`${prefix}l-\` | \`${prop}-left\` | Same as above |\n`;
+		md += `| \`${prefix}r-\` | \`${prop}-right\` | Same as above |\n`;
+	}
+	md += "\n";
+
+	md += "### Sizing (Width & Height)\n\n";
+	md += "| Prefix | Property | Values |\n";
+	md += "| --- | --- | --- |\n";
+	for (const [prop, prefix] of Object.entries(PROPS_SIZING)) {
+		md += `| \`${prefix}-\` | \`${prop}\` | \`0\`, \`full\` (100%), \`screen\` (100vw/vh), \`auto\`, \`px\`, \`0.25rem\` - \`128rem\` |\n`;
+		md += `| \`${prefix}-dvw/dvh/svw/svh/lvw/lvh\` | \`${prop}\` | Viewport-relative units |\n`;
+		md += `| \`${prefix}-fit/min/max\` | \`${prop}\` | \`fit-content\`, \`min-content\`, \`max-content\` |\n`;
+	}
+	for (const [prop, prefix] of Object.entries(PROPS_SIZING_MINMAX)) {
+		md += `| \`${prefix}-\` | \`${prop}\` | Same as sizing |\n`;
+	}
+	md +=
+		"| `size-` | `width` & `height` | `auto`, `px`, `full`, `dvw`, `dvh`, `svw`, `svh`, `lvw`, `lvh`, `min`, `max`, `fit` |\n";
+	md += "\n";
+
+	md += "### Colors\n\n";
+	md += "Supported prefixes: `text-`, `bg-`, `border-`, `fill-`.\n\n";
+	md += "| Color | Shades |\n";
+	md += "| --- | --- |\n";
+	md += "| `white`, `black`, `transparent` | N/A |\n";
+	for (const [color, shades] of Object.entries(PROPS_COLORS)) {
+		md += `| \`${color}\` | \`50\`, \`100\`, \`200\`, \`300\`, \`400\`, \`500\`, \`600\`, \`700\`, \`800\`, \`900\` |\n`;
+	}
+	md += "\n";
+
+	md += "### Borders & Corners\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const borderProps = ["border", "rounded"];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (borderProps.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Shadows & Effects\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const effectProps = ["shadow", "opacity-", "mix-blend-"];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (effectProps.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Transitions & Animations\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const animProps = ["transition", "duration-", "animate-"];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (animProps.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Interactivity\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const interProps = ["cursor-", "select-", "pointer-events-", "resize", "user-select"];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (interProps.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Typography\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const typoProps = [
+		"font-",
+		"text-",
+		"italic",
+		"not-italic",
+		"leading-",
+		"tracking-",
+		"uppercase",
+		"lowercase",
+		"capitalize",
+		"truncate",
+		"whitespace-",
+		"decoration-",
+		"underline",
+		"line-through",
+	];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (typoProps.some((p) => klass.startsWith(p)) && !handledBySize(klass)) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Flexbox & Layout\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const flexProps = [
+		"flex",
+		"justify-",
+		"items-",
+		"self-",
+		"content-",
+		"grow",
+		"shrink",
+		"gap-",
+		"order-",
+		"grid-",
+	];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (flexProps.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Position & Inset\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const posProps = [
+		"relative",
+		"absolute",
+		"fixed",
+		"sticky",
+		"inset-",
+		"top-",
+		"bottom-",
+		"left-",
+		"right-",
+		"z-",
+		"object-",
+	];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (posProps.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "### Other Utilities\n\n";
+	md += "| Utility | Description |\n";
+	md += "| --- | --- |\n";
+	const allHandledPrefixes = [
+		...typoProps,
+		...flexProps,
+		...posProps,
+		...borderProps,
+		...effectProps,
+		...animProps,
+		...interProps,
+		"w-",
+		"h-",
+		"min-w-",
+		"min-h-",
+		"max-w-",
+		"max-h-",
+		"bg-",
+		"border-",
+		"opacity-",
+		"cursor-",
+		"size-",
+		"block",
+		"inline",
+		"hidden",
+		"contents",
+		"visible",
+		"invisible",
+		"collapse",
+		"overflow-",
+		"overscroll-",
+		"list-",
+		"align-",
+		"sr-only",
+		"not-sr-only",
+	];
+	for (const [klass, props] of Object.entries(PROPS_CUSTOM)) {
+		if (!allHandledPrefixes.some((p) => klass.startsWith(p))) {
+			md += `| \`${klass}\` | \`${JSON.stringify(props)}\` |\n`;
+		}
+	}
+	md += "\n";
+
+	md += "--- \n\n*Generated automatically from `src/css_gen_utils.ts`*\n";
+
+	return md;
+}
+
+fs.writeFileSync(DOCS_PATH, generateMarkdown());
+console.log(`Documentation generated at ${DOCS_PATH}`);

package/tsconfig.json

@@ -1,21 +1,44 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ES2022",
-    "outDir": "dist",
-    "rootDir": "src",
-    "strict": true,
-    "sourceMap": true,
-    "declaration": true,
-    "noImplicitAny": true,
-    "skipLibCheck": true,
-    "stripInternal": true,
-    "moduleResolution": "node",
-    "plugins": [
-      {
-        "name": "tsec",
-        "exemptionConfig": "./tsec_exemptions.json"
-      }
-    ]
-  }
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
+		"outDir": "dist",
+		"rootDir": "src",
+		"strict": true,
+		"sourceMap": true,
+		"declaration": true,
+		"noImplicitAny": true,
+		"skipLibCheck": true,
+		"stripInternal": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"baseUrl": ".",
+		"paths": {
+			"mancha": [
+				"./src/index.ts"
+			],
+			"mancha/*": [
+				"./src/*.ts"
+			]
+		},
+		"plugins": [
+			{
+				"name": "tsec",
+				"exemptionConfig": "./tsec_exemptions.json"
+			}
+		]
+	},
+	"include": [
+		"src/**/*",
+		"global.d.ts"
+	],
+	"exclude": [
+		"scripts",
+		"examples",
+		"gulpfile.ts",
+		"webpack.config.ts",
+		"webpack.config.esmodule.ts",
+		"dist"
+	]
 }

package/tsec_exemptions.json

@@ -1,4 +1,9 @@
 {
-    "ban-domparser-parsefromstring": ["src/browser.ts", "src/dome.test.ts", "src/worker.test.ts", "src/test_utils.ts"],
-    "ban-range-createcontextualfragment": ["src/browser.ts"]
-}
+	"ban-domparser-parsefromstring": [
+		"src/browser.ts",
+		"src/dome.test.ts",
+		"src/worker.test.ts",
+		"src/test_utils.ts"
+	],
+	"ban-range-createcontextualfragment": ["src/browser.ts"]
+}

package/webpack.config.esmodule.ts

@@ -0,0 +1,26 @@
+import TerserPlugin from "terser-webpack-plugin";
+import type { Configuration } from "webpack";
+
+const config: Configuration = {
+	target: "web",
+	mode: "production",
+	entry: {
+		browser: "./dist/browser.js",
+		safe_browser: "./dist/safe_browser.js",
+	},
+	output: {
+		filename: "[name].js",
+		library: { type: "modern-module" },
+	},
+	experiments: {
+		outputModule: true,
+	},
+	optimization: {
+		minimize: true,
+		minimizer: [
+			new TerserPlugin({ extractComments: false, terserOptions: { output: { comments: false } } }),
+		],
+	},
+};
+
+export default config;

package/webpack.config.ts

@@ -0,0 +1,21 @@
+import TerserPlugin from "terser-webpack-plugin";
+import type { Configuration } from "webpack";
+
+const config: Configuration = {
+	target: "web",
+	mode: "production",
+	entry: {
+		mancha: "./dist/mancha.js",
+	},
+	output: {
+		filename: "[name].js",
+	},
+	optimization: {
+		minimize: true,
+		minimizer: [
+			new TerserPlugin({ extractComments: false, terserOptions: { output: { comments: false } } }),
+		],
+	},
+};
+
+export default config;

package/gulpfile.js

@@ -1,44 +0,0 @@
-import * as fs from "fs/promises";
-import GulpClient from "gulp";
-import csso from "gulp-csso";
-import { exec } from "child_process";
-
-const execTask = (command) => {
-  return async function (done) {
-    const { err, stderr, stdout } = await new Promise((resolve) =>
-      exec(command, (err, stderr, stdout) => resolve({ err, stderr, stdout }))
-    );
-    if (stdout) console.log(stdout);
-    if (stderr) console.error(stderr);
-    done(err);
-  };
-};
-
-// Clean tasks
-
-GulpClient.task("clean", function (done) {
-  return fs.rm("dist", { recursive: true, force: true }).then(done);
-});
-
-// Build tasks
-
-GulpClient.task("ts", execTask("tsec -m ES2022 -p ."));
-
-GulpClient.task("chmod", function (done) {
-  return fs.chmod("dist/cli.js", 0o755).then(done);
-});
-
-GulpClient.task("css", function () {
-  return GulpClient.src("src/**/*.css").pipe(csso()).pipe(GulpClient.dest("dist"));
-});
-
-GulpClient.task("webpack:main", execTask("webpack --config webpack.config.js"));
-GulpClient.task("webpack:esmodule", execTask("webpack --config webpack.config.esmodule.js"));
-
-GulpClient.task("fixtures", function () {
-  return GulpClient.src("src/fixtures/**/*").pipe(GulpClient.dest("dist/fixtures"));
-});
-
-GulpClient.task("webpack", GulpClient.series("webpack:main", "webpack:esmodule"));
-GulpClient.task("build", GulpClient.series("ts", "chmod", "css", "webpack", "fixtures"));
-GulpClient.task("default", GulpClient.series("build"));