@stylable/runtime - npm Package Compare versions

Comparing version 5.16.1 to 6.0.0-rc.1

dist/index.d.ts

@@ -1,6 +0,30 @@
-export { $, RuntimeRenderer } from './css-runtime-renderer';
-export { create, createRenderable } from './css-runtime-stylesheet';
-export { AttributeMap, ClassesMap, Host, InheritedAttributes, NodeRenderer, RenderableStylesheet, RuntimeStylesheet, STFunction, StateMap, StateValue, StylableExports, RuntimeStVar, } from './types';
-export { DOMListRenderer, createDOMListRenderer } from './keyed-list-renderer';
-export * from './runtime';
+export type StateValue = boolean | number | string | undefined;
+export interface StateMap {
+    [stateName: string]: StateValue;
+}
+export interface ClassesMap {
+    root: string;
+    [className: string]: string;
+}
+export type RuntimeStVar = string | {
+    [key: string]: RuntimeStVar;
+} | RuntimeStVar[];
+export interface StylableExports {
+    classes: ClassesMap;
+    keyframes: Record<string, string>;
+    layers: Record<string, string>;
+    containers: Record<string, string>;
+    stVars: Record<string, RuntimeStVar>;
+    vars: Record<string, string>;
+}
+export type STFunction = (context: string | undefined, stateOrClass?: string | StateMap | undefined, ...classes: Array<string | undefined>) => string;
+export interface RuntimeStylesheet extends StylableExports {
+    namespace: string;
+    cssStates: (stateMap: StateMap) => string;
+    style: STFunction;
+    st: STFunction;
+}
+export declare function classesRuntime(namespace: string): string;
+export declare function statesRuntime(namespace: string, stateMapping?: StateMap | null): string;
+export declare function injectCSS(id: string, css: string, depth: number, runtimeId: string): void;
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+/* eslint-disable no-var */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectCSS = exports.statesRuntime = exports.classesRuntime = void 0;
+function createStateClass(namespace, stateName, stateValue) {
+    if (stateValue === false ||
+        stateValue === undefined ||
+        stateValue === null ||
+        stateValue !== stateValue // check NaN
+    ) {
+        return '';
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDOMListRenderer = exports.createRenderable = exports.create = exports.RuntimeRenderer = exports.$ = void 0;
-var css_runtime_renderer_1 = require("./css-runtime-renderer");
-Object.defineProperty(exports, "$", { enumerable: true, get: function () { return css_runtime_renderer_1.$; } });
-Object.defineProperty(exports, "RuntimeRenderer", { enumerable: true, get: function () { return css_runtime_renderer_1.RuntimeRenderer; } });
-var css_runtime_stylesheet_1 = require("./css-runtime-stylesheet");
-Object.defineProperty(exports, "create", { enumerable: true, get: function () { return css_runtime_stylesheet_1.create; } });
-Object.defineProperty(exports, "createRenderable", { enumerable: true, get: function () { return css_runtime_stylesheet_1.createRenderable; } });
-var types_1 = require("./types");
-var keyed_list_renderer_1 = require("./keyed-list-renderer");
-Object.defineProperty(exports, "createDOMListRenderer", { enumerable: true, get: function () { return keyed_list_renderer_1.createDOMListRenderer; } });
-__exportStar(require("./runtime"), exports);
+    if (stateValue === true) {
+        // boolean state
+        return namespace + '--' + stateName;
+    }
+    var param = stateValue.toString();
+    return namespace + '---' + stateName + '-' + param.length + '-' + param.replace(/\s/gm, '_');
+}
+function classesRuntime(namespace) {
+    var classNames = [];
+    for (var i = 1; i < arguments.length; i++) {
+        // eslint-disable-next-line prefer-rest-params
+        var item = arguments[i];
+        if (item) {
+            if (typeof item === 'string') {
+                classNames[classNames.length] = item;
+            }
+            else if (i === 2) {
+                for (var stateName in item) {
+                    var stateValue = item[stateName];
+                    var stateClass = createStateClass(namespace, stateName, stateValue);
+                    if (stateClass) {
+                        classNames[classNames.length] = stateClass;
+                    }
+                }
+            }
+        }
+    }
+    return classNames.join(' ');
+}
+exports.classesRuntime = classesRuntime;
+function statesRuntime(namespace, stateMapping) {
+    var classNames = [];
+    for (var stateName in stateMapping) {
+        var stateValue = stateMapping[stateName];
+        var stateClass = createStateClass(namespace, stateName, stateValue);
+        if (stateClass) {
+            classNames.push(stateClass);
+        }
+    }
+    return classNames.join(' ');
+}
+exports.statesRuntime = statesRuntime;
+function injectCSS(id, css, depth, runtimeId) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    var d = document;
+    var head = d.head;
+    var style = d.createElement('style');
+    style.setAttribute('st_id', id);
+    style.setAttribute('st_depth', depth);
+    style.setAttribute('st_runtime', runtimeId);
+    style.textContent = css;
+    var loadedStyleElements = head.querySelectorAll('style[st_runtime="' + runtimeId + '"]');
+    var inserted = false;
+    var insertAfter;
+    for (var i = 0; i < loadedStyleElements.length; i++) {
+        var styleElement = loadedStyleElements[i];
+        var existingStId = styleElement.getAttribute('st_id');
+        var existingStDepth = Number(styleElement.getAttribute('st_depth'));
+        if (existingStId === id) {
+            if (existingStDepth === depth) {
+                head.replaceChild(style, styleElement);
+                return;
+            }
+            else {
+                styleElement.parentElement.removeChild(styleElement);
+                continue;
+            }
+        }
+        if (!inserted && depth < existingStDepth) {
+            head.insertBefore(style, styleElement);
+            inserted = true;
+        }
+        insertAfter = styleElement;
+    }
+    if (!inserted) {
+        insertAfter
+            ? head.insertBefore(style, insertAfter.nextElementSibling)
+            : head.appendChild(style);
+    }
+}
+exports.injectCSS = injectCSS;
 //# sourceMappingURL=index.js.map

