tw-tailwind - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

dist/index.d.ts

+/// <reference types="react" />
+import { componentFactory } from './utils/componentFactory';
+declare class Wrapper<T extends keyof JSX.IntrinsicElements> {
+    wrapped(e: T): <TTWProps extends {}>(template: TemplateStringsArray | ((props: JSX.IntrinsicElements[T] & TTWProps) => string | import("clsx").ClassValue[]), ...templateElements: ((string | boolean | null | undefined) | ((props: JSX.IntrinsicElements[T] & TTWProps) => string | boolean | null | undefined))[]) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<JSX.IntrinsicElements[T] & TTWProps> & import("react").RefAttributes<import("react").ElementRef<T>>>;
+}
+declare type IntrinsicElementsTemplateFunctionsMap = {
+    [Key in keyof JSX.IntrinsicElements]: ReturnType<Wrapper<Key>['wrapped']>;
+};
+export declare const tagMap: IntrinsicElementsTemplateFunctionsMap;
+declare const tw: typeof componentFactory & IntrinsicElementsTemplateFunctionsMap;
+export default tw;

dist/index.js

+/* eslint-disable no-unused-vars */
+/* eslint-disable react/display-name */
+import tags from './utils/tags';
+import { componentFactory } from './utils/componentFactory';
+import { tagFactory } from './utils/tagFactory';
+class Wrapper {
+    // wrapped has no explicit return type so we can infer it
+    wrapped(e) {
+        return tagFactory(e);
+    }
+}
+export const tagMap = tags.reduce((acc, tag) => ({
+    ...acc,
+    [tag]: tagFactory(tag),
+}), {});
+const tw = Object.assign(componentFactory, tagMap);
+export default tw;
+//# sourceMappingURL=index.js.map

dist/index.js.map

+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,uCAAuC;AAEvC,OAAO,IAAI,MAAM,cAAc,CAAA;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAE/C,MAAM,OAAO;IACX,yDAAyD;IACzD,OAAO,CAAC,CAAI;QACV,OAAO,UAAU,CAAI,CAAC,CAAC,CAAA;IACzB,CAAC;CACF;AAKD,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAC/B,CAAC,GAAG,EAAE,GAAgC,EAAE,EAAE,CAAC,CAAC;IAC1C,GAAG,GAAG;IACN,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC;CACvB,CAAC,EACF,EAA2C,CAC5C,CAAA;AAED,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AAElD,eAAe,EAAE,CAAA"}

dist/types/objectWithoutPrefixDollar.d.ts

+declare type FilteredKeys<T> = {
+    [P in keyof T]: P extends `$${string}` ? never : P;
+}[keyof T];
+export declare type ObjectWithoutPrefixDollar<T> = {
+    [Q in FilteredKeys<T>]: T[Q];
+};
+export {};

dist/types/objectWithoutPrefixDollar.js

+export {};
+//# sourceMappingURL=objectWithoutPrefixDollar.js.map

dist/types/objectWithoutPrefixDollar.js.map

+{"version":3,"file":"objectWithoutPrefixDollar.js","sourceRoot":"","sources":["../../src/types/objectWithoutPrefixDollar.ts"],"names":[],"mappings":""}

dist/utils/cleanTemplate.d.ts

+export declare const cleanTemplate: (template: (string | undefined | null | boolean)[], inheritedClasses?: string) => string;

dist/utils/cleanTemplate.js

+import { twMerge } from 'tailwind-merge';
+export const cleanTemplate = (template, inheritedClasses = '') => {
+    const newClasses = template
+        .join(' ')
+        .trim()
+        .replace(/\n/g, ' ')
+        .replace(/\s{2,}/g, ' ')
+        .split(' ')
+        .filter((c) => c !== ',');
+    const inheritedClassesArray = inheritedClasses ? inheritedClasses.split(' ') : [];
+    return twMerge(...newClasses.concat(inheritedClassesArray).filter((c) => c !== ' '));
+};
+//# sourceMappingURL=cleanTemplate.js.map

dist/utils/cleanTemplate.js.map

