@vanilla-bean/components 1.0.0

package/package.json

@@ -0,0 +1,123 @@
+{
+	"name": "@vanilla-bean/components",
+	"version": "1.0.0",
+	"type": "module",
+	"module": "./index.js",
+	"types": "./index.d.ts",
+	"exports": {
+		"./Component": "./Component/index.js",
+		"./Elem": "./Elem/index.js",
+		"./styled": "./styled/index.js",
+		"./plugins/*": "./plugins/*.js",
+		"./theme/*": "./theme/*.js",
+		"./theme": "./theme/index.js",
+		"./utils/*": "./utils/*.js",
+		"./utils": "./utils/index.js",
+		"./package.json": "./package.json",
+		"./FontWithASyntaxHighlighter-Regular.woff2": "./FontWithASyntaxHighlighter-Regular.woff2",
+		"./eslint.config.cjs": "./eslint.config.cjs",
+		"./prettier.config.cjs": "./prettier.config.cjs",
+		"./spellcheck.config.cjs": "./spellcheck.config.cjs",
+		"./test-setup.js": "./test-setup.js",
+		".": "./index.js"
+	},
+	"files": [
+		"/Elem/*.js",
+		"/Component/*.js",
+		"/styled/*.js",
+		"/plugins/*.js",
+		"/components/**/*",
+		"/theme/**/*",
+		"/utils/**/*",
+		"index.js",
+		"index.d.ts",
+		"./FontWithASyntaxHighlighter-Regular.woff2",
+		"!/components/**/demo.js",
+		"!/components/**/*.test.js",
+		"!/utils/**/*.test.js",
+		"eslint.config.cjs",
+		"prettier.config.cjs",
+		"spellcheck.config.cjs",
+		"test-setup.js"
+	],
+	"description": "A lightweight, reactive component library for building modern web applications with vanilla JavaScript",
+	"keywords": [
+		"components",
+		"reactive",
+		"vanilla-js",
+		"proxy",
+		"web-components",
+		"ui",
+		"no-framework",
+		"dom"
+	],
+	"license": "MIT",
+	"author": "justfatlard (https://github.com/fatlard1993)",
+	"browserslist": [
+		"Chrome >= 112",
+		"Edge >= 112",
+		"Firefox >= 117",
+		"Safari >= 16.5"
+	],
+	"scripts": {
+		"prepare": "bun run prepare:githooks && bun run build",
+		"prepare:githooks": "[ -n \"$CI\" ] && exit 0 || (git config --local core.hooksPath .githooks || echo 'Can not set git hooks')",
+		"start": "bun run dev",
+		"dev": "bun run devTools/build.js && bun --hot demo/server.js",
+		"build": "bun run build:clean && bun run build:index && bun run devTools/build.js",
+		"build:index": "bun run devTools/updateComponentIndex.js && bun run devTools/updateDemoViewIndex.js && bun run build:types && bun run format",
+		"build:types": "bun run devTools/buildTypes.js",
+		"build:clean": "rm -rf ./*.asText ./demo/build/",
+		"build:watch": "bun run build -- --watch",
+		"create:component": "bun run devTools/createComponent.js",
+		"lint": "bun --bun eslint",
+		"lint:fix": "bun --bun eslint --fix",
+		"format": "BROWSERSLIST_IGNORE_OLD_DATA=1 bun run lint:fix && bun --bun prettier --write . --log-level warn",
+		"test": "bun test",
+		"test:watch": "bun test --watch",
+		"version": "npm version"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/fatlard1993/vanilla-bean-components.git"
+	},
+	"bugs": {
+		"url": "https://github.com/fatlard1993/vanilla-bean-components/issues"
+	},
+	"homepage": "https://github.com/fatlard1993/vanilla-bean-components#readme",
+	"dependencies": {
+		"@ctrl/tinycolor": "^4.1.0",
+		"@fontsource-variable/kode-mono": "^5.2.6",
+		"@fortawesome/fontawesome-free": "^7.0.0",
+		"@vanilla-bean/oxject": "^1.0.0",
+		"nanoid": "^5.1.5"
+	},
+	"devDependencies": {
+		"@vanilla-bean/hypertether": "^1.0.0",
+		"baseline-browser-mapping": "^2.10.38",
+		"caniuse-lite": "^1.0.30001799",
+		"@eslint/compat": "^1.3.2",
+		"@eslint/js": "^9.33.0",
+		"@happy-dom/global-registrator": "^18.0.1",
+		"@testing-library/dom": "^10.4.1",
+		"@testing-library/jest-dom": "^6.6.4",
+		"@testing-library/user-event": "^14.6.1",
+		"bun-types": "^1.2.20",
+		"eslint": "^9.33.0",
+		"eslint-plugin-compat": "^6.0.2",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-jsdoc": "^54.0.0",
+		"eslint-plugin-spellcheck": "0.0.20",
+		"eslint-plugin-testing-library": "^7.6.6",
+		"eslint-plugin-unicorn": "^60.0.0",
+		"eslint-plugin-write-good-comments": "^0.2.0",
+		"globals": "^16.3.0",
+		"emoji-js": "^3.8.1",
+		"marked": "^16.1.2",
+		"moresketchy": "wbern/MoreSketchy.js",
+		"prettier": "^3.6.2"
+	},
+	"engines": {
+		"node": ">=18"
+	}
+}