esm/index.d.ts

@@ -1,6 +0,30 @@
-export { $, RuntimeRenderer } from './css-runtime-renderer';
-export { create, createRenderable } from './css-runtime-stylesheet';
-export { AttributeMap, ClassesMap, Host, InheritedAttributes, NodeRenderer, RenderableStylesheet, RuntimeStylesheet, STFunction, StateMap, StateValue, StylableExports, RuntimeStVar, } from './types';
-export { DOMListRenderer, createDOMListRenderer } from './keyed-list-renderer';
-export * from './runtime';
+export type StateValue = boolean | number | string | undefined;
+export interface StateMap {
+    [stateName: string]: StateValue;
+}
+export interface ClassesMap {
+    root: string;
+    [className: string]: string;
+}
+export type RuntimeStVar = string | {
+    [key: string]: RuntimeStVar;
+} | RuntimeStVar[];
+export interface StylableExports {
+    classes: ClassesMap;
+    keyframes: Record<string, string>;
+    layers: Record<string, string>;
+    containers: Record<string, string>;
+    stVars: Record<string, RuntimeStVar>;
+    vars: Record<string, string>;
+}
+export type STFunction = (context: string | undefined, stateOrClass?: string | StateMap | undefined, ...classes: Array<string | undefined>) => string;
+export interface RuntimeStylesheet extends StylableExports {
+    namespace: string;
+    cssStates: (stateMap: StateMap) => string;
+    style: STFunction;
+    st: STFunction;
+}
+export declare function classesRuntime(namespace: string): string;
+export declare function statesRuntime(namespace: string, stateMapping?: StateMap | null): string;
+export declare function injectCSS(id: string, css: string, depth: number, runtimeId: string): void;
 //# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -1,6 +0,90 @@
