diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..d37cdfa --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +package-lock.json +yarn.lock +pnpm-lock.yaml +.husky/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 88b79bc..8130bad 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,7 @@ { "arrowParens": "always", "endOfLine": "lf", - "printWidth": 140, + "printWidth": 80, "semi": true, "singleQuote": true, "tabWidth": 2 diff --git a/commitlint.config.js b/commitlint.config.js index b5544dc..3eee94c 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -5,7 +5,23 @@ export default { rules: { // types declared in Conventional Commits specification & @commitlint/config-conventional // see: https://www.conventionalcommits.org/en/v1.0.0/#summary - 'type-enum': [2, 'always', ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']], + 'type-enum': [ + 2, + 'always', + [ + 'build', + 'chore', + 'ci', + 'docs', + 'feat', + 'fix', + 'perf', + 'refactor', + 'revert', + 'style', + 'test', + ], + ], 'scope-enum': [ 2, 'always', diff --git a/demos/components/ripple.html b/demos/components/ripple.html index 13e9b70..d8c763a 100644 --- a/demos/components/ripple.html +++ b/demos/components/ripple.html @@ -1,4 +1,4 @@ - + diff --git a/demos/esm.html b/demos/esm.html index 28fe178..1d87365 100644 --- a/demos/esm.html +++ b/demos/esm.html @@ -1,4 +1,4 @@ - + diff --git a/demos/index.html b/demos/index.html index 0e91fa5..7781404 100644 --- a/demos/index.html +++ b/demos/index.html @@ -1,4 +1,4 @@ - + diff --git a/dev/scripts/lib/build.mjs b/dev/scripts/lib/build.mjs index 8866216..966f6ce 100644 --- a/dev/scripts/lib/build.mjs +++ b/dev/scripts/lib/build.mjs @@ -34,13 +34,25 @@ const minifiedBundlePlugins = [ export async function main(options) { log('starting bundle...'); log('copying files...'); - await fs.promises.cp(path.join(root, 'src'), path.join(root, '.__compile_cache__'), { recursive: true }); + await fs.promises.cp( + path.join(root, 'src'), + path.join(root, '.__compile_cache__'), + { + recursive: true, + }, + ); log('compiling TypeScript...'); // This may not seem like standard usage, but it can at least reduce the waiting time by 3s - child_process.spawnSync('node', [path.join(root, 'node_modules', 'typescript', 'lib', 'tsc.js')], { cwd: root }); + child_process.spawnSync( + 'node', + [path.join(root, 'node_modules', 'typescript', 'lib', 'tsc.js')], + { cwd: root }, + ); logSuccess('success compiled TypeScript'); log('generating bundles...'); - const globedFiles = fs.globSync(path.resolve(root, '.__compile_cache__', '**', '*.js')); + const globedFiles = fs.globSync( + path.resolve(root, '.__compile_cache__', '**', '*.js'), + ); debug({ globedFiles }); const generateBundlesResult = await rollup({ // input: path.resolve(__dirname, 'exports__compile_cache.js'), @@ -56,18 +68,21 @@ export async function main(options) { debug({ generateBundlesResult, generateBundlesOutput }); logSuccess('success generated bundles'); log('cleaning up temp dir...'); - await fs.promises.rm(path.join(root, '.__compile_cache__'), { recursive: true }); + await fs.promises.rm(path.join(root, '.__compile_cache__'), { + recursive: true, + }); if (!options.includes('--no-min-bundle')) { log('generating minified bundle...'); const generateMinifiedBundleResult = await rollup({ input: path.resolve(root, 'exports.js'), plugins: [...basicPlugins, ...minifiedBundlePlugins], }); - const generateMinifiedBundleOutput = await generateMinifiedBundleResult.write({ - file: path.resolve(root, 'dist', 'material-me.min.js'), - format: 'umd', - ...basicOutputConfig, - }); + const generateMinifiedBundleOutput = + await generateMinifiedBundleResult.write({ + file: path.resolve(root, 'dist', 'material-me.min.js'), + format: 'umd', + ...basicOutputConfig, + }); debug({ generateMinifiedBundleResult, generateMinifiedBundleOutput }); } logSuccess('success generated minified bundle'); @@ -86,9 +101,14 @@ export async function execute(options) { } export async function cleanup(options) { - if (fs.existsSync(path.join(root, '.__compile_cache__')) && !options.includes('--no-finally-clean')) { + if ( + fs.existsSync(path.join(root, '.__compile_cache__')) && + !options.includes('--no-finally-clean') + ) { log('cleaning up temp dir...'); - await fs.promises.rm(path.join(root, '.__compile_cache__'), { recursive: true }); + await fs.promises.rm(path.join(root, '.__compile_cache__'), { + recursive: true, + }); } } diff --git a/dev/scripts/lib/utils.mjs b/dev/scripts/lib/utils.mjs index e1e9512..7c15bde 100644 --- a/dev/scripts/lib/utils.mjs +++ b/dev/scripts/lib/utils.mjs @@ -16,6 +16,7 @@ export function debug(message, ...optionalParams) { } export function isSubDir(parent, dir) { const relative = path.relative(parent, dir); - const isSubdir = relative && !relative.startsWith('..') && !path.isAbsolute(relative); + const isSubdir = + relative && !relative.startsWith('..') && !path.isAbsolute(relative); return !!isSubdir; } diff --git a/dev/scripts/lib/watch.mjs b/dev/scripts/lib/watch.mjs index 3211376..743403a 100644 --- a/dev/scripts/lib/watch.mjs +++ b/dev/scripts/lib/watch.mjs @@ -38,7 +38,7 @@ export async function main(options) { } debug(`File changes detected: ${filename} (type: ${eventType})`); taskStack.push({ eventType, filename }); - } + }, ); intervalId = setInterval(async () => { if (taskStack.length > 0 && !taskProcessing) { diff --git a/dev/scripts/script.mjs b/dev/scripts/script.mjs index 7f50e9e..b1960f6 100644 --- a/dev/scripts/script.mjs +++ b/dev/scripts/script.mjs @@ -16,8 +16,12 @@ const scripts = { const argv = process.argv.slice(2); const scriptNameIndex = argv.findIndex((arg) => !arg.startsWith('-')); const scriptName = argv[scriptNameIndex]; -const runOptions = argv.filter((arg, index) => arg.startsWith('-') && index < scriptNameIndex); -const scriptOptions = argv.filter((arg, index) => arg.startsWith('-') && index > scriptNameIndex); +const runOptions = argv.filter( + (arg, index) => arg.startsWith('-') && index < scriptNameIndex, +); +const scriptOptions = argv.filter( + (arg, index) => arg.startsWith('-') && index > scriptNameIndex, +); const docsStr = ` Usage: pnpm script [run-options] [script-name] [script-options] diff --git a/src/components/page/page.ts b/src/components/page/page.ts index c08e3b0..9c54d24 100644 --- a/src/components/page/page.ts +++ b/src/components/page/page.ts @@ -1,5 +1,9 @@ import { useElement } from '../../core/element'; -import { defaultTheme, generateCSSKeys, overrideColorKeys } from '../../utils/theme'; +import { + defaultTheme, + generateCSSKeys, + overrideColorKeys, +} from '../../utils/theme'; import template from './page.html'; import style from './page.css'; diff --git a/src/components/ripple/ripple.ts b/src/components/ripple/ripple.ts index 66315ed..7d0ae58 100644 --- a/src/components/ripple/ripple.ts +++ b/src/components/ripple/ripple.ts @@ -13,8 +13,12 @@ export class Ripple extends useElement({ props, syncProps: ['attached'], setup(shadowRoot) { - const containerEl = shadowRoot.querySelector('.container') as HTMLDivElement; - const rippleTemplateEl = shadowRoot.querySelector('.ripple-template') as HTMLDivElement; + const containerEl = shadowRoot.querySelector( + '.container', + ) as HTMLDivElement; + const rippleTemplateEl = shadowRoot.querySelector( + '.ripple-template', + ) as HTMLDivElement; /** 父元素（用于吸附模式） */ const parent = this.parentElement; @@ -68,10 +72,13 @@ export class Ripple extends useElement({ // 点击结束处理方法 const touchEnd = () => { // 淡出动画 - const fadeOutAnimation = rippleEl.animate([{ opacity: 0.24 }, { opacity: 0 }], { - duration: 400, - fill: 'forwards', - }); + const fadeOutAnimation = rippleEl.animate( + [{ opacity: 0.24 }, { opacity: 0 }], + { + duration: 400, + fill: 'forwards', + }, + ); // 移除元素 fadeOutAnimation.addEventListener('finish', () => { rippleEl.remove(); diff --git a/src/core/element.ts b/src/core/element.ts index da51d2b..cdc3d99 100644 --- a/src/core/element.ts +++ b/src/core/element.ts @@ -21,7 +21,10 @@ interface ComponentConfig { /** 属性监听列表 */ syncProps?: string[]; /** 初始化函数 */ - setup?: (this: HTMLElement & Props, shadowRoot: ShadowRoot) => SetupOptions; + setup?: ( + this: HTMLElement & Props, + shadowRoot: ShadowRoot, + ) => SetupOptions; } /** @@ -35,7 +38,11 @@ interface SetupOptions { /** 移动到新文档回调 */ onAdopt?: () => void; /** 属性更改、添加、删除、替换回调 */ - onAttributeChanged?: (name: string, oldValue: PropType, newValue: PropType) => void; + onAttributeChanged?: ( + name: string, + oldValue: PropType, + newValue: PropType, + ) => void; /** 暴露的方法 */ expose?: { [key: string]: (...args: any[]) => any }; /** 属性 setters */ @@ -82,7 +89,7 @@ export function parseType(value: unknown, old: PropType) { * @returns 应继承的自定义元素类 */ export function useElement( - config: ComponentConfig + config: ComponentConfig, ): { new (): HTMLElement & Props; /** @@ -98,7 +105,10 @@ export function useElement( * 为此组件增加一个属性 * @param name 属性名 */ - const createProperty = (component: MaterialMeGeneratedComponent, name: string) => { + const createProperty = ( + component: MaterialMeGeneratedComponent, + name: string, + ) => { Object.defineProperty(component, name, { get: () => { return props[name]; @@ -107,7 +117,12 @@ export function useElement( const oldValue = props[name]; const parsedValue = parseType(value, oldValue); if (parsedValue !== props[name]) { - setupOptions.onAttributeChanged?.call(component, name, oldValue, parsedValue); + setupOptions.onAttributeChanged?.call( + component, + name, + oldValue, + parsedValue, + ); props[name] = parsedValue; syncProperty(component, name); setupOptions.propsSetter?.[name]?.call(component, parsedValue as any); @@ -121,7 +136,10 @@ export function useElement( * 处理一个属性的更改同步 * @param name 属性名 */ - const syncProperty = (component: MaterialMeGeneratedComponent, name: string) => { + const syncProperty = ( + component: MaterialMeGeneratedComponent, + name: string, + ) => { if (config.syncProps?.includes(name)) { const lowerKey = name.toLowerCase(); const attrValue = component.getAttribute(lowerKey); @@ -139,7 +157,9 @@ export function useElement( * 暴露属性 */ const exposeProperties = (component: MaterialMeGeneratedComponent) => { - const exposeDescriptors = Object.getOwnPropertyDescriptors(setupOptions.expose ?? {}); + const exposeDescriptors = Object.getOwnPropertyDescriptors( + setupOptions.expose ?? {}, + ); for (const key in exposeDescriptors) { const item = exposeDescriptors[key]; const existing = Object.getOwnPropertyDescriptor(component, key); @@ -173,7 +193,11 @@ export function useElement( attachStylesheet(shadowRoot, config.style); } props = { ...config.props }; - setupOptions = config.setup?.call(this as unknown as HTMLElement & Props, shadowRoot) ?? {}; + setupOptions = + config.setup?.call( + this as unknown as HTMLElement & Props, + shadowRoot, + ) ?? {}; const nonDefaultProps: string[] = []; exposeProperties(this); for (const name in props) { @@ -214,5 +238,8 @@ export function useElement( window.customElements.define(name, this); } } - return MaterialMeGeneratedComponent as unknown as { new (): HTMLElement & Props; readonly define: (name: string) => void }; + return MaterialMeGeneratedComponent as unknown as { + new (): HTMLElement & Props; + readonly define: (name: string) => void; + }; } diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 08f806d..44f6c7a 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -185,7 +185,11 @@ export function generateCSSKeys(theme: Theme): string { const toRgbValue = (color: RgbColor) => { return `${color.r}, ${color.g}, ${color.b}`; }; - const generateKeys = (obj: any, prefix: string, valueProcessor?: (value: any) => string) => { + const generateKeys = ( + obj: any, + prefix: string, + valueProcessor?: (value: any) => string, + ) => { return Object.keys(obj) .map((key) => { const value = obj[key]; @@ -197,8 +201,16 @@ export function generateCSSKeys(theme: Theme): string { .join('\n'); }; - const keysColorLight = generateKeys(theme.colors.light, 'color-light', (value: RgbColor) => toRgbValue(value)); - const keysColorDark = generateKeys(theme.colors.dark, 'color-dark', (value: RgbColor) => toRgbValue(value)); + const keysColorLight = generateKeys( + theme.colors.light, + 'color-light', + (value: RgbColor) => toRgbValue(value), + ); + const keysColorDark = generateKeys( + theme.colors.dark, + 'color-dark', + (value: RgbColor) => toRgbValue(value), + ); const keysElevations = generateKeys(theme.elevations, 'elevation'); const keys = keysColorLight + keysColorDark + keysElevations; return keys; @@ -210,7 +222,10 @@ export function generateCSSKeys(theme: Theme): string { * @param theme 主题对象（仅用于提取键名） * @returns */ -export function generateOverrideColorKeys(scheme: 'light' | 'dark', theme: Theme = defaultTheme): string { +export function generateOverrideColorKeys( + scheme: 'light' | 'dark', + theme: Theme = defaultTheme, +): string { const keys = Object.keys(theme.colors[scheme]).map((key) => { const casedKey = toKebabCase(key); return `--mm-color-${casedKey}: var(--mm-color-${scheme}-${casedKey});`;