package/plugins/asText.js

@@ -0,0 +1,38 @@
+import { writeFileSync, unlink } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+const onResolve = ({ path, importer }) => {
+	path = resolve(dirname(importer), path);
+
+	writeFileSync(path, '');
+
+	unlink(path, error => error && error.code !== 'ENOENT' && console.error(error));
+
+	return { path };
+};
+
+const onLoad =
+	format =>
+	async ({ path }) => {
+		const text = await Bun.file(path.replace('.asText', '')).text();
+
+		return format === 'build' ? { contents: text, loader: 'text' } : { exports: { default: text }, loader: 'object' };
+	};
+
+export const buildLoader = {
+	name: '.asText build loader',
+	async setup(build) {
+		build.onResolve({ filter: /\.asText$/ }, onResolve);
+
+		build.onLoad({ filter: /\.asText$/ }, onLoad('build'));
+	},
+};
+
+export const runtimeLoader = {
+	name: '.asText runtime loader',
+	async setup(build) {
+		build.onResolve({ filter: /\.asText$/ }, onResolve);
+
+		build.onLoad({ filter: /\.asText$/ }, onLoad('runtime'));
+	},
+};

package/plugins/loadPlugins.js

@@ -0,0 +1,5 @@
+import { runtimeLoader as asText } from './asText';
+import { runtimeLoader as markdownLoader } from './markdownLoader';
+
+Bun.plugin(asText);
+Bun.plugin(markdownLoader);

package/plugins/markdownLoader.js