-export { $, RuntimeRenderer } from './css-runtime-renderer';
-export { create, createRenderable } from './css-runtime-stylesheet';
-export {} from './types';
-export { createDOMListRenderer } from './keyed-list-renderer';
-export * from './runtime';
+/* eslint-disable no-var */
+function createStateClass(namespace, stateName, stateValue) {
+    if (stateValue === false ||
+        stateValue === undefined ||
+        stateValue === null ||
+        stateValue !== stateValue // check NaN
+    ) {
+        return '';
+    }
+    if (stateValue === true) {
+        // boolean state
+        return namespace + '--' + stateName;
+    }
+    var param = stateValue.toString();
+    return namespace + '---' + stateName + '-' + param.length + '-' + param.replace(/\s/gm, '_');
+}
+export function classesRuntime(namespace) {
+    var classNames = [];
+    for (var i = 1; i < arguments.length; i++) {
+        // eslint-disable-next-line prefer-rest-params
+        var item = arguments[i];
+        if (item) {
+            if (typeof item === 'string') {
+                classNames[classNames.length] = item;
+            }
+            else if (i === 2) {
+                for (var stateName in item) {
+                    var stateValue = item[stateName];
+                    var stateClass = createStateClass(namespace, stateName, stateValue);
+                    if (stateClass) {
+                        classNames[classNames.length] = stateClass;
+                    }
+                }
+            }
+        }
+    }
+    return classNames.join(' ');
+}
+export function statesRuntime(namespace, stateMapping) {
+    var classNames = [];
+    for (var stateName in stateMapping) {
+        var stateValue = stateMapping[stateName];
+        var stateClass = createStateClass(namespace, stateName, stateValue);
+        if (stateClass) {
+            classNames.push(stateClass);
+        }
+    }
+    return classNames.join(' ');
+}
+export function injectCSS(id, css, depth, runtimeId) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    var d = document;
+    var head = d.head;
+    var style = d.createElement('style');
+    style.setAttribute('st_id', id);
+    style.setAttribute('st_depth', depth);
+    style.setAttribute('st_runtime', runtimeId);
+    style.textContent = css;
+    var loadedStyleElements = head.querySelectorAll('style[st_runtime="' + runtimeId + '"]');
+    var inserted = false;
+    var insertAfter;
+    for (var i = 0; i < loadedStyleElements.length; i++) {
+        var styleElement = loadedStyleElements[i];
+        var existingStId = styleElement.getAttribute('st_id');
+        var existingStDepth = Number(styleElement.getAttribute('st_depth'));
+        if (existingStId === id) {
+            if (existingStDepth === depth) {
+                head.replaceChild(style, styleElement);
+                return;
+            }
+            else {
+                styleElement.parentElement.removeChild(styleElement);
+                continue;
+            }
+        }
+        if (!inserted && depth < existingStDepth) {
+            head.insertBefore(style, styleElement);
+            inserted = true;
+        }
+        insertAfter = styleElement;
+    }
+    if (!inserted) {
+        insertAfter
+            ? head.insertBefore(style, insertAfter.nextElementSibling)
+            : head.appendChild(style);
+    }
+}
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@stylable/runtime",
-  "version": "5.16.1",
+  "version": "6.0.0-rc.1",
   "description": "Stylable runtime DOM integration",
@@ -11,2 +11,11 @@ "main": "dist/index.js",
   },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./dist/index.js": "./dist/index.js",
