@acusti/styling 0.3.1 → 0.5.1

package/README.md

@@ -1,7 +1,7 @@
 # @acusti/styling
 
 [![latest version](https://img.shields.io/npm/v/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
-[![dependencies status](https://img.shields.io/david/acusti/uikit?path=packages%2Fstyling&style=for-the-badge)](https://david-dm.org/acusti/uikit?path=packages%2Fstyling)
+[![dependencies status](https://img.shields.io/librariesio/release/npm/@acusti/styling?style=for-the-badge)](https://libraries.io/npm/@acusti%2Fstyling/sourcerank)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/@acusti/styling?style=for-the-badge)](https://bundlephobia.com/package/@acusti/styling)
 [![downloads per month](https://img.shields.io/npm/dm/@acusti/styling?style=for-the-badge)](https://www.npmjs.com/package/@acusti/styling)
 

package/dist/Style.js

@@ -3,11 +3,6 @@ import { unregisterStyles, updateStyles } from './style-registry.js';
 const { useCallback, useEffect, useRef, useState } = React;
 const Style = ({ children: styles }) => {
     const [ownerDocument, setOwnerDocument] = useState(null);
-    const handleRef = useCallback((element) => {
-        if (!element)
-            return;
-        setOwnerDocument(element.ownerDocument);
-    }, []);
     useEffect(() => () => {
         if (!ownerDocument)
             return;
@@ -24,9 +19,16 @@ const Style = ({ children: styles }) => {
         });
         previousStylesRef.current = styles;
     }, [ownerDocument, styles]);
+    const handleRef = useCallback((element) => {
+        if (!element)
+            return;
+        setOwnerDocument(element.ownerDocument);
+    }, []);
     if (ownerDocument)
         return null;
-    return React.createElement("style", { ref: handleRef }, styles);
+    return (React.createElement("style", { dangerouslySetInnerHTML: {
+            __html: styles,
+        }, ref: handleRef }));
 };
 export default Style;
 //# sourceMappingURL=Style.js.map

package/dist/Style.js.flow

@@ -1,12 +1,12 @@
 /**
  * Flowtype definitions for Style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.13.0
+ * Flowgen v1.20.0
  * @flow
  */
 
-declare type Props = {
+declare type Props = {|
   children: string,
-};
+|};
 declare var Style: (x: Props) => React$Node | null;
 declare export default typeof Style;

package/dist/Style.js.map

@@ -1 +1 @@
-{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAM3D,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAS,EAAE,EAAE;IAC1C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAE1E,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CACL,GAAG,EAAE,CAAC,GAAG,EAAE;QACP,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC;YACT,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO;YACzC,MAAM;SACT,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,+BAAO,GAAG,EAAE,SAAS,IAAG,MAAM,CAAS,CAAC;AACnD,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Style.js","sourceRoot":"","sources":["../src/Style.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;AAM3D,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAS,EAAE,EAAE;IAC1C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAkB,IAAI,CAAC,CAAC;IAE1E,SAAS,CACL,GAAG,EAAE,CAAC,GAAG,EAAE;QACP,IAAI,CAAC,aAAa;YAAE,OAAO;QAC3B,gBAAgB,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC,EACD,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAM,CAAS,EAAE,CAAC,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,aAAa;YAAE,OAAO;QAE3B,YAAY,CAAC;YACT,aAAa;YACb,cAAc,EAAE,iBAAiB,CAAC,OAAO;YACzC,MAAM;SACT,CAAC,CAAC;QAEH,iBAAiB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,OAA2B,EAAE,EAAE;QAC1D,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,aAAa;QAAE,OAAO,IAAI,CAAC;IAE/B,OAAO,CACH,+BACI,uBAAuB,EAAE;YACrB,MAAM,EAAE,MAAM;SACjB,EACD,GAAG,EAAE,SAAS,GAChB,CACL,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/index.js.flow

@@ -1,9 +1,9 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.13.0
+ * Flowgen v1.20.0
  * @flow
  */
 
-declare export { default as Style } from "./Style";
-declare export var SYSTEM_UI_FONT: any; // "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif"
+declare export { default as Style } from "./Style.js";
+declare export var SYSTEM_UI_FONT: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';

package/dist/style-registry.js.flow

@@ -1,20 +1,19 @@
 /**
  * Flowtype definitions for style-registry
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.13.0
+ * Flowgen v1.20.0
  * @flow
  */
 
-declare type Payload = {
+declare type Payload = {|
   ownerDocument: Document,
   styles: string,
-};
+|};
 declare export var registerStyles: (x: Payload) => void;
 declare export var unregisterStyles: (x: Payload) => void;
-declare type UpdatePayload = {
+declare type UpdatePayload = {|
   ownerDocument: Document,
   previousStyles: string,
   styles: string,
-};
+|};
 declare export var updateStyles: (x: UpdatePayload) => void;
-declare export {};

package/package.json

@@ -1,30 +1,31 @@
 {
     "name": "@acusti/styling",
-    "version": "0.3.1",
+    "version": "0.5.1",
     "type": "module",
     "sideEffects": false,
     "exports": "./dist/index.js",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "files": [
-        "dist"
+        "dist",
+        "src"
     ],
     "repository": {
         "type": "git",
         "url": "git+https://github.com/acusti/uikit.git"
     },
-    "author": "andrew patton <andrew@acusti.ca> (http://acusti.ca)",
+    "author": "andrew patton <andrew@acusti.ca> (https://www.acusti.ca)",
     "license": "Unlicense",
     "bugs": {
         "url": "https://github.com/acusti/uikit/issues"
     },
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
     "devDependencies": {
-        "@types/react": "^17.0.3",
-        "typescript": "^4.2.3"
+        "@types/react": "^18.0.15",
+        "typescript": "~4.6.4"
     },
     "peerDependencies": {
-        "react": "^16.8 || ^17",
-        "react-dom": "^16.8 || ^17"
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
     }
 }

package/src/Style.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+import { unregisterStyles, updateStyles } from './style-registry.js';
+
+const { useCallback, useEffect, useRef, useState } = React;
+
+type Props = {
+    children: string;
+};
+
+const Style = ({ children: styles }: Props) => {
+    const [ownerDocument, setOwnerDocument] = useState<Document | null>(null);
+
+    useEffect(
+        () => () => {
+            if (!ownerDocument) return;
+            unregisterStyles({ ownerDocument, styles });
+        },
+        [ownerDocument], // eslint-disable-line react-hooks/exhaustive-deps
+    );
+
+    const previousStylesRef = useRef<string>('');
+
+    useEffect(() => {
+        if (!ownerDocument) return;
+
+        updateStyles({
+            ownerDocument,
+            previousStyles: previousStylesRef.current,
+            styles,
+        });
+
+        previousStylesRef.current = styles;
+    }, [ownerDocument, styles]);
+
+    const handleRef = useCallback((element: HTMLElement | null) => {
+        if (!element) return;
+        setOwnerDocument(element.ownerDocument);
+    }, []);
+
+    if (ownerDocument) return null;
+
+    return (
+        <style
+            dangerouslySetInnerHTML={{
+                __html: styles,
+            }}
+            ref={handleRef}
+        />
+    );
+};
+
+export default Style;

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Style } from './Style.js';
+
+export const SYSTEM_UI_FONT =
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';

package/src/style-registry.ts

@@ -0,0 +1,72 @@
+type StyleRegistry = Map<
+    string,
+    Map<Document, { element: HTMLStyleElement; referenceCount: number }>
+>;
+
+const styleRegistry: StyleRegistry = new Map();
+
+type Payload = { ownerDocument: Document; styles: string };
+
+export const registerStyles = ({ ownerDocument, styles }: Payload) => {
+    if (!styles) return;
+
+    const stylesMap = styleRegistry.get(styles);
+    const existingStylesItem = stylesMap?.get(ownerDocument);
+
+    if (existingStylesItem) {
+        existingStylesItem.referenceCount++;
+        return;
+    }
+
+    const element = ownerDocument.createElement('style');
+    element.setAttribute('data-ukt-styling', '');
+    element.innerHTML = styles;
+    ownerDocument.head.appendChild(element);
+    const stylesItem = { element, referenceCount: 1 };
+
+    if (stylesMap) {
+        stylesMap.set(ownerDocument, stylesItem);
+        return;
+    }
+
+    styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
+};
+
+export const unregisterStyles = ({ ownerDocument, styles }: Payload) => {
+    if (!styles) return;
+
+    const stylesMap = styleRegistry.get(styles);
+    const stylesItem = stylesMap?.get(ownerDocument);
+    if (!stylesMap || !stylesItem) return;
+
+    stylesItem.referenceCount--;
+    if (stylesItem.referenceCount) return;
+
+    // If no more references to these styles in this document, remove <style> element from the DOM
+    const { parentElement } = stylesItem.element;
+    if (parentElement) {
+        parentElement.removeChild(stylesItem.element);
+    }
+    // Then remove the document Map
+    stylesMap.delete(ownerDocument);
+
+    if (stylesMap.size) return;
+    // If no more references to these styles in any document, remove it entirely
+    styleRegistry.delete(styles);
+};
+
+type UpdatePayload = { ownerDocument: Document; previousStyles: string; styles: string };
+
+export const updateStyles = ({
+    ownerDocument,
+    previousStyles,
+    styles,
+}: UpdatePayload) => {
+    if (previousStyles === styles) return;
+
+    if (previousStyles) {
+        unregisterStyles({ ownerDocument, styles: previousStyles });
+    }
+
+    registerStyles({ ownerDocument, styles });
+};