@tsrx/core 0.1.17 → 0.1.19

package/src/transform/scoping.js

@@ -119,7 +119,7 @@ export function annotate_with_hash(
 			return node;
 		}
 		if (!is_style_element(node) && !is_composite_element(node)) {
-			add_hash_class(node, hash);
+			add_hash_class(node, hash, jsx_class_attr_name);
 		}
 		if (Array.isArray(node.children)) {
 			node.children = node.children
@@ -184,13 +184,14 @@ export function annotate_component_with_hash(
 }
 
 /**
- * Ensure the element carries a `class` attribute containing the scoping hash.
+ * Ensure the element carries a class attribute containing the scoping hash.
  *
  * @param {any} element
  * @param {string} hash
+ * @param {'class' | 'className'} [class_attr_name='class']
  * @returns {void}
  */
-export function add_hash_class(element, hash) {
+export function add_hash_class(element, hash, class_attr_name = 'class') {
 	const attrs = element.attributes || (element.attributes = []);
 	const existing = attrs.find(
 		(/** @type {any} */ a) =>
@@ -203,7 +204,7 @@ export function add_hash_class(element, hash) {
 	if (!existing) {
 		attrs.push({
 			type: 'Attribute',
-			name: b.id('class'),
+			name: b.id(class_attr_name),
 			value: { type: 'Literal', value: hash, raw: JSON.stringify(hash) },
 		});
 		return;
@@ -249,18 +250,6 @@ function add_hash_class_to_jsx_element(element, hash, jsx_class_attr_name) {
 		return;
 	}
 
-	if (existing.name.name !== jsx_class_attr_name) {
-		existing.name = {
-			type: 'JSXIdentifier',
-			name: jsx_class_attr_name,
-			metadata: {
-				...(existing.name.metadata || { path: [] }),
-				source_name: existing.name.name,
-				source_length: existing.name.name.length,
-			},
-		};
-	}
-
 	const value = existing.value;
 	if (!value) {
 		existing.value = { type: 'Literal', value: hash, raw: JSON.stringify(hash) };

package/src/transform/style-ref.js

@@ -3,6 +3,8 @@
 import * as b from '../utils/builders.js';
 import { clone_expression_node, clone_identifier } from './jsx/ast-builders.js';
 
+const regex_backslash_and_following_character = /\\(.)/g;
+
 /**
  * @typedef {{
  *   allowMutableRefTarget?: boolean;
@@ -19,7 +21,7 @@ import { clone_expression_node, clone_identifier } from './jsx/ast-builders.js';
 export function create_style_class_map(component, css) {
 	const hash = css?.hash ?? null;
 	const top_scoped_classes = /** @type {Map<string, any>} */ (
-		component?.metadata?.topScopedClasses ?? new Map()
+		component?.metadata?.topScopedClasses ?? collect_style_class_map_entries(css)
 	);
 	const class_names = [...top_scoped_classes.keys()].sort();
 
@@ -30,6 +32,28 @@ export function create_style_class_map(component, css) {
 	);
 }
 
+/**
+ * @param {any} css
+ * @returns {AST.ObjectExpression}
+ */
+export function create_style_class_map_from_stylesheet(css) {
+	return create_style_class_map(
+		{ metadata: { topScopedClasses: collect_style_class_map_entries(css) } },
+		css,
+	);
+}
+
+/**
+ * @param {any} style_element
+ * @returns {any | null}
+ */
+export function get_style_element_stylesheet(style_element) {
+	return (
+		style_element?.children?.find?.((/** @type {any} */ child) => child.type === 'StyleSheet') ??
+		null
+	);
+}
+
 /**
  * @param {any} node
  * @param {any[]} [refs]
@@ -233,3 +257,70 @@ function is_function_or_class_boundary(node) {
 		node?.type === 'ClassExpression'
 	);
 }
+
+/**
+ * @param {any} css
+ * @returns {Map<string, any>}
+ */
+function collect_style_class_map_entries(css) {
+	const entries = new Map();
+	collect_rule_class_map_entries(css, entries);
+	return entries;
+}
+
+/**
+ * @param {any} node
+ * @param {Map<string, any>} entries
+ * @returns {void}
+ */
+function collect_rule_class_map_entries(node, entries) {
+	if (!node || typeof node !== 'object') return;
+
+	if (Array.isArray(node)) {
+		for (const child of node) collect_rule_class_map_entries(child, entries);
+		return;
+	}
+
+	if (node.type === 'ComplexSelector') {
+		const class_selector = get_standalone_class_selector(node);
+		if (class_selector) {
+			const name = class_selector.name.replace(regex_backslash_and_following_character, '$1');
+			if (!entries.has(name)) {
+				entries.set(name, {
+					start: class_selector.start,
+					end: class_selector.end,
+					selector: class_selector,
+				});
+			}
+		}
+	}
+
+	if (is_function_or_class_boundary(node)) {
+		return;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		collect_rule_class_map_entries(node[key], entries);
+	}
+}
+
+/**
+ * @param {any} complex_selector
+ * @returns {any | null}
+ */
+function get_standalone_class_selector(complex_selector) {
+	if (complex_selector?.children?.length !== 1) return null;
+	const relative_selector = complex_selector.children[0];
+	if (
+		relative_selector?.metadata?.is_global ||
+		relative_selector?.metadata?.is_global_like ||
+		relative_selector?.selectors?.length !== 1
+	) {
+		return null;
+	}
+	const selector = relative_selector.selectors[0];
+	return selector?.type === 'ClassSelector' ? selector : null;
+}

package/types/index.d.ts

@@ -26,6 +26,7 @@ export { createJsxTransform };
 
 export function collectStyleRefAttributes(node: any, refs?: any[]): any[];
 export function createStyleClassMap(component: any, css: any): AST.ObjectExpression;
+export function createStyleClassMapFromStylesheet(css: any): AST.ObjectExpression;
 export function createStyleRefSetupStatements(
 	refAttributes: any[],
 	styleMap: AST.Expression,
@@ -35,6 +36,7 @@ export function createStyleRefSetupStatements(
 		visitExpression?: (expression: AST.Expression) => AST.Expression;
 	},
 ): AST.Statement[];
+export function getStyleElementStylesheet(styleElement: any): any | null;
 
 /**
  * Compile error interface
@@ -100,11 +102,15 @@ interface BaseNodeMetaData {
 }
 
 interface FunctionMetaData extends BaseNodeMetaData {
+	native_tsrx?: boolean;
 	native_tsrx_function?: boolean;
+	hook_split?: boolean;
 	is_method?: boolean;
 	tracked?: boolean;
 	has_lazy_descendants?: boolean;
 	synthetic_children?: boolean;
+	generated_helpers?: any[];
+	generated_statics?: any[];
 }
 
 // Strip parent, loc, and range from TSESTree nodes to match @sveltejs/acorn-typescript output
@@ -161,6 +167,13 @@ declare module 'estree' {
 		};
 	}
 
+	interface BlockStatement {
+		metadata: BaseNodeMetaData & {
+			hook_split_block?: boolean;
+			native_return_block?: boolean;
+		};
+	}
+
 	type Accessibility = 'public' | 'protected' | 'private'; // missing in acorn-typescript types
 	interface MethodDefinition {
 		typeParameters?: TSTypeParameterDeclaration;
@@ -236,6 +249,7 @@ declare module 'estree' {
 	}
 
 	interface ExpressionMap {
+		Tsrx: Tsrx;
 		Text: TextNode;
 		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
 		ParenthesizedExpression: ParenthesizedExpression;
@@ -341,7 +355,7 @@ declare module 'estree' {
 		closingElement: ESTreeJSX.JSXClosingElement;
 	}
 
-	interface Tsrx extends AST.BaseNode {
+	interface Tsrx extends AST.BaseExpression {
 		type: 'Tsrx';
 		attributes: Array<any>;
 		children: AST.Node[];
@@ -647,6 +661,12 @@ declare module 'estree-jsx' {
 		};
 	}
 
+	interface JSXOpeningElement {
+		metadata: BaseNodeMetaData & {
+			native_tsrx_pretransformed?: boolean;
+		};
+	}
+
 	interface JSXExpressionContainer {
 		text?: boolean;
 		style?: boolean;

package/types/jsx-platform.d.ts

@@ -42,6 +42,7 @@ export interface JsxTransformContext {
 	needs_for_of_iterable: boolean;
 	needs_iteration_value_type: boolean;
 	stylesheets: AST.CSS.StyleSheet[];
+	type_only_style_anchors: AST.Statement[];
 	module_scoped_hook_components: boolean;
 	helper_state: {
 		base_name: string;
@@ -154,13 +155,6 @@ export interface JsxPlatformHooks {
 	 * state behaves like normal component state.
 	 */
 	wrapHelperComponent?: (helperFn: any, helperId: any, ctx: any, sourceNode: any) => any;
-	/**
-	 * Wrap an uppercase JavaScript function that returns native TSRX as a target
-	 * component. Vue uses this to turn `function App() { return <></>; }` into a
-	 * `defineVaporComponent(function App() { ... })` binding while lowercase
-	 * TSRX-returning callbacks stay plain functions.
-	 */
-	wrapNativeFunctionComponent?: (fn: any, ctx: any, path: any[]) => any;
 	/**
 	 * Emit hook-isolation helper components as unique module-scope declarations
 	 * instead of lazily creating and caching them from the parent component body.
@@ -354,10 +348,15 @@ export interface JsxPlatform {
 
 	jsx: {
 		/**
-		 * Rewrite Ripple's `class` attribute to React's `className`. React: true.
-		 * Preact and Solid accept `class` natively, so: false.
+		 * Rewrite Ripple's `class` attribute to `className` for legacy targets
+		 * that require it. First-party targets keep authored `class`.
 		 */
 		rewriteClassAttr: boolean;
+		/**
+		 * Attribute name to use when TSRX injects scoped CSS classes. This does
+		 * not rewrite authored attributes.
+		 */
+		classAttrName?: 'class' | 'className';
 		/**
 		 * Accepted values of `kind` in `<tsx:kind>` compat blocks. React accepts
 		 * only `'react'`. Preact accepts both `'preact'` and `'react'`.