+    "./dist/index.mjs": "./dist/index.mjs"
+  },
   "files": [
@@ -21,3 +30,3 @@ "dist",
   "engines": {
-    "node": ">=14.14.0"
+    "node": ">=18.12.0"
   },
@@ -24,0 +33,0 @@ "publishConfig": {

src/index.ts

@@ -1,18 +0,134 @@
-export { $, RuntimeRenderer } from './css-runtime-renderer';
-export { create, createRenderable } from './css-runtime-stylesheet';
-export {
-    AttributeMap,
-    ClassesMap,
-    Host,
-    InheritedAttributes,
-    NodeRenderer,
-    RenderableStylesheet,
-    RuntimeStylesheet,
-    STFunction,
-    StateMap,
-    StateValue,
-    StylableExports,
-    RuntimeStVar,
-} from './types';
-export { DOMListRenderer, createDOMListRenderer } from './keyed-list-renderer';
-export * from './runtime';
+/* eslint-disable no-var */
+
+export type StateValue = boolean | number | string | undefined;
+
+export interface StateMap {
+    [stateName: string]: StateValue;
+}
+
+export interface ClassesMap {
+    root: string;
+    [className: string]: string;
+}
+
+export type RuntimeStVar = string | { [key: string]: RuntimeStVar } | RuntimeStVar[];
+
+export interface StylableExports {
+    classes: ClassesMap;
+    keyframes: Record<string, string>;
+    layers: Record<string, string>;
+    containers: Record<string, string>;
+    stVars: Record<string, RuntimeStVar>;
+    vars: Record<string, string>;
+}
+
+export type STFunction = (
+    context: string | undefined,
+    stateOrClass?: string | StateMap | undefined,
+    ...classes: Array<string | undefined>
+) => string;
+
+export interface RuntimeStylesheet extends StylableExports {
+    namespace: string;
+    cssStates: (stateMap: StateMap) => string;
+    style: STFunction;
+    st: STFunction;
+}
+
+function createStateClass(namespace: string, stateName: string, stateValue: StateValue): string {
+    if (
+        stateValue === false ||
+        stateValue === undefined ||
+        stateValue === null ||
+        stateValue !== stateValue // check NaN
+    ) {
+        return '';
+    }
+
+    if (stateValue === true) {
+        // boolean state
+        return namespace + '--' + stateName;
+    }
+
+    var param = stateValue.toString();
+
+    return namespace + '---' + stateName + '-' + param.length + '-' + param.replace(/\s/gm, '_');
+}
+
+export function classesRuntime(namespace: string): string {
+    var classNames = [];
+
+    for (var i = 1; i < arguments.length; i++) {
+        // eslint-disable-next-line prefer-rest-params
+        var item = arguments[i];
+
+        if (item) {
+            if (typeof item === 'string') {
+                classNames[classNames.length] = item;
+            } else if (i === 2) {
+                for (var stateName in item) {
+                    var stateValue = item[stateName];
+                    var stateClass = createStateClass(namespace, stateName, stateValue);
+                    if (stateClass) {
+                        classNames[classNames.length] = stateClass;
+                    }
+                }
+            }
+        }
+    }
+    return classNames.join(' ');
+}
+
+export function statesRuntime(namespace: string, stateMapping?: StateMap | null): string {
+    var classNames = [];
+    for (var stateName in stateMapping) {
+        var stateValue = stateMapping[stateName];
+        var stateClass = createStateClass(namespace, stateName, stateValue);
+        if (stateClass) {
+            classNames.push(stateClass);
+        }
+    }
+    return classNames.join(' ');
+}
+
+export function injectCSS(id: string, css: string, depth: number, runtimeId: string): void {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    var d = document;
+    var head = d.head;
+    var style = d.createElement('style');
+    style.setAttribute('st_id', id);
+    style.setAttribute('st_depth', depth as unknown as string);
+    style.setAttribute('st_runtime', runtimeId);
+    style.textContent = css;
+    var loadedStyleElements = head.querySelectorAll<HTMLStyleElement>(
+        'style[st_runtime="' + runtimeId + '"]'
+    );
+    var inserted = false;
+    var insertAfter: HTMLElement | undefined;
+    for (var i = 0; i < loadedStyleElements.length; i++) {
+        var styleElement = loadedStyleElements[i];
+        var existingStId = styleElement.getAttribute('st_id');
+        var existingStDepth = Number(styleElement.getAttribute('st_depth'));
+        if (existingStId === id) {
+            if (existingStDepth === depth) {
+                head.replaceChild(style, styleElement);
+                return;
+            } else {
+                styleElement.parentElement!.removeChild(styleElement);
+                continue;
+            }
+        }
+        if (!inserted && depth < existingStDepth) {
+            head.insertBefore(style, styleElement);
+            inserted = true;
+        }
+        insertAfter = styleElement;
+    }
+    if (!inserted) {
+        insertAfter
+            ? head.insertBefore(style, insertAfter.nextElementSibling)
+            : head.appendChild(style);
+    }
+}

src/tsconfig.esm.json

@@ -5,4 +5,4 @@ {
     "outDir": "../esm",
-    "module": "ESNext"
+    "module": "ESNext",
   }
 }

stylesheet.d.ts

@@ -1,2 +0,2 @@
-import type { RuntimeStylesheet } from './dist';
+import type { RuntimeStylesheet } from './dist/index';
 
@@ -3,0 +3,0 @@ export const classes: RuntimeStylesheet['classes'];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

59734

decreased by-57.38%

Number of package files

17

decreased by-82.47%

Lines of code

467

decreased by-74.55%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes