Exercise to emulate CSS Style Queries using Context.
Currently, Style Queries are only supported in Chromium and Safari, but there seems to be a possible bug in Safari with elements inside a <slot>.
| export class LRUCache extends Map { | |
| constructor(maxSize) { | |
| if (maxSize <= 0) { | |
| throw new Error('maxSize must be greater than 0'); | |
| } | |
| super(); | |
| this.maxSize = maxSize; | |
| } | |
| set(key, value) { | |
| super.delete(key); |
| import { readdir, readFile, writeFile, stat } from 'node:fs/promises'; | |
| import path from 'node:path'; | |
| import { load as loadHtml } from 'cheerio'; | |
| // https://adrianroselli.com/2019/11/css-logical-properties.html | |
| const root = process.cwd(); | |
| const write = process.argv.includes('--write'); | |
| const includeDirs = [path.join(root, 'packages')]; |
| import {LitElement, html, css, nothing} from 'lit'; | |
| class ConsumerElement extends LitElement { | |
| static styles = css` | |
| :host { | |
| display: block; | |
| padding: 0.5rem 1rem; | |
| margin: 1rem 0; | |
| background-color: #e5c492; | |
| color: #432c00; |
Exercise to emulate CSS Style Queries using Context.
Currently, Style Queries are only supported in Chromium and Safari, but there seems to be a possible bug in Safari with elements inside a <slot>.
| import {writeFile} from 'fs/promises'; | |
| import * as cheerio from 'cheerio'; | |
| // https://github.com/badgen/badgen.net/blob/main/pages/api/npm.ts#L165 | |
| // https://github.com/npm/documentation/issues/1231 | |
| /** | |
| * Prompt: | |
| * | |
| * Hello! I need a well-structured Node.js script that retrieves and processes NPM package dependents with these specific requirements: |
| import fs from 'fs/promises'; | |
| /** | |
| * Prompt: | |
| * | |
| * I need a Node.js script that interacts with the GitHub API to fetch information about my repositories. The script should: | |
| * | |
| * - Use the GitHub API to fetch all repositories for a specific user, separating them into own repositories and forked repositories. | |
| * - For each repository, fetch the package.json file and extract the dependencies and devDependencies. | |
| * - If the repository is a monorepo (contains a workspaces field in package.json), recursively search for package.json files in subdirectories, excluding certain directories. |
| import {dedupeMixin} from '@open-wc/dedupe-mixin'; | |
| /** | |
| *  | |
| * | |
| * Deeply inspired by Konnor Rogers' approach to [making Lit components morphable](https://www.konnorrogers.com/posts/2024/making-lit-components-morphable). | |
| * | |
| * This mixin ensures that the property is reset to its initial value when the attribute is removed. | |
| * It applies to properties that have `reflect: true` and works even with those initialized as undefined, null, or false. | |
| * |
| import { html, LitElement } from 'lit'; | |
| import { styles } from './styles/pe-pe-styles.css.js'; | |
| // https://github.com/KonnorRogers/form-associated-helpers/blob/main/exports/mixins/lit-form-associated-mixin.js | |
| /** | |
| * Creates an object with a getter for properties, allowing for the dynamic creation of properties. | |
| * @param {Object} props - The properties to be included in the object. | |
| * @returns {Object} An object with a `properties` getter that returns a new objec. | |
| */ |
| // @ts-nocheck | |
| import path from 'node:path'; | |
| import {fileURLToPath} from 'node:url'; | |
| import importPlugin from 'eslint-plugin-import'; | |
| import {configs as wc} from 'eslint-plugin-wc'; | |
| import {configs as lit} from 'eslint-plugin-lit'; | |
| import tseslint from 'typescript-eslint'; | |
| import tsParser from '@typescript-eslint/parser'; | |
| import html from '@html-eslint/eslint-plugin'; | |
| import eslintConfigPrettier from 'eslint-config-prettier'; |
| /** | |
| * Checks if an element should be ignored. | |
| * @param {Element} element - The DOM element to check. | |
| * @param {Array} [exceptions=['dialog', '[popover]']] - Array of Elements to ignore when checking the element. | |
| * @returns {boolean} True if the element should be ignored by a screen reader, false otherwise. | |
| */ | |
| const isElementInvisible = (element, exceptions = ['dialog', '[popover]']) => { | |
| if (!element || !(element instanceof HTMLElement)) { | |
| return false; | |
| } |