@vitus-labs/core 2.0.0-alpha.9 → 2.0.0-beta.0

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

package/lib/index.js

@@ -70,6 +70,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
@@ -128,6 +129,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();
@@ -439,12 +441,8 @@ const HTML_TEXT_TAGS = [
 const render = (content, attachProps) => {
 	if (!content) return null;
 	const render = (child) => attachProps ? createElement(child, attachProps) : createElement(child);
-	if ([
-		"number",
-		"boolean",
-		"bigint",
-		"string"
-	].includes(typeof content)) return content;
+	const t = typeof content;
+	if (t === "string" || t === "number" || t === "boolean" || t === "bigint") return content;
 	if (Array.isArray(content) || isFragment(content)) return content;
 	if (isValidElementType(content)) return render(content);
 	if (isValidElement(content)) {
@@ -480,33 +478,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.9+f2f47db",
+  "version": "2.0.0-beta.0",
   "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",
@@ -55,11 +56,11 @@
     "react": ">= 19"
   },
   "dependencies": {
-    "react-is": "^19.2.3"
+    "react-is": "^19.2.4"
   },
   "devDependencies": {
-    "@vitus-labs/tools-rolldown": "^1.6.0",
-    "@vitus-labs/tools-typescript": "^1.6.0"
+    "@vitus-labs/tools-rolldown": "1.10.0",
+    "@vitus-labs/tools-typescript": "1.10.0"
   },
-  "gitHead": "f2f47db887d6a846ee5f9e96f290c59cdde4772a"
+  "gitHead": "dd8b9f356086ecd8bfb69c87fcad1e8bfa9ab1f4"
 }