@teleporthq/teleport-plugin-common - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

__tests__/utils/style-utils.ts

@@ -16,2 +16,3 @@ import { getContentOfStyleObject } from '../../src/utils/style-utils'
     })
+
     it('with nested-style', () => {
@@ -35,6 +36,6 @@ const styleValue: UIDLStyleDefinitions = {
 
-      const result = getContentOfStyleObject(styleValue)
-      expect(result).toEqual({ test: { testAgain: { someKey: 'value' } } })
+      expect(() => getContentOfStyleObject(styleValue)).toThrow(Error)
     })
   })
+
   it('fails with other type than static or nested-style', () => {
@@ -41,0 +42,0 @@ const styleValue: UIDLStyleDefinitions = {

dist/cjs/builders/style-builders.d.ts

@@ -5,2 +5,4 @@ import * as types from '@babel/types';
 export declare const createCSSClass: (className: string, styleObject: Record<string, string | number>) => string;
+export declare const createCSSClassWithSelector: (className: string, selector: string, styleObject: Record<string, string | number>) => string;
+export declare const createCSSClassWithMediaQuery: (mediaOffset: string, styleObject: Record<string, string | number>) => string;
 export declare const createDynamicStyleExpression: (styleValue: UIDLDynamicReference, propsPrefix?: string, t?: typeof types) => ParsedASTNode;

dist/cjs/builders/style-builders.js

@@ -28,2 +28,21 @@ "use strict";
 };
+exports.createCSSClassWithSelector = function (className, selector, styleObject) {
+    var _a, _b;
+    return jss_1.default
+        .createStyleSheet((_a = {},
+        _a["." + className] = (_b = {},
+            _b[selector] = styleObject,
+            _b),
+        _a), {
+        generateId: function () { return className; },
+    })
+        .toString();
+};
+exports.createCSSClassWithMediaQuery = function (mediaOffset, styleObject) {
+    return jss_1.default
+        .createRule("@media(" + mediaOffset + ")", styleObject, {
+        generateId: function (data) { return data.key; },
+    })
+        .toString();
+};
 exports.createDynamicStyleExpression = function (styleValue, propsPrefix, t) {
@@ -30,0 +49,0 @@ if (propsPrefix === void 0) { propsPrefix = ''; }

dist/cjs/utils/ast-utils.d.ts

@@ -10,2 +10,3 @@ import * as types from '@babel/types';
 export declare const addDynamicAttributeToJSXTag: (jsxASTNode: types.JSXElement, name: string, value: string, prefix?: string, t?: typeof types) => void;
+export declare const addMultipleDynamicAttributesToJSXTag: (jsxASTNode: types.JSXElement, name: string, values: string[], t?: typeof types) => void;
 export declare const stringAsTemplateLiteral: (str: string, t?: typeof types) => types.TemplateLiteral;
@@ -12,0 +13,0 @@ export declare const addAttributeToJSXTag: (jsxNode: types.JSXElement, attrName: string, attrValue?: unknown, t?: typeof types) => void;

dist/cjs/utils/ast-utils.js

@@ -58,2 +58,14 @@ "use strict";
 };
+exports.addMultipleDynamicAttributesToJSXTag = function (jsxASTNode, name, values, t) {
+    if (t === void 0) { t = types; }
+    var memberExpressions = [];
+    var templateElements = [];
+    Object.values(values).forEach(function (item) {
+        templateElements.push(t.templateElement({ raw: ' ', cooked: ' ' }));
+        memberExpressions.push(t.identifier(item));
+    });
+    templateElements.push(t.templateElement({ raw: ' ', cooked: ' ' }));
+    var content = t.templateLiteral(templateElements, memberExpressions);
+    jsxASTNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), t.jsxExpressionContainer(content)));
+};
 exports.stringAsTemplateLiteral = function (str, t) {
@@ -60,0 +72,0 @@ if (t === void 0) { t = types; }

dist/cjs/utils/style-utils.d.ts

@@ -1,2 +0,1 @@
-import { UIDLStyleValue } from '@teleporthq/teleport-types';
-export declare const getContentOfStyleObject: (styleObject: Record<string, UIDLStyleValue>) => Record<string, unknown>;
+export declare const getContentOfStyleObject: (styleObject: Record<string, import("@teleporthq/teleport-types").UIDLAttributeValue>) => Record<string, unknown>;

dist/cjs/utils/style-utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var getContentOfStyleKey = function (styleValue) {
-    switch (styleValue.type) {
-        case 'static':
-            return styleValue.content;
-        case 'nested-style':
-            return exports.getContentOfStyleObject(styleValue.content);
-        default:
-            throw new Error("getContentOfStyleKey received unsupported " + JSON.stringify(styleValue, null, 2) + " UIDLNodeStyleValue value");
+    if (styleValue.type === 'static') {
+        return styleValue.content;
     }
+    throw new Error("getContentOfStyleKey received unsupported " + JSON.stringify(styleValue, null, 2) + " UIDLNodeStyleValue value");
 };
@@ -13,0 +9,0 @@ exports.getContentOfStyleObject = function (styleObject) {

dist/esm/builders/style-builders.d.ts

@@ -5,2 +5,4 @@ import * as types from '@babel/types';
 export declare const createCSSClass: (className: string, styleObject: Record<string, string | number>) => string;
+export declare const createCSSClassWithSelector: (className: string, selector: string, styleObject: Record<string, string | number>) => string;
+export declare const createCSSClassWithMediaQuery: (mediaOffset: string, styleObject: Record<string, string | number>) => string;
 export declare const createDynamicStyleExpression: (styleValue: UIDLDynamicReference, propsPrefix?: string, t?: typeof types) => ParsedASTNode;

dist/esm/builders/style-builders.js

@@ -15,2 +15,20 @@ import jss from 'jss';
 };
+export const createCSSClassWithSelector = (className, selector, styleObject) => {
+    return jss
+        .createStyleSheet({
+        [`.${className}`]: {
+            [selector]: styleObject,
+        },
+    }, {
+        generateId: () => className,
+    })
+        .toString();
+};
+export const createCSSClassWithMediaQuery = (mediaOffset, styleObject) => {
+    return jss
+        .createRule(`@media(${mediaOffset})`, styleObject, {
+        generateId: (data) => data.key,
+    })
+        .toString();
+};
 export const createDynamicStyleExpression = (styleValue, propsPrefix = '', t = types) => {
@@ -17,0 +35,0 @@ switch (styleValue.content.referenceType) {

dist/esm/utils/ast-utils.d.ts

@@ -10,2 +10,3 @@ import * as types from '@babel/types';
 export declare const addDynamicAttributeToJSXTag: (jsxASTNode: types.JSXElement, name: string, value: string, prefix?: string, t?: typeof types) => void;
+export declare const addMultipleDynamicAttributesToJSXTag: (jsxASTNode: types.JSXElement, name: string, values: string[], t?: typeof types) => void;
 export declare const stringAsTemplateLiteral: (str: string, t?: typeof types) => types.TemplateLiteral;
@@ -12,0 +13,0 @@ export declare const addAttributeToJSXTag: (jsxNode: types.JSXElement, attrName: string, attrValue?: unknown, t?: typeof types) => void;

dist/esm/utils/ast-utils.js

@@ -42,2 +42,13 @@ import * as types from '@babel/types';
 };
+export const addMultipleDynamicAttributesToJSXTag = (jsxASTNode, name, values, t = types) => {
+    const memberExpressions = [];
+    const templateElements = [];
+    Object.values(values).forEach((item) => {
+        templateElements.push(t.templateElement({ raw: ' ', cooked: ' ' }));
+        memberExpressions.push(t.identifier(item));
+    });
+    templateElements.push(t.templateElement({ raw: ' ', cooked: ' ' }));
+    const content = t.templateLiteral(templateElements, memberExpressions);
+    jsxASTNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier(name), t.jsxExpressionContainer(content)));
+};
 export const stringAsTemplateLiteral = (str, t = types) => {
@@ -44,0 +55,0 @@ const formmattedString = `

dist/esm/utils/style-utils.d.ts

@@ -1,2 +0,1 @@
-import { UIDLStyleValue } from '@teleporthq/teleport-types';
-export declare const getContentOfStyleObject: (styleObject: Record<string, UIDLStyleValue>) => Record<string, unknown>;
+export declare const getContentOfStyleObject: (styleObject: Record<string, import("@teleporthq/teleport-types").UIDLAttributeValue>) => Record<string, unknown>;

dist/esm/utils/style-utils.js

 const getContentOfStyleKey = (styleValue) => {
-    switch (styleValue.type) {
-        case 'static':
-            return styleValue.content;
-        case 'nested-style':
-            return getContentOfStyleObject(styleValue.content);
-        default:
-            throw new Error(`getContentOfStyleKey received unsupported ${JSON.stringify(styleValue, null, 2)} UIDLNodeStyleValue value`);
+    if (styleValue.type === 'static') {
+        return styleValue.content;
     }
+    throw new Error(`getContentOfStyleKey received unsupported ${JSON.stringify(styleValue, null, 2)} UIDLNodeStyleValue value`);
 };
@@ -11,0 +7,0 @@ export const getContentOfStyleObject = (styleObject) => {

package.json

 {
   "name": "@teleporthq/teleport-plugin-common",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Common building and modelating functions for ASTs and HASTs",
@@ -30,8 +30,8 @@ "author": "teleportHQ",
     "@babel/types": "^7.5.5",
-    "@teleporthq/teleport-shared": "^0.11.1",
-    "@teleporthq/teleport-types": "^0.11.0",
+    "@teleporthq/teleport-shared": "^0.12.0",
+    "@teleporthq/teleport-types": "^0.12.0",
     "jss": "^10.0.0",
     "jss-preset-default": "^10.0.0"
   },
-  "gitHead": "f6ed005a4cdb5b1b8050f9368ff436b9c48a4fde"
+  "gitHead": "f5ef80f8d15eb5da2bce57dee16ded1513d051b9"
 }

src/builders/style-builders.ts

@@ -22,2 +22,32 @@ import jss from 'jss'
 
+export const createCSSClassWithSelector = (
+  className: string,
+  selector: string,
+  styleObject: Record<string, string | number>
+) => {
+  return jss
+    .createStyleSheet(
+      {
+        [`.${className}`]: {
+          [selector]: styleObject,
+        },
+      },
+      {
+        generateId: () => className,
+      }
+    )
+    .toString()
+}
+
+export const createCSSClassWithMediaQuery = (
+  mediaOffset: string,
+  styleObject: Record<string, string | number>
+) => {
+  return jss
+    .createRule(`@media(${mediaOffset})`, styleObject, {
+      generateId: (data) => data.key,
+    })
+    .toString()
+}
+
 export const createDynamicStyleExpression = (
@@ -24,0 +54,0 @@ styleValue: UIDLDynamicReference,

src/utils/ast-utils.ts

@@ -70,2 +70,24 @@ import * as types from '@babel/types'
 
+export const addMultipleDynamicAttributesToJSXTag = (
+  jsxASTNode: types.JSXElement,
+  name: string,
+  values: string[],
+  t = types
+) => {
+  const memberExpressions: types.Identifier[] = []
+  const templateElements: types.TemplateElement[] = []
+
+  Object.values(values).forEach((item) => {
+    templateElements.push(t.templateElement({ raw: ' ', cooked: ' ' }))
+    memberExpressions.push(t.identifier(item))
+  })
+  templateElements.push(t.templateElement({ raw: ' ', cooked: ' ' }))
+
+  const content = t.templateLiteral(templateElements, memberExpressions)
+
+  jsxASTNode.openingElement.attributes.push(
+    t.jsxAttribute(t.jsxIdentifier(name), t.jsxExpressionContainer(content))
+  )
+}
+
 export const stringAsTemplateLiteral = (str: string, t = types) => {
@@ -72,0 +94,0 @@ const formmattedString = `

src/utils/style-utils.ts

 import { UIDLStyleDefinitions, UIDLStyleValue } from '@teleporthq/teleport-types'
 
 const getContentOfStyleKey = (styleValue: UIDLStyleValue) => {
-  switch (styleValue.type) {
-    case 'static':
-      return styleValue.content
-    case 'nested-style':
-      return getContentOfStyleObject(styleValue.content)
-    default:
-      throw new Error(
-        `getContentOfStyleKey received unsupported ${JSON.stringify(
-          styleValue,
-          null,
-          2
-        )} UIDLNodeStyleValue value`
-      )
+  if (styleValue.type === 'static') {
+    return styleValue.content
   }
+  throw new Error(
+    `getContentOfStyleKey received unsupported ${JSON.stringify(
+      styleValue,
+      null,
+      2
+    )} UIDLNodeStyleValue value`
+  )
 }
@@ -19,0 +15,0 @@

No alert changes

Improved metrics

Total package byte prevSize

549646

increased by1.17%

Lines of code

4894

increased by2.02%

Dependency changes

• + Added@teleporthq/teleport-shared@0.12.4(transitive)

• + Added@teleporthq/teleport-types@0.12.4(transitive)

• - Removed@teleporthq/teleport-shared@0.11.1(transitive)

• - Removed@teleporthq/teleport-types@0.11.0(transitive)

• Updated@teleporthq/teleport-shared@^0.12.0

• Updated@teleporthq/teleport-types@^0.12.0