@arcmantle/lit-jsx 1.0.0

package/src/compiler/config.ts

@@ -0,0 +1,77 @@
+//
+export const COMPONENT_LITERAL_PREFIX = '__$';
+export const COMPONENT_POSTFIX = '.tag';
+export const WHITESPACE_TAGS: string[] = [ 'pre', 'textarea' ];
+export const SPECIAL_TAGS: string[] = [];
+export const ATTR_NAMES = {
+	REF:          'ref',
+	CLASS_LIST:   'classList',
+	STYLE_LIST:   'styleList',
+	DIRECTIVE:    'directive',
+	EVENT_PREFIX: 'on-',
+} as const;
+export const ATTR_BIND_OBJ_NAME = 'as';
+export const ATTR_VALUES = {
+	BOOL: 'bool',
+	PROP:	'prop',
+} as const;
+export const VARIABLES = {
+	HTML:                 'html',
+	HTML_STATIC:          'htmlStatic',
+	SVG:                  'svg',
+	SVG_STATIC:           'svgStatic',
+	MATHML:               'mathml',
+	MATHML_STATIC:        'mathmlStatic',
+	UNSAFE_STATIC:        'unsafeStatic',
+	CLASS_MAP:            'classMap',
+	STYLE_MAP:            'styleMap',
+	REF:                  'ref',
+	REST:                 '__$rest',
+	LITERAL_MAP:          '__$literalMap',
+	TAGGED_TEMPLATE_UTIL: '__$t',
+	BOOLEAN_PART:         'BooleanPart',
+	ATTRIBUTE_PART:       'AttributePart',
+	PROPERTY_PART:        'PropertyPart',
+	ELEMENT_PART:         'ElementPart',
+	EVENT_PART:           'EventPart',
+	CHILD_PART:           'ChildPart',
+} as const;
+export const SOURCES = {
+	HTML:              'lit-html',
+	HTML_ALT:          'lit',
+	HTML_STATIC:       'lit-html/static.js',
+	HTML_STATIC_ALT:   'lit/static-html.js',
+	SVG:               'lit-html/directives/svg.js',
+	SVG_ALT:           'lit/directives/svg.js',
+	MATHML:            'lit-html/directives/mathml.js',
+	MATHML_ALT:        'lit/directives/mathml.js',
+	SVG_STATIC:        'lit-html/static.js',
+	SVG_STATIC_ALT:    'lit/static-html.js',
+	MATHML_STATIC:     'lit-html/static.js',
+	MATHML_STATIC_ALT: 'lit/static-html.js',
+	UNSAFE_STATIC:     'lit-html/static.js',
+	UNSAFE_STATIC_ALT: 'lit/static-html.js',
+	REF:               'lit-html/directives/ref.js',
+	REF_ALT:           'lit/directives/ref.js',
+	CLASS_MAP:         'lit-html/directives/class-map.js',
+	CLASS_MAP_ALT:     'lit/directives/class-map.js',
+	STYLE_MAP:         'lit-html/directives/style-map.js',
+	STYLE_MAP_ALT:     'lit/directives/style-map.js',
+	REST:              'jsx-lit',
+	LITERAL_MAP:       'jsx-lit',
+	JSX_LIT:           'jsx-lit',
+} as const;
+export const ERROR_MESSAGES = {
+	NO_PROGRAM_FOUND:           'No program found for JSX transformation.',
+	INVALID_OPENING_TAG:        'Invalid opening tag found.',
+	EMPTY_JSX_EXPRESSION:       'Empty JSX expression found.',
+	ONLY_STRING_LITERALS:       'Only string literals are supported for JSX attributes.',
+	INVALID_DIRECTIVE_VALUE:    'Invalid value in directive expression.',
+	UNKNOWN_JSX_ATTRIBUTE_TYPE: 'Unknown JSX attribute type found.',
+	EMPTY_EXPRESSION:           'Empty expression found in JSX.',
+	IDENTIFIER_NOT_FOUND:       (name: string): string => `Identifier '${ name }' not found in any accessible scope`,
+	TAG_NAME_NOT_FOUND:         (tagName: string): string => `Tag name '${ tagName }' not found in any accessible scope`,
+	NO_STATEMENT_PATH:          (tagName: string): string => `Could not find statement-level path for tagName: ${ tagName }`,
+	UNKNOWN_TEMPLATE_TYPE:      (type: string): string => `Unknown template type: ${ type }`,
+	INVALID_BIND_TYPE:          (type: string): string => `Invalid bind type: ${ type }`,
+} as const;

