@favware/syntax-highlighter-react - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/index.mjs

+// src/react-component-lib/createComponent.tsx
+import React2 from "react";
+
+// src/react-component-lib/utils/index.tsx
+import React from "react";
+
+// src/react-component-lib/utils/case.ts
+var dashToPascalCase = (str) => str.toLowerCase().split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("");
+var camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
+
+// src/react-component-lib/utils/attachProps.ts
+var attachProps = (node, newProps, oldProps = {}) => {
+  if (node instanceof Element) {
+    const className = getClassName(node.classList, newProps, oldProps);
+    if (className !== "") {
+      node.className = className;
+    }
+    Object.keys(newProps).forEach((name) => {
+      if (name === "children" || name === "style" || name === "ref" || name === "class" || name === "className" || name === "forwardedRef") {
+        return;
+      }
+      if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+        const eventName = name.substring(2);
+        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
+        if (typeof document !== "undefined" && !isCoveredByReact(eventNameLc, document)) {
+          syncEvent(node, eventNameLc, newProps[name]);
+        }
+      } else {
+        node[name] = newProps[name];
+        const propType = typeof newProps[name];
+        if (propType === "string") {
+          node.setAttribute(camelToDashCase(name), newProps[name]);
+        } else {
+          node[name] = newProps[name];
+        }
+      }
+    });
+  }
+};
+var getClassName = (classList, newProps, oldProps) => {
+  const newClassProp = newProps.className || newProps.class;
+  const oldClassProp = oldProps.className || oldProps.class;
+  const currentClasses = arrayToMap(classList);
+  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(" ") : []);
+  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(" ") : []);
+  const finalClassNames = [];
+  currentClasses.forEach((currentClass) => {
+    if (incomingPropClasses.has(currentClass)) {
+      finalClassNames.push(currentClass);
+      incomingPropClasses.delete(currentClass);
+    } else if (!oldPropClasses.has(currentClass)) {
+      finalClassNames.push(currentClass);
+    }
+  });
+  incomingPropClasses.forEach((s) => finalClassNames.push(s));
+  return finalClassNames.join(" ");
+};
+var isCoveredByReact = (eventNameSuffix, doc) => {
+  const eventName = "on" + eventNameSuffix;
+  let isSupported = eventName in doc;
+  if (!isSupported) {
+    const element = doc.createElement("div");
+    element.setAttribute(eventName, "return;");
+    isSupported = typeof element[eventName] === "function";
+  }
+  return isSupported;
+};
+var syncEvent = (node, eventName, newEventHandler) => {
+  const eventStore = node.__events || (node.__events = {});
+  const oldEventHandler = eventStore[eventName];
+  if (oldEventHandler) {
+    node.removeEventListener(eventName, oldEventHandler);
+  }
+  node.addEventListener(eventName, eventStore[eventName] = function handler(e) {
+    if (newEventHandler) {
+      newEventHandler.call(this, e);
+    }
+  });
+};
+var arrayToMap = (arr) => {
+  const map = new Map();
+  arr.forEach((s) => map.set(s, s));
+  return map;
+};
+
+// src/react-component-lib/utils/index.tsx
+var mergeRefs = (...refs) => (value) => refs.forEach((ref) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref != null) {
+    ref.current = value;
+  }
+});
+var createForwardRef = (ReactComponent, displayName) => {
+  const forwardRef = (props, ref) => {
+    return /* @__PURE__ */ React.createElement(ReactComponent, {
+      ...props,
+      forwardedRef: ref
+    });
+  };
+  forwardRef.displayName = displayName;
+  return React.forwardRef(forwardRef);
+};
+
+// src/react-component-lib/createComponent.tsx
+var createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction) => {
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React2.Component {
+    constructor(props) {
+      super(props);
+      this.setComponentElRef = (element) => {
+        this.componentEl = element;
+      };
+    }
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+    componentDidUpdate(prevProps) {
+      attachProps(this.componentEl, this.props, prevProps);
+    }
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+      let propsToPass = Object.keys(cProps).reduce((acc, name) => {
+        if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (typeof document !== "undefined" && isCoveredByReact(eventName, document)) {
+            acc[name] = cProps[name];
+          }
+        } else {
+          acc[name] = cProps[name];
+        }
+        return acc;
+      }, {});
+      if (manipulatePropsFunction) {
+        propsToPass = manipulatePropsFunction(this.props, propsToPass);
+      }
+      let newProps = {
+        ...propsToPass,
+        ref: mergeRefs(forwardedRef, this.setComponentElRef),
+        style
+      };
+      return React2.createElement(tagName, newProps, children);
+    }
+    static get displayName() {
+      return displayName;
+    }
+  };
+  if (ReactComponentContext) {
+    ReactComponent.contextType = ReactComponentContext;
+  }
+  return createForwardRef(ReactComponent, displayName);
+};
+
+// src/react-component-lib/createOverlayComponent.tsx
+import React3 from "react";
+import ReactDOM from "react-dom";
+
+// src/index.ts
+import { defineCustomElements } from "@favware/syntax-highlighter-core/loader";
+defineCustomElements();
+var SyntaxHighlighter = /* @__PURE__ */ createReactComponent("syntax-highlighter");
+export {
+  SyntaxHighlighter
+};
+/**
+ * Checks if an event is supported in the current execution environment.
+ * @license Modernizr 3.0.0pre (Custom Build) | MIT
+ */
+//# sourceMappingURL=index.mjs.map

dist/index.mjs.map

