@4c/layout - npm Package Compare versions

Comparing version 2.0.6 to 2.1.0

CHANGELOG.md

@@ -0,1 +1,12 @@
+# [2.1.0](https://github.com/4Catalyzer/layout/compare/v2.0.5...v2.1.0) (2021-07-06)
+
+
+### Features
+
+* **perf:** remove large union for looser type but much faster ([#103](https://github.com/4Catalyzer/layout/issues/103)) ([b48cd2f](https://github.com/4Catalyzer/layout/commit/b48cd2f6ec3ba691f734d78148167ef27a3b34ef))
+
+
+
+
+
 ## [2.0.4](https://github.com/4Catalyzer/layout/compare/v2.0.3...v2.0.4) (2020-02-18)
@@ -2,0 +13,0 @@

es/index.js

@@ -39,26 +39,49 @@ import "./Layout.css";
 
+const layout = "mc7b5ceb67_layout";
+const column = "mc7b5ceb67_column";
+const reverse = "mc7b5ceb67_reverse";
+const spacer = "mc7b5ceb67_spacer";
+const row = "mc7b5ceb67_row";
+const pad1 = "mc7b5ceb67_pad-1";
+const wrap = "mc7b5ceb67_wrap";
+const pad2 = "mc7b5ceb67_pad-2";
+const pad3 = "mc7b5ceb67_pad-3";
+const pad4 = "mc7b5ceb67_pad-4";
+const pad5 = "mc7b5ceb67_pad-5";
+const pad6 = "mc7b5ceb67_pad-6";
+const pad8 = "mc7b5ceb67_pad-8";
+const pad10 = "mc7b5ceb67_pad-10";
+const pad12 = "mc7b5ceb67_pad-12";
+const pad16 = "mc7b5ceb67_pad-16";
+const pad20 = "mc7b5ceb67_pad-20";
+const pad24 = "mc7b5ceb67_pad-24";
+const pad32 = "mc7b5ceb67_pad-32";
+const pad40 = "mc7b5ceb67_pad-40";
+const pad48 = "mc7b5ceb67_pad-48";
+const pad56 = "mc7b5ceb67_pad-56";
+const pad64 = "mc7b5ceb67_pad-64";
 var styles = {
-    "layout": "mc7b5ceb67_layout",
-    "column": "mc7b5ceb67_column",
-    "reverse": "mc7b5ceb67_reverse",
-    "spacer": "mc7b5ceb67_spacer",
-    "row": "mc7b5ceb67_row",
-    "pad-1": "mc7b5ceb67_pad-1",
-    "wrap": "mc7b5ceb67_wrap",
-    "pad-2": "mc7b5ceb67_pad-2",
-    "pad-3": "mc7b5ceb67_pad-3",
-    "pad-4": "mc7b5ceb67_pad-4",
-    "pad-5": "mc7b5ceb67_pad-5",
-    "pad-6": "mc7b5ceb67_pad-6",
-    "pad-8": "mc7b5ceb67_pad-8",
-    "pad-10": "mc7b5ceb67_pad-10",
-    "pad-12": "mc7b5ceb67_pad-12",
-    "pad-16": "mc7b5ceb67_pad-16",
-    "pad-20": "mc7b5ceb67_pad-20",
-    "pad-24": "mc7b5ceb67_pad-24",
-    "pad-32": "mc7b5ceb67_pad-32",
-    "pad-40": "mc7b5ceb67_pad-40",
-    "pad-48": "mc7b5ceb67_pad-48",
-    "pad-56": "mc7b5ceb67_pad-56",
-    "pad-64": "mc7b5ceb67_pad-64"
+    layout,
+column,
+reverse,
+spacer,
+row,
+"pad-1" : pad1,
+wrap,
+"pad-2" : pad2,
+"pad-3" : pad3,
+"pad-4" : pad4,
+"pad-5" : pad5,
+"pad-6" : pad6,
+"pad-8" : pad8,
+"pad-10" : pad10,
+"pad-12" : pad12,
+"pad-16" : pad16,
+"pad-20" : pad20,
+"pad-24" : pad24,
+"pad-32" : pad32,
+"pad-40" : pad40,
+"pad-48" : pad48,
+"pad-56" : pad56,
+"pad-64" : pad64
 };
@@ -88,2 +111,5 @@
 
+const _excluded = ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"],
+      _excluded2 = ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"],
+      _excluded3 = ["display"];
 const Block = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -99,3 +125,3 @@ let {
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -138,3 +164,3 @@ let flexValue = flex === true ? '1' : flex;
   } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -168,3 +194,3 @@ let flexValue = flex === true ? '1' : flex;
   } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, ["display"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -171,0 +197,0 @@ if (display === 'block') return Block.render(props, ref);

lib/index.d.ts

@@ -1,31 +0,19 @@
-// TypeScript Version: 3.2
-
 import * as React from 'react';
 
-type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
+export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
 
-type PropsOf<
-  Tag extends React.ElementType
-> = Tag extends keyof JSX.IntrinsicElements
-  ? JSX.IntrinsicElements[Tag]
-  : Tag extends React.FunctionComponent<infer Props>
-  ? Props & React.Attributes
-  : Tag extends React.ComponentClass<infer Props2>
-  ? Tag extends new (...args: any[]) => infer Instance
-    ? Props2 & React.ClassAttributes<Instance>
-    : never
-  : never;
+export type ElementType =
+  | IntrinsicElementsKeys
+  | React.JSXElementConstructor<any>;
 
-type ReplaceProps<Inner extends React.ElementType, P> = Omit<
-  PropsOf<Inner>,
-  P
+export type PropsWithAs<
+  Inner extends string | React.ComponentType<any>,
+  P,
+> = Omit<
+  React.ComponentProps<Inner extends ElementType ? Inner : never>,
+  keyof P | 'as'
 > &
-  P;
+  P & { as?: Inner };
 
-declare class ComponentWithAs<
-  As extends React.ElementType,
-  P = {}
-> extends React.Component<ReplaceProps<As, { as?: As } & P>> {}
-
-type Align =
+export type Align =
   | 'start'
@@ -41,3 +29,3 @@ | 'end'
 
-type Content =
+export type Content =
   | 'left'
@@ -63,3 +51,8 @@ | 'right'
 
-export interface FlexProps extends BlockProps {
+export interface FlexProps {
+  grow?: boolean;
+  inline?: boolean;
+  flex?: boolean | number | string;
+  /** default to 'stretch' */
+  alignSelf?: Align;
   /** default to 'row' */
@@ -77,23 +70,25 @@ direction?: 'row' | 'column';
 
-declare class Flex<
-  As extends React.ElementType = 'div'
-> extends ComponentWithAs<As, FlexProps> {}
+declare interface Flex {
+  <As extends string | React.ComponentType<any> = 'div'>(
+    props: PropsWithAs<As, FlexProps>,
+  ): React.ReactElement;
+}
+declare interface Block {
+  <As extends string | React.ComponentType<any> = 'div'>(
+    props: PropsWithAs<As, BlockProps>,
+  ): React.ReactElement;
+}
 
-declare class Block<
-  As extends React.ElementType = 'div'
-> extends ComponentWithAs<As, BlockProps> {}
+export type LayoutProps = FlexProps;
+interface Layout {
+  <As extends string | React.ComponentType<any> = 'div'>(
+    props: PropsWithAs<As, FlexProps>,
+  ): React.ReactElement;
+  Flex: Flex;
+  Block: Block;
+  Spacer: React.ComponentType;
+}
 
-export type LayoutProps =
-  | ({ display?: 'flex' } & FlexProps)
-  | ({ display: 'block' } & BlockProps);
+declare const Layout: Layout;
 
-declare class Layout<
-  As extends React.ElementType = 'div'
-> extends ComponentWithAs<As, LayoutProps> {
-  static Flex: typeof Flex;
-  static Block: typeof Block;
-
-  static Spacer: React.ComponentType;
-}
-
 export default Layout;

lib/index.js

@@ -48,26 +48,49 @@ "use strict";
 
+const layout = "mc7b5ceb67_layout";
+const column = "mc7b5ceb67_column";
+const reverse = "mc7b5ceb67_reverse";
+const spacer = "mc7b5ceb67_spacer";
+const row = "mc7b5ceb67_row";
+const pad1 = "mc7b5ceb67_pad-1";
+const wrap = "mc7b5ceb67_wrap";
+const pad2 = "mc7b5ceb67_pad-2";
+const pad3 = "mc7b5ceb67_pad-3";
+const pad4 = "mc7b5ceb67_pad-4";
+const pad5 = "mc7b5ceb67_pad-5";
+const pad6 = "mc7b5ceb67_pad-6";
+const pad8 = "mc7b5ceb67_pad-8";
+const pad10 = "mc7b5ceb67_pad-10";
+const pad12 = "mc7b5ceb67_pad-12";
+const pad16 = "mc7b5ceb67_pad-16";
+const pad20 = "mc7b5ceb67_pad-20";
+const pad24 = "mc7b5ceb67_pad-24";
+const pad32 = "mc7b5ceb67_pad-32";
+const pad40 = "mc7b5ceb67_pad-40";
+const pad48 = "mc7b5ceb67_pad-48";
+const pad56 = "mc7b5ceb67_pad-56";
+const pad64 = "mc7b5ceb67_pad-64";
 var styles = {
-    "layout": "mc7b5ceb67_layout",
-    "column": "mc7b5ceb67_column",
-    "reverse": "mc7b5ceb67_reverse",
-    "spacer": "mc7b5ceb67_spacer",
-    "row": "mc7b5ceb67_row",
-    "pad-1": "mc7b5ceb67_pad-1",
-    "wrap": "mc7b5ceb67_wrap",
-    "pad-2": "mc7b5ceb67_pad-2",
-    "pad-3": "mc7b5ceb67_pad-3",
-    "pad-4": "mc7b5ceb67_pad-4",
-    "pad-5": "mc7b5ceb67_pad-5",
-    "pad-6": "mc7b5ceb67_pad-6",
-    "pad-8": "mc7b5ceb67_pad-8",
-    "pad-10": "mc7b5ceb67_pad-10",
-    "pad-12": "mc7b5ceb67_pad-12",
-    "pad-16": "mc7b5ceb67_pad-16",
-    "pad-20": "mc7b5ceb67_pad-20",
-    "pad-24": "mc7b5ceb67_pad-24",
-    "pad-32": "mc7b5ceb67_pad-32",
-    "pad-40": "mc7b5ceb67_pad-40",
-    "pad-48": "mc7b5ceb67_pad-48",
-    "pad-56": "mc7b5ceb67_pad-56",
-    "pad-64": "mc7b5ceb67_pad-64"
+    layout,
+column,
+reverse,
+spacer,
+row,
+"pad-1" : pad1,
+wrap,
+"pad-2" : pad2,
+"pad-3" : pad3,
+"pad-4" : pad4,
+"pad-5" : pad5,
+"pad-6" : pad6,
+"pad-8" : pad8,
+"pad-10" : pad10,
+"pad-12" : pad12,
+"pad-16" : pad16,
+"pad-20" : pad20,
+"pad-24" : pad24,
+"pad-32" : pad32,
+"pad-40" : pad40,
+"pad-48" : pad48,
+"pad-56" : pad56,
+"pad-64" : pad64
 };
@@ -97,2 +120,5 @@
 
+const _excluded = ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"],
+      _excluded2 = ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"],
+      _excluded3 = ["display"];
 const Block = /*#__PURE__*/React__default['default'].forwardRef((_ref, ref) => {
@@ -108,3 +134,3 @@ let {
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -147,3 +173,3 @@ let flexValue = flex === true ? '1' : flex;
   } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, ["as", "direction", "reverse", "pad", "wrap", "grow", "inline", "flex", "align", "alignSelf", "alignContent", "justify", "className", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
@@ -177,3 +203,3 @@ let flexValue = flex === true ? '1' : flex;
   } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, ["display"]);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
@@ -180,0 +206,0 @@ if (display === 'block') return Block.render(props, ref);

lib/tsconfig.json

@@ -11,2 +11,3 @@ {
     "baseUrl": ".",
+    "skipLibCheck": true,
     "paths": {
@@ -13,0 +14,0 @@ "@4c/layout": ["."]

package.json

 {
   "name": "@4c/layout",
-  "version": "2.0.6",
+  "version": "2.1.0",
   "files": [
@@ -18,4 +18,3 @@ "lib",
     "prettier": "prettier --ignore-path .eslintignore '**/*.{css,json,md,ts}'",
-    "test": "npm run lint && npm run test:ts",
-    "test:ts": "dtslint types"
+    "test": "npm run lint"
   },
@@ -25,6 +24,4 @@ "publishConfig": {
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "gitHooks": {
+    "pre-commit": "lint-staged"
   },
@@ -40,7 +37,2 @@ "lint-staged": {
   },
-  "release": {
-    "extends": [
-      "@4c/semantic-release-config"
-    ]
-  },
   "repository": {
@@ -52,5 +44,8 @@ "type": "git",
   "license": "MIT",
+  "release": {
+    "conventionalCommits": true
+  },
   "dependencies": {
-    "@types/react": ">=16.8.12",
-    "classnames": "^2.2.6",
+    "@types/react": ">=17.0.13",
+    "classnames": "^2.3.1",
     "prop-types": "^15.7.2"
@@ -62,30 +57,34 @@ },
   "devDependencies": {
-    "@4c/babel-preset": "^8.0.3",
-    "@4c/semantic-release-config": "^2.0.14",
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
+    "@4c/babel-preset": "^8.1.1",
+    "@4c/semantic-release-config": "^2.1.0",
+    "@babel/cli": "^7.14.5",
+    "@babel/core": "^7.14.6",
     "@csstools/postcss-sass": "^4.0.0",
-    "@modular-css/rollup": "^25.8.2",
+    "@modular-css/rollup": "^26.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
     "babel-eslint": "^10.1.0",
-    "dtslint": "^4.0.6",
-    "eslint": "^7.18.0",
-    "eslint-config-4catalyzer-react": "^1.0.13",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-import": "^2.22.1",
+    "dtslint": "^4.1.1",
+    "eslint": "^7.30.0",
+    "eslint-config-4catalyzer-react": "^1.1.0",
+    "eslint-config-4catalyzer-typescript": "^3.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.3",
-    "postcss-scss": "^3.0.4",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "rollup": "^2.38.0",
+    "hookem": "^1.0.8",
+    "lint-staged": "^11.0.0",
+    "postcss-scss": "^4.0.0",
+    "prettier": "^2.3.2",
+    "react": "^17.0.2",
+    "rollup": "^2.52.7",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "sass": "^1.32.5",
-    "semantic-release": "^17.3.7"
+    "sass": "^1.35.1",
+    "semantic-release": "^17.4.4",
+    "typescript": "^4.3.5"
   }
 }

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

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

36529

increased by3.45%

Lines of code

976

increased by5.63%

Worsened metrics

Dev dependency count

31

increased by14.81%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@types/react@>=17.0.13

• Updatedclassnames@^2.3.1