@symbo.ls/scratch 3.4.5 → 3.4.9

package/dist/esm/utils/sequence.js

@@ -0,0 +1,303 @@
+import { isString } from "@domql/utils";
+import { toDashCase } from "@symbo.ls/smbls-utils";
+import { getActiveConfig } from "../factory.js";
+import { CSS_UNITS, isScalingUnit } from "./unit.js";
+import { isCSSVar } from "./color.js";
+const numToLetterMap = {
+  "-6": "U",
+  "-5": "V",
+  "-4": "W",
+  "-3": "X",
+  "-2": "Y",
+  "-1": "Z",
+  0: "A",
+  1: "B",
+  2: "C",
+  3: "D",
+  4: "E",
+  5: "F",
+  6: "G",
+  7: "H",
+  8: "I",
+  9: "J",
+  10: "K",
+  11: "L",
+  12: "M",
+  13: "N",
+  14: "O",
+  15: "P",
+  16: "Q",
+  17: "R",
+  18: "S",
+  19: "T"
+};
+const setSequenceValue = (props, sequenceProps) => {
+  const { key, variable, value, scaling, index, scalingVariable } = props;
+  sequenceProps.sequence[key] = {
+    key,
+    decimal: ~~(value * 100) / 100,
+    val: ~~value,
+    scaling,
+    index,
+    scalingVariable,
+    variable
+  };
+  sequenceProps.scales[key] = scaling;
+  sequenceProps.vars[variable] = scaling + sequenceProps.unit;
+};
+const getFnPrefixAndValue = (val) => {
+  if (!val.includes("(")) return val;
+  const prefix = val.split("(")[0];
+  const value = val.slice(val.indexOf("(") + 1, val.lastIndexOf(")"));
+  return [prefix, value];
+};
+const setScalingVar = (key, sequenceProps) => {
+  const { base, type, unit } = sequenceProps;
+  const defaultVal = (isScalingUnit(unit) ? 1 : base) + unit;
+  if (key === 0) return defaultVal;
+  const prefix = "--" + (type && type.replace(".", "-"));
+  const ratioVar = `${prefix}-ratio`;
+  if (key > 0) {
+    const prevLetterKey = numToLetterMap[key - 1];
+    return `calc(var(${prefix}-${prevLetterKey}) * var(${ratioVar}))`;
+  }
+  if (key < 0) {
+    const nextLetterKey = numToLetterMap[key + 1];
+    return `calc(var(${prefix}-${nextLetterKey}) / var(${ratioVar}))`;
+  }
+};
+const setSubScalingVar = (index, arr, variable, sequenceProps) => {
+  const { type } = sequenceProps;
+  const skipMiddle = index === 2 && arr.length === 2;
+  const indexMapWithLength = skipMiddle ? index + 1 : index;
+  const prefix = "--" + (type && type.replace(".", "-"));
+  const subRatioVarPrefix = `${prefix}-sub-ratio-`;
+  return `calc(var(${variable}) * var(${subRatioVarPrefix + indexMapWithLength}))`;
+};
+const getSubratioDifference = (base, ratio) => {
+  const diff = base * ratio - base;
+  const subRatio = diff / 1.618;
+  const first = base * ratio - subRatio;
+  const second = base + subRatio;
+  const middle = (first + second) / 2;
+  return [first, middle, second];
+};
+const getSubratio = (base, ratio) => {
+  return getSubratioDifference(base, ratio).map((v) => v / base);
+};
+const generateSubSequence = (props, sequenceProps) => {
+  const { key, base, value, ratio, variable, index } = props;
+  const next = value * ratio;
+  const diffRounded = ~~next - ~~value;
+  let arr;
+  const [first, middle, second] = getSubratioDifference(value, ratio);
+  if (diffRounded > 16) arr = [first, middle, second];
+  else arr = [first, second];
+  arr.forEach((v, k) => {
+    const scaling = ~~(v / base * 1e3) / 1e3;
+    const newVar = variable + (k + 1);
+    const newIndex = index + (k + 1) / 10;
+    const scalingVariable = setSubScalingVar(
+      k + 1,
+      arr,
+      variable,
+      sequenceProps
+    );
+    const props2 = {
+      key: key + (k + 1),
+      variable: newVar,
+      value: v,
+      scaling,
+      scalingVariable,
+      index: newIndex
+    };
+    setSequenceValue(props2, sequenceProps);
+  });
+};
+const switchSequenceOnNegative = (key, base, ratio) => {
+  return base * Math.pow(ratio, key);
+};
+const generateSequence = (sequenceProps) => {
+  const { type, base, ratio, range, subSequence } = sequenceProps;
+  const n = Math.abs(range[0]) + Math.abs(range[1]);
+  const prefix = "--" + (type && type.replace(".", "-")) + "-";
+  for (let i = 0; i <= n; i++) {
+    const key = range[1] - i;
+    const letterKey = numToLetterMap[key];
+    const value = switchSequenceOnNegative(key, base, ratio);
+    const scaling = ~~(value / base * 100) / 100;
+    const variable = prefix + letterKey;
+    const scalingVariable = setScalingVar(key, sequenceProps);
+    const props = {
+      key: letterKey,
+      variable,
+      value,
+      base,
+      scaling,
+      scalingVariable,
+      ratio,
+      index: key
+    };
+    setSequenceValue(props, sequenceProps);
+    if (subSequence) generateSubSequence(props, sequenceProps);
+  }
+  return sequenceProps;
+};
+const generateSequencePosition = (sequenceProps, position = 0) => {
+  const { type, base, ratio, subSequence } = sequenceProps;
+  const letterKey = isString(position) ? position : numToLetterMap[position];
+  const index = isString(position) ? Object.entries(numToLetterMap).find(
+    ([, value2]) => value2 === position
+  )?.[0] : position;
+  if (!letterKey) {
+    console.warn(`Position ${position} is out of range in numToLetterMap`);
+    return null;
+  }
+  const result = {
+    sequence: {},
+    scales: {},
+    vars: {},
+    ...sequenceProps
+  };
+  const value = base * Math.pow(ratio, index);
+  const scaling = ~~(value / base * 100) / 100;
+  const prefix = "--" + (type && type.replace(".", "-")) + "-";
+  const variable = prefix + letterKey;
+  const scalingVariable = setScalingVar(index, sequenceProps);
+  const props = {
+    key: letterKey,
+    variable,
+    value,
+    base,
+    scaling,
+    scalingVariable,
+    ratio,
+    index
+  };
+  setSequenceValue(props, result);
+  if (subSequence) {
+    generateSubSequence(props, result);
+  }
+  return result;
+};
+const getSequenceValue = (value = "A", sequenceProps) => {
+  const CONFIG = getActiveConfig();
+  const { UNIT } = CONFIG;
+  if (isString(value) && isCSSVar(value)) return `var(${value})`;
+  const { sequence, unit = UNIT.default, useVariable } = sequenceProps;
+  const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
+  const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
+  const hasUnits = CSS_UNITS.some((unit2) => value.includes(unit2));
+  if (hasUnits || !startsWithDashOrLetter) return value;
+  const skipArr = [
+    "none",
+    "auto",
+    "max-content",
+    "min-content",
+    "fit-content",
+    "inherit",
+    "initial",
+    "unset",
+    "revert",
+    "revert-layer"
+  ];
+  if (skipArr.includes(value)) return value;
+  const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
+  const letterVal = value.toUpperCase();
+  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
+  let absValue = isNegative ? letterVal.slice(1) : letterVal;
+  let mediaName = "";
+  if (absValue.includes("_")) {
+    mediaName = "_" + absValue.split("_")[1].toLowerCase();
+    absValue = absValue.split("_")[0];
+  }
+  const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
+  if (absValue.includes("+")) {
+    const [first, second] = absValue.split("+");
+    const joint = `${varValue(first)} + ${varValue(second)}`;
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+  } else if (absValue.includes("*")) {
+    const [first, second] = absValue.split("*");
+    const joint = `${varValue(first)} * ${varValue(second)}`;
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+  } else if (absValue.includes("-")) {
+    const [first, second] = absValue.split("-");
+    const joint = `${varValue(first)} - ${varValue(second)}`;
+    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+  }
+  if (!sequence[absValue] && absValue.length === 2) {
+    if (CONFIG.verbose)
+      console.warn(
+        absValue,
+        "- value is not found because `subSequence` is set to false"
+      );
+    absValue = absValue.slice(0, 1);
+  }
+  if (useVariable || CONFIG.useVariable) {
+    const varValue2 = `var(${prefix}${absValue}${mediaName})`;
+    return isNegative ? `calc(${varValue2} * -1)` : varValue2;
+  }
+  const sequenceItem = sequence ? sequence[absValue] : null;
+  if (!sequenceItem) return console.warn("can't find", sequence, absValue);
+  if (unit === "ms" || unit === "s") {
+    return isNegative + sequenceItem.val + unit;
+  }
+  return isNegative + sequenceItem.scaling + unit;
+};
+const getSequenceValueBySymbols = (value, sequenceProps) => {
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (!mathArr.length) return value;
+  return mathArr.map((symbol) => {
+    const valuesArr = value.split(symbol + " ").map((v) => v.trim());
+    const transformedValues = valuesArr.map((v) => {
+      return getSequenceValue(v, sequenceProps);
+    });
+    return transformedValues.join(" " + symbol + " ");
+  }).join("");
+};
+const getSequenceValuePropertyPair = (value, propertyName, sequenceProps, fnPrefix) => {
+  if (typeof value !== "string") {
+    const CONFIG = getActiveConfig();
+    if (CONFIG.verbose) console.warn(propertyName, value, "is not a string");
+    return { [propertyName]: value };
+  }
+  if (value === "-" || value === "") return {};
+  if (!fnPrefix && value.includes("(")) {
+    const fnArr = getFnPrefixAndValue(value);
+    fnPrefix = fnArr[0];
+    value = fnArr[1];
+  }
+  const mathArr = ["+", "-", "*", "/", ","].filter(
+    (v) => value.includes(v + " ")
+  );
+  if (mathArr.length) {
+    value = getSequenceValueBySymbols(value, sequenceProps);
+  } else value = getSequenceValue(value, sequenceProps);
+  return { [propertyName]: fnPrefix ? `${fnPrefix}(${value})` : value };
+};
+const findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
+const findHeadings = (propertyNames) => {
+  const { h1Matches, sequence } = propertyNames;
+  return new Array(6).fill(null).map((_, i) => {
+    const findLetter = findHeadingLetter(h1Matches, i);
+    return sequence[findLetter];
+  });
+};
+export {
+  findHeadingLetter,
+  findHeadings,
+  generateSequence,
+  generateSequencePosition,
+  generateSubSequence,
+  getFnPrefixAndValue,
+  getSequenceValue,
+  getSequenceValueBySymbols,
+  getSequenceValuePropertyPair,
+  getSubratio,
+  getSubratioDifference,
+  numToLetterMap,
+  setScalingVar,
+  setSubScalingVar
+};