+{
+  "version": 3,
+  "sources": ["../src/react-component-lib/createComponent.tsx", "../src/react-component-lib/utils/index.tsx", "../src/react-component-lib/utils/case.ts", "../src/react-component-lib/utils/attachProps.ts", "../src/react-component-lib/createOverlayComponent.tsx", "../src/index.ts"],
+  "sourcesContent": ["import React from 'react';\n\nimport {\n  attachProps,\n  createForwardRef,\n  dashToPascalCase,\n  isCoveredByReact,\n  mergeRefs,\n} from './utils';\n\nexport interface HTMLStencilElement extends HTMLElement {\n  componentOnReady(): Promise<this>;\n}\n\ninterface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {\n  forwardedRef: React.RefObject<ElementType>;\n  ref?: React.Ref<any>;\n}\n\nexport const createReactComponent = <\n  PropType,\n  ElementType extends HTMLStencilElement,\n  ContextStateType = {},\n  ExpandedPropsTypes = {}\n>(\n  tagName: string,\n  ReactComponentContext?: React.Context<ContextStateType>,\n  manipulatePropsFunction?: (\n    originalProps: StencilReactInternalProps<ElementType>,\n    propsToPass: any,\n  ) => ExpandedPropsTypes,\n) => {\n  const displayName = dashToPascalCase(tagName);\n\n  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {\n    componentEl!: ElementType;\n\n    setComponentElRef = (element: ElementType) => {\n      this.componentEl = element;\n    };\n\n    constructor(props: StencilReactInternalProps<ElementType>) {\n      super(props);\n    }\n\n    componentDidMount() {\n      this.componentDidUpdate(this.props);\n    }\n\n    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {\n      attachProps(this.componentEl, this.props, prevProps);\n    }\n\n    render() {\n      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;\n\n      let propsToPass = Object.keys(cProps).reduce((acc, name) => {\n        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n          const eventName = name.substring(2).toLowerCase();\n          if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {\n            (acc as any)[name] = (cProps as any)[name];\n          }\n        } else {\n          (acc as any)[name] = (cProps as any)[name];\n        }\n        return acc;\n      }, {});\n\n      if (manipulatePropsFunction) {\n        propsToPass = manipulatePropsFunction(this.props, propsToPass);\n      }\n\n      let newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {\n        ...propsToPass,\n        ref: mergeRefs(forwardedRef, this.setComponentElRef),\n        style,\n      };\n\n      return React.createElement(tagName, newProps, children);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n  };\n\n  // If context was passed to createReactComponent then conditionally add it to the Component Class\n  if (ReactComponentContext) {\n    ReactComponent.contextType = ReactComponentContext;\n  }\n\n  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);\n};\n", "import React from 'react';\n\nimport type { StyleReactProps } from '../interfaces';\n\ntype Mutable<T> = { -readonly [P in keyof T]-?: T[P] }; // Remove readonly and ?\n\nexport type StencilReactExternalProps<PropType, ElementType> = PropType &\n  Omit<React.HTMLAttributes<ElementType>, 'style'> &\n  StyleReactProps;\n\n// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx\nexport const mergeRefs = <ElementType,>(...refs: React.Ref<ElementType>[]) => (\n  value: ElementType,\n) =>\n  refs.forEach((ref) => {\n    if (typeof ref === 'function') {\n      ref(value);\n    } else if (ref != null) {\n      // This is typed as readonly so we need to allow for override\n      (ref as Mutable<React.RefObject<ElementType>>).current = value;\n    }\n  });\n\nexport const createForwardRef = <PropType, ElementType>(\n  ReactComponent: any,\n  displayName: string,\n) => {\n  const forwardRef = (\n    props: StencilReactExternalProps<PropType, ElementType>,\n    ref: React.Ref<ElementType>,\n  ) => {\n    return <ReactComponent {...props} forwardedRef={ref} />;\n  };\n  forwardRef.displayName = displayName;\n\n  return React.forwardRef(forwardRef);\n};\n\nexport * from './attachProps';\nexport * from './case';\n", "export const dashToPascalCase = (str: string) =>\n  str\n    .toLowerCase()\n    .split('-')\n    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))\n    .join('');\nexport const camelToDashCase = (str: string) =>\n  str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);\n", "import { camelToDashCase } from './case';\n\nexport const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {\n  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first\n  if (node instanceof Element) {\n    // add any classes in className to the class list\n    const className = getClassName(node.classList, newProps, oldProps);\n    if (className !== '') {\n      node.className = className;\n    }\n\n    Object.keys(newProps).forEach((name) => {\n      if (\n        name === 'children' ||\n        name === 'style' ||\n        name === 'ref' ||\n        name === 'class' ||\n        name === 'className' ||\n        name === 'forwardedRef'\n      ) {\n        return;\n      }\n      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n        const eventName = name.substring(2);\n        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);\n\n        if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {\n          syncEvent(node, eventNameLc, newProps[name]);\n        }\n      } else {\n        (node as any)[name] = newProps[name];\n        const propType = typeof newProps[name];\n        if (propType === 'string') {\n          node.setAttribute(camelToDashCase(name), newProps[name]);\n        } else {\n          (node as any)[name] = newProps[name];\n        }\n      }\n    });\n  }\n};\n\nexport const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {\n  const newClassProp: string = newProps.className || newProps.class;\n  const oldClassProp: string = oldProps.className || oldProps.class;\n  // map the classes to Maps for performance\n  const currentClasses = arrayToMap(classList);\n  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);\n  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);\n  const finalClassNames: string[] = [];\n  // loop through each of the current classes on the component\n  // to see if it should be a part of the classNames added\n  currentClasses.forEach((currentClass) => {\n    if (incomingPropClasses.has(currentClass)) {\n      // add it as its already included in classnames coming in from newProps\n      finalClassNames.push(currentClass);\n      incomingPropClasses.delete(currentClass);\n    } else if (!oldPropClasses.has(currentClass)) {\n      // add it as it has NOT been removed by user\n      finalClassNames.push(currentClass);\n    }\n  });\n  incomingPropClasses.forEach((s) => finalClassNames.push(s));\n  return finalClassNames.join(' ');\n};\n\n/**\n * Checks if an event is supported in the current execution environment.\n * @license Modernizr 3.0.0pre (Custom Build) | MIT\n */\nexport const isCoveredByReact = (eventNameSuffix: string, doc: Document) => {\n  const eventName = 'on' + eventNameSuffix;\n  let isSupported = eventName in doc;\n\n  if (!isSupported) {\n    const element = doc.createElement('div');\n    element.setAttribute(eventName, 'return;');\n    isSupported = typeof (element as any)[eventName] === 'function';\n  }\n\n  return isSupported;\n};\n\nexport const syncEvent = (\n  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },\n  eventName: string,\n  newEventHandler?: (e: Event) => any,\n) => {\n  const eventStore = node.__events || (node.__events = {});\n  const oldEventHandler = eventStore[eventName];\n\n  // Remove old listener so they don't double up.\n  if (oldEventHandler) {\n    node.removeEventListener(eventName, oldEventHandler);\n  }\n\n  // Bind new listener.\n  node.addEventListener(\n    eventName,\n    (eventStore[eventName] = function handler(e: Event) {\n      if (newEventHandler) {\n        newEventHandler.call(this, e);\n      }\n    }),\n  );\n};\n\nconst arrayToMap = (arr: string[] | DOMTokenList) => {\n  const map = new Map<string, string>();\n  (arr as string[]).forEach((s: string) => map.set(s, s));\n  return map;\n};\n", "import { OverlayEventDetail } from './interfaces';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { attachProps } from './utils';\n\ninterface OverlayElement extends HTMLElement {\n  present: () => Promise<void>;\n  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;\n}\n\nexport interface ReactOverlayProps {\n  children?: React.ReactNode;\n  isOpen: boolean;\n  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n}\n\nexport const createOverlayComponent = <\n  OverlayComponent extends object,\n  OverlayType extends OverlayElement\n>(\n  displayName: string,\n  controller: { create: (options: any) => Promise<OverlayType> },\n) => {\n  const didDismissEventName = `on${displayName}DidDismiss`;\n  const didPresentEventName = `on${displayName}DidPresent`;\n  const willDismissEventName = `on${displayName}WillDismiss`;\n  const willPresentEventName = `on${displayName}WillPresent`;\n\n  type Props = OverlayComponent &\n    ReactOverlayProps & {\n      forwardedRef?: React.RefObject<OverlayType>;\n    };\n\n  class Overlay extends React.Component<Props> {\n    overlay?: OverlayType;\n    el: HTMLDivElement;\n\n    constructor(props: Props) {\n      super(props);\n      this.el = document.createElement('div');\n      this.handleDismiss = this.handleDismiss.bind(this);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    componentDidMount() {\n      if (this.props.isOpen) {\n        this.present();\n      }\n    }\n\n    componentWillUnmount() {\n      if (this.overlay) {\n        this.overlay.dismiss();\n      }\n    }\n\n    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {\n      if (this.props.onDidDismiss) {\n        this.props.onDidDismiss(event);\n      }\n      if (this.props.forwardedRef) {\n        (this.props.forwardedRef as any).current = undefined;\n      }\n    }\n\n    async componentDidUpdate(prevProps: Props) {\n      if (this.overlay) {\n        attachProps(this.overlay, this.props, prevProps);\n      }\n\n      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n        this.present(prevProps);\n      }\n      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {\n        await this.overlay.dismiss();\n      }\n    }\n\n    async present(prevProps?: Props) {\n      const {\n        children,\n        isOpen,\n        onDidDismiss,\n        onDidPresent,\n        onWillDismiss,\n        onWillPresent,\n        ...cProps\n      } = this.props;\n      const elementProps = {\n        ...cProps,\n        ref: this.props.forwardedRef,\n        [didDismissEventName]: this.handleDismiss,\n        [didPresentEventName]: (e: CustomEvent) =>\n          this.props.onDidPresent && this.props.onDidPresent(e),\n        [willDismissEventName]: (e: CustomEvent) =>\n          this.props.onWillDismiss && this.props.onWillDismiss(e),\n        [willPresentEventName]: (e: CustomEvent) =>\n          this.props.onWillPresent && this.props.onWillPresent(e),\n      };\n\n      this.overlay = await controller.create({\n        ...elementProps,\n        component: this.el,\n        componentProps: {},\n      });\n\n      if (this.props.forwardedRef) {\n        (this.props.forwardedRef as any).current = this.overlay;\n      }\n\n      attachProps(this.overlay, elementProps, prevProps);\n\n      await this.overlay.present();\n    }\n\n    render() {\n      return ReactDOM.createPortal(this.props.isOpen ? this.props.children : null, this.el);\n    }\n  }\n\n  return React.forwardRef<OverlayType, Props>((props, ref) => {\n    return <Overlay {...props} forwardedRef={ref} />;\n  });\n};\n", "/* eslint-disable */\n/* tslint:disable */\n/* auto-generated react proxies */\nimport { createReactComponent } from './react-component-lib';\n\nimport type { JSX } from '@favware/syntax-highlighter-core';\n\nimport { defineCustomElements } from '@favware/syntax-highlighter-core/loader';\n\ndefineCustomElements();\nexport const SyntaxHighlighter = /*@__PURE__*/createReactComponent<JSX.SyntaxHighlighter, HTMLSyntaxHighlighterElement>('syntax-highlighter');\n"],
+  "mappings": "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",
+  "names": []
+}