@@ -0,0 +1,121 @@
+import { dirname, resolve } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { marked } from 'marked';
+import EmojiConverter from 'emoji-js';
+
+import { customAlphabet } from 'nanoid';
+
+import { removeExcessIndentation } from '../utils/string';
+import { processTemplate } from '../devTools/processTemplate.js';
+
+// eslint-disable-next-line spellcheck/spell-checker
+const idGen = customAlphabet('ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz-', 10);
+
+const emoji = new EmojiConverter();
+emoji.replace_mode = 'unified';
+emoji.allow_native = true;
+
+const copyToClipboardButton = id =>
+	`<button class="icon fa-support fa-copy" title="Copy to clipboard" onpointerup="if (isSecureContext) window.navigator.clipboard.writeText(document.getElementById('${id}').textContent); alert('copied text to clipboard');"}></button>`;
+
+// Legacy extraction functions removed - now handled by JSDoc system
+
+const extractDesign = (fileText, markdownPath) => {
+	const designPath = resolve(dirname(markdownPath), 'design.excalidraw.png');
+	try {
+		readFileSync(designPath);
+
+		const componentName = dirname(markdownPath).split('/').pop();
+		return `![design](../${componentName}/design.excalidraw.png)`;
+	} catch {
+		return '';
+	}
+};
+
+export const parseMarkdown = (markdown, path) => {
+	const id = idGen();
+
+	// First process JSDoc extraction commands using our comprehensive system
+	const jsdocProcessed = processTemplate(markdown, dirname(path));
+
+	// Then handle remaining template commands with legacy system
+	const processedMarkdown = jsdocProcessed
+		.replaceAll(/\[\[import\s(\S+)]](?:\/(.+)\/([gimsuy]+))?/g, (input, filename, regex, regexFlags) => {
+			const fileText = readFileSync(resolve(dirname(path), filename), 'utf8');
+
+			if (regex) {
+				try {
+					const parsedRegex = new RegExp(regex, regexFlags);
+					const regexResults = parsedRegex.exec(fileText);
+					const regexMatch = regexResults?.[0];
+
+					if (!regexMatch) {
+						console.error('No regex match', { filename, regex, regexFlags, parsedRegex, regexResults });
+						return fileText;
+					}
+
+					return removeExcessIndentation(regexMatch);
+				} catch (error) {
+					console.error('Could not apply regex', { filename, regex, regexFlags }, error);
+				}
+			}
+
+			return fileText;
+		})
+
+		// JSDoc extraction commands are now handled by processTemplate above
+		.replaceAll(/\[\[extract-design\]\]/g, () => {
+			return extractDesign('', path);
+		})
+
+		.replace(/## [^\n]*\n+(?=## |$)/g, '')
+
+		.replace(/\n{3,}/g, '\n\n');
+
+	const parsed = marked
+		.parse(processedMarkdown)
+		.replaceAll(
+			/<pre><code class="language-([^\s"]+)/g,
+			`<pre class="language-$1">${copyToClipboardButton(id)}<code id=${id} class="language-$1`,
+		)
+		.replaceAll(/<blockquote>\s?<p>\s?\[!(\w+)]/g, `<blockquote class="$1"><p>$1</p><p>`);
+
+	return emoji.replace_colons(parsed);
+};
+
+const loader = format => ({
+	name: '.md loader',
+	async setup(build) {
+		build.onLoad({ filter: /\.md$/ }, async ({ path }) => {
+			// Handle regular markdown files - check if file exists first
+			try {
+				const text = await Bun.file(path).text();
+				const parsed = parseMarkdown(text, path);
+
+				// For build-time, export as ES module for dynamic imports
+				if (format === 'build') {
+					return {
+						contents: `export default ${JSON.stringify(parsed)};`,
+						loader: 'js',
+					};
+				}
+
+				return { exports: { default: parsed }, loader: 'object' };
+			} catch {
+				// File doesn't exist - return empty content
+				console.warn(`Markdown file not found: ${path}`);
+				if (format === 'build') {
+					return {
+						contents: `export default '';`,
+						loader: 'js',
+					};
+				}
+				return { exports: { default: '' }, loader: 'object' };
+			}
+		});
+	},
+});
+
+export const buildLoader = loader('build');
+
+export const runtimeLoader = loader('runtime');

package/prettier.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+	arrowParens: 'avoid',
+	printWidth: 120,
+	proseWrap: 'never',
+	singleQuote: true,
+	useTabs: true,
+};

package/spellcheck.config.cjs