+{"version":3,"file":"cleanTemplate.js","sourceRoot":"","sources":["../../src/utils/cleanTemplate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAiD,EAAE,mBAA2B,EAAE,EAAE,EAAE;IAChH,MAAM,UAAU,GAAa,QAAQ;SAClC,IAAI,CAAC,GAAG,CAAC;SACT,IAAI,EAAE;SACN,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC;SACnB,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC;SACvB,KAAK,CAAC,GAAG,CAAC;SACV,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAA;IAE3B,MAAM,qBAAqB,GAAa,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAE3F,OAAO,OAAO,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;AAC9F,CAAC,CAAA"}

dist/utils/componentFactory.d.ts

+import { ClassValue } from 'clsx';
+import { ComponentType, PropsWithoutRef, RefAttributes } from 'react';
+import React from 'react';
+declare global {
+    export interface ArrayConstructor {
+        isArray(arg: ReadonlyArray<any> | any): arg is ReadonlyArray<any>;
+    }
+}
+declare type TemplateElementsReturn = string | boolean | undefined | null;
+export declare function componentFactory<TComponentProps extends {
+    className?: string;
+}, Ref = never>(Element: ComponentType<PropsWithoutRef<TComponentProps> & RefAttributes<Ref>>): <TTWProps extends {}>(template: TemplateStringsArray | ((props: PropsWithoutRef<TComponentProps> & TTWProps) => string | ClassValue[]), ...templateElements: (((props: PropsWithoutRef<TComponentProps> & TTWProps) => TemplateElementsReturn) | TemplateElementsReturn)[]) => React.ForwardRefExoticComponent<PropsWithoutRef<PropsWithoutRef<TComponentProps> & TTWProps> & RefAttributes<Ref>>;
+export declare function componentFactory(Element: ReadonlyArray<string>): string;
+export {};

dist/utils/componentFactory.js

+/* eslint-disable no-redeclare */
+/* eslint-disable no-unused-vars */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { cleanTemplate } from './cleanTemplate';
+import { mergeArrays } from './mergeArrays';
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+export function componentFactory(Element) {
+    if (Array.isArray(Element)) {
+        return twMerge(Element[0]);
+    }
+    return (template, ...templateElements) => {
+        const Component = forwardRef((props, ref) => {
+            const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key.charAt(0) !== '$'));
+            return (React.createElement(Element, { ...filteredProps, className: typeof template === 'function'
+                    ? twMerge(clsx(template(props), props.className))
+                    : cleanTemplate(mergeArrays(template, templateElements.map((t) => (typeof t === 'function' ? t(props) : t))), props.className), ref: ref }));
+        });
+        Component.displayName = `tw.${Element.displayName || Element.name}`;
+        return Component;
+    };
+}
+//# sourceMappingURL=componentFactory.js.map

dist/utils/componentFactory.js.map