dist/index.d.ts

 // / <reference types="react" />
-import type { JSX } from '@favware/syntax-highlighter-core';
-export declare const SyntaxHighlighter: import("react").ForwardRefExoticComponent<JSX.SyntaxHighlighter & Pick<import("react").HTMLAttributes<HTMLSyntaxHighlighterElement>, "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSyntaxHighlighterElement>>;
-// # sourceMappingURL=index.d.ts.map
+import * as react from 'react';
+import { JSX } from '@favware/syntax-highlighter-core';
+
+interface StyleReactProps {
+    class?: string;
+    className?: string;
+    style?: {
+        [key: string]: any;
+    };
+}
+
+declare const SyntaxHighlighter: react.ForwardRefExoticComponent<JSX.SyntaxHighlighter & Omit<react.HTMLAttributes<HTMLSyntaxHighlighterElement>, "style"> & StyleReactProps & react.RefAttributes<HTMLSyntaxHighlighterElement>>;
+
+export { SyntaxHighlighter };

package.json

 {
   "name": "@favware/syntax-highlighter-react",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React bindings for @favware/syntax-highlighter-core",
   "author": "@favware",
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "browser": "dist/index.mjs",
+  "unpkg": "dist/index.mjs",
   "typings": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.mjs"
+  },
   "homepage": "https://github.com/favware/syntax-highlighter/tree/main/packages/react#readme",
   "scripts": {
-    "build": "rollup -c rollup.config.ts"
+    "clean": "node scripts/clean.mjs",
+    "build": "run-s clean build:*",
+    "build:1": "node scripts/build.mjs",
+    "build:2": "tsc -p ./tsconfig.types.json",
+    "build:3": "rollup -c"
   },
+  "dependencies": {
+    "@favware/syntax-highlighter-core": "^1.1.1"
+  },
   "peerDependencies": {
-    "@favware/syntax-highlighter-core": "latest",
     "react": "^16.8.x || ^17.x",
@@ -52,3 +64,3 @@ "react-dom": "^16.8.x || ^17.x"
   ],
-  "gitHead": "592f15f08e2210ed1e3096e5ba3ef7ec33578f88"
+  "gitHead": "d9fd0771ce910eda84edf4bbd8489a157622fe6e"
 }

README.md

@@ -9,9 +9,13 @@ <div align="center">
 
