@stylable/runtime - npm Package Compare versions

Comparing version 1.0.4 to 2.0.0

cjs/css-runtime-stylesheet.d.ts

@@ -1,4 +0,5 @@
-import { RuntimeStylesheet } from './types';
-export declare function create(root: string, namespace: string, locals: Partial<RuntimeStylesheet>, css: string, depth: number, id: string | number): RuntimeStylesheet;
-export declare function createTheme(css: string, depth: number | string, id: number | string): {
+import { RuntimeRenderer } from './css-runtime-renderer';
+import { RuntimeStylesheet, StylableExports } from './types';
+export declare function create(namespace: string, exports: StylableExports, css: string, depth: number, id: string | number, renderer: RuntimeRenderer | null): RuntimeStylesheet;
+export declare function createRenderable(css: string, depth: number | string, id: number | string): {
     $css: string;
@@ -5,0 +6,0 @@ $depth: string | number;

cjs/css-runtime-stylesheet.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-function create(root, namespace, locals, css, depth, id) {
-    var dataNamespace = 'data-' + namespace.toLowerCase() + '-';
+var stateMiddleDelimiter = '-';
+var booleanStateDelimiter = '--';
+var stateWithParamDelimiter = '---';
+function create(namespace, exports, css, depth, id, renderer) {
+    var stylesheet = {
+        namespace: namespace,
+        classes: exports.classes,
+        keyframes: exports.keyframes,
+        vars: exports.vars,
+        stVars: exports.stVars,
+        cssStates: cssStates,
+        style: style,
+        $id: id,
+        $depth: depth,
+        $css: css
+    };
+    if (renderer) {
+        renderer.register(stylesheet);
+    }
     function cssStates(stateMapping) {
-        return stateMapping
-            ? Object.keys(stateMapping).reduce(function (states, key) {
-                var stateValue = stateMapping[key];
-                if (stateValue === undefined ||
-                    stateValue === null ||
-                    stateValue === false) {
-                    return states;
-                }
-                states[dataNamespace + key.toLowerCase()] = stateValue;
-                return states;
-            }, {})
-            : {};
+        var classNames = [];
+        for (var stateName in stateMapping) {
+            var stateValue = stateMapping[stateName];
+            var stateClass = createStateClass(stateName, stateValue);
+            if (stateClass) {
+                classNames.push(stateClass);
+            }
+        }
+        return classNames.join(' ');
     }
-    function get(localName) {
-        return locals[localName];
+    function createBooleanStateClassName(stateName) {
+        return "" + namespace + booleanStateDelimiter + stateName;
     }
-    function mapClasses(className) {
-        return className
-            .split(/\s+/g)
-            .map(function (className) { return get(className) || className; })
-            .join(' ');
+    function createStateWithParamClassName(stateName, param) {
+        // tslint:disable-next-line: max-line-length
+        return "" + namespace + stateWithParamDelimiter + stateName + param.length + stateMiddleDelimiter + param.replace(/\s/gm, '_');
     }
-    locals.$root = root;
-    locals.$namespace = namespace;
-    locals.$depth = depth;
-    locals.$id = id;
-    locals.$css = css;
-    locals.$get = get;
-    locals.$cssStates = cssStates;
-    function stylable_runtime_stylesheet(className, states, inheritedAttributes) {
-        className = className ? mapClasses(className) : '';
-        var base = cssStates(states);
-        if (inheritedAttributes) {
-            for (var k in inheritedAttributes) {
-                if (k.match(/^data-/)) {
-                    base[k] = inheritedAttributes[k];
+    function createStateClass(stateName, stateValue) {
+        if (stateValue === false ||
+            stateValue === undefined ||
+            stateValue === null ||
+            stateValue !== stateValue // check NaN
+        ) {
+            return '';
+        }
+        if (stateValue === true) { // boolean state
+            return createBooleanStateClassName(stateName);
+        }
+        var valueAsString = stateValue.toString();
+        return createStateWithParamClassName(stateName, valueAsString);
+    }
+    function style() {
+        var classNames = [];
+        // tslint:disable-next-line:prefer-for-of
+        for (var i = 0; i < arguments.length; i++) {
+            var item = arguments[i];
+            if (typeof item === 'string') {
+                classNames.push(item);
+            }
+            else if (i >= 1) {
+                for (var stateName in item) {
+                    var stateValue = item[stateName];
+                    var stateClass = createStateClass(stateName, stateValue);
+                    if (stateClass) {
+                        classNames.push(stateClass);
+                    }
                 }
             }
-            if (inheritedAttributes.className) {
-                className += ' ' + inheritedAttributes.className;
-            }
         }
-        if (className) {
-            base.className = className;
-        }
-        return base;
+        return classNames.join(' ');
     }
-    Object.setPrototypeOf(stylable_runtime_stylesheet, locals);
-    // EDGE CACHE BUG FIX
-    stylable_runtime_stylesheet[locals.$root] = locals[locals.$root];
-    return stylable_runtime_stylesheet;
+    return stylesheet;
 }
 exports.create = create;
-function createTheme(css, depth, id) {
+function createRenderable(css, depth, id) {
     return { $css: css, $depth: depth, $id: id, $theme: true };
 }
-exports.createTheme = createTheme;
+exports.createRenderable = createRenderable;
 //# sourceMappingURL=css-runtime-stylesheet.js.map

cjs/types.d.ts

@@ -13,14 +13,13 @@ export declare type StateValue = boolean | number | string;
 }
-export declare type RuntimeStylesheet = {
-    (className: string, states?: StateMap, inheritedAttributes?: InheritedAttributes): AttributeMap;
-    $root: string;
-    $namespace: string;
-    $depth: number;
-    $id: string | number;
-    $css?: string;
-    $get(localName: string): string | undefined;
-    $cssStates(stateMapping?: StateMap | null): StateMap;
-} & {
-    [localName: string]: string;
-};
+export interface StylableExports {
+    classes: Record<string, string>;
+    keyframes: Record<string, string>;
+    vars: Record<string, string>;
+    stVars: Record<string, string>;
+}
+export interface RuntimeStylesheet extends StylableExports, RenderableStylesheet {
+    namespace: string;
+    cssStates: (stateMap: StateMap) => string;
+    style: (context: string, stateOrClass: string | StateMap, ...classes: string[]) => string;
+}
 export interface NodeRenderer<I, O extends Element> {
@@ -27,0 +26,0 @@ update(stylesheet: I, node: O): O;

package.json

 {
   "name": "@stylable/runtime",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Stylable runtime DOM integration",
@@ -9,8 +9,10 @@ "main": "cjs/index.js",
     "clean": "rimraf ./cjs",
-    "build": "ts-build ./src --cjs & yarn build:lib",
-    "build:lib": "node -r @ts-tools/node/r ./scripts/build-runtime.ts",
+    "build": "ts-build ./src --cjs && yarn bundle",
+    "bundle": "node -r @ts-tools/node/r ./scripts/build-runtime.ts",
     "lint": "run-p lint:src lint:test",
-    "lint:src": "tslint -p src",
-    "lint:test": "tslint -p test",
-    "test": "mocha -r @ts-tools/node/r \"test/**/*.spec.ts?(x)\" --watch-extensions ts,tsx",
+    "lint:src": "tslint -p ./src",
+    "lint:test": "tslint -p ./test",
+    "test:unit": "mocha -r @ts-tools/node/r \"test/unit/**/*.spec.ts?(x)\" --watch-extensions ts,tsx",
+    "test:e2e": "mocha -r @ts-tools/node/r \"test/e2e/**/*.spec.[tj]s?(x)\" --watch-extensions js,ts,tsx --timeout 20000",
+    "test": "run-p test:unit test:e2e",
     "prepack": "yarn build"
@@ -21,2 +23,3 @@ },
     "src",
+    "!src/tsconfig.json",
     "runtime.lib.js"
@@ -33,3 +36,3 @@ ],
   "license": "BSD-3-Clause",
-  "gitHead": "c8b12cc3c64557c6721beec89353b25adb8cc78c"
+  "gitHead": "feb73fcd4e1045b44b095f589638892859d3ffd7"
 }

README.md

@@ -15,43 +15,64 @@ # @stylable/runtime
 
-The stylesheet function is returned when importing a Stylable stylesheet. It is used for creating the DOM-attributes required for CSS to be applied.
+When importing a Stylable stylesheet, there are multiple named exports that are exposed for usage.
 
 ```ts
-style(className: string, states?: StateMap, props: InheritedAttributes)
+import { 
+    style, 
+    classes, 
+    vars, 
+    stVars, 
+    keyframes, 
+    cssStates 
+} from './local.st.css';
 ```
 
+|Import name|Description|
+|-----------|-----------|
+|`style`|utility function that returns a string to be used as a node class name for classes and states passed to it |
+|`classes`|an object mapping exported classes from their source name to their scoped name |
+|`vars`|an object mapping exported css custom properties (vars) from their source name to their scoped name |
+|`stVars`|an object mapping build time Stylable variables to their build time values (these cannot be overriden in runtime) |
+|`stVarskeyframes`|an object mapping exported keyframes from their source name to their scoped name |
+|`cssStates`|utility function that maps an object representing states and their values to a string with all required classes |
+
+#### Style utility function
+
+The `style` function is useful for creating the `root` node of you component, passing along classes passed through props, or whenever a state is being defined.
+
+```ts
+style(
+    contextClassName: string, stateOrClass: string | StateMap, ...classes: string[]
+)
+```
+
 |Argument|Type|Description|Required|
 |---------|----|-----------|:------:|
-|className|string|`className` to be namespaced|true|
-|states|[StateMap](https://github.com/wix/stylable/blob/master/packages/runtime/src/types.ts#L3)|object containing states and their values|false|
-|inheritedAttributes|[InheritedAttributes](https://github.com/wix/stylable/blob/master/packages/runtime/src/types.ts#L12)|`props` passed to the root node from the parent component (automatically passing through `className` and `data-*` attributes) |false|
+|contextClassName|`string`|`className` to be namespaced|`true`|
+|stateOrClass|`StateMap` \| `string`|either an object containing states and their values, or a class string|`false`|
+|classes|`string`|any other argument passed will represent a classes that should be applied. In any root node of a component, props.className should be passed along to maintain external customization |`false`|
 
 ```tsx
-import style from './local.st.css';
+import { style, classes } from './local.st.css';
 
-props = {
-    className: "app1211903207--root",
-    "data-app1211903207-propstate": true
-}
+// properties passed to the component externally
+props = { className: "app__root app--propstate" };
 
-style('root');
-// returns "{
-//     "className": "local1211372639--root"
-// }"
+// The classes export exposes a map of classNames and their namespaced values.
+classes.root;
+// returns "local__root"
 
-style('root', {localState: true});
-// returns "{
-//     "data-local1211372639-localstate": true,
-//     "className": "local1211372639--root"
-// }"
+<div className={style(classes.root)} />
+// becomes <div className="local__root" /> 
 
-style('root', {localState: true}, props);
-// returns "{
-//     "data-local1211372639-localstate": true,
-//     "data-app1211903207-propstate": true,
-//     "className": "local1211372639--root app1211903207--root"
-// }"
+<div className={style(classes.root, { localState: true })} />
+// becomes <div className="local__root local--localstate" /> 
 
-// The stylesheet function also exposes a map of classNames and their namespaced values.
-style.root;
-// returns "local1211372639--root"
+<div className={style(classes.root, { localState: true }, props.className)} />
+// becomes <div className="local__root local--localstate app__root app--propstate" /> 
+
+<div className={style(classes.root, 'global-class', props.className)} />
+// becomes <div className="local__root global-class app__root app--propstate" /> 
+
+<div className={classes.part} />
+// becomes <div className="local__part" /> 
 ```
@@ -63,4 +84,16 @@
 
+## TypeScript integration
+When importing a Stylable stylesheet in TypeScript, a global module declaration needs to be defined in order to not receive type errors about unknown imports.
+
+Add the following file to your `/src` directory.
+```ts
+// globals.d.ts
+declare module '*.st.css' {
+    const stylesheet: import('@stylable/runtime').RuntimeStylesheet;
+    export = stylesheet;
+}
+```
+
 ## License
 
 Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a [BSD license](./LICENSE).

runtime.lib.js

@@ -1,2 +0,2 @@
-/* runtime version: 1.0.4 */
+/* runtime version: 2.0.0 */
 function StylableRuntime(exports){
@@ -170,64 +170,82 @@ exports = exports || {};
 (function(){/* source: css-runtime-stylesheet.ts */
-function create(root, namespace, locals, css, depth, id) {
-    var dataNamespace = 'data-' + namespace.toLowerCase() + '-';
+var stateMiddleDelimiter = '-';
+var booleanStateDelimiter = '--';
+var stateWithParamDelimiter = '---';
+function create(namespace, exports, css, depth, id, renderer) {
+    var stylesheet = {
+        namespace: namespace,
+        classes: exports.classes,
+        keyframes: exports.keyframes,
+        vars: exports.vars,
+        stVars: exports.stVars,
+        cssStates: cssStates,
+        style: style,
+        $id: id,
+        $depth: depth,
+        $css: css
+    };
+    if (renderer) {
+        renderer.register(stylesheet);
+    }
     function cssStates(stateMapping) {
-        return stateMapping
-            ? Object.keys(stateMapping).reduce(function (states, key) {
-                var stateValue = stateMapping[key];
-                if (stateValue === undefined ||
-                    stateValue === null ||
-                    stateValue === false) {
-                    return states;
-                }
-                states[dataNamespace + key.toLowerCase()] = stateValue;
-                return states;
-            }, {})
-            : {};
+        var classNames = [];
+        for (var stateName in stateMapping) {
+            var stateValue = stateMapping[stateName];
+            var stateClass = createStateClass(stateName, stateValue);
+            if (stateClass) {
+                classNames.push(stateClass);
+            }
+        }
+        return classNames.join(' ');
     }
-    function get(localName) {
-        return locals[localName];
+    function createBooleanStateClassName(stateName) {
+        return "" + namespace + booleanStateDelimiter + stateName;
     }
-    function mapClasses(className) {
-        return className
-            .split(/\s+/g)
-            .map(function (className) { return get(className) || className; })
-            .join(' ');
+    function createStateWithParamClassName(stateName, param) {
+        // tslint:disable-next-line: max-line-length
+        return "" + namespace + stateWithParamDelimiter + stateName + param.length + stateMiddleDelimiter + param.replace(/\s/gm, '_');
     }
-    locals.$root = root;
-    locals.$namespace = namespace;
-    locals.$depth = depth;
-    locals.$id = id;
-    locals.$css = css;
-    locals.$get = get;
-    locals.$cssStates = cssStates;
-    function stylable_runtime_stylesheet(className, states, inheritedAttributes) {
-        className = className ? mapClasses(className) : '';
-        var base = cssStates(states);
-        if (inheritedAttributes) {
-            for (var k in inheritedAttributes) {
-                if (k.match(/^data-/)) {
-                    base[k] = inheritedAttributes[k];
+    function createStateClass(stateName, stateValue) {
+        if (stateValue === false ||
+            stateValue === undefined ||
+            stateValue === null ||
+            stateValue !== stateValue // check NaN
+        ) {
+            return '';
+        }
+        if (stateValue === true) { // boolean state
+            return createBooleanStateClassName(stateName);
+        }
+        var valueAsString = stateValue.toString();
+        return createStateWithParamClassName(stateName, valueAsString);
+    }
+    function style() {
+        var classNames = [];
+        // tslint:disable-next-line:prefer-for-of
+        for (var i = 0; i < arguments.length; i++) {
+            var item = arguments[i];
+            if (typeof item === 'string') {
+                classNames.push(item);
+            }
+            else if (i >= 1) {
+                for (var stateName in item) {
+                    var stateValue = item[stateName];
+                    var stateClass = createStateClass(stateName, stateValue);
+                    if (stateClass) {
+                        classNames.push(stateClass);
+                    }
                 }
             }
-            if (inheritedAttributes.className) {
-                className += ' ' + inheritedAttributes.className;
-            }
         }
-        if (className) {
-            base.className = className;
-        }
-        return base;
+        return classNames.join(' ');
     }
-    Object.setPrototypeOf(stylable_runtime_stylesheet, locals);
-    // EDGE CACHE BUG FIX
-    stylable_runtime_stylesheet[locals.$root] = locals[locals.$root];
-    return stylable_runtime_stylesheet;
+    return stylesheet;
 }
 exports.create = create;
-function createTheme(css, depth, id) {
+function createRenderable(css, depth, id) {
     return { $css: css, $depth: depth, $id: id, $theme: true };
 }
-exports.createTheme = createTheme;
+exports.createRenderable = createRenderable;
 }());;
 return exports;
 }

src/cached-node-renderer.ts

@@ -0,0 +0,0 @@ import { NodeRenderer, RenderableStylesheet } from './types';

src/css-runtime-renderer.ts

@@ -0,0 +0,0 @@ import { CacheStyleNodeRenderer } from './cached-node-renderer';

src/css-runtime-stylesheet.ts

@@ -1,89 +0,106 @@
-import { AttributeMap, InheritedAttributes, RuntimeStylesheet, StateMap } from './types';
+import { RuntimeRenderer } from './css-runtime-renderer';
+import {
+    RuntimeStylesheet,
+    StateMap,
+    StateValue,
+    StylableExports
+} from './types';
 
+const stateMiddleDelimiter = '-';
+const booleanStateDelimiter = '--';
+const stateWithParamDelimiter = '---';
+
 export function create(
-  root: string,
-  namespace: string,
-  locals: Partial<RuntimeStylesheet>,
-  css: string,
-  depth: number,
-  id: string | number
+    namespace: string,
+    exports: StylableExports,
+    css: string,
+    depth: number,
+    id: string | number,
+    renderer: RuntimeRenderer | null
 ): RuntimeStylesheet {
 
-  const dataNamespace = 'data-' + namespace.toLowerCase() + '-';
+    const stylesheet: RuntimeStylesheet = {
+        namespace,
+        classes: exports.classes,
+        keyframes: exports.keyframes,
+        vars: exports.vars,
+        stVars: exports.stVars,
+        cssStates,
+        style,
+        $id: id,
+        $depth: depth,
+        $css: css
+    };
 
-  function cssStates(stateMapping: StateMap) {
-    return stateMapping
-      ? Object.keys(stateMapping).reduce((states, key) => {
-        const stateValue = stateMapping[key];
+    if (renderer) {
+        renderer.register(stylesheet);
+    }
 
-        if (
-          stateValue === undefined ||
-          stateValue === null ||
-          stateValue === false
-        ) {
-          return states;
+    function cssStates(stateMapping?: StateMap | null): string {
+        const classNames = [];
+        for (const stateName in stateMapping) {
+            const stateValue = stateMapping[stateName];
+            const stateClass = createStateClass(stateName, stateValue);
+            if (stateClass) {
+                classNames.push(stateClass);
+            }
         }
+        return classNames.join(' ');
+    }
 
-        states[dataNamespace + key.toLowerCase()] = stateValue;
+    function createBooleanStateClassName(stateName: string) {
+        return `${namespace}${booleanStateDelimiter}${stateName}`;
+    }
 
-        return states;
-      }, {} as StateMap)
-      : {};
-  }
+    function createStateWithParamClassName(stateName: string, param: string) {
+        // tslint:disable-next-line: max-line-length
+        return `${namespace}${stateWithParamDelimiter}${stateName}${param.length}${stateMiddleDelimiter}${param.replace(/\s/gm, '_')}`;
+    }
 
-  function get(localName: string) {
-    return locals[localName];
-  }
+    function createStateClass(stateName: string, stateValue: StateValue): string {
+        if (
+            stateValue === false ||
+            stateValue === undefined ||
+            stateValue === null ||
+            stateValue !== stateValue // check NaN
+        ) {
+            return '';
+        }
 
-  function mapClasses(className: string) {
-    return className
-      .split(/\s+/g)
-      .map(className => get(className) || className)
-      .join(' ');
-  }
+        if (stateValue === true) { // boolean state
+            return createBooleanStateClassName(stateName);
+        }
 
-  locals.$root = root;
-  locals.$namespace = namespace;
-  locals.$depth = depth;
-  locals.$id = id;
-  locals.$css = css;
+        const valueAsString = stateValue.toString();
 
-  locals.$get = get;
-  locals.$cssStates = cssStates;
+        return createStateWithParamClassName(stateName, valueAsString);
+    }
 
-  function stylable_runtime_stylesheet(className: string, states: StateMap, inheritedAttributes: InheritedAttributes) {
-    className = className ? mapClasses(className) : '';
+    function style() {
+        const classNames = [];
 
-    const base: AttributeMap = cssStates(states);
+        // tslint:disable-next-line:prefer-for-of
+        for (let i = 0; i < arguments.length; i++) {
+            const item = arguments[i];
 
-    if (inheritedAttributes) {
-      for (const k in inheritedAttributes) {
-        if (k.match(/^data-/)) {
-          base[k] = inheritedAttributes[k];
+            if (typeof item === 'string') {
+                classNames.push(item);
+            } else if (i >= 1) {
+                for (const stateName in item) {
+                    const stateValue = item[stateName];
+                    const stateClass = createStateClass(stateName, stateValue);
+                    if (stateClass) {
+                        classNames.push(stateClass);
+                    }
+                }
+            }
         }
-      }
-
-      if (inheritedAttributes.className) {
-        className += ' ' + inheritedAttributes.className;
-      }
+        return classNames.join(' ');
     }
 
-    if (className) {
-      base.className = className;
-    }
-
-    return base;
-  }
-
-  Object.setPrototypeOf(stylable_runtime_stylesheet, locals);
-
-  // EDGE CACHE BUG FIX
-  (stylable_runtime_stylesheet as any)[locals.$root] = locals[locals.$root];
-
-  return stylable_runtime_stylesheet as RuntimeStylesheet;
-
+    return stylesheet;
 }
 
-export function createTheme(css: string, depth: number | string, id: number | string) {
-  return { $css: css, $depth: depth, $id: id, $theme: true };
+export function createRenderable(css: string, depth: number | string, id: number | string) {
+    return { $css: css, $depth: depth, $id: id, $theme: true };
 }

src/index.ts

 export * from './css-runtime-renderer';
 export * from './css-runtime-stylesheet';
 export * from './types';

src/keyed-list-renderer.ts

@@ -0,0 +0,0 @@ import { NodeRenderer } from './types';

src/types.ts

@@ -17,13 +17,14 @@ export type StateValue = boolean | number | string;
 
-export type RuntimeStylesheet = {
-    (className: string, states?: StateMap, inheritedAttributes?: InheritedAttributes): AttributeMap
-    $root: string,
-    $namespace: string,
-    $depth: number,
-    $id: string | number,
-    $css?: string,
+export interface StylableExports {
+    classes: Record<string, string>;
+    keyframes: Record<string, string>;
+    vars: Record<string, string>;
+    stVars: Record<string, string>;
+}
 
-    $get(localName: string): string | undefined;
-    $cssStates(stateMapping?: StateMap | null): StateMap;
-} & { [localName: string]: string };
+export interface RuntimeStylesheet extends StylableExports, RenderableStylesheet {
+    namespace: string;
+    cssStates: (stateMap: StateMap) => string;
+    style: (context: string, stateOrClass: string | StateMap, ...classes: string[]) => string;
+}
 
@@ -30,0 +31,0 @@ export interface NodeRenderer<I, O extends Element> {

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

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

Improved metrics

Total package byte prevSize

50780

increased by7.63%

Lines of code

877

increased by6.17%

Number of lines in readme file

98

increased by50.77%

Worsened metrics

Number of package files

34

decreased by-2.86%

No dependency changes