oscarmarina

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;

oscarmarina

Emulating CSS Style Queries with Lit Context

context-meta-provider

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>.

oscarmarina

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:

oscarmarina

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.

oscarmarina

import {dedupeMixin} from '@open-wc/dedupe-mixin';

/**
 * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
 *
 * 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.
 *

oscarmarina

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.
 */

oscarmarina

// @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';

oscarmarina

/**
 * 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;
  }

oscarmarina

// https://www.abeautifulsite.net/posts/converting-a-url-object-to-a-plain-object-in-java-script/

const url = new URL('https://api.chucknorris.io/jokes/random');

function urlToPlainObject(url) {
  const plainObject = {};

  for (const key in url) {
    if (typeof url[key] === 'string') {
      plainObject[key] = url[key];

oscarmarina

import { ReactiveController, ReactiveControllerHost } from 'lit';

import {
  createContext,
  ContextProvider,
  ContextConsumer,
  Context,
  ContextType,
} from '@lit/context';