-[![GitHub](https://img.shields.io/github/license/favware/syntax-highlighter)](https://github.com/favware/syntax-highlighter/blob/main/LICENSE.md)
-[![npm](https://img.shields.io/npm/v/@favware/syntax-highlighter-react?color=crimson&label=@favware/syntax-highlighter-react&logo=npm)](https://www.npmjs.com/package/@favware/syntax-highlighter-react)
-[![npm](https://img.shields.io/npm/dt/@favware/syntax-highlighter-react.svg?maxAge=3600&logo=npm)](https://www.npmjs.com/package/@favware/syntax-highlighter-react)
-[![npm](https://img.shields.io/bundlephobia/min/@favware/syntax-highlighter-react?label=minified&logo=webpack&maxAge=3600)](https://bundlephobia.com/result?p=@favware/syntax-highlighter-react)
+[![License](https://img.shields.io/github/license/favware/syntax-highlighter?logo=github&maxAge=3600&style=flat-square)](https://github.com/favware/syntax-highlighter/blob/main/LICENSE.md)
 [![Depfu](https://badges.depfu.com/badges/efe23d577642dc26c6636c1630e5cccf/count.svg)](https://depfu.com/github/favware/syntax-highlighter?project_id=21396)
+[![Patreon](https://img.shields.io/badge/donate-patreon-F96854.svg?logo=patreon)](https://donate.favware.tech/patreon)
+
+[![npm](https://img.shields.io/npm/v/@favware/syntax-highlighter-core?color=crimson&logo=npm&style=flat-square&label=@favware/syntax-highlighter-core)](https://www.npmjs.com/package/@favware/syntax-highlighter-core)
+[![npm](https://img.shields.io/npm/v/@favware/syntax-highlighter-react?color=crimson&logo=npm&style=flat-square&label=@favware/syntax-highlighter-react)](https://www.npmjs.com/package/@favware/syntax-highlighter-react)
+
 [![Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d)](https://stenciljs.com)
 
+[![Support Server](https://discord.com/api/guilds/254360814063058944/embed.png?style=banner2)](https://join.favware.tech)
+
 </div>
@@ -18,0 +22,0 @@

CHANGELOG.md

-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.1.0](https://github.com/favware/syntax-highlighter/compare/v1.0.1...v1.1.0) (2021-01-26)
-
-### Features
-
-- expose clipboardJsError event & fix for latest StencilJS and PrismJS ([3c8cf80](https://github.com/favware/syntax-highlighter/commit/3c8cf8004abc8d07e55d66e6be1daa11303ffad9))
-
-## [1.0.1](https://github.com/favware/syntax-highlighter/compare/v1.0.0...v1.0.1) (2020-08-06)
-
-**Note:** Version bump only for package @favware/syntax-highlighter-react
-
-# [1.0.0](https://github.com/favware/syntax-highlighter/compare/v0.1.0-alpha.3...v1.0.0) (2020-06-12)
-
-**Note:** Version bump only for package @favware/syntax-highlighter-react
-
-# [0.1.0-alpha.2](https://github.com/favware/syntax-highlighter/compare/v0.1.0-alpha.1...v0.1.0-alpha.2) (2020-06-11)
-
-**Note:** Version bump only for package @favware/syntax-highlighter-react
-
-# [0.1.0-alpha.1](https://github.com/favware/syntax-highlighter/compare/v0.1.0-alpha.0...v0.1.0-alpha.1) (2020-06-11)
-
-### Bug Fixes
-
-- **react:** fixed react build ([bab8808](https://github.com/favware/syntax-highlighter/commit/bab88081665b00db36ceb32c047fbc65c32e85e0))
-
-### Features
-
-- **core:** support TSX syntax ([fedd28c](https://github.com/favware/syntax-highlighter/commit/fedd28c41281d25ae78dbb92988f44525a3c46f2))
-
-# 0.1.0-alpha.0 (2020-06-11)
-
-### Features
-
-- rewrite to mono repo ([a6b1a6c](https://github.com/favware/syntax-highlighter/commit/a6b1a6c63cf0770de2c95a324338597b3bfce6cd))

dist/index.d.ts.map

-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAK5D,eAAO,MAAM,iBAAiB,suJAA+G,CAAC"}

dist/index.es.js

-import e from"react";import"react-dom";import{defineCustomElements as t}from"@favware/syntax-highlighter-core/loader";const n=(e,t,n)=>{const r=t.className||t.class,s=n.className||n.class,c=o(e),a=o(r?r.split(" "):[]),i=o(s?s.split(" "):[]),l=[];return c.forEach((e=>{a.has(e)?(l.push(e),a.delete(e)):i.has(e)||l.push(e)})),a.forEach((e=>l.push(e))),l.join(" ")},r=(e,t)=>{const n="on"+e;let r=n in t;if(!r){const e=t.createElement("div");e.setAttribute(n,"return;"),r="function"==typeof e[n]}return r},s=(e,t,n)=>{const r=e.__events||(e.__events={}),s=r[t];s&&e.removeEventListener(t,s),e.addEventListener(t,r[t]=function(e){n&&n.call(this,e)})},o=e=>{const t=new Map;return e.forEach((e=>t.set(e,e))),t},c=(...e)=>t=>e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)})),a=(t,o,a)=>{const i=t.toLowerCase().split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");const l=class extends e.Component{constructor(e){super(e),Object.defineProperty(this,"componentEl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"setComponentElRef",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.componentEl=e}})}componentDidMount(){this.componentDidUpdate(this.props)}componentDidUpdate(e){((e,t,o={})=>{if(e instanceof Element){const c=n(e.classList,t,o);""!==c&&(e.className=c),Object.keys(t).forEach((n=>{if("children"!==n&&"style"!==n&&"ref"!==n&&"class"!==n&&"className"!==n&&"forwardedRef"!==n)if(0===n.indexOf("on")&&n[2]===n[2].toUpperCase()){const o=n.substring(2),c=o[0].toLowerCase()+o.substring(1);"undefined"==typeof document||r(c,document)||s(e,c,t[n])}else e[n]=t[n],"string"==typeof t[n]?e.setAttribute(n.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t[n]):e[n]=t[n]}))}})(this.componentEl,this.props,e)}render(){const n=this.props,{children:s,forwardedRef:o,style:i,className:l,ref:p}=n,f=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(e);s<r.length;s++)t.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(e,r[s])&&(n[r[s]]=e[r[s]])}return n}(n,["children","forwardedRef","style","className","ref"]);let d=Object.keys(f).reduce(((e,t)=>{if(0===t.indexOf("on")&&t[2]===t[2].toUpperCase()){const n=t.substring(2).toLowerCase();"undefined"!=typeof document&&r(n,document)&&(e[t]=f[t])}else e[t]=f[t];return e}),{});a&&(d=a(this.props,d));let u=Object.assign(Object.assign({},d),{ref:c(o,this.setComponentElRef),style:i});return e.createElement(t,u,s)}static get displayName(){return i}};return o&&(l.contextType=o),((t,n)=>{const r=(n,r)=>e.createElement(t,Object.assign({},n,{forwardedRef:r}));return r.displayName=n,e.forwardRef(r)})(l,i)};t();const i=a("syntax-highlighter");export{i as SyntaxHighlighter};
-//# sourceMappingURL=index.es.js.map

dist/index.es.js.map

-{"version":3,"file":"index.es.js","sources":["../src/react-component-lib/utils/case.ts","../src/react-component-lib/utils/attachProps.ts","../src/react-component-lib/utils/index.tsx","../src/react-component-lib/createComponent.tsx","../src/index.ts"],"sourcesContent":["export const dashToPascalCase = (str: string) =>\n  str\n    .toLowerCase()\n    .split('-')\n    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))\n    .join('');\nexport const camelToDashCase = (str: string) =>\n  str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);\n","import { camelToDashCase } from './case';\n\nexport const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {\n  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first\n  if (node instanceof Element) {\n    // add any classes in className to the class list\n    const className = getClassName(node.classList, newProps, oldProps);\n    if (className !== '') {\n      node.className = className;\n    }\n\n    Object.keys(newProps).forEach((name) => {\n      if (\n        name === 'children' ||\n        name === 'style' ||\n        name === 'ref' ||\n        name === 'class' ||\n        name === 'className' ||\n        name === 'forwardedRef'\n      ) {\n        return;\n      }\n      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n        const eventName = name.substring(2);\n        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);\n\n        if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {\n          syncEvent(node, eventNameLc, newProps[name]);\n        }\n      } else {\n        (node as any)[name] = newProps[name];\n        const propType = typeof newProps[name];\n        if (propType === 'string') {\n          node.setAttribute(camelToDashCase(name), newProps[name]);\n        } else {\n          (node as any)[name] = newProps[name];\n        }\n      }\n    });\n  }\n};\n\nexport const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {\n  const newClassProp: string = newProps.className || newProps.class;\n  const oldClassProp: string = oldProps.className || oldProps.class;\n  // map the classes to Maps for performance\n  const currentClasses = arrayToMap(classList);\n  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);\n  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);\n  const finalClassNames: string[] = [];\n  // loop through each of the current classes on the component\n  // to see if it should be a part of the classNames added\n  currentClasses.forEach((currentClass) => {\n    if (incomingPropClasses.has(currentClass)) {\n      // add it as its already included in classnames coming in from newProps\n      finalClassNames.push(currentClass);\n      incomingPropClasses.delete(currentClass);\n    } else if (!oldPropClasses.has(currentClass)) {\n      // add it as it has NOT been removed by user\n      finalClassNames.push(currentClass);\n    }\n  });\n  incomingPropClasses.forEach((s) => finalClassNames.push(s));\n  return finalClassNames.join(' ');\n};\n\n/**\n * Checks if an event is supported in the current execution environment.\n * @license Modernizr 3.0.0pre (Custom Build) | MIT\n */\nexport const isCoveredByReact = (eventNameSuffix: string, doc: Document) => {\n  const eventName = 'on' + eventNameSuffix;\n  let isSupported = eventName in doc;\n\n  if (!isSupported) {\n    const element = doc.createElement('div');\n    element.setAttribute(eventName, 'return;');\n    isSupported = typeof (element as any)[eventName] === 'function';\n  }\n\n  return isSupported;\n};\n\nexport const syncEvent = (\n  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },\n  eventName: string,\n  newEventHandler?: (e: Event) => any,\n) => {\n  const eventStore = node.__events || (node.__events = {});\n  const oldEventHandler = eventStore[eventName];\n\n  // Remove old listener so they don't double up.\n  if (oldEventHandler) {\n    node.removeEventListener(eventName, oldEventHandler);\n  }\n\n  // Bind new listener.\n  node.addEventListener(\n    eventName,\n    (eventStore[eventName] = function handler(e: Event) {\n      if (newEventHandler) {\n        newEventHandler.call(this, e);\n      }\n    }),\n  );\n};\n\nconst arrayToMap = (arr: string[] | DOMTokenList) => {\n  const map = new Map<string, string>();\n  (arr as string[]).forEach((s: string) => map.set(s, s));\n  return map;\n};\n","import React from 'react';\n\nimport type { StyleReactProps } from '../interfaces';\n\ntype Mutable<T> = { -readonly [P in keyof T]-?: T[P] }; // Remove readonly and ?\n\nexport type StencilReactExternalProps<PropType, ElementType> = PropType &\n  Omit<React.HTMLAttributes<ElementType>, 'style'> &\n  StyleReactProps;\n\n// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx\nexport const mergeRefs = <ElementType,>(...refs: React.Ref<ElementType>[]) => (\n  value: ElementType,\n) =>\n  refs.forEach((ref) => {\n    if (typeof ref === 'function') {\n      ref(value);\n    } else if (ref != null) {\n      // This is typed as readonly so we need to allow for override\n      (ref as Mutable<React.RefObject<ElementType>>).current = value;\n    }\n  });\n\nexport const createForwardRef = <PropType, ElementType>(\n  ReactComponent: any,\n  displayName: string,\n) => {\n  const forwardRef = (\n    props: StencilReactExternalProps<PropType, ElementType>,\n    ref: React.Ref<ElementType>,\n  ) => {\n    return <ReactComponent {...props} forwardedRef={ref} />;\n  };\n  forwardRef.displayName = displayName;\n\n  return React.forwardRef(forwardRef);\n};\n\nexport * from './attachProps';\nexport * from './case';\n","import React from 'react';\n\nimport {\n  attachProps,\n  createForwardRef,\n  dashToPascalCase,\n  isCoveredByReact,\n  mergeRefs,\n} from './utils';\n\nexport interface HTMLStencilElement extends HTMLElement {\n  componentOnReady(): Promise<this>;\n}\n\ninterface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {\n  forwardedRef: React.RefObject<ElementType>;\n  ref?: React.Ref<any>;\n}\n\nexport const createReactComponent = <\n  PropType,\n  ElementType extends HTMLStencilElement,\n  ContextStateType = {},\n  ExpandedPropsTypes = {}\n>(\n  tagName: string,\n  ReactComponentContext?: React.Context<ContextStateType>,\n  manipulatePropsFunction?: (\n    originalProps: StencilReactInternalProps<ElementType>,\n    propsToPass: any,\n  ) => ExpandedPropsTypes,\n) => {\n  const displayName = dashToPascalCase(tagName);\n\n  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {\n    componentEl!: ElementType;\n\n    setComponentElRef = (element: ElementType) => {\n      this.componentEl = element;\n    };\n\n    constructor(props: StencilReactInternalProps<ElementType>) {\n      super(props);\n    }\n\n    componentDidMount() {\n      this.componentDidUpdate(this.props);\n    }\n\n    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {\n      attachProps(this.componentEl, this.props, prevProps);\n    }\n\n    render() {\n      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;\n\n      let propsToPass = Object.keys(cProps).reduce((acc, name) => {\n        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n          const eventName = name.substring(2).toLowerCase();\n          if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {\n            (acc as any)[name] = (cProps as any)[name];\n          }\n        } else {\n          (acc as any)[name] = (cProps as any)[name];\n        }\n        return acc;\n      }, {});\n\n      if (manipulatePropsFunction) {\n        propsToPass = manipulatePropsFunction(this.props, propsToPass);\n      }\n\n      let newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {\n        ...propsToPass,\n        ref: mergeRefs(forwardedRef, this.setComponentElRef),\n        style,\n      };\n\n      return React.createElement(tagName, newProps, children);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n  };\n\n  // If context was passed to createReactComponent then conditionally add it to the Component Class\n  if (ReactComponentContext) {\n    ReactComponent.contextType = ReactComponentContext;\n  }\n\n  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);\n};\n","/* eslint-disable */\n/* tslint:disable */\n/* auto-generated react proxies */\nimport { createReactComponent } from './react-component-lib';\n\nimport type { JSX } from '@favware/syntax-highlighter-core';\n\nimport { defineCustomElements } from '@favware/syntax-highlighter-core/loader';\n\ndefineCustomElements();\nexport const SyntaxHighlighter = /*@__PURE__*/createReactComponent<JSX.SyntaxHighlighter, HTMLSyntaxHighlighterElement>('syntax-highlighter');\n"],"names":["getClassName","classList","newProps","oldProps","newClassProp","className","class","oldClassProp","currentClasses","arrayToMap","incomingPropClasses","split","oldPropClasses","finalClassNames","forEach","currentClass","has","push","delete","s","join","isCoveredByReact","eventNameSuffix","doc","eventName","isSupported","element","createElement","setAttribute","syncEvent","node","newEventHandler","eventStore","__events","oldEventHandler","removeEventListener","addEventListener","e","call","this","arr","map","Map","set","mergeRefs","refs","value","ref","current","createReactComponent","tagName","ReactComponentContext","manipulatePropsFunction","displayName","toLowerCase","segment","charAt","toUpperCase","slice","ReactComponent","React","Component","[object Object]","props","super","Object","componentEl","componentDidUpdate","prevProps","Element","keys","name","indexOf","substring","eventNameLc","document","replace","m","attachProps","_a","children","forwardedRef","style","cProps","propsToPass","reduce","acc","setComponentElRef","contextType","forwardRef","createForwardRef","defineCustomElements","SyntaxHighlighter"],"mappings":"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"}

dist/index.js

-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("react-dom");var t=require("@favware/syntax-highlighter-core/loader");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);const s=(e,t,r)=>{const n=t.className||t.class,s=r.className||r.class,o=c(e),a=c(n?n.split(" "):[]),i=c(s?s.split(" "):[]),l=[];return o.forEach((e=>{a.has(e)?(l.push(e),a.delete(e)):i.has(e)||l.push(e)})),a.forEach((e=>l.push(e))),l.join(" ")},o=(e,t)=>{const r="on"+e;let n=r in t;if(!n){const e=t.createElement("div");e.setAttribute(r,"return;"),n="function"==typeof e[r]}return n},a=(e,t,r)=>{const n=e.__events||(e.__events={}),s=n[t];s&&e.removeEventListener(t,s),e.addEventListener(t,n[t]=function(e){r&&r.call(this,e)})},c=e=>{const t=new Map;return e.forEach((e=>t.set(e,e))),t},i=(...e)=>t=>e.forEach((e=>{"function"==typeof e?e(t):null!=e&&(e.current=t)})),l=(e,t,r)=>{const c=e.toLowerCase().split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");const l=class extends n.default.Component{constructor(e){super(e),Object.defineProperty(this,"componentEl",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"setComponentElRef",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.componentEl=e}})}componentDidMount(){this.componentDidUpdate(this.props)}componentDidUpdate(e){((e,t,r={})=>{if(e instanceof Element){const n=s(e.classList,t,r);""!==n&&(e.className=n),Object.keys(t).forEach((r=>{if("children"!==r&&"style"!==r&&"ref"!==r&&"class"!==r&&"className"!==r&&"forwardedRef"!==r)if(0===r.indexOf("on")&&r[2]===r[2].toUpperCase()){const n=r.substring(2),s=n[0].toLowerCase()+n.substring(1);"undefined"==typeof document||o(s,document)||a(e,s,t[r])}else e[r]=t[r],"string"==typeof t[r]?e.setAttribute(r.replace(/([A-Z])/g,(e=>`-${e[0].toLowerCase()}`)),t[r]):e[r]=t[r]}))}})(this.componentEl,this.props,e)}render(){const t=this.props,{children:s,forwardedRef:a,style:c,className:l,ref:f}=t,p=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(n=Object.getOwnPropertySymbols(e);s<n.length;s++)t.indexOf(n[s])<0&&Object.prototype.propertyIsEnumerable.call(e,n[s])&&(r[n[s]]=e[n[s]])}return r}(t,["children","forwardedRef","style","className","ref"]);let u=Object.keys(p).reduce(((e,t)=>{if(0===t.indexOf("on")&&t[2]===t[2].toUpperCase()){const r=t.substring(2).toLowerCase();"undefined"!=typeof document&&o(r,document)&&(e[t]=p[t])}else e[t]=p[t];return e}),{});r&&(u=r(this.props,u));let d=Object.assign(Object.assign({},u),{ref:i(a,this.setComponentElRef),style:c});return n.default.createElement(e,d,s)}static get displayName(){return c}};return t&&(l.contextType=t),((e,t)=>{const r=(t,r)=>n.default.createElement(e,Object.assign({},t,{forwardedRef:r}));return r.displayName=t,n.default.forwardRef(r)})(l,c)};t.defineCustomElements();const f=l("syntax-highlighter");exports.SyntaxHighlighter=f;
-//# sourceMappingURL=index.js.map

dist/index.js.map

-{"version":3,"file":"index.js","sources":["../src/react-component-lib/utils/case.ts","../src/react-component-lib/utils/attachProps.ts","../src/react-component-lib/utils/index.tsx","../src/react-component-lib/createComponent.tsx","../src/index.ts"],"sourcesContent":["export const dashToPascalCase = (str: string) =>\n  str\n    .toLowerCase()\n    .split('-')\n    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))\n    .join('');\nexport const camelToDashCase = (str: string) =>\n  str.replace(/([A-Z])/g, (m: string) => `-${m[0].toLowerCase()}`);\n","import { camelToDashCase } from './case';\n\nexport const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {\n  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first\n  if (node instanceof Element) {\n    // add any classes in className to the class list\n    const className = getClassName(node.classList, newProps, oldProps);\n    if (className !== '') {\n      node.className = className;\n    }\n\n    Object.keys(newProps).forEach((name) => {\n      if (\n        name === 'children' ||\n        name === 'style' ||\n        name === 'ref' ||\n        name === 'class' ||\n        name === 'className' ||\n        name === 'forwardedRef'\n      ) {\n        return;\n      }\n      if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n        const eventName = name.substring(2);\n        const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);\n\n        if (typeof document !== 'undefined' && !isCoveredByReact(eventNameLc, document)) {\n          syncEvent(node, eventNameLc, newProps[name]);\n        }\n      } else {\n        (node as any)[name] = newProps[name];\n        const propType = typeof newProps[name];\n        if (propType === 'string') {\n          node.setAttribute(camelToDashCase(name), newProps[name]);\n        } else {\n          (node as any)[name] = newProps[name];\n        }\n      }\n    });\n  }\n};\n\nexport const getClassName = (classList: DOMTokenList, newProps: any, oldProps: any) => {\n  const newClassProp: string = newProps.className || newProps.class;\n  const oldClassProp: string = oldProps.className || oldProps.class;\n  // map the classes to Maps for performance\n  const currentClasses = arrayToMap(classList);\n  const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);\n  const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);\n  const finalClassNames: string[] = [];\n  // loop through each of the current classes on the component\n  // to see if it should be a part of the classNames added\n  currentClasses.forEach((currentClass) => {\n    if (incomingPropClasses.has(currentClass)) {\n      // add it as its already included in classnames coming in from newProps\n      finalClassNames.push(currentClass);\n      incomingPropClasses.delete(currentClass);\n    } else if (!oldPropClasses.has(currentClass)) {\n      // add it as it has NOT been removed by user\n      finalClassNames.push(currentClass);\n    }\n  });\n  incomingPropClasses.forEach((s) => finalClassNames.push(s));\n  return finalClassNames.join(' ');\n};\n\n/**\n * Checks if an event is supported in the current execution environment.\n * @license Modernizr 3.0.0pre (Custom Build) | MIT\n */\nexport const isCoveredByReact = (eventNameSuffix: string, doc: Document) => {\n  const eventName = 'on' + eventNameSuffix;\n  let isSupported = eventName in doc;\n\n  if (!isSupported) {\n    const element = doc.createElement('div');\n    element.setAttribute(eventName, 'return;');\n    isSupported = typeof (element as any)[eventName] === 'function';\n  }\n\n  return isSupported;\n};\n\nexport const syncEvent = (\n  node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } },\n  eventName: string,\n  newEventHandler?: (e: Event) => any,\n) => {\n  const eventStore = node.__events || (node.__events = {});\n  const oldEventHandler = eventStore[eventName];\n\n  // Remove old listener so they don't double up.\n  if (oldEventHandler) {\n    node.removeEventListener(eventName, oldEventHandler);\n  }\n\n  // Bind new listener.\n  node.addEventListener(\n    eventName,\n    (eventStore[eventName] = function handler(e: Event) {\n      if (newEventHandler) {\n        newEventHandler.call(this, e);\n      }\n    }),\n  );\n};\n\nconst arrayToMap = (arr: string[] | DOMTokenList) => {\n  const map = new Map<string, string>();\n  (arr as string[]).forEach((s: string) => map.set(s, s));\n  return map;\n};\n","import React from 'react';\n\nimport type { StyleReactProps } from '../interfaces';\n\ntype Mutable<T> = { -readonly [P in keyof T]-?: T[P] }; // Remove readonly and ?\n\nexport type StencilReactExternalProps<PropType, ElementType> = PropType &\n  Omit<React.HTMLAttributes<ElementType>, 'style'> &\n  StyleReactProps;\n\n// The comma in the type is to trick typescript because it things a single generic in a tsx file is jsx\nexport const mergeRefs = <ElementType,>(...refs: React.Ref<ElementType>[]) => (\n  value: ElementType,\n) =>\n  refs.forEach((ref) => {\n    if (typeof ref === 'function') {\n      ref(value);\n    } else if (ref != null) {\n      // This is typed as readonly so we need to allow for override\n      (ref as Mutable<React.RefObject<ElementType>>).current = value;\n    }\n  });\n\nexport const createForwardRef = <PropType, ElementType>(\n  ReactComponent: any,\n  displayName: string,\n) => {\n  const forwardRef = (\n    props: StencilReactExternalProps<PropType, ElementType>,\n    ref: React.Ref<ElementType>,\n  ) => {\n    return <ReactComponent {...props} forwardedRef={ref} />;\n  };\n  forwardRef.displayName = displayName;\n\n  return React.forwardRef(forwardRef);\n};\n\nexport * from './attachProps';\nexport * from './case';\n","import React from 'react';\n\nimport {\n  attachProps,\n  createForwardRef,\n  dashToPascalCase,\n  isCoveredByReact,\n  mergeRefs,\n} from './utils';\n\nexport interface HTMLStencilElement extends HTMLElement {\n  componentOnReady(): Promise<this>;\n}\n\ninterface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {\n  forwardedRef: React.RefObject<ElementType>;\n  ref?: React.Ref<any>;\n}\n\nexport const createReactComponent = <\n  PropType,\n  ElementType extends HTMLStencilElement,\n  ContextStateType = {},\n  ExpandedPropsTypes = {}\n>(\n  tagName: string,\n  ReactComponentContext?: React.Context<ContextStateType>,\n  manipulatePropsFunction?: (\n    originalProps: StencilReactInternalProps<ElementType>,\n    propsToPass: any,\n  ) => ExpandedPropsTypes,\n) => {\n  const displayName = dashToPascalCase(tagName);\n\n  const ReactComponent = class extends React.Component<StencilReactInternalProps<ElementType>> {\n    componentEl!: ElementType;\n\n    setComponentElRef = (element: ElementType) => {\n      this.componentEl = element;\n    };\n\n    constructor(props: StencilReactInternalProps<ElementType>) {\n      super(props);\n    }\n\n    componentDidMount() {\n      this.componentDidUpdate(this.props);\n    }\n\n    componentDidUpdate(prevProps: StencilReactInternalProps<ElementType>) {\n      attachProps(this.componentEl, this.props, prevProps);\n    }\n\n    render() {\n      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;\n\n      let propsToPass = Object.keys(cProps).reduce((acc, name) => {\n        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n          const eventName = name.substring(2).toLowerCase();\n          if (typeof document !== 'undefined' && isCoveredByReact(eventName, document)) {\n            (acc as any)[name] = (cProps as any)[name];\n          }\n        } else {\n          (acc as any)[name] = (cProps as any)[name];\n        }\n        return acc;\n      }, {});\n\n      if (manipulatePropsFunction) {\n        propsToPass = manipulatePropsFunction(this.props, propsToPass);\n      }\n\n      let newProps: Omit<StencilReactInternalProps<ElementType>, 'forwardedRef'> = {\n        ...propsToPass,\n        ref: mergeRefs(forwardedRef, this.setComponentElRef),\n        style,\n      };\n\n      return React.createElement(tagName, newProps, children);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n  };\n\n  // If context was passed to createReactComponent then conditionally add it to the Component Class\n  if (ReactComponentContext) {\n    ReactComponent.contextType = ReactComponentContext;\n  }\n\n  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);\n};\n","/* eslint-disable */\n/* tslint:disable */\n/* auto-generated react proxies */\nimport { createReactComponent } from './react-component-lib';\n\nimport type { JSX } from '@favware/syntax-highlighter-core';\n\nimport { defineCustomElements } from '@favware/syntax-highlighter-core/loader';\n\ndefineCustomElements();\nexport const SyntaxHighlighter = /*@__PURE__*/createReactComponent<JSX.SyntaxHighlighter, HTMLSyntaxHighlighterElement>('syntax-highlighter');\n"],"names":["getClassName","classList","newProps","oldProps","newClassProp","className","class","oldClassProp","currentClasses","arrayToMap","incomingPropClasses","split","oldPropClasses","finalClassNames","forEach","currentClass","has","push","delete","s","join","isCoveredByReact","eventNameSuffix","doc","eventName","isSupported","element","createElement","setAttribute","syncEvent","node","newEventHandler","eventStore","__events","oldEventHandler","removeEventListener","addEventListener","e","call","this","arr","map","Map","set","mergeRefs","refs","value","ref","current","createReactComponent","tagName","ReactComponentContext","manipulatePropsFunction","displayName","toLowerCase","segment","charAt","toUpperCase","slice","ReactComponent","React","Component","[object Object]","props","super","Object","componentEl","componentDidUpdate","prevProps","Element","keys","name","indexOf","substring","eventNameLc","document","replace","m","attachProps","_a","children","forwardedRef","style","cProps","propsToPass","reduce","acc","setComponentElRef","contextType","forwardRef","createForwardRef","defineCustomElements","SyntaxHighlighter"],"mappings":"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"}

dist/react-component-lib/createComponent.d.ts

-import React from 'react';
-export interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
-}
-interface StencilReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
-    forwardedRef: React.RefObject<ElementType>;
-    ref?: React.Ref<any>;
-}
-export declare const createReactComponent: <PropType, ElementType extends HTMLStencilElement, ContextStateType = {}, ExpandedPropsTypes = {}>(tagName: string, ReactComponentContext?: React.Context<ContextStateType>, manipulatePropsFunction?: (originalProps: StencilReactInternalProps<ElementType>, propsToPass: any) => ExpandedPropsTypes) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("./utils").StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
-export {};
-// # sourceMappingURL=createComponent.d.ts.map

dist/react-component-lib/createComponent.d.ts.map

-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/createComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACnC;AAED,UAAU,yBAAyB,CAAC,WAAW,CAAE,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACxF,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,8GAMtB,MAAM,0JAIA,GAAG,yLA+DnB,CAAC"}

dist/react-component-lib/createOverlayComponent.d.ts

-import { OverlayEventDetail } from './interfaces';
-import React from 'react';
-interface OverlayElement extends HTMLElement {
-    present: () => Promise<void>;
-    dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
-}
-export interface ReactOverlayProps {
-    children?: React.ReactNode;
-    isOpen: boolean;
-    onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
-    onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-    onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
-    onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-}
-export declare const createOverlayComponent: <OverlayComponent extends object, OverlayType extends OverlayElement>(displayName: string, controller: {
-    create: (options: any) => Promise<OverlayType>;
-}) => React.ForwardRefExoticComponent<React.PropsWithoutRef<OverlayComponent & ReactOverlayProps & {
-    forwardedRef?: React.RefObject<OverlayType>;
-}> & React.RefAttributes<OverlayType>>;
-export {};
-// # sourceMappingURL=createOverlayComponent.d.ts.map

dist/react-component-lib/createOverlayComponent.d.ts.map

-{"version":3,"file":"createOverlayComponent.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/createOverlayComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,cAAe,SAAQ,WAAW;IAC1C,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CACtE;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;CAClE;AAED,eAAO,MAAM,sBAAsB,qFAIpB,MAAM;sBACa,GAAG;;;sCAyGpC,CAAC"}

dist/react-component-lib/index.d.ts

-export { createReactComponent } from './createComponent';
-export { createOverlayComponent } from './createOverlayComponent';
-// # sourceMappingURL=index.d.ts.map

dist/react-component-lib/index.d.ts.map

-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

dist/react-component-lib/interfaces.d.ts

-export interface EventEmitter<T = any> {
-    emit: (data?: T) => CustomEvent<T>;
-}
-export interface StyleReactProps {
-    class?: string;
-    className?: string;
-    style?: {
-        [key: string]: any;
-    };
-}
-export interface OverlayEventDetail<T = any> {
-    data?: T;
-    role?: string;
-}
-export interface OverlayInterface {
-    el: HTMLElement;
-    animated: boolean;
-    keyboardClose: boolean;
-    overlayIndex: number;
-    presented: boolean;
-    enterAnimation?: any;
-    leaveAnimation?: any;
-    didPresent: EventEmitter<void>;
-    willPresent: EventEmitter<void>;
-    willDismiss: EventEmitter<OverlayEventDetail>;
-    didDismiss: EventEmitter<OverlayEventDetail>;
-    present(): Promise<void>;
-    dismiss(data?: any, role?: string): Promise<boolean>;
-}
-// # sourceMappingURL=interfaces.d.ts.map

dist/react-component-lib/interfaces.d.ts.map

-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/react-component-lib/interfaces.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG;IACnC,IAAI,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CAChC;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG;IACzC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,WAAW,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IAEnB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC;IAErB,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IAChC,WAAW,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAC9C,UAAU,EAAE,YAAY,CAAC,kBAAkB,CAAC,CAAC;IAE7C,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACtD"}

dist/react-component-lib/utils/attachProps.d.ts

-export declare const attachProps: (node: HTMLElement, newProps: any, oldProps?: any) => void;
-export declare const getClassName: (classList: DOMTokenList, newProps: any, oldProps: any) => string;
-/**
- * Checks if an event is supported in the current execution environment.
- * @license Modernizr 3.0.0pre (Custom Build) | MIT
- */
-export declare const isCoveredByReact: (eventNameSuffix: string, doc: Document) => boolean;
-export declare const syncEvent: (node: Element & {
-    __events?: {
-        [key: string]: (e: Event) => any;
-    };
-}, eventName: string, newEventHandler?: (e: Event) => any) => void;
-// # sourceMappingURL=attachProps.d.ts.map

dist/react-component-lib/utils/attachProps.d.ts.map

-{"version":3,"file":"attachProps.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/attachProps.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,SAAU,WAAW,YAAY,GAAG,aAAY,GAAG,SAsC1E,CAAC;AAEF,eAAO,MAAM,YAAY,cAAe,YAAY,YAAY,GAAG,YAAY,GAAG,WAsBjF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,oBAAqB,MAAM,OAAO,QAAQ,YAWtE,CAAC;AAEF,eAAO,MAAM,SAAS;;2BAC+B,KAAK,KAAK,GAAG;;cACrD,MAAM,wBACK,KAAK,KAAK,GAAG,SAmBpC,CAAC"}

dist/react-component-lib/utils/case.d.ts

-export declare const dashToPascalCase: (str: string) => string;
-export declare const camelToDashCase: (str: string) => string;
-// # sourceMappingURL=case.d.ts.map

dist/react-component-lib/utils/case.d.ts.map

-{"version":3,"file":"case.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/case.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,QAAS,MAAM,WAK/B,CAAC;AACd,eAAO,MAAM,eAAe,QAAS,MAAM,WACuB,CAAC"}

dist/react-component-lib/utils/dev.d.ts

-export declare const isDevMode: () => boolean;
-export declare const deprecationWarning: (key: string, message: string) => void;
-// # sourceMappingURL=dev.d.ts.map

dist/react-component-lib/utils/dev.d.ts.map

-{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/dev.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,eAErB,CAAC;AAIF,eAAO,MAAM,kBAAkB,QAAS,MAAM,WAAW,MAAM,SAO9D,CAAC"}

dist/react-component-lib/utils/index.d.ts

-import React from 'react';
-import type { StyleReactProps } from '../interfaces';
-export declare type StencilReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & StyleReactProps;
-export declare const mergeRefs: <ElementType>(...refs: React.Ref<ElementType>[]) => (value: ElementType) => void;
-export declare const createForwardRef: <PropType, ElementType>(ReactComponent: any, displayName: string) => React.ForwardRefExoticComponent<React.PropsWithoutRef<StencilReactExternalProps<PropType, ElementType>> & React.RefAttributes<ElementType>>;
-export * from './attachProps';
-export * from './case';
-// # sourceMappingURL=index.d.ts.map

dist/react-component-lib/utils/index.d.ts.map

-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-component-lib/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,oBAAY,yBAAyB,CAAC,QAAQ,EAAE,WAAW,IAAI,QAAQ,GACrE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAChD,eAAe,CAAC;AAGlB,eAAO,MAAM,SAAS,kFAUlB,CAAC;AAEL,eAAO,MAAM,gBAAgB,0CACX,GAAG,eACN,MAAM,gJAWpB,CAAC;AAEF,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}

New alerts

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

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

174

33.85%

Number of low quality alerts

0

-100%

Number of lines in readme file

102

4.08%

Worsened metrics

Total package byte prevSize

31064

-43.61%

Number of package files

6

-76.92%

Dependency changes

• + Added

  @favware/syntax-highlighter-core@^1.1.1