@vitus-labs/core 2.0.0-alpha.27 → 2.0.0-alpha.28

package/README.md

@@ -21,7 +21,7 @@ npm install @vitus-labs/core
 import { Provider, context, config, init } from '@vitus-labs/core'
 ```
 
-**Provider** wraps your app with a theme context. It bridges styled-components' `ThemeProvider` with the internal context system.
+**Provider** wraps your app with a theme context. It bridges the active CSS-in-JS connector's `ThemeProvider` with the internal context system.
 
 ```tsx
 import { Provider } from '@vitus-labs/core'
@@ -31,14 +31,21 @@ import { Provider } from '@vitus-labs/core'
 </Provider>
 ```
 
-**config / init** — configure the styling engine. By default wired to `styled-components`, but can be swapped for another CSS-in-JS library.
+**config / init** — configure the styling engine via a connector package. The `init()` function accepts the connector's exports and sets up the CSS-in-JS bridge.
 
 ```tsx
-import { config } from '@vitus-labs/core'
+import { init, config } from '@vitus-labs/core'
+import connector from '@vitus-labs/connector-styler'
 
+// Initialize once at app startup
+init({ ...connector, component: 'div', textComponent: 'span' })
+
+// Access the engine from anywhere
 const { styled, css } = config
 ```
 
+Available connectors: `connector-styler` (recommended), `connector-emotion`, `connector-styled-components`, `connector-native` (React Native).
+
 ### Utilities
 
 #### compose
@@ -140,7 +147,6 @@ Both have corresponding TypeScript union types: `HTMLTags` and `HTMLTextTags`.
 | Package | Version |
 | ------- | ------- |
 | react | >= 19 |
-| styled-components | >= 6 |
 
 ## License
 

package/lib/index.d.ts

@@ -164,6 +164,11 @@ interface CSSEngineConnector {
 interface PlatformConfig {
   component: ComponentType | HTMLTags;
   textComponent: ComponentType | HTMLTags;
+  createMediaQueries?: (props: {
+    breakpoints: Record<string, number>;
+    rootSize: number;
+    css: CSSEngineConnector['css'];
+  }) => Record<string, (...args: any[]) => any>;
 }
 type InitConfig = Partial<CSSEngineConnector & PlatformConfig>;
 /**
@@ -188,6 +193,7 @@ declare class Configuration {
   _useTheme: CSSEngineConnector['useTheme'] | null;
   component: ComponentType | HTMLTags;
   textComponent: ComponentType | HTMLTags;
+  createMediaQueries: PlatformConfig['createMediaQueries'];
   /**
    * Stable CSS delegate. When the engine is available, delegates immediately.
    * When not (module load time before init), returns a thunk that resolves
@@ -196,7 +202,7 @@ declare class Configuration {
   css: (strings: TemplateStringsArray, ...values: any[]) => any;
   /**
    * Stable styled delegate (Proxy). Supports `styled(tag)` and `styled.div`.
-   * When the engine is not yet available, returns a lazy forwardRef component
+   * When the engine is not yet available, returns a lazy component
    * that creates the real styled component on first render.
    */
   styled: CSSEngineConnector['styled'];

package/lib/index.js

@@ -1,4 +1,4 @@
-import { cloneElement, createContext, createElement, forwardRef, isValidElement, useMemo, useRef } from "react";
+import { cloneElement, createContext, createElement, isValidElement, useMemo, useRef } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { isFragment, isMemo, isValidElementType } from "react-is";
 
@@ -20,17 +20,14 @@ const notConfigured = (_name) => {
 const createStyledDelegate = (self) => {
 	const createLazy = (tag, options, strings, values) => {
 		let Real = null;
-		const Lazy = forwardRef((props, ref) => {
+		const Lazy = (props) => {
 			if (!Real) {
 				const engine = self._styled;
 				if (!engine) return notConfigured("styled");
 				Real = options ? engine(tag, options)(strings, ...values) : engine(tag)(strings, ...values);
 			}
-			return createElement(Real, {
-				...props,
-				ref
-			});
-		});
+			return createElement(Real, props);
+		};
 		Lazy.displayName = `styled(${typeof tag === "string" ? tag : tag.displayName || tag.name || "Component"})`;
 		return Lazy;
 	};
@@ -70,6 +67,7 @@ var Configuration = class {
 	_useTheme = null;
 	component = "div";
 	textComponent = "span";
+	createMediaQueries = void 0;
 	/**
 	* Stable CSS delegate. When the engine is available, delegates immediately.
 	* When not (module load time before init), returns a thunk that resolves
@@ -85,7 +83,7 @@ var Configuration = class {
 	};
 	/**
 	* Stable styled delegate (Proxy). Supports `styled(tag)` and `styled.div`.
-	* When the engine is not yet available, returns a lazy forwardRef component
+	* When the engine is not yet available, returns a lazy component
 	* that creates the real styled component on first render.
 	*/
 	styled;
@@ -128,6 +126,7 @@ var Configuration = class {
 		if (props.useTheme) this._useTheme = props.useTheme;
 		if (props.component) this.component = props.component;
 		if (props.textComponent) this.textComponent = props.textComponent;
+		if (props.createMediaQueries) this.createMediaQueries = props.createMediaQueries;
 	};
 };
 const config = new Configuration();
@@ -476,33 +475,29 @@ const parsePath = (path) => {
 	if (Array.isArray(path)) return path;
 	return path.match(PATH_RE) ?? [];
 };
+const isUnsafeKey = (key) => key === "__proto__" || key === "prototype" || key === "constructor";
 const get = (obj, path, defaultValue) => {
 	const keys = parsePath(path);
 	let result = obj;
 	for (const key of keys) {
-		if (result == null) return defaultValue;
+		if (result == null || isUnsafeKey(key)) return defaultValue;
 		result = result[key];
 	}
 	return result === void 0 ? defaultValue : result;
 };
-const UNSAFE_KEYS = new Set([
-	"__proto__",
-	"prototype",
-	"constructor"
-]);
 const set = (obj, path, value) => {
 	const keys = parsePath(path);
 	let current = obj;
 	for (let i = 0; i < keys.length - 1; i++) {
 		const key = keys[i];
-		if (UNSAFE_KEYS.has(key)) return obj;
+		if (isUnsafeKey(key)) return obj;
 		const nextKey = keys[i + 1];
-		if (UNSAFE_KEYS.has(nextKey)) return obj;
+		if (isUnsafeKey(nextKey)) return obj;
 		if (current[key] == null) current[key] = /^\d+$/.test(nextKey) ? [] : {};
 		current = current[key];
 	}
 	const lastKey = keys[keys.length - 1];
-	if (lastKey != null && !UNSAFE_KEYS.has(lastKey)) current[lastKey] = value;
+	if (lastKey != null && !isUnsafeKey(lastKey)) current[lastKey] = value;
 	return obj;
 };
 const throttle = (fn, wait = 0, options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/core",
-  "version": "2.0.0-alpha.27",
+  "version": "2.0.0-alpha.28",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -14,6 +14,7 @@
     "types": "./lib/index.d.ts"
   },
   "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
   "files": [
     "lib",
     "!lib/**/*.map",
@@ -58,8 +59,7 @@
     "react-is": "^19.2.4"
   },
   "devDependencies": {
-    "@vitus-labs/tools-rolldown": "1.9.1-alpha.19",
-    "@vitus-labs/tools-typescript": "1.9.1-alpha.19"
-  },
-  "gitHead": "6230c7b4eb1f8fe52bd47275cf72cdcab706cb45"
+    "@vitus-labs/tools-rolldown": "2.0.0",
+    "@vitus-labs/tools-typescript": "2.0.0"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023-present Vit Bokisch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.