@@ -0,0 +1,227 @@
+/* eslint-disable spellcheck/spell-checker */
+module.exports = {
+	comments: true,
+	strings: true,
+	identifiers: true,
+	templates: true,
+	lang: 'en_US',
+	skipWords: [
+		'ecma',
+		'compat',
+		'eslintrc',
+		'multiline',
+		'builtins',
+		'lang',
+		'cjs',
+		'vitest',
+		'globals',
+		'dom',
+		'jsdom',
+		'jspm',
+		'nodelibs',
+		'fs',
+		'hsl',
+		'hsv',
+		'rgb',
+		'whitespace',
+		'splitter',
+		'recurse',
+		'debounce',
+		'debounces',
+		'debounced',
+		'debouncing',
+		'cb',
+		'javascript',
+		'webkit',
+		'scrollbar',
+		'monospace',
+		'osx',
+		'moz',
+		'grayscale',
+		'bool',
+		'hexcode',
+		'doctype',
+		'namespace',
+		'whiteish',
+		'blackish',
+		'tooltip',
+		'enum',
+		'textarea',
+		'checkbox',
+		'href',
+		'calc',
+		'textbox',
+		'autocorrect',
+		'autocapitalize',
+		'evt',
+		'popstate',
+		'rect',
+		'ul',
+		'li',
+		'nonmatching',
+		'strikethrough',
+		'antialiased',
+		'atrule',
+		'cdata',
+		'prolog',
+		'nowrap',
+		'searchbox',
+		'spinbutton',
+		'listitem',
+		'labelledby',
+		'dataset',
+		'entrypoint',
+		'touchstart',
+		'touchmove',
+		'touchend',
+		'touchcancel',
+		'mousedown',
+		'mouseout',
+		'mouseup',
+		'cancelable',
+		'contextmenu',
+		'mousemove',
+		'mouseenter',
+		'mouseleave',
+		'keydown',
+		'keyup',
+		'utf8',
+		'combobox',
+		'keyframes',
+		'collapsable',
+		'vantablack',
+		'ws',
+		'stdout',
+		'pathname',
+		'registrator',
+		'matchers',
+		'nanoid',
+		'esnext',
+		'keypress',
+		'datetime',
+		'aug',
+		'bg',
+		'popovertarget',
+		'popovertargetaction',
+		'xmark',
+		'crosshair',
+		'entrypoints',
+		'outdir',
+		'plaintext',
+		'dlc',
+		'argv',
+		'subtree',
+		'pointerover',
+		'pointerenter',
+		'pointerdown',
+		'pointermove',
+		'pointerup',
+		'pointercancel',
+		'pointerout',
+		'pointerleave',
+		'fixup',
+		'mjs',
+		'fieldset',
+		'woff',
+		'hotpink',
+		'lightblue',
+		'vbc',
+		'iframe',
+		'srcdoc',
+		'resize',
+		'th',
+		'td',
+		'thead',
+		'tbody',
+		'tfoot',
+		'colspan',
+		'unlink',
+		'jsdoc',
+		'hashchange',
+		'blockquote',
+		'kbd',
+		'fortawesome',
+		'fontawesome',
+		'nes',
+		'excalidraw',
+		'kode',
+		'fontsource',
+		'keyof',
+		'typeof',
+		'readonly',
+		'reactivity',
+		'refetches',
+		'testid',
+		'polymorphism',
+		'unicode',
+		'io',
+		'prepend',
+		'prepended',
+		'noopener',
+		'enums',
+		'evaluate',
+		'orchestrator',
+		'oxject',
+		'klass',
+		'reactively',
+		'ctx',
+		'lld',
+		'monday',
+		'tuesday',
+		'wednesday',
+		'thursday',
+		'friday',
+		'saturday',
+		'sunday',
+		'standup',
+		'tabindex',
+		'focusable',
+		'dy',
+		'readme',
+		'readdir',
+		'dts',
+		'unordered',
+		'customizable',
+		'optgroup',
+		'optgroups',
+		'breakpoint',
+		'scrollable',
+		'tooltips',
+		'validators',
+		'dropdown',
+		'stylesheets',
+		'comparator',
+		'getters',
+		'webpack',
+		'vite',
+		'esc',
+		'str',
+		'jdoe',
+		'dep',
+		'sv',
+		'ew',
+		'normalises',
+		'colour',
+		'lt',
+		'gt',
+		'amp',
+		'tinycolor',
+		'dq',
+		'tmpl',
+		'num',
+		'parens',
+		'paren',
+		'Idx',
+		'lr',
+		'qtychange',
+		'qtys',
+		'Raf',
+		'claude',
+		'accessors',
+		'bundler',
+		'localhost',
+	],
+	skipIfMatch: [String.raw`\d+v[wh]`],
+	skipWordIfMatch: [],
+	minLength: 1,
+};