package/src/compiler/postprocess.ts

@@ -0,0 +1,7 @@
+import type { PluginPass } from '@babel/core';
+import type { VisitNodeFunction } from '@babel/traverse';
+import type { Program } from '@babel/types';
+
+
+export const postprocess: VisitNodeFunction<PluginPass, Program> = (...args): void => {
+};

package/src/compiler/preprocess.ts

@@ -0,0 +1,40 @@
+import type { PluginPass } from '@babel/core';
+import type { VisitNodeFunction } from '@babel/traverse';
+import { isJSXElement, isJSXIdentifier, type Program } from '@babel/types';
+import { isValidHTMLNesting } from 'validate-html-nesting';
+
+import { isComponent } from './compiler-utils.js';
+
+
+// From https://github.com/MananTank/babel-plugin-validate-jsx-nesting/blob/main/src/index.js
+const JSXValidator = {
+	JSXElement(path: any) {
+		const elName = path.node.openingElement.name;
+		const parent = path.parent;
+
+		if (!isJSXElement(parent) || !isJSXIdentifier(elName))
+			return;
+
+		const elTagName = elName.name;
+		if (isComponent(elTagName))
+			return;
+
+		const parentElName = parent.openingElement.name;
+		if (!isJSXIdentifier(parentElName))
+			return;
+
+		const parentElTagName = parentElName.name;
+		if (!isComponent(parentElTagName)) {
+			if (!isValidHTMLNesting(parentElTagName, elTagName)) {
+				throw path.buildCodeFrameError(
+				`Invalid JSX: <${ elTagName }> cannot be child of <${ parentElTagName }>`,
+				);
+			}
+		}
+	},
+};
+
+
+export const preprocess: VisitNodeFunction<PluginPass, Program> = (path, state): void => {
+	path.traverse(JSXValidator);
+};

package/src/compiler/transform-jsx.ts

@@ -0,0 +1,36 @@
+import { type PluginPass } from '@babel/core';
+import type { NodePath, VisitNode } from '@babel/traverse';
+import * as t from '@babel/types';
+
+import { getTemplateType, isJSXElementStatic, isJSXFunctionElementComponent } from './compiler-utils.js';
+import { CompiledTranspiler, TemplateTranspiler } from './transpiler.js';
+
+
+export const transformJSXElement: VisitNode<
+	PluginPass, t.JSXElement | t.JSXFragment
+> = (path): void => {
+	// If the parent is a JSX element, we do not need to transform it.
+	// The below condition will handle the case where the JSX element
+	// is nested inside another JSX element.
+	if (t.isJSXElement(path.parent) || t.isJSXFragment(path.parent))
+		return;
+
+	// If the parent is not a JSX element,
+	// we need to wrap the JSX in a tagged template expression
+	return void path.replaceWith(processJSXElement(path));
+};
+
+
+const processJSXElement = (path: NodePath<t.JSXElement | t.JSXFragment>) => {
+	const isStatic = isJSXElementStatic(path);
+	const templateType = getTemplateType(path);
+	const isFunctionComponent = isJSXFunctionElementComponent(path);
+
+	if (isFunctionComponent)
+		return new TemplateTranspiler().createFunctionalComponent(path);
+
+	if (isStatic || templateType !== 'html')
+		return new TemplateTranspiler().start(path);
+
+	return new CompiledTranspiler().start(path);
+};