+{"version":3,"file":"componentFactory.js","sourceRoot":"","sources":["../../src/utils/componentFactory.tsx"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,mCAAmC;AACnC,OAAO,IAAoB,MAAM,MAAM,CAAA;AACvC,OAAO,EAAiD,UAAU,EAAE,MAAM,OAAO,CAAA;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAgCxC,MAAM,UAAU,gBAAgB,CAC9B,OAEyB;IAEzB,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC1B,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;KAC3B;IAED,OAAO,CACL,QAE0E,EAC1E,GAAG,gBAGA,EACH,EAAE;QACF,MAAM,SAAS,GAAG,UAAU,CAAmD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YAC5F,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CACtC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CACW,CAAA;YAE3E,OAAO,CACL,oBAAC,OAAO,OACF,aAAa,EACjB,SAAS,EACP,OAAO,QAAQ,KAAK,UAAU;oBAC5B,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;oBACjD,CAAC,CAAC,aAAa,CACX,WAAW,CACT,QAAQ,EACR,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACtE,EACD,KAAK,CAAC,SAAS,CAChB,EAEP,GAAG,EAAE,GAAG,GACR,CACH,CAAA;QACH,CAAC,CAAC,CAAA;QACF,SAAS,CAAC,WAAW,GAAG,MAAM,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,EAAE,CAAA;QACnE,OAAO,SAAS,CAAA;IAClB,CAAC,CAAA;AACH,CAAC"}

dist/utils/mergeArrays.d.ts

+export declare const mergeArrays: (template: TemplateStringsArray, templateElements: (string | boolean | undefined | null)[]) => (string | boolean | null | undefined)[];

dist/utils/mergeArrays.js

+export const mergeArrays = (template, templateElements) => template.reduce((acc, c, i) => acc.concat(c || [], templateElements[i] || []), []);
+//# sourceMappingURL=mergeArrays.js.map

dist/utils/mergeArrays.js.map

+{"version":3,"file":"mergeArrays.js","sourceRoot":"","sources":["../../src/utils/mergeArrays.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAA8B,EAAE,gBAAyD,EAAE,EAAE,CACvH,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAA6C,CAAC,CAAA"}

dist/utils/tagFactory.d.ts

+import { ClassValue } from 'clsx';
+import { ElementRef } from 'react';
+declare type TemplateElementsReturn = string | boolean | undefined | null;
+export declare const tagFactory: <TTag extends keyof JSX.IntrinsicElements>(tag: TTag) => <TTWProps extends {}>(template: TemplateStringsArray | ((props: JSX.IntrinsicElements[TTag] & TTWProps) => string | ClassValue[]), ...templateElements: (TemplateElementsReturn | ((props: JSX.IntrinsicElements[TTag] & TTWProps) => TemplateElementsReturn))[]) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<JSX.IntrinsicElements[TTag] & TTWProps> & import("react").RefAttributes<ElementRef<TTag>>>;
+export {};

dist/utils/tagFactory.js

+/* eslint-disable no-redeclare */
+/* eslint-disable no-unused-vars */
+import clsx from 'clsx';
+import { forwardRef, createElement } from 'react';
+import { cleanTemplate } from './cleanTemplate';
+import { mergeArrays } from './mergeArrays';
+import { twMerge } from 'tailwind-merge';
+export const tagFactory = (tag) => (template, ...templateElements) => {
+    const Component = forwardRef((props, ref) => {
+        const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key.charAt(0) !== '$'));
+        return createElement(tag, {
+            ...filteredProps,
+            className: typeof template === 'function'
+                ? twMerge(clsx(template(props), props.className))
+                : cleanTemplate(mergeArrays(template, templateElements.map((t) => (typeof t === 'function' ? t(props) : t))), props.className),
+            ref,
+        }, props.children);
+    });
+    Component.displayName = `tw.${tag}`;
+    return Component;
+};
+//# sourceMappingURL=tagFactory.js.map

dist/utils/tagFactory.js.map

+{"version":3,"file":"tagFactory.js","sourceRoot":"","sources":["../../src/utils/tagFactory.ts"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,mCAAmC;AAEnC,OAAO,IAAoB,MAAM,MAAM,CAAA;AACvC,OAAO,EAAE,UAAU,EAAc,aAAa,EAAE,MAAM,OAAO,CAAA;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,MAAM,CAAC,MAAM,UAAU,GACrB,CAA2C,GAAS,EAAE,EAAE,CACxD,CACE,QAE8E,EAC9E,GAAG,gBAGA,EACH,EAAE;IACF,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QACb,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CACtC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CACM,CAAA;QACtE,OAAO,aAAa,CAClB,GAAG,EACH;YACE,GAAG,aAAa;YAChB,SAAS,EACP,OAAO,QAAQ,KAAK,UAAU;gBAC5B,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;gBACjD,CAAC,CAAC,aAAa,CACX,WAAW,CACT,QAAQ,EACR,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACtE,EACD,KAAK,CAAC,SAAS,CAChB;YACP,GAAG;SACJ,EACD,KAAK,CAAC,QAAQ,CACf,CAAA;IACH,CAAC,CACF,CAAA;IACD,SAAS,CAAC,WAAW,GAAG,MAAM,GAAG,EAAE,CAAA;IACnC,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA"}

dist/utils/tags.d.ts

+/// <reference types="react" />
+declare const elementsArray: (keyof JSX.IntrinsicElements)[];
+export default elementsArray;

dist/utils/tags.js

+const elementsArray = [
+    'a',
+    'abbr',
+    'address',
+    'area',
+    'article',
+    'aside',
+    'audio',
+    'b',
+    'base',
+    'bdi',
+    'bdo',
+    'big',
+    'blockquote',
+    'body',
+    'br',
+    'button',
+    'canvas',
+    'caption',
+    'cite',
+    'code',
+    'col',
+    'colgroup',
+    'data',
+    'datalist',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'dialog',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'embed',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'head',
+    'header',
+    'hgroup',
+    'hr',
+    'html',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'keygen',
+    'label',
+    'legend',
+    'li',
+    'link',
+    'main',
+    'map',
+    'mark',
+    'menu',
+    'menuitem',
+    'meta',
+    'meter',
+    'nav',
+    'noscript',
+    'object',
+    'ol',
+    'optgroup',
+    'option',
+    'output',
+    'p',
+    'param',
+    'picture',
+    'pre',
+    'progress',
+    'q',
+    'rp',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'script',
+    'section',
+    'select',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'style',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'textarea',
+    'tfoot',
+    'th',
+    'thead',
+    'time',
+    'title',
+    'tr',
+    'track',
+    'u',
+    'ul',
+    'var',
+    'video',
+    'wbr',
+    'circle',
+    'clipPath',
+    'defs',
+    'ellipse',
+    'foreignObject',
+    'g',
+    'image',
+    'line',
+    'linearGradient',
+    'marker',
+    'mask',
+    'path',
+    'pattern',
+    'polygon',
+    'polyline',
+    'radialGradient',
+    'rect',
+    'stop',
+    'svg',
+    'text',
+    'tspan',
+];
+export default elementsArray;
+//# sourceMappingURL=tags.js.map

dist/utils/tags.js.map

+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/utils/tags.ts"],"names":[],"mappings":"AAAA,MAAM,aAAa,GAAoC;IACrD,GAAG;IACH,MAAM;IACN,SAAS;IACT,MAAM;IACN,SAAS;IACT,OAAO;IACP,OAAO;IACP,GAAG;IACH,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,YAAY;IACZ,MAAM;IACN,IAAI;IACJ,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,MAAM;IACN,MAAM;IACN,KAAK;IACL,UAAU;IACV,MAAM;IACN,UAAU;IACV,IAAI;IACJ,KAAK;IACL,SAAS;IACT,KAAK;IACL,QAAQ;IACR,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,OAAO;IACP,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,IAAI;IACJ,MAAM;IACN,GAAG;IACH,QAAQ;IACR,KAAK;IACL,OAAO;IACP,KAAK;IACL,KAAK;IACL,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,MAAM;IACN,UAAU;IACV,MAAM;IACN,OAAO;IACP,KAAK;IACL,UAAU;IACV,QAAQ;IACR,IAAI;IACJ,UAAU;IACV,QAAQ;IACR,QAAQ;IACR,GAAG;IACH,OAAO;IACP,SAAS;IACT,KAAK;IACL,UAAU;IACV,GAAG;IACH,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,GAAG;IACH,MAAM;IACN,QAAQ;IACR,SAAS;IACT,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,OAAO;IACP,KAAK;IACL,SAAS;IACT,KAAK;IACL,OAAO;IACP,OAAO;IACP,IAAI;IACJ,UAAU;IACV,OAAO;IACP,IAAI;IACJ,OAAO;IACP,MAAM;IACN,OAAO;IACP,IAAI;IACJ,OAAO;IACP,GAAG;IACH,IAAI;IACJ,KAAK;IACL,OAAO;IACP,KAAK;IACL,QAAQ;IACR,UAAU;IACV,MAAM;IACN,SAAS;IACT,eAAe;IACf,GAAG;IACH,OAAO;IACP,MAAM;IACN,gBAAgB;IAChB,QAAQ;IACR,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,OAAO;CACR,CAAA;AAED,eAAe,aAAa,CAAA"}

package.json

 {
   "name": "tw-tailwind",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "A lighter version of twin.macro that allows you to create tailwind react components like styled-components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

61016

31.04%

Number of package files

51

70%

Lines of code

706

57.24%

No dependency changes