@vitus-labs/core 1.4.2 → 1.4.3-alpha.1

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import { ThemeProvider, css, styled } from "styled-components";
 import * as React from "react";
 import { ComponentType, FC, ReactNode, cloneElement, createElement } from "react";
 
@@ -137,28 +136,103 @@ type HTMLTagAttrsByTag<T extends HTMLTags> = T extends HTMLTags ? HTMLElementAtt
 //#endregion
 //#region src/config.d.ts
 /**
- * Singleton configuration that bridges the UI system with styled-components.
- * All packages reference `config.css`, `config.styled`, etc. so the styling
- * engine can be swapped at runtime (e.g. for React Native) via `init()`.
+ * Describes the shape of a CSS-in-JS engine connector.
+ * Packages like `@vitus-labs/connector-styler`, `@vitus-labs/connector-emotion`,
+ * and `@vitus-labs/connector-styled-components` export this shape.
+ *
+ * Required properties (`css`, `styled`, `provider`) are consumed by config
+ * across all packages. Optional properties (`keyframes`, `createGlobalStyle`,
+ * `useTheme`) are exposed for direct use in application code.
  */
-interface Internal {
-  css: typeof css;
-  styled: typeof styled;
-  provider: typeof ThemeProvider;
+interface CSSEngineConnector {
+  /** Tagged template for composable CSS fragments. */
+  css: (strings: TemplateStringsArray, ...values: any[]) => any;
+  /** Component factory: `styled(tag)`\`...\`` → React component. */
+  styled: ((tag: any, options?: any) => (strings: TemplateStringsArray, ...values: any[]) => any) & Record<string, any>;
+  /** ThemeProvider component wrapping children with a theme context. */
+  provider: FC<{
+    theme: any;
+    children: ReactNode;
+  }>;
+  /** Tagged template for @keyframes animations. */
+  keyframes?: (strings: TemplateStringsArray, ...values: any[]) => any;
+  /** Factory for injecting global CSS. */
+  createGlobalStyle?: (strings: TemplateStringsArray, ...values: any[]) => any;
+  /** Hook to read the current theme from the engine's context. */
+  useTheme?: () => any;
+  /** Hook that resolves CSS template → className without a component wrapper. */
+  useCSS?: (template: any, props?: Record<string, any>, boost?: boolean) => string;
+}
+interface PlatformConfig {
   component: ComponentType | HTMLTags;
   textComponent: ComponentType | HTMLTags;
 }
+type InitConfig = Partial<CSSEngineConnector & PlatformConfig>;
+/**
+ * Singleton configuration that bridges the UI system with the chosen
+ * CSS-in-JS engine. All packages reference `config.css`, `config.styled`,
+ * etc. — the engine is swapped via `init()` with a connector.
+ *
+ * The `css` and `styled` properties are **stable delegate functions** that
+ * can be safely destructured at module level (`const { styled, css } = config`).
+ * They internally read the latest engine reference set by `init()`.
+ *
+ * When destructured before `init()` is called:
+ * - `css` returns a thunk (function) that resolves at render time
+ * - `styled` returns a lazy component that creates the real component on first render
+ */
 declare class Configuration {
-  css: Internal['css'];
-  styled: Internal['styled'];
-  ExternalProvider: Internal['provider'];
-  component: Internal['component'];
-  textComponent: Internal['textComponent'];
-  constructor(props: Internal);
-  init: (props: Partial<Internal>) => void;
+  _css: CSSEngineConnector['css'] | null;
+  _styled: CSSEngineConnector['styled'] | null;
+  _provider: CSSEngineConnector['provider'] | null;
+  _keyframes: CSSEngineConnector['keyframes'] | null;
+  _createGlobalStyle: CSSEngineConnector['createGlobalStyle'] | null;
+  _useTheme: CSSEngineConnector['useTheme'] | null;
+  _useCSS: CSSEngineConnector['useCSS'] | null;
+  component: ComponentType | HTMLTags;
+  textComponent: ComponentType | HTMLTags;
+  /**
+   * Stable CSS delegate. When the engine is available, delegates immediately.
+   * When not (module load time before init), returns a thunk that resolves
+   * at render time — all CSS-in-JS engines treat functions as interpolations.
+   */
+  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
+   * that creates the real styled component on first render.
+   */
+  styled: CSSEngineConnector['styled'];
+  /** The external ThemeProvider from the configured engine. */
+  get ExternalProvider(): CSSEngineConnector['provider'] | null;
+  /** Keyframes factory from the configured engine, or null. */
+  get keyframes(): CSSEngineConnector['keyframes'] | null;
+  /** Global style factory from the configured engine, or null. */
+  get createGlobalStyle(): CSSEngineConnector['createGlobalStyle'] | null;
+  /** Theme hook from the configured engine, or null. */
+  get useTheme(): CSSEngineConnector['useTheme'] | null;
+  /**
+   * Stable useCSS delegate. Delegates to the engine's useCSS hook at call
+   * time (render phase). Safe to destructure at module level — like `css`,
+   * reads the latest engine reference set by `init()`.
+   */
+  useCSS: (template: any, props?: Record<string, any>, boost?: boolean) => string;
+  constructor();
+  /**
+   * Initialize or swap the CSS-in-JS engine. Must be called before any
+   * component renders (typically at the app entry point).
+   *
+   * @example
+   * ```typescript
+   * import { init } from '@vitus-labs/core'
+   * import * as connector from '@vitus-labs/connector-styler'
+   * init(connector)
+   * ```
+   */
+  init: (props: InitConfig) => void;
 }
 declare const config: Configuration;
-declare const init: (props: Partial<Internal>) => void;
+declare const init: (props: InitConfig) => void;
 //#endregion
 //#region src/types.d.ts
 interface Breakpoints {
@@ -247,5 +321,5 @@ declare const throttle: <T extends (...args: any[]) => any>(fn: T, wait?: number
 };
 declare const merge: <T extends Record<string, any>>(target: T, ...sources: Record<string, any>[]) => T;
 //#endregion
-export { type BreakpointKeys, type Breakpoints, type HTMLElementAttrs, type HTMLTagAttrsByTag, type HTMLTags, type HTMLTextTags, HTML_TAGS, HTML_TEXT_TAGS, type IsEmpty, Provider, type Render, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useStableValue };
+export { type BreakpointKeys, type Breakpoints, type CSSEngineConnector, type HTMLElementAttrs, type HTMLTagAttrsByTag, type HTMLTags, type HTMLTextTags, HTML_TAGS, HTML_TEXT_TAGS, type IsEmpty, Provider, type Render, compose, config, context, get, hoistNonReactStatics, init, isEmpty, isEqual, merge, omit, pick, render, set, throttle, useStableValue };
 //# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -1,5 +1,4 @@
-import { ThemeProvider, css, styled } from "styled-components";
-import { cloneElement, createContext, createElement, isValidElement, useMemo, useRef } from "react";
+import { cloneElement, createContext, createElement, forwardRef, isValidElement, useMemo, useRef } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { isFragment, isMemo, isValidElementType } from "react-is";
 
@@ -15,34 +14,135 @@ const compose = (...fns) => (p) => fns.reduceRight((acc, cur) => cur(acc), p);
 
 //#endregion
 //#region src/config.ts
+const notConfigured = (_name) => {
+	throw new Error("[@vitus-labs/core] CSS engine not configured. Call init() with a connector before rendering.\n\n  import { init } from '@vitus-labs/core'\n  import * as connector from '@vitus-labs/connector-styler'\n  init(connector)\n");
+};
+const createStyledDelegate = (self) => {
+	const createLazy = (tag, options, strings, values) => {
+		let Real = null;
+		const Lazy = forwardRef((props, ref) => {
+			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
+			});
+		});
+		Lazy.displayName = `styled(${typeof tag === "string" ? tag : tag.displayName || tag.name || "Component"})`;
+		return Lazy;
+	};
+	const factory = (tag, options) => {
+		return (strings, ...values) => {
+			if (self._styled) return options ? self._styled(tag, options)(strings, ...values) : self._styled(tag)(strings, ...values);
+			return createLazy(tag, options, strings, values);
+		};
+	};
+	return new Proxy(factory, { get(_target, prop) {
+		if (prop === "prototype" || prop === "$$typeof") return void 0;
+		return (strings, ...values) => {
+			if (self._styled) return self._styled[prop](strings, ...values);
+			return createLazy(prop, void 0, strings, values);
+		};
+	} });
+};
+/**
+* Singleton configuration that bridges the UI system with the chosen
+* CSS-in-JS engine. All packages reference `config.css`, `config.styled`,
+* etc. — the engine is swapped via `init()` with a connector.
+*
+* The `css` and `styled` properties are **stable delegate functions** that
+* can be safely destructured at module level (`const { styled, css } = config`).
+* They internally read the latest engine reference set by `init()`.
+*
+* When destructured before `init()` is called:
+* - `css` returns a thunk (function) that resolves at render time
+* - `styled` returns a lazy component that creates the real component on first render
+*/
 var Configuration = class {
-	css;
-	styled;
-	ExternalProvider;
+	_css = null;
+	_styled = null;
+	_provider = null;
+	_keyframes = null;
+	_createGlobalStyle = null;
+	_useTheme = null;
+	_useCSS = null;
 	component = "div";
 	textComponent = "span";
-	constructor(props) {
-		this.css = props.css;
-		this.styled = props.styled;
-		this.ExternalProvider = props.provider;
-		this.component = props.component;
-		this.textComponent = props.textComponent;
+	/**
+	* Stable CSS delegate. When the engine is available, delegates immediately.
+	* When not (module load time before init), returns a thunk that resolves
+	* at render time — all CSS-in-JS engines treat functions as interpolations.
+	*/
+	css = (strings, ...values) => {
+		if (this._css) return this._css(strings, ...values);
+		return () => {
+			const engine = this._css;
+			if (!engine) return notConfigured("css");
+			return engine(strings, ...values);
+		};
+	};
+	/**
+	* Stable styled delegate (Proxy). Supports `styled(tag)` and `styled.div`.
+	* When the engine is not yet available, returns a lazy forwardRef component
+	* that creates the real styled component on first render.
+	*/
+	styled;
+	/** The external ThemeProvider from the configured engine. */
+	get ExternalProvider() {
+		return this._provider;
+	}
+	/** Keyframes factory from the configured engine, or null. */
+	get keyframes() {
+		return this._keyframes ?? null;
+	}
+	/** Global style factory from the configured engine, or null. */
+	get createGlobalStyle() {
+		return this._createGlobalStyle ?? null;
+	}
+	/** Theme hook from the configured engine, or null. */
+	get useTheme() {
+		return this._useTheme ?? null;
+	}
+	/**
+	* Stable useCSS delegate. Delegates to the engine's useCSS hook at call
+	* time (render phase). Safe to destructure at module level — like `css`,
+	* reads the latest engine reference set by `init()`.
+	*/
+	useCSS = (template, props, boost) => {
+		const hook = this._useCSS;
+		if (!hook) return notConfigured("useCSS");
+		return hook(template, props, boost);
+	};
+	constructor() {
+		this.styled = createStyledDelegate(this);
 	}
+	/**
+	* Initialize or swap the CSS-in-JS engine. Must be called before any
+	* component renders (typically at the app entry point).
+	*
+	* @example
+	* ```typescript
+	* import { init } from '@vitus-labs/core'
+	* import * as connector from '@vitus-labs/connector-styler'
+	* init(connector)
+	* ```
+	*/
 	init = (props) => {
-		if (props.css) this.css = props.css;
-		if (props.styled) this.styled = props.styled;
-		if (props.provider) this.ExternalProvider = props.provider;
+		if (props.css) this._css = props.css;
+		if (props.styled) this._styled = props.styled;
+		if (props.provider) this._provider = props.provider;
+		if (props.keyframes) this._keyframes = props.keyframes;
+		if (props.createGlobalStyle) this._createGlobalStyle = props.createGlobalStyle;
+		if (props.useTheme) this._useTheme = props.useTheme;
+		if (props.useCSS) this._useCSS = props.useCSS;
 		if (props.component) this.component = props.component;
 		if (props.textComponent) this.textComponent = props.textComponent;
 	};
 };
-const config = new Configuration({
-	css,
-	styled,
-	provider: ThemeProvider,
-	component: "div",
-	textComponent: "span"
-});
+const config = new Configuration();
 const { init } = config;
 
 //#endregion
@@ -351,12 +451,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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/core",
-  "version": "1.4.2",
+  "version": "1.4.3-alpha.1+cf4e0a6",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -9,6 +9,7 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "source": "./src/index.ts",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
@@ -51,8 +52,7 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "react": ">= 19",
-    "styled-components": ">= 6"
+    "react": ">= 19"
   },
   "dependencies": {
     "react-is": "^19.2.3"
@@ -61,5 +61,5 @@
     "@vitus-labs/tools-rolldown": "^1.6.0",
     "@vitus-labs/tools-typescript": "^1.6.0"
   },
-  "gitHead": "f12f43c61149964ff4f3f4b80cb6f92da2825915"
+  "gitHead": "cf4e0a6230687c5c7acc2e07a3248bae4ae55f07"
 }