@acusti/styling 0.3.1 → 0.4.0

package/dist/Style.js

@@ -4,19 +4,19 @@ const { useCallback, useEffect, useRef, useState } = React;
 const Style = ({ children: styles }) => {
     const [ownerDocument, setOwnerDocument] = useState(null);
     const handleRef = useCallback((element) => {
-        if (!element)
-            return;
+        if (!element) return;
         setOwnerDocument(element.ownerDocument);
     }, []);
-    useEffect(() => () => {
-        if (!ownerDocument)
-            return;
-        unregisterStyles({ ownerDocument, styles });
-    }, [ownerDocument]);
+    useEffect(
+        () => () => {
+            if (!ownerDocument) return;
+            unregisterStyles({ ownerDocument, styles });
+        },
+        [ownerDocument],
+    );
     const previousStylesRef = useRef('');
     useEffect(() => {
-        if (!ownerDocument)
-            return;
+        if (!ownerDocument) return;
         updateStyles({
             ownerDocument,
             previousStyles: previousStylesRef.current,
@@ -24,9 +24,8 @@ const Style = ({ children: styles }) => {
         });
         previousStylesRef.current = styles;
     }, [ownerDocument, styles]);
-    if (ownerDocument)
-        return null;
-    return React.createElement("style", { ref: handleRef }, styles);
+    if (ownerDocument) return null;
+    return React.createElement('style', { ref: handleRef }, styles);
 };
 export default Style;
-//# sourceMappingURL=Style.js.map
+//# 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.14.1
  * @flow
  */
 
-declare type Props = {
-  children: string,
-};
+declare type Props = {|
+    children: string,
+|};
 declare var Style: (x: Props) => React$Node | null;
 declare export default typeof Style;

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,3 +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';
-//# sourceMappingURL=index.js.map
+export const SYSTEM_UI_FONT =
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
+//# sourceMappingURL=index.js.map

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.14.1
  * @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.d.ts

@@ -9,5 +9,9 @@ declare type UpdatePayload = {
     previousStyles: string;
     styles: string;
 };
-export declare const updateStyles: ({ ownerDocument, previousStyles, styles, }: UpdatePayload) => void;
+export declare const updateStyles: ({
+    ownerDocument,
+    previousStyles,
+    styles,
+}: UpdatePayload) => void;
 export {};

package/dist/style-registry.js

@@ -1,9 +1,11 @@
 const styleRegistry = new Map();
 export const registerStyles = ({ ownerDocument, styles }) => {
-    if (!styles)
-        return;
+    if (!styles) return;
     const stylesMap = styleRegistry.get(styles);
-    const existingStylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
+    const existingStylesItem =
+        stylesMap === null || stylesMap === void 0
+            ? void 0
+            : stylesMap.get(ownerDocument);
     if (existingStylesItem) {
         existingStylesItem.referenceCount++;
         return;
@@ -20,15 +22,15 @@ export const registerStyles = ({ ownerDocument, styles }) => {
     styleRegistry.set(styles, new Map([[ownerDocument, stylesItem]]));
 };
 export const unregisterStyles = ({ ownerDocument, styles }) => {
-    if (!styles)
-        return;
+    if (!styles) return;
     const stylesMap = styleRegistry.get(styles);
-    const stylesItem = stylesMap === null || stylesMap === void 0 ? void 0 : stylesMap.get(ownerDocument);
-    if (!stylesMap || !stylesItem)
-        return;
+    const stylesItem =
+        stylesMap === null || stylesMap === void 0
+            ? void 0
+            : stylesMap.get(ownerDocument);
+    if (!stylesMap || !stylesItem) return;
     stylesItem.referenceCount--;
-    if (stylesItem.referenceCount)
-        return;
+    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) {
@@ -36,17 +38,15 @@ export const unregisterStyles = ({ ownerDocument, styles }) => {
     }
     // Then remove the document Map
     stylesMap.delete(ownerDocument);
-    if (stylesMap.size)
-        return;
+    if (stylesMap.size) return;
     // If no more references to these styles in any document, remove it entirely
     styleRegistry.delete(styles);
 };
-export const updateStyles = ({ ownerDocument, previousStyles, styles, }) => {
-    if (previousStyles === styles)
-        return;
+export const updateStyles = ({ ownerDocument, previousStyles, styles }) => {
+    if (previousStyles === styles) return;
     if (previousStyles) {
         unregisterStyles({ ownerDocument, styles: previousStyles });
     }
     registerStyles({ ownerDocument, styles });
 };
-//# sourceMappingURL=style-registry.js.map
+//# sourceMappingURL=style-registry.js.map

package/dist/style-registry.js.flow

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

package/package.json

@@ -1,19 +1,20 @@
 {
     "name": "@acusti/styling",
-    "version": "0.3.1",
+    "version": "0.4.0",
     "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"
@@ -21,7 +22,7 @@
     "homepage": "https://github.com/acusti/uikit/tree/main/packages/styling#readme",
     "devDependencies": {
         "@types/react": "^17.0.3",
-        "typescript": "^4.2.3"
+        "typescript": "^4.4.3"
     },
     "peerDependencies": {
         "react": "^16.8 || ^17",

package/src/Style.tsx

@@ -0,0 +1,46 @@
+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);
+
+    const handleRef = useCallback((element: HTMLElement | null) => {
+        if (!element) return;
+        setOwnerDocument(element.ownerDocument);
+    }, []);
+
+    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]);
+
+    if (ownerDocument) return null;
+
+    return <style ref={handleRef}>{styles}</style>;
+};
+
+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 });
+};