package/dist/esm/utils/sprite.js

@@ -0,0 +1,65 @@
+import { isArray, isNotProduction, isString } from "@domql/utils";
+import { getActiveConfig } from "../factory";
+const isDev = isNotProduction();
+const generateSprite = (icons) => {
+  const CONFIG = getActiveConfig();
+  let sprite = "";
+  for (const key in icons) {
+    if (CONFIG.__svg_cache[key]) continue;
+    else CONFIG.__svg_cache[key] = true;
+    sprite += icons[key];
+  }
+  return sprite;
+};
+const parseRootAttributes = (htmlString) => {
+  const val = htmlString.default || htmlString;
+  if (!isString(val)) {
+    if (isDev) console.warn("parseRootAttributes:", val, "is not a string");
+    return;
+  }
+  const match = val.match(/<svg\s+(.*?)>/);
+  if (!match || !match[1]) {
+    return {};
+  }
+  const attrString = match[1];
+  const attrs = attrString.match(
+    /(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm
+  );
+  return attrs.reduce((acc, attr) => {
+    const [key, value] = attr.split("=");
+    acc[key] = value.replace(/['"]/g, "");
+    return acc;
+  }, {});
+};
+const replaceIdsAndUrls = (code, key) => {
+  const idRegex = /id="([^"]*)"/;
+  const urlRegex = /url\(#([^)]*)\)/g;
+  const matches = code.match(/id="([^"]*)"/g);
+  let replacedCode = code;
+  if (isArray(matches)) {
+    matches.forEach(() => {
+      const randomKey = Math.floor(Math.random() * 1e5);
+      replacedCode = code.replace(idRegex, `id="${key}-${randomKey}"`).replace(urlRegex, `url(#${key}-${randomKey})`);
+    });
+  }
+  return replacedCode;
+};
+const convertSvgToSymbol = (key, code) => {
+  const extractAttrs = parseRootAttributes(code);
+  const { width, height } = extractAttrs;
+  const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`;
+  const xmlns = "http://www.w3.org/2000/svg";
+  const replacedCode = replaceIdsAndUrls(code, key);
+  let symbol = replacedCode.replace(
+    "<svg",
+    `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
+  );
+  symbol = symbol.replace(/width="[^"]*"/, "");
+  symbol = symbol.replace(/height="[^"]*"/, "");
+  symbol = symbol.replace("</svg", "</symbol");
+  return symbol;
+};
+export {
+  convertSvgToSymbol,
+  generateSprite
+};

package/dist/esm/utils/theme.js

@@ -0,0 +1,9 @@
+const returnSubThemeOrDefault = (orig, theme) => {
+  if (!orig) return;
+  if (orig.themes && orig.themes[theme]) return orig.themes[theme];
+  if (orig[theme]) return [orig, orig[theme]];
+  return orig;
+};
+export {
+  returnSubThemeOrDefault
+};

package/dist/esm/utils/unit.js

@@ -0,0 +1,59 @@
+const isScalingUnit = (unit) => {
+  return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
+};
+const CSS_UNITS = [
+  // Absolute
+  "px",
+  "cm",
+  "mm",
+  "in",
+  "pt",
+  "pc",
+  // Font-relative
+  "em",
+  "rem",
+  "ex",
+  "cap",
+  "ch",
+  "ic",
+  "lh",
+  "rlh",
+  // Viewport-relative
+  "%",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax",
+  "svw",
+  "svh",
+  "lvw",
+  "lvh",
+  "dvw",
+  "dvh",
+  // Container query units
+  "cqw",
+  "cqh",
+  "cqi",
+  "cqb",
+  "cqmin",
+  "cqmax",
+  // Angle
+  "deg",
+  "rad",
+  "grad",
+  "turn",
+  // Time
+  "s",
+  "ms",
+  // Resolution
+  "dpi",
+  "dpcm",
+  "dppx",
+  // Grid fractional
+  "fr",
+  "auto"
+];
+export {
+  CSS_UNITS,
+  isScalingUnit
+};

package/dist/esm/utils/var.js

@@ -0,0 +1,82 @@
+import { isObjectLike } from "@domql/utils";
+import { getActiveConfig } from "../factory.js";
+import { getSubratio } from "./sequence.js";
+import { isScalingUnit } from "./unit.js";
+const setVariables = (result, key) => {
+  const CONFIG = getActiveConfig();
+  const { CSS_VARS } = CONFIG;
+  if (isObjectLike(result.value)) {
+  } else {
+    CSS_VARS[result.var] = result.value;
+  }
+};
+const applySequenceGlobalVars = (vars, obj, options) => {
+  const CONFIG = getActiveConfig();
+  const { UNIT } = CONFIG;
+  const unit = obj.unit || UNIT.default;
+  const { base, ratio, type } = obj;
+  const prefix = "--" + (type && type.replace(".", "-"));
+  vars[`${prefix}-base`] = base;
+  vars[`${prefix}-unit`] = unit;
+  const ratioVar = `${prefix}-ratio`;
+  vars[ratioVar] = ratio;
+  const [first, middle, second] = getSubratio(base, ratio);
+  vars[`${prefix}-sub-ratio-1`] = `calc(var(${prefix}-ratio) * ${first / ratio})`;
+  vars[`${prefix}-sub-ratio-2`] = `calc(var(${prefix}-ratio) * ${middle / ratio})`;
+  vars[`${prefix}-sub-ratio-3`] = `calc(var(${prefix}-ratio) * ${second / ratio})`;
+};
+const applySequenceVars = (FACTORY, options = {}) => {
+  const CONFIG = getActiveConfig();
+  const { UNIT, TIMING, CSS_VARS } = CONFIG;
+  const unit = FACTORY.unit || UNIT.default;
+  const { mediaRegenerate, sequence, scales } = FACTORY;
+  if (!mediaRegenerate) {
+    applySequenceGlobalVars(CSS_VARS, FACTORY, options);
+  }
+  for (const key in sequence) {
+    const item = sequence[key];
+    const value = (FACTORY.type === TIMING.type ? sequence[key].val : scales[key]) + unit;
+    if (!mediaRegenerate) {
+      CSS_VARS[item.variable + "_default"] = value;
+      CSS_VARS[item.variable] = item.scalingVariable;
+      continue;
+    }
+    if (options.useDefault === false) {
+      CSS_VARS[item.variable] = value;
+    } else {
+      CSS_VARS[item.variable + "_default"] = value;
+      CSS_VARS[item.variable] = `var(${item.variable + "_default"})`;
+    }
+  }
+};
+const applyMediaSequenceVars = (FACTORY, media, options = {}) => {
+  const CONFIG = getActiveConfig();
+  const { UNIT, MEDIA, CSS_VARS } = CONFIG;
+  const mediaName = media.slice(1);
+  const unit = FACTORY.unit || UNIT.default;
+  const { mediaRegenerate } = FACTORY;
+  const { sequence, scales } = FACTORY[media];
+  const query = MEDIA[mediaName];
+  if (!query && CONFIG.verbose) console.warn("Can't find media query ", query);
+  if (!mediaRegenerate) {
+    let underMediaQuery = CSS_VARS[`@media ${query}`];
+    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
+    applySequenceGlobalVars(underMediaQuery, FACTORY[media], options);
+    return;
+  }
+  for (const key in sequence) {
+    const item = sequence[key];
+    const value = (isScalingUnit(unit) ? scales[key] : sequence[key].val) + unit;
+    if (!query && CONFIG.verbose) console.warn("Can't find query ", query);
+    let underMediaQuery = CSS_VARS[`@media ${query}`];
+    if (!underMediaQuery) underMediaQuery = CSS_VARS[`@media ${query}`] = {};
+    underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+    CSS_VARS[item.variable + "_" + mediaName] = value;
+  }
+};
+export {
+  applyMediaSequenceVars,
+  applySequenceGlobalVars,
+  applySequenceVars,
+  setVariables
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "3.4.5",
+  "version": "3.4.9",
   "files": [
     "dist",
     "*.js",
@@ -18,7 +18,7 @@
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
-      "browser": "./dist/iife/index.js",
+      "browser": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
     }
   },
@@ -26,18 +26,18 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild src/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild src/*.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
     "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=SmblsScratch --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.4.5",
-    "@symbo.ls/smbls-utils": "^3.4.5",
+    "@domql/utils": "^3.4.9",
+    "@symbo.ls/smbls-utils": "^3.4.9",
     "color-contrast-checker": "^1.5.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
-  "browser": "./dist/iife/index.js",
+  "browser": "./dist/esm/index.js",
   "sideEffects": false
 }