@protohiro/effects-core 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# @protohiro/effects-core
+
+Core runtime utilities used by `@protohiro/effects`.
+
+## Install
+
+```bash
+npm install @protohiro/effects-core
+```
+
+## API
+
+- `ensureGlobalStyle`
+- `applyEffectClass`
+- `applyCssVars`
+- `mergeRefs`
+- `toCssLength`
+- `toCssAngle`
+- `toCssTime`
+- `toCssNumber`
+
+For full project docs and examples, see:
+https://github.com/snwol/protoeffects

package/dist/index.cjs

@@ -0,0 +1,131 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  applyCssVars: () => applyCssVars,
+  applyEffectClass: () => applyEffectClass,
+  assignRef: () => assignRef,
+  ensureGlobalStyle: () => ensureGlobalStyle,
+  mergeRefs: () => mergeRefs,
+  toCssAngle: () => toCssAngle,
+  toCssLength: () => toCssLength,
+  toCssNumber: () => toCssNumber,
+  toCssTime: () => toCssTime
+});
+module.exports = __toCommonJS(index_exports);
+function ensureGlobalStyle(styleId, cssText) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const selector = `style[data-protohiro-effects-style="${styleId}"]`;
+  if (document.head.querySelector(selector)) {
+    return;
+  }
+  const node = document.createElement("style");
+  node.setAttribute("data-protohiro-effects-style", styleId);
+  node.textContent = cssText;
+  document.head.appendChild(node);
+}
+function assignRef(ref, value) {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      assignRef(ref, value);
+    }
+  };
+}
+function applyEffectClass(element, className) {
+  const hadClass = element.classList.contains(className);
+  if (!hadClass) {
+    element.classList.add(className);
+  }
+  return () => {
+    if (!hadClass) {
+      element.classList.remove(className);
+    }
+  };
+}
+function applyCssVars(element, vars) {
+  const previous = /* @__PURE__ */ new Map();
+  for (const [name, value] of Object.entries(vars)) {
+    previous.set(name, element.style.getPropertyValue(name));
+    if (value === void 0) {
+      element.style.removeProperty(name);
+    } else {
+      element.style.setProperty(name, value);
+    }
+  }
+  return () => {
+    for (const [name, value] of previous.entries()) {
+      if (value) {
+        element.style.setProperty(name, value);
+      } else {
+        element.style.removeProperty(name);
+      }
+    }
+  };
+}
+function toCssLength(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+function toCssAngle(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}deg` : value;
+}
+function toCssTime(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}s` : value;
+}
+function toCssNumber(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return String(value);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  applyCssVars,
+  applyEffectClass,
+  assignRef,
+  ensureGlobalStyle,
+  mergeRefs,
+  toCssAngle,
+  toCssLength,
+  toCssNumber,
+  toCssTime
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type CssVars = Record<string, string | undefined>;\nexport type RefLike<T> = ((value: T | null) => void) | { current: T | null } | null | undefined;\n\nexport function ensureGlobalStyle(styleId: string, cssText: string): void {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  const selector = `style[data-protohiro-effects-style=\"${styleId}\"]`;\n  if (document.head.querySelector(selector)) {\n    return;\n  }\n\n  const node = document.createElement('style');\n  node.setAttribute('data-protohiro-effects-style', styleId);\n  node.textContent = cssText;\n  document.head.appendChild(node);\n}\n\nexport function assignRef<T>(ref: RefLike<T>, value: T | null): void {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === 'function') {\n    ref(value);\n    return;\n  }\n\n  ref.current = value;\n}\n\nexport function mergeRefs<T>(...refs: Array<RefLike<T>>): (value: T | null) => void {\n  return (value) => {\n    for (const ref of refs) {\n      assignRef(ref, value);\n    }\n  };\n}\n\nexport function applyEffectClass(element: HTMLElement, className: string): () => void {\n  const hadClass = element.classList.contains(className);\n  if (!hadClass) {\n    element.classList.add(className);\n  }\n\n  return () => {\n    if (!hadClass) {\n      element.classList.remove(className);\n    }\n  };\n}\n\nexport function applyCssVars(element: HTMLElement, vars: CssVars): () => void {\n  const previous = new Map<string, string>();\n\n  for (const [name, value] of Object.entries(vars)) {\n    previous.set(name, element.style.getPropertyValue(name));\n\n    if (value === undefined) {\n      element.style.removeProperty(name);\n    } else {\n      element.style.setProperty(name, value);\n    }\n  }\n\n  return () => {\n    for (const [name, value] of previous.entries()) {\n      if (value) {\n        element.style.setProperty(name, value);\n      } else {\n        element.style.removeProperty(name);\n      }\n    }\n  };\n}\n\nexport function toCssLength(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport function toCssAngle(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return typeof value === 'number' ? `${value}deg` : value;\n}\n\nexport function toCssTime(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return typeof value === 'number' ? `${value}s` : value;\n}\n\nexport function toCssNumber(value: number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return String(value);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,SAAS,kBAAkB,SAAiB,SAAuB;AACxE,MAAI,OAAO,aAAa,aAAa;AACnC;AAAA,EACF;AAEA,QAAM,WAAW,uCAAuC,OAAO;AAC/D,MAAI,SAAS,KAAK,cAAc,QAAQ,GAAG;AACzC;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,cAAc,OAAO;AAC3C,OAAK,aAAa,gCAAgC,OAAO;AACzD,OAAK,cAAc;AACnB,WAAS,KAAK,YAAY,IAAI;AAChC;AAEO,SAAS,UAAa,KAAiB,OAAuB;AACnE,MAAI,CAAC,KAAK;AACR;AAAA,EACF;AAEA,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AACT;AAAA,EACF;AAEA,MAAI,UAAU;AAChB;AAEO,SAAS,aAAgB,MAAoD;AAClF,SAAO,CAAC,UAAU;AAChB,eAAW,OAAO,MAAM;AACtB,gBAAU,KAAK,KAAK;AAAA,IACtB;AAAA,EACF;AACF;AAEO,SAAS,iBAAiB,SAAsB,WAA+B;AACpF,QAAM,WAAW,QAAQ,UAAU,SAAS,SAAS;AACrD,MAAI,CAAC,UAAU;AACb,YAAQ,UAAU,IAAI,SAAS;AAAA,EACjC;AAEA,SAAO,MAAM;AACX,QAAI,CAAC,UAAU;AACb,cAAQ,UAAU,OAAO,SAAS;AAAA,IACpC;AAAA,EACF;AACF;AAEO,SAAS,aAAa,SAAsB,MAA2B;AAC5E,QAAM,WAAW,oBAAI,IAAoB;AAEzC,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,IAAI,GAAG;AAChD,aAAS,IAAI,MAAM,QAAQ,MAAM,iBAAiB,IAAI,CAAC;AAEvD,QAAI,UAAU,QAAW;AACvB,cAAQ,MAAM,eAAe,IAAI;AAAA,IACnC,OAAO;AACL,cAAQ,MAAM,YAAY,MAAM,KAAK;AAAA,IACvC;AAAA,EACF;AAEA,SAAO,MAAM;AACX,eAAW,CAAC,MAAM,KAAK,KAAK,SAAS,QAAQ,GAAG;AAC9C,UAAI,OAAO;AACT,gBAAQ,MAAM,YAAY,MAAM,KAAK;AAAA,MACvC,OAAO;AACL,gBAAQ,MAAM,eAAe,IAAI;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAAwD;AAClF,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AAEO,SAAS,WAAW,OAAwD;AACjF,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,QAAQ;AACrD;AAEO,SAAS,UAAU,OAAwD;AAChF,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,MAAM;AACnD;AAEO,SAAS,YAAY,OAA+C;AACzE,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,15 @@
+type CssVars = Record<string, string | undefined>;
+type RefLike<T> = ((value: T | null) => void) | {
+    current: T | null;
+} | null | undefined;
+declare function ensureGlobalStyle(styleId: string, cssText: string): void;
+declare function assignRef<T>(ref: RefLike<T>, value: T | null): void;
+declare function mergeRefs<T>(...refs: Array<RefLike<T>>): (value: T | null) => void;
+declare function applyEffectClass(element: HTMLElement, className: string): () => void;
+declare function applyCssVars(element: HTMLElement, vars: CssVars): () => void;
+declare function toCssLength(value: string | number | undefined): string | undefined;
+declare function toCssAngle(value: string | number | undefined): string | undefined;
+declare function toCssTime(value: string | number | undefined): string | undefined;
+declare function toCssNumber(value: number | undefined): string | undefined;
+
+export { type CssVars, type RefLike, applyCssVars, applyEffectClass, assignRef, ensureGlobalStyle, mergeRefs, toCssAngle, toCssLength, toCssNumber, toCssTime };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+type CssVars = Record<string, string | undefined>;
+type RefLike<T> = ((value: T | null) => void) | {
+    current: T | null;
+} | null | undefined;
+declare function ensureGlobalStyle(styleId: string, cssText: string): void;
+declare function assignRef<T>(ref: RefLike<T>, value: T | null): void;
+declare function mergeRefs<T>(...refs: Array<RefLike<T>>): (value: T | null) => void;
+declare function applyEffectClass(element: HTMLElement, className: string): () => void;
+declare function applyCssVars(element: HTMLElement, vars: CssVars): () => void;
+declare function toCssLength(value: string | number | undefined): string | undefined;
+declare function toCssAngle(value: string | number | undefined): string | undefined;
+declare function toCssTime(value: string | number | undefined): string | undefined;
+declare function toCssNumber(value: number | undefined): string | undefined;
+
+export { type CssVars, type RefLike, applyCssVars, applyEffectClass, assignRef, ensureGlobalStyle, mergeRefs, toCssAngle, toCssLength, toCssNumber, toCssTime };

package/dist/index.js

@@ -0,0 +1,98 @@
+// src/index.ts
+function ensureGlobalStyle(styleId, cssText) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const selector = `style[data-protohiro-effects-style="${styleId}"]`;
+  if (document.head.querySelector(selector)) {
+    return;
+  }
+  const node = document.createElement("style");
+  node.setAttribute("data-protohiro-effects-style", styleId);
+  node.textContent = cssText;
+  document.head.appendChild(node);
+}
+function assignRef(ref, value) {
+  if (!ref) {
+    return;
+  }
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      assignRef(ref, value);
+    }
+  };
+}
+function applyEffectClass(element, className) {
+  const hadClass = element.classList.contains(className);
+  if (!hadClass) {
+    element.classList.add(className);
+  }
+  return () => {
+    if (!hadClass) {
+      element.classList.remove(className);
+    }
+  };
+}
+function applyCssVars(element, vars) {
+  const previous = /* @__PURE__ */ new Map();
+  for (const [name, value] of Object.entries(vars)) {
+    previous.set(name, element.style.getPropertyValue(name));
+    if (value === void 0) {
+      element.style.removeProperty(name);
+    } else {
+      element.style.setProperty(name, value);
+    }
+  }
+  return () => {
+    for (const [name, value] of previous.entries()) {
+      if (value) {
+        element.style.setProperty(name, value);
+      } else {
+        element.style.removeProperty(name);
+      }
+    }
+  };
+}
+function toCssLength(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}px` : value;
+}
+function toCssAngle(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}deg` : value;
+}
+function toCssTime(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return typeof value === "number" ? `${value}s` : value;
+}
+function toCssNumber(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  return String(value);
+}
+export {
+  applyCssVars,
+  applyEffectClass,
+  assignRef,
+  ensureGlobalStyle,
+  mergeRefs,
+  toCssAngle,
+  toCssLength,
+  toCssNumber,
+  toCssTime
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type CssVars = Record<string, string | undefined>;\nexport type RefLike<T> = ((value: T | null) => void) | { current: T | null } | null | undefined;\n\nexport function ensureGlobalStyle(styleId: string, cssText: string): void {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  const selector = `style[data-protohiro-effects-style=\"${styleId}\"]`;\n  if (document.head.querySelector(selector)) {\n    return;\n  }\n\n  const node = document.createElement('style');\n  node.setAttribute('data-protohiro-effects-style', styleId);\n  node.textContent = cssText;\n  document.head.appendChild(node);\n}\n\nexport function assignRef<T>(ref: RefLike<T>, value: T | null): void {\n  if (!ref) {\n    return;\n  }\n\n  if (typeof ref === 'function') {\n    ref(value);\n    return;\n  }\n\n  ref.current = value;\n}\n\nexport function mergeRefs<T>(...refs: Array<RefLike<T>>): (value: T | null) => void {\n  return (value) => {\n    for (const ref of refs) {\n      assignRef(ref, value);\n    }\n  };\n}\n\nexport function applyEffectClass(element: HTMLElement, className: string): () => void {\n  const hadClass = element.classList.contains(className);\n  if (!hadClass) {\n    element.classList.add(className);\n  }\n\n  return () => {\n    if (!hadClass) {\n      element.classList.remove(className);\n    }\n  };\n}\n\nexport function applyCssVars(element: HTMLElement, vars: CssVars): () => void {\n  const previous = new Map<string, string>();\n\n  for (const [name, value] of Object.entries(vars)) {\n    previous.set(name, element.style.getPropertyValue(name));\n\n    if (value === undefined) {\n      element.style.removeProperty(name);\n    } else {\n      element.style.setProperty(name, value);\n    }\n  }\n\n  return () => {\n    for (const [name, value] of previous.entries()) {\n      if (value) {\n        element.style.setProperty(name, value);\n      } else {\n        element.style.removeProperty(name);\n      }\n    }\n  };\n}\n\nexport function toCssLength(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nexport function toCssAngle(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return typeof value === 'number' ? `${value}deg` : value;\n}\n\nexport function toCssTime(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return typeof value === 'number' ? `${value}s` : value;\n}\n\nexport function toCssNumber(value: number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  return String(value);\n}\n"],"mappings":";AAGO,SAAS,kBAAkB,SAAiB,SAAuB;AACxE,MAAI,OAAO,aAAa,aAAa;AACnC;AAAA,EACF;AAEA,QAAM,WAAW,uCAAuC,OAAO;AAC/D,MAAI,SAAS,KAAK,cAAc,QAAQ,GAAG;AACzC;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,cAAc,OAAO;AAC3C,OAAK,aAAa,gCAAgC,OAAO;AACzD,OAAK,cAAc;AACnB,WAAS,KAAK,YAAY,IAAI;AAChC;AAEO,SAAS,UAAa,KAAiB,OAAuB;AACnE,MAAI,CAAC,KAAK;AACR;AAAA,EACF;AAEA,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,KAAK;AACT;AAAA,EACF;AAEA,MAAI,UAAU;AAChB;AAEO,SAAS,aAAgB,MAAoD;AAClF,SAAO,CAAC,UAAU;AAChB,eAAW,OAAO,MAAM;AACtB,gBAAU,KAAK,KAAK;AAAA,IACtB;AAAA,EACF;AACF;AAEO,SAAS,iBAAiB,SAAsB,WAA+B;AACpF,QAAM,WAAW,QAAQ,UAAU,SAAS,SAAS;AACrD,MAAI,CAAC,UAAU;AACb,YAAQ,UAAU,IAAI,SAAS;AAAA,EACjC;AAEA,SAAO,MAAM;AACX,QAAI,CAAC,UAAU;AACb,cAAQ,UAAU,OAAO,SAAS;AAAA,IACpC;AAAA,EACF;AACF;AAEO,SAAS,aAAa,SAAsB,MAA2B;AAC5E,QAAM,WAAW,oBAAI,IAAoB;AAEzC,aAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,IAAI,GAAG;AAChD,aAAS,IAAI,MAAM,QAAQ,MAAM,iBAAiB,IAAI,CAAC;AAEvD,QAAI,UAAU,QAAW;AACvB,cAAQ,MAAM,eAAe,IAAI;AAAA,IACnC,OAAO;AACL,cAAQ,MAAM,YAAY,MAAM,KAAK;AAAA,IACvC;AAAA,EACF;AAEA,SAAO,MAAM;AACX,eAAW,CAAC,MAAM,KAAK,KAAK,SAAS,QAAQ,GAAG;AAC9C,UAAI,OAAO;AACT,gBAAQ,MAAM,YAAY,MAAM,KAAK;AAAA,MACvC,OAAO;AACL,gBAAQ,MAAM,eAAe,IAAI;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAAwD;AAClF,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AACpD;AAEO,SAAS,WAAW,OAAwD;AACjF,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,QAAQ;AACrD;AAEO,SAAS,UAAU,OAAwD;AAChF,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,UAAU,WAAW,GAAG,KAAK,MAAM;AACnD;AAEO,SAAS,YAAY,OAA+C;AACzE,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@protohiro/effects-core",
+  "version": "0.1.0",
+  "description": "Core runtime utilities for ProtoEffects CSS-first effects.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/snwol/protoeffects.git",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/snwol/protoeffects#readme",
+  "bugs": {
+    "url": "https://github.com/snwol/protoeffects/issues"
+  },
+  "keywords": [
+    "protoeffects",
+    "css",
+    "effects",
+    "runtime",
+    "utilities"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}